@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;650;750;850;900&display=swap');

:root {
  --bg: #f4efe5;
  --card: #fffaf1;
  --card-2: #fffdf8;
  --ink: #101c17;
  --muted: #5f6c66;
  --line: rgba(16, 28, 23, .14);
  --blue: #3d81c5;
  --blue-dark: #326fae;
  --danger: #b84c4c;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
}

/* Costco shell/create cleanup v16 */
@media (min-width: 761px) {
  .costco-platform-shell {
    grid-template-columns: 264px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .costco-platform-shell .monday-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .costco-platform-shell .monday-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 34px clamp(24px, 3vw, 44px) 44px !important;
  }
}

.costco-topbar {
  display: none !important;
}

.costco-platform-shell .monday-sidebar {
  display: flex !important;
  flex-direction: column !important;
  padding: 26px 14px 18px !important;
  background: #fff !important;
}

.costco-platform-shell .sidebar-brand {
  gap: 18px !important;
  padding: 0 16px 22px !important;
}

.costco-platform-shell .sidebar-brand .costco-wordmark,
.costco-mobile-topbar .costco-wordmark {
  display: inline-grid !important;
  width: max-content !important;
  overflow: visible !important;
  color: var(--costco-red) !important;
  font-size: 36px !important;
  line-height: .82 !important;
  font-weight: 1000 !important;
  letter-spacing: -.095em !important;
  text-transform: uppercase !important;
  transform: skew(-8deg) !important;
}

.costco-platform-shell .sidebar-brand .costco-wordmark small,
.costco-mobile-topbar .costco-wordmark small {
  display: block !important;
  margin-top: 5px !important;
  color: var(--costco-blue) !important;
  font-size: 12px !important;
  line-height: .8 !important;
  font-weight: 1000 !important;
  letter-spacing: -.045em !important;
  border-top: 3px solid var(--costco-blue) !important;
  box-shadow: 0 3px 0 var(--costco-blue) !important;
}

.costco-platform-shell .sidebar-nav,
.costco-platform-shell .clean-sidebar-nav {
  gap: 8px !important;
  margin: 22px 0 0 !important;
}

.costco-platform-shell .sidebar-nav a,
.costco-platform-shell .clean-sidebar-nav a {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  color: var(--costco-navy) !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .clean-sidebar-nav a::before {
  color: inherit !important;
  background: currentColor !important;
}

.costco-platform-shell .sidebar-nav a span,
.costco-platform-shell .clean-sidebar-nav a span {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.costco-platform-shell .sidebar-nav a.active,
.costco-platform-shell .clean-sidebar-nav a.active {
  color: var(--costco-red) !important;
  border-color: rgba(230, 0, 35, .14) !important;
  background: linear-gradient(90deg, rgba(230, 0, 35, .115), rgba(230, 0, 35, .04)) !important;
  box-shadow: inset 4px 0 0 var(--costco-red) !important;
}

.sidebar-notification {
  order: 18 !important;
  position: relative !important;
  margin: auto 0 10px !important;
}

.sidebar-notification summary {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  list-style: none !important;
}

.sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

.sidebar-notification summary:hover {
  background: #f7f9fd !important;
}

.sidebar-notification-icon {
  position: relative !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.sidebar-notification.has-alert summary::after {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 31px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--costco-red) !important;
}

.sidebar-notification summary b {
  min-width: 24px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: var(--costco-red) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-align: center !important;
}

.sidebar-notification-panel {
  margin: 4px 4px 8px !important;
  padding: 10px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(8, 20, 47, .10) !important;
}

.sidebar-notification-panel a,
.sidebar-notification-panel p {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 6px !important;
  color: var(--costco-navy) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.sidebar-notification-panel a:hover {
  background: #f7f9fd !important;
}

.sidebar-notification-panel span {
  color: var(--costco-muted) !important;
  font-weight: 650 !important;
}

.costco-platform-shell .sidebar-logout {
  order: 20 !important;
  margin: 0 0 10px !important;
  grid-template-columns: 28px minmax(0, 1fr) 16px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .workspace-card,
.costco-platform-shell .compact-workspace {
  order: 30 !important;
  grid-template-columns: 46px minmax(0, 1fr) 14px !important;
  column-gap: 12px !important;
  margin: 0 !important;
  padding: 16px 6px 0 !important;
  border-top: 1px solid var(--costco-line) !important;
}

.costco-platform-shell .workspace-card::after {
  align-self: center !important;
}

.costco-platform-shell .workspace-card strong,
.costco-platform-shell .workspace-card small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-create .monday-header {
  max-width: 1160px !important;
  margin: 0 auto 30px !important;
  align-items: start !important;
}

.page-create .create-shell,
.page-create .platform-action-bar {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-create .create-board-form {
  gap: 12px !important;
}

.page-create .work-group {
  border-radius: 9px !important;
}

.page-create .work-group-title {
  grid-template-columns: 36px minmax(0, max-content) minmax(220px, 1fr) !important;
  min-height: auto !important;
  padding: 24px 34px 18px !important;
  column-gap: 16px !important;
}

.page-create .work-group-title::before {
  display: none !important;
}

.page-create .work-group-title .group-dot {
  grid-column: 1 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.page-create .work-group-title strong {
  grid-column: 2 !important;
  font-size: 23px !important;
}

.page-create .work-group-title em {
  grid-column: 3 !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.page-create .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  padding: 0 34px 22px !important;
}

.page-create .group-send .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-create .group-send .wide-field {
  grid-column: 1 / span 1 !important;
}

.page-create .file-tile,
.page-create .field-group {
  padding: 20px 22px !important;
  border-radius: 9px !important;
}

.page-create .file-tile input[type="file"] {
  height: auto !important;
  min-height: 86px !important;
  margin-top: 12px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  color: transparent !important;
  font-size: 0 !important;
  background: linear-gradient(135deg, rgba(230, 0, 35, .035), #fff) !important;
}

.page-create .file-tile input[type="file"]::file-selector-button {
  height: 42px !important;
  margin-right: 14px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
}

.page-create .selected-file-name {
  margin: 8px 0 0 !important;
}

.page-create .file-drop-help {
  margin: 4px 0 0 !important;
}

@media (max-width: 1100px) {
  .page-create .monday-header,
  .page-create .create-shell,
  .page-create .platform-action-bar {
    max-width: none !important;
  }

  .page-create .work-group-title {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }

  .page-create .work-group-title em {
    grid-column: 2 !important;
  }
}

@media (max-width: 760px) {
  .costco-platform-shell {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .costco-platform-shell .monday-main {
    padding: 24px 16px 92px !important;
  }

  .costco-mobile-topbar {
    display: flex !important;
  }

  .page-create .monday-header {
    margin-bottom: 18px !important;
  }

  .page-create .work-group-title {
    padding: 20px 18px 14px !important;
  }

  .page-create .create-grid,
  .page-create .group-send .create-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 18px 18px !important;
  }

  .page-create .group-send .wide-field {
    grid-column: auto !important;
  }

  .page-create .platform-action-bar {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .page-create .file-tile input[type="file"] {
    min-height: 80px !important;
  }
}

/* Costco auth page v13 */
body.costco-auth-page {
  min-height: 100vh !important;
  margin: 0 !important;
  color: #08142f !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(227, 24, 55, .08), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(0, 93, 171, .10), transparent 30%),
    linear-gradient(135deg, #f7f8ff 0%, #eef7ff 100%) !important;
}

.costco-auth-page .auth-shell {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 32px 18px !important;
}

.costco-auth-page .auth-card {
  width: min(100%, 560px) !important;
  padding: 32px 34px 34px !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 24px 70px rgba(8, 20, 47, .13) !important;
  backdrop-filter: blur(12px) !important;
}

.costco-auth-page .auth-brand {
  display: flex !important;
  align-items: flex-end !important;
  gap: 16px !important;
  margin-bottom: 26px !important;
}

.costco-auth-page .auth-brand strong {
  display: block !important;
  color: #08142f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  margin-bottom: 4px !important;
}

.costco-auth-page .auth-brand span:not(.costco-wordmark) {
  color: #1f4f99 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

.costco-auth-page .costco-wordmark {
  flex: 0 0 auto !important;
  font-size: 31px !important;
  line-height: .86 !important;
}

.costco-auth-page .auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 0 28px !important;
  padding: 6px !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 14px !important;
  background: #f7f9fd !important;
}

.costco-auth-page .auth-tab {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #52617a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.costco-auth-page .auth-tab.is-active {
  background: #ffffff !important;
  color: #08142f !important;
  box-shadow: 0 10px 24px rgba(8, 20, 47, .10) !important;
}

.costco-auth-page .auth-heading {
  margin-bottom: 10px !important;
}

.costco-auth-page .auth-heading h1 {
  margin: 0 !important;
  color: #08142f !important;
  font-size: 42px !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.costco-auth-page .auth-heading p,
.costco-auth-page .auth-help {
  color: #53627d !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.costco-auth-page .auth-heading p {
  margin: 4px 0 0 !important;
}

.costco-auth-page .auth-help {
  margin: 16px 0 0 !important;
}

.costco-auth-page .auth-form {
  display: grid !important;
  gap: 14px !important;
}

.costco-auth-page .field-group {
  margin-bottom: 0 !important;
  padding: 16px !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

.costco-auth-page .field-group label {
  display: block !important;
  margin: 0 0 10px !important;
  color: #08142f !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.costco-auth-page .text-input {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #cdd7e8 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #08142f !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.costco-auth-page .text-input:focus {
  border-color: #005dab !important;
  box-shadow: 0 0 0 4px rgba(0, 93, 171, .14) !important;
}

.costco-auth-page .primary-btn {
  width: 100% !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #e31837 0%, #c8102e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(227, 24, 55, .23) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.costco-auth-page .primary-btn:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #f10d30 0%, #b80724 100%) !important;
  box-shadow: 0 22px 42px rgba(227, 24, 55, .30) !important;
}

.costco-auth-page .notice-stack {
  margin: 0 0 18px !important;
}

.costco-auth-page .notice {
  border-radius: 10px !important;
  font-weight: 800 !important;
}

.costco-auth-page .is-hidden {
  display: none !important;
}

@media (max-width: 620px) {
  .costco-auth-page .auth-shell {
    align-items: start !important;
    padding: 18px 12px 32px !important;
  }

  .costco-auth-page .auth-card {
    padding: 22px 20px 24px !important;
    border-radius: 16px !important;
  }

  .costco-auth-page .auth-brand {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
  }

  .costco-auth-page .costco-wordmark {
    font-size: 25px !important;
  }

  .costco-auth-page .auth-heading h1 {
    font-size: 33px !important;
  }

  .costco-auth-page .auth-tabs {
    grid-template-columns: 1fr !important;
    margin-bottom: 22px !important;
  }

  .costco-auth-page .auth-form {
    gap: 12px !important;
  }

  .costco-auth-page .field-group {
    padding: 14px !important;
  }
}

/* Costco create/sidebar EOF override v16 */
@media (min-width: 761px) {
  .costco-platform-shell {
    grid-template-columns: 264px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .costco-platform-shell .monday-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .costco-platform-shell .monday-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 34px clamp(24px, 3vw, 44px) 44px !important;
  }
}

.costco-topbar {
  display: none !important;
}

.costco-platform-shell .monday-sidebar {
  display: flex !important;
  flex-direction: column !important;
  padding: 26px 14px 18px !important;
}

.costco-platform-shell .sidebar-brand .costco-wordmark,
.costco-mobile-topbar .costco-wordmark {
  width: max-content !important;
  overflow: visible !important;
  font-size: 36px !important;
  line-height: .82 !important;
  font-weight: 1000 !important;
  letter-spacing: -.095em !important;
}

.costco-platform-shell .sidebar-brand .costco-wordmark small,
.costco-mobile-topbar .costco-wordmark small {
  margin-top: 5px !important;
  font-size: 12px !important;
  border-top: 3px solid var(--costco-blue) !important;
  box-shadow: 0 3px 0 var(--costco-blue) !important;
}

.costco-platform-shell .sidebar-nav a,
.costco-platform-shell .clean-sidebar-nav a {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  color: var(--costco-navy) !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .clean-sidebar-nav a::before {
  background: currentColor !important;
}

.costco-platform-shell .sidebar-nav a span,
.costco-platform-shell .clean-sidebar-nav a span {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  color: inherit !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.costco-platform-shell .sidebar-nav a.active,
.costco-platform-shell .clean-sidebar-nav a.active {
  color: var(--costco-red) !important;
  border-color: rgba(230, 0, 35, .14) !important;
  background: linear-gradient(90deg, rgba(230, 0, 35, .115), rgba(230, 0, 35, .04)) !important;
  box-shadow: inset 4px 0 0 var(--costco-red) !important;
}

.sidebar-notification {
  order: 18 !important;
  position: relative !important;
  margin: auto 0 10px !important;
}

.sidebar-notification summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  list-style: none !important;
}

.sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

.sidebar-notification-icon {
  position: relative !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.sidebar-notification.has-alert summary::after {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 31px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--costco-red) !important;
}

.sidebar-notification summary b {
  min-width: 24px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: var(--costco-red) !important;
  color: #fff !important;
  font-size: 12px !important;
  text-align: center !important;
}

.sidebar-notification-panel {
  margin: 4px 4px 8px !important;
  padding: 10px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(8, 20, 47, .10) !important;
}

.sidebar-notification-panel a,
.sidebar-notification-panel p {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 6px !important;
  color: var(--costco-navy) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.costco-platform-shell .sidebar-logout {
  order: 20 !important;
  margin: 0 0 10px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .workspace-card,
.costco-platform-shell .compact-workspace {
  order: 30 !important;
  grid-template-columns: 46px minmax(0, 1fr) 14px !important;
  column-gap: 12px !important;
  margin: 0 !important;
  padding: 16px 6px 0 !important;
  border-top: 1px solid var(--costco-line) !important;
}

.page-create .monday-header,
.page-create .create-shell,
.page-create .platform-action-bar {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-create .monday-header {
  margin-bottom: 30px !important;
}

.page-create .work-group-title {
  grid-template-columns: 36px minmax(0, max-content) minmax(220px, 1fr) !important;
  min-height: auto !important;
  padding: 24px 34px 18px !important;
  column-gap: 16px !important;
}

.page-create .work-group-title::before {
  display: none !important;
}

.page-create .work-group-title .group-dot {
  grid-column: 1 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.page-create .work-group-title strong {
  grid-column: 2 !important;
  font-size: 23px !important;
}

.page-create .work-group-title em {
  grid-column: 3 !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.page-create .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  padding: 0 34px 22px !important;
}

.page-create .group-send .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-create .group-send .wide-field {
  grid-column: 1 / span 1 !important;
}

.page-create .file-tile input[type="file"] {
  height: auto !important;
  min-height: 86px !important;
  margin-top: 12px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  color: transparent !important;
  font-size: 0 !important;
  background: linear-gradient(135deg, rgba(230, 0, 35, .035), #fff) !important;
}

.page-create .file-tile input[type="file"]::file-selector-button {
  height: 42px !important;
  margin-right: 14px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
}

.page-create .selected-file-name {
  margin: 8px 0 0 !important;
}

.page-create .file-drop-help {
  margin: 4px 0 0 !important;
}

@media (max-width: 1100px) {
  .page-create .work-group-title {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }

  .page-create .work-group-title em {
    grid-column: 2 !important;
  }
}

@media (max-width: 760px) {
  .costco-platform-shell .monday-main {
    padding: 24px 16px 92px !important;
  }

  .page-create .create-grid,
  .page-create .group-send .create-grid {
    grid-template-columns: 1fr !important;
    padding: 0 18px 18px !important;
  }

  .page-create .group-send .wide-field {
    grid-column: auto !important;
  }

  .page-create .platform-action-bar {
    grid-template-columns: 1fr !important;
  }
}
*** End of File
*** End of File

/* Costco create/sidebar final override v16 */
@media (min-width: 761px) {
  .costco-platform-shell {
    grid-template-columns: 264px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .costco-platform-shell .monday-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .costco-platform-shell .monday-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 34px clamp(24px, 3vw, 44px) 44px !important;
  }
}

.costco-topbar {
  display: none !important;
}

.costco-platform-shell .monday-sidebar {
  display: flex !important;
  flex-direction: column !important;
  padding: 26px 14px 18px !important;
}

.costco-platform-shell .sidebar-brand .costco-wordmark,
.costco-mobile-topbar .costco-wordmark {
  width: max-content !important;
  overflow: visible !important;
  font-size: 36px !important;
  line-height: .82 !important;
  font-weight: 1000 !important;
  letter-spacing: -.095em !important;
}

.costco-platform-shell .sidebar-brand .costco-wordmark small,
.costco-mobile-topbar .costco-wordmark small {
  margin-top: 5px !important;
  font-size: 12px !important;
  border-top: 3px solid var(--costco-blue) !important;
  box-shadow: 0 3px 0 var(--costco-blue) !important;
}

.costco-platform-shell .sidebar-nav a,
.costco-platform-shell .clean-sidebar-nav a {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  color: var(--costco-navy) !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .clean-sidebar-nav a::before {
  background: currentColor !important;
}

.costco-platform-shell .sidebar-nav a span,
.costco-platform-shell .clean-sidebar-nav a span {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  color: inherit !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.costco-platform-shell .sidebar-nav a.active,
.costco-platform-shell .clean-sidebar-nav a.active {
  color: var(--costco-red) !important;
  border-color: rgba(230, 0, 35, .14) !important;
  background: linear-gradient(90deg, rgba(230, 0, 35, .115), rgba(230, 0, 35, .04)) !important;
  box-shadow: inset 4px 0 0 var(--costco-red) !important;
}

.sidebar-notification {
  order: 18 !important;
  position: relative !important;
  margin: auto 0 10px !important;
}

.sidebar-notification summary {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  list-style: none !important;
}

.sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

.sidebar-notification-icon {
  position: relative !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.sidebar-notification.has-alert summary::after {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 31px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--costco-red) !important;
}

.sidebar-notification summary b {
  min-width: 24px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: var(--costco-red) !important;
  color: #fff !important;
  font-size: 12px !important;
  text-align: center !important;
}

.sidebar-notification-panel {
  margin: 4px 4px 8px !important;
  padding: 10px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(8, 20, 47, .10) !important;
}

.sidebar-notification-panel a,
.sidebar-notification-panel p {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 6px !important;
  color: var(--costco-navy) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.costco-platform-shell .sidebar-logout {
  order: 20 !important;
  margin: 0 0 10px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .workspace-card,
.costco-platform-shell .compact-workspace {
  order: 30 !important;
  grid-template-columns: 46px minmax(0, 1fr) 14px !important;
  column-gap: 12px !important;
  margin: 0 !important;
  padding: 16px 6px 0 !important;
  border-top: 1px solid var(--costco-line) !important;
}

.costco-platform-shell .workspace-card strong,
.costco-platform-shell .workspace-card small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-create .monday-header,
.page-create .create-shell,
.page-create .platform-action-bar {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-create .monday-header {
  margin-bottom: 30px !important;
}

.page-create .work-group-title {
  grid-template-columns: 36px minmax(0, max-content) minmax(220px, 1fr) !important;
  min-height: auto !important;
  padding: 24px 34px 18px !important;
  column-gap: 16px !important;
}

.page-create .work-group-title::before {
  display: none !important;
}

.page-create .work-group-title .group-dot {
  grid-column: 1 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.page-create .work-group-title strong {
  grid-column: 2 !important;
  font-size: 23px !important;
}

.page-create .work-group-title em {
  grid-column: 3 !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.page-create .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  padding: 0 34px 22px !important;
}

.page-create .group-send .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-create .group-send .wide-field {
  grid-column: 1 / span 1 !important;
}

.page-create .file-tile,
.page-create .field-group {
  padding: 20px 22px !important;
  border-radius: 9px !important;
}

.page-create .file-tile input[type="file"] {
  height: auto !important;
  min-height: 86px !important;
  margin-top: 12px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  color: transparent !important;
  font-size: 0 !important;
  background: linear-gradient(135deg, rgba(230, 0, 35, .035), #fff) !important;
}

.page-create .file-tile input[type="file"]::file-selector-button {
  height: 42px !important;
  margin-right: 14px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
}

.page-create .selected-file-name {
  margin: 8px 0 0 !important;
}

.page-create .file-drop-help {
  margin: 4px 0 0 !important;
}

@media (max-width: 1100px) {
  .page-create .monday-header,
  .page-create .create-shell,
  .page-create .platform-action-bar {
    max-width: none !important;
  }

  .page-create .work-group-title {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }

  .page-create .work-group-title em {
    grid-column: 2 !important;
  }
}

@media (max-width: 760px) {
  .costco-platform-shell .monday-main {
    padding: 24px 16px 92px !important;
  }

  .page-create .monday-header {
    margin-bottom: 18px !important;
  }

  .page-create .work-group-title {
    padding: 20px 18px 14px !important;
  }

  .page-create .create-grid,
  .page-create .group-send .create-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 18px 18px !important;
  }

  .page-create .group-send .wide-field {
    grid-column: auto !important;
  }

  .page-create .platform-action-bar {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.app-shell {
  width: min(1400px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

.sign-shell {
  width: min(1400px, calc(100vw - 32px));
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.topbar-brand,
.brand-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-brand img,
.brand-kicker img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 999px;
}

.topbar-brand strong {
  display: block;
  font-weight: 900;
  letter-spacing: -.03em;
}

.topbar-brand span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .9rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-actions a,
.secondary-btn,
.small-btn,
.ghost-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 15px 26px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
}

.primary-btn:hover {
  background: var(--blue-dark);
}

.full-width {
  width: 100%;
}

.hero-panel,
.sign-hero-card,
.card,
.success-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.hero-panel,
.sign-hero-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  margin-bottom: 22px;
}

.brand-kicker {
  margin-bottom: 18px;
  color: var(--blue);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
}

.brand-kicker img {
  width: 44px;
  height: 44px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 16px;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.075em;
  font-weight: 900;
}

h2 {
  margin-bottom: 7px;
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 900;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
  letter-spacing: -.035em;
}

p {
  color: var(--muted);
  line-height: 1.55;
}

.hero-panel p,
.sign-hero-card p {
  max-width: 760px;
  margin-bottom: 0;
  font-size: 1.05rem;
}

.hero-steps {
  display: grid;
  gap: 8px;
  min-width: 180px;
}

.hero-steps span {
  display: block;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(61, 129, 197, .09);
  color: var(--blue);
  font-weight: 900;
  text-align: center;
}

.card {
  padding: clamp(22px, 3vw, 34px);
  margin-bottom: 22px;
}

.form-section {
  padding: 0 0 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.form-section:last-of-type {
  margin-bottom: 0;
}

.section-title-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.section-title-row p {
  margin-bottom: 0;
}

.step-badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.step-badge.check {
  background: #243d2f;
}

.upload-grid,
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.upload-box {
  display: block;
  min-height: 156px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-2);
}

.upload-title {
  display: block;
  margin-bottom: 7px;
  font-size: 1.1rem;
  font-weight: 900;
}

.upload-help {
  display: block;
  margin-bottom: 22px;
  color: var(--muted);
  line-height: 1.4;
}

.upload-box input {
  width: 100%;
  max-width: 100%;
}

.field-group {
  min-width: 0;
}

.field-group label {
  display: block;
  margin-bottom: 9px;
  font-weight: 900;
  letter-spacing: -.025em;
}

.field-group label span {
  color: var(--blue);
}

.text-input {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-2);
  color: var(--ink);
  outline: none;
  font-size: 1rem;
}

.text-input:focus {
  border-color: rgba(61, 129, 197, .65);
  box-shadow: 0 0 0 4px rgba(61, 129, 197, .12);
}

.field-note {
  margin: 10px 0 0;
  font-size: .92rem;
  line-height: 1.45;
}

.wide-field {
  grid-column: 1 / -1;
}

.sticky-action {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 6px;
}

.sticky-action span {
  color: var(--muted);
  line-height: 1.45;
}

.success-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
  margin-bottom: 22px;
}

.eyebrow {
  margin-bottom: 8px !important;
  color: var(--blue) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .22em;
  line-height: 1 !important;
}

.success-main p {
  max-width: 460px;
}

.compact-action {
  width: fit-content;
  min-width: 190px;
}

.sign-link-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-2);
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.review-grid div,
.line-summary {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-2);
}

.review-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .8rem;
}

.review-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.line-summary {
  margin-top: 12px;
  white-space: pre-wrap;
  line-height: 1.55;
}

.notice-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.notice {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font-weight: 750;
}

.notice-error {
  color: #6b2424;
  border-color: rgba(184, 76, 76, .3);
  background: rgba(184, 76, 76, .08);
}

/* Signing */
.sign-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(390px, .55fr);
  gap: 22px;
  align-items: start;
}

.signing-card {
  position: sticky;
  top: 18px;
}

.document-title-row {
  align-items: center;
}

.document-title-row .small-btn {
  margin-left: auto;
}

.pdf-frame {
  width: 100%;
  height: min(82vh, 960px);
  min-height: 720px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.signature-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  margin-bottom: 18px;
}

.signature-tab {
  border: 0;
  border-radius: 999px;
  padding: 12px 14px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.signature-tab.active {
  background: var(--blue);
  color: #fff;
}

.signature-mode {
  display: none;
}

.signature-mode.active {
  display: block;
}

.typed-signature-preview {
  display: flex;
  align-items: center;
  min-height: 112px;
  margin: 14px 0 18px;
  padding: 18px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card-2);
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  font-size: clamp(2.7rem, 4.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.signature-pad {
  display: block;
  width: 100%;
  height: 250px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  touch-action: none;
}

.consent-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0;
  line-height: 1.45;
}

.consent-box input {
  margin-top: 3px;
}

.signed-done {
  grid-template-columns: minmax(0, 1fr) auto;
}

.signed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.email-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 750;
}

.email-status.success {
  color: #17324c;
  background: rgba(61, 129, 197, .09);
  border: 1px solid rgba(61, 129, 197, .22);
}

.email-status.warning {
  color: #5a351d;
  background: rgba(196, 143, 101, .12);
  border: 1px solid rgba(196, 143, 101, .28);
}

/* Login/history */
.login-shell {
  width: min(560px, calc(100vw - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 32px 0;
}

.login-card {
  width: 100%;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.login-card h1 {
  font-size: clamp(2.7rem, 8vw, 4.6rem);
}

.login-card p {
  color: var(--muted);
}

.login-form {
  margin-top: 24px;
}

.history-list {
  display: grid;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-2);
}

.history-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.history-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .88rem;
}

.history-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ghost-danger {
  color: var(--danger);
}

.empty-state {
  padding: 42px 20px;
  text-align: center;
}

@media (max-width: 1100px) {
  .success-panel,
  .sign-layout,
  .signed-done {
    grid-template-columns: 1fr;
  }

  .signing-card {
    position: static;
  }

  .signed-actions {
    justify-content: flex-start;
  }

  .pdf-frame {
    min-height: 620px;
  }
}

@media (max-width: 760px) {
  .app-shell,
  .sign-shell {
    width: min(100% - 28px, 1400px);
    padding: 16px 0 40px;
  }

  .app-topbar,
  .hero-panel,
  .sign-hero-card,
  .sticky-action {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-steps {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .upload-grid,
  .field-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }

  .section-title-row {
    gap: 12px;
  }

  .section-title-row h2 {
    font-size: 1.8rem;
  }

  .copy-row {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }

  .card,
  .hero-panel,
  .sign-hero-card,
  .success-panel {
    border-radius: 24px;
    padding: 20px;
  }

  .form-section {
    padding-bottom: 28px;
    margin-bottom: 28px;
  }

  .field-note {
    margin-top: 8px;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
  }

  .pdf-frame {
    min-height: 500px;
    height: 66vh;
  }

  .document-title-row {
    align-items: flex-start;
  }

  .document-title-row .small-btn {
    margin-left: 0;
  }

  .compact-action {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .app-shell,
  .sign-shell {
    width: min(100% - 20px, 1400px);
  }

  .card,
  .hero-panel,
  .sign-hero-card,
  .success-panel,
  .login-card {
    padding: 16px;
    border-radius: 22px;
  }

  .brand-kicker img,
  .topbar-brand img {
    width: 40px;
    height: 40px;
  }

  .upload-box {
    min-height: 142px;
    padding: 18px;
  }

  .text-input {
    min-height: 54px;
  }

  .signature-tabs {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .signature-tab {
    border-radius: 14px;
  }

  .signature-pad {
    height: 210px;
  }

  .typed-signature-preview {
    min-height: 92px;
    font-size: 2.5rem;
  }

  .pdf-frame {
    min-height: 430px;
    height: 62vh;
  }

  .history-item,
  .history-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* Mobile spacing hardening: prevents label/help text from touching inputs */
.contract-form .field-grid {
  row-gap: 34px !important;
}

.contract-form .field-group {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contract-form .field-group label {
  display: block !important;
  margin: 0 0 10px !important;
  line-height: 1.2 !important;
}

.contract-form .text-input {
  display: block !important;
  margin: 0 !important;
}

.contract-form .field-note {
  display: block !important;
  margin: 11px 0 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  clear: both !important;
}

.contract-form .form-section {
  display: block !important;
  clear: both !important;
}

.contract-form .section-title-row {
  margin-bottom: 24px !important;
}

@media (max-width: 760px) {
  .contract-form .field-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }

  .contract-form .wide-field {
    grid-column: auto !important;
  }

  .contract-form .form-section {
    padding-bottom: 34px !important;
    margin-bottom: 34px !important;
  }

  .contract-form .upload-grid {
    row-gap: 20px !important;
  }

  .contract-form .upload-box {
    margin: 0 !important;
  }

  .sticky-action {
    margin-top: 8px !important;
    gap: 14px !important;
  }
}

@media (max-width: 520px) {
  .app-shell,
  .sign-shell {
    width: calc(100vw - 18px) !important;
  }

  .card,
  .hero-panel,
  .sign-hero-card,
  .success-panel {
    padding: 18px !important;
  }

  .contract-form .field-grid {
    row-gap: 34px !important;
  }

  .contract-form .field-note {
    font-size: .94rem !important;
  }
}


/* Final typography polish */
.hero-panel .brand-kicker.no-logo {
  margin-bottom: 18px !important;
  padding-left: 0 !important;
}

.hero-panel h1 {
  max-width: 780px !important;
  font-size: clamp(3.2rem, 6.2vw, 5.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;
}

.section-title-row h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.45rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

.form-section h2,
.review-card h2,
.sign-layout h2 {
  letter-spacing: -0.035em !important;
}

.app-topbar {
  padding: 0 2px !important;
}

.topbar-brand img {
  width: 40px !important;
  height: 40px !important;
}

.topbar-brand strong {
  letter-spacing: -0.015em !important;
}

.step-badge {
  width: 36px !important;
  height: 36px !important;
  font-size: 0.95rem !important;
}

.section-title-row {
  align-items: center !important;
  gap: 14px !important;
}

.section-title-row p {
  margin-top: 4px !important;
}

.upload-title,
.field-group label {
  letter-spacing: -0.01em !important;
}

@media (max-width: 760px) {
  .hero-panel h1 {
    font-size: clamp(2.7rem, 11vw, 4.1rem) !important;
    letter-spacing: -0.04em !important;
  }

  .section-title-row {
    align-items: flex-start !important;
  }

  .section-title-row h2 {
    font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
  }
}

@media (max-width: 520px) {
  .hero-panel h1 {
    font-size: clamp(2.45rem, 12vw, 3.6rem) !important;
  }

  .section-title-row h2 {
    font-size: 1.75rem !important;
  }
}


/* Professional color system + smaller headers */
:root {
  --step-blue: #3d81c5;
  --step-sage: #7f9f77;
  --step-gold: #c48f65;
  --step-blue-soft: rgba(61, 129, 197, .10);
  --step-sage-soft: rgba(127, 159, 119, .13);
  --step-gold-soft: rgba(196, 143, 101, .13);
}

/* Main hero: smaller, more premium */
.hero-panel h1 {
  max-width: 720px !important;
  font-size: clamp(2.85rem, 5.2vw, 4.65rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.035em !important;
}

.sign-hero-card h1,
.login-card h1 {
  font-size: clamp(2.55rem, 4.8vw, 4.25rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

.section-title-row h2,
.form-section h2,
.review-card h2,
.sign-layout h2 {
  font-size: clamp(1.55rem, 2.15vw, 2.12rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

/* Give each generator section a distinct professional color */
.contract-form .form-section {
  position: relative;
  padding: 26px !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  margin-bottom: 22px !important;
  background: var(--card-2) !important;
}

.contract-form .form-section:nth-of-type(1) {
  background:
    linear-gradient(90deg, var(--step-blue-soft), transparent 42%),
    var(--card-2) !important;
  border-color: rgba(61, 129, 197, .24) !important;
}

.contract-form .form-section:nth-of-type(2) {
  background:
    linear-gradient(90deg, var(--step-sage-soft), transparent 42%),
    var(--card-2) !important;
  border-color: rgba(127, 159, 119, .28) !important;
}

.contract-form .form-section:nth-of-type(3) {
  background:
    linear-gradient(90deg, var(--step-gold-soft), transparent 42%),
    var(--card-2) !important;
  border-color: rgba(196, 143, 101, .28) !important;
}

.contract-form .form-section:nth-of-type(1) .step-badge,
.hero-steps span:nth-child(1) {
  background: var(--step-blue) !important;
  color: #fff !important;
}

.contract-form .form-section:nth-of-type(2) .step-badge,
.hero-steps span:nth-child(2) {
  background: var(--step-sage) !important;
  color: #fff !important;
}

.contract-form .form-section:nth-of-type(3) .step-badge,
.hero-steps span:nth-child(3) {
  background: var(--step-gold) !important;
  color: #fff !important;
}

.hero-steps {
  min-width: 210px !important;
}

.hero-steps span {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

/* Make upload boxes visually clearer */
.upload-box {
  background: rgba(255, 253, 248, .86) !important;
  border-style: solid !important;
}

.contract-form .form-section:nth-of-type(1) .upload-box:hover {
  border-color: rgba(61, 129, 197, .45) !important;
}

.contract-form .form-section:nth-of-type(2) .text-input:focus {
  border-color: rgba(127, 159, 119, .62) !important;
  box-shadow: 0 0 0 4px rgba(127, 159, 119, .13) !important;
}

.contract-form .form-section:nth-of-type(3) .text-input:focus {
  border-color: rgba(196, 143, 101, .62) !important;
  box-shadow: 0 0 0 4px rgba(196, 143, 101, .13) !important;
}

/* Premium result cards */
.success-panel {
  background:
    linear-gradient(120deg, rgba(61, 129, 197, .10), rgba(255, 253, 248, .92) 46%),
    var(--card) !important;
}

.sign-link-card {
  background:
    linear-gradient(120deg, rgba(127, 159, 119, .12), rgba(255, 253, 248, .90) 48%),
    var(--card-2) !important;
}

/* Signing page color separation */
.document-card {
  background:
    linear-gradient(90deg, rgba(61, 129, 197, .08), transparent 45%),
    var(--card) !important;
}

.signing-card {
  background:
    linear-gradient(90deg, rgba(196, 143, 101, .10), transparent 45%),
    var(--card) !important;
}

@media (max-width: 760px) {
  .hero-panel h1 {
    font-size: clamp(2.35rem, 10vw, 3.65rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }

  .section-title-row h2,
  .form-section h2,
  .review-card h2,
  .sign-layout h2 {
    font-size: clamp(1.45rem, 7vw, 1.95rem) !important;
    line-height: 1.08 !important;
  }

  .contract-form .form-section {
    padding: 20px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 520px) {
  .hero-panel h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem) !important;
  }

  .hero-steps {
    min-width: 0 !important;
  }

  .contract-form .form-section {
    padding: 18px !important;
  }
}


/* Million-dollar solid color polish: remove gradients, keep calm section color */
.contract-form .form-section:nth-of-type(1),
.contract-form .form-section:nth-of-type(2),
.contract-form .form-section:nth-of-type(3),
.success-panel,
.sign-link-card,
.document-card,
.signing-card {
  background-image: none !important;
}

.contract-form .form-section:nth-of-type(1) {
  background-color: #eef6fd !important;
  border-color: rgba(61, 129, 197, .24) !important;
}

.contract-form .form-section:nth-of-type(2) {
  background-color: #f2f7ed !important;
  border-color: rgba(127, 159, 119, .26) !important;
}

.contract-form .form-section:nth-of-type(3) {
  background-color: #fbf3ea !important;
  border-color: rgba(196, 143, 101, .26) !important;
}

.success-panel {
  background-color: #eef6fd !important;
  border-color: rgba(61, 129, 197, .20) !important;
}

.sign-link-card,
.review-grid div,
.line-summary {
  background-color: #fffdf8 !important;
}

.document-card {
  background-color: #eef6fd !important;
  border-color: rgba(61, 129, 197, .22) !important;
}

.signing-card {
  background-color: #fbf3ea !important;
  border-color: rgba(196, 143, 101, .24) !important;
}

/* Slightly more premium spacing and type */
.hero-panel h1 {
  font-size: clamp(2.65rem, 4.8vw, 4.25rem) !important;
  letter-spacing: -0.025em !important;
}

.section-title-row h2,
.form-section h2,
.review-card h2,
.sign-layout h2 {
  letter-spacing: -0.018em !important;
}

.card,
.hero-panel,
.sign-hero-card,
.success-panel {
  box-shadow: 0 1px 0 rgba(16, 28, 23, .03) !important;
}

.upload-box,
.text-input,
.sign-link-card,
.review-grid div,
.line-summary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

@media (max-width: 760px) {
  .hero-panel h1 {
    font-size: clamp(2.25rem, 9.4vw, 3.3rem) !important;
  }
}


/* Platform features */
.checkbox-card {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
}

.checkbox-card input {
  margin-top: 4px;
}

.checkbox-card strong,
.checkbox-card small {
  display: block;
}

.checkbox-card small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
}

.inline-status {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.inline-status.success {
  color: #17324c;
  background: rgba(61, 129, 197, .10);
  border: 1px solid rgba(61, 129, 197, .22);
}

.inline-status.warning,
.warning-card {
  background: #fff8ef !important;
  border-color: rgba(196, 143, 101, .30) !important;
}

.step-badge.warn {
  background: #c48f65 !important;
}

.warning-list,
.mini-warning-list {
  margin: 0;
  padding-left: 22px;
  color: #5f4328;
  line-height: 1.55;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.metric-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fffdf8;
}

.metric-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.metric-card.blue { background: #eef6fd; border-color: rgba(61,129,197,.22); }
.metric-card.sage { background: #f2f7ed; border-color: rgba(127,159,119,.25); }
.metric-card.gold { background: #fbf3ea; border-color: rgba(196,143,101,.25); }
.metric-card.red { background: #fff1f1; border-color: rgba(184,76,76,.22); }

.contract-list {
  display: grid;
  gap: 14px;
}

.contract-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fffdf8;
}

.contract-main {
  min-width: 0;
}

.contract-main h3 {
  margin: 10px 0 4px;
}

.contract-main p {
  margin-bottom: 4px;
}

.contract-meta {
  font-size: .85rem;
}

.contract-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 440px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
}

.pill.pending { background: #eef6fd; color: #21557f; }
.pill.signed { background: #f2f7ed; color: #405f3b; }
.pill.expired { background: #f1f1ef; color: #5c625d; }
.pill.issue { background: #fff1f1; color: #8a3030; }

.contract-status-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .dashboard-grid,
  .contract-row {
    grid-template-columns: 1fr;
  }

  .contract-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .contract-actions a,
  .contract-actions form,
  .contract-actions button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* Endgame platform polish */
.dashboard-toolbar {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  font-weight: 850;
}

.tab-pill.active {
  background: #3d81c5;
  border-color: #3d81c5;
  color: #fff;
}

.dashboard-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.contract-meta {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .dashboard-search {
    grid-template-columns: 1fr;
  }
}

.hero-panel h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.1rem) !important;
  letter-spacing: -0.025em !important;
}


/* Template manager */
.template-metrics .metric-card strong {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.notice-warning {
  color: #5a351d;
  background: rgba(196, 143, 101, .12);
  border-color: rgba(196, 143, 101, .28);
}

.topbar-actions {
  flex-wrap: wrap;
}


/* Centah / temporary file retention */
.cleanup-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
}

.cleanup-form span {
  color: var(--muted);
  font-size: .92rem;
}

.pill.centah {
  background: #f2f7ed;
  color: #405f3b;
}

.pill.needs-centah {
  background: #fbf3ea;
  color: #8a5a2e;
}

.dashboard-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cleanup-form .secondary-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* Cloud storage */
.pill.cloud {
  background: #edf5ff;
  color: #275981;
}

.cloud-note {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #eef6fd;
  color: #275981;
  font-weight: 750;
}


/* Users v1 */
.setup-details {
  margin: 8px 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
  overflow: hidden;
}

.setup-details summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 900;
}

.setup-box {
  padding: 0 16px 16px;
  display: grid;
  gap: 12px;
}

select.text-input {
  appearance: auto;
}

.notice-warning {
  color: #5a351d;
  background: rgba(196, 143, 101, .12);
  border-color: rgba(196, 143, 101, .28);
}


/* Luxury UX pass v1 */
:root {
  --paper: #f3eee5;
  --card: #fffaf1;
  --card-2: #fffdf8;
  --ink: #0d1b16;
  --muted: #5e6b66;
  --line: #ded6c8;
  --blue: #3d81c5;
  --blue-soft: #eaf4ff;
  --green-soft: #eef6ea;
  --gold-soft: #fbf1e7;
  --green: #7fa178;
  --gold: #c79062;
  --shadow-soft: 0 18px 50px rgba(30, 24, 15, .07);
}

* {
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(61,129,197,.08), transparent 32rem),
    var(--paper);
  color: var(--ink);
}

.app-shell {
  max-width: 1440px;
  padding: clamp(14px, 2vw, 28px);
}

.glass-topbar,
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(243,238,229,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(222,214,200,.85);
  margin: calc(clamp(14px, 2vw, 28px) * -1) calc(clamp(14px, 2vw, 28px) * -1) 20px;
  padding: 16px clamp(14px, 2vw, 28px);
}

.topbar-brand img {
  width: 46px;
  height: 46px;
}

.topbar-brand strong {
  letter-spacing: -0.02em;
}

.topbar-brand span {
  color: var(--muted);
}

.topbar-actions {
  gap: 10px;
}

.topbar-actions a,
.secondary-btn,
.primary-btn {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: -0.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.topbar-actions a:hover,
.secondary-btn:hover,
.primary-btn:hover {
  transform: translateY(-1px);
}

.primary-btn {
  background: var(--blue);
  color: white;
  border: 1px solid var(--blue);
  box-shadow: 0 8px 18px rgba(61,129,197,.16);
}

.secondary-btn,
.topbar-actions a {
  background: #fffdf8;
  color: var(--ink);
  border: 1px solid var(--line);
}

.hero-panel {
  border-radius: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 4vw, 52px);
  animation: riseIn .35s ease both;
}

.hero-compact h1,
.hero-panel h1 {
  font-size: clamp(2.6rem, 5vw, 5.4rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
  max-width: 820px;
}

.hero-panel p {
  max-width: 720px;
  line-height: 1.6;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.brand-kicker {
  letter-spacing: .24em !important;
  font-weight: 950;
}

.progress-stack,
.hero-steps {
  display: grid;
  gap: 10px;
  min-width: min(100%, 230px);
}

.progress-stack span,
.hero-steps span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
  justify-content: center;
}

.progress-stack span:nth-child(1),
.hero-steps span:nth-child(1) { background: var(--blue); }

.progress-stack span:nth-child(2),
.hero-steps span:nth-child(2) { background: var(--green); }

.progress-stack span:nth-child(3),
.hero-steps span:nth-child(3) { background: var(--gold); }

.progress-stack b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
}

.work-card,
.card,
.result-card,
.review-card,
.form-card,
.dashboard-list-card {
  border-radius: 30px !important;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.work-card {
  padding: clamp(16px, 2vw, 24px);
  margin-top: 22px;
}

.contract-form {
  display: grid;
  gap: 20px;
}

.workflow-section {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(20px, 3vw, 34px);
  animation: riseIn .35s ease both;
}

.workflow-section:nth-child(2) { animation-delay: .05s; }
.workflow-section:nth-child(3) { animation-delay: .1s; }

.section-blue { background: var(--blue-soft); border-color: rgba(61,129,197,.22); }
.section-green { background: var(--green-soft); border-color: rgba(127,161,120,.28); }
.section-gold { background: var(--gold-soft); border-color: rgba(199,144,98,.28); }

.section-title-row {
  align-items: start;
  margin-bottom: 22px;
}

.section-title-row h2 {
  font-size: clamp(1.65rem, 2.2vw, 2.45rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.section-title-row p {
  color: var(--muted);
  line-height: 1.5;
}

.step-badge {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 950;
}

.step-badge.green { background: var(--green); }
.step-badge.gold { background: var(--gold); }

.upload-grid,
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tight-grid {
  gap: 12px;
}

.upload-box,
.premium-upload {
  background: rgba(255,253,248,.84);
  border: 1px solid rgba(222,214,200,.95);
  border-radius: 22px;
  padding: 22px;
  min-height: 144px;
  display: grid;
  align-content: center;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.upload-box:hover {
  transform: translateY(-2px);
  border-color: rgba(61,129,197,.55);
  background: #fff;
}

.upload-title,
.label-title {
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: -.02em;
}

.upload-help,
.label-help,
.field-note {
  color: var(--muted);
  line-height: 1.45;
}

.field-group {
  display: grid;
  gap: 8px;
  align-content: start;
}

.field-group label,
.field-label {
  font-weight: 950;
  letter-spacing: -.015em;
}

.text-input {
  min-height: 60px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fffdf8;
  padding: 0 18px;
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.text-input:focus {
  outline: none;
  background: #fff;
  border-color: rgba(61,129,197,.8);
  box-shadow: 0 0 0 4px rgba(61,129,197,.14);
}

.wide-field {
  grid-column: 1 / -1;
}

.sticky-action {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,250,241,.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px;
  box-shadow: 0 16px 38px rgba(20,17,12,.08);
}

.sticky-action .primary-btn {
  padding-inline: 26px;
}

.sticky-action span {
  color: var(--muted);
}

/* Auth */
.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.auth-shell {
  width: min(100%, 760px);
}

.auth-card {
  border-radius: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 4vw, 54px);
  animation: riseIn .36s ease both;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.auth-brand img {
  width: 54px;
  height: 54px;
}

.auth-brand strong {
  display: block;
  font-weight: 950;
}

.auth-brand span {
  display: block;
  color: var(--blue);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 950;
}

.auth-heading h1,
.auth-card h1 {
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.07em;
  margin: 0 0 12px;
}

.auth-heading p,
.auth-help {
  color: var(--muted);
  line-height: 1.5;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #f0eadf;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  margin-bottom: 26px;
}

.auth-tab {
  min-height: 44px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-weight: 950;
  cursor: pointer;
}

.auth-tab.is-active {
  background: var(--blue);
  color: white;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.is-hidden {
  display: none !important;
}

.notice-stack {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.notice {
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 14px 16px;
  background: #fffdf8;
  font-weight: 750;
}

.notice-warning {
  color: #5a351d;
  background: rgba(196, 143, 101, .12);
  border-color: rgba(196, 143, 101, .28);
}

.notice-error {
  color: #842323;
  background: rgba(255, 232, 232, .85);
  border-color: rgba(210, 78, 78, .28);
}

.notice-success {
  color: #245d39;
  background: rgba(232, 247, 236, .9);
  border-color: rgba(90, 159, 105, .28);
}

.checkbox-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: #fffdf8;
}

.checkbox-card small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  .app-shell {
    padding: 14px;
  }

  .app-topbar {
    position: relative;
    margin: -14px -14px 16px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .topbar-actions a {
    width: 100%;
    justify-content: center;
  }

  .hero-panel {
    padding: 26px;
  }

  .hero-panel h1,
  .hero-compact h1 {
    font-size: clamp(2.55rem, 12vw, 4.4rem) !important;
  }

  .upload-grid,
  .field-grid,
  .tight-grid {
    grid-template-columns: 1fr;
  }

  .sticky-action {
    border-radius: 24px;
    align-items: stretch;
    flex-direction: column;
  }

  .sticky-action .primary-btn {
    width: 100%;
  }

  .sticky-action span {
    text-align: center;
  }

  .auth-tabs {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .auth-card {
    border-radius: 26px;
    padding: 24px;
  }

  .auth-heading h1,
  .auth-card h1 {
    font-size: 3.3rem;
  }
}


/* Thoughtful color system pass v2
   Blue = action/start/upload/current workflow
   Green = verified/complete/healthy
   Gold = handoff/delivery/follow-up
   Rose = issue/warning/review needed
   Ink = authority and readability
*/

:root {
  --blue-700: #2f72b6;
  --blue-600: #3d81c5;
  --blue-100: #e8f3ff;
  --blue-050: #f3f9ff;

  --green-700: #587f51;
  --green-600: #7fa178;
  --green-100: #edf7ea;
  --green-050: #f7fbf5;

  --gold-700: #a96d43;
  --gold-600: #c79062;
  --gold-100: #fbefe4;
  --gold-050: #fff8f1;

  --rose-700: #994d4f;
  --rose-600: #c87779;
  --rose-100: #fff0f0;
  --rose-050: #fff8f8;

  --plum-700: #5b5578;
  --plum-100: #f0eff8;
}

/* Remove gradient-looking treatment from step colors and make color meaning obvious */
.progress-stack span,
.hero-steps span {
  background-image: none !important;
  border: 1px solid rgba(13, 27, 22, .06);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08), 0 8px 18px rgba(13,27,22,.07);
}

.progress-stack .step-blue,
.hero-steps .step-blue,
.progress-stack span:nth-child(1),
.hero-steps span:nth-child(1) {
  background: var(--blue-600) !important;
}

.progress-stack .step-green,
.hero-steps .step-green,
.progress-stack span:nth-child(2),
.hero-steps span:nth-child(2) {
  background: var(--green-600) !important;
}

.progress-stack .step-gold,
.hero-steps .step-gold,
.progress-stack span:nth-child(3),
.hero-steps span:nth-child(3) {
  background: var(--gold-600) !important;
}

/* Stronger section identity */
.workflow-section {
  position: relative;
  overflow: hidden;
}

.workflow-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  border-radius: 999px;
}

.section-blue {
  background: var(--blue-100) !important;
  border-color: rgba(61,129,197,.28) !important;
}

.section-blue::before {
  background: var(--blue-600);
}

.section-green {
  background: var(--green-100) !important;
  border-color: rgba(127,161,120,.34) !important;
}

.section-green::before {
  background: var(--green-600);
}

.section-gold {
  background: var(--gold-100) !important;
  border-color: rgba(199,144,98,.34) !important;
}

.section-gold::before {
  background: var(--gold-600);
}

.step-badge {
  box-shadow: 0 10px 18px rgba(61,129,197,.18);
}

.step-badge.green {
  background: var(--green-600) !important;
  box-shadow: 0 10px 18px rgba(127,161,120,.18);
}

.step-badge.gold {
  background: var(--gold-600) !important;
  box-shadow: 0 10px 18px rgba(199,144,98,.18);
}

/* Make dashboard metrics easier to scan */
.metric-card.blue,
.dashboard-grid .metric-card:nth-child(1),
.dashboard-grid .metric-card:nth-child(5) {
  background: var(--blue-100) !important;
  border-color: rgba(61,129,197,.28) !important;
}

.metric-card.sage,
.dashboard-grid .metric-card:nth-child(2),
.dashboard-grid .metric-card:nth-child(6) {
  background: var(--green-100) !important;
  border-color: rgba(127,161,120,.3) !important;
}

.metric-card.gold,
.dashboard-grid .metric-card:nth-child(3) {
  background: var(--gold-100) !important;
  border-color: rgba(199,144,98,.3) !important;
}

.metric-card.red,
.dashboard-grid .metric-card:nth-child(4) {
  background: var(--rose-100) !important;
  border-color: rgba(200,119,121,.3) !important;
}

/* User management explanation cards */
.role-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.guide-card {
  border-radius: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  display: grid;
  gap: 6px;
  min-height: 120px;
  box-shadow: 0 12px 28px rgba(20,17,12,.05);
}

.guide-card strong {
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.guide-card span {
  color: var(--muted);
  line-height: 1.45;
}

.guide-blue {
  background: var(--blue-100);
  border-color: rgba(61,129,197,.25);
}

.guide-green {
  background: var(--green-100);
  border-color: rgba(127,161,120,.28);
}

.guide-gold {
  background: var(--gold-100);
  border-color: rgba(199,144,98,.28);
}

.guide-red {
  background: var(--rose-100);
  border-color: rgba(200,119,121,.28);
}

/* More premium buttons */
.primary-btn {
  background: var(--blue-600) !important;
}

.primary-btn:hover {
  background: var(--blue-700) !important;
}

.pill.signed,
.pill.centah {
  background: var(--green-100) !important;
  color: var(--green-700) !important;
}

.pill.pending,
.pill.needs-centah {
  background: var(--gold-100) !important;
  color: var(--gold-700) !important;
}

.pill.issue,
.pill.expired {
  background: var(--rose-100) !important;
  color: var(--rose-700) !important;
}

/* Cleaner top nav */
.topbar-actions a[href="/settings/users"] {
  background: var(--blue-100);
  border-color: rgba(61,129,197,.25);
  color: var(--blue-700);
}

/* Mobile hierarchy */
@media (max-width: 900px) {
  .role-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .role-guide-grid {
    grid-template-columns: 1fr;
  }

  .workflow-section::before {
    width: 100%;
    height: 6px;
    inset: 0 0 auto 0;
  }
}


/* Monday-style contracts board */
.board-shell {
  margin-top: 22px;
  border: 1px solid var(--line);
  background: #fffdf8;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2.5vw, 28px);
}

.board-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.board-toolbar h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  letter-spacing: -.05em;
  line-height: 1;
}

.board-toolbar p,
.board-cleanup span {
  color: var(--muted);
}

.board-cleanup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.board-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  background: #f3eee5;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 14px;
}

.board-tabs a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 850;
}

.board-tabs a.active {
  background: var(--blue-600);
  color: white;
}

.board-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 20px;
}

.monday-board {
  display: grid;
  gap: 18px;
}

.monday-group {
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}

.group-title {
  width: 100%;
  min-height: 54px;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 1.08rem;
  font-weight: 950;
  cursor: pointer;
  color: var(--ink);
  border-left: 6px solid var(--blue-600);
}

.group-title b {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  border-radius: 999px;
  background: #f0f4f8;
}

.group-pending .group-title {
  border-left-color: var(--gold-600);
}

.group-done .group-title {
  border-left-color: var(--green-600);
}

.group-caret {
  color: var(--blue-600);
  font-size: 1.2rem;
}

.monday-table-wrap {
  overflow-x: auto;
}

.monday-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.monday-table th,
.monday-table td {
  border-top: 1px solid #e6edf4;
  border-right: 1px solid #e6edf4;
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  font-size: .95rem;
}

.monday-table th {
  color: #4d5965;
  font-weight: 800;
  background: #fbfcfe;
  position: sticky;
  top: 0;
  z-index: 1;
}

.monday-table td:first-child strong {
  display: block;
  font-weight: 950;
  color: var(--ink);
}

.monday-table td:first-child span {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: .82rem;
  font-weight: 950;
  white-space: nowrap;
}

.chip-signed,
.chip-centah {
  background: var(--green-100);
  color: var(--green-700);
}

.chip-pending,
.chip-needed {
  background: var(--gold-100);
  color: var(--gold-700);
}

.chip-issue,
.chip-expired {
  background: var(--rose-100);
  color: var(--rose-700);
}

.chip-cloud {
  background: var(--blue-100);
  color: var(--blue-700);
}

.chip-muted {
  background: #f0f2f2;
  color: #5e6b66;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.mini-btn {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: .82rem !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .board-toolbar {
    display: grid;
  }

  .board-tabs {
    border-radius: 22px;
  }

  .board-search {
    grid-template-columns: 1fr;
  }

  .board-search .primary-btn {
    width: 100%;
  }
}


/* Full monday.com inspired dashboard v3 */
.monday-app {
  background: #f6f7fb !important;
  color: #1f2937;
}

.monday-layout {
  max-width: none !important;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  padding: 0 !important;
}

.monday-sidebar {
  background: #ffffff;
  border-right: 1px solid #e6e9ef;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid #eef0f4;
}

.sidebar-brand img {
  width: 38px;
  height: 38px;
}

.sidebar-brand strong {
  display: block;
  font-weight: 900;
  letter-spacing: -.02em;
}

.sidebar-brand span {
  display: block;
  font-size: .82rem;
  color: #6b7280;
}

.sidebar-nav {
  display: grid;
  gap: 4px;
}

.sidebar-nav a,
.sidebar-logout {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #374151;
  font-weight: 750;
  transition: background .16s ease, color .16s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: #eaf2ff;
  color: #0969da;
}

.workspace-card {
  margin-top: auto;
  background: #f6f7fb;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 4px;
}

.workspace-card span {
  color: #6b7280;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 850;
}

.workspace-card strong {
  font-weight: 900;
}

.workspace-card small {
  color: #6b7280;
  line-height: 1.35;
}

.sidebar-logout {
  background: #fff;
  border: 1px solid #e6e9ef;
  justify-content: center;
}

.monday-main {
  padding: 22px clamp(18px, 3vw, 34px) 36px;
  min-width: 0;
}

.monday-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  background: transparent;
  padding: 20px 0 18px;
  border-bottom: 1px solid #e6e9ef;
}

.monday-kicker {
  color: #0969da !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .78rem !important;
  margin: 0 0 8px !important;
}

.monday-header h1 {
  margin: 0 !important;
  font-size: clamp(2rem, 3.2vw, 3.4rem) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  color: #111827;
}

.monday-header p {
  margin: 10px 0 0 !important;
  color: #6b7280;
  font-size: 1rem !important;
  max-width: 680px;
}

.monday-primary,
.monday-secondary,
.board-cleanup button,
.monday-search button {
  border: 1px solid #0969da;
  background: #0969da;
  color: #fff;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 850;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.monday-secondary,
.board-cleanup button {
  background: #fff;
  color: #374151;
  border-color: #d8dde6;
}

.monday-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.monday-stat {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 16px;
  min-height: 104px;
  border-top: 5px solid #0969da;
}

.monday-stat span {
  color: #6b7280;
  font-weight: 850;
}

.monday-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 2.2rem;
  line-height: 1;
  color: #111827;
}

.stat-blue { border-top-color: #0969da; }
.stat-yellow { border-top-color: #d9a441; }
.stat-green { border-top-color: #00a66c; }

.monday-board-shell {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(17,24,39,.04);
  padding: 18px;
}

.board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.board-head h2 {
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: -.035em;
}

.board-head p,
.board-cleanup span {
  color: #6b7280;
  margin: 4px 0 0;
}

.board-cleanup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.monday-controls {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.monday-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.monday-tabs a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  color: #374151;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid transparent;
}

.monday-tabs a.active {
  background: #0969da;
  color: #fff;
}

.monday-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.monday-search input {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid #d8dde6;
  padding: 0 12px;
  background: #fff;
}

.monday-board {
  display: grid;
  gap: 18px;
}

.work-group {
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.work-group-title {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid #e6e9ef;
  background: #fbfcfe;
}

.group-dot {
  width: 6px;
  height: 28px;
  border-radius: 99px;
  background: #d9a441;
}

.group-complete .group-dot {
  background: #00a66c;
}

.work-group-title strong {
  color: #111827;
  font-weight: 900;
}

.work-group-title em {
  color: #6b7280;
  font-style: normal;
  font-size: .9rem;
}

.work-table-wrap {
  overflow-x: auto;
}

.work-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.work-table th,
.work-table td {
  border-right: 1px solid #e6e9ef;
  border-bottom: 1px solid #e6e9ef;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  font-size: .92rem;
  color: #374151;
}

.work-table th {
  background: #fff;
  color: #4b5563;
  font-weight: 850;
}

.customer-col {
  min-width: 220px;
}

.customer-cell strong {
  display: block;
  color: #111827;
  font-weight: 900;
}

.customer-cell span {
  display: block;
  margin-top: 3px;
  color: #6b7280;
}

.board-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 6px;
  padding: 0 9px;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.chip-signed,
.chip-done {
  background: #dff7ec;
  color: #007a50;
}

.chip-pending,
.chip-needed {
  background: #fff2cf;
  color: #8a5d00;
}

.chip-issue,
.chip-expired {
  background: #ffe6ea;
  color: #9f1239;
}

.chip-cloud {
  background: #e6f0ff;
  color: #0958b8;
}

.chip-muted {
  background: #eef0f4;
  color: #5f6877;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.table-actions a,
.table-actions button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #d8dde6;
  background: #fff;
  color: #374151;
  border-radius: 7px;
  font-weight: 850;
  font-size: .8rem;
  text-decoration: none;
  cursor: pointer;
}

.table-actions .action-blue {
  background: #0969da;
  border-color: #0969da;
  color: #fff;
}

.monday-empty {
  border: 1px dashed #cfd6e2;
  background: #fbfcfe;
  border-radius: 12px;
  padding: 34px;
  text-align: center;
}

@media (max-width: 960px) {
  .monday-layout {
    grid-template-columns: 1fr;
  }

  .monday-sidebar {
    position: relative;
    height: auto;
  }

  .sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monday-header,
  .board-head {
    display: grid;
  }

  .monday-stats {
    grid-template-columns: 1fr;
  }

  .monday-search {
    grid-template-columns: 1fr;
  }
}


/* Unified monday-style pages v4 */
.monday-app .create-shell,
.monday-app .success-shell {
  margin-top: 18px;
}

.flow-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.flow-step {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 3px;
  border-top: 5px solid #0969da;
}

.flow-step span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6f0ff;
  color: #0958b8;
  font-weight: 950;
}

.flow-step strong {
  font-size: 1.05rem;
  color: #111827;
}

.flow-step small {
  color: #6b7280;
}

.step-verify {
  border-top-color: #00a66c;
}

.step-verify span {
  background: #dff7ec;
  color: #007a50;
}

.step-send {
  border-top-color: #d9a441;
}

.step-send span {
  background: #fff2cf;
  color: #8a5d00;
}

.create-board-form {
  display: grid;
  gap: 18px;
}

.create-group .work-group-title {
  background: #fbfcfe;
}

.group-upload .group-dot {
  background: #0969da;
}

.group-verify .group-dot {
  background: #00a66c;
}

.group-send .group-dot {
  background: #d9a441;
}

.create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.create-grid.one-col {
  grid-template-columns: 1fr;
}

.file-tile {
  min-height: 132px;
  border: 1px solid #d8dde6;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.file-tile:hover {
  border-color: #0969da;
  box-shadow: 0 8px 20px rgba(9,105,218,.08);
  transform: translateY(-1px);
}

.file-tile b {
  color: #111827;
  font-weight: 950;
}

.file-tile span {
  color: #6b7280;
  line-height: 1.4;
}

.platform-input {
  min-height: 44px;
  width: 100%;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  color: #111827;
}

.platform-input:focus {
  outline: none;
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9,105,218,.14);
}

.field-group label {
  font-weight: 850;
  color: #111827;
  margin-bottom: 6px;
}

.field-note {
  color: #6b7280;
  margin: 6px 0 0;
  font-size: .9rem;
}

.wide-field {
  grid-column: 1 / -1;
}

.platform-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid #e6e9ef;
  background: #fbfcfe;
}

.platform-action-bar span {
  color: #6b7280;
}

.platform-link-box {
  background: #fbfcfe;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.summary-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.summary-board div {
  background: #fbfcfe;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  padding: 12px;
}

.summary-board span {
  display: block;
  color: #6b7280;
  font-size: .82rem;
  font-weight: 850;
}

.summary-board strong {
  display: block;
  color: #111827;
  margin-top: 4px;
}

.template-stats {
  grid-template-columns: 1.4fr .8fr 1fr;
}

.small-stat {
  font-size: 1.15rem !important;
  line-height: 1.1 !important;
  word-break: break-word;
}

.align-end {
  align-self: end;
}

.align-end .monday-primary {
  width: 100%;
}

.monday-role-grid {
  margin: 18px 0;
}

.monday-role-grid .guide-card {
  box-shadow: none;
  border-radius: 12px;
}

@media (max-width: 960px) {
  .flow-strip,
  .create-grid,
  .summary-board,
  .template-stats {
    grid-template-columns: 1fr;
  }

  .platform-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-action-bar .monday-primary {
    width: 100%;
  }
}

/* Dashboard truth fix */
.table-actions .danger-action {
  color: #9f1239 !important;
  border-color: #ffd0d7 !important;
  background: #fff5f6 !important;
}


/* Clean action system v2 */
.clean-actions-table .next-action-col {
  width: 230px;
}

.next-action-stack {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.primary-row-action {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #0969da;
  background: #0969da;
  color: #fff;
  font-weight: 850;
  font-size: .82rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}

.warning-action {
  background: #d9a441;
  border-color: #d9a441;
  color: #1f2937;
}

.done-action {
  background: #00a66c;
  border-color: #00a66c;
}

.quiet-next-action {
  color: #6b7280;
  font-weight: 800;
  font-size: .86rem;
  white-space: nowrap;
}

.row-more {
  position: relative;
}

.row-more summary {
  list-style: none;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d8dde6;
  background: #fff;
  color: #374151;
  border-radius: 8px;
  font-weight: 850;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.row-more summary::-webkit-details-marker {
  display: none;
}

.row-more[open] summary {
  border-color: #0969da;
  color: #0969da;
}

.row-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 220px;
  z-index: 50;
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .16);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.row-more-menu a,
.row-more-menu button {
  width: 100%;
  min-height: 34px;
  border: none;
  background: transparent;
  color: #374151;
  text-decoration: none;
  border-radius: 8px;
  padding: 0 10px;
  text-align: left;
  font-weight: 800;
  font-size: .86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.row-more-menu a:hover,
.row-more-menu button:hover {
  background: #f3f6fb;
}

.row-more-menu .danger-action {
  color: #9f1239 !important;
}

@media (max-width: 900px) {
  .next-action-stack {
    align-items: flex-start;
    flex-direction: column;
  }

  .row-more-menu {
    right: auto;
    left: 0;
  }
}

/* Dashboard reliability fixes */
.live-search-wrap {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.live-search-count {
  color: #6b7280;
  font-weight: 850;
  white-space: nowrap;
  padding: 0 4px;
}

.clean-actions-table th:nth-child(5),
.clean-actions-table td:nth-child(5) {
  min-width: 94px;
}

/* Profile + details overlay fix */
.row-more-menu {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  right: 0 !important;
  max-height: 320px;
  overflow: auto;
}

.work-table-wrap {
  overflow-x: auto;
  overflow-y: visible !important;
  padding-bottom: 90px;
}

.platform-textarea {
  width: 100%;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  color: #111827;
  resize: vertical;
  font: inherit;
}

.platform-textarea:focus {
  outline: none;
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9,105,218,.14);
}

/* Profile v2 */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
}

.profile-editor {
  min-width: 0;
}

.signature-preview-card {
  background: #fbfcfe;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 22px;
}

.signature-preview-card h3 {
  margin: 0 0 14px;
  font-size: 1.2rem;
}

.email-preview-shell {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.email-preview-logo {
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.email-preview-shell h4 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}

.email-preview-shell p {
  color: #667085;
  line-height: 1.5;
}

.preview-button {
  display: inline-flex;
  margin: 10px 0 18px;
  background: #0969da;
  color: white;
  font-weight: 850;
  border-radius: 10px;
  padding: 12px 16px;
}

.preview-signature {
  border-top: 1px solid #e6e9ef;
  padding-top: 16px;
  margin-top: 10px;
  text-align: left;
  display: grid;
  gap: 4px;
  color: #344054;
}

.preview-signature-image {
  max-width: 120px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 8px;
}

.preview-signature strong {
  color: #111827;
}

.preview-signature span,
.preview-signature small {
  color: #667085;
  line-height: 1.4;
}

@media (max-width: 1000px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .signature-preview-card {
    position: relative;
    top: auto;
  }
}

/* Company branding settings */
.company-brand-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
}
.company-brand-editor { min-width: 0; }
.color-input { width: 90px !important; padding: 4px !important; cursor: pointer; }
@media (max-width: 1000px) { .company-brand-layout { grid-template-columns: 1fr; } }

/* Production polish v1 */
.sidebar-legal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-top: 1px solid #eef0f4;
  padding-top: 12px;
}

.sidebar-legal a {
  color: #6b7280;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 7px;
}

.sidebar-legal a:hover {
  background: #f3f6fb;
  color: #0969da;
}

.legal-page-card {
  max-width: 920px;
}

.legal-page-card h2 {
  margin: 0 0 14px;
  font-size: 2rem;
  letter-spacing: -.04em;
}

.legal-page-card h3 {
  margin: 24px 0 8px;
  font-size: 1.15rem;
}

.legal-page-card p {
  color: #4b5563;
  line-height: 1.65;
  max-width: 780px;
}

.work-table td {
  line-height: 1.35;
}

/* Endgame features v1 */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 18px;
  margin: 18px 0;
}
.bottom-detail-grid { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); }
.detail-status-row, .detail-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.detail-actions form { margin: 0; }
.detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-fields div { background: #fbfcfe; border: 1px solid #e6e9ef; border-radius: 10px; padding: 12px; }
.detail-fields span { display:block; color:#6b7280; font-size:.8rem; font-weight:850; margin-bottom:4px; }
.detail-fields strong { color:#111827; word-break:break-word; }
.activity-list { display:grid; gap:14px; }
.activity-item { display:grid; grid-template-columns:14px 1fr; gap:12px; position:relative; }
.activity-item:not(:last-child)::before { content:""; position:absolute; left:6px; top:18px; bottom:-14px; width:2px; background:#e6e9ef; }
.activity-dot { width:14px; height:14px; border-radius:99px; background:#0969da; margin-top:4px; z-index:1; }
.activity-success .activity-dot { background:#00a66c; }
.activity-error .activity-dot { background:#e11d48; }
.activity-item strong { color:#111827; font-weight:900; }
.activity-item p { margin:3px 0; color:#374151; line-height:1.4; }
.activity-item small { color:#6b7280; }
.note-form { display:grid; gap:12px; }
.notes-list { display:grid; gap:10px; margin-top:16px; }
.note-card { border:1px solid #e6e9ef; background:#fbfcfe; border-radius:10px; padding:12px; }
.note-card p { margin:5px 0; color:#374151; }
.note-card small { color:#6b7280; }
.soft-divider { border:0; border-top:1px solid #e6e9ef; margin:18px 0; }
.danger-full { width:100%; min-height:40px; border:1px solid #ffd0d7; background:#fff5f6; color:#9f1239; border-radius:8px; font-weight:900; cursor:pointer; }
.view-action { background:#111827 !important; border-color:#111827 !important; }
.template-help { display:flex; flex-wrap:wrap; gap:8px; border:1px solid #e6e9ef; background:#fbfcfe; border-radius:12px; padding:12px; }
.template-help strong { width:100%; }
.template-help span { background:#eef0f4; border-radius:999px; padding:6px 10px; font-weight:850; color:#374151; }
@media (max-width: 1000px) {
  .detail-grid, .bottom-detail-grid { grid-template-columns:1fr; }
  .detail-fields { grid-template-columns:1fr; }
}

/* UX nav/result/view tracking v1 */
.result-focus {
  border-top: 6px solid #00a66c;
  margin-bottom: 18px;
  animation: resultPulse .35s ease both;
}

@keyframes resultPulse {
  from { transform: translateY(-6px); opacity: .75; }
  to { transform: translateY(0); opacity: 1; }
}

.copy-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.unified-nav {
  gap: 6px;
}

.unified-nav a {
  min-height: 46px;
  display: grid;
  align-content: center;
  gap: 2px;
}

.unified-nav a span {
  font-size: .94rem;
  line-height: 1;
}

.unified-nav a small {
  color: #7b8494;
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.15;
  white-space: normal;
}

.unified-nav a.active small,
.unified-nav a:hover small {
  color: #0969da;
}

.nav-section-label {
  color: #8a94a6;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  padding: 12px 10px 4px;
}

.muted-table-text {
  display: inline-block;
  margin-top: 4px;
  color: #6b7280;
  font-size: .74rem;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .copy-link-row {
    grid-template-columns: 1fr;
  }
}

/* Clean hierarchy pass */
.monday-layout {
  background: #f6f7fb;
}

.monday-sidebar {
  width: 260px;
  padding: 18px 14px;
  border-right: 1px solid #e6e9ef;
  background: #ffffff;
}

.sidebar-brand {
  padding: 0 4px 18px;
  border-bottom: 1px solid #eef0f4;
  margin-bottom: 14px;
}

.sidebar-brand img {
  width: 42px;
  height: 42px;
}

.clean-sidebar-nav {
  gap: 6px;
}

.clean-sidebar-nav a {
  display: grid;
  gap: 3px;
  padding: 12px 12px;
  border-radius: 12px;
  min-height: auto;
  text-decoration: none;
  color: #111827;
}

.clean-sidebar-nav a span {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.clean-sidebar-nav a small {
  font-size: .78rem;
  line-height: 1.2;
  color: #6b7280;
  font-weight: 650;
}

.clean-sidebar-nav a.active {
  background: #eaf2ff;
  color: #0969da;
}

.clean-sidebar-nav a.active small {
  color: #0969da;
}

.clean-sidebar-nav a:hover {
  background: #f3f6fb;
}

.compact-workspace {
  margin-top: auto;
}

.sidebar-legal {
  display: none !important;
}

.cleaner-header {
  padding-bottom: 24px;
  border-bottom: 1px solid #e6e9ef;
  margin-bottom: 22px;
}

.cleaner-header h1,
.monday-header h1 {
  letter-spacing: -0.06em;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 18px;
}

.settings-tile {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 18px;
  padding: 20px;
  min-height: 170px;
  text-decoration: none;
  color: #111827;
  display: grid;
  align-content: start;
  gap: 10px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.settings-tile:hover {
  transform: translateY(-2px);
  border-color: #bcd7ff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

.settings-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eaf2ff;
  color: #0969da;
  display: inline-grid;
  place-items: center;
  font-weight: 950;
  font-size: .82rem;
}

.settings-tile strong {
  font-size: 1.2rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.settings-tile p {
  margin: 0;
  color: #667085;
  line-height: 1.45;
}

.settings-subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px 0 20px;
}

.settings-subnav a {
  text-decoration: none;
  color: #344054;
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 850;
}

.settings-subnav a:hover {
  background: #eaf2ff;
  color: #0969da;
  border-color: #bcd7ff;
}

.legal-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.legal-links-grid a {
  background: #f8fafc;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 14px;
  text-decoration: none;
  color: #111827;
  font-weight: 900;
  text-align: center;
}

.readable-card {
  font-size: 1rem;
}

.legal-page-card h2 {
  font-size: 2.1rem;
  margin: 0 0 14px;
}

.legal-page-card h3 {
  margin-top: 24px;
}

.legal-page-card p {
  max-width: 820px;
  color: #4b5563;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .monday-sidebar {
    width: 100%;
  }
  .settings-grid,
  .legal-links-grid {
    grid-template-columns: 1fr;
  }
}

/* Setup checklist + image upload v1 */
.setup-checklist-card {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 18px;
  padding: 20px;
  margin: 18px 0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.setup-checklist-head h2 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  letter-spacing: -.04em;
}

.setup-checklist-head p {
  margin: 0 0 16px;
  color: #667085;
}

.setup-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.check-item {
  border: 1px solid #e6e9ef;
  background: #fbfcfe;
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: #111827;
  display: grid;
  gap: 5px;
}

.check-item span {
  width: 30px;
  height: 30px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: #eef0f4;
  color: #667085;
  font-weight: 950;
}

.check-item.done {
  border-color: #bfecd9;
  background: #f0fff8;
}

.check-item.done span {
  background: #00a66c;
  color: #fff;
}

.check-item strong {
  font-size: 1rem;
  font-weight: 950;
}

.check-item small {
  color: #667085;
  line-height: 1.3;
}

.upload-inline-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .5fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e6e9ef;
  background: #fbfcfe;
  border-radius: 14px;
  padding: 14px;
  margin: 0 16px 16px;
}

.upload-inline-card strong {
  color: #111827;
  font-weight: 950;
}

.upload-inline-card p {
  color: #667085;
  margin: 4px 0 0;
  line-height: 1.35;
}

.upload-inline-card input[type="file"] {
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  padding: 10px;
}

.test-mode-banner {
  background: #fff7df;
  border: 1px solid #f1d28b;
  color: #6b4e00;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 850;
  margin-bottom: 16px;
}

@media (max-width: 1000px) {
  .setup-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upload-inline-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .setup-checklist-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin mode identity v1 */
.admin-role-pill {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-style: normal;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(90deg, #111827 0%, #263244 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 16px 36px rgba(17, 24, 39, .12);
}
.admin-mode-banner strong { display: block; font-size: .98rem; font-weight: 950; letter-spacing: -.02em; }
.admin-mode-banner span { display: block; color: rgba(255,255,255,.76); margin-top: 2px; font-size: .9rem; line-height: 1.35; }
.admin-mode-banner a {
  color: #111827;
  background: #ffffff;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
  border-radius: 10px;
  padding: 10px 12px;
}
.workspace-role-line {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #0969da !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
}
.admin-only-tag {
  display: inline-flex;
  margin-left: 8px;
  vertical-align: middle;
  background: #111827;
  color: #fff;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-tile .admin-only-tag { margin-left: 0; width: fit-content; }
@media (max-width: 760px) {
  .admin-mode-banner { align-items: flex-start; flex-direction: column; }
  .admin-mode-banner a { width: 100%; text-align: center; }
}

/* Email cleanup v1 */
.field-note strong {
  color: #111827;
}

/* Supabase single job save fix v1 */

/* Review + Edit Contract v1 */
.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.review-warning-card {
  background: #fff7df;
  border: 1px solid #f1d28b;
  color: #5f4300;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.review-warning-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 950;
  margin-bottom: 8px;
}
.review-warning-card ul {
  margin: 0;
  padding-left: 18px;
}
.send-reviewed-form {
  margin-top: 16px;
  border-top: 1px solid #e6e9ef;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.send-reviewed-form span {
  color: #667085;
  font-weight: 700;
}
.review-summary {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.review-summary div {
  border: 1px solid #e6e9ef;
  background: #fbfcfe;
  border-radius: 12px;
  padding: 12px;
}
.review-summary span {
  display: block;
  color: #667085;
  font-size: .78rem;
  font-weight: 850;
  margin-bottom: 4px;
}
.review-summary strong {
  color: #111827;
  word-break: break-word;
}
@media (max-width: 1000px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
  .review-grid {
    grid-template-columns: 1fr;
  }
}

/* Edit after generate v1 */
.row-more-menu a[href*="/edit"] {
  font-weight: 950;
}

/* Smart send + viewed tracking v1 */
.smart-send-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.smart-send-bar span {
  color: #667085;
  font-weight: 750;
}
.chip-customer-viewed {
  background: #dff8ec;
  color: #027a48;
}
.chip-internal-viewed {
  background: #eef2ff;
  color: #3538cd;
}

/* Customer email brand v1 */
.settings-form-section {
  border-top: 1px solid #e6e9ef;
  padding-top: 18px;
  margin-top: 8px;
}
.settings-form-section:first-child {
  border-top: 0;
  padding-top: 0;
}
.settings-form-section h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #111827;
}
.settings-form-section p {
  margin: 0;
  color: #667085;
  line-height: 1.4;
}
.customer-email-section {
  background: #fff7f7;
  border: 1px solid #ffd0d0;
  border-radius: 14px;
  padding: 16px;
}
.email-brand-upload-card {
  border-color: #ffd0d0;
  background: #fffafa;
}
.brand-note-card {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e6e9ef;
}
.brand-note-card strong {
  font-weight: 950;
  color: #111827;
}
.brand-note-card p {
  margin: 5px 0 0;
  color: #667085;
  line-height: 1.4;
}

/* Platform companies v1 */
.platform-switcher-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #101828;
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .12);
}
.platform-switcher-bar span,
.platform-switcher-bar small {
  display: block;
  color: rgba(255,255,255,.72);
  font-weight: 750;
}
.platform-switcher-bar strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 950;
}
.platform-switcher-bar a {
  background: #fff;
  color: #101828;
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  font-weight: 950;
  white-space: nowrap;
}
.platform-owner-warning {
  background: #fff7df;
  border: 1px solid #f1d28b;
  color: #5f4300;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.platform-owner-warning strong {
  font-weight: 950;
}
.platform-owner-warning p {
  margin: 5px 0 0;
  line-height: 1.4;
}
.platform-company-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.company-switch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.company-switch-card {
  text-align: left;
  border: 1px solid #e6e9ef;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 7px;
}
.company-switch-card.active {
  border-color: #0969da;
  box-shadow: 0 0 0 3px rgba(9,105,218,.12);
}
.company-switch-card strong {
  font-size: 1.1rem;
  color: #111827;
  font-weight: 950;
}
.company-switch-card small,
.company-switch-card span {
  color: #667085;
  font-weight: 750;
}
.company-switch-card button {
  border: 0;
  border-radius: 10px;
  background: #0969da;
  color: #fff;
  font-weight: 950;
  padding: 10px 12px;
  cursor: pointer;
  margin-top: 8px;
}
.company-switch-card.active button {
  background: #101828;
}
@media (max-width: 1000px) {
  .company-switch-grid,
  .platform-company-create {
    grid-template-columns: 1fr;
  }
  .platform-switcher-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-switcher-bar a {
    text-align: center;
  }
}

/* Users company scope fix v1 */
.platform-selected-company-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #eef4ff;
  border: 1px solid #cfe0ff;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.platform-selected-company-note strong {
  display: block;
  color: #111827;
  font-weight: 950;
}
.platform-selected-company-note p {
  margin: 5px 0 0;
  color: #667085;
  line-height: 1.4;
}
.platform-selected-company-note a {
  background: #0969da;
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  font-weight: 950;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .platform-selected-company-note {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-selected-company-note a {
    text-align: center;
  }
}

/* Old System Fixed v2 CRM UI polish */
:root {
  --crm-bg:#f6f7fb;
  --crm-card:#ffffff;
  --crm-ink:#101827;
  --crm-muted:#667085;
  --crm-line:#e4e8f0;
  --crm-blue:#3347d8;
  --crm-blue-soft:#edf2ff;
}
body.monday-app, .monday-app {
  background: var(--crm-bg) !important;
}
.monday-layout.crm-shell,
.monday-layout {
  background: var(--crm-bg) !important;
}
.monday-sidebar, .crm-sidebar {
  background:#fff !important;
  border-right:1px solid var(--crm-line) !important;
}
.sidebar-brand {
  align-items:flex-start !important;
  gap:10px !important;
}
.sidebar-brand img {
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
}
.sidebar-nav a {
  border-radius:12px !important;
  padding:13px 14px !important;
  color:var(--crm-ink) !important;
}
.sidebar-nav a.active, .sidebar-nav a:hover {
  background:var(--crm-blue-soft) !important;
  color:var(--crm-blue) !important;
}
.monday-main {
  background:var(--crm-bg) !important;
}
.monday-header h1 {
  letter-spacing:-.06em !important;
}
.monday-board-shell,
.review-warning-card,
.card,
.sign-hero-card,
.signing-card,
.document-card {
  background:#fff !important;
  border:1px solid var(--crm-line) !important;
  box-shadow:0 14px 45px rgba(16,24,39,.06) !important;
}
.review-layout {
  align-items:start !important;
}
.review-head-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.monday-primary {
  background:var(--crm-blue) !important;
  border-color:var(--crm-blue) !important;
  border-radius:12px !important;
}
.monday-secondary {
  background:#fff !important;
  border:1px solid var(--crm-line) !important;
  color:var(--crm-ink) !important;
  border-radius:12px !important;
}
.platform-input,
input[type="text"],
input[type="email"],
input[type="file"] {
  border-radius:12px !important;
}
.quote-placement-shell {
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.quote-placement-controls {
  padding:22px;
  position:sticky;
  top:20px;
}
.qp-tool-buttons, .qp-save-form {
  display:grid;
  gap:10px;
  margin-top:14px;
}
.qp-page-pill {
  background:#f8fafc;
  border:1px solid var(--crm-line);
  border-radius:14px;
  padding:12px;
  margin-top:14px;
  font-weight:900;
}
.quote-canvas-card {
  padding:16px;
  overflow:auto;
}
.quote-canvas-toolbar {
  display:flex;
  justify-content:space-between;
  color:var(--crm-muted);
  font-weight:850;
  margin-bottom:12px;
}
.quote-canvas-wrap {
  position:relative;
  margin:0 auto;
  background:#1f2937;
  border-radius:14px;
  overflow:hidden;
}
#pdfCanvas { display:block; }
.qp-box {
  position:absolute;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-weight:950;
  cursor:move;
  user-select:none;
}
.signature-box {
  background:rgba(51,71,216,.18);
  border:2px solid var(--crm-blue);
  color:var(--crm-blue);
}
.date-box {
  background:rgba(227,24,55,.16);
  border:2px solid #e31837;
  color:#991b1b;
}
@media(max-width:1000px){
  .quote-placement-shell,.review-layout{grid-template-columns:1fr !important;}
  .quote-placement-controls{position:static;}
}



/* Mandatory Quote Flow + CRM UI v3 */
:root{
  --crm-bg:#f4f6fa;
  --crm-surface:#ffffff;
  --crm-ink:#0f172a;
  --crm-muted:#667085;
  --crm-line:#e5e7eb;
  --crm-blue:#3947db;
  --crm-blue-soft:#eef2ff;
  --crm-green:#ecfdf3;
  --crm-red:#fff1f2;
  --crm-shadow:0 18px 48px rgba(15,23,42,.06);
}

body.monday-app,
.monday-app,
.monday-layout,
.monday-layout.crm-shell{
  background:var(--crm-bg)!important;
  color:var(--crm-ink)!important;
}

.monday-layout{
  min-height:100vh!important;
}

.monday-sidebar,
.crm-sidebar{
  background:var(--crm-surface)!important;
  border-right:1px solid var(--crm-line)!important;
  box-shadow:none!important;
  padding:28px 22px!important;
}

.sidebar-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:6px!important;
  margin-bottom:34px!important;
}

.sidebar-brand img{
  max-width:105px!important;
  height:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  object-fit:contain!important;
}

.sidebar-brand strong{
  letter-spacing:-.04em!important;
}

.sidebar-brand span{
  color:var(--crm-muted)!important;
  font-weight:750!important;
}

.sidebar-nav{
  display:grid!important;
  gap:8px!important;
}

.sidebar-nav a{
  border-radius:12px!important;
  padding:13px 14px!important;
  color:var(--crm-ink)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  display:grid!important;
  gap:2px!important;
}

.sidebar-nav a span{
  font-weight:900!important;
}

.sidebar-nav a small{
  color:var(--crm-muted)!important;
  font-weight:750!important;
}

.sidebar-nav a.active,
.sidebar-nav a:hover{
  background:var(--crm-blue-soft)!important;
  color:var(--crm-blue)!important;
}

.sidebar-nav a.active small,
.sidebar-nav a:hover small{
  color:var(--crm-blue)!important;
}

.monday-main{
  background:var(--crm-bg)!important;
  padding:34px 38px!important;
}

.platform-switcher-bar{
  max-width:1240px!important;
  margin:0 auto 18px!important;
  border-radius:18px!important;
  background:#0f172a!important;
  box-shadow:var(--crm-shadow)!important;
}

.monday-header,
.cleaner-header,
.crm-header{
  max-width:1240px!important;
  margin:0 auto 24px!important;
  align-items:flex-start!important;
  border-bottom:1px solid var(--crm-line)!important;
  padding-bottom:24px!important;
}

.monday-header h1{
  font-size:clamp(2.4rem,4vw,4.8rem)!important;
  line-height:.9!important;
  letter-spacing:-.075em!important;
}

.monday-header p{
  color:var(--crm-muted)!important;
  font-weight:650!important;
  max-width:720px!important;
}

.monday-kicker{
  color:var(--crm-blue)!important;
  letter-spacing:.16em!important;
}

.monday-board-shell,
.card,
.sign-hero-card,
.document-card,
.signing-card,
.review-warning-card,
.template-card,
.settings-card,
.company-card{
  background:var(--crm-surface)!important;
  border:1px solid var(--crm-line)!important;
  border-radius:18px!important;
  box-shadow:var(--crm-shadow)!important;
}

.review-layout,
.create-board,
.dashboard-grid,
.settings-grid{
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.review-layout{
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.9fr)!important;
  gap:20px!important;
  align-items:start!important;
}

.board-head{
  border-bottom:1px solid var(--crm-line)!important;
  padding-bottom:14px!important;
  margin-bottom:16px!important;
}

.board-head h2{
  letter-spacing:-.05em!important;
}

.review-grid,
.create-grid{
  gap:14px!important;
}

.field-group{
  background:#fff!important;
  border:1px solid var(--crm-line)!important;
  border-radius:14px!important;
  padding:14px!important;
}

.field-group label{
  font-size:.86rem!important;
  color:var(--crm-ink)!important;
  font-weight:900!important;
}

.platform-input,
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select{
  border:1px solid #d8dee9!important;
  border-radius:12px!important;
  background:#fff!important;
  min-height:44px!important;
}

.monday-primary,
.primary-btn{
  background:var(--crm-blue)!important;
  border-color:var(--crm-blue)!important;
  color:#fff!important;
  border-radius:12px!important;
  box-shadow:none!important;
}

.monday-secondary,
.secondary-btn{
  background:#fff!important;
  color:var(--crm-ink)!important;
  border:1px solid var(--crm-line)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}

.platform-action-bar,
.smart-send-bar{
  border-top:1px solid var(--crm-line)!important;
  background:#fbfcff!important;
  border-radius:0 0 18px 18px!important;
  gap:10px!important;
}

.flow-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:9px 12px!important;
  background:var(--crm-blue-soft)!important;
  color:var(--crm-blue)!important;
  border-radius:999px!important;
  font-weight:950!important;
  font-size:.82rem!important;
}

.review-summary{
  display:grid!important;
  gap:10px!important;
}

.review-summary div{
  background:#fbfcff!important;
  border:1px solid var(--crm-line)!important;
  border-radius:14px!important;
  padding:12px!important;
}

.review-summary span{
  color:var(--crm-muted)!important;
  font-weight:850!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-size:.72rem!important;
}

.review-summary strong{
  display:block!important;
  margin-top:3px!important;
  color:var(--crm-ink)!important;
}

/* Quote placement page */
.quote-placement-shell{
  max-width:1240px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:320px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:start!important;
}

.quote-placement-controls{
  padding:22px!important;
  position:sticky!important;
  top:20px!important;
}

.quote-placement-controls h2{
  letter-spacing:-.05em!important;
  margin-top:0!important;
}

.quote-placement-controls p{
  color:var(--crm-muted)!important;
  font-weight:700!important;
}

.qp-tool-buttons,
.qp-save-form{
  display:grid!important;
  gap:10px!important;
  margin-top:14px!important;
}

.qp-page-pill{
  background:#fbfcff!important;
  border:1px solid var(--crm-line)!important;
  border-radius:14px!important;
  padding:12px!important;
  margin-top:14px!important;
  font-weight:950!important;
}

.quote-canvas-card{
  padding:16px!important;
  overflow:auto!important;
}

.quote-canvas-toolbar{
  display:flex!important;
  justify-content:space-between!important;
  color:var(--crm-muted)!important;
  font-weight:850!important;
  margin-bottom:12px!important;
  border-bottom:1px solid var(--crm-line)!important;
  padding-bottom:12px!important;
}

.quote-canvas-wrap{
  position:relative!important;
  margin:0 auto!important;
  background:#111827!important;
  border-radius:16px!important;
  overflow:hidden!important;
}

#pdfCanvas{display:block!important;}

.qp-box{
  position:absolute!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  font-weight:950!important;
  cursor:move!important;
  user-select:none!important;
}

.signature-box{
  background:rgba(57,71,219,.18)!important;
  border:2px solid var(--crm-blue)!important;
  color:var(--crm-blue)!important;
}

.date-box{
  background:rgba(227,24,55,.16)!important;
  border:2px solid #e31837!important;
  color:#991b1b!important;
}

.notice-stack{
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.notice{
  border-radius:14px!important;
  border:1px solid var(--crm-line)!important;
  box-shadow:none!important;
}

@media(max-width:1100px){
  .review-layout,
  .quote-placement-shell{
    grid-template-columns:1fr!important;
  }
  .quote-placement-controls{
    position:static!important;
  }
}

@media(max-width:760px){
  .monday-main{
    padding:22px 16px!important;
  }
  .monday-header{
    flex-direction:column!important;
  }
  .platform-action-bar,
  .smart-send-bar{
    align-items:stretch!important;
  }
}



/* =========================================================
   Exact CRM Style v4
   Inspired directly by the uploaded CRM reference:
   white left rail, light gray app background, clean cards,
   thin borders, small type, compact rows, purple-blue accent,
   subtle hover states, and table-like layouts.
   ========================================================= */

:root {
  --ui-bg: #f3f5f8;
  --ui-shell: #ffffff;
  --ui-card: #ffffff;
  --ui-ink: #111318;
  --ui-muted: #6f7481;
  --ui-soft: #f8fafc;
  --ui-soft-2: #f1f4f9;
  --ui-line: #e6e8ee;
  --ui-line-dark: #d8dce5;
  --ui-accent: #3f46df;
  --ui-accent-dark: #3037c9;
  --ui-accent-soft: #eef2ff;
  --ui-success-bg: #ecfdf3;
  --ui-success: #067647;
  --ui-warning-bg: #fff7ed;
  --ui-warning: #b54708;
  --ui-danger-bg: #fff1f3;
  --ui-danger: #c01048;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body,
body.monday-app,
.monday-app {
  margin: 0 !important;
  background: var(--ui-bg) !important;
  color: var(--ui-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* App shell */
.monday-layout,
.monday-layout.crm-shell {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: var(--ui-bg) !important;
}

.monday-sidebar,
.crm-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  background: var(--ui-shell) !important;
  border-right: 1px solid var(--ui-line) !important;
  padding: 28px 18px !important;
  box-shadow: none !important;
}

/* Logo/brand should feel like CRM top-left */
.sidebar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 6px 30px !important;
  margin: 0 !important;
  min-height: auto !important;
}

.sidebar-brand::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, #0f172a 0 48%, transparent 49%),
    linear-gradient(315deg, #0f172a 0 48%, transparent 49%),
    #ffffff;
  border: 2px solid #0f172a;
  display: inline-block;
  flex: 0 0 auto;
  transform: rotate(0deg);
}

.sidebar-brand img {
  max-width: 98px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: none !important;
}

.sidebar-brand strong,
.sidebar-brand div strong {
  display: block !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  color: var(--ui-ink) !important;
  font-weight: 850 !important;
}

.sidebar-brand span,
.sidebar-brand div span,
.sidebar-brand small,
.sidebar-brand div small {
  display: block !important;
  margin-top: 2px !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* Sidebar nav like screenshot */
.sidebar-nav,
.clean-sidebar-nav {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar-nav a {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ui-ink) !important;
  font-weight: 780 !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

.sidebar-nav a::before {
  width: 20px;
  height: 20px;
  border: 1.8px solid currentColor;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: currentColor;
  opacity: .9;
  font-size: 12px;
  line-height: 1;
}

.sidebar-nav a:nth-child(1)::before { content: "⌂"; border-radius: 5px; }
.sidebar-nav a:nth-child(2)::before { content: "◰"; }
.sidebar-nav a:nth-child(3)::before { content: "▤"; }
.sidebar-nav a:nth-child(4)::before { content: "⚙"; }
.sidebar-nav a:nth-child(5)::before { content: "◫"; }
.sidebar-nav a:nth-child(6)::before { content: "?" ;}

.sidebar-nav a span {
  font-size: 14px !important;
  font-weight: 780 !important;
  color: inherit !important;
  letter-spacing: -.01em !important;
}

.sidebar-nav a small {
  display: none !important;
}

.sidebar-nav a.active,
.sidebar-nav a:hover,
.sidebar-nav a[aria-current="page"] {
  background: var(--ui-accent-soft) !important;
  color: #2227a8 !important;
  border-color: transparent !important;
}

/* Bottom workspace card should look like CRM profile block */
.workspace-card,
.compact-workspace,
.sidebar-logout,
.side-note {
  margin-top: 28px !important;
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  padding: 14px !important;
}

.workspace-card span,
.compact-workspace span {
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 850 !important;
}

.workspace-card strong,
.compact-workspace strong {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  margin-top: 5px !important;
  letter-spacing: -.02em !important;
}

.workspace-card small,
.compact-workspace small {
  color: var(--ui-muted) !important;
  font-weight: 650 !important;
}

/* Main area */
.monday-main {
  min-width: 0 !important;
  background: var(--ui-bg) !important;
  padding: 30px 36px 44px !important;
}

.monday-main > section,
.monday-main > header,
.monday-main > .notice-stack,
.monday-main > .platform-switcher-bar,
.monday-main > .review-layout,
.monday-main > .dashboard-grid,
.monday-main > .settings-grid,
.monday-main > .create-board,
.monday-main > .quote-placement-shell {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Top bars closer to screenshot: almost flat */
.platform-switcher-bar {
  background: transparent !important;
  color: var(--ui-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}

.platform-switcher-bar > * {
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow-card) !important;
}

/* Headers */
.monday-header,
.cleaner-header,
.crm-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 26px !important;
}

.monday-header h1,
.cleaner-header h1,
.crm-header h1 {
  margin: 0 !important;
  font-size: clamp(28px, 3.2vw, 36px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;
  color: var(--ui-ink) !important;
  font-weight: 760 !important;
}

.monday-header p,
.cleaner-header p,
.crm-header p {
  margin: 8px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 540 !important;
  max-width: 680px !important;
}

.monday-kicker {
  color: #2227a8 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: .13em !important;
  font-weight: 850 !important;
  margin: 0 0 10px !important;
}

/* CRM tab row / workflow row */
.crm-tabs,
.workflow-tabs,
.step-cards,
.setup-checklist-grid {
  display: flex !important;
  gap: 22px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--ui-line) !important;
  margin: -6px 0 24px !important;
  padding: 0 !important;
}

.crm-tabs a,
.workflow-tabs a {
  color: var(--ui-ink) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  padding: 0 0 12px !important;
  border-bottom: 2px solid transparent !important;
}

.crm-tabs a.active,
.workflow-tabs a.active {
  color: #2227a8 !important;
  border-bottom-color: var(--ui-accent) !important;
}

/* Cards */
.monday-board-shell,
.review-warning-card,
.review-preview-card,
.contract-command-card,
.detail-clean-card,
.template-card,
.settings-card,
.company-card,
.signing-card,
.document-card,
.card,
.panel,
.hero-card,
.pdf-card,
.quote-canvas-card,
.quote-placement-controls {
  background: var(--ui-card) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.monday-board-shell,
.review-preview-card,
.quote-canvas-card,
.quote-placement-controls {
  padding: 18px !important;
}

.board-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 0 0 16px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

.board-head h2,
.monday-board-shell h2,
.quote-placement-controls h2,
.review-preview-card h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  color: var(--ui-ink) !important;
  font-weight: 820 !important;
}

.board-head p,
.quote-placement-controls p,
.review-preview-card p {
  margin: 5px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  font-weight: 520 !important;
}

/* Stat/dashboard cards like screenshot */
.stats-grid,
.metric-grid,
.dashboard-stats,
.summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1180px !important;
  margin: 0 auto 26px !important;
}

.stats-grid > *,
.metric-grid > *,
.dashboard-stats > *,
.summary-grid > * {
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--ui-shadow-card) !important;
  padding: 22px !important;
}

/* Review form should feel table/card clean, not chaotic */
.review-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) 360px !important;
  gap: 20px !important;
  align-items: start !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.review-grid,
.create-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.field-group {
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  min-width: 0 !important;
}

.field-group label {
  display: block !important;
  color: var(--ui-ink) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  margin: 0 0 6px !important;
  letter-spacing: -.005em !important;
}

.platform-input,
input[type="text"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #dfe3eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
  font-size: 14px !important;
  font-family: var(--ui-font) !important;
  padding: 9px 11px !important;
  box-shadow: none !important;
  outline: none !important;
}

.platform-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #aeb5ff !important;
  box-shadow: 0 0 0 3px rgba(63, 70, 223, .10) !important;
}

/* Buttons match screenshot: compact, simple, purple */
.monday-primary,
.primary-btn,
button[type="submit"].monday-primary {
  min-height: 40px !important;
  border-radius: 8px !important;
  background: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}

.monday-primary:hover,
.primary-btn:hover {
  background: var(--ui-accent-dark) !important;
  border-color: var(--ui-accent-dark) !important;
}

.monday-secondary,
.secondary-btn,
button.monday-secondary,
a.monday-secondary {
  min-height: 40px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid var(--ui-line-dark) !important;
  color: var(--ui-ink) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}

.monday-secondary:hover,
.secondary-btn:hover {
  background: #f9fafb !important;
}

.platform-action-bar,
.smart-send-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: #fbfcff !important;
  border-top: 1px solid var(--ui-line) !important;
  margin: 18px -18px -18px !important;
  padding: 16px 18px !important;
  border-radius: 0 0 10px 10px !important;
}

.platform-action-bar span,
.smart-send-bar span {
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
}

/* Pills / badges */
.flow-pill,
.status-pill,
.admin-role-pill,
.badge,
.status,
.notice .pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: var(--ui-accent-soft) !important;
  color: #2227a8 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.notice-stack {
  max-width: 1180px !important;
  margin: 0 auto 18px !important;
  display: grid !important;
  gap: 10px !important;
}

.notice,
.alert {
  border-radius: 10px !important;
  border: 1px solid var(--ui-line) !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

.notice-success,
.alert.success {
  background: var(--ui-success-bg) !important;
  border-color: #abefc6 !important;
  color: var(--ui-success) !important;
}

.notice-error,
.alert.error {
  background: var(--ui-danger-bg) !important;
  border-color: #fecdd6 !important;
  color: var(--ui-danger) !important;
}

/* Table/list style like screenshot */
.contract-list,
.table-card,
.history-list,
.dashboard-list,
.monday-table {
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--ui-shadow-card) !important;
  overflow: hidden !important;
}

.contract-row,
.history-row,
.table-row,
.monday-table-row {
  display: grid !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 58px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: #fff !important;
}

.contract-row:hover,
.history-row:hover,
.table-row:hover {
  background: #fbfcff !important;
}

.contract-row:last-child,
.history-row:last-child,
.table-row:last-child {
  border-bottom: 0 !important;
}

/* Preview summary becomes compact boxes */
.review-summary {
  display: grid !important;
  gap: 10px !important;
}

.review-summary div {
  background: #fbfcff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  padding: 11px 12px !important;
}

.review-summary span {
  display: block !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.review-summary strong {
  display: block !important;
  color: var(--ui-ink) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  margin-top: 3px !important;
  word-break: break-word !important;
}

/* Quote placement page */
.quote-placement-shell {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.quote-placement-controls {
  position: sticky !important;
  top: 22px !important;
  padding: 18px !important;
}

.qp-tool-buttons,
.qp-save-form {
  display: grid !important;
  gap: 9px !important;
  margin-top: 14px !important;
}

.qp-page-pill {
  background: #fbfcff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  padding: 11px 12px !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  color: var(--ui-ink) !important;
}

.quote-canvas-card {
  overflow: auto !important;
  padding: 16px !important;
}

.quote-canvas-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  padding: 0 0 12px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

.quote-canvas-toolbar strong {
  color: var(--ui-ink) !important;
}

.quote-canvas-wrap {
  position: relative !important;
  margin: 0 auto !important;
  background: #0f172a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#pdfCanvas {
  display: block !important;
}

.qp-box {
  position: absolute !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: move !important;
  user-select: none !important;
}

.signature-box {
  background: rgba(63, 70, 223, .18) !important;
  border: 2px solid var(--ui-accent) !important;
  color: var(--ui-accent) !important;
}

.date-box {
  background: rgba(227, 24, 55, .15) !important;
  border: 2px solid #e31837 !important;
  color: #b42318 !important;
}

/* Make create/settings pages feel the same */
.create-board,
.settings-board,
.settings-grid,
.template-grid,
.users-grid {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.setup-card,
.create-card,
.settings-section,
.upload-card {
  background: #fff !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--ui-shadow-card) !important;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--ui-line) !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .monday-layout,
  .monday-layout.crm-shell {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  .monday-main {
    padding: 26px 22px 38px !important;
  }

  .review-layout,
  .quote-placement-shell {
    grid-template-columns: 1fr !important;
  }

  .quote-placement-controls {
    position: static !important;
  }

  .stats-grid,
  .metric-grid,
  .dashboard-stats,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 780px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    position: static !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
  }

  .sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .monday-main {
    padding: 22px 14px 34px !important;
  }

  .monday-header,
  .cleaner-header,
  .crm-header {
    flex-direction: column !important;
  }

  .review-grid,
  .create-grid {
    grid-template-columns: 1fr !important;
  }

  .platform-action-bar,
  .smart-send-bar {
    align-items: stretch !important;
  }

  .platform-action-bar > *,
  .smart-send-bar > * {
    width: 100% !important;
  }
}

/* Hide leftover heavy/AI-looking decoration from previous versions */
.signed-date-cleanup-note,
.download-hotfix-note,
.bad-white-box-fix-note,
.runtime-hotfix-note-v12,
.date-only-signed-note,
.revised-signed-callout,
.zen-contract-actions {
  display: none !important;
}



/* =========================================================
   CRM Layout v5
   Goal: closer to supplied CRM screenshot + remove admin bars
   from normal pages. Keep admin controls only in Settings.
   ========================================================= */

/* Page shell: left rail + wide content like the reference */
.monday-layout,
.monday-layout.crm-shell {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100vh !important;
  background: #f4f6f8 !important;
}

/* Sidebar exactly like the reference: clean white rail */
.monday-sidebar,
.crm-sidebar {
  width: 280px !important;
  background: #fff !important;
  border-right: 1px solid #e7e9ef !important;
  padding: 28px 18px !important;
  box-shadow: none !important;
}

/* Main content should not be a skinny centered strip */
.monday-main {
  width: 100% !important;
  min-width: 0 !important;
  padding: 32px 42px 56px !important;
  background: #f4f6f8 !important;
}

/* Match CRM screenshot width/placement */
.monday-main > section,
.monday-main > header,
.monday-main > .notice-stack,
.monday-main > .review-layout,
.monday-main > .dashboard-grid,
.monday-main > .settings-grid,
.monday-main > .create-board,
.monday-main > .quote-placement-shell,
.monday-main > .history-shell,
.monday-main > .contracts-shell,
.monday-main > .platform-switcher-bar {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove owner/admin bars everywhere by default */
.platform-switcher-bar,
.admin-mode-banner,
.admin-mode-bar,
.owner-mode-banner,
.owner-switcher,
.platform-owner-banner,
.platform-admin-banner,
.top-admin-bar,
.workspace-switcher-bar,
.admin-context-bar,
[class*="owner-view"],
[class*="owner view"],
[class*="admin-mode"],
[class*="admin mode"] {
  display: none !important;
}

/* But allow settings/admin pages to show their needed controls */
body.settings-page .platform-switcher-bar,
body.settings-page .admin-mode-banner,
body.settings-page .admin-mode-bar,
body.settings-page .owner-mode-banner,
body.settings-page .owner-switcher,
body.settings-page .platform-owner-banner,
body.settings-page .platform-admin-banner,
body.settings-page .top-admin-bar,
body.settings-page .workspace-switcher-bar,
body.settings-page .admin-context-bar,
body.admin-page .platform-switcher-bar,
body.admin-page .admin-mode-banner,
body.admin-page .admin-mode-bar,
body.admin-page .owner-mode-banner,
body.admin-page .owner-switcher,
body.admin-page .platform-owner-banner,
body.admin-page .platform-admin-banner,
body.admin-page .top-admin-bar,
body.admin-page .workspace-switcher-bar,
body.admin-page .admin-context-bar {
  display: initial !important;
}

/* Brand: smaller, calmer, more like Untitled UI header */
.sidebar-brand {
  padding: 0 6px 34px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

.sidebar-brand::before {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: #101828 !important;
  border: 0 !important;
  transform: rotate(0deg) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16) !important;
}

.sidebar-brand strong,
.sidebar-brand div strong {
  font-size: 17px !important;
  font-weight: 820 !important;
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
}

.sidebar-brand span,
.sidebar-brand small,
.sidebar-brand div span,
.sidebar-brand div small {
  font-size: 12px !important;
  color: #667085 !important;
  font-weight: 600 !important;
}

/* Nav rows */
.sidebar-nav a {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  grid-template-columns: 22px minmax(0,1fr) !important;
  gap: 10px !important;
  font-size: 14px !important;
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
  background: #eef2ff !important;
  color: #2f34b7 !important;
}

.sidebar-nav a::before {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  border-width: 1.5px !important;
  font-size: 11px !important;
}

/* Header like screenshot: clean title, tabs/actions possible */
.monday-header,
.cleaner-header,
.crm-header {
  max-width: 1160px !important;
  margin: 0 auto 24px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid #e6e8ee !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.monday-header h1,
.cleaner-header h1,
.crm-header h1 {
  font-size: 32px !important;
  line-height: 1.12 !important;
  font-weight: 720 !important;
  letter-spacing: -.04em !important;
  margin: 0 !important;
}

.monday-header p,
.cleaner-header p,
.crm-header p {
  font-size: 14px !important;
  color: #667085 !important;
  line-height: 1.45 !important;
  margin-top: 8px !important;
}

.monday-kicker {
  font-size: 12px !important;
  letter-spacing: .13em !important;
  color: #2f34b7 !important;
  font-weight: 820 !important;
  margin-bottom: 10px !important;
}

/* Buttons closer to CRM */
.monday-primary,
.primary-btn,
button[type="submit"].monday-primary {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  background: #444ce7 !important;
  border: 1px solid #444ce7 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.monday-secondary,
.secondary-btn,
a.monday-secondary,
button.monday-secondary {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border: 1px solid #d8dce5 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 740 !important;
}

/* Cards should be flatter and smaller */
.monday-board-shell,
.review-warning-card,
.review-preview-card,
.contract-command-card,
.detail-clean-card,
.template-card,
.settings-card,
.company-card,
.signing-card,
.document-card,
.card,
.panel,
.hero-card,
.pdf-card,
.quote-canvas-card,
.quote-placement-controls {
  border-radius: 10px !important;
  border: 1px solid #e6e8ee !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  background: #fff !important;
}

/* Dashboard top stats exactly closer to CRM cards */
.dashboard-grid,
.stats-grid,
.metric-grid,
.dashboard-stats,
.summary-grid {
  max-width: 1160px !important;
  margin: 0 auto 20px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.dashboard-grid > *,
.stats-grid > *,
.metric-grid > *,
.dashboard-stats > *,
.summary-grid > * {
  background: #fff !important;
  border: 1px solid #e6e8ee !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  min-height: 102px !important;
  padding: 20px 22px !important;
}

/* Main table/container matches screenshot */
.contracts-table,
.contract-list,
.table-card,
.history-list,
.dashboard-list,
.monday-table,
.monday-board-shell:has(table) {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff !important;
  border: 1px solid #e6e8ee !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  overflow: hidden !important;
}

/* If the old dashboard uses a big board shell, make it wide not centered small */
.monday-main > .monday-board-shell {
  max-width: 1160px !important;
}

/* Table cells: compact CRM style */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  font-size: 14px !important;
}

th {
  background: #fbfcfe !important;
  color: #475467 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  text-align: left !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid #e6e8ee !important;
}

td {
  padding: 14px !important;
  border-bottom: 1px solid #eef0f4 !important;
  color: #344054 !important;
  vertical-align: middle !important;
}

tr:last-child td {
  border-bottom: 0 !important;
}

/* Review/create forms */
.review-layout {
  max-width: 1160px !important;
  grid-template-columns: minmax(0, 1.55fr) 340px !important;
  gap: 20px !important;
}

.review-grid,
.create-grid {
  gap: 12px !important;
}

.field-group {
  border-radius: 10px !important;
  border: 1px solid #e6e8ee !important;
  background: #fff !important;
  padding: 12px !important;
}

.field-group label {
  font-size: 12px !important;
  color: #101828 !important;
  font-weight: 740 !important;
  margin-bottom: 6px !important;
}

.platform-input,
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
  min-height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #d8dce5 !important;
  font-size: 14px !important;
  padding: 9px 11px !important;
  box-shadow: none !important;
}

/* Action footer less chunky */
.platform-action-bar,
.smart-send-bar {
  background: #fbfcfe !important;
  border-top: 1px solid #e6e8ee !important;
  margin: 18px -18px -18px !important;
  padding: 14px 18px !important;
  border-radius: 0 0 10px 10px !important;
}

/* Quote placement */
.quote-placement-shell {
  max-width: 1160px !important;
  grid-template-columns: 300px minmax(0,1fr) !important;
}

.quote-placement-controls {
  border-radius: 10px !important;
}

.quote-canvas-card {
  border-radius: 10px !important;
}

/* Remove leftover top dark bar on normal pages even if nested divs don't match class */
.monday-main > div:first-child:is(.platform-switcher-bar, .admin-mode-banner),
.monday-main > section:first-child:is(.platform-switcher-bar, .admin-mode-banner) {
  display: none !important;
}

/* Specific top admin banner shown in screenshot */
.monday-main > .platform-switcher-bar + .platform-switcher-bar,
.monday-main > .platform-switcher-bar + .admin-mode-banner,
.monday-main > .admin-mode-banner + .monday-header {
  margin-top: 0 !important;
}

/* Workspace card bottom */
.workspace-card,
.compact-workspace {
  border-radius: 10px !important;
  box-shadow: none !important;
  border: 1px solid #e6e8ee !important;
  margin-top: 44px !important;
}

.sidebar-logout a,
.sidebar-logout button {
  border-radius: 8px !important;
}

/* Responsive */
@media (max-width: 1050px) {
  .monday-layout,
  .monday-layout.crm-shell {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  .monday-sidebar,
  .crm-sidebar {
    width: 240px !important;
  }
  .monday-main {
    padding: 26px 22px 44px !important;
  }
  .review-layout,
  .quote-placement-shell {
    grid-template-columns: 1fr !important;
  }
  .dashboard-grid,
  .stats-grid,
  .metric-grid,
  .dashboard-stats,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }
  .monday-sidebar,
  .crm-sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e6e8ee !important;
  }
  .monday-main {
    padding: 22px 14px 38px !important;
  }
  .monday-header,
  .cleaner-header,
  .crm-header {
    flex-direction: column !important;
  }
}



/* =========================================================
   Full Width CRM v6
   Fixes:
   - true full-width content
   - real logo visible
   - CRM-style edit/delete/view icons
   - table text does not stack vertically
   - dashboard closer to the supplied reference
   ========================================================= */

/* Full width: stop constraining the app to a narrow centered column */
.monday-main {
  padding: 32px 36px 56px !important;
  width: 100% !important;
}

.monday-main > section,
.monday-main > header,
.monday-main > .notice-stack,
.monday-main > .review-layout,
.monday-main > .dashboard-grid,
.monday-main > .settings-grid,
.monday-main > .create-board,
.monday-main > .quote-placement-shell,
.monday-main > .history-shell,
.monday-main > .contracts-shell,
.monday-main > .platform-switcher-bar,
.monday-main > .monday-stats,
.monday-main > .monday-board-shell {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The reference layout uses a wide content canvas with consistent gutters */
.monday-layout,
.monday-layout.crm-shell {
  grid-template-columns: 280px minmax(0, 1fr) !important;
}

.monday-sidebar,
.crm-sidebar {
  width: 280px !important;
  flex: 0 0 280px !important;
}

/* Bring back the actual company logo. Previous CRM pass hid it. */
.sidebar-brand::before {
  display: none !important;
  content: none !important;
}

.sidebar-brand {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

.sidebar-brand img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* If the image file fails, the text remains correctly aligned */
.sidebar-brand div {
  min-width: 0 !important;
}

.sidebar-brand strong,
.sidebar-brand div strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 190px !important;
}

/* Dashboard stats: full row, no skinny centered dashboard */
.monday-stats,
.dashboard-grid,
.stats-grid,
.metric-grid,
.dashboard-stats,
.summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px !important;
}

.monday-stat {
  min-height: 104px !important;
  border-radius: 10px !important;
}

/* Board/table full-width */
.monday-board-shell {
  width: 100% !important;
  max-width: none !important;
}

.work-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border-radius: 0 0 10px 10px !important;
}

/* Table should behave like the CRM screenshot, not squeeze text into vertical stacks */
.work-table,
.clean-actions-table,
table {
  width: 100% !important;
  min-width: 1120px !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.work-table th,
.work-table td,
.clean-actions-table th,
.clean-actions-table td {
  white-space: nowrap !important;
  vertical-align: middle !important;
  line-height: 1.25 !important;
}

/* Let only the customer cell stack name + lead; everything else stays one line */
.customer-cell {
  white-space: normal !important;
  min-width: 220px !important;
}

.customer-cell strong,
.customer-cell span {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 230px !important;
}

.clean-actions-table th:nth-child(3),
.clean-actions-table td:nth-child(3),
.clean-actions-table th:nth-child(4),
.clean-actions-table td:nth-child(4) {
  min-width: 190px !important;
  max-width: 240px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.clean-actions-table th:nth-child(6),
.clean-actions-table td:nth-child(6) {
  min-width: 170px !important;
}

.clean-actions-table th:nth-child(7),
.clean-actions-table td:nth-child(7) {
  min-width: 155px !important;
  white-space: nowrap !important;
}

.clean-actions-table th:nth-child(8),
.clean-actions-table td:nth-child(8) {
  min-width: 86px !important;
  text-align: center !important;
}

.clean-actions-table th:nth-child(9),
.clean-actions-table td:nth-child(9) {
  min-width: 132px !important;
  text-align: right !important;
}

/* Date/time under Created should never become one-character-per-line */
.muted-table-text,
.clean-actions-table small,
.clean-actions-table td:nth-child(7),
.clean-actions-table td:nth-child(6) {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Action icons like the supplied CRM reference */
.crm-actions-cell {
  text-align: right !important;
}

.crm-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

.crm-row-actions form {
  display: inline-flex !important;
  margin: 0 !important;
}

.crm-icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #344054 !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

.crm-icon-btn:hover {
  background: #f2f4f7 !important;
  border-color: #e6e8ee !important;
  color: #111827 !important;
}

.crm-icon-btn.danger:hover {
  background: #fff1f3 !important;
  border-color: #fecdd6 !important;
  color: #c01048 !important;
}

.crm-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.crm-open-btn {
  color: #344054 !important;
}

/* Keep the secondary details menu but make it look like a small menu button */
.next-action-hidden-menu {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 6px !important;
}

.next-action-hidden-menu > .primary-row-action,
.next-action-hidden-menu > .quiet-next-action {
  display: none !important;
}

.row-more summary {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

.row-more summary::before {
  content: "•••";
  color: #344054;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}

.row-more summary:hover {
  background: #f2f4f7 !important;
  border-color: #e6e8ee !important;
}

/* CRM screenshot has very subtle borders and almost no heavy shadows */
.monday-board-shell,
.monday-stat,
.field-group,
.review-preview-card,
.quote-canvas-card,
.quote-placement-controls {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}

/* Search and tabs row match the reference */
.monday-controls {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.monday-tabs {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.monday-tabs a {
  height: 36px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.monday-tabs a.active {
  background: #444ce7 !important;
  color: #fff !important;
}

.monday-search input,
#liveContractSearch {
  height: 42px !important;
  border-radius: 8px !important;
}

/* Remove admin bars more aggressively from non-settings pages */
body:not(.settings-page):not(.admin-page) .platform-switcher-bar,
body:not(.settings-page):not(.admin-page) .admin-mode-banner,
body:not(.settings-page):not(.admin-page) .owner-mode-banner,
body:not(.settings-page):not(.admin-page) .workspace-switcher-bar,
body:not(.settings-page):not(.admin-page) .top-admin-bar {
  display: none !important;
}

/* Responsive: use horizontal table scroll instead of crushing words */
@media (max-width: 1150px) {
  .monday-main {
    padding: 28px 24px 48px !important;
  }

  .work-table-wrap {
    margin-left: -2px !important;
    margin-right: -2px !important;
  }
}

@media (max-width: 780px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  .monday-main {
    padding: 22px 14px 40px !important;
  }

  .monday-stats,
  .dashboard-grid,
  .stats-grid,
  .metric-grid,
  .dashboard-stats,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Contract Fields Fix v7 */
.sidebar-brand img {
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
}

.clean-actions-table td,
.work-table td {
  word-break: normal !important;
  overflow-wrap: normal !important;
}



/* =========================================================
   Untitled UI Style v8
   Source style taken from the uploaded Gemini Untitled UI HTML.
   Keeps the old app/backend. Re-skins the UI only.
   ========================================================= */

:root {
  --u-bg: #F8F9FC;
  --u-white: #FFFFFF;
  --u-ink: #101828;
  --u-body: #344054;
  --u-muted: #475467;
  --u-muted-2: #667085;
  --u-placeholder: #98A2B3;
  --u-line: #EAECF0;
  --u-line-2: #D0D5DD;
  --u-soft: #F9FAFB;
  --u-soft-2: #F2F4F7;
  --u-accent: #7F56D9;
  --u-accent-hover: #6941C6;
  --u-success-bg: #ECFDF3;
  --u-success: #027A48;
  --u-danger-bg: #FFF1F3;
  --u-danger: #C01048;
  --u-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --u-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

body,
body.monday-app,
.monday-app {
  margin: 0 !important;
  min-height: 100vh !important;
  background: var(--u-bg) !important;
  color: var(--u-body) !important;
  font-family: var(--u-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

.monday-layout,
.monday-layout.crm-shell {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  background: var(--u-white) !important;
}

.monday-sidebar,
.crm-sidebar {
  width: 256px !important;
  min-width: 256px !important;
  flex: 0 0 256px !important;
  min-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important;
  overflow-y: auto !important;
  background: var(--u-white) !important;
  border-right: 1px solid var(--u-line) !important;
  padding: 20px !important;
  box-shadow: none !important;
}

.monday-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: calc(100% - 256px) !important;
  background: var(--u-white) !important;
  padding: 32px !important;
  overflow-x: auto !important;
}

.monday-main > section,
.monday-main > header,
.monday-main > .notice-stack,
.monday-main > .review-layout,
.monday-main > .dashboard-grid,
.monday-main > .settings-grid,
.monday-main > .create-board,
.monday-main > .quote-placement-shell,
.monday-main > .history-shell,
.monday-main > .contracts-shell,
.monday-main > .platform-switcher-bar,
.monday-main > .monday-stats,
.monday-main > .monday-board-shell {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:not(.settings-page):not(.admin-page) .platform-switcher-bar,
body:not(.settings-page):not(.admin-page) .admin-mode-banner,
body:not(.settings-page):not(.admin-page) .owner-mode-banner,
body:not(.settings-page):not(.admin-page) .workspace-switcher-bar,
body:not(.settings-page):not(.admin-page) .top-admin-bar,
body:not(.settings-page):not(.admin-page) .admin-context-bar {
  display: none !important;
}

.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  margin: 0 0 24px !important;
  min-height: 34px !important;
}

.sidebar-brand::before {
  display: none !important;
  content: none !important;
}

.sidebar-brand img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  flex: 0 0 auto !important;
}

.sidebar-brand strong,
.sidebar-brand div strong {
  color: var(--u-ink) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.sidebar-brand span,
.sidebar-brand small,
.sidebar-brand div span,
.sidebar-brand div small {
  color: var(--u-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

.sidebar-nav {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  border: 0 !important;
  color: var(--u-body) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.sidebar-nav a::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: currentColor !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  flex: 0 0 20px !important;
}

.sidebar-nav a:nth-child(1)::before { content: "🏠" !important; }
.sidebar-nav a:nth-child(2)::before { content: "📊" !important; }
.sidebar-nav a:nth-child(3)::before { content: "📄" !important; }
.sidebar-nav a:nth-child(4)::before { content: "⚙️" !important; }
.sidebar-nav a:nth-child(5)::before { content: "👥" !important; }
.sidebar-nav a:nth-child(6)::before { content: "❓" !important; }

.sidebar-nav a span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: inherit !important;
}

.sidebar-nav a small { display: none !important; }

.sidebar-nav a.active,
.sidebar-nav a:hover,
.sidebar-nav a[aria-current="page"] {
  background: var(--u-soft-2) !important;
  color: var(--u-ink) !important;
}

.workspace-card,
.compact-workspace,
.side-note {
  margin-top: 28px !important;
  background: var(--u-white) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: none !important;
}

.workspace-card span,
.compact-workspace span {
  color: var(--u-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.workspace-card strong,
.compact-workspace strong {
  display: block !important;
  color: var(--u-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.workspace-card small,
.compact-workspace small {
  color: var(--u-muted) !important;
  font-size: 12px !important;
}

/* Header */
.monday-header,
.cleaner-header,
.crm-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}

.monday-header h1,
.cleaner-header h1,
.crm-header h1 {
  margin: 0 !important;
  color: var(--u-ink) !important;
  font-size: 30px !important;
  line-height: 38px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.monday-header p,
.cleaner-header p,
.crm-header p {
  margin: 6px 0 0 !important;
  color: var(--u-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  max-width: 780px !important;
}

.monday-kicker { display: none !important; }

/* Buttons */
.monday-primary,
.primary-btn,
button[type="submit"].monday-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  background: var(--u-accent) !important;
  border: 1px solid var(--u-accent) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  box-shadow: var(--u-shadow) !important;
}

.monday-primary:hover,
.primary-btn:hover {
  background: var(--u-accent-hover) !important;
  border-color: var(--u-accent-hover) !important;
}

.monday-secondary,
.secondary-btn,
a.monday-secondary,
button.monday-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  background: #fff !important;
  border: 1px solid var(--u-line-2) !important;
  color: var(--u-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  box-shadow: var(--u-shadow) !important;
}

.monday-secondary:hover,
.secondary-btn:hover { background: var(--u-soft) !important; }

/* Stats */
.monday-stats,
.dashboard-grid,
.stats-grid,
.metric-grid,
.dashboard-stats,
.summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}

.monday-stat,
.dashboard-grid > *,
.stats-grid > *,
.metric-grid > *,
.dashboard-stats > *,
.summary-grid > * {
  position: relative !important;
  background: #fff !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: var(--u-shadow) !important;
  min-height: 106px !important;
}

.monday-stat::after,
.dashboard-grid > *::after,
.stats-grid > *::after,
.metric-grid > *::after,
.dashboard-stats > *::after,
.summary-grid > *::after {
  content: "•••";
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--u-placeholder);
  font-size: 14px;
  letter-spacing: 1px;
}

.monday-stat strong,
.dashboard-grid strong,
.stats-grid strong,
.metric-grid strong {
  display: block !important;
  margin-top: 8px !important;
  color: var(--u-ink) !important;
  font-size: 30px !important;
  line-height: 38px !important;
  font-weight: 600 !important;
}

/* Cards */
.monday-board-shell,
.review-warning-card,
.review-preview-card,
.contract-command-card,
.detail-clean-card,
.template-card,
.settings-card,
.company-card,
.signing-card,
.document-card,
.card,
.panel,
.hero-card,
.pdf-card,
.quote-canvas-card,
.quote-placement-controls {
  background: #fff !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--u-shadow) !important;
}

.monday-board-shell {
  padding: 0 !important;
  overflow: hidden !important;
}

.board-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px 24px 0 !important;
  margin: 0 0 16px !important;
  border: 0 !important;
}

.board-head h2,
.monday-board-shell h2,
.quote-placement-controls h2,
.review-preview-card h2 {
  color: var(--u-ink) !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.board-head p,
.quote-placement-controls p,
.review-preview-card p {
  color: var(--u-muted) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  margin: 4px 0 0 !important;
}

/* Controls */
.monday-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 24px 16px !important;
}

.monday-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.monday-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: var(--u-body) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.monday-tabs a.active {
  background: var(--u-accent) !important;
  color: white !important;
  font-weight: 600 !important;
}

.monday-search input,
#liveContractSearch {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid var(--u-line-2) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--u-ink) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  box-shadow: var(--u-shadow) !important;
}

/* Forms */
.review-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

.review-layout .monday-board-shell,
.review-preview-card {
  padding: 24px !important;
  overflow: visible !important;
}

.review-grid,
.create-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.field-group {
  background: #fff !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  min-width: 0 !important;
}

.field-group label {
  display: block !important;
  color: var(--u-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
}

.platform-input,
input[type="text"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid var(--u-line-2) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--u-ink) !important;
  font-family: var(--u-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 8px 12px !important;
  box-shadow: var(--u-shadow) !important;
  outline: none !important;
}

.platform-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--u-accent) !important;
  box-shadow: 0 0 0 3px rgba(127, 86, 217, .12) !important;
}

.platform-action-bar,
.smart-send-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  background: #fff !important;
  border-top: 1px solid var(--u-line) !important;
  margin: 24px -24px -24px !important;
  padding: 16px 24px !important;
  border-radius: 0 0 12px 12px !important;
}

.review-summary {
  display: grid !important;
  gap: 12px !important;
}

.review-summary div {
  background: #fff !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}

.review-summary span {
  display: block !important;
  color: var(--u-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.review-summary strong {
  display: block !important;
  color: var(--u-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

/* Tables */
.work-table-wrap,
.table-scroll,
.overflow-x-auto {
  width: 100% !important;
  overflow-x: auto !important;
}

.work-table,
.clean-actions-table,
table {
  width: 100% !important;
  min-width: 980px !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
}

.work-table thead tr,
.clean-actions-table thead tr,
thead tr {
  background: var(--u-soft) !important;
  border-bottom: 1px solid var(--u-line) !important;
}

.work-table th,
.clean-actions-table th,
th {
  padding: 12px 16px !important;
  color: var(--u-muted) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  background: var(--u-soft) !important;
}

.work-table td,
.clean-actions-table td,
td {
  padding: 14px 16px !important;
  color: var(--u-muted) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  border-bottom: 1px solid var(--u-line) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

tbody tr:hover { background: var(--u-soft) !important; }

.customer-cell {
  white-space: normal !important;
  min-width: 220px !important;
}

.customer-cell strong {
  color: var(--u-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: block !important;
  max-width: 250px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.customer-cell span,
.customer-cell small {
  color: var(--u-muted-2) !important;
  font-size: 13px !important;
  display: block !important;
  max-width: 250px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Badges */
.status-pill,
.flow-pill,
.badge,
.status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--u-success-bg) !important;
  color: var(--u-success) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.status-pill.pending,
.status.pending,
.status-pill.issue,
.status-pill.failed,
.status-pill.error {
  background: var(--u-danger-bg) !important;
  color: var(--u-danger) !important;
}

.status-pill.draft,
.status-pill.expired,
.status.churned {
  background: var(--u-soft-2) !important;
  color: var(--u-body) !important;
}

/* Icon actions */
.crm-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.crm-row-actions form {
  display: inline-flex !important;
  margin: 0 !important;
}

.crm-icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--u-placeholder) !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.crm-icon-btn:hover {
  color: var(--u-muted) !important;
  background: var(--u-soft) !important;
}

.crm-icon-btn.danger:hover {
  color: var(--u-danger) !important;
  background: var(--u-danger-bg) !important;
}

.crm-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.row-more summary {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

.row-more summary::before {
  content: "•••";
  color: var(--u-placeholder);
  font-size: 14px;
  letter-spacing: 1px;
}

.row-more summary:hover { background: var(--u-soft) !important; }

/* Quote placement */
.quote-placement-shell {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

.quote-placement-controls {
  padding: 20px !important;
  position: sticky !important;
  top: 24px !important;
  height: max-content !important;
}

.qp-tool-buttons,
.qp-save-form {
  display: grid !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.qp-page-pill {
  background: var(--u-soft) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-top: 14px !important;
  color: var(--u-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.quote-canvas-card {
  padding: 16px !important;
  overflow: auto !important;
}

.quote-canvas-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 0 12px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--u-line) !important;
  color: var(--u-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.quote-canvas-toolbar strong {
  color: var(--u-ink) !important;
  font-weight: 600 !important;
}

.quote-canvas-wrap {
  position: relative !important;
  margin: 0 auto !important;
  background: var(--u-ink) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#pdfCanvas { display: block !important; }

.qp-box {
  position: absolute !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: move !important;
  user-select: none !important;
}

.signature-box {
  background: rgba(127, 86, 217, .18) !important;
  border: 2px solid var(--u-accent) !important;
  color: var(--u-accent) !important;
}

.date-box {
  background: rgba(192, 16, 72, .14) !important;
  border: 2px solid var(--u-danger) !important;
  color: var(--u-danger) !important;
}

/* Alerts */
.notice-stack,
.alerts {
  display: grid !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.notice,
.alert {
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--u-line) !important;
  background: #fff !important;
  color: var(--u-body) !important;
  box-shadow: var(--u-shadow) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.notice-success,
.alert.success {
  background: var(--u-success-bg) !important;
  color: var(--u-success) !important;
  border-color: #ABEFC6 !important;
}

.notice-error,
.alert.error {
  background: var(--u-danger-bg) !important;
  color: var(--u-danger) !important;
  border-color: #FECDD6 !important;
}

/* Prevent date/time wrapping */
.muted-table-text,
.clean-actions-table small,
.clean-actions-table td,
.work-table td {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width: 1100px) {
  .quote-placement-shell,
  .review-layout { grid-template-columns: 1fr !important; }

  .quote-placement-controls { position: static !important; }

  .monday-stats,
  .dashboard-grid,
  .stats-grid,
  .metric-grid,
  .dashboard-stats,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--u-line) !important;
  }

  .monday-main {
    width: 100% !important;
    padding: 24px 16px !important;
  }

  .monday-header,
  .cleaner-header,
  .crm-header {
    flex-direction: column !important;
  }

  .review-grid,
  .create-grid { grid-template-columns: 1fr !important; }

  .platform-action-bar,
  .smart-send-bar { align-items: stretch !important; }

  .platform-action-bar > *,
  .smart-send-bar > * { width: 100% !important; }
}


/* =========================================================
   Costco Contract Platform v1.0 - clean production polish
   Added by ChatGPT cleanup pass
   ========================================================= */
:root{
  --bb-bg:#F8F9FC;
  --bb-card:#FFFFFF;
  --bb-line:#EAECF0;
  --bb-ink:#101828;
  --bb-body:#344054;
  --bb-muted:#667085;
  --bb-purple:#7F56D9;
  --bb-purple-dark:#6941C6;
  --bb-green:#12B76A;
  --bb-red:#F04438;
  --bb-yellow:#F79009;
}

body.monday-app{background:var(--bb-bg)!important;color:var(--bb-ink)!important;}
.monday-layout{display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;min-height:100vh!important;background:var(--bb-bg)!important;}
.monday-sidebar{width:280px!important;background:var(--bb-card)!important;border-right:1px solid var(--bb-line)!important;padding:22px 18px!important;overflow-y:auto!important;}
.monday-main{min-width:0!important;width:100%!important;padding:32px 42px 56px!important;background:var(--bb-bg)!important;}
.sidebar-brand{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:0 4px 28px!important;margin:0!important;}
.sidebar-brand img{width:58px!important;height:58px!important;object-fit:contain!important;border-radius:999px!important;flex:0 0 auto!important;}
.sidebar-brand>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;min-width:0!important;max-width:100%!important;}
.sidebar-brand strong{font-size:15px!important;line-height:1.2!important;font-weight:800!important;color:var(--bb-ink)!important;white-space:normal!important;overflow-wrap:anywhere!important;}
.sidebar-brand span{font-size:12px!important;line-height:1.25!important;color:var(--bb-muted)!important;}
.admin-role-pill{display:inline-flex!important;width:fit-content!important;margin-top:6px!important;padding:3px 9px!important;border-radius:999px!important;background:#EEF4FF!important;color:#3538CD!important;font-size:11px!important;font-style:normal!important;font-weight:800!important;}
body.monday-app:not(.settings-page):not(.admin-page) .admin-mode-banner,
body.monday-app:not(.settings-page):not(.admin-page) .platform-switcher-bar{display:none!important;}
body.settings-page .admin-mode-banner,body.admin-page .admin-mode-banner,body.settings-page .platform-switcher-bar,body.admin-page .platform-switcher-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:14px 16px!important;margin-bottom:18px!important;border:1px solid var(--bb-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 1px 2px rgba(16,24,40,.04)!important;}
.sidebar-nav{display:grid!important;gap:6px!important;}
.sidebar-nav a{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:10px 12px!important;border-radius:8px!important;color:var(--bb-body)!important;font-weight:700!important;}
.sidebar-nav a.active,.sidebar-nav a:hover{background:#F2F4F7!important;color:var(--bb-ink)!important;}
.sidebar-nav a span{display:block!important;font-size:14px!important;line-height:1.25!important;}
.sidebar-nav a small{display:block!important;margin-top:2px!important;color:var(--bb-muted)!important;font-size:11px!important;line-height:1.25!important;font-weight:500!important;}
.workspace-card,.compact-workspace{margin-top:28px!important;padding:14px!important;border:1px solid var(--bb-line)!important;border-radius:12px!important;background:#fff!important;}
.workspace-card span,.workspace-card small{display:block!important;color:var(--bb-muted)!important;font-size:12px!important;line-height:1.35!important;}
.workspace-card strong{display:block!important;margin:3px 0!important;color:var(--bb-ink)!important;font-size:13px!important;line-height:1.35!important;}
.sidebar-logout{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;margin-top:22px!important;padding:10px 14px!important;border:1px solid var(--bb-line)!important;border-radius:10px!important;background:#fff!important;color:var(--bb-body)!important;font-weight:800!important;}
.template-upload-actions,.template-manager-actions,.upload-template-actions,.monday-board-shell .form-actions,.monday-board-shell footer,.monday-board-shell .board-footer{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;min-height:auto!important;height:auto!important;overflow:visible!important;padding:16px 18px!important;}
.template-upload-actions button,.template-manager-actions button,.upload-template-actions button,.monday-board-shell .form-actions button,.monday-board-shell footer button,.monday-board-shell .board-footer button{width:auto!important;min-height:40px!important;white-space:nowrap!important;}
.monday-board-shell,.monday-stat,.settings-card,.guide-card,.role-guide-grid article{border:1px solid var(--bb-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 1px 2px rgba(16,24,40,.04)!important;}
.monday-header h1{color:var(--bb-ink)!important;letter-spacing:-.03em!important;}
.monday-header p,.board-head p{color:#475467!important;}
.monday-primary,.primary-btn{background:var(--bb-purple)!important;border-color:var(--bb-purple)!important;color:#fff!important;}
.monday-primary:hover,.primary-btn:hover{background:var(--bb-purple-dark)!important;border-color:var(--bb-purple-dark)!important;}
.settings-subnav{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 18px!important;}
.settings-subnav a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:9px 13px!important;border:1px solid var(--bb-line)!important;border-radius:999px!important;background:#fff!important;color:var(--bb-body)!important;font-weight:800!important;font-size:13px!important;}
.settings-subnav a:hover{background:#F9FAFB!important;color:var(--bb-ink)!important;}
@media(max-width:900px){.monday-layout{display:block!important}.monday-sidebar{width:100%!important;border-right:0!important;border-bottom:1px solid var(--bb-line)!important}.monday-main{padding:22px 16px 40px!important}.sidebar-brand{align-items:center!important;text-align:center!important}.sidebar-brand>div{align-items:center!important}.sidebar-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}.workspace-card,.sidebar-logout{margin-top:14px!important}}
@media(max-width:560px){.sidebar-nav{grid-template-columns:1fr!important}.monday-header{flex-direction:column!important;align-items:stretch!important}.monday-primary,.monday-secondary,.primary-btn,.secondary-btn{width:100%!important}.template-upload-actions,.template-manager-actions,.upload-template-actions,.monday-board-shell .form-actions{align-items:stretch!important}.template-upload-actions button,.template-manager-actions button,.upload-template-actions button,.monday-board-shell .form-actions button{width:100%!important}}


/* =========================================================
   Costco v1.1 UI polish: bigger, cleaner, responsive, animated
   ========================================================= */
:root{
  --bb-purple:#7F56D9;
  --bb-purple-dark:#6941C6;
  --bb-focus:rgba(127,86,217,.18);
}
.monday-main{padding:38px 48px 64px!important;}
.monday-header{gap:24px!important;margin-bottom:24px!important;}
.monday-header h1{font-size:clamp(30px,3vw,44px)!important;line-height:1.05!important;font-weight:850!important;}
.monday-header p{font-size:16px!important;line-height:1.55!important;max-width:900px!important;}
.sidebar-brand img{width:66px!important;height:66px!important;}
.sidebar-brand strong{font-size:16px!important;}
.sidebar-brand span{font-size:13px!important;}
.sidebar-nav a{min-height:52px!important;padding:12px 13px!important;transition:background .18s ease,color .18s ease,transform .18s ease!important;}
.sidebar-nav a:hover{transform:translateX(2px)!important;}
.sidebar-nav a span:first-child{font-size:18px!important;line-height:1!important;min-width:22px!important;text-align:center!important;}
.monday-board-shell,.monday-stat,.settings-card,.guide-card,.role-guide-grid article{border-radius:16px!important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.035)!important;}
.monday-board-shell{padding:22px!important;}
.board-head{gap:18px!important;margin-bottom:18px!important;}
.board-head h2{font-size:22px!important;line-height:1.25!important;}
.board-head p{font-size:15px!important;line-height:1.5!important;}
.monday-primary,.monday-secondary,.primary-btn,.secondary-btn,.small-btn,.sidebar-logout{min-height:46px!important;border-radius:10px!important;padding:12px 18px!important;font-size:15px!important;font-weight:850!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important;}
.monday-primary:hover,.monday-secondary:hover,.primary-btn:hover,.secondary-btn:hover,.small-btn:hover,.sidebar-logout:hover{transform:translateY(-1px)!important;box-shadow:0 8px 18px rgba(16,24,40,.10)!important;}
.monday-primary:active,.monday-secondary:active,.primary-btn:active,.secondary-btn:active,.small-btn:active{transform:translateY(0)!important;box-shadow:0 2px 8px rgba(16,24,40,.08)!important;}
.platform-input,.text-input,input[type='text'],input[type='email'],input[type='password'],input[type='date'],select,textarea{min-height:48px!important;border-radius:10px!important;font-size:15px!important;}
.platform-input:focus,.text-input:focus,input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--bb-purple)!important;box-shadow:0 0 0 4px var(--bb-focus)!important;}
.template-upload-actions,.platform-action-bar{display:flex!important;align-items:center!important;gap:14px!important;flex-wrap:wrap!important;padding:18px 0 0!important;overflow:visible!important;}
.template-upload-actions span,.platform-action-bar span{font-size:14px!important;color:#667085!important;line-height:1.45!important;}
.file-tile{border-radius:14px!important;padding:18px!important;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;}
.file-tile:hover{border-color:var(--bb-purple)!important;box-shadow:0 8px 20px rgba(16,24,40,.08)!important;transform:translateY(-1px)!important;}
.monday-stats{gap:18px!important;margin-bottom:24px!important;}
.monday-stat{padding:22px!important;}
.monday-stat span{font-size:14px!important;}
.monday-stat strong{font-size:34px!important;}
.monday-stat .small-stat{font-size:18px!important;line-height:1.25!important;word-break:break-word!important;}
.notice{border-radius:12px!important;padding:15px 17px!important;font-size:15px!important;}
@media(max-width:1100px){.monday-main{padding:30px 24px 48px!important}.monday-stats{grid-template-columns:1fr!important}.monday-board-shell{padding:18px!important}}
@media(max-width:820px){.monday-main{padding:24px 16px 42px!important}.monday-header h1{font-size:32px!important}.monday-header p{font-size:15px!important}.sidebar-brand img{width:60px!important;height:60px!important}.sidebar-nav{grid-template-columns:1fr 1fr!important}.monday-primary,.monday-secondary,.primary-btn,.secondary-btn{width:100%!important}.template-upload-actions,.platform-action-bar{align-items:stretch!important}.template-upload-actions>*{width:100%!important}}
@media(max-width:560px){.monday-main{padding:20px 12px 36px!important}.monday-board-shell{padding:15px!important;border-radius:14px!important}.sidebar-nav{grid-template-columns:1fr!important}.monday-header h1{font-size:28px!important}.monday-stat strong{font-size:28px!important}.work-table-wrap{overflow-x:auto!important}.work-table{min-width:680px!important}}

/* =========================================================
   Final app-size polish: bigger, cleaner controls and logos
   ========================================================= */
.monday-main { padding: 36px 48px 64px !important; }
.monday-header { margin-bottom: 24px !important; gap: 20px !important; }
.monday-header h1 { font-size: clamp(32px, 3vw, 44px) !important; line-height: 1.05 !important; }
.monday-header p { font-size: 16px !important; line-height: 1.55 !important; }
.monday-kicker { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .03em !important; }
.sidebar-brand img, .auth-brand img, .brand-kicker img { width: 64px !important; height: 64px !important; object-fit: contain !important; }
.sidebar-brand strong { font-size: 17px !important; }
.sidebar-brand span { font-size: 13px !important; }
.sidebar-nav a { min-height: 52px !important; padding: 12px 14px !important; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important; }
.sidebar-nav a:hover { transform: translateX(2px) !important; }
.monday-primary, .monday-secondary, .primary-btn, .secondary-btn, button {
  min-height: 46px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease !important;
}
.monday-primary:hover, .monday-secondary:hover, .primary-btn:hover, .secondary-btn:hover, button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .10) !important;
}
.monday-board-shell, .monday-stat, .workspace-card, .notice { border-radius: 16px !important; }
.monday-board-shell { padding: 24px !important; }
.board-head { margin-bottom: 18px !important; }
.board-head h2 { font-size: 24px !important; line-height: 1.15 !important; }
.board-head p { font-size: 15px !important; }
.text-input, .platform-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  min-height: 48px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}
.settings-subnav a { min-height: 42px !important; padding: 10px 14px !important; border-radius: 999px !important; transition: transform .16s ease, background-color .16s ease !important; }
.settings-subnav a:hover { transform: translateY(-1px) !important; }
@media (max-width: 900px) {
  .monday-main { padding: 24px 18px 48px !important; }
  .monday-header h1 { font-size: 32px !important; }
  .monday-board-shell { padding: 18px !important; }
  .sidebar-brand img, .auth-brand img, .brand-kicker img { width: 56px !important; height: 56px !important; }
}
@media (max-width: 560px) {
  .monday-main { padding: 18px 12px 38px !important; }
  .monday-header h1 { font-size: 28px !important; }
  .monday-primary, .monday-secondary, .primary-btn, .secondary-btn, button { width: 100% !important; }
}

/* =========================================================
   Sidebar polish: professional vertical nav + company logo
   ========================================================= */
.monday-layout {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}

.monday-sidebar {
  width: 320px !important;
  padding: 26px 22px !important;
}

.sidebar-brand {
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 6px 28px !important;
  border-bottom: 1px solid #eaecf0 !important;
  margin-bottom: 22px !important;
}

.sidebar-brand img,
.sidebar-logo-img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .08) !important;
  padding: 4px !important;
}

.sidebar-brand > div {
  gap: 4px !important;
}

.sidebar-brand strong {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  color: #101828 !important;
}

.sidebar-brand span {
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: #475467 !important;
}

.admin-role-pill {
  margin-top: 8px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

.sidebar-nav,
.clean-sidebar-nav {
  display: grid !important;
  gap: 12px !important;
}

.sidebar-nav a,
.clean-sidebar-nav a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "icon desc" !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 3px !important;
  min-height: 78px !important;
  padding: 16px 16px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #344054 !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.sidebar-nav a:hover,
.clean-sidebar-nav a:hover {
  transform: translateY(-1px) !important;
  background: #ffffff !important;
  border-color: #eaecf0 !important;
  box-shadow: 0 10px 22px rgba(16, 24, 40, .07) !important;
}

.sidebar-nav a.active,
.clean-sidebar-nav a.active {
  background: #f4f3ff !important;
  border-color: #e9d7fe !important;
  box-shadow: 0 8px 18px rgba(127, 86, 217, .10) !important;
}

.sidebar-nav a::before,
.clean-sidebar-nav a::before {
  content: "" !important;
  grid-area: icon !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background-color: #667085 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  justify-self: center !important;
  align-self: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 25px 25px !important;
  mask-size: 25px 25px !important;
}

.sidebar-nav a.active::before,
.clean-sidebar-nav a.active::before {
  background-color: #7f56d9 !important;
}

.sidebar-nav a[href="/dashboard"]::before,
.clean-sidebar-nav a[href="/dashboard"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/"]::before,
.clean-sidebar-nav a[href="/"]::before,
.sidebar-nav a[href*="create"]::before,
.clean-sidebar-nav a[href*="create"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href*="templates"]::before,
.clean-sidebar-nav a[href*="templates"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v6h5'/%3E%3Cpath d='M9 14h6M9 18h6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v6h5'/%3E%3Cpath d='M9 14h6M9 18h6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/settings"]::before,
.clean-sidebar-nav a[href="/settings"]::before,
.sidebar-nav a[href*="settings"]::before,
.clean-sidebar-nav a[href*="settings"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 0 1-4 0v-.09A1.7 1.7 0 0 0 9 19.36a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 0 1 0-4h.09A1.7 1.7 0 0 0 4.64 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 0 1 4 0v.09A1.7 1.7 0 0 0 15 4.64a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.37.31.87.48 1.36.46H21a2 2 0 0 1 0 4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 0 1-4 0v-.09A1.7 1.7 0 0 0 9 19.36a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 0 1 0-4h.09A1.7 1.7 0 0 0 4.64 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 0 1 4 0v.09A1.7 1.7 0 0 0 15 4.64a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.37.31.87.48 1.36.46H21a2 2 0 0 1 0 4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href*="admin/companies"]::before,
.clean-sidebar-nav a[href*="admin/companies"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3Cpath d='M9 10h.01M15 10h.01'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3Cpath d='M9 10h.01M15 10h.01'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span {
  grid-area: title !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  font-weight: 820 !important;
  letter-spacing: -.02em !important;
  color: #101828 !important;
}

.sidebar-nav a small,
.clean-sidebar-nav a small {
  grid-area: desc !important;
  display: block !important;
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #475467 !important;
}

.workspace-card,
.compact-workspace {
  margin-top: 34px !important;
  padding: 24px 22px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
}

.workspace-card span,
.workspace-card small {
  font-size: 14px !important;
}

.workspace-card strong {
  font-size: 16px !important;
  margin: 8px 0 !important;
}

.sidebar-logout {
  min-height: 56px !important;
  margin-top: 28px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.sidebar-logout:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(16, 24, 40, .08) !important;
}

@media (max-width: 980px) {
  .monday-layout {
    grid-template-columns: 1fr !important;
  }

  .monday-sidebar {
    width: 100% !important;
    padding: 20px !important;
  }

  .sidebar-brand {
    align-items: center !important;
    text-align: center !important;
  }

  .sidebar-brand > div {
    align-items: center !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "icon"
      "title"
      "desc" !important;
    justify-items: center !important;
    text-align: center !important;
    min-height: 138px !important;
  }
}

@media (max-width: 560px) {
  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: 1fr !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    min-height: 120px !important;
  }
}

/* =========================================================
   Luxury customer email preview + email signature polish
   ========================================================= */
.profile-layout {
  align-items: start !important;
}

.signature-preview-card.luxury-email-preview-wrap {
  padding: 28px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08) !important;
}

.signature-preview-card.luxury-email-preview-wrap > h3 {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: #101828 !important;
  letter-spacing: -0.02em !important;
}

.luxury-email-preview {
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid #eadfce !important;
  background: #fffaf4 !important;
  box-shadow: 0 18px 60px rgba(79, 61, 39, .12) !important;
}

.luxury-email-hero {
  position: relative !important;
  min-height: 220px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.66), transparent 28%),
    linear-gradient(135deg, #eadfce 0%, #cdb595 52%, #f7efe5 100%) !important;
}

.luxury-email-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, transparent 1px 28%),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,.38), transparent 34%) !important;
  opacity: .78 !important;
}

.luxury-email-hero::after {
  content: "" !important;
  position: absolute !important;
  left: -6% !important;
  right: -6% !important;
  bottom: -42px !important;
  height: 90px !important;
  background: rgba(255,250,244,.88) !important;
  border-radius: 50% 50% 0 0 !important;
}

.luxury-email-logo {
  position: relative !important;
  z-index: 2 !important;
  width: clamp(116px, 18vw, 160px) !important;
  height: clamp(116px, 18vw, 160px) !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  border: 5px solid #ffffff !important;
  filter: drop-shadow(0 16px 28px rgba(45, 31, 17, .26)) !important;
}

.luxury-email-main {
  padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 52px) !important;
  text-align: center !important;
  background: #fffaf4 !important;
}

.luxury-email-main h4 {
  margin: 0 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(36px, 5vw, 62px) !important;
  line-height: .98 !important;
  font-weight: 400 !important;
  letter-spacing: -0.055em !important;
  color: #241f1a !important;
}

.luxury-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  margin: 24px auto !important;
  color: #b49a79 !important;
}

.luxury-divider span {
  width: min(90px, 18vw) !important;
  height: 1px !important;
  background: #bfa98e !important;
}

.luxury-divider b {
  font-size: 22px !important;
  line-height: 1 !important;
}

.luxury-email-main p {
  max-width: 620px !important;
  margin: 0 auto !important;
  color: #4f4740 !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.45 !important;
}

.luxury-preview-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 32px !important;
  padding: 18px 46px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #b59c7d, #9f8260) !important;
  color: #ffffff !important;
  font-size: clamp(18px, 2.1vw, 24px) !important;
  font-weight: 850 !important;
  box-shadow: 0 16px 28px rgba(91,72,52,.22) !important;
}

.luxury-email-signature {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 34px !important;
  align-items: center !important;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 54px) !important;
  background:
    radial-gradient(circle at 88% 80%, rgba(191,169,142,.18), transparent 30%),
    #fbf4ec !important;
  border-top: 1px solid #eadfce !important;
}

.luxury-signature-image {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 24px !important;
  border: 1px solid #eadfce !important;
  box-shadow: 0 12px 24px rgba(48,38,28,.12) !important;
}

.luxury-signature-copy {
  min-width: 0 !important;
  padding-left: 34px !important;
  border-left: 1px solid #d7c7b6 !important;
}

.luxury-signature-copy strong {
  display: block !important;
  margin-bottom: 8px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  color: #1f1b17 !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

.luxury-signature-copy span,
.luxury-signature-copy b,
.luxury-signature-copy small {
  display: block !important;
  color: #5c5148 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
}

.luxury-signature-copy b {
  margin-top: 8px !important;
  color: #2b2723 !important;
  font-weight: 900 !important;
}

.luxury-email-line {
  margin-top: 8px !important;
}

.luxury-signature-copy small {
  margin-top: 10px !important;
  color: #8a8075 !important;
  white-space: pre-line !important;
}

@media (max-width: 1100px) {
  .profile-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .signature-preview-card.luxury-email-preview-wrap {
    padding: 16px !important;
  }

  .luxury-email-hero {
    min-height: 180px !important;
  }

  .luxury-email-signature {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 18px !important;
  }

  .luxury-signature-image {
    margin: 0 auto !important;
  }

  .luxury-signature-copy {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* =========================================================
   Full UI polish: settings center, crop editor, photo email hero
   ========================================================= */
.clean-page-header h1 { font-size: clamp(42px, 5vw, 64px) !important; }
.settings-subnav a.active { background:#f4f3ff!important; border-color:#d6bbfb!important; color:#6941c6!important; }

/* Force professional sidebar icons and remove emoji overrides */
.sidebar-nav a::before,.clean-sidebar-nav a::before{content:""!important;color:transparent!important;font-size:0!important;line-height:0!important;}
.sidebar-nav a[href*="templates"]::before,.clean-sidebar-nav a[href*="templates"]::before{background-color:#7a5af8!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3C/svg%3E")!important;}
.sidebar-nav a[href="/settings"]::before,.clean-sidebar-nav a[href="/settings"]::before{background-color:#475467!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M2 14h4M10 8h4M18 16h4'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M2 14h4M10 8h4M18 16h4'/%3E%3C/svg%3E")!important;}
.sidebar-nav a[href*="profile"]::before{background-color:#a88f70!important;}
.sidebar-logo-img,.sidebar-brand img{width:76px!important;height:76px!important;}

/* Settings center */
.settings-center-grid{display:grid!important;gap:26px!important;margin:24px 0!important;}
.settings-group{display:grid!important;gap:14px!important;}
.settings-group h2{margin:0!important;font-size:24px!important;letter-spacing:-.03em!important;color:#101828!important;}
.settings-card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
.settings-action-card{position:relative!important;display:grid!important;gap:10px!important;min-height:174px!important;padding:24px!important;border:1px solid #eaecf0!important;border-radius:22px!important;background:#fff!important;color:#101828!important;box-shadow:0 12px 30px rgba(16,24,40,.055)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;overflow:hidden!important;}
.settings-action-card:hover{transform:translateY(-3px)!important;border-color:#d6bbfb!important;box-shadow:0 20px 42px rgba(16,24,40,.10)!important;}
.settings-action-card b{width:54px!important;height:54px!important;border-radius:17px!important;background:#f4f3ff!important;display:block!important;position:relative!important;}
.settings-action-card b::after{content:""!important;position:absolute!important;inset:14px!important;background:#7f56d9!important;-webkit-mask:center/contain no-repeat!important;mask:center/contain no-repeat!important;}
.settings-action-card.company b::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6'/%3E%3C/svg%3E")!important;}
.settings-action-card.users b::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")!important;}
.settings-action-card.profile b::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10'/%3E%3C/svg%3E")!important;}
.settings-action-card.email b::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-10 6L2 7M3 5h18v14H3z'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-10 6L2 7M3 5h18v14H3z'/%3E%3C/svg%3E")!important;}
.settings-action-card.templates b::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7zM14 3v6h5M9 14h6M9 18h6'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7zM14 3v6h5M9 14h6M9 18h6'/%3E%3C/svg%3E")!important;}
.settings-action-card.storage b::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E")!important;}
.settings-action-card strong{font-size:22px!important;line-height:1.1!important;letter-spacing:-.03em!important;}.settings-action-card span{font-size:15px!important;line-height:1.45!important;color:#475467!important;}.readiness-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}.readiness-item{padding:18px!important;border-radius:16px!important;border:1px solid #eaecf0!important;background:#fff!important}.readiness-item.ready{border-color:#abefc6!important;background:#f6fef9!important}.readiness-item.warn{border-color:#fedf89!important;background:#fffcf5!important}.readiness-item strong{display:block!important;font-size:15px!important}.readiness-item span{display:block!important;margin-top:8px!important;color:#475467!important}

/* Headshot crop editor */
.profile-editor-v2{grid-template-columns:minmax(0,1fr) minmax(420px,.72fr)!important;gap:26px!important}.headshot-crop-card{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:22px!important;align-items:center!important;padding:18px!important;border:1px solid #eaecf0!important;border-radius:18px!important;background:#fffaf4!important}.headshot-crop-preview{width:170px!important;height:170px!important;overflow:hidden!important;border-radius:28px!important;border:1px solid #eadfce!important;background:#f7efe6!important;display:grid!important;place-items:center!important;box-shadow:0 12px 24px rgba(48,38,28,.10)!important}.headshot-crop-preview img{width:100%!important;height:100%!important;object-fit:cover!important}.headshot-placeholder{font-weight:800!important;color:#8a8075!important;text-align:center!important}.crop-controls{display:grid!important;gap:14px!important}.crop-controls label{display:block!important;margin-bottom:6px!important;font-weight:850!important;color:#344054!important}.crop-controls input[type=range]{width:100%!important;accent-color:#a88f70!important}.profile-upload-card{grid-template-columns:minmax(0,1fr) auto auto!important}.luxury-signature-image-wrap{width:160px!important;height:160px!important;overflow:hidden!important;border-radius:26px!important}.luxury-signature-image{width:100%!important;height:100%!important;object-fit:cover!important}.luxury-signature-placeholder{width:160px!important;height:160px!important;display:grid!important;place-items:center!important;border-radius:26px!important;background:#f7efe6!important;color:#8a8075!important;font-weight:850!important}

/* Photo hero email preview */
.luxury-email-preview-photo .photo-hero{min-height:245px!important;background-image:url('/static/email-hero.webp')!important;background-size:cover!important;background-position:center!important;background-color:#d5c2a8!important}.luxury-email-preview-photo .photo-hero::before{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,250,244,.18))!important}.luxury-email-preview-photo .photo-hero::after{display:none!important}.luxury-email-preview-photo .luxury-email-logo{width:150px!important;height:150px!important}.luxury-email-preview-photo .luxury-email-main{padding-top:44px!important}.luxury-email-preview-photo .luxury-email-signature{background:#fbf4ec!important;background-image:none!important}

@media(max-width:1200px){.settings-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-editor-v2{grid-template-columns:1fr!important}}
@media(max-width:720px){.settings-card-grid,.readiness-grid{grid-template-columns:1fr!important}.headshot-crop-card{grid-template-columns:1fr!important}.headshot-crop-preview{margin:auto!important}.profile-upload-card{grid-template-columns:1fr!important}.luxury-email-signature{grid-template-columns:1fr!important;text-align:center!important}.luxury-signature-image-wrap{margin:auto!important}.luxury-signature-copy{border-left:0!important;padding-left:0!important}.luxury-email-main h4{font-size:40px!important}.luxury-email-preview-photo .photo-hero{min-height:190px!important}.luxury-email-preview-photo .luxury-email-logo{width:118px!important;height:118px!important}}


/* =========================================================
   Email preview correction: real hero image + exact crop preview
   ========================================================= */
.luxury-email-preview-photo .photo-hero{
  background-image:url('/static/email-hero.webp') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.luxury-email-preview-photo .luxury-email-signature,
.luxury-email-signature{
  background:#fbf4ec !important;
  background-image:none !important;
}
.luxury-signature-image-wrap,
.headshot-crop-preview{
  position:relative !important;
  overflow:hidden !important;
}
.luxury-signature-image,
.headshot-crop-preview img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  will-change:transform,object-position !important;
}

/* =========================================================
   Headshot crop parity fix + sharper email hero
   Makes editor preview, saved preview, and email signature use the same math.
   ========================================================= */
.luxury-email-preview-photo .photo-hero{
  min-height: 255px !important;
  background-image: url('/static/email-hero.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  image-rendering: auto !important;
}

.headshot-crop-preview,
.luxury-signature-image-wrap{
  position: relative !important;
  overflow: hidden !important;
  background: #f7efe6 !important;
}

.headshot-crop-preview img.crop-fit-image,
.luxury-signature-image.crop-fit-image,
.crop-fit-image{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform-origin: center center !important;
  transform: translate(var(--crop-x, 0%), var(--crop-y, 0%)) scale(var(--crop-scale, 1)) !important;
  will-change: transform !important;
}

.headshot-crop-preview{
  width: 180px !important;
  height: 180px !important;
}

.luxury-signature-image-wrap{
  width: 165px !important;
  height: 165px !important;
}

.crop-controls input[type=range]{
  cursor: pointer !important;
}

.crop-controls label::after{
  content: "" !important;
}

.luxury-email-signature{
  background: #fbf4ec !important;
  background-image: none !important;
}

@media(max-width:720px){
  .luxury-email-preview-photo .photo-hero{min-height:210px!important;}
  .headshot-crop-preview{width:170px!important;height:170px!important;}
}

/* =========================================================
   Costco v1.0 app-wide interaction + visible border polish
   - darker borders everywhere
   - smooth hover/click/focus states
   - removes duplicate workspace card from sidebar
   ========================================================= */
:root{
  --bux-border-strong:#d0d5dd;
  --bux-border-mid:#d6dbe5;
  --bux-shadow-soft:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --bux-shadow-hover:0 10px 26px rgba(16,24,40,.12),0 3px 8px rgba(16,24,40,.08);
  --bux-purple:#7f56d9;
  --bux-purple-dark:#6941c6;
  --bux-purple-soft:#f4f3ff;
}

/* Remove duplicate workspace card from the left sidebar. Top brand already shows the active workspace. */
.monday-sidebar > .workspace-card,
.monday-sidebar > .compact-workspace{
  display:none!important;
}

/* Make sidebar breathe better after removing duplicate card */
.monday-sidebar{
  padding-bottom:28px!important;
}
.sidebar-logout{
  margin-top:42px!important;
}

/* Stronger, visible borders across the whole app */
.monday-board-shell,
.monday-stat,
.settings-action-card,
.settings-card,
.guide-card,
.readiness-item,
.workspace-card,
.notice,
.auth-card,
.login-card,
.card,
.panel,
.table-card,
.metric-card,
.profile-upload-card,
.headshot-crop-card,
.luxury-email-frame,
.email-preview-card,
.email-preview,
.field-group,
.upload-box,
.text-input,
.platform-input,
input,
textarea,
select,
button,
.monday-primary,
.monday-secondary,
.primary-btn,
.secondary-btn,
.small-btn,
.sidebar-logout,
.settings-subnav a,
.sidebar-nav a,
.clean-sidebar-nav a{
  border-color:var(--bux-border-strong)!important;
}

.monday-board-shell,
.monday-stat,
.settings-action-card,
.settings-card,
.guide-card,
.readiness-item,
.auth-card,
.card,
.panel,
.table-card,
.metric-card,
.profile-upload-card,
.headshot-crop-card,
.luxury-email-frame,
.email-preview-card{
  box-shadow:var(--bux-shadow-soft)!important;
}

/* App-wide interactive animations for everything clickable */
a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="file"],
.monday-primary,
.monday-secondary,
.primary-btn,
.secondary-btn,
.small-btn,
.sidebar-logout,
.settings-subnav a,
.sidebar-nav a,
.clean-sidebar-nav a,
.settings-action-card,
.contract-row,
.history-item,
.board-row,
.row,
.copy-link-row button,
.auth-tab,
.signature-tab{
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .16s cubic-bezier(.2,.8,.2,1),
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease!important;
}

a:hover,
button:hover,
[role="button"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.monday-primary:hover,
.monday-secondary:hover,
.primary-btn:hover,
.secondary-btn:hover,
.small-btn:hover,
.sidebar-logout:hover,
.settings-subnav a:hover,
.sidebar-nav a:hover,
.clean-sidebar-nav a:hover,
.settings-action-card:hover,
.contract-row:hover,
.history-item:hover,
.board-row:hover,
.row:hover,
.auth-tab:hover,
.signature-tab:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--bux-shadow-hover)!important;
}

a:active,
button:active,
[role="button"]:active,
input[type="button"]:active,
input[type="submit"]:active,
.monday-primary:active,
.monday-secondary:active,
.primary-btn:active,
.secondary-btn:active,
.small-btn:active,
.sidebar-logout:active,
.settings-subnav a:active,
.sidebar-nav a:active,
.clean-sidebar-nav a:active,
.settings-action-card:active,
.contract-row:active,
.history-item:active,
.board-row:active,
.row:active,
.auth-tab:active,
.signature-tab:active{
  transform:translateY(0) scale(.985)!important;
  box-shadow:0 2px 7px rgba(16,24,40,.10)!important;
}

/* Keyboard accessibility + premium focus state */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible{
  outline:0!important;
  border-color:var(--bux-purple)!important;
  box-shadow:0 0 0 4px rgba(127,86,217,.18), var(--bux-shadow-soft)!important;
}

/* Bigger, cleaner sidebar brand */
.sidebar-brand{
  padding-bottom:30px!important;
  border-bottom:1px solid var(--bux-border-strong)!important;
  margin-bottom:28px!important;
}
.sidebar-logo-img,
.sidebar-brand img{
  width:86px!important;
  height:86px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 18px rgba(16,24,40,.13))!important;
}
.sidebar-brand strong{
  margin-top:8px!important;
  font-size:21px!important;
  line-height:1.15!important;
  letter-spacing:-.035em!important;
}
.sidebar-brand span{
  font-size:14px!important;
  line-height:1.35!important;
}
.admin-role-pill{
  margin-top:10px!important;
  padding:7px 13px!important;
  font-size:13px!important;
  border:1px solid #d6e4ff!important;
}

/* Better vertical nav cards */
.sidebar-nav,
.clean-sidebar-nav{
  gap:14px!important;
}
.sidebar-nav a,
.clean-sidebar-nav a{
  min-height:96px!important;
  padding:18px 18px!important;
  border:1px solid transparent!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  column-gap:15px!important;
  align-items:center!important;
  background:transparent!important;
}
.sidebar-nav a::before,
.clean-sidebar-nav a::before{
  width:32px!important;
  height:32px!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  justify-self:center!important;
}
.sidebar-nav a span,
.clean-sidebar-nav a span{
  display:block!important;
  font-size:22px!important;
  line-height:1.06!important;
  letter-spacing:-.04em!important;
  font-weight:900!important;
  color:#101828!important;
}
.sidebar-nav a small,
.clean-sidebar-nav a small{
  display:block!important;
  margin-top:8px!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:750!important;
  color:#344054!important;
}
.sidebar-nav a:hover,
.clean-sidebar-nav a:hover{
  background:#f8f7ff!important;
  border-color:#ddd6fe!important;
}
.sidebar-nav a.active,
.clean-sidebar-nav a.active{
  background:linear-gradient(135deg,#f4f3ff,#fbfaff)!important;
  border-color:#c7b9ff!important;
  box-shadow:0 14px 34px rgba(127,86,217,.16)!important;
}
.sidebar-nav a.active small,
.clean-sidebar-nav a.active small{
  color:#4f35b5!important;
}

/* Buttons should feel alive and readable */
.monday-primary,
.primary-btn{
  background:linear-gradient(135deg,var(--bux-purple),var(--bux-purple-dark))!important;
  border-color:var(--bux-purple-dark)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(127,86,217,.22)!important;
}
.monday-primary:hover,
.primary-btn:hover{
  background:linear-gradient(135deg,#8b66e4,#5f35b4)!important;
  box-shadow:0 14px 28px rgba(127,86,217,.30)!important;
}
.monday-secondary,
.secondary-btn,
.small-btn,
.sidebar-logout,
.settings-subnav a{
  background:#fff!important;
  border:1px solid var(--bux-border-strong)!important;
}
.monday-secondary:hover,
.secondary-btn:hover,
.small-btn:hover,
.sidebar-logout:hover,
.settings-subnav a:hover{
  background:#f9fafb!important;
  border-color:#98a2b3!important;
}

/* Make cards and table rows feel clickable when they are links */
a.monday-board-shell,
a.settings-action-card,
a.contract-row,
a.history-item,
a.row{
  cursor:pointer!important;
}

/* Form controls stronger and clearer */
.text-input,
.platform-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select{
  border-width:1.5px!important;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04)!important;
}
.text-input:hover,
.platform-input:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
textarea:hover,
select:hover{
  border-color:#98a2b3!important;
}

/* Range sliders more premium */
input[type="range"]{
  accent-color:var(--bux-purple)!important;
  cursor:pointer!important;
}
input[type="range"]:hover{
  filter:brightness(.96)!important;
}

/* Disable aggressive motion for users who request reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

@media(max-width:900px){
  .sidebar-brand{
    align-items:center!important;
    text-align:center!important;
  }
  .sidebar-logo-img,
  .sidebar-brand img{
    width:76px!important;
    height:76px!important;
  }
  .sidebar-brand strong{font-size:20px!important;}
  .sidebar-nav a,
  .clean-sidebar-nav a{
    min-height:84px!important;
    grid-template-columns:36px minmax(0,1fr)!important;
  }
  .sidebar-nav a span,
  .clean-sidebar-nav a span{font-size:20px!important;}
  .sidebar-nav a small,
  .clean-sidebar-nav a small{font-size:14px!important;}
}


/* =========================================================
   FINAL MOBILE + INTERACTION + BORDER POLISH
   Fixes mobile sidebar/nav wrapping, button placement, visible borders,
   and adds consistent clickable animations across the app.
   ========================================================= */
:root{
  --bb-line-strong:#cfd6e3;
  --bb-line-hover:#b7c0cf;
  --bb-shadow-soft:0 8px 24px rgba(16,24,40,.08);
  --bb-shadow-lift:0 18px 44px rgba(16,24,40,.14);
  --bb-purple:#7f56d9;
  --bb-purple-dark:#6941c6;
  --bb-ink:#101828;
  --bb-muted:#475467;
}

/* Visible borders everywhere */
.monday-board-shell,
.monday-stat,
.settings-card,
.guide-card,
.auth-card,
.field-group,
.upload-box,
.platform-input,
.text-input,
.platform-textarea,
.signature-preview-card,
.luxury-email-preview,
.profile-card,
.profile-upload-card,
.headshot-crop-card,
.template-card,
.contract-row,
.work-table-wrap,
.monday-search input,
.settings-subnav a,
.sidebar-logout,
.notice,
.row-more-menu,
.detail-fields > div,
.note-card {
  border-color: var(--bb-line-strong) !important;
}

/* Universal clickable polish */
a,
button,
.monday-primary,
.monday-secondary,
.primary-row-action,
.sidebar-nav a,
.settings-subnav a,
.settings-card,
.guide-card,
.monday-stat,
.row-more summary,
.sidebar-logout,
input[type="file"]::file-selector-button {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease !important;
}

a:hover,
button:hover,
.monday-primary:hover,
.monday-secondary:hover,
.primary-row-action:hover,
.sidebar-nav a:hover,
.settings-subnav a:hover,
.settings-card:hover,
.guide-card:hover,
.monday-stat:hover,
.row-more summary:hover,
.sidebar-logout:hover,
input[type="file"]::file-selector-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--bb-shadow-soft) !important;
}

a:active,
button:active,
.monday-primary:active,
.monday-secondary:active,
.primary-row-action:active,
.sidebar-nav a:active,
.settings-subnav a:active,
.sidebar-logout:active {
  transform: translateY(0) scale(.985) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.platform-input:focus,
.text-input:focus,
.platform-textarea:focus {
  border-color: var(--bb-purple) !important;
  box-shadow: 0 0 0 4px rgba(127,86,217,.14) !important;
  outline: none !important;
}

/* Better primary buttons */
.monday-primary,
.primary-btn,
.primary-row-action,
button.monday-primary {
  background: linear-gradient(180deg, #8b5cf6, #7547d8) !important;
  border: 1px solid #6f3fd0 !important;
  color: #fff !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  padding: 13px 22px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 12px 22px rgba(127,86,217,.22) !important;
}

.monday-primary:hover,
.primary-btn:hover,
.primary-row-action:hover,
button.monday-primary:hover {
  background: linear-gradient(180deg, #9365fb, #6f3fd0) !important;
  box-shadow: 0 18px 34px rgba(127,86,217,.28) !important;
}

.monday-secondary,
.secondary-btn,
button.monday-secondary {
  border: 1px solid var(--bb-line-strong) !important;
  border-radius: 14px !important;
  min-height: 46px !important;
  padding: 12px 20px !important;
  background:#fff !important;
  color:#344054 !important;
  font-weight:850 !important;
}

/* Platform action bars: fix weird button placement */
.platform-action-bar,
.sticky-action,
.form-actions,
.board-footer,
.monday-board-shell footer {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
  padding:22px 0 0 !important;
  margin-top:22px !important;
  border-top:1px solid var(--bb-line-strong) !important;
  background:transparent !important;
  min-height:auto !important;
  overflow:visible !important;
}
.platform-action-bar .monday-primary,
.sticky-action .monday-primary,
.form-actions .monday-primary {
  flex:0 0 auto !important;
  min-width:220px !important;
  width:auto !important;
}
.platform-action-bar span,
.sticky-action span,
.form-actions span {
  color:#667085 !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

/* Sidebar base: clean desktop */
.monday-sidebar,
.crm-sidebar {
  border-right:1px solid var(--bb-line-strong) !important;
  background:#fff !important;
}
.sidebar-brand img {
  width:82px !important;
  height:82px !important;
  border-radius:20px !important;
  box-shadow:0 12px 28px rgba(16,24,40,.12) !important;
}
.sidebar-brand strong { font-size:18px !important; }
.sidebar-brand span { font-size:13px !important; color:#475467 !important; }
.admin-role-pill { border:1px solid #d9d6fe !important; }

/* Hide duplicate lower workspace card; top brand already says it */
.workspace-card,
.compact-workspace { display:none !important; }

/* Sidebar nav: force icon + stacked text, never cramped */
.sidebar-nav,
.clean-sidebar-nav {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  width:100% !important;
}
.sidebar-nav a,
.clean-sidebar-nav a {
  position:relative !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  min-height:74px !important;
  width:100% !important;
  padding:14px 16px !important;
  border:1px solid transparent !important;
  border-radius:18px !important;
  color:#1d2939 !important;
  text-align:left !important;
  background:transparent !important;
  overflow:hidden !important;
}
.sidebar-nav a::before,
.clean-sidebar-nav a::before {
  display:grid !important;
  place-items:center !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:14px !important;
  background:#f4f3ff !important;
  color:#7f56d9 !important;
  border:1px solid #ddd6fe !important;
  font-size:0 !important;
  line-height:1 !important;
  box-shadow:none !important;
}
.sidebar-nav a:nth-child(1)::before { content:"" !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; }
.sidebar-nav a:nth-child(2)::before { content:"" !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; }
.sidebar-nav a:nth-child(3)::before { content:"" !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; }
.sidebar-nav a:nth-child(4)::before { content:"" !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; }
.sidebar-nav a:nth-child(5)::before { content:"" !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; }
.sidebar-nav a span,
.clean-sidebar-nav a span {
  display:block !important;
  min-width:0 !important;
  color:#101828 !important;
  font-size:17px !important;
  font-weight:950 !important;
  line-height:1.14 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.sidebar-nav a small,
.clean-sidebar-nav a small {
  display:block !important;
  min-width:0 !important;
  margin-top:5px !important;
  color:#475467 !important;
  font-size:13px !important;
  font-weight:750 !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.sidebar-nav a.active,
.clean-sidebar-nav a.active,
.sidebar-nav a:hover,
.clean-sidebar-nav a:hover {
  background:#f4f1ff !important;
  border-color:#c7b6ff !important;
  box-shadow:0 18px 42px rgba(127,86,217,.14) !important;
}
.sidebar-nav a.active::before,
.clean-sidebar-nav a.active::before,
.sidebar-nav a:hover::before,
.clean-sidebar-nav a:hover::before {
  background:#ede9fe !important;
  border-color:#b692f6 !important;
}

/* Dashboard/table signed info */
.signed-time-cell strong,
.signed-time-mobile strong{
  display:block!important;
  color:#027a48!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.signed-time-cell span,
.signed-time-mobile span{
  display:block!important;
  color:#667085!important;
  font-size:12px!important;
  line-height:1.25!important;
  margin-top:2px!important;
}
.signed-time-mobile{display:none!important;}

/* Mobile/tablet: stable layout, no side-by-side nav chaos */
@media (max-width: 900px){
  html,body{overflow-x:hidden!important;}
  .monday-layout{display:block!important;width:100%!important;min-height:100vh!important;}
  .monday-sidebar,
  .crm-sidebar{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    position:relative!important;
    top:auto!important;
    left:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:22px 18px 20px!important;
    border-right:0!important;
    border-bottom:1px solid var(--bb-line-strong)!important;
  }
  .sidebar-brand{
    align-items:center!important;
    text-align:center!important;
    padding:0 0 22px!important;
    margin:0 0 20px!important;
    border-bottom:1px solid var(--bb-line-strong)!important;
  }
  .sidebar-brand > div{align-items:center!important;text-align:center!important;}
  .sidebar-brand img{width:78px!important;height:78px!important;}
  .sidebar-nav,
  .clean-sidebar-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }
  .sidebar-nav a,
  .clean-sidebar-nav a{
    grid-template-columns:48px minmax(0,1fr)!important;
    min-height:74px!important;
    padding:14px 16px!important;
    text-align:left!important;
  }
  .sidebar-nav a span,
  .clean-sidebar-nav a span{font-size:18px!important;line-height:1.1!important;}
  .sidebar-nav a small,
  .clean-sidebar-nav a small{display:block!important;font-size:13px!important;line-height:1.2!important;}
  .sidebar-logout{
    width:100%!important;
    min-height:56px!important;
    margin:22px 0 0!important;
    border-radius:18px!important;
    font-size:16px!important;
  }
  .monday-main,
  .crm-main{
    width:100%!important;
    min-width:0!important;
    padding:26px 18px 42px!important;
    overflow:visible!important;
  }
  .monday-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    align-items:start!important;
  }
  .monday-header h1{font-size:34px!important;line-height:1.04!important;}
  .monday-header .monday-primary,
  .monday-header .monday-secondary{width:100%!important;justify-content:center!important;}
  .monday-stats{grid-template-columns:1fr!important;gap:14px!important;}
  .monday-board-shell{padding:18px!important;border-radius:20px!important;overflow:visible!important;}
  .board-head{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;align-items:start!important;}
  .board-cleanup{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .monday-controls{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;}
  .monday-tabs{display:flex!important;overflow-x:auto!important;gap:8px!important;padding-bottom:4px!important;}
  .monday-tabs a{white-space:nowrap!important;}
  .work-table-wrap{overflow-x:auto!important;border-radius:18px!important;}
  .work-table{min-width:980px!important;}
  .platform-action-bar,
  .sticky-action,
  .form-actions,
  .board-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:18px 0 0!important;
  }
  .platform-action-bar .monday-primary,
  .sticky-action .monday-primary,
  .form-actions .monday-primary,
  .platform-action-bar button,
  .sticky-action button,
  .form-actions button{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
  }
  .platform-action-bar span,
  .sticky-action span,
  .form-actions span{text-align:center!important;}
  .create-grid,
  .settings-form-grid,
  .profile-editor-v2,
  .detail-grid,
  .bottom-detail-grid{grid-template-columns:1fr!important;}
  .signed-time-cell{display:none!important;}
  .signed-time-mobile{display:block!important;margin-top:8px!important;}
}

@media (max-width: 520px){
  .monday-sidebar{padding:20px 14px 18px!important;}
  .monday-main{padding:22px 14px 38px!important;}
  .sidebar-brand img{width:72px!important;height:72px!important;}
  .sidebar-brand strong{font-size:18px!important;}
  .sidebar-nav a,.clean-sidebar-nav a{min-height:70px!important;padding:12px 14px!important;gap:12px!important;}
  .sidebar-nav a::before,.clean-sidebar-nav a::before{width:42px!important;height:42px!important;min-width:42px!important;}
  .sidebar-nav a span,.clean-sidebar-nav a span{font-size:17px!important;}
  .sidebar-nav a small,.clean-sidebar-nav a small{font-size:12.5px!important;}
  .monday-header h1{font-size:30px!important;}
  .monday-board-shell{padding:16px!important;}
  .monday-primary,.monday-secondary,.primary-row-action{min-height:52px!important;font-size:15px!important;}
}

/* =========================================================
   Premium operations polish
   A final visual layer for the production contract platform.
   ========================================================= */
:root {
  --premium-bg: #f5f7f6;
  --premium-panel: #ffffff;
  --premium-panel-soft: #fbfcfb;
  --premium-ink: #111827;
  --premium-muted: #53606c;
  --premium-line: #d7dee5;
  --premium-line-strong: #c6d0da;
  --premium-navy: #1d3557;
  --premium-navy-dark: #152840;
  --premium-teal: #24746b;
  --premium-teal-soft: #e8f3f1;
  --premium-gold: #b98236;
  --premium-gold-soft: #fff4e3;
  --premium-red: #b54747;
  --premium-radius: 14px;
  --premium-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 18px 42px rgba(29, 53, 87, .08);
  --premium-shadow-hover: 0 2px 4px rgba(17, 24, 39, .06), 0 24px 54px rgba(29, 53, 87, .13);
}

html,
body,
.monday-app,
.auth-body {
  background:
    linear-gradient(180deg, #eef3f2 0, var(--premium-bg) 320px),
    var(--premium-bg) !important;
  color: var(--premium-ink) !important;
}

.monday-layout,
.monday-layout.crm-shell {
  grid-template-columns: 292px minmax(0, 1fr) !important;
  background: transparent !important;
}

.monday-sidebar,
.crm-sidebar {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  min-height: 100vh !important;
  padding: 28px 20px !important;
  border-right: 1px solid var(--premium-line) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 10px 0 34px rgba(29, 53, 87, .05) !important;
  backdrop-filter: blur(14px);
}

.monday-main,
.crm-main {
  max-width: 1480px !important;
  padding: clamp(24px, 3vw, 44px) clamp(18px, 3.5vw, 56px) 64px !important;
  background: transparent !important;
}

.sidebar-brand {
  gap: 14px !important;
  padding: 0 0 24px !important;
  margin: 0 0 24px !important;
  border-bottom: 1px solid var(--premium-line) !important;
}

.sidebar-brand img,
.sidebar-logo-img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid var(--premium-line) !important;
  box-shadow: 0 10px 24px rgba(29, 53, 87, .10) !important;
}

.sidebar-brand strong {
  color: var(--premium-ink) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.sidebar-brand span,
.sidebar-brand small {
  color: var(--premium-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.sidebar-nav,
.clean-sidebar-nav {
  gap: 10px !important;
}

.sidebar-nav a,
.clean-sidebar-nav a {
  min-height: 68px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  padding: 12px 14px !important;
  border-radius: var(--premium-radius) !important;
  border-color: transparent !important;
  background: transparent !important;
}

.sidebar-nav a::before,
.clean-sidebar-nav a::before {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 12px !important;
  background-color: #eef5f4 !important;
  border-color: #cfe0dd !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span {
  color: var(--premium-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.sidebar-nav a small,
.clean-sidebar-nav a small {
  color: var(--premium-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.sidebar-nav a:hover,
.clean-sidebar-nav a:hover,
.sidebar-nav a.active,
.clean-sidebar-nav a.active {
  transform: translateY(-1px) !important;
  background: #f1f7f6 !important;
  border-color: #bfd7d3 !important;
  box-shadow: 0 10px 24px rgba(36, 116, 107, .10) !important;
}

.sidebar-nav a.active::before,
.clean-sidebar-nav a.active::before,
.sidebar-nav a:hover::before,
.clean-sidebar-nav a:hover::before {
  background-color: #dff0ed !important;
  border-color: #9fc8c2 !important;
}

.sidebar-logout {
  border-radius: var(--premium-radius) !important;
  border-color: var(--premium-line) !important;
  color: var(--premium-muted) !important;
}

.monday-header,
.clean-page-header,
.cleaner-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 22px !important;
  margin-bottom: 24px !important;
}

.monday-kicker,
.eyebrow {
  color: var(--premium-teal) !important;
  letter-spacing: .12em !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.monday-header h1,
.auth-heading h1,
.sign-hero-card h1 {
  color: var(--premium-ink) !important;
  font-size: clamp(32px, 3.2vw, 50px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  font-weight: 850 !important;
}

.monday-header p,
.board-head p,
.field-note,
.auth-heading p,
.sign-hero-card p {
  color: var(--premium-muted) !important;
}

.monday-board-shell,
.card,
.success-panel,
.monday-stat,
.settings-card,
.settings-action-card,
.guide-card,
.auth-card,
.review-warning-card {
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius) !important;
  background: var(--premium-panel) !important;
  box-shadow: var(--premium-shadow) !important;
}

.monday-board-shell,
.card,
.success-panel,
.auth-card {
  padding: clamp(18px, 2.2vw, 28px) !important;
}

.monday-board-shell:hover,
.settings-action-card:hover,
.monday-stat:hover,
.guide-card:hover {
  border-color: var(--premium-line-strong) !important;
  box-shadow: var(--premium-shadow-hover) !important;
}

.board-head {
  gap: 16px !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--premium-line) !important;
}

.board-head h2,
.work-group-title strong,
.settings-group h2 {
  color: var(--premium-ink) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.monday-stats,
.create-grid,
.review-grid,
.detail-fields,
.summary-board,
.readiness-grid,
.settings-card-grid {
  gap: 14px !important;
}

.monday-stat,
.summary-board div,
.detail-fields > div,
.review-summary div {
  border-color: var(--premium-line) !important;
  border-radius: var(--premium-radius) !important;
  background: var(--premium-panel-soft) !important;
}

.monday-stat strong {
  color: var(--premium-ink) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
}

.stat-blue,
.stat-yellow,
.stat-green {
  background: #fff !important;
}

.stat-blue { border-left: 5px solid var(--premium-navy) !important; }
.stat-yellow { border-left: 5px solid var(--premium-gold) !important; }
.stat-green { border-left: 5px solid var(--premium-teal) !important; }

.work-group,
.create-group {
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius) !important;
  background: linear-gradient(180deg, #fff, #fbfcfb) !important;
}

.group-dot {
  background: var(--premium-teal) !important;
  box-shadow: 0 0 0 6px var(--premium-teal-soft) !important;
}

.group-upload .group-dot { background: var(--premium-navy) !important; box-shadow: 0 0 0 6px #e6edf5 !important; }
.group-send .group-dot { background: var(--premium-gold) !important; box-shadow: 0 0 0 6px var(--premium-gold-soft) !important; }

.file-tile,
.upload-box {
  border-radius: var(--premium-radius) !important;
  border: 1px dashed var(--premium-line-strong) !important;
  background: #fff !important;
}

.file-tile:hover,
.upload-box:hover {
  border-color: var(--premium-teal) !important;
  box-shadow: 0 14px 32px rgba(36, 116, 107, .10) !important;
}

.platform-input,
.text-input,
.platform-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  min-height: 48px !important;
  border: 1px solid var(--premium-line-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--premium-ink) !important;
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, .04) !important;
}

.platform-input:focus,
.text-input:focus,
.platform-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--premium-teal) !important;
  box-shadow: 0 0 0 4px rgba(36, 116, 107, .14) !important;
}

.monday-primary,
.primary-btn,
.primary-row-action,
button.monday-primary {
  min-height: 48px !important;
  border: 1px solid var(--premium-navy-dark) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--premium-navy), var(--premium-navy-dark)) !important;
  color: #fff !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 24px rgba(29, 53, 87, .18) !important;
}

.monday-primary:hover,
.primary-btn:hover,
.primary-row-action:hover,
button.monday-primary:hover {
  background: linear-gradient(180deg, #244366, #13253b) !important;
  box-shadow: 0 18px 38px rgba(29, 53, 87, .24) !important;
}

.monday-secondary,
.secondary-btn,
.small-btn,
button.monday-secondary {
  min-height: 46px !important;
  border: 1px solid var(--premium-line-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--premium-ink) !important;
  font-weight: 800 !important;
}

.monday-secondary:hover,
.secondary-btn:hover,
.small-btn:hover,
button.monday-secondary:hover {
  border-color: #a7b5c2 !important;
  background: #f8faf9 !important;
}

.board-chip {
  border-radius: 999px !important;
  font-weight: 850 !important;
}

.chip-signed,
.chip-done,
.chip-cloud {
  background: var(--premium-teal-soft) !important;
  color: #165c55 !important;
  border-color: #b7d9d4 !important;
}

.chip-pending {
  background: var(--premium-gold-soft) !important;
  color: #80551d !important;
  border-color: #efd2a6 !important;
}

.chip-issue,
.chip-expired {
  background: #fff0f0 !important;
  color: var(--premium-red) !important;
  border-color: #f0caca !important;
}

.work-table-wrap {
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.work-table th {
  background: #f7faf9 !important;
  color: #3f4b57 !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.work-table td {
  border-top: 1px solid var(--premium-line) !important;
}

.contract-row-js:hover td {
  background: #fbfdfc !important;
}

.auth-shell {
  width: min(520px, calc(100vw - 32px)) !important;
}

.auth-card {
  border-radius: 18px !important;
}

.auth-tabs {
  border-color: var(--premium-line) !important;
  background: #f4f7f6 !important;
}

.auth-tab.is-active,
.signature-tab.active {
  background: var(--premium-navy) !important;
  color: #fff !important;
}

.sign-hero-card {
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--premium-shadow) !important;
}

.pdf-frame {
  border-color: var(--premium-line-strong) !important;
  border-radius: 12px !important;
}

.platform-action-bar,
.sticky-action,
.form-actions,
.board-footer {
  border-top-color: var(--premium-line) !important;
}

@media (max-width: 1100px) {
  .monday-layout,
  .monday-layout.crm-shell {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    padding: 22px 16px !important;
  }
}

@media (max-width: 900px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    position: relative !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--premium-line) !important;
    box-shadow: 0 10px 34px rgba(29, 53, 87, .07) !important;
  }

  .sidebar-brand {
    align-items: center !important;
    text-align: left !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .sidebar-brand > div {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .sidebar-brand img,
  .sidebar-logo-img {
    width: 54px !important;
    height: 54px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    min-height: 64px !important;
  }

  .monday-main,
  .crm-main {
    padding: 24px 18px 44px !important;
  }

  .monday-header,
  .clean-page-header,
  .cleaner-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
}

@media (max-width: 560px) {
  .monday-sidebar,
  .crm-sidebar {
    padding: 16px 12px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: 1fr !important;
  }

  .monday-main,
  .crm-main {
    padding: 20px 12px 38px !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 29px !important;
  }

  .monday-board-shell,
  .card,
  .success-panel,
  .auth-card {
    padding: 16px !important;
  }

  .review-head-actions,
  .detail-actions,
  .signed-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

}

/* =========================================================
   Studio polish v3
   Wider desktop layout, cleaner sidebar states, richer but restrained color.
   ========================================================= */
:root {
  --studio-bg: #f7f7fb;
  --studio-bg-top: #f0f4fb;
  --studio-surface: #ffffff;
  --studio-surface-soft: #fbfcff;
  --studio-ink: #101828;
  --studio-muted: #526070;
  --studio-line: #d7ddea;
  --studio-line-strong: #c3cada;
  --studio-purple: #7f56d9;
  --studio-purple-dark: #5f35b4;
  --studio-purple-soft: #f3efff;
  --studio-blue: #2f6fed;
  --studio-green: #15866f;
  --studio-amber: #b7791f;
  --studio-red: #b43f4a;
  --studio-radius: 18px;
  --studio-radius-sm: 14px;
  --studio-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 38px rgba(48, 57, 83, .08);
  --studio-shadow-lift: 0 2px 6px rgba(16, 24, 40, .07), 0 24px 56px rgba(48, 57, 83, .14);
}

html,
body,
.monday-app,
.auth-body {
  color: var(--studio-ink) !important;
  background:
    radial-gradient(circle at 18% 0, rgba(127, 86, 217, .08), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(47, 111, 237, .07), transparent 30rem),
    linear-gradient(180deg, var(--studio-bg-top), var(--studio-bg) 360px) !important;
}

.monday-layout,
.monday-layout.crm-shell {
  display: grid !important;
  grid-template-columns: 276px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100vh !important;
  background: transparent !important;
}

.monday-main,
.crm-main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 34px clamp(28px, 3vw, 52px) 64px !important;
  background: transparent !important;
}

.monday-main > section,
.monday-main > header,
.monday-main > .notice-stack,
.monday-main > .platform-switcher-bar,
.monday-main > .review-layout,
.monday-main > .dashboard-grid,
.monday-main > .settings-grid,
.monday-main > .create-board,
.monday-main > .quote-placement-shell,
.monday-main > .history-shell,
.monday-main > .contracts-shell,
.monday-main > .monday-stats,
.monday-main > .monday-board-shell {
  max-width: none !important;
  width: 100% !important;
}

.monday-sidebar,
.crm-sidebar {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  width: 276px !important;
  min-height: 100vh !important;
  padding: 26px 18px !important;
  border-right: 1px solid rgba(195, 202, 218, .8) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 12px 0 36px rgba(16, 24, 40, .06) !important;
  backdrop-filter: blur(18px);
}

.sidebar-brand {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 0 0 22px !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid var(--studio-line) !important;
  text-align: left !important;
}

.sidebar-brand > div {
  min-width: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.sidebar-brand img,
.sidebar-logo-img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  object-fit: contain !important;
  border: 1px solid rgba(195, 202, 218, .85) !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .12) !important;
}

.sidebar-brand strong {
  display: block !important;
  color: var(--studio-ink) !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.sidebar-brand span,
.sidebar-brand small {
  color: var(--studio-muted) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.admin-role-pill {
  margin-top: 8px !important;
  border: 1px solid #d8ccff !important;
  background: var(--studio-purple-soft) !important;
  color: var(--studio-purple-dark) !important;
}

.sidebar-nav,
.clean-sidebar-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.sidebar-nav a,
.clean-sidebar-nav a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 72px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 17px !important;
  color: var(--studio-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.sidebar-nav a::after,
.clean-sidebar-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: transparent !important;
}

.sidebar-nav a::before,
.clean-sidebar-nav a::before {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  background-color: #f6f3ff !important;
  border: 1px solid #ded5ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span {
  color: var(--studio-ink) !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.sidebar-nav a small,
.clean-sidebar-nav a small {
  display: block !important;
  margin-top: 5px !important;
  color: var(--studio-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.22 !important;
  font-weight: 720 !important;
}

.sidebar-nav a:hover,
.clean-sidebar-nav a:hover {
  transform: translateY(-1px) !important;
  background: #faf8ff !important;
  border-color: #d7ccff !important;
  box-shadow: 0 12px 30px rgba(127, 86, 217, .12) !important;
}

.sidebar-nav a:hover::before,
.clean-sidebar-nav a:hover::before {
  background-color: #efe9ff !important;
  border-color: #c7b6ff !important;
}

.sidebar-nav a.active,
.clean-sidebar-nav a.active {
  background: linear-gradient(135deg, var(--studio-purple), var(--studio-purple-dark)) !important;
  border-color: var(--studio-purple-dark) !important;
  box-shadow: 0 18px 36px rgba(127, 86, 217, .28) !important;
}

.sidebar-nav a.active::after,
.clean-sidebar-nav a.active::after {
  background: rgba(255, 255, 255, .9) !important;
}

.sidebar-nav a.active::before,
.clean-sidebar-nav a.active::before {
  background-color: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.sidebar-nav a.active span,
.clean-sidebar-nav a.active span,
.sidebar-nav a.active small,
.clean-sidebar-nav a.active small {
  color: #fff !important;
}

.sidebar-nav a.active small,
.clean-sidebar-nav a.active small {
  opacity: .82 !important;
}

.sidebar-nav a:nth-child(1).active::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") !important; }
.sidebar-nav a:nth-child(2).active::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important; }
.sidebar-nav a:nth-child(3).active::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E") !important; }
.sidebar-nav a:nth-child(4).active::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E") !important; }

.sidebar-logout {
  min-height: 48px !important;
  border-radius: 15px !important;
  border: 1px solid var(--studio-line) !important;
  background: #fff !important;
  color: var(--studio-muted) !important;
  font-weight: 850 !important;
}

.monday-header,
.clean-page-header,
.cleaner-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 26px !important;
}

.monday-kicker,
.eyebrow {
  color: var(--studio-purple-dark) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
}

.monday-header h1,
.auth-heading h1,
.sign-hero-card h1 {
  color: var(--studio-ink) !important;
  font-size: clamp(36px, 3.35vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
}

.monday-header p,
.board-head p,
.field-note,
.auth-heading p,
.sign-hero-card p {
  color: var(--studio-muted) !important;
}

.monday-board-shell,
.card,
.success-panel,
.monday-stat,
.settings-card,
.settings-action-card,
.guide-card,
.auth-card,
.review-warning-card {
  border: 1px solid rgba(195, 202, 218, .9) !important;
  border-radius: var(--studio-radius) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: var(--studio-shadow) !important;
}

.monday-board-shell,
.card,
.success-panel,
.auth-card {
  padding: clamp(22px, 2vw, 34px) !important;
}

.monday-board-shell:hover,
.settings-action-card:hover,
.monday-stat:hover,
.guide-card:hover {
  border-color: var(--studio-line-strong) !important;
  box-shadow: var(--studio-shadow-lift) !important;
}

.board-head {
  gap: 18px !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--studio-line) !important;
}

.board-head h2,
.work-group-title strong,
.settings-group h2 {
  color: var(--studio-ink) !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
}

.monday-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.create-grid,
.review-grid,
.detail-fields,
.summary-board,
.readiness-grid,
.settings-card-grid {
  gap: 18px !important;
}

.monday-stat,
.summary-board div,
.detail-fields > div,
.review-summary div {
  border-color: var(--studio-line) !important;
  border-radius: var(--studio-radius-sm) !important;
  background: linear-gradient(180deg, #fff, var(--studio-surface-soft)) !important;
}

.monday-stat {
  min-height: 126px !important;
  padding: 22px !important;
}

.monday-stat span {
  color: var(--studio-muted) !important;
  font-weight: 850 !important;
}

.monday-stat strong {
  color: var(--studio-ink) !important;
  font-size: clamp(36px, 3vw, 54px) !important;
  letter-spacing: 0 !important;
}

.stat-blue { border-top: 5px solid var(--studio-blue) !important; border-left: 1px solid var(--studio-line) !important; }
.stat-yellow { border-top: 5px solid var(--studio-amber) !important; border-left: 1px solid var(--studio-line) !important; }
.stat-green { border-top: 5px solid var(--studio-green) !important; border-left: 1px solid var(--studio-line) !important; }

.flow-strip {
  gap: 16px !important;
}

.flow-step {
  border-radius: var(--studio-radius) !important;
  border-color: var(--studio-line) !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: var(--studio-shadow) !important;
}

.work-group,
.create-group {
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius) !important;
  background:
    linear-gradient(135deg, rgba(127, 86, 217, .035), transparent 42%),
    #fff !important;
}

.group-upload .group-dot,
.step-upload span { background: var(--studio-blue) !important; box-shadow: 0 0 0 6px rgba(47, 111, 237, .12) !important; }
.group-verify .group-dot,
.step-verify span { background: var(--studio-purple) !important; box-shadow: 0 0 0 6px rgba(127, 86, 217, .14) !important; }
.group-send .group-dot,
.step-send span { background: var(--studio-amber) !important; box-shadow: 0 0 0 6px rgba(183, 121, 31, .14) !important; }

.file-tile,
.upload-box {
  border-radius: var(--studio-radius-sm) !important;
  border: 1px dashed var(--studio-line-strong) !important;
  background: #fff !important;
}

.file-tile:hover,
.upload-box:hover {
  border-color: var(--studio-purple) !important;
  box-shadow: 0 16px 34px rgba(127, 86, 217, .13) !important;
}

.platform-input,
.text-input,
.platform-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  min-height: 52px !important;
  border: 1.5px solid var(--studio-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--studio-ink) !important;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04) !important;
}

.platform-input:focus,
.text-input:focus,
.platform-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--studio-purple) !important;
  box-shadow: 0 0 0 4px rgba(127, 86, 217, .16) !important;
}

.monday-primary,
.primary-btn,
.primary-row-action,
button.monday-primary {
  min-height: 50px !important;
  border: 1px solid var(--studio-purple-dark) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #8b5cf6, var(--studio-purple-dark)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 28px rgba(127, 86, 217, .25) !important;
}

.monday-primary:hover,
.primary-btn:hover,
.primary-row-action:hover,
button.monday-primary:hover {
  background: linear-gradient(180deg, #9b72ff, #5730a8) !important;
  box-shadow: 0 20px 42px rgba(127, 86, 217, .32) !important;
}

.monday-secondary,
.secondary-btn,
.small-btn,
button.monday-secondary {
  min-height: 48px !important;
  border: 1px solid var(--studio-line-strong) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #344054 !important;
  font-weight: 850 !important;
}

.monday-secondary:hover,
.secondary-btn:hover,
.small-btn:hover,
button.monday-secondary:hover {
  border-color: #a99af0 !important;
  background: #fbf9ff !important;
  color: var(--studio-purple-dark) !important;
}

.board-chip {
  border-radius: 999px !important;
  font-weight: 850 !important;
}

.chip-signed,
.chip-done,
.chip-cloud {
  background: #e9f8f4 !important;
  color: #08634f !important;
  border-color: #b9e2d6 !important;
}

.chip-pending {
  background: #fff5df !important;
  color: #805414 !important;
  border-color: #efd194 !important;
}

.chip-issue,
.chip-expired {
  background: #fff0f3 !important;
  color: var(--studio-red) !important;
  border-color: #f1c6cf !important;
}

.work-table-wrap {
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius) !important;
  background: #fff !important;
  box-shadow: var(--studio-shadow) !important;
}

.work-table {
  width: 100% !important;
}

.work-table th {
  background: #f7f8fc !important;
  color: #475467 !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.work-table td {
  border-top: 1px solid var(--studio-line) !important;
}

.contract-row-js:hover td {
  background: #fcfbff !important;
}

.auth-shell {
  width: min(620px, calc(100vw - 32px)) !important;
}

.auth-card,
.sign-hero-card {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--studio-shadow-lift) !important;
}

.auth-tabs,
.signature-tabs {
  border-color: var(--studio-line) !important;
  background: #f5f3ff !important;
}

.auth-tab.is-active,
.signature-tab.active {
  background: linear-gradient(180deg, #8b5cf6, var(--studio-purple-dark)) !important;
  color: #fff !important;
}

.pdf-frame {
  border-color: var(--studio-line-strong) !important;
  border-radius: var(--studio-radius-sm) !important;
}

@media (min-width: 1500px) {
  .monday-layout,
  .monday-layout.crm-shell {
    grid-template-columns: 292px minmax(0, 1fr) !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    width: 292px !important;
  }

  .monday-main,
  .crm-main {
    padding-left: 58px !important;
    padding-right: 58px !important;
  }
}

@media (max-width: 1180px) {
  .monday-layout,
  .monday-layout.crm-shell {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    width: 248px !important;
    padding: 22px 14px !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    padding: 11px 12px !important;
  }
}

@media (max-width: 900px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--studio-line) !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .08) !important;
  }

  .sidebar-brand {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .sidebar-brand img,
  .sidebar-logo-img {
    width: 54px !important;
    height: 54px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    min-height: 68px !important;
  }

  .monday-main,
  .crm-main {
    padding: 24px 18px 44px !important;
  }

  .monday-header,
  .clean-page-header,
  .cleaner-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 34px !important;
  }

  .monday-stats {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .monday-sidebar,
  .crm-sidebar {
    padding: 16px 12px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: 1fr !important;
  }

  .monday-main,
  .crm-main {
    padding: 20px 12px 38px !important;
  }

  .monday-board-shell,
  .card,
  .success-panel,
  .auth-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 30px !important;
  }

  .review-head-actions,
  .detail-actions,
  .signed-actions,
  .platform-action-bar,
  .sticky-action,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
}

/* =========================================================
   Full app audit fixes v4
   Final reset for legacy icon masks, active states, and mobile sizing.
   ========================================================= */
.monday-layout,
.monday-layout.crm-shell {
  min-width: 0 !important;
}

html,
body,
.monday-app,
.auth-body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.monday-main,
.crm-main {
  min-width: 0 !important;
  overflow: visible !important;
}

.monday-sidebar,
.crm-sidebar {
  overflow-x: hidden !important;
}

.sidebar-nav,
.clean-sidebar-nav {
  align-content: start !important;
}

.sidebar-nav a,
.clean-sidebar-nav a {
  min-width: 0 !important;
  min-height: 72px !important;
  height: 72px !important;
  isolation: isolate !important;
  transform: none !important;
}

.sidebar-nav a:hover,
.clean-sidebar-nav a:hover {
  transform: translateX(3px) !important;
}

.sidebar-nav a::before,
.clean-sidebar-nav a::before {
  content: "" !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: center !important;
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  background-color: #f4f1ff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  border: 1px solid #ded5ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.sidebar-nav a[href]::before,
.clean-sidebar-nav a[href]::before {
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: auto !important;
  mask-size: auto !important;
  -webkit-mask-repeat: initial !important;
  mask-repeat: initial !important;
  -webkit-mask-position: initial !important;
  mask-position: initial !important;
}

.sidebar-nav a[href="/dashboard"]::before,
.clean-sidebar-nav a[href="/dashboard"]::before,
.sidebar-nav a[href="/history"]::before,
.clean-sidebar-nav a[href="/history"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/"]::before,
.clean-sidebar-nav a[href="/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/settings/templates"]::before,
.clean-sidebar-nav a[href="/settings/templates"]::before,
.sidebar-nav a[href="/templates"]::before,
.clean-sidebar-nav a[href="/templates"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/settings"]::before,
.clean-sidebar-nav a[href="/settings"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/admin/companies"]::before,
.clean-sidebar-nav a[href="/admin/companies"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M9 17h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active::before,
.clean-sidebar-nav a.active::before {
  background-color: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.sidebar-nav a.active[href="/dashboard"]::before,
.clean-sidebar-nav a.active[href="/dashboard"]::before,
.sidebar-nav a.active[href="/history"]::before,
.clean-sidebar-nav a.active[href="/history"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/"]::before,
.clean-sidebar-nav a.active[href="/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/settings/templates"]::before,
.clean-sidebar-nav a.active[href="/settings/templates"]::before,
.sidebar-nav a.active[href="/templates"]::before,
.clean-sidebar-nav a.active[href="/templates"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/settings"]::before,
.clean-sidebar-nav a.active[href="/settings"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/admin/companies"]::before,
.clean-sidebar-nav a.active[href="/admin/companies"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M9 17h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span,
.sidebar-nav a small,
.clean-sidebar-nav a small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span {
  white-space: nowrap !important;
}

.sidebar-nav a small,
.clean-sidebar-nav a small {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.monday-primary,
.monday-secondary,
.primary-btn,
.secondary-btn,
.small-btn,
.primary-row-action,
.sidebar-logout {
  white-space: normal !important;
  line-height: 1.15 !important;
}

.monday-primary:hover,
.monday-secondary:hover,
.primary-btn:hover,
.secondary-btn:hover,
.small-btn:hover,
.primary-row-action:hover,
.sidebar-logout:hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
  .monday-sidebar,
  .crm-sidebar {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    gap: 10px !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    min-height: 74px !important;
    height: 74px !important;
    padding: 12px 14px !important;
    transform: none !important;
  }

  .sidebar-nav a:hover,
  .clean-sidebar-nav a:hover {
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 560px) {
  .sidebar-brand {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .sidebar-brand img,
  .sidebar-logo-img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
  }

  .sidebar-nav a::before,
  .clean-sidebar-nav a::before {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 13px !important;
    background-size: 20px 20px !important;
  }

  .sidebar-nav a span,
  .clean-sidebar-nav a span {
    font-size: 15.5px !important;
    line-height: 1.1 !important;
  }

  .sidebar-nav a small,
  .clean-sidebar-nav a small {
    font-size: 11.5px !important;
    line-height: 1.18 !important;
    margin-top: 3px !important;
  }

  .monday-main,
  .crm-main {
    width: 100% !important;
  }

  .auth-shell {
    width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .auth-card {
    box-shadow: none !important;
  }

  body.auth-body {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

body.auth-body {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.auth-shell,
.auth-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Mobile recovery and restrained visual system v8
   Fixes the broken phone nav, removes the loud purple theme,
   and makes dashboard tables usable on small screens.
   ========================================================= */
:root {
  --app-bg: #f4f6f8;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-ink: #111827;
  --app-muted: #5b6573;
  --app-line: #d7dde6;
  --app-line-strong: #b8c2d1;
  --app-blue: #1d4ed8;
  --app-blue-dark: #173f9f;
  --app-blue-soft: #eaf2ff;
  --app-red: #c81e3a;
  --app-red-soft: #fff1f3;
  --app-green: #08795f;
  --app-green-soft: #e8f8f2;
  --app-amber: #9a650d;
  --app-amber-soft: #fff7e6;
  --app-radius: 8px;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 28px rgba(16, 24, 40, .06);
  --app-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 14px 34px rgba(16, 24, 40, .10);
}

html,
body,
.monday-app,
.auth-body {
  background: var(--app-bg) !important;
  color: var(--app-ink) !important;
  letter-spacing: 0 !important;
}

* {
  box-sizing: border-box;
}

.monday-layout,
.monday-layout.crm-shell {
  display: grid !important;
  grid-template-columns: 286px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100vh !important;
  background: var(--app-bg) !important;
}

.monday-sidebar,
.crm-sidebar {
  width: 286px !important;
  min-width: 0 !important;
  padding: 24px 18px !important;
  background: #fff !important;
  border-right: 1px solid var(--app-line) !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
}

.monday-main,
.crm-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 34px clamp(24px, 3vw, 52px) 56px !important;
  background: transparent !important;
}

.sidebar-brand {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 0 0 20px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--app-line) !important;
  text-align: left !important;
}

.sidebar-brand > div {
  min-width: 0 !important;
  text-align: left !important;
}

.sidebar-brand img,
.sidebar-logo-img,
.auth-brand img,
.brand-kicker img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .08) !important;
  filter: none !important;
}

.sidebar-brand strong {
  display: block !important;
  color: var(--app-ink) !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.sidebar-brand span,
.sidebar-brand small {
  color: var(--app-muted) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.monday-sidebar > .workspace-card,
.monday-sidebar > .compact-workspace {
  display: none !important;
}

.sidebar-nav,
.clean-sidebar-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  align-content: start !important;
}

.sidebar-nav a,
.clean-sidebar-nav a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 11px !important;
  row-gap: 2px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: auto !important;
  padding: 9px 11px !important;
  border: 1px solid transparent !important;
  border-radius: var(--app-radius) !important;
  background: transparent !important;
  color: var(--app-ink) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
  text-decoration: none !important;
  isolation: auto !important;
}

.sidebar-nav a::after,
.clean-sidebar-nav a::after {
  display: none !important;
  content: none !important;
}

.sidebar-nav a::before,
.clean-sidebar-nav a::before {
  content: "" !important;
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: center !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  border: 1px solid #cfe0ff !important;
  background-color: var(--app-blue-soft) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 19px 19px !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.sidebar-nav a[href="/dashboard"]::before,
.clean-sidebar-nav a[href="/dashboard"]::before,
.sidebar-nav a[href="/history"]::before,
.clean-sidebar-nav a[href="/history"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/"]::before,
.clean-sidebar-nav a[href="/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/settings/templates"]::before,
.clean-sidebar-nav a[href="/settings/templates"]::before,
.sidebar-nav a[href="/templates"]::before,
.clean-sidebar-nav a[href="/templates"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/settings"]::before,
.clean-sidebar-nav a[href="/settings"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a[href="/admin/companies"]::before,
.clean-sidebar-nav a[href="/admin/companies"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M9 17h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--app-ink) !important;
  font-size: 14.5px !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.sidebar-nav a small,
.clean-sidebar-nav a small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--app-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

.sidebar-nav a:hover,
.clean-sidebar-nav a:hover {
  transform: none !important;
  background: var(--app-surface-soft) !important;
  border-color: var(--app-line) !important;
  box-shadow: none !important;
}

.sidebar-nav a.active,
.clean-sidebar-nav a.active,
.sidebar-nav a[aria-current="page"],
.clean-sidebar-nav a[aria-current="page"] {
  background: var(--app-blue-soft) !important;
  border-color: #bad1ff !important;
  box-shadow: none !important;
  color: var(--app-blue-dark) !important;
}

.sidebar-nav a.active span,
.clean-sidebar-nav a.active span,
.sidebar-nav a.active small,
.clean-sidebar-nav a.active small {
  color: var(--app-blue-dark) !important;
  opacity: 1 !important;
}

.sidebar-nav a.active::before,
.clean-sidebar-nav a.active::before {
  background-color: #fff !important;
  border-color: #a8c3ff !important;
}

.sidebar-logout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 22px 0 0 !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-muted) !important;
  font-weight: 780 !important;
  box-shadow: none !important;
}

.monday-header,
.clean-page-header,
.cleaner-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 22px !important;
  margin-bottom: 24px !important;
}

.monday-kicker,
.eyebrow {
  color: var(--app-blue) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

.monday-header h1,
.auth-heading h1,
.sign-hero-card h1 {
  color: var(--app-ink) !important;
  font-size: clamp(34px, 3.1vw, 52px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.monday-header p,
.board-head p,
.field-note,
.auth-heading p,
.sign-hero-card p {
  color: var(--app-muted) !important;
}

.monday-board-shell,
.card,
.success-panel,
.monday-stat,
.settings-card,
.settings-action-card,
.guide-card,
.review-warning-card,
.auth-card,
.sign-hero-card {
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow) !important;
}

.monday-board-shell,
.card,
.success-panel,
.auth-card {
  padding: clamp(18px, 2.1vw, 28px) !important;
}

.monday-board-shell:hover,
.settings-action-card:hover,
.monday-stat:hover,
.guide-card:hover {
  border-color: var(--app-line-strong) !important;
  box-shadow: var(--app-shadow-hover) !important;
}

.board-head {
  gap: 16px !important;
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--app-line) !important;
}

.board-head h2,
.work-group-title strong,
.settings-group h2 {
  color: var(--app-ink) !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.monday-primary,
.primary-btn,
.primary-row-action,
button.monday-primary {
  min-height: 46px !important;
  border: 1px solid var(--app-blue-dark) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

.monday-primary:hover,
.primary-btn:hover,
.primary-row-action:hover,
button.monday-primary:hover {
  background: var(--app-blue-dark) !important;
  border-color: var(--app-blue-dark) !important;
  box-shadow: var(--app-shadow-hover) !important;
}

.monday-secondary,
.secondary-btn,
.small-btn,
button.monday-secondary {
  min-height: 44px !important;
  border: 1px solid var(--app-line-strong) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  box-shadow: none !important;
  font-weight: 780 !important;
}

.monday-secondary:hover,
.secondary-btn:hover,
.small-btn:hover,
button.monday-secondary:hover {
  border-color: var(--app-blue) !important;
  background: var(--app-blue-soft) !important;
  color: var(--app-blue-dark) !important;
  box-shadow: none !important;
}

a:hover,
button:hover,
[role="button"]:hover,
.sidebar-nav a:hover,
.clean-sidebar-nav a:hover,
.auth-tab:hover,
.signature-tab:hover {
  transform: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 0 !important;
  border-color: var(--app-blue) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .18) !important;
}

.platform-input,
.text-input,
.platform-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  min-height: 46px !important;
  border: 1px solid var(--app-line-strong) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  box-shadow: none !important;
}

.platform-input:focus,
.text-input:focus,
.platform-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--app-blue) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .16) !important;
}

.create-group,
.work-group {
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.work-group-title {
  display: grid !important;
  grid-template-columns: 10px minmax(0, max-content) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 18px 22px !important;
  background: var(--app-surface-soft) !important;
  border-bottom: 1px solid var(--app-line) !important;
}

.group-dot {
  width: 5px !important;
  min-width: 5px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: var(--app-blue) !important;
  box-shadow: none !important;
}

.group-upload .group-dot,
.step-upload span {
  background: var(--app-blue) !important;
  box-shadow: none !important;
}

.group-verify .group-dot,
.step-verify span {
  background: var(--app-red) !important;
  box-shadow: none !important;
}

.group-send .group-dot,
.step-send span {
  background: var(--app-amber) !important;
  box-shadow: none !important;
}

.work-group-title em {
  color: var(--app-muted) !important;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.create-grid {
  gap: 16px !important;
  padding: 22px !important;
}

.field-group {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.field-group label {
  color: var(--app-ink) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 820 !important;
}

.file-tile,
.upload-box {
  border: 1px dashed var(--app-line-strong) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-surface-soft) !important;
  box-shadow: none !important;
}

.file-tile:hover,
.upload-box:hover {
  border-color: var(--app-blue) !important;
  box-shadow: none !important;
  transform: none !important;
}

input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--app-line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--app-ink);
  font-weight: 750;
}

.flow-strip {
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.flow-step {
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow) !important;
}

.platform-action-bar,
.template-upload-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding: 18px 0 0 !important;
}

.platform-action-bar span,
.template-upload-actions span {
  color: var(--app-muted) !important;
  line-height: 1.45 !important;
}

.monday-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.monday-tabs a {
  min-height: 38px !important;
  padding: 9px 13px !important;
  border: 1px solid transparent !important;
  border-radius: var(--app-radius) !important;
  color: var(--app-muted) !important;
  font-weight: 760 !important;
  text-decoration: none !important;
}

.monday-tabs a.active {
  background: var(--app-blue) !important;
  border-color: var(--app-blue) !important;
  color: #fff !important;
}

.board-chip {
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.chip-signed,
.chip-done,
.chip-cloud {
  background: var(--app-green-soft) !important;
  color: var(--app-green) !important;
  border-color: #b8e5d8 !important;
}

.chip-pending {
  background: var(--app-amber-soft) !important;
  color: var(--app-amber) !important;
  border-color: #efd398 !important;
}

.chip-issue,
.chip-expired {
  background: var(--app-red-soft) !important;
  color: var(--app-red) !important;
  border-color: #f2bdc6 !important;
}

.work-table.clean-actions-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.clean-actions-table th,
.clean-actions-table td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  padding: 12px 10px !important;
}

.clean-actions-table .customer-col {
  width: 19% !important;
}

.clean-actions-table .next-action-col {
  width: 16% !important;
}

.clean-actions-table .next-action-stack {
  min-width: 0 !important;
}

.clean-actions-table .primary-row-action {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.quote-placement-shell {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 18px !important;
}

.quote-placement-controls {
  position: sticky !important;
  top: 22px !important;
  align-self: start !important;
  overflow: hidden !important;
}

.qp-tool-buttons,
.qp-save-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.qp-tool-buttons button,
.qp-save-form button {
  width: 100% !important;
  min-width: 0 !important;
}

.qp-page-pill {
  width: 100% !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-surface-soft) !important;
}

.quote-canvas-card {
  overflow: hidden !important;
}

.quote-canvas-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--app-line) !important;
}

.quote-canvas-wrap {
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

#pdfCanvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.signature-tab.active,
.auth-tab.is-active {
  background: var(--app-blue) !important;
  color: #fff !important;
}

@media (min-width: 1500px) {
  .monday-layout,
  .monday-layout.crm-shell {
    grid-template-columns: 296px minmax(0, 1fr) !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    width: 296px !important;
  }
}

@media (max-width: 1100px) {
  .quote-placement-shell {
    grid-template-columns: 1fr !important;
  }

  .quote-placement-controls {
    position: static !important;
  }
}

@media (max-width: 900px) {
  .monday-layout,
  .monday-layout.crm-shell {
    display: block !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--app-line) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .monday-main,
  .crm-main {
    width: 100% !important;
    padding: 24px 16px 44px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    min-height: 56px !important;
    padding: 9px 10px !important;
  }

  .monday-header,
  .clean-page-header,
  .cleaner-header,
  .board-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 34px !important;
  }

  .monday-header .monday-primary,
  .monday-header .monday-secondary,
  .board-cleanup,
  .board-cleanup button {
    width: 100% !important;
  }

  .monday-stats {
    grid-template-columns: 1fr !important;
  }

  .monday-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 680px) {
  .monday-sidebar,
  .crm-sidebar {
    padding: 16px 12px !important;
  }

  .sidebar-brand {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
  }

  .sidebar-brand img,
  .sidebar-logo-img {
    width: 48px !important;
    height: 48px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .sidebar-nav a::before,
  .clean-sidebar-nav a::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 7px !important;
    background-size: 17px 17px !important;
  }

  .sidebar-nav a span,
  .clean-sidebar-nav a span {
    font-size: 14.5px !important;
  }

  .sidebar-nav a small,
  .clean-sidebar-nav a small {
    font-size: 11px !important;
  }

  .sidebar-logout {
    min-height: 44px !important;
    margin-top: 14px !important;
  }

  .monday-main,
  .crm-main {
    padding: 22px 12px 38px !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 31px !important;
  }

  .monday-board-shell,
  .card,
  .success-panel,
  .auth-card {
    padding: 16px !important;
    border-radius: 8px !important;
  }

  .flow-strip,
  .create-grid,
  .review-grid,
  .settings-card-grid,
  .detail-fields,
  .summary-board {
    grid-template-columns: 1fr !important;
  }

  .work-group-title {
    grid-template-columns: 8px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  .work-group-title em {
    grid-column: 2 !important;
    font-size: 13.5px !important;
  }

  .create-grid {
    padding: 16px !important;
  }

  .platform-action-bar,
  .sticky-action,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .platform-action-bar .monday-primary,
  .platform-action-bar button,
  .sticky-action button,
  .form-actions button,
  .monday-primary,
  .monday-secondary,
  .primary-btn,
  .secondary-btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  .platform-action-bar span,
  .sticky-action span,
  .form-actions span {
    text-align: center !important;
  }

  .monday-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  .monday-tabs a {
    text-align: center !important;
    white-space: nowrap !important;
  }

.work-table-wrap:has(.clean-actions-table) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

  .clean-actions-table,
  .clean-actions-table thead,
  .clean-actions-table tbody,
  .clean-actions-table tr,
  .clean-actions-table th,
  .clean-actions-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .clean-actions-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .clean-actions-table thead {
    display: none !important;
  }

  .clean-actions-table tbody {
    display: grid !important;
    gap: 12px !important;
  }

  .clean-actions-table tbody tr {
    display: grid !important;
    gap: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--app-shadow) !important;
  }

  .clean-actions-table td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 9px 0 !important;
    border-top: 1px solid #edf0f4 !important;
    color: var(--app-ink) !important;
    word-break: break-word !important;
  }

  .clean-actions-table td:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .clean-actions-table td::before {
    color: var(--app-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  .clean-actions-table td:nth-child(1)::before { content: "Customer"; }
  .clean-actions-table td:nth-child(2)::before { content: "Status"; }
  .clean-actions-table td:nth-child(3)::before { content: "Email"; }
  .clean-actions-table td:nth-child(4)::before { content: "Sender"; }
  .clean-actions-table td:nth-child(5)::before { content: "Email sent"; }
  .clean-actions-table td:nth-child(6)::before { content: "Viewed"; }
  .clean-actions-table td:nth-child(7)::before { content: "Created"; }
  .clean-actions-table td:nth-child(8)::before { content: "Files"; }
  .clean-actions-table td:nth-child(9)::before { content: "Next"; }
  .clean-actions-table td:nth-child(10)::before { content: "Next"; }

  .clean-actions-table .next-action-stack {
    width: 100% !important;
  }

  .signed-time-cell {
    display: grid !important;
  }

  .signed-time-mobile {
    display: none !important;
  }

  .quote-placement-controls,
  .quote-canvas-card {
    padding: 16px !important;
  }

  .quote-canvas-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .monday-main,
  .crm-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .monday-tabs {
    grid-template-columns: 1fr 1fr !important;
  }

  .clean-actions-table td {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }
}

/* Final high-specificity cleanup for older purple submit/icon rules. */
a.monday-primary,
button.monday-primary,
button[type="submit"].monday-primary,
.platform-action-bar button.monday-primary,
.qp-tool-buttons button.monday-primary,
.qp-save-form button.monday-primary,
.monday-header a.monday-primary,
.review-head-actions .monday-primary,
.detail-actions .monday-primary {
  border-color: var(--app-blue-dark) !important;
  background: var(--app-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

a.monday-primary:hover,
button.monday-primary:hover,
button[type="submit"].monday-primary:hover,
.platform-action-bar button.monday-primary:hover,
.qp-tool-buttons button.monday-primary:hover,
.qp-save-form button.monday-primary:hover,
.monday-header a.monday-primary:hover,
.review-head-actions .monday-primary:hover,
.detail-actions .monday-primary:hover {
  border-color: var(--app-blue-dark) !important;
  background: var(--app-blue-dark) !important;
  box-shadow: var(--app-shadow-hover) !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span,
.sidebar-nav a small,
.clean-sidebar-nav a small {
  width: 100% !important;
  justify-self: stretch !important;
  text-align: left !important;
}

.sidebar-nav a.active[href="/dashboard"]::before,
.clean-sidebar-nav a.active[href="/dashboard"]::before,
.sidebar-nav a.active[href="/history"]::before,
.clean-sidebar-nav a.active[href="/history"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/"]::before,
.clean-sidebar-nav a.active[href="/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/settings/templates"]::before,
.clean-sidebar-nav a.active[href="/settings/templates"]::before,
.sidebar-nav a.active[href="/templates"]::before,
.clean-sidebar-nav a.active[href="/templates"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/settings"]::before,
.clean-sidebar-nav a.active[href="/settings"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M18 16h4'/%3E%3C/svg%3E") !important;
}

.sidebar-nav a.active[href="/admin/companies"]::before,
.clean-sidebar-nav a.active[href="/admin/companies"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M9 17h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   Soft workspace visual system v9
   Moves the app closer to the provided reference: centered
   desktop shell, top pill navigation, calmer cards, and
   responsive spacing that holds on phones and large monitors.
   ========================================================= */
:root {
  --app-bg: #eceaf8;
  --app-bg-2: #f7fbff;
  --app-surface: #ffffff;
  --app-surface-soft: #f8f9ff;
  --app-ink: #17162d;
  --app-muted: #666a7b;
  --app-line: #e2e4ef;
  --app-line-strong: #c9cede;
  --app-blue: #665af4;
  --app-blue-dark: #4636c9;
  --app-blue-soft: #f1efff;
  --app-green: #0f9f83;
  --app-green-soft: #e9fbf6;
  --app-amber: #956316;
  --app-amber-soft: #fff5dc;
  --app-red: #c43b56;
  --app-red-soft: #fff0f4;
  --app-cyan: #5bc5d8;
  --app-radius: 8px;
  --app-shadow: 0 14px 48px rgba(68, 59, 133, .10);
  --app-shadow-hover: 0 18px 56px rgba(68, 59, 133, .16);
}

html,
body {
  min-height: 100%;
}

html,
body,
.monday-app,
.auth-body {
  background:
    linear-gradient(135deg, rgba(231, 226, 248, .96) 0%, rgba(247, 249, 255, .98) 44%, rgba(228, 244, 249, .98) 100%) !important;
  color: var(--app-ink) !important;
  letter-spacing: 0 !important;
}

body.monday-app,
body.auth-body {
  padding: clamp(18px, 3vw, 48px) !important;
}

.monday-layout,
.monday-layout.crm-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(100%, 1620px) !important;
  min-height: min(980px, calc(100vh - clamp(36px, 6vw, 96px))) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 28px 90px rgba(79, 70, 129, .16), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  backdrop-filter: blur(14px) !important;
}

.monday-sidebar,
.crm-sidebar {
  display: grid !important;
  grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-self: start !important;
  gap: clamp(12px, 2vw, 26px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 22px clamp(22px, 3vw, 42px) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.sidebar-brand {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sidebar-brand img,
.sidebar-logo-img,
.auth-brand img,
.brand-kicker img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid var(--app-line) !important;
  background: #fff !important;
  object-fit: contain !important;
  box-shadow: 0 10px 22px rgba(62, 58, 112, .10) !important;
  filter: none !important;
}

.sidebar-brand strong {
  overflow: hidden !important;
  color: var(--app-ink) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sidebar-brand span,
.sidebar-brand small {
  display: block !important;
  overflow: hidden !important;
  color: var(--app-muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-role-pill {
  display: inline-flex !important;
  width: max-content !important;
  margin-top: 5px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #fff7e5 !important;
  color: #7a5012 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.monday-sidebar > .workspace-card,
.monday-sidebar > .compact-workspace,
.crm-sidebar > .workspace-card,
.crm-sidebar > .compact-workspace {
  display: none !important;
}

.sidebar-nav,
.clean-sidebar-nav {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.sidebar-nav a,
.clean-sidebar-nav a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 18px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: var(--app-muted) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .82) !important;
  text-decoration: none !important;
  transform: translateY(0) !important;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease !important;
}

.sidebar-nav a::before,
.clean-sidebar-nav a::before,
.sidebar-nav a::after,
.clean-sidebar-nav a::after {
  display: none !important;
  content: none !important;
}

.sidebar-nav a span,
.clean-sidebar-nav a span {
  display: block !important;
  width: auto !important;
  max-width: 170px !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sidebar-nav a small,
.clean-sidebar-nav a small {
  display: none !important;
}

.sidebar-nav a:hover,
.clean-sidebar-nav a:hover {
  transform: translateY(-1px) !important;
  border-color: #d5d1fa !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  box-shadow: 0 9px 20px rgba(80, 72, 134, .08) !important;
}

.sidebar-nav a.active,
.clean-sidebar-nav a.active,
.sidebar-nav a[aria-current="page"],
.clean-sidebar-nav a[aria-current="page"] {
  border-color: #bdb6fb !important;
  background: linear-gradient(180deg, #fff 0%, #f4f1ff 100%) !important;
  color: var(--app-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(102, 90, 244, .10), 0 10px 24px rgba(102, 90, 244, .10) !important;
}

.sidebar-logout {
  grid-column: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--app-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.sidebar-logout:hover {
  border-color: #d5d1fa !important;
  color: var(--app-ink) !important;
  box-shadow: 0 9px 20px rgba(80, 72, 134, .08) !important;
}

.monday-main,
.crm-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: clamp(22px, 2.6vw, 40px) clamp(22px, 3vw, 44px) clamp(28px, 3.4vw, 52px) !important;
  background: transparent !important;
}

.monday-header,
.clean-page-header,
.cleaner-header,
.crm-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 18px !important;
}

.monday-header > div,
.clean-page-header > div,
.cleaner-header > div,
.crm-header > div {
  min-width: 0 !important;
}

.monday-kicker,
.eyebrow {
  margin: 0 0 8px !important;
  color: var(--app-blue) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.monday-header h1,
.auth-heading h1,
.sign-hero-card h1 {
  margin: 0 !important;
  color: var(--app-ink) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.monday-header p:not(.monday-kicker),
.auth-heading p,
.sign-hero-card p,
.board-head p,
.work-group-title em,
.field-note,
.muted-table-text {
  color: var(--app-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.monday-header p:not(.monday-kicker) {
  max-width: 760px !important;
  margin: 10px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.monday-primary,
.primary-btn,
button.monday-primary,
button[type="submit"].monday-primary,
.platform-action-bar button.monday-primary,
.qp-tool-buttons button.monday-primary,
.qp-save-form button.monday-primary,
.monday-header a.monday-primary,
.review-head-actions .monday-primary,
.detail-actions .monday-primary,
a.primary-row-action,
.primary-row-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7360f2 0%, #5bbfd4 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(102, 90, 244, .18) !important;
  transform: translateY(0) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.monday-primary:hover,
.primary-btn:hover,
button.monday-primary:hover,
button[type="submit"].monday-primary:hover,
.platform-action-bar button.monday-primary:hover,
.qp-tool-buttons button.monday-primary:hover,
.qp-save-form button.monday-primary:hover,
.monday-header a.monday-primary:hover,
.review-head-actions .monday-primary:hover,
.detail-actions .monday-primary:hover,
a.primary-row-action:hover,
.primary-row-action:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.04) brightness(1.01) !important;
  box-shadow: 0 16px 32px rgba(102, 90, 244, .24) !important;
}

.monday-secondary,
.secondary-btn,
button.monday-secondary,
a.monday-secondary,
.review-head-actions .monday-secondary,
.detail-actions .monday-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.monday-secondary:hover,
.secondary-btn:hover,
button.monday-secondary:hover,
a.monday-secondary:hover {
  border-color: #d5d1fa !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(80, 72, 134, .08) !important;
}

.monday-board-shell,
.card,
.success-panel,
.auth-card,
.settings-action-card,
.settings-card,
.guide-card,
.role-guide-grid article,
.monday-stat,
.file-tile,
.field-group,
.review-warning-card,
.summary-board > div,
.review-summary > div,
.readiness-item,
.notice {
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 32px rgba(74, 68, 122, .07) !important;
}

.monday-board-shell,
.card,
.success-panel,
.auth-card {
  padding: clamp(18px, 2vw, 28px) !important;
}

.monday-board-shell:hover,
.card:hover,
.settings-action-card:hover,
.monday-stat:hover {
  box-shadow: 0 16px 40px rgba(74, 68, 122, .10) !important;
}

.monday-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

.monday-stat {
  min-height: 112px !important;
  padding: 18px !important;
}

.monday-stat span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--app-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.monday-stat strong {
  display: block !important;
  margin-top: 18px !important;
  color: var(--app-ink) !important;
  font-size: clamp(28px, 2.4vw, 40px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.stat-blue { background: linear-gradient(180deg, #fff 0%, #f5f3ff 100%) !important; }
.stat-yellow { background: linear-gradient(180deg, #fff 0%, #fff7e6 100%) !important; }
.stat-green { background: linear-gradient(180deg, #fff 0%, #ecfbf7 100%) !important; }

.flow-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

.flow-step {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-height: 92px !important;
  padding: 17px 18px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 32px rgba(74, 68, 122, .07) !important;
}

.flow-step span {
  grid-row: 1 / span 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7360f2, #5bbfd4) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 22px rgba(102, 90, 244, .18) !important;
}

.flow-step strong {
  color: var(--app-ink) !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.flow-step small {
  color: var(--app-muted) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.create-board-form,
.review-form,
.settings-center-grid,
.profile-layout,
.company-brand-layout {
  display: grid !important;
  gap: 16px !important;
}

.work-group,
.create-group {
  overflow: hidden !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: none !important;
}

.work-group-title {
  display: grid !important;
  grid-template-columns: 5px minmax(180px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: linear-gradient(180deg, #fbfbff 0%, #f8f9ff 100%) !important;
}

.group-dot {
  display: block !important;
  width: 5px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7360f2, #5bbfd4) !important;
}

.work-group-title strong {
  color: var(--app-ink) !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

.work-group-title em {
  min-width: 0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-style: normal !important;
}

.create-grid,
.review-grid,
.detail-fields,
.summary-board,
.settings-card-grid,
.readiness-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.create-grid {
  padding: 18px !important;
}

.field-group,
.file-tile {
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
}

.field-group label,
.file-tile b {
  color: var(--app-ink) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

.file-tile span,
.field-note {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

input,
textarea,
select,
.platform-input,
.text-input,
.monday-search input,
.copy-link-row input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border: 1px solid var(--app-line-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  box-shadow: inset 0 1px 0 rgba(17, 24, 39, .02) !important;
}

input:focus,
textarea:focus,
select:focus,
.platform-input:focus,
.text-input:focus,
.monday-search input:focus {
  outline: 3px solid rgba(102, 90, 244, .16) !important;
  border-color: #978df8 !important;
}

input[type="file"] {
  min-height: 44px !important;
  padding: 9px !important;
  border-style: solid !important;
}

.platform-action-bar,
.sticky-action,
.form-actions,
.template-upload-actions,
.template-manager-actions,
.upload-template-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--app-line) !important;
}

.platform-action-bar span,
.sticky-action span,
.form-actions span {
  color: var(--app-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}

.board-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
}

.board-head h2,
.settings-group h2,
.quote-placement-controls h2 {
  margin: 0 !important;
  color: var(--app-ink) !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

.board-head p,
.quote-placement-controls p {
  margin: 7px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.board-cleanup {
  display: grid !important;
  justify-items: end !important;
  gap: 8px !important;
  min-width: max-content !important;
}

.board-cleanup span {
  color: var(--app-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.monday-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
}

.monday-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 4px !important;
  overflow-x: auto !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: #f7f6ff !important;
}

.monday-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: var(--app-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.monday-tabs a.active,
.monday-tabs a:hover {
  background: #fff !important;
  color: var(--app-ink) !important;
  box-shadow: 0 8px 18px rgba(80, 72, 134, .08) !important;
}

.monday-search {
  width: 100% !important;
}

.monday-search input {
  min-height: 44px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
}

.work-table-wrap {
  overflow-x: auto !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.work-table {
  width: 100% !important;
  min-width: 980px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.work-table.clean-actions-table {
  min-width: 1240px !important;
  table-layout: fixed !important;
}

.clean-actions-table th:nth-child(1),
.clean-actions-table td:nth-child(1) { width: 220px !important; }
.clean-actions-table th:nth-child(2),
.clean-actions-table td:nth-child(2) { width: 110px !important; }
.clean-actions-table th:nth-child(3),
.clean-actions-table td:nth-child(3) { width: 150px !important; }
.clean-actions-table th:nth-child(4),
.clean-actions-table td:nth-child(4) { width: 150px !important; }
.clean-actions-table th:nth-child(5),
.clean-actions-table td:nth-child(5) { width: 110px !important; }
.clean-actions-table th:nth-child(6),
.clean-actions-table td:nth-child(6) { width: 150px !important; }
.clean-actions-table th:nth-child(7),
.clean-actions-table td:nth-child(7) { width: 160px !important; }
.clean-actions-table th:nth-child(8),
.clean-actions-table td:nth-child(8) { width: 90px !important; }
.clean-actions-table th:nth-child(9),
.clean-actions-table td:nth-child(9) { width: 210px !important; }

@media (min-width: 761px) {
  .work-table.clean-actions-table {
    min-width: 1130px !important;
  }

  .clean-actions-table th:nth-child(2),
  .clean-actions-table td:nth-child(2) { width: 100px !important; }
  .clean-actions-table th:nth-child(3),
  .clean-actions-table td:nth-child(3) { width: 185px !important; }
  .clean-actions-table th:nth-child(5),
  .clean-actions-table td:nth-child(5) { width: 105px !important; }
  .clean-actions-table th:nth-child(7),
  .clean-actions-table td:nth-child(7) { width: 150px !important; }
  .clean-actions-table th:nth-child(9),
  .clean-actions-table td:nth-child(9) { width: 220px !important; }

  .clean-actions-table th:nth-child(4),
  .clean-actions-table td:nth-child(4),
  .clean-actions-table th:nth-child(8),
  .clean-actions-table td:nth-child(8) {
    display: none !important;
  }
}

.work-table th {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: #f7f8fd !important;
  color: var(--app-muted) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.work-table td {
  padding: 16px !important;
  border-bottom: 1px solid var(--app-line) !important;
  color: var(--app-ink) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

.work-table tbody tr {
  background: #fff !important;
  transition: background-color .16s ease !important;
}

.work-table tbody tr:hover {
  background: #fbfbff !important;
}

.customer-cell strong {
  display: block !important;
  color: var(--app-ink) !important;
  font-weight: 900 !important;
}

.customer-cell span,
.work-table small {
  color: var(--app-muted) !important;
}

.board-chip,
.chip-pending,
.chip-signed,
.chip-expired,
.chip-issue,
.chip-done,
.chip-cloud,
.chip-muted,
.flow-pill,
.email-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.chip-pending { background: var(--app-amber-soft) !important; color: var(--app-amber) !important; }
.chip-signed,
.chip-done { background: var(--app-green-soft) !important; color: var(--app-green) !important; }
.chip-expired,
.chip-issue { background: var(--app-red-soft) !important; color: var(--app-red) !important; }
.chip-cloud,
.flow-pill { background: var(--app-blue-soft) !important; color: var(--app-blue-dark) !important; }
.chip-muted { background: #f1f3f7 !important; color: var(--app-muted) !important; }

.next-action-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.next-action-stack form {
  margin: 0 !important;
}

.clean-actions-table .primary-row-action,
.clean-actions-table button.primary-row-action {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.row-more {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

.row-more summary,
.quiet-next-action {
  color: var(--app-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.row-more summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  cursor: pointer !important;
  list-style: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.row-more summary::-webkit-details-marker {
  display: none !important;
}

.row-more summary::marker {
  content: "" !important;
  font-size: 0 !important;
}

.row-more summary::before,
.row-more summary::after {
  display: none !important;
  content: none !important;
}

.row-more-menu {
  position: absolute !important;
  z-index: 30 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 220px !important;
  padding: 8px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow) !important;
}

.review-layout,
.quote-placement-shell,
.detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.quote-placement-shell {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
}

.review-preview-card,
.quote-placement-controls {
  position: sticky !important;
  top: 18px !important;
}

.quote-canvas-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--app-line) !important;
}

.quote-canvas-wrap {
  max-width: 100% !important;
  overflow: auto !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
}

.qp-tool-buttons,
.qp-save-form {
  display: grid !important;
  gap: 10px !important;
}

.qp-page-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin: 12px 0 !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: var(--app-surface-soft) !important;
  color: var(--app-muted) !important;
  font-weight: 800 !important;
}

.settings-center-grid {
  grid-template-columns: 1fr !important;
}

.settings-group {
  display: grid !important;
  gap: 12px !important;
}

.settings-action-card {
  min-height: 150px !important;
  padding: 18px !important;
  text-decoration: none !important;
}

.settings-action-card b {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #7360f2, #5bbfd4) !important;
}

.settings-action-card strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--app-ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.settings-action-card span {
  color: var(--app-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

.luxury-signature-copy,
.luxury-signature-copy strong,
.luxury-signature-copy b {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.luxury-signature-copy strong,
.luxury-signature-copy b {
  display: block !important;
}

.readiness-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.readiness-item {
  padding: 15px !important;
}

.readiness-item.ready {
  border-color: #c8f0e5 !important;
  background: #f3fffb !important;
}

.readiness-item.warn {
  border-color: #f4dfb3 !important;
  background: #fffaf0 !important;
}

.notice-stack {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
}

.notice {
  padding: 13px 15px !important;
  color: var(--app-ink) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.notice-error { border-color: #ffd0d9 !important; background: #fff3f6 !important; color: #9d1d39 !important; }
.notice-success { border-color: #c8f0e5 !important; background: #f1fff9 !important; color: #08795f !important; }

.admin-mode-banner,
.test-mode-banner,
.platform-switcher-bar {
  margin: 0 0 16px !important;
  border: 1px solid #d9d5ff !important;
  border-radius: var(--app-radius) !important;
  background: #f7f5ff !important;
  color: var(--app-ink) !important;
  box-shadow: none !important;
}

.auth-shell,
.app-shell.sign-shell {
  width: min(100%, 1180px) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 4vw, 44px) !important;
}

.auth-card {
  width: min(100%, 560px) !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
}

.auth-brand {
  align-items: center !important;
  gap: 12px !important;
}

.auth-tabs,
.signature-tabs {
  display: flex !important;
  gap: 5px !important;
  padding: 4px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: #f7f6ff !important;
}

.auth-tab,
.signature-tab {
  flex: 1 1 0 !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--app-muted) !important;
  font-weight: 850 !important;
}

.auth-tab.is-active,
.signature-tab.active {
  background: #fff !important;
  color: var(--app-ink) !important;
  box-shadow: 0 8px 18px rgba(80, 72, 134, .08) !important;
}

.sign-hero-card {
  border: 1px solid var(--app-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--app-shadow) !important;
}

.sign-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.pdf-frame {
  width: 100% !important;
  min-height: 720px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
}

.signature-pad,
.typed-signature-preview {
  border: 1px solid var(--app-line-strong) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
}

@media (min-width: 1180px) {
  .monday-board-shell:has(.clean-actions-table) {
    padding: 22px !important;
  }

  .create-shell {
    padding: 22px !important;
  }
}

@media (max-width: 1120px) {
  body.monday-app,
  body.auth-body {
    padding: 14px !important;
  }

  .monday-layout,
  .monday-layout.crm-shell {
    min-height: calc(100vh - 28px) !important;
    border-radius: 18px !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .sidebar-brand {
    grid-column: 1 !important;
    order: 1 !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    grid-column: 1 / -1 !important;
    order: 2 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    flex: 0 0 auto !important;
  }

  .sidebar-logout {
    grid-column: 2 !important;
    order: 3 !important;
  }

  .monday-main,
  .crm-main {
    padding: 22px 16px 34px !important;
  }

  .review-layout,
  .quote-placement-shell,
  .detail-layout,
  .sign-layout {
    grid-template-columns: 1fr !important;
  }

  .review-preview-card,
  .quote-placement-controls {
    position: static !important;
  }

  .readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.monday-app,
  body.auth-body {
    padding: 0 !important;
  }

  .monday-layout,
  .monday-layout.crm-shell {
    width: 100% !important;
    min-height: 100vh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .monday-sidebar,
  .crm-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 15px 14px !important;
    border-bottom: 1px solid var(--app-line) !important;
  }

  .sidebar-brand {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    order: 1 !important;
  }

  .sidebar-brand img,
  .sidebar-logo-img,
  .auth-brand img,
  .brand-kicker img {
    width: 42px !important;
    height: 42px !important;
  }

  .sidebar-nav,
  .clean-sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    order: 2 !important;
  }

  .sidebar-nav a,
  .clean-sidebar-nav a {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
  }

  .sidebar-nav a span,
  .clean-sidebar-nav a span {
    max-width: 100% !important;
    font-size: 12.5px !important;
  }

  .sidebar-logout {
    grid-column: 1 !important;
    order: 3 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .monday-main,
  .crm-main {
    padding: 20px 14px 34px !important;
  }

  .monday-header,
  .clean-page-header,
  .cleaner-header,
  .crm-header,
  .board-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 34px !important;
  }

  .monday-header p:not(.monday-kicker) {
    font-size: 15px !important;
  }

  .monday-header .monday-primary,
  .monday-header .monday-secondary,
  .review-head-actions,
  .review-head-actions > *,
  .board-cleanup,
  .board-cleanup button,
  .platform-action-bar > *,
  .sticky-action > *,
  .form-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  .monday-stats,
  .flow-strip,
  .create-grid,
  .review-grid,
  .detail-fields,
  .summary-board,
  .settings-card-grid,
  .readiness-grid {
    grid-template-columns: 1fr !important;
  }

  .flow-step {
    min-height: 78px !important;
  }

  .work-group-title {
    grid-template-columns: 5px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .work-group-title em {
    grid-column: 2 !important;
  }

  .work-group-title strong {
    font-size: 21px !important;
  }

  .monday-controls {
    grid-template-columns: 1fr !important;
  }

  .monday-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .monday-tabs a {
    min-width: 0 !important;
    padding: 0 8px !important;
  }

  .monday-board-shell,
  .card,
  .success-panel,
  .auth-card {
    padding: 16px !important;
  }

  .platform-action-bar,
  .sticky-action,
  .form-actions,
  .template-upload-actions,
  .template-manager-actions,
  .upload-template-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .monday-primary,
  .primary-btn,
  .monday-secondary,
  .secondary-btn,
  button.monday-primary,
  button.monday-secondary {
    width: 100% !important;
  }

  .work-table.clean-actions-table {
    min-width: 0 !important;
  }

  .clean-actions-table tbody tr {
    box-shadow: 0 12px 26px rgba(74, 68, 122, .07) !important;
  }

  .quote-canvas-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .auth-shell,
  .app-shell.sign-shell {
    padding: 14px !important;
  }

  .sign-hero-card {
    display: grid !important;
    gap: 12px !important;
  }

  .pdf-frame {
    min-height: 560px !important;
  }
}

@media (max-width: 420px) {
  .sidebar-nav,
  .clean-sidebar-nav,
  .monday-tabs {
    grid-template-columns: 1fr !important;
  }

  .monday-header h1,
  .auth-heading h1,
  .sign-hero-card h1 {
    font-size: 31px !important;
  }

  .monday-main,
  .crm-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================================
   Costco platform visual system v10
   Screenshot-matched desktop rail, top utility bar, mobile
   header/bottom nav, red actions, and focused page layouts.
   ========================================================= */
:root {
  --costco-red: #e60023;
  --costco-red-dark: #c9001f;
  --costco-blue: #005daa;
  --costco-navy: #07122f;
  --costco-text: #151b38;
  --costco-muted: #5b6685;
  --costco-line: #dfe5f0;
  --costco-line-soft: #edf1f7;
  --costco-page: #fbfcff;
  --costco-card: #ffffff;
  --costco-green: #0aa968;
  --costco-orange: #f47b20;
  --costco-purple: #6254ff;
  --costco-shadow: 0 14px 36px rgba(15, 23, 42, .06);
  --costco-shadow-soft: 0 8px 20px rgba(15, 23, 42, .045);
}

body.monday-app {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: var(--costco-page) !important;
  color: var(--costco-text) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.costco-platform-shell {
  display: grid !important;
  grid-template-columns: 264px minmax(0, 1fr) !important;
  grid-template-rows: 80px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--costco-page) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.costco-platform-shell .monday-sidebar {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 264px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 26px 14px 20px !important;
  overflow: hidden !important;
  border-right: 1px solid var(--costco-line) !important;
  border-bottom: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.costco-platform-shell .monday-main {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 28px 28px 40px !important;
  background: var(--costco-page) !important;
}

.costco-topbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 720px) auto auto !important;
  align-items: center !important;
  gap: 28px !important;
  height: 80px !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid var(--costco-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  z-index: 20 !important;
}

.costco-mobile-topbar,
.mobile-bottom-nav {
  display: none !important;
}

.costco-wordmark {
  display: inline-grid !important;
  color: var(--costco-red) !important;
  font-size: 34px !important;
  line-height: .78 !important;
  font-weight: 1000 !important;
  letter-spacing: -.08em !important;
  text-transform: uppercase !important;
  transform: skew(-8deg) !important;
}

.costco-wordmark small {
  display: block !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
  border-top: 4px solid var(--costco-blue) !important;
  color: var(--costco-blue) !important;
  font-size: 13px !important;
  line-height: .75 !important;
  font-weight: 1000 !important;
  letter-spacing: -.04em !important;
}

.costco-platform-shell .sidebar-brand {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 26px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 14px 24px !important;
  border-bottom: 1px solid var(--costco-line) !important;
  text-align: left !important;
}

.costco-platform-shell .sidebar-brand img,
.costco-platform-shell .sidebar-logo-img {
  width: 132px !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.costco-platform-shell .sidebar-brand strong {
  display: block !important;
  margin: 0 0 8px !important;
  overflow: visible !important;
  color: var(--costco-navy) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  white-space: normal !important;
}

.costco-platform-shell .sidebar-brand span:not(.costco-wordmark) {
  color: var(--costco-muted) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.costco-platform-shell .admin-role-pill {
  display: none !important;
}

.costco-platform-shell .sidebar-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.costco-platform-shell .sidebar-nav a {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 14px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--costco-text) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .sidebar-logout::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;
  -webkit-mask: center / contain no-repeat !important;
  mask: center / contain no-repeat !important;
}

.costco-platform-shell .sidebar-nav a[href="/dashboard"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .sidebar-nav a[href="/"]::before,
.costco-platform-shell .sidebar-nav a[href*="create"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .sidebar-nav a[href*="templates"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v6h5'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 17h4'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v6h5'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 17h4'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .sidebar-nav a[href="/settings"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.06.06a2.1 2.1 0 1 1-2.97 2.97l-.06-.06A1.8 1.8 0 0 0 14.8 19.6a1.8 1.8 0 0 0-1.08 1.65V21.4a2.1 2.1 0 1 1-4.2 0v-.1A1.8 1.8 0 0 0 8.4 19.6a1.8 1.8 0 0 0-1.98.36l-.06.06a2.1 2.1 0 1 1-2.97-2.97l.06-.06A1.8 1.8 0 0 0 3.8 15a1.8 1.8 0 0 0-1.65-1.08H2a2.1 2.1 0 1 1 0-4.2h.1A1.8 1.8 0 0 0 3.8 8.6a1.8 1.8 0 0 0-.36-1.98l-.06-.06A2.1 2.1 0 1 1 6.35 3.6l.06.06A1.8 1.8 0 0 0 8.4 4a1.8 1.8 0 0 0 1.08-1.65V2.2a2.1 2.1 0 1 1 4.2 0v.1A1.8 1.8 0 0 0 14.8 4a1.8 1.8 0 0 0 1.98-.36l.06-.06a2.1 2.1 0 1 1 2.97 2.97l-.06.06A1.8 1.8 0 0 0 19.4 8.6c.72.27 1.2.95 1.2 1.72v.1a2.1 2.1 0 1 1 0 4.2h-.1A1.8 1.8 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.06.06a2.1 2.1 0 1 1-2.97 2.97l-.06-.06A1.8 1.8 0 0 0 14.8 19.6a1.8 1.8 0 0 0-1.08 1.65V21.4a2.1 2.1 0 1 1-4.2 0v-.1A1.8 1.8 0 0 0 8.4 19.6a1.8 1.8 0 0 0-1.98.36l-.06.06a2.1 2.1 0 1 1-2.97-2.97l.06-.06A1.8 1.8 0 0 0 3.8 15a1.8 1.8 0 0 0-1.65-1.08H2a2.1 2.1 0 1 1 0-4.2h.1A1.8 1.8 0 0 0 3.8 8.6a1.8 1.8 0 0 0-.36-1.98l-.06-.06A2.1 2.1 0 1 1 6.35 3.6l.06.06A1.8 1.8 0 0 0 8.4 4a1.8 1.8 0 0 0 1.08-1.65V2.2a2.1 2.1 0 1 1 4.2 0v.1A1.8 1.8 0 0 0 14.8 4a1.8 1.8 0 0 0 1.98-.36l.06-.06a2.1 2.1 0 1 1 2.97 2.97l-.06.06A1.8 1.8 0 0 0 19.4 8.6c.72.27 1.2.95 1.2 1.72v.1a2.1 2.1 0 1 1 0 4.2h-.1A1.8 1.8 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .sidebar-nav a span {
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-align: left !important;
}

.costco-platform-shell .sidebar-nav a small {
  display: none !important;
}

.costco-platform-shell .sidebar-nav a.active,
.costco-platform-shell .sidebar-nav a:hover {
  border-color: #ffe1e5 !important;
  background: linear-gradient(90deg, rgba(230, 0, 35, .12), rgba(230, 0, 35, .035)) !important;
  color: var(--costco-red) !important;
  box-shadow: inset 4px 0 0 var(--costco-red) !important;
  transform: none !important;
}

.costco-platform-shell .sidebar-logout {
  order: 20 !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: auto 0 22px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--costco-text) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.costco-platform-shell .sidebar-logout::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.82 1c-.5 1-1.53 1.5-2.42 2.2-.57.45-.5.8-.5 1.8'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.82 1c-.5 1-1.53 1.5-2.42 2.2-.57.45-.5.8-.5 1.8'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .sidebar-logout::after,
.costco-platform-shell .workspace-card::after,
.settings-action-card::after {
  content: "" !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  justify-self: end !important;
}

.costco-platform-shell .workspace-card {
  order: 30 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 16px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 4px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--costco-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workspace-avatar {
  grid-row: 1 / span 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #f0f1f5 !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

.costco-platform-shell .workspace-card strong {
  grid-column: 2 !important;
  color: var(--costco-navy) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.costco-platform-shell .workspace-card small {
  grid-column: 2 !important;
  overflow: hidden !important;
  color: var(--costco-muted) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.global-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.global-search span,
.monday-search::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  z-index: 2 !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--costco-navy) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.global-search input,
.monday-search input {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px 0 52px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.global-search input::placeholder,
.monday-search input::placeholder {
  color: #7a84a3 !important;
}

.system-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 204px !important;
  height: 48px !important;
  padding: 0 18px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.system-status-pill span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #00bf63 !important;
}

.topbar-icon-nav,
.mobile-top-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 26px !important;
}

.chrome-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--costco-navy) !important;
}

.chrome-icon::before,
.mobile-menu-button::before,
.bottom-icon,
.settings-action-card b::after,
.monday-stat::before,
.work-group-title::before,
.monday-empty::before {
  content: "" !important;
  display: block !important;
  background: currentColor !important;
  -webkit-mask: center / contain no-repeat !important;
  mask: center / contain no-repeat !important;
}

.chrome-icon::before {
  width: 28px !important;
  height: 28px !important;
}

.chrome-bell::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") !important;
}

.chrome-help::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.82 1c-.5 1-1.53 1.5-2.42 2.2-.57.45-.5.8-.5 1.8'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.82 1c-.5 1-1.53 1.5-2.42 2.2-.57.45-.5.8-.5 1.8'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
}

.chrome-user::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E") !important;
}

.has-dot::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--costco-red) !important;
}

.costco-platform-shell .admin-mode-banner,
.costco-platform-shell .test-mode-banner {
  display: none !important;
}

.costco-platform-shell .monday-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 24px !important;
}

.costco-platform-shell .monday-kicker {
  display: none !important;
}

.costco-platform-shell .monday-header h1 {
  margin: 0 !important;
  color: var(--costco-navy) !important;
  font-size: 42px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}

.costco-platform-shell .monday-header p:not(.monday-kicker) {
  max-width: 680px !important;
  margin: 12px 0 0 !important;
  color: var(--costco-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

.costco-platform-shell .monday-primary,
.costco-platform-shell .primary-btn,
.costco-platform-shell button.monday-primary,
.costco-platform-shell button[type="submit"].monday-primary,
.costco-platform-shell .platform-action-bar button.monday-primary,
.costco-platform-shell .monday-header a.monday-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--costco-red), #f0082d) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  box-shadow: 0 14px 28px rgba(230, 0, 35, .18) !important;
}

.costco-platform-shell .monday-primary:hover,
.costco-platform-shell button.monday-primary:hover {
  background: linear-gradient(135deg, var(--costco-red-dark), var(--costco-red)) !important;
  box-shadow: 0 18px 34px rgba(230, 0, 35, .24) !important;
  transform: translateY(-1px) !important;
}

.costco-platform-shell .monday-secondary,
.costco-platform-shell button.monday-secondary,
.costco-platform-shell a.monday-secondary,
.costco-platform-shell .board-cleanup button {
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.costco-platform-shell .monday-header a.monday-primary::after,
.costco-platform-shell .platform-action-bar button.monday-primary::after {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.page-dashboard .monday-header .monday-primary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .notice-stack {
  margin: 0 0 18px !important;
}

.costco-platform-shell .monday-board-shell,
.costco-platform-shell .work-group,
.costco-platform-shell .monday-stat,
.costco-platform-shell .settings-action-card,
.costco-platform-shell .readiness-item,
.costco-platform-shell .file-tile,
.costco-platform-shell .field-group,
.costco-platform-shell .summary-board > div,
.costco-platform-shell .review-summary > div {
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--costco-shadow-soft) !important;
}

.costco-platform-shell .flow-strip {
  display: none !important;
}

.costco-platform-shell .create-shell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.costco-platform-shell .create-board-form {
  display: grid !important;
  gap: 10px !important;
}

.costco-platform-shell .work-group {
  overflow: hidden !important;
  padding: 0 !important;
}

.costco-platform-shell .work-group-title {
  display: grid !important;
  grid-template-columns: 70px 34px max-content minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 18px !important;
  min-height: 88px !important;
  padding: 18px 24px 6px !important;
  border: 0 !important;
  background: transparent !important;
}

.costco-platform-shell .work-group-title::before {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  color: var(--step-color, var(--costco-red)) !important;
  background-color: currentColor !important;
  box-shadow: 0 0 0 10px var(--step-soft, rgba(230, 0, 35, .08)) !important;
  justify-self: center !important;
}

.group-upload { --step-color: var(--costco-red); --step-soft: rgba(230, 0, 35, .08); }
.group-verify { --step-color: #0f85d9; --step-soft: rgba(15, 133, 217, .10); }
.group-send { --step-color: #0abf63; --step-soft: rgba(10, 191, 99, .11); }

.group-upload .work-group-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m8 8 4-4 4 4'/%3E%3Cpath d='M20 16.5A4.5 4.5 0 0 0 15.5 12h-1.1A6 6 0 1 0 4 17'/%3E%3Cpath d='M8 20h8M12 16v8'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m8 8 4-4 4 4'/%3E%3Cpath d='M20 16.5A4.5 4.5 0 0 0 15.5 12h-1.1A6 6 0 1 0 4 17'/%3E%3Cpath d='M8 20h8M12 16v8'/%3E%3C/svg%3E") !important;
}

.group-verify .work-group-title::before,
.template-stats .stat-yellow::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
}

.group-send .work-group-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .group-dot {
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--step-color, var(--costco-red)) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.group-upload .group-dot::before { content: "1" !important; }
.group-verify .group-dot::before { content: "2" !important; }
.group-send .group-dot::before { content: "3" !important; }

.costco-platform-shell .work-group-title strong {
  grid-column: 3 !important;
  color: var(--costco-navy) !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.costco-platform-shell .work-group-title em {
  grid-column: 4 !important;
  margin-left: 14px !important;
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

.costco-platform-shell .create-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  padding: 0 96px 16px !important;
}

.costco-platform-shell .group-send .create-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
}

.costco-platform-shell .group-send .wide-field {
  grid-column: 1 !important;
}

.costco-platform-shell .file-tile,
.costco-platform-shell .field-group {
  gap: 9px !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}

.costco-platform-shell .file-tile {
  cursor: pointer !important;
}

.costco-platform-shell .file-tile b,
.costco-platform-shell .field-group label {
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.costco-platform-shell .file-tile span,
.costco-platform-shell .field-note {
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.costco-platform-shell input,
.costco-platform-shell textarea,
.costco-platform-shell select,
.costco-platform-shell .platform-input,
.costco-platform-shell .text-input {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #d7deea !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.costco-platform-shell input[type="file"] {
  height: 100px !important;
  min-height: 100px !important;
  padding: 18px !important;
  border: 1px dashed rgba(230, 0, 35, .35) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(230, 0, 35, .05), rgba(255,255,255,.82)) !important;
  color: var(--costco-muted) !important;
  cursor: pointer !important;
}

.costco-platform-shell input[type="file"]::file-selector-button {
  height: 38px !important;
  margin-right: 16px !important;
  padding: 0 18px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--costco-red) !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.costco-platform-shell .file-tile input[type="file"] {
  width: 100% !important;
}

.costco-platform-shell .file-tile.has-file {
  border-color: rgba(10, 191, 99, .45) !important;
  background: linear-gradient(135deg, #ffffff, rgba(10, 191, 99, .045)) !important;
}

.costco-platform-shell .file-tile.is-dragging {
  border-color: rgba(230, 0, 35, .65) !important;
  background: linear-gradient(135deg, rgba(230, 0, 35, .08), #ffffff) !important;
}

.costco-platform-shell .selected-file-name {
  display: block !important;
  min-height: 20px !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  color: var(--costco-navy) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.costco-platform-shell .file-tile.has-file .selected-file-name::before {
  content: "Selected: " !important;
  color: var(--costco-green) !important;
}

.costco-platform-shell .file-tile.has-file .file-drop-help {
  color: var(--costco-green) !important;
}

.costco-platform-shell .monday-primary:disabled {
  opacity: .72 !important;
  cursor: wait !important;
  transform: none !important;
}

.costco-platform-shell .platform-action-bar {
  display: grid !important;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--costco-shadow-soft) !important;
}

.costco-platform-shell .platform-action-bar span {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.costco-platform-shell .platform-action-bar span::before {
  content: "" !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 12px #fff !important;
}

.costco-platform-shell .monday-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin: 0 0 18px !important;
}

.costco-platform-shell .monday-stat {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  min-height: 124px !important;
  padding: 22px !important;
  overflow: hidden !important;
}

.costco-platform-shell .monday-stat::before {
  grid-row: 1 / span 2 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  color: var(--stat-color, var(--costco-purple)) !important;
  background-color: currentColor !important;
  box-shadow: 0 0 0 12px var(--stat-soft, rgba(98, 84, 255, .10)) !important;
}

.costco-platform-shell .stat-blue { --stat-color: var(--costco-purple); --stat-soft: rgba(98,84,255,.11); background: linear-gradient(135deg, #fff, #f7f5ff) !important; }
.costco-platform-shell .stat-yellow { --stat-color: var(--costco-orange); --stat-soft: rgba(244,123,32,.12); background: linear-gradient(135deg, #fff, #fff7ec) !important; }
.costco-platform-shell .stat-green { --stat-color: var(--costco-green); --stat-soft: rgba(10,169,104,.13); background: linear-gradient(135deg, #fff, #effdf8) !important; }

.costco-platform-shell .stat-blue::before,
.template-stats .stat-blue::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .stat-yellow::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .stat-green::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .monday-stat span {
  grid-column: 2 !important;
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .monday-stat strong {
  grid-column: 2 !important;
  margin: 6px 0 0 !important;
  color: var(--costco-navy) !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

.costco-platform-shell .monday-stat .small-stat {
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

.costco-platform-shell .board-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 22px !important;
}

.costco-platform-shell .board-head h2,
.costco-platform-shell .settings-group h2 {
  color: var(--costco-navy) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.costco-platform-shell .board-head p,
.costco-platform-shell .settings-group p {
  color: var(--costco-muted) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.costco-platform-shell .monday-board-shell {
  padding: 24px !important;
}

.costco-platform-shell .board-cleanup {
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
}

.costco-platform-shell .board-cleanup span {
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.costco-platform-shell .monday-controls {
  display: grid !important;
  grid-template-columns: auto minmax(280px, 460px) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 20px !important;
}

.costco-platform-shell .monday-tabs {
  display: inline-flex !important;
  gap: 0 !important;
  width: auto !important;
  padding: 2px !important;
  overflow: hidden !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 999px !important;
  background: #f7f8fc !important;
}

.costco-platform-shell .monday-tabs a {
  min-width: 76px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-right: 1px solid #e8edf6 !important;
  border-radius: 999px !important;
  color: var(--costco-text) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}

.costco-platform-shell .monday-tabs a:last-child {
  border-right: 0 !important;
}

.costco-platform-shell .monday-tabs a.active {
  border: 1px solid var(--costco-red) !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  box-shadow: none !important;
}

.costco-platform-shell .monday-search {
  position: relative !important;
}

.costco-platform-shell .monday-search input {
  border-radius: 8px !important;
}

.costco-platform-shell .work-table-wrap {
  overflow: auto !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.costco-platform-shell .work-table {
  min-width: 1030px !important;
  border-collapse: collapse !important;
}

.costco-platform-shell .clean-actions-table {
  min-width: 1030px !important;
  table-layout: fixed !important;
}

.costco-platform-shell .clean-actions-table th:nth-child(4),
.costco-platform-shell .clean-actions-table td:nth-child(4),
.costco-platform-shell .clean-actions-table th:nth-child(8),
.costco-platform-shell .clean-actions-table td:nth-child(8) {
  display: none !important;
}

.costco-platform-shell .work-table th {
  padding: 13px 14px !important;
  border: 1px solid var(--costco-line) !important;
  background: #f8f9fd !important;
  color: #515d7a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.costco-platform-shell .work-table td {
  padding: 14px !important;
  border: 1px solid var(--costco-line) !important;
  color: var(--costco-navy) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
}

.costco-platform-shell .customer-cell strong {
  color: var(--costco-navy) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
}

.costco-platform-shell .customer-cell span,
.costco-platform-shell .work-table small {
  color: var(--costco-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.costco-platform-shell .board-chip {
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .chip-issue,
.costco-platform-shell .chip-expired {
  background: #ffe9ed !important;
  color: var(--costco-red) !important;
}

.costco-platform-shell .chip-pending {
  background: #fff3e3 !important;
  color: #bd5b00 !important;
}

.costco-platform-shell .chip-signed,
.costco-platform-shell .chip-done {
  background: #e8f8f1 !important;
  color: #07895a !important;
}

.costco-platform-shell .chip-cloud {
  background: #f1edff !important;
  color: #4f35ee !important;
}

.costco-platform-shell .chip-muted {
  background: #f1f3f7 !important;
  color: #667085 !important;
}

.costco-platform-shell .next-action-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

.costco-platform-shell .primary-row-action,
.costco-platform-shell button.primary-row-action {
  width: 100% !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid #1f5eff !important;
  border-radius: 6px !important;
  background: #1154ee !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.costco-platform-shell .next-action-stack .primary-row-action:not(.view-action) {
  background: #fff !important;
  color: #1154ee !important;
}

.costco-platform-shell .row-more summary {
  width: 100% !important;
  min-height: 28px !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .row-more summary::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  right: 10px !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  transform: none !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4-14 14H4v-4Z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4-14 14H4v-4Z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.costco-platform-shell .row-more-menu {
  min-width: 230px !important;
  border-radius: 8px !important;
}

.costco-platform-shell .settings-subnav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 0 20px !important;
}

.costco-platform-shell .settings-subnav a {
  min-width: 88px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--costco-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .settings-subnav a.active,
.costco-platform-shell .settings-subnav a:hover {
  border-color: var(--costco-red) !important;
  color: var(--costco-red) !important;
  background: #fff !important;
}

.costco-platform-shell .settings-center-grid {
  display: grid !important;
  gap: 24px !important;
}

.costco-platform-shell .settings-group {
  display: grid !important;
  gap: 12px !important;
}

.costco-platform-shell .settings-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.costco-platform-shell .settings-action-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 108px !important;
  padding: 22px 24px !important;
  color: var(--costco-navy) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.costco-platform-shell .settings-action-card b {
  position: relative !important;
  display: inline-flex !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 10px !important;
  background: var(--icon-soft, #f2edff) !important;
}

.costco-platform-shell .settings-action-card b::after {
  position: absolute !important;
  inset: 16px !important;
  width: auto !important;
  height: auto !important;
  color: var(--icon-color, #6941ff) !important;
  background: currentColor !important;
}

.settings-action-card.company { --icon-color: #6f45ff; --icon-soft: #f3efff; }
.settings-action-card.users { --icon-color: #0f85d9; --icon-soft: #edf7ff; }
.settings-action-card.profile { --icon-color: #0ba766; --icon-soft: #effbf6; }
.settings-action-card.email { --icon-color: #6f45ff; --icon-soft: #f3efff; }
.settings-action-card.templates { --icon-color: #ff4d00; --icon-soft: #fff1e8; }
.settings-action-card.storage { --icon-color: #0f85d9; --icon-soft: #edf7ff; }

.costco-platform-shell .settings-action-card strong {
  grid-column: 2 !important;
  color: var(--costco-navy) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.costco-platform-shell .settings-action-card span {
  grid-column: 2 !important;
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

.costco-platform-shell .settings-action-card::after {
  grid-column: 3 !important;
  color: var(--costco-navy) !important;
}

.costco-platform-shell .setup-checklist-v2 {
  margin-top: 26px !important;
}

.costco-platform-shell .readiness-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px 22px !important;
}

.costco-platform-shell .readiness-item {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 62px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}

.costco-platform-shell .readiness-item::before {
  content: "" !important;
  grid-row: 1 / span 2 !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
}

.costco-platform-shell .readiness-item.ready {
  border-color: #bcefd9 !important;
  background: #f2fdf8 !important;
  color: #0a9a5c !important;
}

.costco-platform-shell .readiness-item.warn {
  border-color: #ffe0a8 !important;
  background: #fffbf2 !important;
  color: #bd5b00 !important;
}

.costco-platform-shell .readiness-item strong {
  color: var(--costco-navy) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .readiness-item span {
  color: currentColor !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.costco-platform-shell .template-stats .monday-stat {
  min-height: 100px !important;
}

.template-stats .stat-green::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .monday-empty {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 44px 20px !important;
  border: 1px dashed #cfd6e3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--costco-muted) !important;
  text-align: center !important;
}

.costco-platform-shell .monday-empty::before {
  width: 28px !important;
  height: 28px !important;
  color: #697386 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v13H3V8'/%3E%3Cpath d='M1 3h22v5H1z'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v13H3V8'/%3E%3Cpath d='M1 3h22v5H1z'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") !important;
}

.costco-platform-shell .monday-empty h2 {
  color: var(--costco-navy) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

@media (max-width: 1180px) {
  .costco-platform-shell {
    grid-template-columns: 230px minmax(0, 1fr) !important;
  }

  .costco-platform-shell .monday-sidebar {
    width: 230px !important;
  }

  .costco-topbar {
    grid-template-columns: minmax(260px, 1fr) auto !important;
    gap: 16px !important;
  }

  .system-status-pill {
    display: none !important;
  }

  .costco-platform-shell .create-grid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 760px) {
  body.monday-app {
    padding: 0 !important;
    background: #fff !important;
  }

  .costco-platform-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: #fff !important;
  }

  .costco-platform-shell .monday-sidebar,
  .costco-topbar {
    display: none !important;
  }

  .costco-mobile-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 92px !important;
    padding: 22px 40px 18px !important;
    border-bottom: 1px solid var(--costco-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(12px) !important;
  }

  .mobile-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .mobile-logo-link img {
    width: 150px !important;
    max-height: 52px !important;
    object-fit: contain !important;
  }

  .mobile-logo-link .costco-wordmark {
    font-size: 38px !important;
  }

  .mobile-menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--costco-navy) !important;
    padding: 0 !important;
  }

  .mobile-menu-button::before {
    width: 32px !important;
    height: 32px !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") !important;
  }

  .mobile-top-icons {
    gap: 26px !important;
  }

  .mobile-help-link {
    display: none !important;
  }

  .costco-platform-shell .monday-main {
    display: block !important;
    width: 100% !important;
    padding: 24px 42px 116px !important;
    background: #fff !important;
  }

  .page-create .monday-main {
    padding-bottom: 36px !important;
  }

  .costco-platform-shell .monday-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    margin: 0 0 18px !important;
  }

  .page-create .monday-header,
  .page-settings .monday-header {
    grid-template-columns: 1fr !important;
  }

  .costco-platform-shell .monday-header h1 {
    font-size: 42px !important;
    letter-spacing: -.05em !important;
  }

  .costco-platform-shell .monday-header p:not(.monday-kicker) {
    font-size: 18px !important;
    line-height: 1.48 !important;
  }

  .page-create .monday-header .monday-primary,
  .page-settings .monday-header .monday-secondary {
    display: none !important;
  }

  .costco-platform-shell .monday-header .monday-primary {
    align-self: start !important;
    width: auto !important;
    min-width: 198px !important;
    min-height: 56px !important;
    font-size: 18px !important;
  }

  .costco-platform-shell .monday-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 24px !important;
  }

  .costco-platform-shell .monday-stat {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 134px !important;
    padding: 20px !important;
  }

  .costco-platform-shell .monday-stat::before {
    width: 56px !important;
    height: 56px !important;
  }

  .costco-platform-shell .monday-stat span {
    font-size: 15px !important;
  }

  .costco-platform-shell .monday-stat strong {
    font-size: 30px !important;
  }

  .costco-platform-shell .monday-board-shell {
    padding: 24px !important;
    border-radius: 10px !important;
  }

  .costco-platform-shell .board-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  .costco-platform-shell .board-head h2 {
    font-size: 26px !important;
  }

  .costco-platform-shell .board-head p {
    font-size: 16px !important;
  }

  .costco-platform-shell .board-cleanup button {
    min-height: 44px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
  }

  .costco-platform-shell .monday-controls {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .costco-platform-shell .monday-tabs {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .costco-platform-shell .monday-tabs a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
  }

  .costco-platform-shell .monday-search input {
    height: 54px !important;
    font-size: 16px !important;
  }

  .costco-platform-shell .work-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .costco-platform-shell .clean-actions-table,
  .costco-platform-shell .clean-actions-table thead,
  .costco-platform-shell .clean-actions-table tbody,
  .costco-platform-shell .clean-actions-table tr,
  .costco-platform-shell .clean-actions-table th,
  .costco-platform-shell .clean-actions-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .costco-platform-shell .clean-actions-table thead {
    display: none !important;
  }

  .costco-platform-shell .clean-actions-table tbody {
    display: grid !important;
    gap: 8px !important;
  }

  .costco-platform-shell .clean-actions-table tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1fr) minmax(120px, .9fr) 74px 64px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 78px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--costco-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .costco-platform-shell .clean-actions-table td {
    padding: 0 !important;
    border: 0 !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(1) { grid-column: 1 !important; }
  .costco-platform-shell .clean-actions-table td:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; }
  .costco-platform-shell .clean-actions-table td:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; padding-top: 28px !important; }
  .costco-platform-shell .clean-actions-table td:nth-child(5),
  .costco-platform-shell .clean-actions-table td:nth-child(6),
  .costco-platform-shell .clean-actions-table td:nth-child(8),
  .costco-platform-shell .clean-actions-table td:nth-child(9) { display: none !important; }
  .costco-platform-shell .clean-actions-table td:nth-child(7) { grid-column: 3 !important; color: var(--costco-text) !important; }
  .costco-platform-shell .clean-actions-table td:nth-child(10),
  .costco-platform-shell .clean-actions-table td:nth-child(9):last-child { grid-column: 4 / span 2 !important; }

  .costco-platform-shell .clean-actions-table .customer-cell strong {
    font-size: 15px !important;
  }

  .costco-platform-shell .clean-actions-table .customer-cell span,
  .costco-platform-shell .clean-actions-table td:nth-child(3) {
    font-size: 14px !important;
  }

  .costco-platform-shell .next-action-stack {
    display: grid !important;
    grid-template-columns: 64px 54px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .costco-platform-shell .next-action-stack form,
  .costco-platform-shell .next-action-stack > .primary-row-action:not(.view-action):not(.warning-action):not(.done-action),
  .costco-platform-shell .next-action-stack .warning-action,
  .costco-platform-shell .next-action-stack .done-action {
    display: none !important;
  }

  .costco-platform-shell .primary-row-action.view-action {
    min-height: 38px !important;
    border-color: #cfd9ff !important;
    background: #fff !important;
    color: #0f55ff !important;
    font-size: 15px !important;
  }

  .costco-platform-shell .row-more summary {
    min-height: 38px !important;
    border: 0 !important;
    padding: 0 20px 0 0 !important;
    font-size: 15px !important;
    justify-content: flex-start !important;
  }

  .costco-platform-shell .row-more-menu {
    right: 0 !important;
  }

  .costco-platform-shell .work-group {
    border-radius: 14px !important;
  }

  .costco-platform-shell .work-group-title {
    grid-template-columns: 72px 34px minmax(0, max-content) minmax(160px, 1fr) 24px !important;
    min-height: 94px !important;
    padding: 22px 20px 8px !important;
  }

  .costco-platform-shell .work-group-title::after {
    content: "" !important;
    grid-column: 5 !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 3px solid var(--costco-navy) !important;
    border-left: 3px solid var(--costco-navy) !important;
    transform: rotate(45deg) !important;
  }

  .costco-platform-shell .work-group-title strong {
    font-size: 24px !important;
  }

  .costco-platform-shell .work-group-title em {
    grid-column: 4 !important;
    margin-left: 0 !important;
    font-size: 15px !important;
  }

  .costco-platform-shell .create-grid,
  .costco-platform-shell .group-send .create-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 8px 18px 18px !important;
  }

  .costco-platform-shell .group-send .wide-field {
    grid-column: auto !important;
  }

  .costco-platform-shell .file-tile,
  .costco-platform-shell .field-group {
    padding: 16px 20px !important;
  }

  .costco-platform-shell input,
  .costco-platform-shell textarea,
  .costco-platform-shell select,
  .costco-platform-shell .platform-input,
  .costco-platform-shell .text-input {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .costco-platform-shell input[type="file"] {
    height: 108px !important;
  }

  .page-create .platform-action-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 -42px !important;
    padding: 14px 42px 18px !important;
    border: 0 !important;
    border-top: 1px solid var(--costco-line) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, .08) !important;
  }

  .page-create .platform-action-bar button {
    width: 100% !important;
    min-height: 60px !important;
    font-size: 20px !important;
  }

  .page-create .platform-action-bar span {
    justify-content: center !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  .page-create .platform-action-bar span::before {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .costco-platform-shell .settings-subnav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
    padding-bottom: 3px !important;
  }

  .costco-platform-shell .settings-subnav a {
    flex: 0 0 auto !important;
    min-width: 130px !important;
    min-height: 50px !important;
    font-size: 17px !important;
  }

  .costco-platform-shell .template-stats {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .costco-platform-shell .template-stats .monday-stat {
    min-height: 96px !important;
    border-radius: 8px !important;
  }

  .costco-platform-shell .settings-card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .costco-platform-shell .settings-action-card {
    grid-template-columns: 72px minmax(0, 1fr) 18px !important;
    min-height: 112px !important;
    padding: 18px 20px !important;
  }

  .costco-platform-shell .settings-action-card strong {
    font-size: 19px !important;
  }

  .costco-platform-shell .settings-action-card span {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .costco-platform-shell .readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
  }

  .costco-platform-shell .readiness-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 54px !important;
    padding: 12px 16px !important;
  }

  .costco-platform-shell .readiness-item::before {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
  }

  .costco-platform-shell .readiness-item strong {
    font-size: 14px !important;
  }

  .costco-platform-shell .readiness-item span {
    font-size: 14px !important;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    min-height: 86px !important;
    padding: 10px 24px max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--costco-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-bottom-nav a {
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    color: var(--costco-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  .mobile-bottom-nav a.active {
    color: var(--costco-red) !important;
  }

  .bottom-icon {
    width: 28px !important;
    height: 28px !important;
    color: currentColor !important;
  }

  .bottom-dashboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
  }

  .bottom-create {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6M9 15h6'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6M9 15h6'/%3E%3C/svg%3E") !important;
  }

  .bottom-templates {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7zM14 3v6h5M10 14h4M10 17h4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7zM14 3v6h5M10 14h4M10 17h4'/%3E%3C/svg%3E") !important;
  }

  .bottom-settings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.06.06a2.1 2.1 0 1 1-2.97 2.97l-.06-.06A1.8 1.8 0 0 0 14.8 19.6a1.8 1.8 0 0 0-1.08 1.65V21.4a2.1 2.1 0 1 1-4.2 0v-.1A1.8 1.8 0 0 0 8.4 19.6a1.8 1.8 0 0 0-1.98.36l-.06.06a2.1 2.1 0 1 1-2.97-2.97l.06-.06A1.8 1.8 0 0 0 3.8 15a1.8 1.8 0 0 0-1.65-1.08H2a2.1 2.1 0 1 1 0-4.2h.1A1.8 1.8 0 0 0 3.8 8.6a1.8 1.8 0 0 0-.36-1.98l-.06-.06A2.1 2.1 0 1 1 6.35 3.6l.06.06A1.8 1.8 0 0 0 8.4 4a1.8 1.8 0 0 0 1.08-1.65V2.2a2.1 2.1 0 1 1 4.2 0v.1A1.8 1.8 0 0 0 14.8 4a1.8 1.8 0 0 0 1.98-.36l.06-.06a2.1 2.1 0 1 1 2.97 2.97l-.06.06A1.8 1.8 0 0 0 19.4 8.6c.72.27 1.2.95 1.2 1.72v.1a2.1 2.1 0 1 1 0 4.2h-.1A1.8 1.8 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.06.06a2.1 2.1 0 1 1-2.97 2.97l-.06-.06A1.8 1.8 0 0 0 14.8 19.6a1.8 1.8 0 0 0-1.08 1.65V21.4a2.1 2.1 0 1 1-4.2 0v-.1A1.8 1.8 0 0 0 8.4 19.6a1.8 1.8 0 0 0-1.98.36l-.06.06a2.1 2.1 0 1 1-2.97-2.97l.06-.06A1.8 1.8 0 0 0 3.8 15a1.8 1.8 0 0 0-1.65-1.08H2a2.1 2.1 0 1 1 0-4.2h.1A1.8 1.8 0 0 0 3.8 8.6a1.8 1.8 0 0 0-.36-1.98l-.06-.06A2.1 2.1 0 1 1 6.35 3.6l.06.06A1.8 1.8 0 0 0 8.4 4a1.8 1.8 0 0 0 1.08-1.65V2.2a2.1 2.1 0 1 1 4.2 0v.1A1.8 1.8 0 0 0 14.8 4a1.8 1.8 0 0 0 1.98-.36l.06-.06a2.1 2.1 0 1 1 2.97 2.97l-.06.06A1.8 1.8 0 0 0 19.4 8.6c.72.27 1.2.95 1.2 1.72v.1a2.1 2.1 0 1 1 0 4.2h-.1A1.8 1.8 0 0 0 19.4 15Z'/%3E%3C/svg%3E") !important;
  }
}

@media (max-width: 560px) {
  .costco-mobile-topbar {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mobile-logo-link img {
    width: 118px !important;
  }

  .mobile-logo-link .costco-wordmark {
    font-size: 30px !important;
  }

  .mobile-top-icons {
    gap: 18px !important;
  }

  .chrome-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .costco-platform-shell .monday-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .page-create .platform-action-bar {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .costco-platform-shell .monday-header h1 {
    font-size: 36px !important;
  }

  .costco-platform-shell .monday-header p:not(.monday-kicker) {
    font-size: 16px !important;
  }

  .costco-platform-shell .monday-stats {
    gap: 10px !important;
  }

  .costco-platform-shell .monday-stat {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 104px !important;
    padding: 14px !important;
    column-gap: 10px !important;
  }

  .costco-platform-shell .monday-stat::before {
    width: 38px !important;
    height: 38px !important;
    box-shadow: 0 0 0 8px var(--stat-soft, rgba(98,84,255,.11)) !important;
  }

  .costco-platform-shell .monday-stat span {
    font-size: 12px !important;
  }

  .costco-platform-shell .monday-stat strong {
    font-size: 26px !important;
  }

  .costco-platform-shell .board-head {
    grid-template-columns: 1fr !important;
  }

  .costco-platform-shell .board-cleanup {
    justify-items: start !important;
  }

  .costco-platform-shell .clean-actions-table tr {
    grid-template-columns: minmax(112px, 1.2fr) minmax(106px, 1fr) minmax(96px, .8fr) 62px 50px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .costco-platform-shell .clean-actions-table .customer-cell strong {
    font-size: 13px !important;
  }

  .costco-platform-shell .clean-actions-table .customer-cell span,
  .costco-platform-shell .clean-actions-table td:nth-child(3),
  .costco-platform-shell .clean-actions-table td:nth-child(7) {
    font-size: 12px !important;
  }

  .costco-platform-shell .board-chip {
    font-size: 10px !important;
  }

  .costco-platform-shell .primary-row-action.view-action,
  .costco-platform-shell .row-more summary {
    min-height: 34px !important;
    font-size: 13px !important;
  }

  .costco-platform-shell .work-group-title {
    grid-template-columns: 56px 30px minmax(0, 1fr) 20px !important;
    column-gap: 10px !important;
    padding: 18px 14px 8px !important;
  }

  .costco-platform-shell .work-group-title::before {
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 0 0 8px var(--step-soft, rgba(230,0,35,.08)) !important;
  }

  .costco-platform-shell .work-group-title .group-dot {
    width: 30px !important;
    height: 30px !important;
  }

  .costco-platform-shell .work-group-title strong {
    grid-column: 3 !important;
    font-size: 20px !important;
  }

  .costco-platform-shell .work-group-title em {
    grid-column: 3 !important;
    grid-row: 2 !important;
    font-size: 13px !important;
  }

  .costco-platform-shell .work-group-title::after {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;
  }

  .costco-platform-shell .settings-subnav a {
    min-width: 112px !important;
    font-size: 15px !important;
  }

  .costco-platform-shell .settings-action-card {
    grid-template-columns: 54px minmax(0, 1fr) 16px !important;
    min-height: 96px !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .costco-platform-shell .settings-action-card b {
    width: 52px !important;
    height: 52px !important;
  }

  .costco-platform-shell .settings-action-card strong {
    font-size: 16px !important;
  }

  .costco-platform-shell .settings-action-card span {
    font-size: 14px !important;
  }

  .costco-platform-shell .readiness-grid {
    grid-template-columns: 1fr !important;
  }

  .mobile-bottom-nav {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mobile-bottom-nav a {
    font-size: 12px !important;
  }
}

/* Column-count safe dashboard table targeting for history/dashboard variants. */
@media (min-width: 761px) {
  .costco-platform-shell .clean-actions-table th:nth-child(8),
  .costco-platform-shell .clean-actions-table td:nth-child(8) {
    display: table-cell !important;
  }

  .costco-platform-shell .clean-actions-table th:nth-child(4),
  .costco-platform-shell .clean-actions-table td:nth-child(4),
  .costco-platform-shell .clean-actions-table th:nth-last-child(2),
  .costco-platform-shell .clean-actions-table td:nth-last-child(2),
  .costco-platform-shell .clean-actions-table th.signed-time-cell,
  .costco-platform-shell .clean-actions-table td.signed-time-cell {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .page-create .mobile-help-link {
    display: inline-flex !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(4),
  .costco-platform-shell .clean-actions-table td:nth-child(5),
  .costco-platform-shell .clean-actions-table td:nth-child(6),
  .costco-platform-shell .clean-actions-table td:nth-last-child(2),
  .costco-platform-shell .clean-actions-table td.signed-time-cell {
    display: none !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-last-child(3) {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .costco-platform-shell .clean-actions-table td:last-child {
    display: block !important;
    grid-column: 4 / span 2 !important;
    grid-row: 1 !important;
  }
}

/* Final screenshot-shell guardrails: stop older sidebar rules from bleeding into v10. */
.costco-platform-shell .costco-wordmark,
.costco-mobile-topbar .costco-wordmark {
  width: 132px !important;
  max-width: 132px !important;
  color: var(--costco-red) !important;
  font-size: 34px !important;
  line-height: .72 !important;
  letter-spacing: -.085em !important;
}

.costco-platform-shell .costco-wordmark small,
.costco-mobile-topbar .costco-wordmark small {
  position: relative !important;
  width: 112px !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: var(--costco-blue) !important;
  font-size: 12px !important;
  letter-spacing: -.035em !important;
}

.costco-platform-shell .costco-wordmark small::before,
.costco-platform-shell .costco-wordmark small::after,
.costco-mobile-topbar .costco-wordmark small::before,
.costco-mobile-topbar .costco-wordmark small::after {
  content: "" !important;
  display: block !important;
  height: 2px !important;
  margin-bottom: 1px !important;
  background: var(--costco-blue) !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .sidebar-logout::before {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  background-color: currentColor !important;
  background-image: none !important;
  color: inherit !important;
}

.costco-platform-shell .sidebar-nav a,
.costco-platform-shell .sidebar-logout {
  text-align: left !important;
}

.costco-platform-shell .sidebar-nav a span {
  justify-self: start !important;
}

.costco-topbar .global-search input {
  padding-left: 58px !important;
}

.costco-platform-shell .monday-search input {
  padding-left: 58px !important;
}

.costco-platform-shell .template-upload-actions span::before {
  display: none !important;
}

.costco-platform-shell .template-stats .small-stat {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.2 !important;
}

.costco-platform-shell .settings-action-card {
  grid-template-columns: 64px minmax(0, 1fr) 18px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  min-height: 108px !important;
  padding: 22px 24px !important;
}

.costco-platform-shell .settings-action-card b {
  grid-row: 1 / span 2 !important;
}

.costco-platform-shell .settings-action-card strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

.costco-platform-shell .settings-action-card span {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: 4px !important;
}

.costco-platform-shell .settings-action-card::after {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
}

.chrome-icon::before,
.mobile-menu-button::before,
.bottom-icon {
  background-color: currentColor !important;
  background-image: none !important;
}

.chrome-user::before,
.chrome-profile-drawn::before {
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: translateX(-50%) !important;
}

.chrome-user::after,
.chrome-profile-drawn::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  width: 18px !important;
  height: 11px !important;
  border: 2.2px solid currentColor !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
}

.chrome-profile-drawn::before,
.chrome-profile-drawn::after {
  display: none !important;
}

.chrome-profile-drawn svg {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 560px) {
  .costco-mobile-topbar {
    gap: 12px !important;
  }

  .costco-mobile-topbar .costco-wordmark {
    width: 116px !important;
    max-width: 116px !important;
    font-size: 32px !important;
  }

  .costco-mobile-topbar .costco-wordmark small {
    width: 98px !important;
    font-size: 11px !important;
  }

  .mobile-top-icons {
    gap: 14px !important;
  }
}

@media (max-width: 760px) {
  .page-create .costco-mobile-topbar {
    justify-content: center !important;
  }

  .page-create .mobile-menu-button {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .page-create .mobile-top-icons {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 106px !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  .page-create .mobile-top-icons .chrome-bell,
  .page-create .mobile-top-icons .chrome-help,
  .page-create .mobile-top-icons .chrome-profile-drawn {
    position: fixed !important;
    top: 33px !important;
    z-index: 120 !important;
  }

  .page-create .mobile-top-icons .chrome-bell {
    right: 118px !important;
  }

  .page-create .mobile-top-icons .chrome-help {
    right: 78px !important;
  }

  .page-create .mobile-top-icons .chrome-profile-drawn {
    right: 38px !important;
  }

  body:not(.page-create) .mobile-top-icons {
    width: 74px !important;
    height: 28px !important;
    overflow: visible !important;
  }

  body:not(.page-create) .mobile-top-icons .chrome-bell,
  body:not(.page-create) .mobile-top-icons .chrome-profile-drawn {
    position: fixed !important;
    top: 33px !important;
    z-index: 120 !important;
  }

  body:not(.page-create) .mobile-top-icons .chrome-bell {
    right: 88px !important;
  }

  body:not(.page-create) .mobile-top-icons .chrome-profile-drawn {
    right: 38px !important;
  }

  .page-dashboard .monday-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }

  .page-dashboard .monday-header h1 {
    font-size: 31px !important;
    line-height: 1.05 !important;
  }

  .page-dashboard .monday-header .monday-primary {
    width: 96px !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 13px !important;
  }

  .page-dashboard .monday-header .monday-primary::after {
    display: none !important;
  }

  .page-dashboard .monday-stats {
    width: auto !important;
    grid-template-columns: repeat(3, 124px) !important;
    gap: 6px !important;
  }

  .page-dashboard .monday-stat {
    min-width: 0 !important;
    padding: 16px 10px !important;
  }

  .page-dashboard .monday-stat::before {
    width: 38px !important;
    height: 38px !important;
  }

  .page-dashboard .monday-stat span {
    font-size: 11px !important;
  }

  .page-dashboard .monday-stat strong {
    font-size: 26px !important;
  }

  .page-templates .monday-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }

  .page-templates .monday-header h1 {
    font-size: 31px !important;
    line-height: 1.05 !important;
  }

  .page-templates .monday-header .monday-primary {
    width: 96px !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 13px !important;
  }

  .page-templates .monday-header .monday-primary::after {
    display: none !important;
  }

  .page-templates .settings-subnav {
    gap: 8px !important;
  }

  .page-templates .settings-subnav a {
    min-width: 92px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-templates .template-stats .small-stat {
    font-size: 14px !important;
  }

  .page-settings .monday-header h1 {
    font-size: 0 !important;
  }

  .page-settings .monday-header h1::after {
    content: "Settings" !important;
    display: block !important;
    font-size: 42px !important;
    line-height: 1.05 !important;
  }

  .page-settings .monday-header p:not(.monday-kicker) {
    max-width: 360px !important;
  }

  .page-settings .settings-action-card {
    padding-right: 30px !important;
  }

  .page-settings .settings-action-card::after {
    margin-right: 8px !important;
  }
}

@media (max-width: 420px) {
  .page-dashboard .monday-stats {
    grid-template-columns: repeat(3, 108px) !important;
  }

  .page-dashboard .monday-stat {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

.costco-platform-shell .sidebar-brand strong {
  white-space: nowrap !important;
  font-size: 16px !important;
}

.costco-platform-shell .file-tile input[type="file"] {
  min-height: 100px !important;
  padding: 22px 18px 44px !important;
  border: 1px dashed rgba(230, 0, 35, .36) !important;
  background:
    linear-gradient(90deg, rgba(230, 0, 35, .045), rgba(255, 255, 255, .92)) !important;
}

.costco-platform-shell .file-drop-help {
  display: block !important;
  margin: -36px 0 0 18px !important;
  color: var(--costco-muted) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  pointer-events: none !important;
}

/* Costco platform responsive hardening v12 */
.costco-platform-shell,
.costco-platform-shell * {
  min-width: 0 !important;
}

.costco-platform-shell .monday-main {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.costco-platform-shell .monday-board-shell,
.costco-platform-shell .work-group,
.costco-platform-shell .file-tile,
.costco-platform-shell .field-group,
.costco-platform-shell .settings-action-card,
.costco-platform-shell .summary-board > div,
.costco-platform-shell .detail-fields > div {
  overflow: hidden !important;
}

.costco-platform-shell .sidebar-nav,
.costco-platform-shell .clean-sidebar-nav {
  gap: 12px !important;
}

.costco-platform-shell .sidebar-nav a,
.costco-platform-shell .clean-sidebar-nav a,
.costco-platform-shell .sidebar-logout {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 14px 18px !important;
  gap: 14px !important;
  border-radius: 8px !important;
  line-height: 1.15 !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .clean-sidebar-nav a::before,
.costco-platform-shell .sidebar-logout::before {
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  margin: 0 !important;
  background-color: currentColor !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

.costco-platform-shell .sidebar-nav a span,
.costco-platform-shell .clean-sidebar-nav a span,
.costco-platform-shell .sidebar-logout {
  grid-column: 2 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.costco-platform-shell .sidebar-nav a small,
.costco-platform-shell .clean-sidebar-nav a small {
  display: none !important;
}

.costco-platform-shell .sidebar-nav a.active,
.costco-platform-shell .sidebar-nav a:hover,
.costco-platform-shell .clean-sidebar-nav a.active,
.costco-platform-shell .clean-sidebar-nav a:hover {
  transform: none !important;
}

.costco-platform-shell .work-group-title {
  grid-template-columns: 58px 34px minmax(0, max-content) minmax(190px, 1fr) !important;
  align-items: center !important;
  min-height: 100px !important;
  gap: 18px !important;
  padding: 24px 30px 12px !important;
}

.costco-platform-shell .work-group-title::before {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  margin: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 10px var(--step-soft, rgba(230, 0, 35, .08)) !important;
}

.costco-platform-shell .work-group-title .group-dot {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
}

.costco-platform-shell .work-group-title strong {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.costco-platform-shell .work-group-title em {
  max-width: 100% !important;
  line-height: 1.35 !important;
}

.costco-platform-shell .file-tile input[type="file"] {
  width: 100% !important;
  max-width: 100% !important;
  color: transparent !important;
  font-size: 0 !important;
  white-space: nowrap !important;
}

.costco-platform-shell .file-tile input[type="file"]::file-selector-button {
  min-height: 44px !important;
  margin-right: 14px !important;
  padding: 0 22px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--costco-red) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .monday-search,
.costco-platform-shell .global-search {
  position: relative !important;
}

.costco-platform-shell .monday-search::before,
.costco-topbar .global-search span {
  pointer-events: none !important;
}

.costco-platform-shell .monday-search input,
.costco-topbar .global-search input {
  width: 100% !important;
  padding-left: 52px !important;
  text-overflow: ellipsis !important;
}

.costco-platform-shell .board-chip {
  max-width: 100% !important;
  white-space: nowrap !important;
}

.costco-platform-shell .customer-cell strong,
.costco-platform-shell .customer-cell span,
.costco-platform-shell td,
.costco-platform-shell .detail-fields strong,
.costco-platform-shell .summary-board strong {
  overflow-wrap: anywhere !important;
}

.chrome-icon,
.mobile-menu-button,
.topbar-icon-nav a,
.mobile-top-icons a {
  position: relative !important;
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.chrome-icon::before,
.mobile-menu-button::before {
  width: 26px !important;
  height: 26px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.chrome-profile-drawn svg {
  width: 27px !important;
  height: 27px !important;
}

.chrome-icon.has-dot::after {
  top: 1px !important;
  right: 1px !important;
}

@media (max-width: 1100px) {
  .costco-platform-shell .monday-topbar,
  .costco-topbar {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .costco-platform-shell .monday-header {
    align-items: start !important;
  }

  .costco-platform-shell .monday-header h1 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.monday-app {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  body.page-create {
    padding-bottom: 0 !important;
  }

  .costco-mobile-topbar {
    height: 104px !important;
    min-height: 104px !important;
    padding: 18px 18px 14px !important;
    overflow: visible !important;
  }

  .costco-mobile-topbar .mobile-logo-link {
    min-width: 0 !important;
  }

  .mobile-top-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    min-width: 88px !important;
    overflow: visible !important;
  }

  .costco-platform-shell .monday-main {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .page-create .costco-platform-shell .monday-main {
    padding-bottom: 0 !important;
  }

  .costco-platform-shell .monday-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .costco-platform-shell .monday-header > div {
    min-width: 0 !important;
  }

  .costco-platform-shell .monday-header h1 {
    font-size: clamp(30px, 8.8vw, 42px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
  }

  .costco-platform-shell .monday-header p:not(.monday-kicker) {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .costco-platform-shell .monday-header .monday-primary,
  .costco-platform-shell .monday-header .monday-secondary {
    width: auto !important;
    min-width: 94px !important;
    max-width: 132px !important;
    min-height: 54px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .costco-platform-shell .monday-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .costco-platform-shell .monday-stat {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 98px !important;
    padding: 14px 10px !important;
    gap: 7px !important;
    align-items: center !important;
  }

  .costco-platform-shell .monday-stat::before {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    box-shadow: none !important;
  }

  .costco-platform-shell .monday-stat span {
    grid-column: 2 !important;
    display: block !important;
    min-height: 28px !important;
    color: var(--costco-muted) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  .costco-platform-shell .monday-stat span::before,
  .costco-platform-shell .monday-stat span::after {
    display: none !important;
    content: none !important;
  }

  .costco-platform-shell .monday-stat strong {
    grid-column: 2 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .costco-platform-shell .board-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    text-align: left !important;
  }

  .costco-platform-shell .board-cleanup {
    display: grid !important;
    justify-items: stretch !important;
    width: 100% !important;
  }

  .costco-platform-shell .monday-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 999px !important;
  }

  .costco-platform-shell .monday-tabs a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  .costco-platform-shell .work-table-wrap {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .costco-platform-shell .clean-actions-table,
  .costco-platform-shell .clean-actions-table thead,
  .costco-platform-shell .clean-actions-table tbody,
  .costco-platform-shell .clean-actions-table tr,
  .costco-platform-shell .clean-actions-table th,
  .costco-platform-shell .clean-actions-table td {
    display: block !important;
    width: 100% !important;
  }

  .costco-platform-shell .clean-actions-table {
    border: 0 !important;
    min-width: 0 !important;
  }

  .costco-platform-shell .clean-actions-table thead {
    display: none !important;
  }

  .costco-platform-shell .clean-actions-table tbody {
    display: grid !important;
    gap: 10px !important;
  }

  .costco-platform-shell .clean-actions-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "customer actions"
      "email actions"
      "status actions"
      "created actions" !important;
    gap: 6px 12px !important;
    min-height: 0 !important;
    padding: 14px 14px !important;
    border: 1px solid var(--costco-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04) !important;
  }

  .costco-platform-shell .clean-actions-table td {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--costco-text) !important;
  }

  .costco-platform-shell .clean-actions-table td::before {
    display: none !important;
    content: none !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(1) {
    grid-area: customer !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(2) {
    grid-area: status !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(3) {
    grid-area: email !important;
    padding-top: 0 !important;
    color: var(--costco-muted) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(8) {
    grid-area: created !important;
    display: block !important;
    color: var(--costco-muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .costco-platform-shell .clean-actions-table td:last-child {
    grid-area: actions !important;
    align-self: center !important;
    justify-self: end !important;
    width: auto !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(4),
  .costco-platform-shell .clean-actions-table td:nth-child(5),
  .costco-platform-shell .clean-actions-table td:nth-child(6),
  .costco-platform-shell .clean-actions-table td:nth-child(7),
  .costco-platform-shell .clean-actions-table td:nth-child(9),
  .costco-platform-shell .clean-actions-table td.signed-time-cell {
    display: none !important;
  }

  .costco-platform-shell .clean-actions-table .customer-cell strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .costco-platform-shell .clean-actions-table .customer-cell span {
    display: block !important;
    margin-top: 4px !important;
    color: var(--costco-muted) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .costco-platform-shell .board-chip {
    display: inline-flex !important;
    min-height: 24px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .costco-platform-shell .next-action-stack {
    display: grid !important;
    grid-template-columns: 62px !important;
    justify-items: stretch !important;
    gap: 7px !important;
    width: 62px !important;
  }

  .costco-platform-shell .next-action-stack form,
  .costco-platform-shell .next-action-stack > .primary-row-action:not(.view-action),
  .costco-platform-shell .next-action-stack .warning-action,
  .costco-platform-shell .next-action-stack .done-action,
  .costco-platform-shell .quiet-next-action {
    display: none !important;
  }

  .costco-platform-shell .primary-row-action.view-action,
  .costco-platform-shell .row-more summary {
    min-height: 36px !important;
    width: 62px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .costco-platform-shell .row-more summary {
    border: 0 !important;
    color: var(--costco-text) !important;
    background: transparent !important;
  }

  .costco-platform-shell .row-more summary::after {
    display: none !important;
  }

  .costco-platform-shell .work-group-title {
    grid-template-columns: 46px 30px minmax(0, 1fr) 18px !important;
    grid-template-rows: auto auto !important;
    min-height: 86px !important;
    gap: 8px 12px !important;
    padding: 18px 16px 8px !important;
  }

  .costco-platform-shell .work-group-title::before {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    box-shadow: 0 0 0 8px var(--step-soft, rgba(230, 0, 35, .08)) !important;
  }

  .costco-platform-shell .work-group-title .group-dot {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .costco-platform-shell .work-group-title strong {
    grid-column: 3 !important;
    grid-row: 1 !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .costco-platform-shell .work-group-title em {
    grid-column: 3 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .costco-platform-shell .work-group-title::after {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;
    width: 14px !important;
    height: 14px !important;
  }

  .costco-platform-shell .create-grid,
  .costco-platform-shell .group-send .create-grid {
    padding: 10px 14px 16px !important;
  }

  .costco-platform-shell .file-tile,
  .costco-platform-shell .field-group {
    padding: 14px 16px !important;
  }

  .costco-platform-shell .file-tile input[type="file"] {
    min-height: 96px !important;
    padding: 18px 14px 42px !important;
  }

  .costco-platform-shell .file-drop-help {
    margin-left: 14px !important;
  }

  .mobile-bottom-nav {
    min-height: 82px !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .08) !important;
  }

  .mobile-bottom-nav a {
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .mobile-bottom-nav a strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .bottom-icon {
    width: 25px !important;
    height: 25px !important;
  }

  .review-layout,
  .detail-grid,
  .profile-layout,
  .quote-placement-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .quote-placement-controls,
  .quote-canvas-card {
    width: 100% !important;
    overflow: hidden !important;
  }

  .qp-tool-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 430px) {
  .costco-platform-shell .monday-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .costco-platform-shell .monday-header h1 {
    font-size: 30px !important;
  }

  .costco-platform-shell .monday-header .monday-primary,
  .costco-platform-shell .monday-header .monday-secondary {
    max-width: 98px !important;
    font-size: 13px !important;
  }

  .costco-platform-shell .monday-stats {
    gap: 6px !important;
  }

  .costco-platform-shell .monday-stat {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    min-height: 88px !important;
    padding: 12px 8px !important;
  }

  .costco-platform-shell .monday-stat::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .costco-platform-shell .monday-stat strong {
    font-size: 22px !important;
  }

  .costco-platform-shell .monday-board-shell {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .costco-platform-shell .clean-actions-table tr {
    padding: 13px 12px !important;
  }

  .costco-platform-shell .clean-actions-table .customer-cell strong {
    font-size: 14px !important;
  }

  .costco-platform-shell .clean-actions-table td:nth-child(3),
  .costco-platform-shell .clean-actions-table .customer-cell span,
  .costco-platform-shell .clean-actions-table td:nth-child(8) {
    font-size: 12px !important;
  }

  .costco-platform-shell .next-action-stack,
  .costco-platform-shell .primary-row-action.view-action,
  .costco-platform-shell .row-more summary {
    width: 58px !important;
  }

  .mobile-bottom-nav {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .mobile-bottom-nav a {
    font-size: 10px !important;
  }
}

/* Costco auth page final override v14 */
body.costco-auth-page {
  min-height: 100vh !important;
  margin: 0 !important;
  color: #08142f !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(227, 24, 55, .08), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(0, 93, 171, .10), transparent 30%),
    linear-gradient(135deg, #f7f8ff 0%, #eef7ff 100%) !important;
}

.costco-auth-page .auth-shell {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 32px 18px !important;
}

.costco-auth-page .auth-card {
  width: min(100%, 560px) !important;
  padding: 32px 34px 34px !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 24px 70px rgba(8, 20, 47, .13) !important;
  backdrop-filter: blur(12px) !important;
}

.costco-auth-page .auth-brand {
  display: flex !important;
  align-items: flex-end !important;
  gap: 16px !important;
  margin-bottom: 26px !important;
}

.costco-auth-page .auth-brand strong {
  display: block !important;
  color: #08142f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  margin-bottom: 4px !important;
}

.costco-auth-page .auth-brand span:not(.costco-wordmark) {
  color: #1f4f99 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

.costco-auth-page .costco-wordmark {
  flex: 0 0 auto !important;
  font-size: 31px !important;
  line-height: .86 !important;
}

.costco-auth-page .auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 0 28px !important;
  padding: 6px !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 14px !important;
  background: #f7f9fd !important;
}

.costco-auth-page .auth-tab {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #52617a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.costco-auth-page .auth-tab.is-active {
  background: #ffffff !important;
  color: #08142f !important;
  box-shadow: 0 10px 24px rgba(8, 20, 47, .10) !important;
}

.costco-auth-page .auth-heading {
  margin-bottom: 10px !important;
}

.costco-auth-page .auth-heading h1 {
  margin: 0 !important;
  color: #08142f !important;
  font-size: 42px !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.costco-auth-page .auth-heading p,
.costco-auth-page .auth-help {
  color: #53627d !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.costco-auth-page .auth-heading p {
  margin: 4px 0 0 !important;
}

.costco-auth-page .auth-help {
  margin: 16px 0 0 !important;
}

.costco-auth-page .auth-form {
  display: grid !important;
  gap: 14px !important;
}

.costco-auth-page .field-group {
  margin-bottom: 0 !important;
  padding: 16px !important;
  border: 1px solid #dfe6f2 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

.costco-auth-page .field-group label {
  display: block !important;
  margin: 0 0 10px !important;
  color: #08142f !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.costco-auth-page .text-input {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #cdd7e8 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #08142f !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.costco-auth-page .text-input:focus {
  border-color: #005dab !important;
  box-shadow: 0 0 0 4px rgba(0, 93, 171, .14) !important;
}

.costco-auth-page .primary-btn {
  width: 100% !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #e31837 0%, #c8102e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(227, 24, 55, .23) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.costco-auth-page .primary-btn:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #f10d30 0%, #b80724 100%) !important;
  box-shadow: 0 22px 42px rgba(227, 24, 55, .30) !important;
}

.costco-auth-page .notice-stack {
  margin: 0 0 18px !important;
}

.costco-auth-page .notice {
  border-radius: 10px !important;
  font-weight: 800 !important;
}

.costco-auth-page .is-hidden {
  display: none !important;
}

@media (max-width: 620px) {
  .costco-auth-page .auth-shell {
    align-items: start !important;
    padding: 18px 12px 32px !important;
  }

  .costco-auth-page .auth-card {
    padding: 22px 20px 24px !important;
    border-radius: 16px !important;
  }

  .costco-auth-page .auth-brand {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
  }

  .costco-auth-page .costco-wordmark {
    font-size: 25px !important;
  }

  .costco-auth-page .auth-heading h1 {
    font-size: 33px !important;
  }

  .costco-auth-page .auth-tabs {
    grid-template-columns: 1fr !important;
    margin-bottom: 22px !important;
  }

  .costco-auth-page .auth-form {
    gap: 12px !important;
  }

  .costco-auth-page .field-group {
    padding: 14px !important;
  }
}

/* Costco create/sidebar true EOF override v16 */
@media (min-width: 761px) {
  .costco-platform-shell { grid-template-columns: 264px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
  .costco-platform-shell .monday-sidebar { position: sticky !important; top: 0 !important; height: 100vh !important; min-height: 100vh !important; overflow: visible !important; }
  .costco-platform-shell .monday-main { grid-column: 2 !important; grid-row: 1 !important; padding: 34px clamp(24px, 3vw, 44px) 44px !important; }
}
.costco-topbar { display: none !important; }
.costco-platform-shell .monday-sidebar { display: flex !important; flex-direction: column !important; padding: 26px 14px 18px !important; }
.costco-platform-shell .sidebar-brand .costco-wordmark, .costco-mobile-topbar .costco-wordmark { width: max-content !important; overflow: visible !important; font-size: 36px !important; line-height: .82 !important; font-weight: 1000 !important; letter-spacing: -.095em !important; }
.costco-platform-shell .sidebar-brand .costco-wordmark small, .costco-mobile-topbar .costco-wordmark small { margin-top: 5px !important; font-size: 12px !important; border-top: 3px solid var(--costco-blue) !important; box-shadow: 0 3px 0 var(--costco-blue) !important; }
.costco-platform-shell .sidebar-nav a, .costco-platform-shell .clean-sidebar-nav a { grid-template-columns: 28px minmax(0, 1fr) !important; align-items: center !important; min-height: 54px !important; padding: 0 16px !important; color: var(--costco-navy) !important; }
.costco-platform-shell .sidebar-nav a::before, .costco-platform-shell .clean-sidebar-nav a::before { background: currentColor !important; }
.costco-platform-shell .sidebar-nav a span, .costco-platform-shell .clean-sidebar-nav a span { display: flex !important; align-items: center !important; min-height: 54px !important; color: inherit !important; font-weight: 850 !important; line-height: 1 !important; }
.costco-platform-shell .sidebar-nav a.active, .costco-platform-shell .clean-sidebar-nav a.active { color: var(--costco-red) !important; border-color: rgba(230, 0, 35, .14) !important; background: linear-gradient(90deg, rgba(230, 0, 35, .115), rgba(230, 0, 35, .04)) !important; box-shadow: inset 4px 0 0 var(--costco-red) !important; }
.sidebar-notification { order: 18 !important; position: relative !important; margin: auto 0 10px !important; }
.sidebar-notification summary { position: relative !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; min-height: 50px !important; padding: 0 16px !important; border-radius: 8px !important; color: var(--costco-navy) !important; font-size: 14px !important; font-weight: 850 !important; cursor: pointer !important; list-style: none !important; }
.sidebar-notification summary::-webkit-details-marker { display: none !important; }
.sidebar-notification-icon { position: relative !important; width: 23px !important; height: 23px !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat !important; }
.sidebar-notification.has-alert summary::after { content: "" !important; position: absolute !important; top: 12px !important; left: 31px !important; width: 8px !important; height: 8px !important; border: 2px solid #fff !important; border-radius: 50% !important; background: var(--costco-red) !important; }
.sidebar-notification summary b { min-width: 24px !important; padding: 3px 7px !important; border-radius: 999px !important; background: var(--costco-red) !important; color: #fff !important; font-size: 12px !important; text-align: center !important; }
.sidebar-notification-panel { margin: 4px 4px 8px !important; padding: 10px !important; border: 1px solid var(--costco-line) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 14px 34px rgba(8, 20, 47, .10) !important; }
.sidebar-notification-panel a, .sidebar-notification-panel p { display: grid !important; gap: 4px !important; margin: 0 !important; padding: 8px !important; border-radius: 6px !important; color: var(--costco-navy) !important; font-size: 12px !important; line-height: 1.3 !important; }
.costco-platform-shell .sidebar-logout { order: 20 !important; margin: 0 0 10px !important; min-height: 50px !important; padding: 0 16px !important; color: var(--costco-navy) !important; font-size: 14px !important; font-weight: 850 !important; }
.costco-platform-shell .workspace-card, .costco-platform-shell .compact-workspace { order: 30 !important; grid-template-columns: 46px minmax(0, 1fr) 14px !important; column-gap: 12px !important; margin: 0 !important; padding: 16px 6px 0 !important; border-top: 1px solid var(--costco-line) !important; }
.page-create .monday-header, .page-create .create-shell, .page-create .platform-action-bar { max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; }
.page-create .monday-header { margin-bottom: 30px !important; }
.page-create .work-group-title { grid-template-columns: 36px minmax(0, max-content) minmax(220px, 1fr) !important; min-height: auto !important; padding: 24px 34px 18px !important; column-gap: 16px !important; }
.page-create .work-group-title::before { display: none !important; }
.page-create .work-group-title .group-dot { grid-column: 1 !important; width: 30px !important; height: 30px !important; min-width: 30px !important; }
.page-create .work-group-title strong { grid-column: 2 !important; font-size: 23px !important; }
.page-create .work-group-title em { grid-column: 3 !important; margin: 0 !important; font-size: 13px !important; }
.page-create .create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; padding: 0 34px 22px !important; }
.page-create .group-send .create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.page-create .group-send .wide-field { grid-column: 1 / span 1 !important; }
.page-create .file-tile input[type="file"] { height: auto !important; min-height: 86px !important; margin-top: 12px !important; padding: 16px !important; border-radius: 8px !important; color: transparent !important; font-size: 0 !important; background: linear-gradient(135deg, rgba(230, 0, 35, .035), #fff) !important; }
.page-create .file-tile input[type="file"]::file-selector-button { height: 42px !important; margin-right: 14px !important; padding: 0 18px !important; border-radius: 7px !important; font-size: 14px !important; }
.page-create .selected-file-name { margin: 8px 0 0 !important; }
.page-create .file-drop-help { margin: 4px 0 0 !important; }
@media (max-width: 1100px) { .page-create .work-group-title { grid-template-columns: 34px minmax(0, 1fr) !important; row-gap: 8px !important; } .page-create .work-group-title em { grid-column: 2 !important; } }
@media (max-width: 760px) { .costco-platform-shell .monday-main { padding: 24px 16px 92px !important; } .page-create .create-grid, .page-create .group-send .create-grid { grid-template-columns: 1fr !important; padding: 0 18px 18px !important; } .page-create .group-send .wide-field { grid-column: auto !important; } .page-create .platform-action-bar { grid-template-columns: 1fr !important; } }

/* Costco full-width layout repair v18 */
.costco-platform-shell .monday-main {
  width: 100% !important;
  max-width: none !important;
}

.page-create .monday-header,
.page-create .create-shell,
.page-create .platform-action-bar {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-create .monday-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

.page-create .monday-header > div {
  min-width: 0 !important;
  max-width: 820px !important;
}

.page-create .monday-header .monday-primary {
  flex: 0 0 auto !important;
}

.page-create .work-group,
.page-create .file-tile,
.page-create .field-group {
  width: 100% !important;
  max-width: none !important;
}

.page-create .create-grid,
.page-create .group-send .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-create .platform-action-bar {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
}

@media (max-width: 760px) {
  .page-create .monday-header {
    display: grid !important;
    gap: 16px !important;
  }

  .page-create .monday-header > div {
    max-width: none !important;
  }

  .page-create .create-grid,
  .page-create .group-send .create-grid {
    grid-template-columns: 1fr !important;
  }

  .page-create .platform-action-bar {
    grid-template-columns: 1fr !important;
  }
}

/* Costco create responsive repair v17 */
@media (min-width: 761px) {
  .costco-platform-shell {
    display: grid !important;
    grid-template-columns: 264px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .costco-platform-shell .monday-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 264px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    transform: none !important;
    overflow: visible !important;
  }

  .costco-platform-shell .monday-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 34px clamp(28px, 3.2vw, 52px) 44px !important;
  }

  .page-create .monday-header,
  .page-create .create-shell,
  .page-create .platform-action-bar {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

.page-create .monday-header {
  margin-bottom: 22px !important;
}

.page-create .monday-header h1 {
  font-size: clamp(38px, 3vw, 50px) !important;
  line-height: 1 !important;
}

.page-create .create-board-form {
  gap: 10px !important;
}

.page-create .work-group {
  border-radius: 8px !important;
}

.page-create .work-group-title {
  grid-template-columns: 34px minmax(0, max-content) minmax(0, 1fr) !important;
  min-height: auto !important;
  padding: 22px 32px 14px !important;
  column-gap: 14px !important;
}

.page-create .work-group-title::before {
  display: none !important;
}

.page-create .work-group-title .group-dot {
  grid-column: 1 !important;
  width: 30px !important;
  height: 30px !important;
}

.page-create .work-group-title strong {
  grid-column: 2 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.page-create .work-group-title em {
  grid-column: 3 !important;
  margin: 0 !important;
  align-self: center !important;
  font-size: 13px !important;
}

.page-create .create-grid {
  gap: 18px !important;
  padding: 0 32px 22px !important;
}

.page-create .file-tile {
  display: grid !important;
  gap: 8px !important;
  padding: 18px 20px !important;
}

.page-create .file-tile input[type="file"] {
  height: auto !important;
  min-height: 68px !important;
  margin: 8px 0 0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.page-create .file-tile input[type="file"]::file-selector-button {
  height: 40px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
}

.page-create .selected-file-name {
  margin: 2px 0 0 !important;
}

.page-create .file-drop-help {
  margin: 0 !important;
}

.page-create .platform-action-bar {
  margin-top: 8px !important;
}

.sidebar-backdrop {
  display: none !important;
}

.costco-platform-shell .sidebar-logout {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 50px !important;
  padding: 0 16px !important;
}

.costco-platform-shell .sidebar-logout::before {
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
}

.costco-platform-shell .sidebar-logout::after {
  grid-column: 3 !important;
}

.costco-platform-shell .workspace-card {
  min-height: 64px !important;
}

@media (max-width: 760px) {
  body.sidebar-drawer-open {
    overflow: hidden !important;
  }

  .costco-platform-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  .costco-platform-shell .monday-sidebar {
    position: fixed !important;
    z-index: 1000 !important;
    inset: 0 auto 0 0 !important;
    display: flex !important;
    width: min(84vw, 318px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 22px 14px 18px !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    box-shadow: 24px 0 60px rgba(8, 20, 47, .22) !important;
  }

  body.sidebar-drawer-open .costco-platform-shell .monday-sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-backdrop {
    position: fixed !important;
    z-index: 990 !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    background: rgba(8, 20, 47, .36) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }

  body.sidebar-drawer-open .sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .costco-mobile-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 72px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--costco-line) !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  .mobile-menu-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--costco-navy) !important;
  }

  .mobile-menu-button::before {
    width: 25px !important;
    height: 25px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.sidebar-drawer-open .mobile-menu-button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important;
  }

  .mobile-logo-link {
    justify-self: center !important;
    overflow: visible !important;
  }

  .costco-mobile-topbar .costco-wordmark {
    font-size: 30px !important;
  }

  .costco-mobile-topbar .costco-wordmark small {
    font-size: 10px !important;
  }

  .mobile-top-icons {
    justify-content: end !important;
    gap: 0 !important;
  }

  .costco-platform-shell .monday-main {
    width: 100% !important;
    padding: 24px 16px 100px !important;
    overflow: visible !important;
  }

  .page-create .monday-header {
    display: grid !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
  }

  .page-create .monday-header h1 {
    font-size: 38px !important;
  }

  .page-create .monday-header p {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .page-create .monday-header .monday-primary {
    width: 100% !important;
    min-height: 54px !important;
  }

  .page-create .work-group-title {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    row-gap: 6px !important;
    padding: 20px 18px 14px !important;
  }

  .page-create .work-group-title strong {
    grid-column: 2 !important;
    font-size: 22px !important;
  }

  .page-create .work-group-title em {
    grid-column: 2 !important;
    font-size: 13px !important;
  }

  .page-create .create-grid,
  .page-create .group-send .create-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 18px 18px !important;
  }

  .page-create .field-group,
  .page-create .file-tile {
    padding: 16px !important;
  }

  .page-create .platform-action-bar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .page-create .platform-action-bar .monday-primary {
    width: 100% !important;
  }

  .mobile-bottom-nav {
    display: grid !important;
  }
}

/* Costco full-width true EOF override v18 */
.costco-platform-shell .monday-main { width: 100% !important; max-width: none !important; }
.page-create .monday-header, .page-create .create-shell, .page-create .platform-action-bar { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.page-create .monday-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 28px !important; }
.page-create .monday-header > div { min-width: 0 !important; max-width: 820px !important; }
.page-create .monday-header .monday-primary { flex: 0 0 auto !important; }
.page-create .work-group, .page-create .file-tile, .page-create .field-group { width: 100% !important; max-width: none !important; }
.page-create .create-grid, .page-create .group-send .create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.page-create .platform-action-bar { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important; }
@media (min-width: 761px) { .page-create .monday-header, .page-create .create-shell, .page-create .platform-action-bar { max-width: none !important; } }
@media (max-width: 760px) { .page-create .monday-header { display: grid !important; gap: 16px !important; } .page-create .monday-header > div { max-width: none !important; } .page-create .create-grid, .page-create .group-send .create-grid { grid-template-columns: 1fr !important; } .page-create .platform-action-bar { grid-template-columns: 1fr !important; } }

/* Costco platform alignment and profile polish v19 */
.costco-platform-shell {
  grid-template-columns: 292px minmax(0, 1fr) !important;
}

.costco-platform-shell .monday-sidebar {
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 28px 18px 20px !important;
  overflow-y: auto !important;
}

.costco-platform-shell .sidebar-brand {
  margin-bottom: 22px !important;
}

.costco-platform-shell .sidebar-nav,
.costco-platform-shell .clean-sidebar-nav {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.costco-platform-shell .sidebar-secondary-nav {
  margin-top: 22px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--costco-line) !important;
}

.costco-platform-shell .sidebar-nav a,
.costco-platform-shell .clean-sidebar-nav a,
.costco-platform-shell .sidebar-notification summary {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 16px !important;
  min-height: 54px !important;
  width: 100% !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--costco-navy) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.costco-platform-shell .sidebar-nav a span,
.costco-platform-shell .clean-sidebar-nav a span,
.costco-platform-shell .sidebar-notification summary strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.costco-platform-shell .sidebar-nav a small,
.costco-platform-shell .clean-sidebar-nav a small {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin-top: -10px !important;
  overflow: hidden !important;
  color: var(--costco-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.costco-platform-shell .sidebar-nav a::before,
.costco-platform-shell .clean-sidebar-nav a::before,
.costco-platform-shell .sidebar-notification-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  background: currentColor !important;
}

.costco-platform-shell .sidebar-nav a.active,
.costco-platform-shell .clean-sidebar-nav a.active,
.costco-platform-shell .sidebar-nav a:hover,
.costco-platform-shell .clean-sidebar-nav a:hover,
.costco-platform-shell .sidebar-notification summary:hover {
  color: var(--costco-red) !important;
  border-color: rgba(230, 0, 35, .16) !important;
  background: linear-gradient(90deg, rgba(230, 0, 35, .10), rgba(230, 0, 35, .035)) !important;
  box-shadow: inset 4px 0 0 var(--costco-red) !important;
  transform: none !important;
}

.costco-platform-shell .sidebar-notification {
  order: initial !important;
  margin: 0 !important;
}

.costco-platform-shell .sidebar-notification summary {
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  list-style: none !important;
}

.costco-platform-shell .sidebar-notification summary b {
  grid-column: 3 !important;
  min-width: 22px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: var(--costco-red) !important;
  color: #fff !important;
  font-size: 11px !important;
  text-align: center !important;
}

.costco-platform-shell .sidebar-notification.has-alert summary::after {
  left: 30px !important;
  top: 14px !important;
}

.costco-platform-shell .sidebar-notification-panel {
  margin: 8px 0 0 !important;
  padding: 10px !important;
  border: 1px solid var(--costco-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 36px rgba(8, 20, 47, .10) !important;
}

.costco-platform-shell .sidebar-profile-link {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.costco-platform-shell .sidebar-profile-link::before {
  display: none !important;
}

.costco-platform-shell .workspace-avatar,
.costco-platform-shell .workspace-avatar-img {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.costco-platform-shell .workspace-avatar {
  display: grid !important;
  place-items: center !important;
  background: #eef2f8 !important;
  color: var(--costco-navy) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.costco-platform-shell .monday-main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 40px clamp(28px, 3.4vw, 64px) 64px !important;
}

.page-create .monday-header,
.page-create .notice-stack,
.page-create .create-shell,
.page-create .platform-action-bar {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-create .monday-header {
  align-items: flex-start !important;
  margin-bottom: 34px !important;
}

.page-create .create-shell {
  padding: 0 !important;
}

.page-create .work-group {
  width: 100% !important;
  max-width: none !important;
}

.page-create .work-group-title {
  grid-template-columns: 34px minmax(220px, max-content) minmax(260px, 1fr) !important;
  padding: 26px 34px 18px !important;
}

.page-create .create-grid,
.page-create .group-send .create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 0 34px 28px !important;
}

.page-create .platform-action-bar {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
  padding: 20px 28px !important;
}

.page-create .platform-action-bar .monday-primary {
  width: 100% !important;
}

.profile-layout.profile-editor-v2,
.company-brand-layout {
  align-items: start !important;
  gap: 22px !important;
}

.profile-upload-card,
.upload-inline-card {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 420px) auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px !important;
}

.profile-upload-card input[type="file"],
.upload-inline-card input[type="file"] {
  width: 100% !important;
  min-width: 0 !important;
}

.headshot-crop-card {
  display: grid !important;
  grid-template-columns: 168px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

.headshot-crop-preview {
  width: 168px !important;
  height: 168px !important;
}

@media (min-width: 761px) {
  .costco-mobile-topbar,
  .mobile-bottom-nav,
  .sidebar-backdrop {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .costco-platform-shell {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .costco-platform-shell .monday-sidebar {
    position: fixed !important;
    z-index: 1000 !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 328px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 22px 16px 20px !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
  }

  body.sidebar-drawer-open .costco-platform-shell .monday-sidebar {
    transform: translateX(0) !important;
  }

  .costco-platform-shell .sidebar-secondary-nav {
    margin-top: 14px !important;
    padding-top: 14px !important;
  }

  .costco-platform-shell .monday-main {
    padding: 24px 16px 96px !important;
  }

  .page-create .monday-header {
    display: grid !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  .page-create .monday-header h1 {
    font-size: clamp(32px, 11vw, 42px) !important;
  }

  .page-create .monday-header .monday-primary {
    width: 100% !important;
  }

  .page-create .work-group-title {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    padding: 20px 18px 14px !important;
  }

  .page-create .work-group-title strong,
  .page-create .work-group-title em {
    grid-column: 2 !important;
  }

  .page-create .create-grid,
  .page-create .group-send .create-grid {
    grid-template-columns: 1fr !important;
    padding: 0 18px 18px !important;
  }

  .page-create .platform-action-bar {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .profile-layout.profile-editor-v2,
  .company-brand-layout {
    grid-template-columns: 1fr !important;
  }

  .profile-upload-card,
  .upload-inline-card,
  .headshot-crop-card {
    grid-template-columns: 1fr !important;
  }

  .headshot-crop-preview {
    justify-self: center !important;
  }
}

/* Create Contract Webflow-style redesign v20 */
.page-create-redesign {
  margin: 0;
  min-height: 100%;
}

.page-create-redesign .contract-app {
  --app-bg: #f6f8fc;
  --card-bg: #ffffff;
  --ink: #071430;
  --muted: #5b6685;
  --soft-muted: #8b94ad;
  --line: #dfe5f0;
  --line-strong: #cfd7e6;
  --red: #ed002f;
  --red-dark: #c90026;
  --red-soft: #fff0f3;
  --blue: #168bd9;
  --green: #13ba73;
  --sidebar-width: 288px;
  --page-x: clamp(28px, 4vw, 64px);
  --page-y: clamp(28px, 3.5vw, 48px);
  --sidebar-x: 32px;
  --sidebar-y: 36px;
  --section-gap: 18px;
  --card-pad: clamp(24px, 2.4vw, 34px);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 38px rgba(7, 20, 48, 0.055);
  --shadow-button: 0 18px 38px rgba(237, 0, 47, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

.page-create-redesign .contract-app * {
  box-sizing: border-box;
}

.page-create-redesign .contract-app a {
  color: inherit;
  text-decoration: none;
}

.page-create-redesign .contract-app input,
.page-create-redesign .contract-app button {
  font: inherit;
}

.page-create-redesign .app-sidebar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  padding: var(--sidebar-y) var(--sidebar-x);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.page-create-redesign .brand-block {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.page-create-redesign .costco-wordmark {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 26px;
  line-height: 0.8;
  transform: skew(-8deg);
}

.page-create-redesign .costco-wordmark span {
  color: var(--red);
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.page-create-redesign .costco-wordmark small {
  color: #005daa;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.page-create-redesign .brand-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.page-create-redesign .brand-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.page-create-redesign .sidebar-nav,
.page-create-redesign .sidebar-bottom {
  display: grid;
  gap: 10px;
}

.page-create-redesign .sidebar-bottom {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.page-create-redesign .nav-link,
.page-create-redesign .sidebar-notification summary {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  list-style: none;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}

.page-create-redesign .nav-link:hover,
.page-create-redesign .sidebar-notification summary:hover {
  background: #f5f7fb;
  transform: translateX(2px);
}

.page-create-redesign .nav-link.active {
  color: var(--red);
  background: var(--red-soft);
  box-shadow: inset 4px 0 0 var(--red);
}

.page-create-redesign .nav-link.secondary,
.page-create-redesign .sidebar-notification summary {
  color: var(--muted);
}

.page-create-redesign .nav-icon,
.page-create-redesign .sidebar-notification-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
}

.page-create-redesign .nav-icon svg,
.page-create-redesign .mobile-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-create-redesign .sidebar-notification {
  margin: 0;
}

.page-create-redesign .sidebar-notification summary::-webkit-details-marker {
  display: none;
}

.page-create-redesign .sidebar-notification-icon {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-create-redesign .sidebar-notification summary strong {
  font-weight: 850;
}

.page-create-redesign .sidebar-notification summary b {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
}

.page-create-redesign .sidebar-notification-panel {
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(7, 20, 48, 0.08);
}

.page-create-redesign .sidebar-notification-panel a,
.page-create-redesign .sidebar-notification-panel p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 9px;
  color: var(--ink);
  font-size: 12px;
}

.page-create-redesign .user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f9fd;
}

.page-create-redesign .user-avatar,
.page-create-redesign .user-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.page-create-redesign .user-avatar {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.page-create-redesign .user-avatar-img {
  object-fit: cover;
}

.page-create-redesign .user-card strong,
.page-create-redesign .user-card span {
  display: block;
}

.page-create-redesign .user-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.page-create-redesign .user-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.page-create-redesign .app-main {
  width: calc(100% - var(--sidebar-width));
  max-width: 1440px;
  margin-left: var(--sidebar-width);
  padding: var(--page-y) var(--page-x);
}

.page-create-redesign .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}

.page-create-redesign .eyebrow {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.page-create-redesign .page-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4vw, 62px);
  line-height: 0.96;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.page-create-redesign .page-subtitle {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 750;
}

.page-create-redesign .dashboard-btn,
.page-create-redesign .generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 62px;
  padding: 0 30px;
  border: 0;
  border-radius: 12px;
  background: var(--red);
  color: #fff !important;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  box-shadow: var(--shadow-button);
  transition: transform 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease), opacity 150ms var(--ease);
}

.page-create-redesign .dashboard-btn {
  min-width: 235px;
}

.page-create-redesign .generate-btn {
  min-width: 300px;
  cursor: pointer;
}

.page-create-redesign .dashboard-btn:hover,
.page-create-redesign .generate-btn:hover {
  background: var(--red-dark);
  box-shadow: 0 22px 44px rgba(237, 0, 47, 0.22);
  transform: translateY(-1px);
}

.page-create-redesign .dashboard-btn span,
.page-create-redesign .generate-btn .btn-arrow {
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
}

.page-create-redesign .contract-form {
  display: grid;
  gap: var(--section-gap);
}

.page-create-redesign .step-card,
.page-create-redesign .action-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-create-redesign .step-card {
  padding: var(--card-pad);
}

.page-create-redesign .step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.page-create-redesign .step-title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-create-redesign .step-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.page-create-redesign .step-badge.red { background: var(--red); }
.page-create-redesign .step-badge.blue { background: var(--blue); }
.page-create-redesign .step-badge.green { background: var(--green); }

.page-create-redesign .step-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2.25vw, 36px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.018em;
}

.page-create-redesign .step-header p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.page-create-redesign .upload-grid,
.page-create-redesign .field-grid.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* v49 profile saving: clean header with card-level controls and autosave state. */
body.page-sender-profile .page-header.email-settings-header {
  display: block !important;
}

body.page-sender-profile .card-save-footer {
  display: flex !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  border-top: 1px solid #e4eaf2 !important;
}

body.page-sender-profile .profile-autosave-status {
  color: #047857 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.page-sender-profile .profile-autosave-status[data-state="saving"],
body.page-sender-profile .profile-autosave-status[data-state="dirty"] {
  color: #9a6700 !important;
}

body.page-sender-profile .profile-autosave-status[data-state="error"] {
  color: #c21e3a !important;
}

body.page-sender-profile .card-save-note {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.page-sender-profile .card-save-button {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid #ccd7e5 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #173055 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.page-sender-profile .card-save-button:hover {
  border-color: #8da3bd !important;
  background: #f6f9fc !important;
}

@media (max-width: 620px) {
  body.page-sender-profile .card-save-footer {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* v47 quote placement clarity: one status message, calmer controls, lighter field guides. */
body.page-quote-placement-redesign .placement-alert {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0, 93, 170, 0.18) !important;
  border-radius: 14px !important;
  background: #eef7ff !important;
  color: #071430 !important;
  box-shadow: none !important;
}

body.page-quote-placement-redesign .placement-alert > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
}

body.page-quote-placement-redesign .placement-alert strong {
  color: #005daa !important;
}

body.page-quote-placement-redesign .placement-alert span {
  color: #40506f !important;
}

body.page-quote-placement-redesign .placement-alert > .placement-alert-icon {
  display: grid !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #005daa !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.page-quote-placement-redesign .controls-card {
  gap: 16px !important;
}

body.page-quote-placement-redesign .placement-mode-btn {
  border-color: #d8e1ef !important;
  background: #fff !important;
  color: #20304f !important;
  box-shadow: none !important;
}

body.page-quote-placement-redesign .placement-mode-btn:hover {
  border-color: rgba(0, 93, 170, 0.38) !important;
  background: #f5f9ff !important;
  color: #005daa !important;
}

body.page-quote-placement-redesign .placement-mode-btn.active {
  border-color: #005daa !important;
  background: #005daa !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 93, 170, 0.16) !important;
}

body.page-quote-placement-redesign .placement-mode-btn.active .mode-icon,
body.page-quote-placement-redesign .placement-mode-btn.active .mode-icon svg {
  color: #fff !important;
  stroke: #fff !important;
}

body.page-quote-placement-redesign .reset-btn {
  border-color: #d8e1ef !important;
  background: #f7f9fc !important;
  color: #5b6685 !important;
}

body.page-quote-placement-redesign .reset-btn:hover {
  border-color: #aab6ca !important;
  background: #eef2f7 !important;
  color: #20304f !important;
}

body.page-quote-placement-redesign .preview-chip {
  border: 1px solid rgba(0, 93, 170, 0.18) !important;
  background: #eef7ff !important;
  color: #005daa !important;
}

body.page-quote-placement-redesign .preview-chip.is-ready {
  border-color: rgba(5, 150, 105, 0.2) !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

body.page-quote-placement-redesign .placement-box {
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 9px rgba(7, 20, 48, 0.1) !important;
  backdrop-filter: blur(1px) !important;
}

body.page-quote-placement-redesign .placement-box.signature {
  border: 2px solid #2563eb !important;
  background: rgba(37, 99, 235, 0.1) !important;
  color: #1749a3 !important;
}

body.page-quote-placement-redesign .placement-box.date {
  border: 2px solid #0f8b8d !important;
  background: rgba(15, 139, 141, 0.1) !important;
  color: #09686a !important;
}

body.page-quote-placement-redesign .save-send-btn,
body.page-quote-placement-redesign .save-send-btn:hover:not(:disabled) {
  border-color: #078454 !important;
  background: #078454 !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(7, 132, 84, 0.18) !important;
}

body.page-quote-placement-redesign .save-send-btn:disabled {
  border-color: #d8e1ef !important;
  background: #e9eef5 !important;
  color: #8a94a8 !important;
  box-shadow: none !important;
}

body.page-quote-placement-redesign .placement-help {
  border-color: rgba(0, 93, 170, 0.14) !important;
  background: #f7faff !important;
}

/* Template editor placement and validation affordances. */
.page-template-editor .template-validation-panel {
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid #f3b7c0;
  border-radius: 10px;
  background: #fff5f6;
  color: #6e1021;
}
.page-template-editor .template-validation-panel[hidden] { display: none; }
.page-template-editor .template-validation-panel > strong { display: block; font-size: 14px; }
.page-template-editor .template-validation-panel > p { margin: 3px 0 8px; color: #8b3342; font-size: 12px; }
.page-template-editor .template-validation-panel ul { display: grid; gap: 5px; margin: 0; padding-left: 20px; }
.page-template-editor .template-validation-panel li { font-size: 12px; line-height: 1.4; }
.page-template-editor .template-validation-panel button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b0002c;
  font: inherit;
  font-weight: 750;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.page-template-editor .template-field-choice[draggable="true"] { cursor: grab; }
.page-template-editor .template-field-choice.is-dragging { opacity: .5; cursor: grabbing; }
.page-template-editor .template-canvas-wrap.is-drop-target { outline: 3px solid rgba(18, 104, 237, .65); outline-offset: 3px; }
.page-template-editor .template-field-box.is-invalid { border-color: #e6003d; box-shadow: 0 0 0 2px rgba(230, 0, 61, .18); }


.email-builder-card {
  overflow: hidden;
}

.email-builder-heading p {
  max-width: 660px;
  margin: 4px 0 0;
  color: #59647d;
  font-size: 14px;
  line-height: 1.5;
}

.email-builder-canvas-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: #f7f9fc;
}

.email-builder-canvas-controls label,
.builder-control {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: #526078;
  font-size: 12px;
  font-weight: 800;
}

.email-builder-canvas-controls label > span,
.builder-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #17233e;
}

.email-builder-canvas-controls output,
.builder-control output {
  color: #0967ef;
  font-variant-numeric: tabular-nums;
}

.email-builder-canvas-controls input[type="range"],
.builder-control input[type="range"] {
  width: 100%;
  accent-color: #0967ef;
}

.builder-color-control {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.builder-color-control input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 3px;
  border: 1px solid #cfd9e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.email-builder-list {
  display: grid;
  gap: 12px;
}

.email-builder-item {
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.email-builder-item.is-hidden {
  background: #f7f9fc;
  opacity: .72;
}

.email-builder-item.is-dragging {
  opacity: .45;
}

.email-builder-item.is-drag-target {
  border-color: #0967ef;
  background: #f4f8ff;
}

.email-builder-item-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #edf1f7;
}

.email-builder-item-head > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.email-builder-item-head strong {
  color: #071430;
  font-size: 15px;
  line-height: 1.25;
}

.email-builder-item-head small,
.builder-control small {
  color: #6a748d;
  font-size: 11px;
  line-height: 1.4;
}

.builder-drag-handle {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  gap: 3px;
  width: 34px;
  height: 34px;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: grab;
}

.builder-drag-handle span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #71809c;
  box-shadow: 0 6px 0 #71809c;
}

.builder-visible-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #33415f;
  font-size: 12px;
  font-weight: 800;
}

.builder-visible-toggle input {
  width: 17px;
  height: 17px;
  accent-color: #0967ef;
}

.builder-item-actions {
  display: flex;
  gap: 5px;
}

.builder-item-actions button,
.email-builder-add-row button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #cfd9e8;
  border-radius: 8px;
  background: #fff;
  color: #17233e;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.builder-item-actions button:hover,
.email-builder-add-row button:hover {
  border-color: #0967ef;
  background: #edf5ff;
  color: #0759ce;
}

.builder-item-actions button[data-remove-component]:hover {
  border-color: #ed1745;
  background: #fff1f4;
  color: #d80d39;
}

.email-builder-item-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.builder-control-wide {
  grid-column: 1 / -1;
}

.builder-control textarea,
.builder-control select {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #cfd9e8;
  border-radius: 8px;
  background: #fff;
  color: #071430;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  resize: vertical;
}

.email-builder-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed #bdcadc;
  border-radius: 12px;
  background: #f9fbfd;
}

.email-builder-add-row > span {
  margin-right: 4px;
  color: #526078;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media (max-width: 900px) {
  .email-builder-canvas-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .email-builder-canvas-controls,
  .email-builder-item-controls {
    grid-template-columns: 1fr;
  }

  .email-builder-item-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .builder-visible-toggle {
    grid-column: 2;
  }

  .builder-item-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .builder-item-actions button {
    flex: 1;
  }

  .email-builder-add-row button {
    flex: 1 1 calc(50% - 8px);
  }

  .email-builder-add-row > span {
    width: 100%;
  }
}

/* v70 focused sales overview inspired by the approved analytics reference. */
.page-dashboard-redesign .sales-performance-card {
  position: relative;
  overflow: visible;
  padding: 4px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page-dashboard-redesign .sales-performance-card::before {
  display: none;
}

.page-dashboard-redesign .sales-overview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.page-dashboard-redesign .sales-greeting {
  margin: 0 0 4px;
  color: #5b6983;
  font-size: 14px;
  font-weight: 850;
}

.page-dashboard-redesign .sales-overview-head h2 {
  margin: 0;
  color: #071430;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.page-dashboard-redesign .sales-overview-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0 0;
  color: #65728b;
  font-size: 12px;
  font-weight: 750;
}

.page-dashboard-redesign .sales-overview-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a9b4c6;
}

.page-dashboard-redesign .sales-period-toggle {
  flex: 0 0 auto;
  padding: 5px;
  border: 1px solid #dce4ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(7, 20, 48, .05);
}

.page-dashboard-redesign .sales-period-toggle button {
  min-width: 84px;
  min-height: 40px;
  border-radius: 9px;
}

.page-dashboard-redesign .sales-period-toggle button.is-active {
  background: #0868b8;
  color: #fff;
  box-shadow: 0 7px 16px rgba(8, 104, 184, .22);
}

.page-dashboard-redesign .sales-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.page-dashboard-redesign .sales-kpi-card {
  --kpi-color: #168bd2;
  --kpi-soft: #eaf6ff;
  position: relative;
  min-width: 0;
  min-height: 150px;
  padding: 20px 68px 18px 22px;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(7, 20, 48, .055);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.page-dashboard-redesign .sales-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--kpi-color);
}

.page-dashboard-redesign .sales-kpi-card:hover {
  border-color: color-mix(in srgb, var(--kpi-color) 35%, #dce4ef);
  box-shadow: 0 16px 34px rgba(7, 20, 48, .09);
  transform: translateY(-3px);
}

.page-dashboard-redesign .sales-kpi-card.kpi-contracts { --kpi-color: #0a9e63; --kpi-soft: #e9f9f1; }
.page-dashboard-redesign .sales-kpi-card.kpi-average { --kpi-color: #071430; --kpi-soft: #eef2f8; }
.page-dashboard-redesign .sales-kpi-card.kpi-winrate { --kpi-color: #ed002f; --kpi-soft: #fff0f3; }

.page-dashboard-redesign .sales-kpi-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--kpi-soft);
  color: var(--kpi-color);
}

.page-dashboard-redesign .sales-kpi-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.page-dashboard-redesign .sales-kpi-card > span:not(.sales-kpi-icon) {
  display: block;
  color: #63708a;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.page-dashboard-redesign .sales-kpi-card > strong {
  display: block;
  margin-top: 10px;
  color: #071430;
  font-size: clamp(25px, 2.4vw, 36px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
}

.page-dashboard-redesign .sales-kpi-card > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

.page-dashboard-redesign .sales-kpi-card small {
  color: #7b879d;
  font-size: 9px;
  font-weight: 750;
}

.page-dashboard-redesign .sales-kpi-card .sales-change-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e8f8f0;
  color: #078552;
  font-size: 9px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-kpi-card .sales-change-badge.is-negative {
  background: #fff0f3;
  color: #d6002b;
}

.page-dashboard-redesign .sales-chart-panel {
  padding: 22px 24px 18px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(7, 20, 48, .06);
}

.page-dashboard-redesign .sales-chart-heading {
  align-items: flex-start;
}

.page-dashboard-redesign .sales-chart-heading strong {
  color: #071430;
  font-size: 16px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.page-dashboard-redesign .sales-chart-legend span {
  position: relative;
  padding-left: 25px;
  color: #69768e;
  font-size: 10px;
  font-weight: 800;
}

.page-dashboard-redesign .sales-chart-legend span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  border-top: 2px solid #168bd2;
  transform: translateY(-50%);
}

.page-dashboard-redesign .sales-chart-legend .previous::before {
  border-color: #8e9bb1;
  border-top-style: dashed;
}

.page-dashboard-redesign .sales-chart {
  min-height: 320px;
  margin-top: 8px;
}

.page-dashboard-redesign .sales-chart svg {
  width: 100%;
  height: 320px;
}

.page-dashboard-redesign .sales-previous-line-path {
  fill: none;
  stroke: #9aa7ba;
  stroke-dasharray: 9 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.page-dashboard-redesign .sales-y-axis-label {
  fill: #77849a;
  font-size: 10px;
  font-weight: 800;
}

.page-dashboard-redesign .sales-area-path { fill: rgba(22, 139, 210, .1); }
.page-dashboard-redesign .sales-line-path { stroke: #168bd2; stroke-width: 3; }

.page-dashboard-redesign .dashboard-insight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.page-dashboard-redesign .dashboard-insight-card,
.page-dashboard-redesign .action-center-card,
.page-dashboard-redesign .engagement-card {
  min-height: 320px;
  padding: 22px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(7, 20, 48, .06);
}

.page-dashboard-redesign .dashboard-insight-card .insight-card-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.page-dashboard-redesign .dashboard-insight-card .insight-count {
  width: 28px;
  height: 28px;
}

.page-dashboard-redesign .engagement-funnel > div {
  display: grid !important;
  grid-template-columns: 58px minmax(80px, 1fr) 24px 36px !important;
  width: 100% !important;
}

.page-dashboard-redesign .dashboard-insight-card:hover,
.page-dashboard-redesign .action-center-card:hover,
.page-dashboard-redesign .engagement-card:hover {
  border-color: #cbd7e6;
  box-shadow: 0 17px 38px rgba(7, 20, 48, .085);
}

.page-dashboard-redesign .insight-card-head {
  align-items: center;
  margin-bottom: 14px;
}

.page-dashboard-redesign .insight-card-head h3 {
  margin: 0;
  color: #071430;
  font-size: 18px;
  font-weight: 950;
}

.page-dashboard-redesign .insight-card-head p {
  margin: 3px 0 0;
  color: #7a869b;
  font-size: 10px;
  font-weight: 750;
}

.page-dashboard-redesign .insight-action-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 13px;
}

.page-dashboard-redesign .action-center-card .insight-action-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1.5fr) minmax(84px, .6fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #e7ecf3;
  border-radius: 0;
  background: #fff;
}

.page-dashboard-redesign .action-center-card .insight-action-row:last-child { border-bottom: 0; }

.page-dashboard-redesign .insight-customer-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #eaf6ff;
  color: #0868b8;
  font-size: 10px;
  font-weight: 950;
}

.page-dashboard-redesign .insight-customer-copy,
.page-dashboard-redesign .insight-contract-value {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.page-dashboard-redesign .insight-customer-copy strong,
.page-dashboard-redesign .insight-contract-value strong {
  overflow: hidden;
  color: #071430;
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .insight-customer-copy span,
.page-dashboard-redesign .insight-contract-value span {
  overflow: hidden;
  color: #7a879c;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .action-center-card .insight-action-row :is(a, button) {
  min-width: 98px;
  min-height: 38px;
  padding: 8px 12px;
  border-color: #cfd9e7;
  background: #fff;
  color: #0868b8;
}

.page-dashboard-redesign .engagement-funnel {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.page-dashboard-redesign .engagement-funnel > div {
  display: grid;
  grid-template-columns: 58px minmax(80px, 1fr) 24px 36px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 0;
  background: transparent !important;
  color: #071430 !important;
}

.page-dashboard-redesign .engagement-funnel > div > span,
.page-dashboard-redesign .engagement-funnel > div > b,
.page-dashboard-redesign .engagement-funnel > div > small {
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.page-dashboard-redesign .engagement-funnel > div > small {
  color: #7a879c;
  text-align: right;
}

.page-dashboard-redesign .engagement-funnel > div > i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.page-dashboard-redesign .engagement-funnel > div > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: max(5px, var(--funnel-width));
  border-radius: inherit;
  background: #168bd2;
}

.page-dashboard-redesign .engagement-funnel > div:nth-child(2) > i::after { background: #0a9e63; }
.page-dashboard-redesign .engagement-funnel > div:nth-child(3) > i::after { background: #ed002f; }

.page-dashboard-redesign .engagement-speed-grid {
  margin-top: 28px;
}

.page-dashboard-redesign .engagement-speed-grid > div {
  border: 1px solid #e1e7f0;
  background: #f9fbfd;
}

@media (max-width: 1120px) {
  .page-dashboard-redesign .sales-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-dashboard-redesign .dashboard-insight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .page-dashboard-redesign .sales-overview-head { align-items: stretch; flex-direction: column; gap: 16px; }
  .page-dashboard-redesign .sales-period-toggle { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .page-dashboard-redesign .sales-period-toggle button { min-width: 0; }
  .page-dashboard-redesign .sales-chart-panel { padding: 18px 12px 12px; }
  .page-dashboard-redesign .sales-chart { min-height: 265px; }
  .page-dashboard-redesign .sales-chart svg { height: 265px; }
  .page-dashboard-redesign .action-center-card .insight-action-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .page-dashboard-redesign .insight-contract-value { display: none; }
}

@media (max-width: 520px) {
  .page-dashboard-redesign .engagement-funnel > div {
    grid-template-columns: 48px minmax(60px, 1fr) 20px 32px !important;
  }
}

@media (max-width: 520px) {
  .page-dashboard-redesign .sales-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-dashboard-redesign .sales-kpi-card { min-height: 132px; padding: 16px 12px 14px 16px; }
  .page-dashboard-redesign .sales-kpi-icon { top: 13px; right: 12px; width: 32px; height: 32px; }
  .page-dashboard-redesign .sales-kpi-icon svg { width: 17px; height: 17px; }
  .page-dashboard-redesign .sales-kpi-card > span:not(.sales-kpi-icon) { max-width: calc(100% - 34px); font-size: 8px; }
  .page-dashboard-redesign .sales-kpi-card > strong { margin-top: 14px; font-size: 23px; }
  .page-dashboard-redesign .sales-kpi-card > p { margin-top: 13px; }
  .page-dashboard-redesign .sales-kpi-card small { font-size: 7px; }
  .page-dashboard-redesign .sales-chart-heading { gap: 8px; }
  .page-dashboard-redesign .sales-chart-live { display: none; }
  .page-dashboard-redesign .sales-chart-legend { gap: 10px; }
  .page-dashboard-redesign .dashboard-insight-card { padding: 16px; }
  .page-dashboard-redesign .action-center-card .insight-action-row { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
  .page-dashboard-redesign .insight-customer-avatar { width: 30px; height: 30px; }
  .page-dashboard-redesign .action-center-card .insight-action-row :is(form, a) { grid-column: 2; justify-self: start; }
  .page-dashboard-redesign .action-center-card .insight-action-row :is(a, button) { min-height: 34px; }
  .page-dashboard-redesign .engagement-funnel > div { grid-template-columns: 48px minmax(60px, 1fr) 20px 32px; gap: 7px; }
}

.page-create-redesign .upload-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.page-create-redesign .upload-card,
.page-create-redesign .field-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.page-create-redesign .upload-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 24px;
  cursor: pointer;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}

.page-create-redesign .upload-card:hover,
.page-create-redesign .upload-card.drag-over {
  border-color: rgba(237, 0, 47, 0.28);
  box-shadow: 0 14px 34px rgba(7, 20, 48, 0.065);
  transform: translateY(-1px);
}

.page-create-redesign .upload-card.has-file {
  border-color: rgba(19, 186, 115, 0.45);
  background: linear-gradient(180deg, #ffffff, #fbfffd);
}

.page-create-redesign .upload-card input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-create-redesign .upload-card-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.page-create-redesign .upload-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  flex: 0 0 auto;
}

.page-create-redesign .upload-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.page-create-redesign .upload-card p,
.page-create-redesign .upload-card small,
.page-create-redesign .field-card small {
  color: var(--muted);
  font-weight: 750;
}

.page-create-redesign .upload-card p {
  margin: 8px 0 0;
  font-size: 14px;
}

.page-create-redesign .upload-status {
  align-self: flex-start;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
}

.page-create-redesign .upload-card.has-file .upload-status {
  background: #ebfff7;
  color: var(--green);
}

.page-create-redesign .drop-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1.5px dashed rgba(237, 0, 47, 0.28);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(237, 0, 47, 0.025), rgba(255, 255, 255, 0.7));
}

.page-create-redesign .upload-card:nth-child(2) .drop-zone {
  border-color: #b7c4d8;
}

.page-create-redesign .file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--red);
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(7, 20, 48, 0.045);
}

.page-create-redesign .drop-text {
  color: var(--soft-muted);
  font-size: 13px;
  font-weight: 850;
}

.page-create-redesign .file-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  word-break: break-word;
}

.page-create-redesign .upload-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--red);
  cursor: pointer;
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(7, 20, 48, 0.055);
  transition: transform 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}

.page-create-redesign .upload-remove:hover {
  transform: scale(1.04);
  background: var(--red);
  color: #fff;
}

.page-create-redesign .upload-remove[hidden] {
  display: none !important;
}

/* Final source-of-truth shell: keep every Webflow page using the Create Contract sidebar. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) {
  margin: 0 !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background: #f6f8fc !important;
  color: #071430 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
  --sidebar-width: 288px !important;
  --page-x: clamp(28px, 4vw, 64px) !important;
  --page-y: clamp(28px, 3.5vw, 48px) !important;
  --sidebar-x: 32px !important;
  --sidebar-y: 36px !important;
  --red: #ed002f !important;
  --red-dark: #c90026 !important;
  --red-soft: #fff0f3 !important;
  --ink: #071430 !important;
  --muted: #5b6685 !important;
  --line: #dfe5f0 !important;
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: var(--sidebar-y) var(--sidebar-x) !important;
  overflow: hidden auto !important;
  border-right: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-main {
  display: block !important;
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: var(--sidebar-width) !important;
  padding: var(--page-y) var(--page-x) 96px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-block {
  flex: 0 0 auto !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--line) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark {
  display: inline-grid !important;
  width: 190px !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-align: left !important;
  line-height: 0.86 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark span {
  display: block !important;
  color: #ed002f !important;
  font-size: 40px !important;
  font-style: italic !important;
  font-weight: 1000 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.88 !important;
  transform: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark small {
  display: inline-block !important;
  width: 122px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
  border-top: 4px solid #005daa !important;
  box-shadow: 0 4px 0 #005daa !important;
  color: #005daa !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-copy h2 {
  margin: 18px 0 0 !important;
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-copy p {
  margin: 8px 0 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-nav,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
  display: grid !important;
  gap: 10px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-nav {
  margin-top: 46px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary {
  display: flex !important;
  align-items: center !important;
  gap: 17px !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary:hover {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active {
  background: var(--red-soft) !important;
  color: var(--red) !important;
  box-shadow: inset 4px 0 0 var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-icon,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  color: currentColor !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-icon svg,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification {
  position: relative !important;
  overflow: visible !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary {
  overflow: visible !important;
  list-style: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon::before {
  content: "" !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon.has-alert::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  right: 2px !important;
  left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  box-shadow: 0 0 0 2px #fff !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary b {
  min-width: 24px !important;
  height: 20px !important;
  margin-left: auto !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 20px !important;
  text-align: center !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-panel {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(7, 20, 48, 0.08) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #eef2f7 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item:last-child {
  border-bottom: 0 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item a {
  min-width: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-dismiss:hover {
  background: transparent !important;
  color: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 76px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-profile-link {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-avatar,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-avatar-img {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  background: #071430 !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  object-fit: cover !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card strong,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card strong {
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card span {
  margin-top: 3px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-logout-link {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  color: var(--ink) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-logout-link:hover {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-logout-link svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav {
  display: none !important;
}

@media (max-width: 1180px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
    --sidebar-width: 250px !important;
    --sidebar-x: 22px !important;
  }
}

@media (max-width: 920px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
    --page-x: 18px !important;
    --page-y: 22px !important;
    padding-bottom: 108px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
    display: none !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: var(--page-y) var(--page-x) 118px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16) !important;
    backdrop-filter: blur(18px) !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav a {
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav a.active,
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav a:hover {
    background: var(--red-soft) !important;
    color: var(--red) !important;
  }
}

@media (max-width: 560px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
    --page-x: 12px !important;
    --page-y: 18px !important;
  }
}

/* FINAL LOCK: one sidebar/nav system for every Webflow app page. */
body.page-dashboard-redesign,
body.page-create-redesign,
body.page-review-redesign,
body.page-quote-placement-redesign,
body.page-sender-profile,
body.page-template-redesign {
  --sidebar-width: 288px;
  --sidebar-x: 32px;
  --sidebar-y: 36px;
}

.page-dashboard-redesign .app-sidebar,
.page-create-redesign .app-sidebar,
.page-review-redesign .app-sidebar,
.page-quote-placement-redesign .app-sidebar,
.page-sender-profile .app-sidebar,
.page-template-redesign .app-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: var(--sidebar-y) var(--sidebar-x) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-right: 1px solid var(--line, #dfe5f0) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

.page-dashboard-redesign .brand-block,
.page-create-redesign .brand-block,
.page-review-redesign .brand-block,
.page-quote-placement-redesign .brand-block,
.page-sender-profile .brand-block,
.page-template-redesign .brand-block {
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--line, #dfe5f0) !important;
}

.page-dashboard-redesign .app-sidebar .costco-wordmark,
.page-create-redesign .app-sidebar .costco-wordmark,
.page-review-redesign .app-sidebar .costco-wordmark,
.page-quote-placement-redesign .app-sidebar .costco-wordmark,
.page-sender-profile .app-sidebar .costco-wordmark,
.page-template-redesign .app-sidebar .costco-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 178px !important;
  max-width: 178px !important;
  margin: 0 0 26px !important;
  overflow: visible !important;
  transform: none !important;
  color: #ed002f !important;
  letter-spacing: -0.07em !important;
  line-height: 0.82 !important;
}

.page-dashboard-redesign .app-sidebar .costco-wordmark span,
.page-create-redesign .app-sidebar .costco-wordmark span,
.page-review-redesign .app-sidebar .costco-wordmark span,
.page-quote-placement-redesign .app-sidebar .costco-wordmark span,
.page-sender-profile .app-sidebar .costco-wordmark span,
.page-template-redesign .app-sidebar .costco-wordmark span {
  color: #ed002f !important;
  font-size: 41px !important;
  font-weight: 1000 !important;
  line-height: 0.82 !important;
}

.page-dashboard-redesign .app-sidebar .costco-wordmark small,
.page-create-redesign .app-sidebar .costco-wordmark small,
.page-review-redesign .app-sidebar .costco-wordmark small,
.page-quote-placement-redesign .app-sidebar .costco-wordmark small,
.page-sender-profile .app-sidebar .costco-wordmark small,
.page-template-redesign .app-sidebar .costco-wordmark small {
  display: block !important;
  width: 101px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
  border-top: 4px solid #005daa !important;
  box-shadow: 0 4px 0 #005daa !important;
  color: #005daa !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.page-dashboard-redesign .brand-copy h2,
.page-create-redesign .brand-copy h2,
.page-review-redesign .brand-copy h2,
.page-quote-placement-redesign .brand-copy h2,
.page-sender-profile .brand-copy h2,
.page-template-redesign .brand-copy h2 {
  margin: 0 !important;
  color: var(--ink, #071430) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.page-dashboard-redesign .brand-copy p,
.page-create-redesign .brand-copy p,
.page-review-redesign .brand-copy p,
.page-quote-placement-redesign .brand-copy p,
.page-sender-profile .brand-copy p,
.page-template-redesign .brand-copy p {
  margin: 8px 0 0 !important;
  color: var(--muted, #5b6685) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.page-dashboard-redesign .sidebar-nav,
.page-create-redesign .sidebar-nav,
.page-review-redesign .sidebar-nav,
.page-quote-placement-redesign .sidebar-nav,
.page-sender-profile .sidebar-nav,
.page-template-redesign .sidebar-nav,
.page-dashboard-redesign .sidebar-bottom,
.page-create-redesign .sidebar-bottom,
.page-review-redesign .sidebar-bottom,
.page-quote-placement-redesign .sidebar-bottom,
.page-sender-profile .sidebar-bottom,
.page-template-redesign .sidebar-bottom {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

.page-dashboard-redesign .sidebar-bottom,
.page-create-redesign .sidebar-bottom,
.page-review-redesign .sidebar-bottom,
.page-quote-placement-redesign .sidebar-bottom,
.page-sender-profile .sidebar-bottom,
.page-template-redesign .sidebar-bottom {
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line, #dfe5f0) !important;
}

.page-dashboard-redesign .nav-link,
.page-create-redesign .nav-link,
.page-review-redesign .nav-link,
.page-quote-placement-redesign .nav-link,
.page-sender-profile .nav-link,
.page-template-redesign .nav-link,
.page-dashboard-redesign .sidebar-notification summary,
.page-create-redesign .sidebar-notification summary,
.page-review-redesign .sidebar-notification summary,
.page-quote-placement-redesign .sidebar-notification summary,
.page-sender-profile .sidebar-notification summary,
.page-template-redesign .sidebar-notification summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 17px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink, #071430) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  list-style: none !important;
  transform: none !important;
}

.page-dashboard-redesign .nav-link:hover,
.page-create-redesign .nav-link:hover,
.page-review-redesign .nav-link:hover,
.page-quote-placement-redesign .nav-link:hover,
.page-sender-profile .nav-link:hover,
.page-template-redesign .nav-link:hover,
.page-dashboard-redesign .sidebar-notification summary:hover,
.page-create-redesign .sidebar-notification summary:hover,
.page-review-redesign .sidebar-notification summary:hover,
.page-quote-placement-redesign .sidebar-notification summary:hover,
.page-sender-profile .sidebar-notification summary:hover,
.page-template-redesign .sidebar-notification summary:hover {
  background: #f5f7fb !important;
  color: #ed002f !important;
  transform: translateX(2px) !important;
}

.page-dashboard-redesign .nav-link.active,
.page-create-redesign .nav-link.active,
.page-review-redesign .nav-link.active,
.page-quote-placement-redesign .nav-link.active,
.page-sender-profile .nav-link.active,
.page-template-redesign .nav-link.active {
  color: #ed002f !important;
  background: #fff0f3 !important;
  box-shadow: inset 4px 0 0 #ed002f !important;
}

.page-dashboard-redesign .nav-icon,
.page-create-redesign .nav-icon,
.page-review-redesign .nav-icon,
.page-quote-placement-redesign .nav-icon,
.page-sender-profile .nav-icon,
.page-template-redesign .nav-icon,
.page-dashboard-redesign .sidebar-notification-icon,
.page-create-redesign .sidebar-notification-icon,
.page-review-redesign .sidebar-notification-icon,
.page-quote-placement-redesign .sidebar-notification-icon,
.page-sender-profile .sidebar-notification-icon,
.page-template-redesign .sidebar-notification-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  background: none !important;
  color: currentColor !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.page-dashboard-redesign .nav-icon svg,
.page-create-redesign .nav-icon svg,
.page-review-redesign .nav-icon svg,
.page-quote-placement-redesign .nav-icon svg,
.page-sender-profile .nav-icon svg,
.page-template-redesign .nav-icon svg,
.page-dashboard-redesign .mobile-nav svg,
.page-create-redesign .mobile-nav svg,
.page-review-redesign .mobile-nav svg,
.page-quote-placement-redesign .mobile-nav svg,
.page-sender-profile .mobile-nav svg,
.page-template-redesign .mobile-nav svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-dashboard-redesign .sidebar-notification,
.page-create-redesign .sidebar-notification,
.page-review-redesign .sidebar-notification,
.page-quote-placement-redesign .sidebar-notification,
.page-sender-profile .sidebar-notification,
.page-template-redesign .sidebar-notification {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.page-dashboard-redesign .sidebar-bottom > .nav-link.secondary,
.page-create-redesign .sidebar-bottom > .nav-link.secondary,
.page-review-redesign .sidebar-bottom > .nav-link.secondary,
.page-quote-placement-redesign .sidebar-bottom > .nav-link.secondary,
.page-sender-profile .sidebar-bottom > .nav-link.secondary,
.page-template-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

.page-dashboard-redesign .sidebar-bottom > .user-card,
.page-create-redesign .sidebar-bottom > .user-card,
.page-review-redesign .sidebar-bottom > .user-card,
.page-quote-placement-redesign .sidebar-bottom > .user-card,
.page-sender-profile .sidebar-bottom > .user-card,
.page-template-redesign .sidebar-bottom > .user-card {
  order: 3 !important;
}

.page-dashboard-redesign .sidebar-notification-icon::before,
.page-create-redesign .sidebar-notification-icon::before,
.page-review-redesign .sidebar-notification-icon::before,
.page-quote-placement-redesign .sidebar-notification-icon::before,
.page-sender-profile .sidebar-notification-icon::before,
.page-template-redesign .sidebar-notification-icon::before {
  content: "" !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.page-dashboard-redesign .sidebar-notification-icon.has-alert::after,
.page-create-redesign .sidebar-notification-icon.has-alert::after,
.page-review-redesign .sidebar-notification-icon.has-alert::after,
.page-quote-placement-redesign .sidebar-notification-icon.has-alert::after,
.page-sender-profile .sidebar-notification-icon.has-alert::after,
.page-template-redesign .sidebar-notification-icon.has-alert::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  right: 2px !important;
  left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ed002f !important;
  box-shadow: 0 0 0 2px #fff !important;
}

.page-dashboard-redesign .notification-item,
.page-create-redesign .notification-item,
.page-review-redesign .notification-item,
.page-quote-placement-redesign .notification-item,
.page-sender-profile .notification-item,
.page-template-redesign .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
}

.page-dashboard-redesign .notification-dismiss,
.page-create-redesign .notification-dismiss,
.page-review-redesign .notification-dismiss,
.page-quote-placement-redesign .notification-dismiss,
.page-sender-profile .notification-dismiss,
.page-template-redesign .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .user-card,
.page-create-redesign .user-card,
.page-review-redesign .user-card,
.page-quote-placement-redesign .user-card,
.page-sender-profile .user-card,
.page-template-redesign .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line, #dfe5f0) !important;
  border-radius: 14px !important;
  background: #f7f9fd !important;
}

.page-dashboard-redesign .user-profile-link,
.page-create-redesign .user-profile-link,
.page-review-redesign .user-profile-link,
.page-quote-placement-redesign .user-profile-link,
.page-sender-profile .user-profile-link,
.page-template-redesign .user-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.page-dashboard-redesign .user-logout-link,
.page-create-redesign .user-logout-link,
.page-review-redesign .user-logout-link,
.page-quote-placement-redesign .user-logout-link,
.page-sender-profile .user-logout-link,
.page-template-redesign .user-logout-link {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--muted, #5b6685) !important;
}

.page-dashboard-redesign .user-logout-link svg,
.page-create-redesign .user-logout-link svg,
.page-review-redesign .user-logout-link svg,
.page-quote-placement-redesign .user-logout-link svg,
.page-sender-profile .user-logout-link svg,
.page-template-redesign .user-logout-link svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-dashboard-redesign .user-avatar,
.page-create-redesign .user-avatar,
.page-review-redesign .user-avatar,
.page-quote-placement-redesign .user-avatar,
.page-sender-profile .user-avatar,
.page-template-redesign .user-avatar,
.page-dashboard-redesign .user-avatar-img,
.page-create-redesign .user-avatar-img,
.page-review-redesign .user-avatar-img,
.page-quote-placement-redesign .user-avatar-img,
.page-sender-profile .user-avatar-img,
.page-template-redesign .user-avatar-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
}

.page-dashboard-redesign .user-avatar,
.page-create-redesign .user-avatar,
.page-review-redesign .user-avatar,
.page-quote-placement-redesign .user-avatar,
.page-sender-profile .user-avatar,
.page-template-redesign .user-avatar {
  display: grid !important;
  place-items: center !important;
  background: #071430 !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.page-dashboard-redesign .user-card strong,
.page-create-redesign .user-card strong,
.page-review-redesign .user-card strong,
.page-quote-placement-redesign .user-card strong,
.page-sender-profile .user-card strong,
.page-template-redesign .user-card strong,
.page-dashboard-redesign .user-card span,
.page-create-redesign .user-card span,
.page-review-redesign .user-card span,
.page-quote-placement-redesign .user-card span,
.page-sender-profile .user-card span,
.page-template-redesign .user-card span {
  display: block !important;
  max-width: 118px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-dashboard-redesign .user-card strong,
.page-create-redesign .user-card strong,
.page-review-redesign .user-card strong,
.page-quote-placement-redesign .user-card strong,
.page-sender-profile .user-card strong,
.page-template-redesign .user-card strong {
  color: var(--ink, #071430) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.page-dashboard-redesign .user-card span,
.page-create-redesign .user-card span,
.page-review-redesign .user-card span,
.page-quote-placement-redesign .user-card span,
.page-sender-profile .user-card span,
.page-template-redesign .user-card span {
  color: var(--muted, #5b6685) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.page-dashboard-redesign .primary-btn,
.page-template-redesign .primary-btn,
.page-template-redesign .activate-btn,
.page-sender-profile .primary-btn {
  background: #ed002f !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(237, 0, 47, 0.18) !important;
}

@media (max-width: 1180px) {
  body.page-dashboard-redesign,
  body.page-create-redesign,
  body.page-review-redesign,
  body.page-quote-placement-redesign,
  body.page-sender-profile,
  body.page-template-redesign {
    --sidebar-width: 250px;
    --sidebar-x: 22px;
  }
}

@media (max-width: 920px) {
  .page-dashboard-redesign .app-sidebar,
  .page-create-redesign .app-sidebar,
  .page-review-redesign .app-sidebar,
  .page-quote-placement-redesign .app-sidebar,
  .page-sender-profile .app-sidebar,
  .page-template-redesign .app-sidebar {
    display: none !important;
  }

  .page-dashboard-redesign .mobile-nav,
  .page-create-redesign .mobile-nav,
  .page-review-redesign .mobile-nav,
  .page-quote-placement-redesign .mobile-nav,
  .page-sender-profile .mobile-nav,
  .page-template-redesign .mobile-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 50 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 8px !important;
    border: 1px solid var(--line, #dfe5f0) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16) !important;
    backdrop-filter: blur(18px) !important;
  }

  .page-dashboard-redesign .mobile-nav a,
  .page-create-redesign .mobile-nav a,
  .page-review-redesign .mobile-nav a,
  .page-quote-placement-redesign .mobile-nav a,
  .page-sender-profile .mobile-nav a,
  .page-template-redesign .mobile-nav a {
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    color: var(--muted, #5b6685) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .page-dashboard-redesign .mobile-nav a.active,
  .page-create-redesign .mobile-nav a.active,
  .page-review-redesign .mobile-nav a.active,
  .page-quote-placement-redesign .mobile-nav a.active,
  .page-sender-profile .mobile-nav a.active,
  .page-template-redesign .mobile-nav a.active {
    background: #fff0f3 !important;
    color: #ed002f !important;
  }
}

/* Template Manager Webflow-style page */
body.page-template-redesign {
  margin: 0;
  min-height: 100vh;
  background: #f6f8fc;
  color: #071430;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-template-redesign * {
  box-sizing: border-box;
}

.page-template-redesign .contract-app {
  --app-bg: #f6f8fc;
  --card-bg: #ffffff;
  --ink: #071430;
  --muted: #5b6685;
  --soft-muted: #8b94ad;
  --line: #dfe5f0;
  --line-strong: #cfd7e6;
  --red: #ed002f;
  --red-dark: #c90026;
  --red-soft: #fff0f3;
  --blue: #168bd9;
  --green: #13ba73;
  --purple: #654bff;
  --orange: #f37a20;
  --sidebar-width: 288px;
  --page-x: clamp(28px, 4vw, 64px);
  --page-y: clamp(28px, 3.5vw, 48px);
  --sidebar-x: 32px;
  --sidebar-y: 36px;
  --section-gap: 18px;
  --card-pad: clamp(24px, 2.4vw, 34px);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 38px rgba(7, 20, 48, 0.055);
  --shadow-button: 0 18px 38px rgba(237, 0, 47, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 100%);
  color: var(--ink);
  line-height: 1.45;
}

.page-template-redesign a {
  color: inherit;
  text-decoration: none;
}

.page-template-redesign input,
.page-template-redesign button,
.page-template-redesign textarea {
  font: inherit;
}

.page-template-redesign .app-main {
  width: calc(100% - var(--sidebar-width));
  max-width: 1440px;
  margin-left: var(--sidebar-width);
  padding: var(--page-y) var(--page-x);
}

.page-template-redesign .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
}

.page-template-redesign .eyebrow {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.page-template-redesign .page-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4vw, 62px);
  line-height: 0.96;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.page-template-redesign .page-subtitle {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 750;
}

.page-template-redesign .primary-btn,
.page-template-redesign .activate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 62px;
  padding: 0 30px;
  border: 0;
  border-radius: 12px;
  background: var(--red);
  color: #fff !important;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: transform 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease), opacity 150ms var(--ease);
}

.page-template-redesign .primary-btn {
  min-width: 220px;
}

.page-template-redesign .activate-btn {
  min-width: 320px;
}

.page-template-redesign .primary-btn:hover,
.page-template-redesign .activate-btn:hover {
  background: var(--red-dark);
  box-shadow: 0 22px 44px rgba(237, 0, 47, 0.22);
  transform: translateY(-1px);
}

.page-template-redesign .btn-arrow {
  font-size: 27px;
  font-weight: 950;
  line-height: 1;
}

.page-template-redesign .settings-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: var(--section-gap);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-template-redesign .settings-tabs::-webkit-scrollbar {
  display: none;
}

.page-template-redesign .settings-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.page-template-redesign .settings-tabs a.active {
  border-color: rgba(237, 0, 47, 0.55);
  color: var(--red);
  box-shadow: 0 0 0 1px rgba(237, 0, 47, 0.18);
}

.page-template-redesign .template-summary {
  display: grid;
  grid-template-columns: 1.15fr 0.8fr 0.85fr;
  gap: var(--section-gap);
  margin-bottom: var(--section-gap);
}

.page-template-redesign .summary-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 118px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-template-redesign .summary-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
}

.page-template-redesign .summary-icon svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-template-redesign .summary-icon.purple { color: var(--purple); }
.page-template-redesign .summary-icon.green { color: var(--green); }
.page-template-redesign .summary-icon.orange { color: var(--orange); }

.page-template-redesign .summary-card p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.page-template-redesign .summary-card strong {
  display: block;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.page-template-redesign .summary-card:first-child strong {
  font-size: clamp(15px, 1.3vw, 18px);
}

.page-template-redesign .template-card,
.page-template-redesign .action-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-template-redesign .template-card {
  margin-bottom: var(--section-gap);
  padding: var(--card-pad);
}

.page-template-redesign .step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.page-template-redesign .step-title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-template-redesign .step-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.page-template-redesign .step-badge.red {
  background: var(--red);
}

.page-template-redesign .step-header h2,
.page-template-redesign .section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2.25vw, 36px);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.page-template-redesign .step-header p,
.page-template-redesign .section-head p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.page-template-redesign .section-head {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.page-template-redesign .section-head p {
  margin-top: 9px;
}

.page-template-redesign .template-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 20px;
}

.page-template-redesign .upload-card,
.page-template-redesign .notes-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 24px;
}

.page-template-redesign .upload-card {
  display: grid;
  gap: 16px;
  cursor: pointer;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}

.page-template-redesign .upload-card:hover,
.page-template-redesign .upload-card.drag-over {
  border-color: rgba(237, 0, 47, 0.28);
  box-shadow: 0 14px 34px rgba(7, 20, 48, 0.065);
  transform: translateY(-1px);
}

.page-template-redesign .upload-card.has-file {
  border-color: rgba(19, 186, 115, 0.45);
  background: linear-gradient(180deg, #fff, #fbfffd);
}

.page-template-redesign .upload-card input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.page-template-redesign .upload-card-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.page-template-redesign .upload-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.page-template-redesign .upload-card p,
.page-template-redesign .upload-card small,
.page-template-redesign .notes-card small {
  color: var(--muted);
  font-weight: 750;
}

.page-template-redesign .upload-card p {
  margin: 8px 0 0;
  font-size: 14px;
}

.page-template-redesign .upload-status {
  align-self: flex-start;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
}

.page-template-redesign .upload-card.has-file .upload-status {
  background: #ebfff7;
  color: var(--green);
}

.page-template-redesign .drop-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1.5px dashed rgba(237, 0, 47, 0.28);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(237, 0, 47, 0.025), rgba(255, 255, 255, 0.7));
}

.page-template-redesign .file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--red);
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(7, 20, 48, 0.045);
}

.page-template-redesign .drop-text {
  color: var(--soft-muted);
  font-size: 13px;
  font-weight: 850;
}

.page-template-redesign .file-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.page-template-redesign .notes-card {
  display: grid;
  align-content: start;
}

.page-template-redesign .notes-card span {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.page-template-redesign .notes-card textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  outline: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink);
  font-weight: 750;
}

.page-template-redesign .notes-card textarea:focus {
  border-color: rgba(237, 0, 47, 0.42);
  box-shadow: 0 0 0 4px rgba(237, 0, 47, 0.075);
}

.page-template-redesign .notes-card small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}

.page-template-redesign .action-card {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: var(--section-gap);
  padding: 24px;
}

.page-template-redesign .action-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.page-template-redesign .backup-list {
  display: grid;
  gap: 10px;
}

.page-template-redesign .backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.page-template-redesign .backup-row strong,
.page-template-redesign .backup-row span {
  display: block;
}

.page-template-redesign .backup-row strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.page-template-redesign .backup-row span,
.page-template-redesign .backup-row time {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.page-template-redesign .empty-backups {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 190px;
  padding: 28px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}

.page-template-redesign .empty-backups svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-template-redesign .empty-backups strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.page-template-redesign .empty-backups p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.page-template-redesign .mobile-nav {
  display: none;
}

.page-template-redesign .reveal-item {
  opacity: 0;
  transform: translateY(6px);
  animation: templateReveal 360ms var(--ease) forwards;
}

@keyframes templateReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sender email preview that mirrors the branded email layout sent by the backend. */
.page-sender-profile .actual-email-preview {
  overflow: hidden;
  border: 1px solid #eadfce;
  border-radius: 22px;
  background: #fffaf4;
  padding: 0;
  box-shadow: 0 18px 45px rgba(48, 38, 28, 0.08);
}

.page-sender-profile .preview-hero {
  min-height: 142px;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(rgba(213, 194, 168, 0.68), rgba(213, 194, 168, 0.68)),
    url("/static/email-hero.webp") center / cover no-repeat;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark {
  margin: 0;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 30px rgba(48, 38, 28, 0.2);
  transform: none;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark span {
  font-size: 30px;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark small {
  font-size: 11px;
}

.page-sender-profile .preview-content {
  padding: 30px 26px 28px;
  text-align: center;
}

.page-sender-profile .actual-email-preview .preview-subject {
  margin: 0 0 18px;
  border-color: #eadfce;
  background: #fbf4ec;
  color: #5c5148;
}

.page-sender-profile .preview-content h3 {
  margin: 0;
  color: #241f1a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.page-sender-profile .preview-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px auto;
  color: #b49a79;
}

.page-sender-profile .preview-divider span {
  width: 70px;
  height: 1px;
  background: #bfa98e;
}

.page-sender-profile .preview-content p {
  margin: 0 auto 12px;
  max-width: 440px;
  color: #4f4740;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.page-sender-profile .preview-customer-line {
  color: #2b2723 !important;
  font-weight: 850 !important;
}

.page-sender-profile .actual-email-preview .preview-body button,
.page-sender-profile .preview-content button {
  width: auto;
  min-height: 54px;
  margin: 14px auto 18px;
  padding: 0 34px;
  border: 0;
  border-radius: 22px;
  background: #a88f70;
  color: #fff;
  font-size: 16px;
  font-weight: 850;
  box-shadow: 0 12px 24px rgba(91, 72, 52, 0.2);
}

.page-sender-profile .preview-details {
  margin-top: 18px;
  border-top: 1px solid #eee3d8;
}

.page-sender-profile .preview-details div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #eee3d8;
  color: #8a8075;
  font-size: 13px;
}

.page-sender-profile .preview-details strong {
  color: #2b2723;
}

.page-sender-profile .preview-signature-block {
  display: flex;
  gap: 18px;
  padding: 26px;
  border-top: 1px solid #eadfce;
  background: #fbf4ec;
}

.page-sender-profile .preview-signature-block .preview-avatar {
  width: 82px;
  height: 82px;
  min-width: 82px;
  border: 1px solid #eadfce;
  border-radius: 18px;
  background: #f7efe6;
  box-shadow: 0 12px 24px rgba(48, 38, 28, 0.1);
}

.page-sender-profile .preview-signature-block strong,
.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b {
  display: block;
}

.page-sender-profile .preview-signature-block strong {
  color: #1f1b17;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.page-sender-profile .preview-signature-block span {
  margin-top: 5px;
  color: #5c5148;
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.page-sender-profile .preview-signature-block b {
  margin-top: 8px;
  color: #2b2723;
  font-size: 14px;
  font-weight: 850;
}

.page-sender-profile .actual-email-preview .preview-footer {
  margin: 0;
  padding: 18px 24px;
  border-top: 1px solid #eadfce;
  background: #f4eee6;
  text-align: center;
}

.page-sender-profile .actual-email-preview .preview-footer span {
  color: #8a8075;
  font-size: 12px;
}

/* Ultimate shared sidebar/mobile shell. Keep every Webflow page identical to Create Contract. */
body.page-dashboard-redesign,
body.page-create-redesign,
body.page-review-redesign,
body.page-quote-placement-redesign,
body.page-sender-profile,
body.page-template-redesign {
  --sidebar-width: 288px;
  --sidebar-x: 32px;
  --sidebar-y: 36px;
}

.page-dashboard-redesign .app-sidebar,
.page-create-redesign .app-sidebar,
.page-review-redesign .app-sidebar,
.page-quote-placement-redesign .app-sidebar,
.page-sender-profile .app-sidebar,
.page-template-redesign .app-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: var(--sidebar-y) var(--sidebar-x) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-right: 1px solid var(--line, #dfe5f0) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

.page-dashboard-redesign .brand-block,
.page-create-redesign .brand-block,
.page-review-redesign .brand-block,
.page-quote-placement-redesign .brand-block,
.page-sender-profile .brand-block,
.page-template-redesign .brand-block {
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--line, #dfe5f0) !important;
}

.page-dashboard-redesign .app-sidebar .brand-block .costco-wordmark,
.page-create-redesign .app-sidebar .brand-block .costco-wordmark,
.page-review-redesign .app-sidebar .brand-block .costco-wordmark,
.page-quote-placement-redesign .app-sidebar .brand-block .costco-wordmark,
.page-sender-profile .app-sidebar .brand-block .costco-wordmark,
.page-template-redesign .app-sidebar .brand-block .costco-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 178px !important;
  max-width: 178px !important;
  margin: 0 0 26px !important;
  overflow: visible !important;
  transform: none !important;
  color: #ed002f !important;
  letter-spacing: -0.07em !important;
  line-height: 0.82 !important;
}

.page-dashboard-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-create-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-review-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-quote-placement-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-sender-profile .app-sidebar .brand-block .costco-wordmark span,
.page-template-redesign .app-sidebar .brand-block .costco-wordmark span {
  display: block !important;
  color: #ed002f !important;
  font-size: 41px !important;
  font-weight: 1000 !important;
  line-height: 0.82 !important;
}

.page-dashboard-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-create-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-review-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-quote-placement-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-sender-profile .app-sidebar .brand-block .costco-wordmark small,
.page-template-redesign .app-sidebar .brand-block .costco-wordmark small {
  display: block !important;
  width: 101px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
  border-top: 4px solid #005daa !important;
  box-shadow: 0 4px 0 #005daa !important;
  color: #005daa !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.page-dashboard-redesign .sidebar-nav,
.page-create-redesign .sidebar-nav,
.page-review-redesign .sidebar-nav,
.page-quote-placement-redesign .sidebar-nav,
.page-sender-profile .sidebar-nav,
.page-template-redesign .sidebar-nav,
.page-dashboard-redesign .sidebar-bottom,
.page-create-redesign .sidebar-bottom,
.page-review-redesign .sidebar-bottom,
.page-quote-placement-redesign .sidebar-bottom,
.page-sender-profile .sidebar-bottom,
.page-template-redesign .sidebar-bottom {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

.page-dashboard-redesign .sidebar-bottom,
.page-create-redesign .sidebar-bottom,
.page-review-redesign .sidebar-bottom,
.page-quote-placement-redesign .sidebar-bottom,
.page-sender-profile .sidebar-bottom,
.page-template-redesign .sidebar-bottom {
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line, #dfe5f0) !important;
}

.page-dashboard-redesign .nav-link,
.page-create-redesign .nav-link,
.page-review-redesign .nav-link,
.page-quote-placement-redesign .nav-link,
.page-sender-profile .nav-link,
.page-template-redesign .nav-link,
.page-dashboard-redesign .sidebar-notification summary,
.page-create-redesign .sidebar-notification summary,
.page-review-redesign .sidebar-notification summary,
.page-quote-placement-redesign .sidebar-notification summary,
.page-sender-profile .sidebar-notification summary,
.page-template-redesign .sidebar-notification summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 17px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink, #071430) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  list-style: none !important;
  transform: none !important;
}

.page-dashboard-redesign .nav-link:hover,
.page-create-redesign .nav-link:hover,
.page-review-redesign .nav-link:hover,
.page-quote-placement-redesign .nav-link:hover,
.page-sender-profile .nav-link:hover,
.page-template-redesign .nav-link:hover,
.page-dashboard-redesign .sidebar-notification summary:hover,
.page-create-redesign .sidebar-notification summary:hover,
.page-review-redesign .sidebar-notification summary:hover,
.page-quote-placement-redesign .sidebar-notification summary:hover,
.page-sender-profile .sidebar-notification summary:hover,
.page-template-redesign .sidebar-notification summary:hover {
  background: #f5f7fb !important;
  color: #ed002f !important;
  transform: translateX(2px) !important;
}

.page-dashboard-redesign .nav-link.active,
.page-create-redesign .nav-link.active,
.page-review-redesign .nav-link.active,
.page-quote-placement-redesign .nav-link.active,
.page-sender-profile .nav-link.active,
.page-template-redesign .nav-link.active {
  color: #ed002f !important;
  background: #fff0f3 !important;
  box-shadow: inset 4px 0 0 #ed002f !important;
}

.page-dashboard-redesign .nav-link.secondary,
.page-create-redesign .nav-link.secondary,
.page-review-redesign .nav-link.secondary,
.page-quote-placement-redesign .nav-link.secondary,
.page-sender-profile .nav-link.secondary,
.page-template-redesign .nav-link.secondary,
.page-dashboard-redesign .sidebar-notification summary,
.page-create-redesign .sidebar-notification summary,
.page-review-redesign .sidebar-notification summary,
.page-quote-placement-redesign .sidebar-notification summary,
.page-sender-profile .sidebar-notification summary,
.page-template-redesign .sidebar-notification summary {
  color: var(--muted, #5b6685) !important;
}

.page-dashboard-redesign .nav-icon,
.page-create-redesign .nav-icon,
.page-review-redesign .nav-icon,
.page-quote-placement-redesign .nav-icon,
.page-sender-profile .nav-icon,
.page-template-redesign .nav-icon,
.page-dashboard-redesign .sidebar-notification-icon,
.page-create-redesign .sidebar-notification-icon,
.page-review-redesign .sidebar-notification-icon,
.page-quote-placement-redesign .sidebar-notification-icon,
.page-sender-profile .sidebar-notification-icon,
.page-template-redesign .sidebar-notification-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  background: none !important;
  color: currentColor !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.page-dashboard-redesign .nav-icon svg,
.page-create-redesign .nav-icon svg,
.page-review-redesign .nav-icon svg,
.page-quote-placement-redesign .nav-icon svg,
.page-sender-profile .nav-icon svg,
.page-template-redesign .nav-icon svg,
.page-dashboard-redesign .mobile-nav svg,
.page-create-redesign .mobile-nav svg,
.page-review-redesign .mobile-nav svg,
.page-quote-placement-redesign .mobile-nav svg,
.page-sender-profile .mobile-nav svg,
.page-template-redesign .mobile-nav svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-dashboard-redesign .sidebar-notification,
.page-create-redesign .sidebar-notification,
.page-review-redesign .sidebar-notification,
.page-quote-placement-redesign .sidebar-notification,
.page-sender-profile .sidebar-notification,
.page-template-redesign .sidebar-notification {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.page-dashboard-redesign .sidebar-bottom > .nav-link.secondary,
.page-create-redesign .sidebar-bottom > .nav-link.secondary,
.page-review-redesign .sidebar-bottom > .nav-link.secondary,
.page-quote-placement-redesign .sidebar-bottom > .nav-link.secondary,
.page-sender-profile .sidebar-bottom > .nav-link.secondary,
.page-template-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

.page-dashboard-redesign .sidebar-bottom > .user-card,
.page-create-redesign .sidebar-bottom > .user-card,
.page-review-redesign .sidebar-bottom > .user-card,
.page-quote-placement-redesign .sidebar-bottom > .user-card,
.page-sender-profile .sidebar-bottom > .user-card,
.page-template-redesign .sidebar-bottom > .user-card {
  order: 3 !important;
}

.page-dashboard-redesign .sidebar-notification summary::-webkit-details-marker,
.page-create-redesign .sidebar-notification summary::-webkit-details-marker,
.page-review-redesign .sidebar-notification summary::-webkit-details-marker,
.page-quote-placement-redesign .sidebar-notification summary::-webkit-details-marker,
.page-sender-profile .sidebar-notification summary::-webkit-details-marker,
.page-template-redesign .sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

.page-dashboard-redesign .sidebar-notification-icon::before,
.page-create-redesign .sidebar-notification-icon::before,
.page-review-redesign .sidebar-notification-icon::before,
.page-quote-placement-redesign .sidebar-notification-icon::before,
.page-sender-profile .sidebar-notification-icon::before,
.page-template-redesign .sidebar-notification-icon::before {
  content: "" !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.page-dashboard-redesign .sidebar-notification-icon.has-alert::after,
.page-create-redesign .sidebar-notification-icon.has-alert::after,
.page-review-redesign .sidebar-notification-icon.has-alert::after,
.page-quote-placement-redesign .sidebar-notification-icon.has-alert::after,
.page-sender-profile .sidebar-notification-icon.has-alert::after,
.page-template-redesign .sidebar-notification-icon.has-alert::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  right: 2px !important;
  left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ed002f !important;
  box-shadow: 0 0 0 2px #fff !important;
}

.page-dashboard-redesign .sidebar-notification summary b,
.page-create-redesign .sidebar-notification summary b,
.page-review-redesign .sidebar-notification summary b,
.page-quote-placement-redesign .sidebar-notification summary b,
.page-sender-profile .sidebar-notification summary b,
.page-template-redesign .sidebar-notification summary b {
  min-width: 24px !important;
  margin-left: auto !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #ed002f !important;
  color: #fff !important;
  font-size: 11px !important;
  text-align: center !important;
}

.page-dashboard-redesign .sidebar-notification-panel,
.page-create-redesign .sidebar-notification-panel,
.page-review-redesign .sidebar-notification-panel,
.page-quote-placement-redesign .sidebar-notification-panel,
.page-sender-profile .sidebar-notification-panel,
.page-template-redesign .sidebar-notification-panel {
  margin: 8px 0 0 !important;
  padding: 10px !important;
  border: 1px solid var(--line, #dfe5f0) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(7, 20, 48, 0.08) !important;
}

.page-dashboard-redesign .notification-item,
.page-create-redesign .notification-item,
.page-review-redesign .notification-item,
.page-quote-placement-redesign .notification-item,
.page-sender-profile .notification-item,
.page-template-redesign .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
  padding: 9px !important;
}

.page-dashboard-redesign .notification-item a,
.page-create-redesign .notification-item a,
.page-review-redesign .notification-item a,
.page-quote-placement-redesign .notification-item a,
.page-sender-profile .notification-item a,
.page-template-redesign .notification-item a {
  min-width: 0 !important;
  padding: 0 !important;
}

.page-dashboard-redesign .notification-dismiss,
.page-create-redesign .notification-dismiss,
.page-review-redesign .notification-dismiss,
.page-quote-placement-redesign .notification-dismiss,
.page-sender-profile .notification-dismiss,
.page-template-redesign .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .notification-dismiss:hover,
.page-create-redesign .notification-dismiss:hover,
.page-review-redesign .notification-dismiss:hover,
.page-quote-placement-redesign .notification-dismiss:hover,
.page-sender-profile .notification-dismiss:hover,
.page-template-redesign .notification-dismiss:hover {
  color: #ed002f !important;
}

.page-dashboard-redesign .user-card,
.page-create-redesign .user-card,
.page-review-redesign .user-card,
.page-quote-placement-redesign .user-card,
.page-sender-profile .user-card,
.page-template-redesign .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line, #dfe5f0) !important;
  border-radius: 14px !important;
  background: #f7f9fd !important;
}

.page-dashboard-redesign .user-profile-link,
.page-create-redesign .user-profile-link,
.page-review-redesign .user-profile-link,
.page-quote-placement-redesign .user-profile-link,
.page-sender-profile .user-profile-link,
.page-template-redesign .user-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.page-dashboard-redesign .user-logout-link,
.page-create-redesign .user-logout-link,
.page-review-redesign .user-logout-link,
.page-quote-placement-redesign .user-logout-link,
.page-sender-profile .user-logout-link,
.page-template-redesign .user-logout-link {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--muted, #5b6685) !important;
}

.page-dashboard-redesign .user-logout-link:hover,
.page-create-redesign .user-logout-link:hover,
.page-review-redesign .user-logout-link:hover,
.page-quote-placement-redesign .user-logout-link:hover,
.page-sender-profile .user-logout-link:hover,
.page-template-redesign .user-logout-link:hover {
  color: #ed002f !important;
}

.page-dashboard-redesign .user-logout-link svg,
.page-create-redesign .user-logout-link svg,
.page-review-redesign .user-logout-link svg,
.page-quote-placement-redesign .user-logout-link svg,
.page-sender-profile .user-logout-link svg,
.page-template-redesign .user-logout-link svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-dashboard-redesign .user-avatar,
.page-create-redesign .user-avatar,
.page-review-redesign .user-avatar,
.page-quote-placement-redesign .user-avatar,
.page-sender-profile .user-avatar,
.page-template-redesign .user-avatar,
.page-dashboard-redesign .user-avatar-img,
.page-create-redesign .user-avatar-img,
.page-review-redesign .user-avatar-img,
.page-quote-placement-redesign .user-avatar-img,
.page-sender-profile .user-avatar-img,
.page-template-redesign .user-avatar-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
}

.page-dashboard-redesign .user-avatar,
.page-create-redesign .user-avatar,
.page-review-redesign .user-avatar,
.page-quote-placement-redesign .user-avatar,
.page-sender-profile .user-avatar,
.page-template-redesign .user-avatar {
  display: grid !important;
  place-items: center !important;
  background: #071430 !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.page-dashboard-redesign .user-avatar-img,
.page-create-redesign .user-avatar-img,
.page-review-redesign .user-avatar-img,
.page-quote-placement-redesign .user-avatar-img,
.page-sender-profile .user-avatar-img,
.page-template-redesign .user-avatar-img {
  object-fit: cover !important;
}

.page-dashboard-redesign .user-card strong,
.page-create-redesign .user-card strong,
.page-review-redesign .user-card strong,
.page-quote-placement-redesign .user-card strong,
.page-sender-profile .user-card strong,
.page-template-redesign .user-card strong,
.page-dashboard-redesign .user-card span,
.page-create-redesign .user-card span,
.page-review-redesign .user-card span,
.page-quote-placement-redesign .user-card span,
.page-sender-profile .user-card span,
.page-template-redesign .user-card span {
  display: block !important;
  max-width: 118px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-dashboard-redesign .user-card strong,
.page-create-redesign .user-card strong,
.page-review-redesign .user-card strong,
.page-quote-placement-redesign .user-card strong,
.page-sender-profile .user-card strong,
.page-template-redesign .user-card strong {
  color: var(--ink, #071430) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.page-dashboard-redesign .user-card span,
.page-create-redesign .user-card span,
.page-review-redesign .user-card span,
.page-quote-placement-redesign .user-card span,
.page-sender-profile .user-card span,
.page-template-redesign .user-card span {
  color: var(--muted, #5b6685) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

@media (max-width: 1180px) {
  body.page-dashboard-redesign,
  body.page-create-redesign,
  body.page-review-redesign,
  body.page-quote-placement-redesign,
  body.page-sender-profile,
  body.page-template-redesign {
    --sidebar-width: 250px;
    --sidebar-x: 22px;
  }

  .page-template-redesign .page-header,
  .page-template-redesign .step-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-template-redesign .template-summary,
  .page-template-redesign .template-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .page-dashboard-redesign .app-sidebar,
  .page-create-redesign .app-sidebar,
  .page-review-redesign .app-sidebar,
  .page-quote-placement-redesign .app-sidebar,
  .page-sender-profile .app-sidebar,
  .page-template-redesign .app-sidebar {
    display: none !important;
  }

  .page-template-redesign .contract-app {
    --page-x: 22px;
    --page-y: 28px;
    --card-pad: 24px;
    padding-bottom: 112px;
  }

  .page-template-redesign .app-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: var(--page-y) var(--page-x) 120px !important;
  }

  .page-template-redesign .primary-btn,
  .page-template-redesign .activate-btn {
    width: 100%;
    min-width: 0;
  }

  .page-template-redesign .action-card {
    align-items: stretch;
    flex-direction: column;
  }

  .page-template-redesign .mobile-nav,
  .page-dashboard-redesign .mobile-nav,
  .page-create-redesign .mobile-nav,
  .page-review-redesign .mobile-nav,
  .page-quote-placement-redesign .mobile-nav,
  .page-sender-profile .mobile-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 50 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 8px !important;
    border: 1px solid var(--line, #dfe5f0) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16) !important;
    backdrop-filter: blur(18px) !important;
  }

  .page-template-redesign .mobile-nav a,
  .page-dashboard-redesign .mobile-nav a,
  .page-create-redesign .mobile-nav a,
  .page-review-redesign .mobile-nav a,
  .page-quote-placement-redesign .mobile-nav a,
  .page-sender-profile .mobile-nav a {
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    color: var(--muted, #5b6685) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .page-template-redesign .mobile-nav a.active,
  .page-dashboard-redesign .mobile-nav a.active,
  .page-create-redesign .mobile-nav a.active,
  .page-review-redesign .mobile-nav a.active,
  .page-quote-placement-redesign .mobile-nav a.active,
  .page-sender-profile .mobile-nav a.active {
    background: #fff0f3 !important;
    color: #ed002f !important;
  }
}

@media (max-width: 560px) {
  .page-template-redesign .contract-app {
    --page-x: 12px;
    --page-y: 18px;
    --card-pad: 18px;
  }

  .page-template-redesign .page-header h1 {
    font-size: 39px;
  }

  .page-template-redesign .upload-card,
  .page-template-redesign .notes-card {
    padding: 16px;
  }

  .page-template-redesign .upload-card-top,
  .page-template-redesign .drop-zone,
  .page-template-redesign .backup-row,
  .page-sender-profile .preview-signature-block {
    align-items: stretch;
    flex-direction: column;
  }

  .page-template-redesign .file-btn {
    width: 100%;
  }

  .page-template-redesign .drop-text {
    text-align: center;
  }
}

/* Final sender/settings recovery: this page shares the modern shell but older sidebar rules
   can otherwise collapse the content into the blank state shown on /profile. */
.page-sender-profile .contract-app {
  display: block !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

.page-sender-profile .app-main {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin-left: var(--sidebar-width) !important;
  padding: var(--page-y) var(--page-x) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.page-sender-profile #senderProfileForm,
.page-sender-profile .page-header,
.page-sender-profile .sender-layout,
.page-sender-profile .sender-fields,
.page-sender-profile .profile-card,
.page-sender-profile .action-card,
.page-sender-profile .email-preview-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.page-sender-profile .page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

.page-sender-profile .sender-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
  gap: 22px !important;
  align-items: start !important;
}

.page-sender-profile .sender-fields {
  display: grid !important;
  gap: 18px !important;
}

.page-sender-profile .app-sidebar {
  display: flex !important;
  flex-direction: column !important;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  overflow: hidden auto !important;
}

.page-sender-profile .sidebar-nav,
.page-sender-profile .sidebar-bottom {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.page-sender-profile .sidebar-nav {
  margin-top: 46px !important;
}

.page-sender-profile .sidebar-bottom {
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
}

.page-sender-profile .sidebar-bottom > .sidebar-notification {
  order: 1 !important;
}

.page-sender-profile .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

.page-sender-profile .sidebar-bottom > .user-card {
  order: 3 !important;
}

.page-sender-profile .nav-link,
.page-sender-profile .sidebar-notification summary,
.page-sender-profile .user-profile-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 58px !important;
  gap: 17px !important;
}

.page-sender-profile .nav-link.active,
.page-sender-profile .nav-link.active *,
.page-sender-profile .nav-link:hover,
.page-sender-profile .nav-link:hover *,
.page-sender-profile .sidebar-notification summary:hover,
.page-sender-profile .sidebar-notification summary:hover * {
  color: var(--red) !important;
}

.page-sender-profile .nav-link::before,
.page-sender-profile .sidebar-bottom a::before {
  display: none !important;
  content: none !important;
}

.page-sender-profile .mobile-nav {
  display: none !important;
}

.page-sender-profile .sidebar-notification-panel .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
}

.page-sender-profile .sidebar-notification-panel .notification-item[hidden] {
  display: none !important;
}

.page-sender-profile .sidebar-notification-panel .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.page-sender-profile .sidebar-notification-panel .notification-dismiss:hover {
  background: transparent !important;
  color: var(--red) !important;
}

@media (max-width: 1180px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 920px) {
  .page-sender-profile .app-sidebar {
    display: none !important;
  }

  .page-sender-profile .app-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: var(--page-y) var(--page-x) 120px !important;
  }

  .page-sender-profile .mobile-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 50 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Absolute final notification close-button override for every redesigned shell page. */
.page-dashboard-redesign .sidebar-notification-panel .notification-item,
.page-create-redesign .sidebar-notification-panel .notification-item,
.page-review-redesign .sidebar-notification-panel .notification-item,
.page-quote-placement-redesign .sidebar-notification-panel .notification-item,
.page-sender-profile .sidebar-notification-panel .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
}

.page-dashboard-redesign .sidebar-notification-panel .notification-item[hidden],
.page-create-redesign .sidebar-notification-panel .notification-item[hidden],
.page-review-redesign .sidebar-notification-panel .notification-item[hidden],
.page-quote-placement-redesign .sidebar-notification-panel .notification-item[hidden],
.page-sender-profile .sidebar-notification-panel .notification-item[hidden] {
  display: none !important;
}

.page-dashboard-redesign .sidebar-notification-panel .notification-dismiss,
.page-create-redesign .sidebar-notification-panel .notification-dismiss,
.page-review-redesign .sidebar-notification-panel .notification-dismiss,
.page-quote-placement-redesign .sidebar-notification-panel .notification-dismiss,
.page-sender-profile .sidebar-notification-panel .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .sidebar-notification-panel .notification-dismiss:hover,
.page-create-redesign .sidebar-notification-panel .notification-dismiss:hover,
.page-review-redesign .sidebar-notification-panel .notification-dismiss:hover,
.page-quote-placement-redesign .sidebar-notification-panel .notification-dismiss:hover,
.page-sender-profile .sidebar-notification-panel .notification-dismiss:hover {
  background: transparent !important;
  color: #ed002f !important;
}

/* Latest shared shell overrides: keep the reused sidebar identical on every Webflow-style page. */
.page-dashboard-redesign .app-sidebar .brand-block .costco-wordmark,
.page-create-redesign .app-sidebar .brand-block .costco-wordmark,
.page-review-redesign .app-sidebar .brand-block .costco-wordmark,
.page-quote-placement-redesign .app-sidebar .brand-block .costco-wordmark,
.page-sender-profile .app-sidebar .brand-block .costco-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 178px !important;
  max-width: 178px !important;
  margin-bottom: 26px !important;
  overflow: visible !important;
  transform: none !important;
  color: #ed002f !important;
  letter-spacing: -0.07em !important;
  line-height: 0.82 !important;
}

.page-dashboard-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-create-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-review-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-quote-placement-redesign .app-sidebar .brand-block .costco-wordmark span,
.page-sender-profile .app-sidebar .brand-block .costco-wordmark span {
  display: block !important;
  color: #ed002f !important;
  font-size: 41px !important;
  font-weight: 1000 !important;
  line-height: 0.82 !important;
}

.page-dashboard-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-create-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-review-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-quote-placement-redesign .app-sidebar .brand-block .costco-wordmark small,
.page-sender-profile .app-sidebar .brand-block .costco-wordmark small {
  display: block !important;
  width: 101px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
  border-top: 4px solid #005daa !important;
  box-shadow: 0 4px 0 #005daa !important;
  color: #005daa !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .app-sidebar .nav-icon,
.page-create-redesign .app-sidebar .nav-icon,
.page-review-redesign .app-sidebar .nav-icon,
.page-quote-placement-redesign .app-sidebar .nav-icon,
.page-sender-profile .app-sidebar .nav-icon,
.page-dashboard-redesign .app-sidebar .sidebar-notification-icon,
.page-create-redesign .app-sidebar .sidebar-notification-icon,
.page-review-redesign .app-sidebar .sidebar-notification-icon,
.page-quote-placement-redesign .app-sidebar .sidebar-notification-icon,
.page-sender-profile .app-sidebar .sidebar-notification-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.page-dashboard-redesign .app-sidebar .nav-icon svg,
.page-create-redesign .app-sidebar .nav-icon svg,
.page-review-redesign .app-sidebar .nav-icon svg,
.page-quote-placement-redesign .app-sidebar .nav-icon svg,
.page-sender-profile .app-sidebar .nav-icon svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-dashboard-redesign .mobile-nav svg,
.page-create-redesign .mobile-nav svg,
.page-review-redesign .mobile-nav svg,
.page-quote-placement-redesign .mobile-nav svg,
.page-sender-profile .mobile-nav svg {
  width: 23px !important;
  height: 23px !important;
  min-width: 0 !important;
}

.page-dashboard-redesign .app-sidebar .sidebar-notification-icon::before,
.page-create-redesign .app-sidebar .sidebar-notification-icon::before,
.page-review-redesign .app-sidebar .sidebar-notification-icon::before,
.page-quote-placement-redesign .app-sidebar .sidebar-notification-icon::before,
.page-sender-profile .app-sidebar .sidebar-notification-icon::before {
  content: "" !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.page-dashboard-redesign .app-sidebar .sidebar-notification-icon.has-alert::after,
.page-create-redesign .app-sidebar .sidebar-notification-icon.has-alert::after,
.page-review-redesign .app-sidebar .sidebar-notification-icon.has-alert::after,
.page-quote-placement-redesign .app-sidebar .sidebar-notification-icon.has-alert::after,
.page-sender-profile .app-sidebar .sidebar-notification-icon.has-alert::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  right: 2px !important;
  left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ed002f !important;
  box-shadow: 0 0 0 2px #fff !important;
}

.page-dashboard-redesign .app-sidebar .sidebar-notification summary,
.page-create-redesign .app-sidebar .sidebar-notification summary,
.page-review-redesign .app-sidebar .sidebar-notification summary,
.page-quote-placement-redesign .app-sidebar .sidebar-notification summary,
.page-sender-profile .app-sidebar .sidebar-notification summary {
  overflow: visible !important;
}

.page-dashboard-redesign .app-sidebar .sidebar-notification-panel .notification-item,
.page-create-redesign .app-sidebar .sidebar-notification-panel .notification-item,
.page-review-redesign .app-sidebar .sidebar-notification-panel .notification-item,
.page-quote-placement-redesign .app-sidebar .sidebar-notification-panel .notification-item,
.page-sender-profile .app-sidebar .sidebar-notification-panel .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
}

.page-dashboard-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss,
.page-create-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss,
.page-review-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss,
.page-quote-placement-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss,
.page-sender-profile .app-sidebar .sidebar-notification-panel .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss:hover,
.page-create-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss:hover,
.page-review-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss:hover,
.page-quote-placement-redesign .app-sidebar .sidebar-notification-panel .notification-dismiss:hover,
.page-sender-profile .app-sidebar .sidebar-notification-panel .notification-dismiss:hover {
  background: transparent !important;
  color: #ed002f !important;
}

/* Dashboard redesign */
body.page-dashboard-redesign {
  margin: 0;
  min-height: 100vh;
  background: #f6f8fc;
  color: #071430;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-dashboard-redesign * {
  box-sizing: border-box;
}

.page-dashboard-redesign .contract-app {
  --app-bg: #f6f8fc;
  --ink: #071430;
  --muted: #5b6685;
  --line: #dfe5f0;
  --line-strong: #cfd7e6;
  --red: #ed002f;
  --red-dark: #c90026;
  --red-soft: #fff0f3;
  --green: #13ba73;
  --blue: #168bd9;
  --gold: #b86b00;
  --purple: #654bff;
  --sidebar-width: 288px;
  --page-x: clamp(28px, 4vw, 64px);
  --page-y: clamp(28px, 3.5vw, 48px);
  --sidebar-x: 32px;
  --sidebar-y: 36px;
  --card-pad: clamp(24px, 2.4vw, 34px);
  --radius-xl: 22px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 38px rgba(7, 20, 48, 0.055);
  --shadow-button: 0 18px 38px rgba(237, 0, 47, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 100%);
  color: var(--ink);
  line-height: 1.45;
}

.page-dashboard-redesign a {
  color: inherit;
  text-decoration: none;
}

.page-dashboard-redesign input,
.page-dashboard-redesign button {
  font: inherit;
}

.page-dashboard-redesign .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  padding: var(--sidebar-y) var(--sidebar-x);
  overflow: hidden auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.page-dashboard-redesign .brand-block {
  flex: 0 0 auto;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.page-dashboard-redesign .brand-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.page-dashboard-redesign .brand-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.page-dashboard-redesign .sidebar-nav,
.page-dashboard-redesign .sidebar-bottom {
  display: grid;
  gap: 10px;
}

.page-dashboard-redesign .sidebar-nav {
  margin-top: 46px;
}

.page-dashboard-redesign .sidebar-bottom {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.page-dashboard-redesign .nav-link,
.page-dashboard-redesign .sidebar-notification summary {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  list-style: none;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}

.page-dashboard-redesign .nav-link:hover,
.page-dashboard-redesign .sidebar-notification summary:hover {
  background: #f5f7fb;
  color: var(--red);
  transform: translateX(2px);
}

.page-dashboard-redesign .nav-link.active {
  color: var(--red);
  background: var(--red-soft);
  box-shadow: inset 4px 0 0 var(--red);
}

.page-dashboard-redesign .nav-link.secondary,
.page-dashboard-redesign .sidebar-notification summary {
  color: var(--muted);
}

.page-dashboard-redesign .nav-icon,
.page-dashboard-redesign .sidebar-notification-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  color: currentColor;
}

.page-dashboard-redesign .nav-icon svg,
.page-dashboard-redesign .mobile-nav svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-dashboard-redesign .app-main {
  width: calc(100% - var(--sidebar-width));
  max-width: calc(1540px + var(--sidebar-width));
  margin-left: var(--sidebar-width);
  padding: var(--page-y) var(--page-x);
}

.page-dashboard-redesign .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 26px;
}

.page-dashboard-redesign .eyebrow {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-dashboard-redesign .page-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4vw, 62px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.015em;
}

.page-dashboard-redesign .page-subtitle {
  max-width: 780px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 750;
}

.page-dashboard-redesign .primary-btn {
  min-width: 235px;
  min-height: 62px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 30px;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  box-shadow: var(--shadow-button);
  white-space: nowrap;
}

.page-dashboard-redesign .primary-btn:hover {
  background: var(--red-dark);
}

.page-dashboard-redesign .primary-btn span {
  font-size: 27px;
  font-weight: 950;
}

.page-dashboard-redesign .dashboard-card {
  min-height: calc(100vh - (var(--page-y) * 2));
  overflow: hidden;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-dashboard-redesign .contracts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.page-dashboard-redesign .contracts-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1;
  font-weight: 950;
}

.page-dashboard-redesign .contracts-head p {
  margin: 9px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.page-dashboard-redesign .cleanup-box {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.page-dashboard-redesign .secondary-btn {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 22px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(7, 20, 48, 0.035);
}

.page-dashboard-redesign .cleanup-box span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.page-dashboard-redesign .dashboard-toolbar {
  display: grid;
  gap: 18px;
  padding: 28px 0;
}

.page-dashboard-redesign .search-box {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 720px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: #fff;
}

.page-dashboard-redesign .search-box svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-dashboard-redesign .search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
}

.page-dashboard-redesign .filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f5f7fc;
}

.page-dashboard-redesign .filter-tab {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.page-dashboard-redesign .filter-tab.active {
  background: #fff;
  color: var(--red);
  box-shadow: 0 0 0 1px rgba(237, 0, 47, 0.45);
}

.page-dashboard-redesign .table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.page-dashboard-redesign .contracts-table {
  width: 100% !important;
  min-width: 1120px !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-collapse: collapse;
  table-layout: fixed;
}

.page-dashboard-redesign .contracts-table th,
.page-dashboard-redesign .contracts-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.page-dashboard-redesign .contracts-table th:last-child,
.page-dashboard-redesign .contracts-table td:last-child {
  border-right: 0;
}

.page-dashboard-redesign .contracts-table tr:last-child td {
  border-bottom: 0;
}

.page-dashboard-redesign .contracts-table th {
  padding: 15px 18px;
  background: #f6f8fd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page-dashboard-redesign .contracts-table td {
  padding: 20px 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.page-dashboard-redesign .customer-cell {
  min-width: 210px;
}

.page-dashboard-redesign .customer-link strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-weight: 950;
}

.page-dashboard-redesign .customer-link span,
.page-dashboard-redesign .email-cell {
  color: var(--muted);
  font-weight: 750;
}

.page-dashboard-redesign .customer-link .customer-quote-total {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-weight: 800;
}

.page-dashboard-redesign .customer-quote-total b {
  color: var(--red);
  font-size: 14px;
  font-weight: 950;
}

.page-dashboard-redesign .customer-link .customer-shop-card {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-weight: 800;
}

.page-dashboard-redesign .customer-shop-card b {
  color: var(--ink);
  font-weight: 950;
}

.page-dashboard-redesign .customer-shop-card em {
  margin-left: 4px;
  color: var(--red);
  font-style: normal;
  font-weight: 950;
}

.page-dashboard-redesign .email-cell span,
.page-dashboard-redesign .email-cell small {
  display: block;
}

.page-dashboard-redesign .email-cell small {
  margin-top: 5px;
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
}

/* Automatic Create Contract workflow. */
.page-create-automatic .automatic-create-main {
  width: calc(100% - 288px) !important;
  max-width: none !important;
  margin-left: 288px !important;
  padding: 28px clamp(24px, 3vw, 54px) 42px !important;
  background: radial-gradient(circle at 90% 0%, rgba(237, 0, 47, .045), transparent 30%), #f8fafe !important;
}

.page-create-automatic .automatic-create-header,
.page-create-automatic .automatic-step-card,
.page-create-automatic .automatic-action-card,
.page-create-automatic .automatic-success-card {
  width: 100% !important;
  max-width: 1400px !important;
  margin-inline: auto !important;
}

.page-create-automatic .automatic-create-header {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 24px !important;
}

.page-create-automatic .automatic-header-icon {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 17px !important;
  background: var(--red-soft) !important;
  color: var(--red) !important;
  box-shadow: 0 8px 22px rgba(237, 0, 47, .1) !important;
}

.page-create-automatic .automatic-header-icon svg,
.page-create-automatic .automatic-choose-btn svg,
.page-create-automatic .automatic-upload-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-create-automatic .automatic-header-icon svg { width: 32px !important; height: 32px !important; }
.page-create-automatic .automatic-create-header h1 {
  margin: 0 !important;
  color: #071430 !important;
  font-size: clamp(32px, 3vw, 48px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
}

.page-create-automatic .automatic-create-header p {
  margin: 8px 0 0 !important;
  color: #66728d !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

.page-create-automatic .automatic-contract-form {
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
}

.page-create-automatic .automatic-step-card,
.page-create-automatic .automatic-action-card,
.page-create-automatic .automatic-success-card {
  border: 1px solid #dfe5ef !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 15px 45px rgba(17, 31, 61, .045) !important;
}

.page-create-automatic .automatic-step-card { padding: clamp(24px, 2.5vw, 38px) !important; }
.page-create-automatic .automatic-step-heading {
  display: flex !important;
  align-items: flex-start !important;
  gap: 17px !important;
  margin-bottom: 26px !important;
}
.page-create-automatic .automatic-step-heading.compact { margin-bottom: 24px !important; }
.page-create-automatic .automatic-step-number {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  box-shadow: 0 7px 17px rgba(17, 31, 61, .12) !important;
}
.page-create-automatic .automatic-step-number.red { background: var(--red) !important; }
.page-create-automatic .automatic-step-number.blue { background: #168bd2 !important; }
.page-create-automatic .automatic-step-heading h2 {
  margin: 2px 0 8px !important;
  color: #071430 !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  font-weight: 950 !important;
}
.page-create-automatic .automatic-step-heading p {
  max-width: 680px !important;
  margin: 0 !important;
  color: #66728d !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 750 !important;
}

.page-create-automatic .automatic-upload-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.35fr) minmax(330px, .9fr) !important;
  gap: 32px !important;
  align-items: stretch !important;
}
.page-create-automatic .automatic-drop-zone {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 320px !important;
  padding: 30px !important;
  border: 2px dashed rgba(237, 0, 47, .42) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(237, 0, 47, .018), rgba(255,255,255,.95)) !important;
  cursor: pointer !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}
.page-create-automatic .automatic-drop-zone:hover,
.page-create-automatic .automatic-drop-zone.drag-over {
  border-color: var(--red) !important;
  background: var(--red-soft) !important;
  transform: translateY(-2px) !important;
}
.page-create-automatic .automatic-drop-zone input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.page-create-automatic .automatic-upload-icon {
  display: grid !important;
  place-items: center !important;
  width: 82px !important;
  height: 82px !important;
  margin-bottom: 20px !important;
  border-radius: 999px !important;
  background: var(--red-soft) !important;
  color: var(--red) !important;
}
.page-create-automatic .automatic-upload-icon svg { width: 46px !important; height: 46px !important; }
.page-create-automatic .automatic-drop-zone h3 {
  margin: 0 0 8px !important;
  color: #071430 !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}
.page-create-automatic .automatic-drop-zone p {
  margin: 0 0 26px !important;
  color: #66728d !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}
.page-create-automatic .automatic-choose-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 190px !important;
  min-height: 54px !important;
  padding: 0 24px !important;
  border: 1.5px solid var(--red) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--red) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(237, 0, 47, .08) !important;
}
.page-create-automatic .automatic-choose-btn svg { width: 20px !important; height: 20px !important; }

.page-create-automatic .automatic-selected-panel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding-left: 30px !important;
  border-left: 1px solid #e1e6ef !important;
}
.page-create-automatic .automatic-selected-panel > h3 {
  margin: 4px 0 18px !important;
  color: #071430 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}
.page-create-automatic .automatic-file-list { display: grid !important; gap: 13px !important; }
.page-create-automatic .automatic-empty-files {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 150px !important;
  padding: 22px !important;
  border: 1px dashed #ccd4e2 !important;
  border-radius: 14px !important;
  color: #66728d !important;
  text-align: center !important;
}
.page-create-automatic .automatic-empty-files span { color: #27344f !important; font-weight: 900 !important; }
.page-create-automatic .automatic-empty-files small { margin-top: 6px !important; }
.page-create-automatic .automatic-file-row {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 82px !important;
  padding: 13px 14px !important;
  border: 1px solid #dbe1eb !important;
  border-radius: 14px !important;
  background: #fff !important;
}
.page-create-automatic .automatic-pdf-icon {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 48px !important;
  border: 2px solid var(--red) !important;
  border-radius: 7px !important;
  color: var(--red) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}
.page-create-automatic .automatic-file-row strong,
.page-create-automatic .automatic-file-row small { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.page-create-automatic .automatic-file-row strong { color: #071430 !important; font-size: 14px !important; font-weight: 950 !important; }
.page-create-automatic .automatic-file-row small { margin-top: 5px !important; color: #66728d !important; font-size: 12px !important; font-weight: 750 !important; }
.page-create-automatic .automatic-file-remove {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f3f6fa !important;
  color: #66728d !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.page-create-automatic .automatic-file-summary {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 78px !important;
  margin-top: auto !important;
  padding: 16px !important;
  border: 1px solid #e0e5ee !important;
  border-radius: 14px !important;
  background: #f7f9fc !important;
}
.page-create-automatic .automatic-file-summary.is-ready { border-color: #a8e4ca !important; background: #f1fcf7 !important; }
.page-create-automatic .automatic-summary-check {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 999px !important;
  background: #a9b2c2 !important;
  color: #fff !important;
  font-weight: 950 !important;
}
.page-create-automatic .automatic-file-summary.is-ready .automatic-summary-check { background: #11ae69 !important; }
.page-create-automatic .automatic-file-summary strong { display: block !important; color: #27344f !important; font-size: 14px !important; font-weight: 950 !important; }
.page-create-automatic .automatic-file-summary.is-ready strong { color: #079153 !important; }
.page-create-automatic .automatic-file-summary small { display: block !important; margin-top: 4px !important; color: #66728d !important; font-size: 12px !important; font-weight: 750 !important; }
.page-create-automatic .automatic-info-bar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 28px !important;
  padding: 16px 18px !important;
  border: 1px solid #b8daf2 !important;
  border-radius: 13px !important;
  background: #f3faff !important;
}
.page-create-automatic .automatic-info-bar span {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border-radius: 999px !important;
  background: #168bd2 !important;
  color: #fff !important;
  font-family: Georgia, serif !important;
  font-weight: 900 !important;
}
.page-create-automatic .automatic-info-bar p { margin: 0 !important; color: #53627e !important; font-size: 13px !important; font-weight: 800 !important; }

.page-create-automatic .automatic-date-section {
  display: grid !important;
  grid-template-columns: minmax(380px, 1fr) minmax(360px, .9fr) !important;
  gap: 46px !important;
  align-items: center !important;
}
.page-create-automatic .automatic-date-field { display: grid !important; gap: 9px !important; max-width: 530px !important; }
.page-create-automatic .automatic-date-field > span { color: #071430 !important; font-size: 14px !important; font-weight: 950 !important; }
.page-create-automatic .automatic-date-field b { color: var(--red) !important; }
.page-create-automatic .automatic-date-field input {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 16px !important;
  border: 1px solid #cbd4e2 !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #071430 !important;
  font: inherit !important;
  font-weight: 800 !important;
}
.page-create-automatic .automatic-date-field input:focus { border-color: #168bd2 !important; outline: 3px solid rgba(22, 139, 210, .12) !important; }
.page-create-automatic .automatic-date-field small { color: #66728d !important; font-size: 12px !important; font-weight: 750 !important; }
.page-create-automatic .automatic-explainer { display: grid !important; grid-template-columns: 180px 1fr !important; gap: 24px !important; align-items: center !important; }
.page-create-automatic .automatic-explainer h3 { margin: 0 0 12px !important; color: #071430 !important; font-size: 18px !important; font-weight: 950 !important; }
.page-create-automatic .automatic-explainer p { margin: 0 !important; color: #66728d !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 750 !important; }
.page-create-automatic .automatic-doc-stack { position: relative !important; min-height: 150px !important; }
.page-create-automatic .automatic-doc-stack span {
  position: absolute !important;
  width: 96px !important;
  height: 126px !important;
  border: 1px solid #d8dfeb !important;
  border-radius: 10px !important;
  background: linear-gradient(#edf5ff 0 16px, #fff 16px) !important;
  box-shadow: 0 12px 28px rgba(17, 31, 61, .08) !important;
}
.page-create-automatic .automatic-doc-stack span:first-child { left: 12px !important; top: 0 !important; transform: rotate(-7deg) !important; }
.page-create-automatic .automatic-doc-stack span:nth-child(2) { left: 55px !important; top: 24px !important; transform: rotate(4deg) !important; }
.page-create-automatic .automatic-doc-stack b {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border: 8px solid #eaf9f2 !important;
  border-radius: 999px !important;
  background: #11ae69 !important;
  color: #fff !important;
  font-size: 25px !important;
}

.page-create-automatic .automatic-action-card {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) minmax(320px, auto) !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 24px 28px !important;
}
.page-create-automatic .automatic-generate-btn,
.page-create-automatic .automatic-primary-btn,
.page-create-automatic .automatic-secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  min-height: 60px !important;
  padding: 0 30px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}
.page-create-automatic .automatic-generate-btn,
.page-create-automatic .automatic-primary-btn {
  border: 0 !important;
  background: linear-gradient(135deg, #ed002f, #ff1749) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(237, 0, 47, .2) !important;
  cursor: pointer !important;
}
.page-create-automatic .automatic-generate-btn:disabled { opacity: .55 !important; cursor: wait !important; }
.page-create-automatic .automatic-action-card > p { margin: 0 !important; color: #66728d !important; font-size: 13px !important; line-height: 1.55 !important; font-weight: 750 !important; }
.page-create-automatic .automatic-assurance { display: flex !important; align-items: center !important; gap: 14px !important; }
.page-create-automatic .automatic-assurance > span { display: grid !important; place-items: center !important; width: 50px !important; height: 50px !important; flex: 0 0 50px !important; border-radius: 999px !important; background: #f3f6fa !important; color: #53627e !important; font-size: 24px !important; }
.page-create-automatic .automatic-assurance p { margin: 0 !important; color: #66728d !important; font-size: 12px !important; line-height: 1.55 !important; font-weight: 750 !important; }
.page-create-automatic .automatic-assurance strong { color: #53627e !important; font-weight: 950 !important; }

.page-create-automatic .automatic-success-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: clamp(28px, 4vw, 52px) !important;
}
.page-create-automatic .automatic-success-check { display: grid !important; place-items: center !important; width: 64px !important; height: 64px !important; border-radius: 999px !important; background: #11ae69 !important; color: #fff !important; font-size: 30px !important; font-weight: 950 !important; }
.page-create-automatic .automatic-success-card h2 { margin: 4px 0 8px !important; color: #071430 !important; font-size: 30px !important; font-weight: 950 !important; }
.page-create-automatic .automatic-success-card p { margin: 0 !important; color: #66728d !important; font-weight: 750 !important; }
.page-create-automatic .automatic-kicker { color: #079153 !important; font-size: 12px !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.page-create-automatic .automatic-success-actions { display: flex !important; gap: 10px !important; }
.page-create-automatic .automatic-secondary-btn { border: 1px solid #cbd4e2 !important; background: #fff !important; color: #27344f !important; }

@media (max-width: 1100px) {
  .page-create-automatic .automatic-upload-layout,
  .page-create-automatic .automatic-date-section { grid-template-columns: 1fr !important; }
  .page-create-automatic .automatic-selected-panel { padding: 24px 0 0 !important; border-top: 1px solid #e1e6ef !important; border-left: 0 !important; }
  .page-create-automatic .automatic-file-summary { margin-top: 18px !important; }
  .page-create-automatic .automatic-action-card { grid-template-columns: auto 1fr !important; }
  .page-create-automatic .automatic-assurance { grid-column: 1 / -1 !important; }
}

@media (max-width: 760px) {
  .page-create-automatic .automatic-create-main { width: 100% !important; margin-left: 0 !important; padding: 22px 14px 110px !important; }
  .page-create-automatic .automatic-create-header h1 { font-size: 32px !important; }
  .page-create-automatic .automatic-header-icon { width: 50px !important; height: 50px !important; flex-basis: 50px !important; }
  .page-create-automatic .automatic-step-card { padding: 20px !important; }
  .page-create-automatic .automatic-drop-zone { min-height: 280px !important; padding: 22px 14px !important; text-align: center !important; }
  .page-create-automatic .automatic-explainer { grid-template-columns: 1fr !important; }
  .page-create-automatic .automatic-doc-stack { display: none !important; }
  .page-create-automatic .automatic-action-card,
  .page-create-automatic .automatic-success-card { grid-template-columns: 1fr !important; padding: 20px !important; }
  .page-create-automatic .automatic-generate-btn { width: 100% !important; }
  .page-create-automatic .automatic-success-actions { flex-direction: column !important; }
}

/* Signed records may be backdated, but the correction surface intentionally
   exposes no customer, pricing, initials, signature, or delivery controls. */
.signed-date-correction-card {
  display: grid;
  gap: 22px;
  margin-top: 20px;
  padding: clamp(22px, 2.3vw, 34px) !important;
  border-left: 4px solid #1268ed !important;
}

.signed-date-correction-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.signed-date-correction-head h2 {
  margin: 5px 0 8px;
  color: var(--ink);
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.05;
  font-weight: 950;
}

.signed-date-correction-head p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 750;
}

.signed-date-lock-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #bdd5fb;
  border-radius: 999px;
  background: #edf5ff;
  color: #075ecf;
  font-size: 13px;
  font-weight: 950;
}

.signed-date-correction-form {
  display: grid;
  gap: 18px;
}

.signed-date-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 12px;
}

.signed-date-correction-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.signed-date-correction-form label > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.signed-date-correction-form input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  outline: none;
}

.signed-date-correction-form input:focus {
  border-color: #1268ed;
  box-shadow: 0 0 0 3px rgba(18, 104, 237, .11);
}

.signed-date-correction-submit {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.signed-date-correction-submit .primary-btn {
  min-width: 210px;
}

.signed-date-history {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.signed-date-history summary {
  cursor: pointer;
  color: #075ecf;
  font-size: 14px;
  font-weight: 900;
}

.signed-date-history > div {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.signed-date-history p {
  margin: 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f7f9fc;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.signed-date-history p span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 1180px) {
  .signed-date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .signed-date-correction-head,
  .signed-date-correction-submit {
    grid-template-columns: 1fr;
    display: grid;
  }

  .signed-date-lock-badge { justify-self: start; }
  .signed-date-grid { grid-template-columns: 1fr; }
  .signed-date-correction-submit .primary-btn { width: 100%; min-width: 0; }
}

.page-dashboard-redesign .email-cell {
  min-width: 220px;
  white-space: nowrap;
}

.page-dashboard-redesign .timeline-cell {
  min-width: 310px;
}

.page-dashboard-redesign .actions-cell {
  min-width: 250px;
}

.page-dashboard-redesign .timeline-list {
  display: grid;
  gap: 5px;
}

.page-dashboard-redesign .timeline-list div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.page-dashboard-redesign .timeline-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-dashboard-redesign .timeline-list strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.page-dashboard-redesign .pill {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.page-dashboard-redesign .pill.green,
.page-dashboard-redesign .pill.mint {
  background: #e7fbf0;
  color: #04965b;
}

.page-dashboard-redesign .pill.gold {
  background: #fff4dd;
  color: #a15f00;
}

.page-dashboard-redesign .pill.red {
  background: #fff0f3;
  color: var(--red);
}

.page-dashboard-redesign .pill.gray {
  background: #eef2f7;
  color: #5b6685;
}

.page-dashboard-redesign .action-stack {
  display: grid;
  gap: 8px;
  align-items: start;
}

.page-dashboard-redesign .action-stack form {
  margin: 0;
}

.page-dashboard-redesign .row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.page-dashboard-redesign .row-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-dashboard-redesign .view-action {
  border: 0;
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 24px rgba(237, 0, 47, 0.14);
}

.page-dashboard-redesign .download-action {
  border: 1px solid rgba(22, 139, 217, 0.24);
  background: #eff8ff;
  color: #0969aa;
}

.page-dashboard-redesign .delete-action {
  border: 1px solid rgba(237, 0, 47, 0.18);
  background: #fff;
  color: var(--red);
}

.page-dashboard-redesign .disabled-action {
  border: 1px solid var(--line);
  background: #f7f9fd;
  color: var(--muted);
  cursor: not-allowed;
}

.page-dashboard-redesign .empty-state {
  display: none;
  padding: 44px 20px;
  text-align: center;
}

.page-dashboard-redesign .empty-state strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 950;
}

.page-dashboard-redesign .empty-state p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.page-dashboard-redesign .mobile-nav {
  display: none;
}

@media (max-width: 1180px) {
  .page-dashboard-redesign .contract-app {
    --sidebar-width: 250px;
    --page-x: 30px;
    --page-y: 34px;
    --sidebar-x: 22px;
  }

  .page-dashboard-redesign .page-header {
    flex-direction: column;
  }

  .page-dashboard-redesign .filter-tabs {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 920px) {
  .page-dashboard-redesign .contract-app {
    --page-x: 22px;
    --page-y: 28px;
    --card-pad: 24px;
    padding-bottom: 112px;
  }

  .page-dashboard-redesign .app-sidebar {
    display: none !important;
  }

  .page-dashboard-redesign .app-main {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: var(--page-y) var(--page-x) 120px;
  }

  .page-dashboard-redesign .page-header {
    gap: 22px;
    margin-bottom: 22px;
  }

  .page-dashboard-redesign .page-header h1 {
    font-size: clamp(38px, 7vw, 52px);
  }

  .page-dashboard-redesign .primary-btn {
    width: fit-content;
  }

  .page-dashboard-redesign .contracts-head {
    flex-direction: row;
  }

  .page-dashboard-redesign .cleanup-box {
    justify-items: end;
  }

  .page-dashboard-redesign .search-box {
    max-width: none;
  }

  .page-dashboard-redesign .filter-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 16px;
    scrollbar-width: none;
  }

  .page-dashboard-redesign .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .page-dashboard-redesign .filter-tab {
    flex: 0 0 auto;
    min-width: 104px;
  }

  .page-dashboard-redesign .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .page-dashboard-redesign .contracts-table,
  .page-dashboard-redesign .contracts-table thead,
  .page-dashboard-redesign .contracts-table tbody,
  .page-dashboard-redesign .contracts-table tr,
  .page-dashboard-redesign .contracts-table th,
  .page-dashboard-redesign .contracts-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .page-dashboard-redesign .contracts-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .page-dashboard-redesign .contracts-table thead {
    display: none;
  }

  .page-dashboard-redesign .contracts-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "customer status"
      "email email"
      "timeline timeline"
      "actions actions";
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(7, 20, 48, 0.04);
  }

  .page-dashboard-redesign .contracts-table td {
    overflow: hidden;
    border: 0;
    padding: 0;
    font-size: 13px;
  }

  .page-dashboard-redesign .customer-cell {
    grid-area: customer;
  }

  .page-dashboard-redesign .customer-link strong {
    margin: 0 0 1px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-dashboard-redesign .status-cell {
    grid-area: status;
    justify-self: end;
  }

  .page-dashboard-redesign .email-cell {
    grid-area: email;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-dashboard-redesign .sent-cell {
    display: none !important;
  }

  .page-dashboard-redesign .timeline-cell {
    grid-area: timeline;
  }

  .page-dashboard-redesign .timeline-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f7f9fd;
  }

  .page-dashboard-redesign .timeline-list div {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 2px;
  }

  .page-dashboard-redesign .timeline-list strong {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }

  .page-dashboard-redesign .actions-cell {
    grid-area: actions;
  }

  .page-dashboard-redesign .action-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-dashboard-redesign .row-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .page-dashboard-redesign .mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16);
    backdrop-filter: blur(18px);
  }

  .page-dashboard-redesign .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 58px;
    border-radius: 13px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .page-dashboard-redesign .mobile-nav a.active {
    background: var(--red-soft);
    color: var(--red);
  }
}

@media (max-width: 560px) {
  .page-dashboard-redesign .contract-app {
    --page-x: 12px;
    --page-y: 18px;
    --card-pad: 18px;
  }

  .page-dashboard-redesign .page-header h1 {
    font-size: 39px;
  }

  .page-dashboard-redesign .page-subtitle {
    font-size: 15px;
  }

  .page-dashboard-redesign .primary-btn,
  .page-dashboard-redesign .secondary-btn {
    width: 100%;
    min-width: 0;
  }

  .page-dashboard-redesign .contracts-head {
    flex-direction: column;
  }

  .page-dashboard-redesign .cleanup-box {
    width: 100%;
    justify-items: stretch;
  }

  .page-dashboard-redesign .filter-tab {
    min-width: 92px;
  }

  .page-dashboard-redesign .timeline-list,
  .page-dashboard-redesign .action-stack {
    grid-template-columns: 1fr;
  }
}

/* Shared shell polish */
.app-sidebar .brand-block .costco-wordmark {
  width: 182px !important;
  max-width: 100% !important;
  overflow: visible !important;
  margin-bottom: 26px !important;
  line-height: 0.82 !important;
  transform: skew(-8deg) !important;
}

.app-sidebar .brand-block .costco-wordmark span {
  display: block !important;
  color: #ed002f !important;
  font-size: 36px !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.82 !important;
  white-space: nowrap !important;
}

.app-sidebar .brand-block .costco-wordmark small {
  display: block !important;
  width: 132px !important;
  margin-top: 7px !important;
  padding: 2px 0 1px !important;
  border-top: 4px solid #005daa !important;
  border-bottom: 4px solid #005daa !important;
  color: #005daa !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.app-sidebar .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 74px !important;
  padding: 10px !important;
  border: 1px solid #dfe5f0 !important;
  border-radius: 14px !important;
  background: #f7f9fd !important;
}

.app-sidebar .user-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.app-sidebar .user-profile-link > div:last-child {
  min-width: 0 !important;
}

.app-sidebar .user-profile-link strong,
.app-sidebar .user-profile-link span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-sidebar .user-logout-link {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  color: #5b6685 !important;
}

.app-sidebar .user-logout-link:hover {
  background: #fff0f3 !important;
  color: #ed002f !important;
}

.app-sidebar .user-logout-link svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-dashboard-redesign .nav-icon,
.page-dashboard-redesign .sidebar-notification-icon,
.page-dashboard-redesign .mobile-nav svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

.page-dashboard-redesign .nav-icon svg {
  width: 23px !important;
  height: 23px !important;
}

.sidebar-notification-panel .notification-item,
.page-dashboard-redesign .notification-item,
.page-create-redesign .notification-item,
.page-review-redesign .notification-item,
.page-quote-placement-redesign .notification-item,
.page-sender-profile .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
}

.sidebar-notification-panel .notification-item a,
.page-dashboard-redesign .notification-item a,
.page-create-redesign .notification-item a,
.page-review-redesign .notification-item a,
.page-quote-placement-redesign .notification-item a,
.page-sender-profile .notification-item a {
  min-width: 0 !important;
  padding-right: 0 !important;
}

.sidebar-notification-panel .notification-dismiss,
.page-dashboard-redesign .notification-dismiss,
.page-create-redesign .notification-dismiss,
.page-review-redesign .notification-dismiss,
.page-quote-placement-redesign .notification-dismiss,
.page-sender-profile .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #6b7389 !important;
  box-shadow: none !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.sidebar-notification-panel .notification-dismiss:hover,
.page-dashboard-redesign .notification-dismiss:hover,
.page-create-redesign .notification-dismiss:hover,
.page-review-redesign .notification-dismiss:hover,
.page-quote-placement-redesign .notification-dismiss:hover,
.page-sender-profile .notification-dismiss:hover {
  background: transparent !important;
  color: #ed002f !important;
}

.page-create-redesign .field-card {
  padding: 24px;
}

.page-create-redesign .field-card label {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.page-create-redesign .field-card label span {
  color: var(--red);
}

.page-create-redesign .field-card input {
  width: 100%;
  min-height: 56px;
  padding: 0 17px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.page-create-redesign .field-card input::placeholder {
  color: #81889c;
}

.page-create-redesign .field-card input:focus {
  border-color: rgba(237, 0, 47, 0.42);
  box-shadow: 0 0 0 4px rgba(237, 0, 47, 0.075);
}

.page-create-redesign .field-card small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}

.page-create-redesign .action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.page-create-redesign .review-note {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.page-create-redesign .mobile-nav {
  display: none;
}

.page-create-redesign .reveal-item {
  opacity: 0;
  transform: translateY(6px);
  animation: createRevealSoft 360ms var(--ease) forwards;
}

.page-create-redesign .reveal-item:nth-child(1) { animation-delay: 15ms; }
.page-create-redesign .reveal-item:nth-child(2) { animation-delay: 35ms; }
.page-create-redesign .reveal-item:nth-child(3) { animation-delay: 55ms; }
.page-create-redesign .reveal-item:nth-child(4) { animation-delay: 75ms; }
.page-create-redesign .reveal-item:nth-child(5) { animation-delay: 95ms; }

@keyframes createRevealSoft {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1500px) {
  .page-create-redesign .contract-app {
    --page-x: 72px;
    --page-y: 52px;
    --card-pad: 38px;
    --section-gap: 20px;
  }

  .page-create-redesign .app-main {
    max-width: calc(1540px + var(--sidebar-width));
  }

  .page-create-redesign .upload-grid,
  .page-create-redesign .field-grid.two-col {
    gap: 24px;
  }
}

@media (max-width: 1180px) {
  .page-create-redesign .contract-app {
    --sidebar-width: 250px;
    --page-x: 30px;
    --page-y: 34px;
    --sidebar-x: 22px;
  }

  .page-create-redesign .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-create-redesign .dashboard-btn {
    width: fit-content;
  }

  .page-create-redesign .step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 920px) {
  .page-create-redesign .contract-app {
    --page-x: 18px;
    --page-y: 24px;
    --section-gap: 14px;
    display: block;
    padding-bottom: 92px;
  }

  .page-create-redesign .app-sidebar {
    display: none;
  }

  .page-create-redesign .app-main {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: var(--page-y) var(--page-x);
  }

  .page-create-redesign .page-header {
    margin-bottom: 18px;
  }

  .page-create-redesign .dashboard-btn,
  .page-create-redesign .generate-btn {
    width: 100%;
    min-width: 0;
  }

  .page-create-redesign .upload-grid,
  .page-create-redesign .field-grid.two-col {
    grid-template-columns: 1fr;
  }

  .page-create-redesign .action-card {
    flex-direction: column;
    align-items: stretch;
  }

  .page-create-redesign .review-note {
    max-width: none;
  }

  .page-create-redesign .mobile-nav {
    position: fixed;
    z-index: 50;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16);
  }

  .page-create-redesign .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 58px;
    border-radius: 13px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .page-create-redesign .mobile-nav a.active {
    background: var(--red-soft);
    color: var(--red);
  }
}

@media (max-width: 560px) {
  .page-create-redesign .contract-app {
    --page-x: 12px;
    --page-y: 18px;
    --card-pad: 18px;
  }

  .page-create-redesign .page-header h1 {
    font-size: 39px;
  }

  .page-create-redesign .page-subtitle {
    font-size: 15px;
  }

  .page-create-redesign .step-card,
  .page-create-redesign .action-card {
    border-radius: 16px;
  }

  .page-create-redesign .step-title-wrap {
    gap: 12px;
  }

  .page-create-redesign .step-badge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 14px;
  }

  .page-create-redesign .step-header h2 {
    font-size: 25px;
  }

  .page-create-redesign .upload-card,
  .page-create-redesign .field-card {
    padding: 16px;
  }

  .page-create-redesign .upload-card-top {
    flex-direction: column;
  }

  .page-create-redesign .drop-zone {
    flex-direction: column;
    align-items: stretch;
  }

  .page-create-redesign .file-btn {
    width: 100%;
  }

  .page-create-redesign .drop-text {
    text-align: center;
  }

  .page-create-redesign .review-note {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-create-redesign .reveal-item,
  .page-create-redesign .generate-btn,
  .page-create-redesign .dashboard-btn,
  .page-create-redesign .nav-link,
  .page-create-redesign .upload-card,
  .page-create-redesign .field-card input {
    animation: none !important;
    transition: none !important;
  }

  .page-create-redesign .reveal-item {
    opacity: 1;
    transform: none;
  }
}

/* Create Contract exact-match corrections v21 */
.page-create-redesign .app-sidebar {
  display: flex !important;
  width: var(--sidebar-width) !important;
  padding: var(--sidebar-y) var(--sidebar-x) !important;
}

.page-create-redesign .sidebar-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

.page-create-redesign .sidebar-bottom {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
}

.page-create-redesign .nav-link,
.page-create-redesign .sidebar-notification summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 17px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  transform: none !important;
}

.page-create-redesign .nav-link > span:not(.nav-icon) {
  display: inline !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.page-create-redesign .nav-icon,
.page-create-redesign .sidebar-notification-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  color: currentColor !important;
}

.page-create-redesign .nav-icon svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

.page-create-redesign .nav-link:hover,
.page-create-redesign .sidebar-notification summary:hover {
  background: #f5f7fb !important;
  transform: translateX(2px) !important;
}

.page-create-redesign .nav-link.active {
  color: var(--red) !important;
  background: var(--red-soft) !important;
  box-shadow: inset 4px 0 0 var(--red) !important;
}

.page-create-redesign .nav-link.secondary,
.page-create-redesign .sidebar-notification summary {
  color: var(--muted) !important;
}

.page-create-redesign .sidebar-notification {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.page-create-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

.page-create-redesign .sidebar-bottom > .user-card {
  order: 3 !important;
}

.page-create-redesign .sidebar-notification summary {
  list-style: none !important;
}

.page-create-redesign .sidebar-notification summary strong {
  display: inline !important;
  min-width: 0 !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.page-create-redesign .sidebar-notification summary b {
  margin-left: auto !important;
}

.page-create-redesign .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 14px 16px !important;
}

.page-create-redesign .user-avatar,
.page-create-redesign .user-avatar-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
}

.page-create-redesign .app-main {
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: 1440px !important;
  margin-left: var(--sidebar-width) !important;
  padding: var(--page-y) var(--page-x) !important;
}

.page-create-redesign .eyebrow {
  color: var(--red) !important;
}

.page-create-redesign .page-header {
  align-items: flex-start !important;
}

.page-create-redesign .dashboard-btn,
.page-create-redesign .generate-btn {
  min-height: 62px !important;
  border-radius: 12px !important;
}

.page-create-redesign .dashboard-btn span,
.page-create-redesign .generate-btn .btn-arrow {
  font-size: 22px !important;
  transform: none !important;
}

.page-create-redesign .step-header {
  flex-direction: row !important;
  align-items: center !important;
}

.page-create-redesign .upload-grid,
.page-create-redesign .field-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-create-redesign .upload-card-top {
  flex-direction: row !important;
}

.page-create-redesign .drop-zone {
  flex-direction: row !important;
  align-items: center !important;
}

.page-create-redesign .drop-text {
  text-align: left !important;
  white-space: nowrap !important;
}

.page-create-redesign .file-btn {
  width: auto !important;
  min-width: 142px !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .page-create-redesign .contract-app {
    --sidebar-width: 288px !important;
    --page-x: clamp(28px, 4vw, 64px) !important;
    --page-y: clamp(28px, 3.5vw, 48px) !important;
    --sidebar-x: 32px !important;
  }

  .page-create-redesign .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .page-create-redesign .dashboard-btn {
    width: auto !important;
  }

  .page-create-redesign .upload-grid {
    grid-template-columns: 1fr !important;
  }

  .page-create-redesign .upload-card-top,
  .page-create-redesign .drop-zone {
    flex-direction: row !important;
  }
}

@media (max-width: 920px) {
  .page-create-redesign .app-sidebar {
    display: none !important;
  }

  .page-create-redesign .app-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  .page-create-redesign .upload-grid,
  .page-create-redesign .field-grid.two-col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .page-create-redesign .upload-card-top,
  .page-create-redesign .drop-zone {
    flex-direction: column !important;
  }

  .page-create-redesign .drop-text {
    text-align: center !important;
    white-space: normal !important;
  }

  .page-create-redesign .file-btn {
    width: 100% !important;
  }
}

/* Shared Webflow shell + Review Contract v22 */
.page-create-redesign .nav-link.active,
.page-create-redesign .nav-link.active .nav-icon,
.page-create-redesign .nav-link.active .nav-icon svg,
.page-create-redesign .nav-link:hover,
.page-create-redesign .nav-link:hover .nav-icon,
.page-create-redesign .nav-link:hover .nav-icon svg,
.page-create-redesign .mobile-nav a.active,
.page-create-redesign .mobile-nav a.active svg,
.page-create-redesign .mobile-nav a:hover,
.page-review-redesign .nav-link.active,
.page-review-redesign .nav-link.active .nav-icon,
.page-review-redesign .nav-link.active .nav-icon svg,
.page-review-redesign .nav-link:hover,
.page-review-redesign .nav-link:hover .nav-icon,
.page-review-redesign .nav-link:hover .nav-icon svg,
.page-review-redesign .mobile-nav a.active,
.page-review-redesign .mobile-nav a.active svg,
.page-review-redesign .mobile-nav a:hover {
  color: var(--red) !important;
}

.page-create-redesign .nav-icon svg path,
.page-create-redesign .mobile-nav svg path,
.page-review-redesign .nav-icon svg path,
.page-review-redesign .mobile-nav svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-create-redesign .drop-zone {
  min-width: 0 !important;
  gap: 16px !important;
}

.page-create-redesign .drop-text {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1420px) and (min-width: 921px) {
  .page-create-redesign .upload-grid {
    grid-template-columns: 1fr !important;
  }

  .page-create-redesign .drop-text {
    overflow-wrap: normal !important;
  }
}

.page-review-redesign {
  margin: 0;
  background: #f6f8fc;
}

.page-review-redesign .contract-app {
  --app-bg: #f6f8fc;
  --card-bg: #ffffff;
  --ink: #071430;
  --muted: #5b6685;
  --soft-muted: #8b94ad;
  --line: #dfe5f0;
  --line-strong: #cfd7e6;
  --red: #ed002f;
  --red-dark: #c90026;
  --red-soft: #fff0f3;
  --green: #13ba73;
  --green-soft: #e9fff5;
  --yellow-soft: #fff8e7;
  --yellow: #9a6500;
  --blue: #1897df;
  --sidebar-width: 288px;
  --page-x: clamp(28px, 4vw, 64px);
  --page-y: clamp(28px, 3.5vw, 48px);
  --sidebar-x: 32px;
  --sidebar-y: 36px;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 38px rgba(7, 20, 48, 0.055);
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

.page-review-redesign .contract-app *,
.page-review-redesign .contract-app *::before,
.page-review-redesign .contract-app *::after {
  box-sizing: border-box;
}

.page-review-redesign .contract-app a {
  color: inherit;
  text-decoration: none;
}

.page-review-redesign .contract-app input,
.page-review-redesign .contract-app button {
  font: inherit;
}

.page-review-redesign .app-sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: var(--sidebar-y) var(--sidebar-x);
  background: rgba(255, 255, 255, 0.92);
  border-right: 1px solid var(--line);
}

.page-review-redesign .brand-block {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.page-review-redesign .costco-wordmark,
.page-create-redesign .costco-wordmark {
  width: 180px !important;
  color: #e60012 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.8 !important;
  font-weight: 1000 !important;
  font-style: italic !important;
  transform: skew(-8deg) !important;
}

.page-review-redesign .costco-wordmark span,
.page-create-redesign .costco-wordmark span {
  display: block !important;
  font-size: 41px !important;
}

.page-review-redesign .costco-wordmark small,
.page-create-redesign .costco-wordmark small {
  display: block !important;
  width: 100px !important;
  margin-top: 3px !important;
  padding-top: 2px !important;
  border-top: 4px solid #0060a8 !important;
  border-bottom: 4px solid #0060a8 !important;
  color: #0060a8 !important;
  font-size: 15px !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.page-review-redesign .brand-copy h2 {
  margin: 24px 0 4px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.page-review-redesign .brand-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.page-review-redesign .sidebar-nav,
.page-review-redesign .sidebar-bottom {
  display: grid;
  gap: 10px;
  width: 100%;
}

.page-review-redesign .sidebar-nav {
  margin-top: 46px;
}

.page-review-redesign .sidebar-bottom {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.page-review-redesign .nav-link,
.page-review-redesign .sidebar-notification summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.page-review-redesign .nav-link:hover,
.page-review-redesign .sidebar-notification summary:hover {
  background: #f5f7fb;
  transform: translateX(2px);
}

.page-review-redesign .nav-link.active {
  background: var(--red-soft);
  box-shadow: inset 4px 0 0 var(--red);
}

.page-review-redesign .nav-link.secondary,
.page-review-redesign .sidebar-notification summary {
  color: var(--muted);
}

.page-review-redesign .nav-icon,
.page-review-redesign .sidebar-notification-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: currentColor;
}

.page-review-redesign .nav-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.page-review-redesign .sidebar-notification {
  order: 1;
  display: block;
  width: 100%;
}

.page-review-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2;
}

.page-review-redesign .sidebar-bottom > .user-card {
  order: 3;
}

.page-review-redesign .sidebar-notification summary {
  list-style: none;
}

.page-review-redesign .sidebar-notification summary::-webkit-details-marker {
  display: none;
}

.page-review-redesign .sidebar-notification-icon {
  position: relative;
}

.page-review-redesign .sidebar-notification-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-review-redesign .sidebar-notification-icon.has-alert::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 2px #fff;
}

.page-review-redesign .sidebar-notification-panel {
  margin: 8px 0 0 48px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.page-review-redesign .sidebar-notification-panel a,
.page-review-redesign .sidebar-notification-panel p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.page-review-redesign .user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8faff;
}

.page-review-redesign .user-avatar,
.page-review-redesign .user-avatar-img {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  object-fit: cover;
  font-size: 17px;
  font-weight: 900;
}

.page-review-redesign .user-card strong,
.page-review-redesign .user-card span {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-review-redesign .user-card strong {
  font-size: 15px;
  font-weight: 900;
}

.page-review-redesign .user-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.page-review-redesign .app-main {
  width: calc(100% - var(--sidebar-width));
  max-width: 1440px;
  margin-left: var(--sidebar-width);
  padding: var(--page-y) var(--page-x) 72px;
}

.page-review-redesign .review-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 22px;
}

.page-review-redesign .back-link {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.page-review-redesign .review-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 950;
}

.page-review-redesign .review-hero p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 800;
}

.page-review-redesign .step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 26px;
  border-radius: 999px;
  background: #f0eaff;
  color: #6f56ff;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.page-review-redesign .status-alert {
  display: grid;
  gap: 2px;
  margin: 12px 0;
  padding: 16px 20px;
  border-radius: 13px;
  font-weight: 850;
}

.page-review-redesign .success-alert {
  border: 1px solid #bcefd8;
  background: var(--green-soft);
  color: #07804f;
}

.page-review-redesign .attention-alert {
  border: 1px solid #f5dfac;
  background: var(--yellow-soft);
  color: var(--yellow);
}

.page-review-redesign .review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.page-review-redesign .review-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.page-review-redesign .review-fields-panel {
  padding: clamp(22px, 2.4vw, 34px);
}

.page-review-redesign .preview-panel {
  position: sticky;
  top: 28px;
  padding: clamp(20px, 2vw, 26px);
}

.page-review-redesign .panel-head {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.page-review-redesign .panel-head h2 {
  margin: 0;
  font-size: clamp(26px, 2.7vw, 34px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 950;
}

.page-review-redesign .panel-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.page-review-redesign .review-form {
  display: grid;
  gap: 18px;
}

.page-review-redesign .review-section {
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.page-review-redesign .review-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.page-review-redesign .review-section-title h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.02em;
  font-weight: 950;
}

.page-review-redesign .step-badge {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.page-review-redesign .step-badge.red { background: var(--red); }
.page-review-redesign .step-badge.blue { background: var(--blue); }
.page-review-redesign .step-badge.green { background: var(--green); }
.page-review-redesign .step-badge.orange { background: #f97316; }

.page-review-redesign .review-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-review-redesign .review-field-grid .span-full {
  grid-column: 1 / -1;
}

.page-review-redesign .review-products-card {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #f8fbff;
}

.page-review-redesign .review-products-card > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 12px;
}

.page-review-redesign .review-products-intro small {
  grid-column: 1;
}

.page-review-redesign .review-reprocess-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}

.page-review-redesign .review-products-card small {
  color: #667085;
}

.page-review-redesign .review-products-grid {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(180px, 1.6fr) minmax(120px, .7fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #dce5ef;
}

.page-review-redesign .review-products-heading {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-review-redesign .review-products-grid input,
.page-review-redesign .review-products-grid select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cbd7e6;
  border-radius: 9px;
  background: #fff;
  color: #071430;
  font: inherit;
  font-weight: 800;
}

.page-review-redesign .review-products-grid select {
  cursor: pointer;
}

.page-review-redesign .review-products-error {
  margin: 0;
  color: #b42318;
  font-weight: 700;
}

@media (max-width: 680px) {
  .page-review-redesign .review-products-card > div:first-child {
    grid-template-columns: 1fr;
  }

  .page-review-redesign .review-products-intro small,
  .page-review-redesign .review-reprocess-btn {
    grid-column: 1;
    grid-row: auto;
  }

  .page-review-redesign .review-products-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .page-review-redesign .review-products-heading {
    display: none;
  }
}

.page-review-redesign .field-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.page-review-redesign .field-group label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.page-review-redesign .field-group input,
.page-review-redesign .field-group select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.page-review-redesign .field-group input::placeholder {
  color: #8a92a8;
}

.page-review-redesign .field-group input:focus,
.page-review-redesign .field-group select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(237, 0, 47, 0.08);
}

.page-review-redesign .field-group small {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
}

.page-review-redesign .warning-field input,
.page-review-redesign .warning-field select {
  border-color: #efd28e;
  background: #fffdf8;
}

.page-review-redesign .warning-field.is-complete input,
.page-review-redesign .warning-field.is-complete select {
  border-color: #bcefd8;
  background: #fafffd;
}

.page-review-redesign .warning-field.is-complete small {
  color: #07804f;
}

.page-review-redesign .primary-btn,
.page-review-redesign .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.page-review-redesign .primary-btn {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  background-image: none !important;
  box-shadow: 0 18px 38px rgba(237, 0, 47, 0.16);
}

.page-review-redesign .secondary-btn {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  background-image: none !important;
}

.page-review-redesign .primary-btn:hover,
.page-review-redesign .secondary-btn:hover {
  transform: translateY(-1px);
}

.page-review-redesign .review-action-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.page-review-redesign .review-action-bar p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.page-review-redesign .preview-btn {
  width: 100%;
  margin-bottom: 18px;
}

.page-review-redesign .review-summary {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.page-review-redesign .review-summary div {
  display: grid;
  gap: 5px;
  min-height: 66px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.page-review-redesign .review-summary span {
  color: var(--soft-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-review-redesign .review-summary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.page-review-redesign .before-send {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.page-review-redesign .before-send h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.page-review-redesign .before-send label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.page-review-redesign .before-send input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--red);
}

.page-review-redesign .mobile-nav {
  display: none;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .page-review-redesign .review-layout {
    grid-template-columns: 1fr;
  }

  .page-review-redesign .preview-panel {
    position: static;
  }
}

@media (max-width: 920px) {
  .page-review-redesign .app-sidebar {
    display: none;
  }

  .page-review-redesign .app-main {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 22px 14px 108px;
  }

  .page-review-redesign .review-hero {
    display: grid;
    gap: 12px;
  }

  .page-review-redesign .step-chip {
    width: max-content;
    min-height: 34px;
    padding: 0 16px;
  }

  .page-review-redesign .review-layout {
    grid-template-columns: 1fr;
  }

  .page-review-redesign .preview-panel {
    position: static;
  }

  .page-review-redesign .review-field-grid {
    grid-template-columns: 1fr;
  }

  .page-review-redesign .review-action-bar {
    grid-template-columns: 1fr;
  }

  .page-review-redesign .mobile-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    min-height: 64px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(7, 20, 48, 0.13);
    backdrop-filter: blur(14px);
  }

  .page-review-redesign .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 3px;
    min-width: 0;
    border-radius: 13px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
  }

  .page-review-redesign .mobile-nav span {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
  }

  .page-review-redesign .mobile-nav svg {
    width: 21px;
    height: 21px;
  }

  .page-review-redesign .mobile-nav a.active {
    background: var(--red-soft);
  }
}

@media (max-width: 560px) {
  .page-review-redesign .review-hero h1 {
    font-size: 38px;
  }

  .page-review-redesign .review-hero p {
    font-size: 16px;
  }

  .page-review-redesign .review-fields-panel,
  .page-review-redesign .preview-panel,
  .page-review-redesign .review-section {
    border-radius: 16px;
  }

  .page-review-redesign .panel-head h2 {
    font-size: 28px;
  }
}

/* Review sidebar hard reset against older global sidebar rules. */
.page-review-redesign .sidebar-nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 46px 0 0 !important;
}

.page-review-redesign .sidebar-nav a,
.page-review-redesign .sidebar-bottom a,
.page-review-redesign .sidebar-notification summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 17px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.page-review-redesign .sidebar-nav a::before,
.page-review-redesign .sidebar-bottom a::before {
  display: none !important;
  content: none !important;
}

.page-review-redesign .sidebar-nav a.active,
.page-review-redesign .sidebar-nav a.active .nav-icon,
.page-review-redesign .sidebar-nav a:hover,
.page-review-redesign .sidebar-nav a:hover .nav-icon {
  color: var(--red) !important;
}

.page-review-redesign .sidebar-nav a.active {
  background: var(--red-soft) !important;
  border-color: rgba(237, 0, 47, 0.14) !important;
  box-shadow: inset 4px 0 0 var(--red) !important;
}

.page-review-redesign .sidebar-notification {
  order: 1 !important;
}

.page-review-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

.page-review-redesign .sidebar-bottom > .user-card {
  order: 3 !important;
}

/* v23 review fixes: keep shared sidebar red and prevent mid-width overlap. */
.page-review-redesign .app-sidebar .nav-link.active,
.page-review-redesign .app-sidebar .nav-link.active *,
.page-review-redesign .app-sidebar .nav-link:hover,
.page-review-redesign .app-sidebar .nav-link:hover *,
.page-review-redesign .app-sidebar .sidebar-notification summary:hover,
.page-review-redesign .app-sidebar .sidebar-notification summary:hover * {
  color: var(--red) !important;
}

.page-review-redesign .app-sidebar .nav-link.active {
  background: var(--red-soft) !important;
  border-color: rgba(237, 0, 47, 0.16) !important;
  box-shadow: inset 4px 0 0 var(--red) !important;
}

.page-review-redesign .app-sidebar .nav-link:not(.active):not(:hover),
.page-review-redesign .app-sidebar .nav-link:not(.active):not(:hover) *,
.page-review-redesign .app-sidebar .sidebar-notification summary:not(:hover),
.page-review-redesign .app-sidebar .sidebar-notification summary:not(:hover) * {
  color: var(--muted) !important;
}

.page-review-redesign .app-sidebar .sidebar-nav .nav-link:not(.active):not(:hover),
.page-review-redesign .app-sidebar .sidebar-nav .nav-link:not(.active):not(:hover) * {
  color: var(--ink) !important;
}

.page-review-redesign .review-panel,
.page-review-redesign .review-section,
.page-review-redesign .field-group,
.page-review-redesign .field-group input,
.page-review-redesign .preview-panel {
  min-width: 0 !important;
}

@media (max-width: 1340px) and (min-width: 921px) {
  .page-review-redesign .contract-app {
    --page-x: 42px;
  }

  .page-review-redesign .review-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .page-review-redesign .preview-panel {
    position: static !important;
    width: 100% !important;
  }

  .page-review-redesign .review-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1120px) and (min-width: 921px) {
  .page-review-redesign .review-field-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v24 review simplification and quote placement redesign */
.page-review-redesign .review-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.page-review-redesign .review-fields-panel {
  width: 100% !important;
}

.page-quote-placement-redesign {
  margin: 0;
  background: #f6f8fc;
}

.page-quote-placement-redesign .contract-app {
  --app-bg: #f6f8fc;
  --card-bg: #ffffff;
  --ink: #071430;
  --muted: #5b6685;
  --soft-muted: #8b94ad;
  --line: #dfe5f0;
  --line-strong: #cfd7e6;
  --red: #ed002f;
  --red-dark: #c90026;
  --red-soft: #fff0f3;
  --green: #13ba73;
  --green-soft: #e9fff5;
  --blue: #168bd9;
  --blue-soft: #edf7ff;
  --sidebar-width: 288px;
  --page-x: clamp(28px, 4vw, 64px);
  --page-y: clamp(28px, 3.5vw, 48px);
  --sidebar-x: 32px;
  --sidebar-y: 36px;
  --card-pad: clamp(24px, 2.4vw, 34px);
  --gap: 18px;
  --radius-xl: 22px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 38px rgba(7, 20, 48, 0.055);
  --shadow-button: 0 18px 38px rgba(237, 0, 47, 0.18);
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

.page-quote-placement-redesign .contract-app *,
.page-quote-placement-redesign .contract-app *::before,
.page-quote-placement-redesign .contract-app *::after {
  box-sizing: border-box;
}

.page-quote-placement-redesign a {
  color: inherit;
  text-decoration: none;
}

.page-quote-placement-redesign button {
  font: inherit;
}

.page-quote-placement-redesign .app-sidebar {
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--sidebar-y) var(--sidebar-x) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid var(--line) !important;
}

.page-quote-placement-redesign .brand-block {
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--line) !important;
}

.page-quote-placement-redesign .costco-wordmark {
  width: 180px !important;
  color: #e60012 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.8 !important;
  font-weight: 1000 !important;
  font-style: italic !important;
  transform: skew(-8deg) !important;
}

.page-quote-placement-redesign .costco-wordmark span {
  display: block !important;
  font-size: 41px !important;
}

.page-quote-placement-redesign .costco-wordmark small {
  display: block !important;
  width: 100px !important;
  margin-top: 3px !important;
  padding-top: 2px !important;
  border-top: 4px solid #0060a8 !important;
  border-bottom: 4px solid #0060a8 !important;
  color: #0060a8 !important;
  font-size: 15px !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.page-quote-placement-redesign .brand-copy h2 {
  margin: 24px 0 4px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.page-quote-placement-redesign .brand-copy p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}

.page-quote-placement-redesign .sidebar-nav,
.page-quote-placement-redesign .sidebar-bottom {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.page-quote-placement-redesign .sidebar-nav {
  margin: 46px 0 0 !important;
}

.page-quote-placement-redesign .sidebar-bottom {
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
}

.page-quote-placement-redesign .nav-link,
.page-quote-placement-redesign .sidebar-notification summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 17px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.page-quote-placement-redesign .nav-link:hover,
.page-quote-placement-redesign .nav-link:hover *,
.page-quote-placement-redesign .nav-link.active,
.page-quote-placement-redesign .nav-link.active * {
  color: var(--red) !important;
}

.page-quote-placement-redesign .nav-link:hover,
.page-quote-placement-redesign .sidebar-notification summary:hover {
  background: #f5f7fb !important;
  transform: translateX(2px) !important;
}

.page-quote-placement-redesign .nav-link.active {
  background: var(--red-soft) !important;
  box-shadow: inset 4px 0 0 var(--red) !important;
}

.page-quote-placement-redesign .nav-icon,
.page-quote-placement-redesign .sidebar-notification-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.page-quote-placement-redesign .nav-icon svg,
.page-quote-placement-redesign .mobile-nav svg,
.page-quote-placement-redesign .mode-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-quote-placement-redesign .sidebar-notification {
  order: 1 !important;
  width: 100% !important;
}

.page-quote-placement-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
  color: var(--muted) !important;
}

.page-quote-placement-redesign .sidebar-bottom > .user-card {
  order: 3 !important;
}

.page-quote-placement-redesign .sidebar-notification summary {
  list-style: none !important;
  color: var(--muted) !important;
}

.page-quote-placement-redesign .sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

.page-quote-placement-redesign .sidebar-notification-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-quote-placement-redesign .sidebar-notification-icon.has-alert::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 2px #fff;
}

.page-quote-placement-redesign .sidebar-notification-panel {
  margin: 8px 0 0 48px !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}

.page-quote-placement-redesign .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 74px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #f8faff !important;
}

.page-quote-placement-redesign .user-avatar,
.page-quote-placement-redesign .user-avatar-img {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: var(--ink) !important;
  color: #fff !important;
  object-fit: cover !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.page-quote-placement-redesign .user-card strong,
.page-quote-placement-redesign .user-card span {
  display: block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-quote-placement-redesign .user-card strong {
  font-size: 15px !important;
  font-weight: 900 !important;
}

.page-quote-placement-redesign .user-card span {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.page-quote-placement-redesign .app-main {
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: 1440px !important;
  margin-left: var(--sidebar-width) !important;
  padding: var(--page-y) var(--page-x) 72px !important;
}

.page-quote-placement-redesign .page-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 28px !important;
  align-items: flex-start !important;
  margin-bottom: 18px !important;
}

.page-quote-placement-redesign .back-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  margin-bottom: 8px !important;
  color: var(--red) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.page-quote-placement-redesign .page-header h1 {
  margin: 0 !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
}

.page-quote-placement-redesign .page-subtitle {
  max-width: 820px !important;
  margin: 13px 0 0 !important;
  color: var(--muted) !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  font-weight: 750 !important;
}

.page-quote-placement-redesign .step-chip {
  min-height: 42px !important;
  border-radius: 999px !important;
  background: #f1ebff !important;
  color: #654bff !important;
  padding: 0 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.page-quote-placement-redesign .placement-alert {
  border: 1px solid rgba(19, 186, 115, 0.22) !important;
  background: var(--green-soft) !important;
  color: #087a4c !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 17px !important;
  margin-bottom: var(--gap) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.page-quote-placement-redesign .placement-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
  gap: var(--gap) !important;
  align-items: start !important;
}

.page-quote-placement-redesign .controls-card,
.page-quote-placement-redesign .preview-card {
  min-width: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-soft) !important;
}

.page-quote-placement-redesign .controls-card {
  padding: var(--card-pad) !important;
  position: sticky !important;
  top: var(--page-y) !important;
}

.page-quote-placement-redesign .preview-card {
  padding: var(--card-pad) !important;
}

.page-quote-placement-redesign .card-head,
.page-quote-placement-redesign .preview-header {
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--line) !important;
}

.page-quote-placement-redesign .card-head h2,
.page-quote-placement-redesign .preview-header h2 {
  margin: 0 !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}

.page-quote-placement-redesign .card-head p,
.page-quote-placement-redesign .preview-header p {
  margin: 9px 0 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.page-quote-placement-redesign .preview-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

.page-quote-placement-redesign .preview-chip {
  min-height: 38px !important;
  border-radius: 999px !important;
  background: var(--red-soft) !important;
  color: var(--red) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.page-quote-placement-redesign .mode-card,
.page-quote-placement-redesign .helper-card,
.page-quote-placement-redesign .status-row {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: #f7f9fd !important;
}

.page-quote-placement-redesign .mode-card,
.page-quote-placement-redesign .helper-card {
  padding: 15px !important;
  margin-bottom: 14px !important;
}

.page-quote-placement-redesign .mode-label {
  display: block !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 5px !important;
}

.page-quote-placement-redesign .mode-card strong {
  display: block !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.page-quote-placement-redesign .placement-buttons,
.page-quote-placement-redesign .placement-status {
  display: grid !important;
  gap: 10px !important;
}

.page-quote-placement-redesign .placement-status {
  margin-top: 18px !important;
}

.page-quote-placement-redesign .placement-mode-btn,
.page-quote-placement-redesign .reset-btn {
  width: 100% !important;
  min-height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.page-quote-placement-redesign .placement-mode-btn:hover,
.page-quote-placement-redesign .reset-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(237, 0, 47, 0.35) !important;
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

.page-quote-placement-redesign .placement-mode-btn.active {
  border-color: var(--red) !important;
  background: var(--red) !important;
  color: white !important;
  box-shadow: var(--shadow-button) !important;
}

.page-quote-placement-redesign .status-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 13px !important;
  background: white !important;
}

.page-quote-placement-redesign .status-row > span {
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 2px solid var(--line-strong) !important;
  background: white !important;
}

.page-quote-placement-redesign .status-row.is-complete > span {
  border-color: var(--green) !important;
  background: var(--green) !important;
}

.page-quote-placement-redesign .status-row strong,
.page-quote-placement-redesign .helper-card h3 {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.page-quote-placement-redesign .status-row p,
.page-quote-placement-redesign .helper-card p {
  margin: 3px 0 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.page-quote-placement-redesign .primary-btn {
  width: 100% !important;
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--red) !important;
  background-image: none !important;
  color: white !important;
  cursor: pointer !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 0 26px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  box-shadow: var(--shadow-button) !important;
}

.page-quote-placement-redesign .primary-btn .btn-arrow {
  font-size: 23px !important;
  line-height: 1 !important;
}

.page-quote-placement-redesign .primary-btn:hover:not(:disabled) {
  background: var(--red-dark) !important;
}

.page-quote-placement-redesign .primary-btn:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.page-quote-placement-redesign .save-send-btn {
  margin-top: 18px !important;
}

.page-quote-placement-redesign .quote-stage {
  width: 100% !important;
  min-height: 320px !important;
  overflow: auto !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: #eef2f8 !important;
  padding: 18px !important;
}

.page-quote-placement-redesign .quote-canvas-wrap {
  position: relative !important;
  margin: 0 auto !important;
  background: #fff !important;
  box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16) !important;
}

.page-quote-placement-redesign #pdfCanvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.page-quote-placement-redesign .placement-box {
  position: absolute !important;
  z-index: 5 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  box-shadow: 0 12px 25px rgba(7, 20, 48, 0.18) !important;
}

.page-quote-placement-redesign .placement-box.signature {
  background: rgba(237, 0, 47, 0.9) !important;
}

.page-quote-placement-redesign .placement-box.date {
  background: rgba(22, 139, 217, 0.9) !important;
}

.page-quote-placement-redesign .mobile-nav {
  display: none;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .page-quote-placement-redesign .placement-layout {
    grid-template-columns: 1fr !important;
  }

  .page-quote-placement-redesign .controls-card {
    position: static !important;
  }
}

@media (max-width: 920px) {
  .page-quote-placement-redesign .app-sidebar {
    display: none !important;
  }

  .page-quote-placement-redesign .app-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: 22px 14px 108px !important;
  }

  .page-quote-placement-redesign .page-header {
    display: grid !important;
    gap: 12px !important;
  }

  .page-quote-placement-redesign .placement-layout {
    grid-template-columns: 1fr !important;
  }

  .page-quote-placement-redesign .controls-card {
    position: static !important;
  }

  .page-quote-placement-redesign .preview-header {
    display: grid !important;
  }

  .page-quote-placement-redesign .mobile-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    min-height: 64px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(7, 20, 48, 0.13);
    backdrop-filter: blur(14px);
  }

  .page-quote-placement-redesign .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 3px;
    min-width: 0;
    border-radius: 13px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
  }

  .page-quote-placement-redesign .mobile-nav a.active {
    background: var(--red-soft);
    color: var(--red);
  }
}

.page-create-redesign .app-sidebar,
.page-review-redesign .app-sidebar,
.page-quote-placement-redesign .app-sidebar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden auto !important;
}

.page-create-redesign .app-sidebar > .brand-block,
.page-review-redesign .app-sidebar > .brand-block,
.page-quote-placement-redesign .app-sidebar > .brand-block {
  order: 1 !important;
  flex: 0 0 auto !important;
}

.page-create-redesign .app-sidebar > .sidebar-nav,
.page-review-redesign .app-sidebar > .sidebar-nav,
.page-quote-placement-redesign .app-sidebar > .sidebar-nav {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin: 46px 0 0 !important;
}

.page-create-redesign .app-sidebar > .sidebar-bottom,
.page-review-redesign .app-sidebar > .sidebar-bottom,
.page-quote-placement-redesign .app-sidebar > .sidebar-bottom {
  order: 3 !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
}

.page-create-redesign .sidebar-notification,
.page-review-redesign .sidebar-notification,
.page-quote-placement-redesign .sidebar-notification {
  margin: 0 !important;
  order: 1 !important;
}

.page-create-redesign .sidebar-bottom > .nav-link.secondary,
.page-review-redesign .sidebar-bottom > .nav-link.secondary,
.page-quote-placement-redesign .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

.page-create-redesign .sidebar-bottom > .user-card,
.page-review-redesign .sidebar-bottom > .user-card,
.page-quote-placement-redesign .sidebar-bottom > .user-card {
  order: 3 !important;
}

.page-create-redesign .notification-item,
.page-review-redesign .notification-item,
.page-quote-placement-redesign .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  gap: 8px !important;
  align-items: start !important;
  margin: 0 0 6px !important;
}

.page-create-redesign .notification-item a,
.page-review-redesign .notification-item a,
.page-quote-placement-redesign .notification-item a {
  min-width: 0 !important;
}

.page-create-redesign .notification-dismiss,
.page-review-redesign .notification-dismiss,
.page-quote-placement-redesign .notification-dismiss {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.page-create-redesign .notification-dismiss:hover,
.page-review-redesign .notification-dismiss:hover,
.page-quote-placement-redesign .notification-dismiss:hover {
  border-color: rgba(237, 0, 47, 0.28) !important;
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

.sidebar-notification-panel .notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: start;
  margin-bottom: 6px;
}

.sidebar-notification-panel .notification-dismiss {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #dfe5f0;
  border-radius: 999px;
  background: #fff;
  color: #5b6685;
  cursor: pointer;
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}

.sidebar-notification-panel .notification-dismiss:hover {
  background: #fff0f3;
  color: #ed002f;
}

.page-create-redesign .nav-icon,
.page-review-redesign .nav-icon,
.page-quote-placement-redesign .nav-icon,
.page-create-redesign .sidebar-notification-icon,
.page-review-redesign .sidebar-notification-icon,
.page-quote-placement-redesign .sidebar-notification-icon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

.page-create-redesign .nav-icon svg,
.page-review-redesign .nav-icon svg,
.page-quote-placement-redesign .nav-icon svg {
  width: 23px !important;
  height: 23px !important;
}

.page-create-redesign .sidebar-notification summary,
.page-review-redesign .sidebar-notification summary,
.page-quote-placement-redesign .sidebar-notification summary {
  overflow: visible !important;
}

.page-create-redesign .sidebar-notification-icon::before,
.page-review-redesign .sidebar-notification-icon::before,
.page-quote-placement-redesign .sidebar-notification-icon::before {
  width: 23px !important;
  height: 23px !important;
}

.page-create-redesign .sidebar-notification-icon.has-alert::after,
.page-review-redesign .sidebar-notification-icon.has-alert::after,
.page-quote-placement-redesign .sidebar-notification-icon.has-alert::after {
  top: 2px !important;
  right: 1px !important;
  width: 8px !important;
  height: 8px !important;
}

.page-create-redesign .sidebar-notification summary b,
.page-review-redesign .sidebar-notification summary b,
.page-quote-placement-redesign .sidebar-notification summary b {
  flex: 0 0 auto !important;
  min-width: 26px !important;
}

.page-create-redesign .notification-item,
.page-review-redesign .notification-item,
.page-quote-placement-redesign .notification-item {
  grid-template-columns: minmax(0, 1fr) 24px !important;
}

.page-create-redesign .notification-dismiss,
.page-review-redesign .notification-dismiss,
.page-quote-placement-redesign .notification-dismiss,
.sidebar-notification-panel .notification-dismiss {
  width: 24px !important;
  height: 24px !important;
  font-size: 16px !important;
}

@media (max-width: 920px) {
  .page-create-redesign .app-sidebar,
  .page-review-redesign .app-sidebar,
  .page-quote-placement-redesign .app-sidebar {
    display: none !important;
  }
}

body.customer-sign-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(101, 75, 255, 0.1), transparent 34rem),
    radial-gradient(circle at top right, rgba(22, 139, 217, 0.08), transparent 30rem),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%);
  color: #071430;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  padding: clamp(18px, 3.5vw, 48px);
}

.customer-sign-page *,
.customer-sign-page *::before,
.customer-sign-page *::after {
  box-sizing: border-box;
}

.customer-sign-page button,
.customer-sign-page input {
  font: inherit;
}

.customer-sign-page a {
  color: inherit;
  text-decoration: none;
}

.customer-sign-page .sign-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.customer-sign-page .sign-header,
.customer-sign-page .pdf-card,
.customer-sign-page .sign-card,
.customer-sign-page .sign-complete-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dfe5f0;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(7, 20, 48, 0.055);
}

.customer-sign-page .sign-header {
  padding: clamp(24px, 3vw, 34px);
  margin-bottom: 18px;
}

.customer-sign-page .brand-row {
  margin-bottom: 22px;
}

.customer-sign-page .costco-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.8;
  transform: skew(-8deg);
}

.customer-sign-page .costco-wordmark span {
  color: #ed002f;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.customer-sign-page .costco-wordmark small {
  color: #005daa;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.customer-sign-page .header-main {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
}

.customer-sign-page .header-main h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.018em;
}

.customer-sign-page .header-main p,
.customer-sign-page .sign-complete-card p {
  margin: 9px 0 0;
  color: #5b6685;
  font-size: 16px;
  font-weight: 750;
}

.customer-sign-page .open-pdf-btn,
.customer-sign-page .secondary-btn {
  min-height: 48px;
  border: 1px solid #dfe5f0;
  border-radius: 999px;
  background: white;
  color: #071430;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), border-color 150ms cubic-bezier(0.16, 1, 0.3, 1), background 150ms cubic-bezier(0.16, 1, 0.3, 1), color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.customer-sign-page .open-pdf-btn:hover,
.customer-sign-page .secondary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(237, 0, 47, 0.32);
  background: #fff0f3;
  color: #ed002f;
}

.customer-sign-page .sign-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
  gap: 18px;
  align-items: start;
}

.customer-sign-page .pdf-card,
.customer-sign-page .sign-card,
.customer-sign-page .sign-complete-card {
  padding: clamp(22px, 2.5vw, 30px);
}

.customer-sign-page .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #dfe5f0;
}

.customer-sign-page .card-head.simple {
  display: block;
}

.customer-sign-page .card-head h2,
.customer-sign-page .sign-complete-card h2 {
  margin: 0;
  font-size: clamp(27px, 2.4vw, 36px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.customer-sign-page .card-head p {
  margin: 8px 0 0;
  color: #5b6685;
  font-size: 14px;
  font-weight: 750;
}

.customer-sign-page .pdf-frame-wrap {
  position: relative;
  height: min(76vh, 840px);
  min-height: 620px;
  border: 1px solid #dfe5f0;
  border-radius: 14px;
  overflow: hidden;
  background: #1f242d;
}

.customer-sign-page .contract-pdf-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #1f242d;
  z-index: 2;
}

.customer-sign-page .pdf-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  color: white;
  z-index: 1;
}

.customer-sign-page .pdf-fallback strong {
  font-size: 18px;
  font-weight: 950;
}

.customer-sign-page .pdf-fallback p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 750;
}

.customer-sign-page .sign-card {
  position: sticky;
  top: 24px;
}

.customer-sign-page .sign-tabs {
  border: 1px solid #dfe5f0;
  border-radius: 999px;
  background: #f5f7fc;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
}

.customer-sign-page .sign-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5b6685;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
}

.customer-sign-page .sign-tabs button.active {
  background: white;
  color: #071430;
  box-shadow: 0 0 0 1px rgba(223, 229, 240, 0.9);
}

.customer-sign-page .sign-panel {
  display: none;
}

.customer-sign-page .sign-panel.active {
  display: grid;
  gap: 14px;
}

.customer-sign-page .field-card {
  display: grid;
  gap: 10px;
  border: 1px solid #dfe5f0;
  border-radius: 14px;
  background: white;
  padding: 16px;
}

.customer-sign-page .field-card span {
  color: #071430;
  font-size: 14px;
  font-weight: 950;
}

.customer-sign-page .field-card input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  outline: none;
  padding: 0 15px;
  color: #071430;
  font-size: 15px;
  font-weight: 750;
}

.customer-sign-page .field-card input:focus {
  border-color: rgba(237, 0, 47, 0.42);
  box-shadow: 0 0 0 4px rgba(237, 0, 47, 0.075);
}

.customer-sign-page .signature-preview {
  min-height: 150px;
  border: 1px solid #dfe5f0;
  border-radius: 14px;
  background: radial-gradient(circle at top left, rgba(237, 0, 47, 0.035), transparent 18rem), white;
  color: #071430;
  display: flex;
  align-items: center;
  padding: 22px;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 0.9;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  overflow-wrap: anywhere;
}

.customer-sign-page .draw-box {
  position: relative;
  border: 1px solid #dfe5f0;
  border-radius: 14px;
  background: white;
  overflow: hidden;
  min-height: 190px;
}

.customer-sign-page #signatureCanvas {
  width: 100%;
  height: 190px;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.customer-sign-page .clear-draw-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 36px;
  border: 1px solid #dfe5f0;
  border-radius: 999px;
  background: white;
  color: #071430;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}

.customer-sign-page .agreement-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 16px 0;
  color: #5b6685;
  font-size: 14px;
  font-weight: 750;
}

.customer-sign-page .agreement-row input {
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: #ed002f;
}

.customer-sign-page .submit-signature-btn {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  background: #ed002f;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 18px 38px rgba(237, 0, 47, 0.18);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), background 150ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.customer-sign-page .submit-signature-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #c90026;
  box-shadow: 0 22px 44px rgba(237, 0, 47, 0.22);
}

.customer-sign-page .submit-signature-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

.customer-sign-page .submit-signature-btn.is-ready {
  opacity: 1;
}

.customer-sign-page .submit-signature-btn.is-submitting {
  cursor: wait;
}

.customer-sign-page .submit-signature-btn .btn-arrow {
  font-size: 24px;
  line-height: 0.8;
  font-weight: 950;
}

.customer-sign-page .sign-ready-hint {
  margin: -2px 0 0;
  color: #5b6685;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

.customer-sign-page .reveal-item {
  opacity: 1;
  transform: none;
  animation: customerSignReveal 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.customer-sign-page .reveal-item:nth-child(1) { animation-delay: 15ms; }
.customer-sign-page .reveal-item:nth-child(2) { animation-delay: 35ms; }
.customer-sign-page .reveal-item:nth-child(3) { animation-delay: 55ms; }

@keyframes customerSignReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-sign-page .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.customer-sign-page .sign-complete-card {
  display: grid;
  gap: 16px;
}

.customer-sign-page .signed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.customer-sign-page .email-status {
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
}

.customer-sign-page .email-status.success {
  background: #e9fff5;
  color: #087a4c;
}

.customer-sign-page .email-status.warning {
  background: #fff8e6;
  color: #835600;
}

@media (max-width: 980px) {
  body.customer-sign-page {
    padding: 18px;
  }

  .customer-sign-page .sign-layout {
    grid-template-columns: 1fr;
  }

  .customer-sign-page .sign-card {
    position: static;
  }

  .customer-sign-page .pdf-frame-wrap {
    height: 68vh;
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  body.customer-sign-page {
    padding: 12px;
  }

  .customer-sign-page .header-main,
  .customer-sign-page .card-head {
    flex-direction: column;
  }

  .customer-sign-page .open-pdf-btn,
  .customer-sign-page .secondary-btn {
    width: 100%;
  }

  .customer-sign-page .sign-header h1 {
    font-size: 39px;
  }

  .customer-sign-page .header-main p {
    font-size: 14px;
  }

  .customer-sign-page .pdf-card,
  .customer-sign-page .sign-card,
  .customer-sign-page .sign-header,
  .customer-sign-page .sign-complete-card {
    border-radius: 16px;
  }

  .customer-sign-page .pdf-frame-wrap {
    height: 62vh;
    min-height: 430px;
  }

  .customer-sign-page .signature-preview {
    min-height: 126px;
    font-size: 44px;
  }
}

/* Sender profile / email setup page */
body.page-sender-profile {
  margin: 0;
  min-height: 100vh;
  background: #f6f8fc;
  color: #071430;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-sender-profile * {
  box-sizing: border-box;
}

.page-sender-profile .contract-app {
  --app-bg: #f6f8fc;
  --ink: #071430;
  --muted: #5b6685;
  --line: #dfe5f0;
  --line-strong: #cfd7e6;
  --red: #ed002f;
  --red-dark: #c90026;
  --red-soft: #fff0f3;
  --green: #13ba73;
  --sidebar-width: 288px;
  --page-x: clamp(28px, 4vw, 64px);
  --page-y: clamp(28px, 3.5vw, 48px);
  --sidebar-x: 32px;
  --sidebar-y: 36px;
  --card-pad: clamp(24px, 2.4vw, 34px);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --shadow-soft: 0 12px 38px rgba(7, 20, 48, 0.055);
  --shadow-button: 0 18px 38px rgba(237, 0, 47, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 100%);
  color: var(--ink);
  line-height: 1.45;
}

.page-sender-profile a {
  color: inherit;
  text-decoration: none;
}

.page-sender-profile input,
.page-sender-profile button,
.page-sender-profile textarea {
  font: inherit;
}

.page-sender-profile .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  padding: var(--sidebar-y) var(--sidebar-x);
  overflow: hidden auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.page-sender-profile .brand-block {
  flex: 0 0 auto;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.page-sender-profile .costco-wordmark {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 26px;
  line-height: 0.8;
  transform: skew(-8deg);
}

.page-sender-profile .costco-wordmark span {
  color: var(--red);
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.page-sender-profile .costco-wordmark small {
  color: #005daa;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.page-sender-profile .brand-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.page-sender-profile .brand-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.page-sender-profile .sidebar-nav,
.page-sender-profile .sidebar-bottom {
  display: grid;
  gap: 10px;
}

.page-sender-profile .sidebar-nav {
  margin-top: 46px;
}

.page-sender-profile .sidebar-bottom {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.page-sender-profile .nav-link,
.page-sender-profile .sidebar-notification summary {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  list-style: none;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}

.page-sender-profile .nav-link:hover,
.page-sender-profile .sidebar-notification summary:hover {
  background: #f5f7fb;
  color: var(--red);
  transform: translateX(2px);
}

.page-sender-profile .nav-link.active {
  color: var(--red);
  background: var(--red-soft);
  box-shadow: inset 4px 0 0 var(--red);
}

.page-sender-profile .nav-link.secondary,
.page-sender-profile .sidebar-notification summary {
  color: var(--muted);
}

.page-sender-profile .nav-icon,
.page-sender-profile .sidebar-notification-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  color: currentColor;
}

.page-sender-profile .nav-icon svg,
.page-sender-profile .mobile-nav svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-sender-profile .user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f9fd;
}

.page-sender-profile .user-avatar,
.page-sender-profile .user-avatar-img,
.page-sender-profile .large-avatar,
.page-sender-profile .preview-avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.page-sender-profile .user-avatar,
.page-sender-profile .user-avatar-img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  object-fit: cover;
}

.page-sender-profile .user-card strong,
.page-sender-profile .user-card span {
  display: block;
}

.page-sender-profile .user-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.page-sender-profile .user-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.page-sender-profile .app-main {
  width: calc(100% - var(--sidebar-width));
  max-width: calc(1540px + var(--sidebar-width));
  margin-left: var(--sidebar-width);
  padding: var(--page-y) var(--page-x);
}

.page-sender-profile .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 26px;
}

.page-sender-profile .eyebrow {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-sender-profile .page-header h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4vw, 62px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.015em;
}

.page-sender-profile .page-subtitle {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 750;
}

.page-sender-profile .primary-btn {
  min-width: 220px;
  min-height: 62px;
  border: 0;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 30px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 950;
  box-shadow: var(--shadow-button);
  white-space: nowrap;
}

.page-sender-profile .primary-btn:hover {
  background: var(--red-dark);
}

.page-sender-profile .primary-btn .btn-arrow {
  font-size: 27px;
  font-weight: 950;
}

.page-sender-profile .sender-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 22px;
  align-items: start;
}

.page-sender-profile .sender-fields {
  display: grid;
  gap: 18px;
}

.page-sender-profile .profile-card,
.page-sender-profile .action-card,
.page-sender-profile .email-preview-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.page-sender-profile .profile-card {
  padding: var(--card-pad);
}

.page-sender-profile .section-head {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.page-sender-profile .section-head h2,
.page-sender-profile .action-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 2.15vw, 32px);
  line-height: 1;
  font-weight: 950;
}

.page-sender-profile .section-head p,
.page-sender-profile .action-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.page-sender-profile .photo-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.page-sender-profile .large-avatar {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 24px;
  font-size: 34px;
}

.page-sender-profile .large-avatar img,
.page-sender-profile .preview-avatar img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-sender-profile .large-avatar.has-image img,
.page-sender-profile .preview-avatar.has-image img {
  display: block;
}

.page-sender-profile .large-avatar.has-image span,
.page-sender-profile .preview-avatar.has-image span {
  display: none;
}

.page-sender-profile .photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-sender-profile .photo-actions p {
  width: 100%;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.page-sender-profile .photo-upload-btn,
.page-sender-profile .remove-photo-btn,
.page-sender-profile .secondary-action-btn {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.page-sender-profile .photo-upload-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 24px rgba(237, 0, 47, 0.13);
}

.page-sender-profile .photo-upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.page-sender-profile .remove-photo-btn,
.page-sender-profile .secondary-action-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.page-sender-profile .field-grid {
  display: grid;
  gap: 20px;
}

.page-sender-profile .field-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-sender-profile .field-card {
  display: grid;
  gap: 12px;
}

.page-sender-profile .field-card span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.page-sender-profile .field-card input,
.page-sender-profile .field-card textarea,
.page-sender-profile .test-email-row input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
}

.page-sender-profile .field-card input,
.page-sender-profile .test-email-row input {
  min-height: 56px;
  padding: 0 17px;
}

.page-sender-profile .field-card textarea {
  min-height: 130px;
  resize: vertical;
  padding: 15px 17px;
}

.page-sender-profile .field-card input:focus,
.page-sender-profile .field-card textarea:focus,
.page-sender-profile .test-email-row input:focus {
  border-color: rgba(237, 0, 47, 0.42);
  box-shadow: 0 0 0 4px rgba(237, 0, 47, 0.075);
}

.page-sender-profile .action-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(300px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 24px;
}

.page-sender-profile .test-email-row {
  display: flex;
  gap: 10px;
}

.page-sender-profile .secondary-action-btn {
  min-width: 126px;
}

.page-sender-profile .email-preview-card {
  position: sticky;
  top: var(--page-y);
  padding: 24px;
}

.page-sender-profile .preview-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.page-sender-profile .preview-top span {
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.page-sender-profile .preview-top strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.page-sender-profile .preview-email {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 22px;
}

.page-sender-profile .preview-brand {
  margin-bottom: 18px;
}

.page-sender-profile .preview-costco-wordmark {
  margin-bottom: 0;
  transform: skew(-8deg) scale(0.82);
  transform-origin: left center;
}

.page-sender-profile .preview-sender {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.page-sender-profile .preview-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  font-size: 18px;
}

.page-sender-profile .preview-sender strong,
.page-sender-profile .preview-sender span {
  display: block;
}

.page-sender-profile .preview-sender strong {
  font-size: 15px;
  font-weight: 950;
}

.page-sender-profile .preview-sender span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.page-sender-profile .preview-subject {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f8fd;
  font-size: 14px;
  font-weight: 950;
}

.page-sender-profile .preview-body p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.55;
}

.page-sender-profile .preview-body button {
  width: 100%;
  min-height: 52px;
  margin: 8px 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.page-sender-profile .preview-footer {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.page-sender-profile .preview-footer span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.page-sender-profile .mobile-nav {
  display: none;
}

.page-sender-profile .reveal-item {
  opacity: 0;
  transform: translateY(6px);
  animation: senderReveal 360ms var(--ease) forwards;
}

@keyframes senderReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .page-sender-profile .contract-app {
    --sidebar-width: 250px;
    --page-x: 30px;
    --page-y: 34px;
    --sidebar-x: 22px;
  }

  .page-sender-profile .page-header,
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr;
  }

  .page-sender-profile .page-header {
    flex-direction: column;
  }

  .page-sender-profile .email-preview-card {
    position: static;
  }
}

@media (max-width: 920px) {
  .page-sender-profile .contract-app {
    --page-x: 22px;
    --page-y: 28px;
    --card-pad: 24px;
    padding-bottom: 112px;
  }

  .page-sender-profile .app-sidebar {
    display: none !important;
  }

  .page-sender-profile .app-main {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: var(--page-y) var(--page-x) 120px;
  }

  .page-sender-profile .field-grid.two-col,
  .page-sender-profile .action-card {
    grid-template-columns: 1fr;
  }

  .page-sender-profile .mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16);
    backdrop-filter: blur(18px);
  }

  .page-sender-profile .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 58px;
    border-radius: 13px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .page-sender-profile .mobile-nav a.active {
    background: var(--red-soft);
    color: var(--red);
  }
}

@media (max-width: 560px) {
  .page-sender-profile .contract-app {
    --page-x: 12px;
    --page-y: 18px;
    --card-pad: 18px;
  }

  .page-sender-profile .page-header h1 {
    font-size: 39px;
  }

  .page-sender-profile .page-subtitle {
    font-size: 15px;
  }

  .page-sender-profile .primary-btn {
    width: 100%;
  }

  .page-sender-profile .photo-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-sender-profile .large-avatar {
    width: 88px;
    height: 88px;
    min-width: 88px;
  }

  .page-sender-profile .test-email-row {
    flex-direction: column;
  }

  .page-sender-profile .secondary-action-btn {
    width: 100%;
  }
}

/* FINAL SHELL LOCK: copy the Create Contract chrome to every current app page. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) {
  margin: 0 !important;
  overflow-x: hidden !important;
  background: #f6f8fc !important;
  color: #071430 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
  --sidebar-width: 288px !important;
  --page-x: clamp(28px, 4vw, 64px) !important;
  --page-y: clamp(28px, 3.5vw, 48px) !important;
  --sidebar-x: 32px !important;
  --sidebar-y: 36px !important;
  --red: #ed002f !important;
  --red-soft: #fff0f3 !important;
  --ink: #071430 !important;
  --muted: #5b6685 !important;
  --line: #dfe5f0 !important;
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background: radial-gradient(circle at top right, rgba(237, 0, 47, 0.055), transparent 34rem), linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: var(--sidebar-y) var(--sidebar-x) !important;
  overflow: hidden auto !important;
  border-right: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-main {
  display: block !important;
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: var(--sidebar-width) !important;
  padding: var(--page-y) var(--page-x) 96px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-block {
  flex: 0 0 auto !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--line) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark {
  display: inline-grid !important;
  width: 190px !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-align: left !important;
  line-height: 0.86 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark span {
  display: block !important;
  color: #ed002f !important;
  font-size: 40px !important;
  font-style: italic !important;
  font-weight: 1000 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.88 !important;
  transform: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark small {
  display: inline-block !important;
  width: 122px !important;
  margin-top: 4px !important;
  padding-top: 3px !important;
  border-top: 4px solid #005daa !important;
  box-shadow: 0 4px 0 #005daa !important;
  color: #005daa !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-copy h2 {
  margin: 18px 0 0 !important;
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-copy p {
  margin: 8px 0 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-nav,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
  display: grid !important;
  gap: 10px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-nav {
  margin-top: 46px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
  margin-top: auto !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary {
  display: flex !important;
  align-items: center !important;
  gap: 17px !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary:hover,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active {
  box-shadow: inset 4px 0 0 var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-icon,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  color: currentColor !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-icon svg,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active .nav-icon svg,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active .nav-icon svg *,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover .nav-icon svg,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover .nav-icon svg * {
  color: var(--red) !important;
  fill: none !important;
  stroke: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary {
  overflow: visible !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary {
  list-style: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary::-webkit-details-marker {
  display: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon::before {
  content: "" !important;
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon.has-alert::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  right: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  box-shadow: 0 0 0 2px #fff !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary b {
  min-width: 24px !important;
  height: 20px !important;
  margin-left: auto !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 20px !important;
  text-align: center !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-panel {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(7, 20, 48, 0.08) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #eef2f7 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item:last-child {
  border-bottom: 0 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item a {
  min-width: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-dismiss {
  align-self: start !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66708a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-dismiss:hover {
  background: transparent !important;
  color: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 76px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-profile-link {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-avatar,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-avatar-img {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  background: #071430 !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  object-fit: cover !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card strong,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card strong {
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card span {
  margin-top: 3px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-logout-link {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  color: var(--ink) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-logout-link:hover {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-logout-link svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-create-redesign .step-badge.red,
.page-review-redesign .step-badge.red,
.page-template-redesign .step-badge.red {
  background: #ed002f !important;
}

.page-create-redesign .step-badge.blue,
.page-review-redesign .step-badge.blue {
  background: #168bd9 !important;
}

.page-create-redesign .step-badge.green,
.page-review-redesign .step-badge.green {
  background: #13ba73 !important;
}

.page-review-redesign .step-badge.orange {
  background: #f97316 !important;
}

.page-create-redesign .upload-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.page-create-redesign .upload-remove {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.page-create-redesign .upload-remove[hidden] {
  display: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav {
  display: none !important;
}

@media (max-width: 1180px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
    --sidebar-width: 250px !important;
    --sidebar-x: 22px !important;
  }
}

@media (max-width: 920px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
    --page-x: 18px !important;
    --page-y: 22px !important;
    padding-bottom: 108px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
    display: none !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: var(--page-y) var(--page-x) 118px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 18px 55px rgba(7, 20, 48, 0.16) !important;
    backdrop-filter: blur(18px) !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav a {
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav a.active,
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .mobile-nav a:hover {
    background: var(--red-soft) !important;
    color: var(--red) !important;
  }
}

@media (max-width: 560px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .contract-app {
    --page-x: 12px !important;
    --page-y: 18px !important;
  }
}

/* v31 absolute final override. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active *,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover * { color: var(--red) !important; }
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active .nav-icon,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link.active .nav-icon *,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover .nav-icon,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link:hover .nav-icon * { color: var(--red) !important; stroke: var(--red) !important; fill: none !important; }
.page-dashboard-redesign .search-box input,
.page-dashboard-redesign .search-box input:focus { min-height: 54px !important; padding: 0 !important; border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important; }
.page-sender-profile .sender-layout { grid-template-columns: minmax(420px, 0.82fr) minmax(560px, 1.18fr) !important; gap: 28px !important; }
.page-sender-profile .email-preview-card { padding: 28px !important; }
.page-sender-profile .actual-email-preview { border-color: #dde5f0 !important; background: #fff !important; box-shadow: 0 22px 58px rgba(7, 20, 48, 0.1) !important; }
.page-sender-profile .preview-hero { min-height: 210px !important; padding: 30px !important; background: radial-gradient(circle at 82% 18%, rgba(0, 93, 170, 0.14), transparent 28%), radial-gradient(circle at 18% 76%, rgba(237, 0, 47, 0.12), transparent 30%), linear-gradient(135deg, #ffffff 0%, #fff3f5 52%, #eef7ff 100%) !important; }
.page-sender-profile .actual-email-preview .preview-costco-wordmark { min-width: 210px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: skew(-8deg) !important; }
.page-sender-profile .actual-email-preview .preview-costco-wordmark span { font-size: 46px !important; line-height: 0.82 !important; letter-spacing: -0.055em !important; }
.page-sender-profile .actual-email-preview .preview-costco-wordmark small { width: 150px !important; margin-top: 8px !important; border-top: 5px solid #005daa !important; border-bottom: 5px solid #005daa !important; font-size: 14px !important; line-height: 1 !important; text-decoration: none !important; }
.page-sender-profile .preview-content { padding: 38px 42px 34px !important; }
.page-sender-profile .preview-content h3 { color: var(--ink) !important; font-family: inherit !important; font-size: clamp(34px, 3.2vw, 50px) !important; font-weight: 950 !important; letter-spacing: -0.02em !important; }
.page-sender-profile .preview-content p { max-width: 620px !important; color: var(--muted) !important; }
.page-sender-profile .preview-content button { border-radius: 14px !important; background: var(--red) !important; box-shadow: 0 16px 32px rgba(237, 0, 47, 0.2) !important; }
.page-sender-profile .preview-details { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; border-top: 0 !important; }
.page-sender-profile .preview-details div { display: grid !important; gap: 4px !important; padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: #f7f9fd !important; }
.page-sender-profile .preview-signature-block { background: #f7f9fd !important; border-top-color: var(--line) !important; }

/* v32 template page guard: keep the real manager content visible above old duplicate CSS. */
body.page-template-redesign .app-main {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

body.page-template-redesign .app-main .reveal-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}
@media (max-width: 1320px) { .page-sender-profile .sender-layout { grid-template-columns: 1fr !important; } .page-sender-profile .email-preview-card { position: static !important; } }
@media (max-width: 640px) { .page-sender-profile .preview-content { padding: 28px 20px 26px !important; } .page-sender-profile .preview-details { grid-template-columns: 1fr !important; } }

/* v31 search input hard reset. */
.page-dashboard-redesign .dashboard-card .dashboard-toolbar label.search-box input#dashboardSearch,
.page-dashboard-redesign .dashboard-card .dashboard-toolbar label.search-box input#dashboardSearch:focus,
.page-dashboard-redesign .dashboard-card .dashboard-toolbar label.search-box input#dashboardSearch:focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 54px !important;
  padding: 0 !important;
}
.page-sender-profile *, .page-dashboard-redesign * { box-sizing: border-box !important; }

/* v31 mobile settings width guard. */
@media (max-width: 640px) {
  .page-sender-profile .sender-layout,
  .page-sender-profile .sender-fields,
  .page-sender-profile .profile-card,
  .page-sender-profile .action-card,
  .page-sender-profile .email-preview-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* v35 customer email preview: match the actual Costco signing email. */
.page-sender-profile .actual-email-preview {
  overflow: hidden !important;
  border: 1px solid #eadfce !important;
  border-radius: 0 !important;
  background: #fbf3e8 !important;
  box-shadow: 0 22px 58px rgba(7, 20, 48, 0.1) !important;
}

.page-sender-profile .preview-hero {
  min-height: 420px !important;
  padding: 22px 0 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background:
    linear-gradient(#fbf3e8 0 116px, transparent 116px),
    url("/static/email-hero.webp") center bottom / cover no-repeat !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark {
  min-width: 250px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: skew(-8deg) !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark span {
  color: #d21f2f !important;
  font-size: 58px !important;
  line-height: 0.82 !important;
  letter-spacing: -0.055em !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark small {
  width: 210px !important;
  margin: 8px auto 0 !important;
  padding: 3px 0 2px !important;
  border-top: 7px solid #005daa !important;
  border-bottom: 7px solid #005daa !important;
  color: #005daa !important;
  font-size: 22px !important;
  line-height: 0.82 !important;
  letter-spacing: -0.04em !important;
  text-decoration: none !important;
}

.page-sender-profile .preview-content {
  padding: 48px 44px 36px !important;
  border-top: 4px solid #d15050 !important;
  background: #fffaf4 !important;
  text-align: center !important;
}

.page-sender-profile .actual-email-preview .preview-subject {
  display: none !important;
}

.page-sender-profile .preview-content h3 {
  margin: 0 !important;
  color: #2d2d2d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 5vw, 74px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
}

.page-sender-profile .preview-divider {
  display: block !important;
  width: 70px !important;
  height: 3px !important;
  margin: 24px auto 20px !important;
  background: #d11f2b !important;
}

.page-sender-profile .preview-divider span,
.page-sender-profile .preview-divider b {
  display: none !important;
}

.page-sender-profile .preview-content p {
  max-width: 660px !important;
  margin: 0 auto 12px !important;
  color: #3c3c3c !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.page-sender-profile .preview-content [data-preview-greeting],
.page-sender-profile .preview-content [data-preview-closing] {
  display: none !important;
}

.page-sender-profile .preview-content button {
  width: auto !important;
  min-height: 68px !important;
  margin: 22px auto 24px !important;
  padding: 0 52px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #c42026 !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 24px rgba(194, 32, 38, 0.22) !important;
}

.page-sender-profile .preview-details {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-width: 560px !important;
  margin: 26px auto 0 !important;
  padding: 10px 28px !important;
  border: 1px solid rgba(7, 20, 48, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

.page-sender-profile .preview-details div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(7, 20, 48, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #2d2d2d !important;
  font-size: 20px !important;
}

.page-sender-profile .preview-details div:last-child {
  border-bottom: 0 !important;
}

.page-sender-profile .preview-details i {
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  flex: 0 0 34px !important;
  border: 1px solid rgba(209, 31, 43, 0.24) !important;
  border-radius: 999px !important;
  color: #d11f2b !important;
  font-style: normal !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.page-sender-profile .preview-details span,
.page-sender-profile .preview-details b {
  color: #2d2d2d !important;
}

.page-sender-profile .preview-signature-block {
  margin: 0 !important;
  padding: 0 44px 34px !important;
  border-top: 0 !important;
  background: #fffaf4 !important;
}

.page-sender-profile .preview-signature-block > div:last-child {
  min-height: 132px !important;
  flex: 1 !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(7, 20, 48, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

.page-sender-profile .preview-signature-block .preview-avatar {
  width: 116px !important;
  height: 116px !important;
  min-width: 116px !important;
  margin: 18px 0 0 22px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #071430 !important;
  box-shadow: none !important;
}

.page-sender-profile .preview-signature-block strong {
  color: #252525 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 25px !important;
  font-weight: 850 !important;
}

.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b,
.page-sender-profile .preview-signature-block small {
  display: block !important;
  margin-top: 5px !important;
  color: #3b3b3b !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.page-sender-profile .preview-signature-block em {
  display: block !important;
  width: 28px !important;
  height: 2px !important;
  margin-top: 10px !important;
  background: #d11f2b !important;
}

.page-sender-profile .actual-email-preview .preview-footer {
  margin: 0 auto !important;
  padding: 22px 24px 28px !important;
  border-top: 1px solid rgba(7, 20, 48, 0.18) !important;
  background: #fbf3e8 !important;
  text-align: center !important;
}

.page-sender-profile .actual-email-preview .preview-footer span {
  color: #3c3c3c !important;
  font-size: 17px !important;
}

@media (max-width: 760px) {
  .page-sender-profile .preview-hero {
    min-height: 330px !important;
  }

  .page-sender-profile .preview-content,
  .page-sender-profile .preview-signature-block {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .page-sender-profile .preview-signature-block {
    flex-direction: column !important;
  }

  .page-sender-profile .preview-signature-block .preview-avatar {
    margin-left: 0 !important;
  }
}

/* v36 shared sidebar polish: smaller brand, tighter navigation, lifted account tools. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
  gap: 22px !important;
  padding-top: 30px !important;
  padding-bottom: 48px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-block {
  padding-bottom: 22px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark {
  width: 164px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark span {
  font-size: 34px !important;
  letter-spacing: -0.082em !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar .costco-wordmark small {
  width: 106px !important;
  margin-top: 4px !important;
  border-top-width: 3px !important;
  box-shadow: 0 3px 0 #005daa !important;
  font-size: 10px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-copy h2 {
  margin-top: 16px !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-copy p {
  display: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-nav {
  margin-top: 24px !important;
  gap: 8px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
  gap: 8px !important;
  margin-top: auto !important;
  margin-bottom: 26px !important;
  padding-top: 22px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-link,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification summary {
  min-height: 54px !important;
  gap: 15px !important;
  padding-inline: 16px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-icon,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .nav-icon svg,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-notification-icon::before {
  width: 22px !important;
  height: 22px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .user-card {
  min-height: 72px !important;
}

@media (max-height: 820px) and (min-width: 761px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
    gap: 16px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .brand-block {
    padding-bottom: 18px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-nav {
    margin-top: 14px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
    margin-bottom: 10px !important;
    padding-top: 16px !important;
  }
}

/* v37 keep utility/account tools anchored at the bottom and persist dismissed notifications. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar {
  padding-bottom: 30px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  align-self: stretch !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .notification-item[hidden],
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) [data-notification-item][hidden] {
  display: none !important;
}

@media (max-height: 820px) and (min-width: 761px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom {
    margin-bottom: 0 !important;
  }
}

/* v38 dashboard filters: individual buttons, no shared pill container. */
.page-dashboard-redesign .filter-tabs {
  width: fit-content !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-dashboard-redesign .filter-tab {
  min-height: 46px !important;
  padding: 0 22px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 22px rgba(7, 20, 48, 0.04) !important;
}

.page-dashboard-redesign .filter-tab:hover {
  border-color: rgba(237, 0, 47, 0.34) !important;
  color: var(--red) !important;
}

.page-dashboard-redesign .filter-tab.active {
  border-color: rgba(237, 0, 47, 0.55) !important;
  background: #fff !important;
  color: var(--red) !important;
  box-shadow: 0 0 0 1px rgba(237, 0, 47, 0.2), 0 10px 24px rgba(237, 0, 47, 0.08) !important;
}

@media (max-width: 920px) {
  .page-dashboard-redesign .filter-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }

  .page-dashboard-redesign .filter-tab {
    flex: 0 0 auto !important;
  }
}

/* v39 sidebar order lock: brand, main nav, then bottom utility tools on every redesigned page. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar > .brand-block {
  order: 1 !important;
  flex: 0 0 auto !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar > .sidebar-nav {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-top: 24px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar > .sidebar-bottom {
  order: 3 !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom > .sidebar-notification {
  order: 1 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom > .nav-link.secondary {
  order: 2 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .sidebar-bottom > .user-card {
  order: 3 !important;
}

@media (max-height: 820px) and (min-width: 761px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar > .sidebar-nav {
    margin-top: 14px !important;
  }

  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign) .app-sidebar > .sidebar-bottom {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* v40 dashboard actions: View uses Costco blue instead of dark navy. */
.page-dashboard-redesign .row-action.view-action,
.page-dashboard-redesign a.row-action.view-action {
  background: #005daa !important;
  border-color: #005daa !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 93, 170, 0.18) !important;
}

.page-dashboard-redesign .row-action.view-action:hover,
.page-dashboard-redesign a.row-action.view-action:hover {
  background: #004f92 !important;
  border-color: #004f92 !important;
  color: #fff !important;
}

/* v42 resume/edit actions for unfinished or issue contracts. */
.page-dashboard-redesign .row-action.resume-action,
.page-dashboard-redesign a.row-action.resume-action {
  background: #fff7e8 !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  color: #9a5a00 !important;
  box-shadow: none !important;
}

.page-dashboard-redesign .row-action.resume-action:hover,
.page-dashboard-redesign a.row-action.resume-action:hover {
  background: #ffefcf !important;
  border-color: rgba(245, 158, 11, 0.42) !important;
  color: #7a4300 !important;
}

.page-contract-detail .resume-detail-action {
  background: #005daa !important;
  border-color: #005daa !important;
  color: #fff !important;
}

/* v43 dashboard status polish: clearer row states plus first-time signed celebration. */
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row {
  position: relative !important;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.03) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row td:first-child {
  box-shadow: inset 5px 0 0 transparent !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed td {
  background: linear-gradient(90deg, rgba(19, 186, 115, 0.105), rgba(19, 186, 115, 0.035) 48%, #fff 100%) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed td:first-child {
  box-shadow: inset 5px 0 0 #13ba73 !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending td {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.115), rgba(245, 158, 11, 0.035) 48%, #fff 100%) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending td:first-child {
  box-shadow: inset 5px 0 0 #f59e0b !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error td {
  background: linear-gradient(90deg, rgba(237, 0, 47, 0.105), rgba(237, 0, 47, 0.035) 48%, #fff 100%) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues td:first-child,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error td:first-child {
  box-shadow: inset 5px 0 0 #ed002f !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired td {
  background: linear-gradient(90deg, rgba(91, 102, 133, 0.105), rgba(91, 102, 133, 0.035) 48%, #fff 100%) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired td:first-child {
  box-shadow: inset 5px 0 0 #8a94a8 !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.signed-pulse td {
  animation: signed-row-pulse 2200ms ease-out 1 !important;
}

.page-dashboard-redesign .pill.green::before,
.page-dashboard-redesign .pill.mint::before,
.page-dashboard-redesign .pill.gold::before,
.page-dashboard-redesign .pill.red::before,
.page-dashboard-redesign .pill.gray::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 6px !important;
  border-radius: 999px !important;
  vertical-align: 1px !important;
  background: currentColor !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent) !important;
}

.dashboard-confetti-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}

.dashboard-confetti-overlay span {
  position: absolute;
  top: -18px;
  left: var(--x);
  width: 10px;
  height: 15px;
  border-radius: 3px;
  opacity: 0.95;
  transform: rotate(var(--spin));
  animation: dashboard-confetti-fall 2400ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay) forwards;
}

.dashboard-signed-toast {
  position: fixed;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 42px);
  z-index: 9999;
  display: grid;
  gap: 4px;
  min-width: min(360px, calc(100vw - 32px));
  padding: 18px 20px;
  border: 1px solid rgba(19, 186, 115, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(7, 20, 48, 0.18);
  color: #071430;
  backdrop-filter: blur(16px);
  animation: dashboard-toast-in 260ms ease-out, dashboard-toast-out 260ms ease-in 3200ms forwards;
}

.dashboard-signed-toast strong {
  color: #04965b;
  font-size: 15px;
  font-weight: 950;
}

.dashboard-signed-toast span {
  color: #5b6685;
  font-size: 13px;
  font-weight: 750;
}

@keyframes signed-row-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(19, 186, 115, 0);
  }
  22% {
    box-shadow: 0 0 0 5px rgba(19, 186, 115, 0.18);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(19, 186, 115, 0);
  }
}

@keyframes dashboard-confetti-fall {
  0% {
    transform: translate3d(0, -24px, 0) rotate(var(--spin));
  }
  100% {
    transform: translate3d(calc((50vw - var(--x)) * 0.22), 112vh, 0) rotate(calc(var(--spin) + 620deg));
  }
}

@keyframes dashboard-toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboard-toast-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@media (max-width: 920px) {
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row {
    overflow: hidden !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed {
    background: linear-gradient(135deg, rgba(19, 186, 115, 0.11), #fff 62%) !important;
    border-color: rgba(19, 186, 115, 0.24) !important;
    box-shadow: inset 5px 0 0 #13ba73, 0 10px 28px rgba(19, 186, 115, 0.08) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), #fff 62%) !important;
    border-color: rgba(245, 158, 11, 0.24) !important;
    box-shadow: inset 5px 0 0 #f59e0b, 0 10px 28px rgba(245, 158, 11, 0.08) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error {
    background: linear-gradient(135deg, rgba(237, 0, 47, 0.1), #fff 62%) !important;
    border-color: rgba(237, 0, 47, 0.22) !important;
    box-shadow: inset 5px 0 0 #ed002f, 0 10px 28px rgba(237, 0, 47, 0.07) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired {
    background: linear-gradient(135deg, rgba(91, 102, 133, 0.1), #fff 62%) !important;
    border-color: rgba(91, 102, 133, 0.18) !important;
    box-shadow: inset 5px 0 0 #8a94a8, 0 10px 28px rgba(7, 20, 48, 0.05) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row td,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed td,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending td,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues td,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error td,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired td {
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* v44 dashboard status polish correction: keep the table clean and premium. */
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired td {
  background: #fff !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row:hover td {
  background: #fbfcff !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed:hover td {
  background: linear-gradient(90deg, rgba(19, 186, 115, 0.035), #fbfcff 160px) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending:hover td {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.035), #fbfcff 160px) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues:hover td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error:hover td {
  background: linear-gradient(90deg, rgba(237, 0, 47, 0.035), #fbfcff 160px) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired:hover td {
  background: linear-gradient(90deg, rgba(91, 102, 133, 0.035), #fbfcff 160px) !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row td:first-child {
  position: relative !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row td:first-child::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: transparent !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed td:first-child::before {
  background: #13ba73 !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending td:first-child::before {
  background: #f59e0b !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues td:first-child::before,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error td:first-child::before {
  background: #ed002f !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired td:first-child::before {
  background: #8a94a8 !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row td:first-child {
  box-shadow: none !important;
}

@media (max-width: 920px) {
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired {
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(7, 20, 48, 0.04) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed {
    border-color: rgba(19, 186, 115, 0.22) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending {
    border-color: rgba(245, 158, 11, 0.22) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error {
    border-color: rgba(237, 0, 47, 0.22) !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired {
    border-color: rgba(91, 102, 133, 0.18) !important;
  }
}

/* v45 compact app headers and dashboard table polish. */
body:is(.page-create-redesign, .page-template-redesign, .page-sender-profile) .page-header {
  display: none !important;
}

.page-dashboard-redesign .page-header {
  display: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-template-redesign, .page-sender-profile) .app-main {
  padding-top: clamp(24px, 3vw, 42px) !important;
}

.page-dashboard-redesign .dashboard-card {
  width: min(100%, 1380px) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px rgba(7, 20, 48, 0.065) !important;
}

.page-dashboard-redesign .contracts-head {
  align-items: start !important;
  margin-bottom: 22px !important;
  padding-bottom: 20px !important;
}

.page-dashboard-redesign .contracts-head h2 {
  font-size: clamp(32px, 3vw, 46px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.page-dashboard-redesign .contracts-head p {
  margin-top: 8px !important;
  color: #33415f !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.page-dashboard-redesign .cleanup-box {
  align-items: end !important;
}

.page-dashboard-redesign .cleanup-box .secondary-btn {
  min-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  color: #005daa !important;
}

.page-dashboard-redesign .dashboard-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 26px !important;
}

.page-dashboard-redesign .search-box {
  flex: 1 1 360px !important;
  max-width: 520px !important;
  min-height: 48px !important;
  border-radius: 11px !important;
  background: #fff !important;
}

.page-dashboard-redesign .filter-tabs {
  flex: 0 1 auto !important;
  gap: 8px !important;
}

.page-dashboard-redesign .filter-tab {
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
}

.page-dashboard-redesign .filter-tab[data-filter="pending"] {
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}

.page-dashboard-redesign .filter-tab[data-filter="signed"] {
  color: #059669 !important;
  border-color: rgba(19, 186, 115, 0.2) !important;
}

.page-dashboard-redesign .filter-tab[data-filter="issues"] {
  color: #ed002f !important;
  border-color: rgba(237, 0, 47, 0.2) !important;
}

.page-dashboard-redesign .filter-tab.active {
  color: #005daa !important;
  border-color: rgba(0, 93, 170, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(0, 93, 170, 0.18), 0 10px 24px rgba(0, 93, 170, 0.08) !important;
}

.page-dashboard-redesign .table-wrap {
  border-radius: 14px !important;
}

.page-dashboard-redesign .contracts-table {
  min-width: 1080px !important;
}

.page-dashboard-redesign .contracts-table th {
  padding: 13px 18px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.page-dashboard-redesign .contracts-table td {
  height: auto !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
}

.page-dashboard-redesign .customer-link strong {
  font-size: 14px !important;
}

.page-dashboard-redesign .customer-link span,
.page-dashboard-redesign .email-cell {
  font-size: 13px !important;
}

.page-dashboard-redesign .timeline-list {
  gap: 4px !important;
}

.page-dashboard-redesign .timeline-list div {
  grid-template-columns: 62px minmax(0, 1fr) !important;
}

.page-dashboard-redesign .timeline-list span {
  font-size: 10px !important;
}

.page-dashboard-redesign .timeline-list strong {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.page-dashboard-redesign .pill {
  padding: 7px 11px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.page-dashboard-redesign .action-stack {
  gap: 7px !important;
}

.page-dashboard-redesign .row-action {
  min-height: 32px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

@media (min-width: 921px) {
  .page-dashboard-redesign .contracts-table th:nth-child(1),
  .page-dashboard-redesign .contracts-table td:nth-child(1) {
    width: 19% !important;
  }

  .page-dashboard-redesign .contracts-table th:nth-child(2),
  .page-dashboard-redesign .contracts-table td:nth-child(2) {
    width: 10% !important;
  }

  .page-dashboard-redesign .contracts-table th:nth-child(3),
  .page-dashboard-redesign .contracts-table td:nth-child(3) {
    width: 23% !important;
  }

  .page-dashboard-redesign .contracts-table th:nth-child(4),
  .page-dashboard-redesign .contracts-table td:nth-child(4) {
    width: 11% !important;
  }

  .page-dashboard-redesign .contracts-table th:nth-child(5),
  .page-dashboard-redesign .contracts-table td:nth-child(5) {
    width: 24% !important;
  }

  .page-dashboard-redesign .contracts-table th:nth-child(6),
  .page-dashboard-redesign .contracts-table td:nth-child(6) {
    width: 13% !important;
  }
}

@media (max-width: 920px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-template-redesign, .page-sender-profile) .app-main {
    padding-top: 18px !important;
  }

  .page-dashboard-redesign .dashboard-card {
    padding: 18px 14px !important;
  }

  .page-dashboard-redesign .contracts-head {
    display: grid !important;
    gap: 14px !important;
  }

  .page-dashboard-redesign .cleanup-box {
    align-items: start !important;
  }

  .page-dashboard-redesign .dashboard-toolbar {
    display: grid !important;
  }

  .page-dashboard-redesign .search-box {
    max-width: none !important;
  }

  .page-dashboard-redesign .filter-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .page-dashboard-redesign .filter-tab {
    flex: 0 0 auto !important;
  }
}

/* v46 dashboard table correction: no row hover, full-width card, shorter rows. */
.page-dashboard-redesign .app-main {
  max-width: none !important;
}

.page-dashboard-redesign .dashboard-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.page-dashboard-redesign .contracts-table tr.dashboard-contract-row:hover td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed:hover td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending:hover td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues:hover td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error:hover td,
.page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired:hover td {
  background: #fff !important;
}

.page-dashboard-redesign .contracts-table th {
  padding: 12px 16px !important;
}

.page-dashboard-redesign .contracts-table td {
  padding: 11px 16px !important;
  vertical-align: middle !important;
}

.page-dashboard-redesign .customer-link strong {
  margin-bottom: 2px !important;
  line-height: 1.15 !important;
}

.page-dashboard-redesign .timeline-list {
  gap: 2px !important;
}

.page-dashboard-redesign .timeline-list div {
  gap: 6px !important;
}

.page-dashboard-redesign .timeline-list strong {
  line-height: 1.15 !important;
}

.page-dashboard-redesign .pill {
  padding: 6px 10px !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .action-stack {
  gap: 5px !important;
}

.page-dashboard-redesign .row-action {
  min-height: 29px !important;
  padding: 0 10px !important;
  line-height: 1 !important;
}

.page-dashboard-redesign .row-action svg {
  width: 13px !important;
  height: 13px !important;
}

@media (min-width: 921px) {
  .page-dashboard-redesign .contracts-table {
    min-width: 0 !important;
  }

  .page-dashboard-redesign .actions-cell {
    min-width: 190px !important;
  }

  .page-dashboard-redesign .timeline-cell {
    min-width: 250px !important;
  }
}

@media (max-width: 920px) {
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row:hover {
    transform: none !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-signed,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-pending,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-issues,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-error,
  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row.status-expired {
    box-shadow: 0 8px 22px rgba(7, 20, 48, 0.035) !important;
  }
}

/* v41 quote placement mobile: keep rendered quote and boxes usable above bottom nav. */
@media (max-width: 920px) {
  .page-quote-placement-redesign .app-main {
    padding: 18px 12px calc(138px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  .page-quote-placement-redesign .page-header h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .page-quote-placement-redesign .placement-alert,
  .page-quote-placement-redesign .controls-card,
  .page-quote-placement-redesign .preview-card {
    border-radius: 18px !important;
  }

  .page-quote-placement-redesign .controls-card,
  .page-quote-placement-redesign .preview-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  .page-quote-placement-redesign .preview-header {
    gap: 12px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .page-quote-placement-redesign .preview-chip {
    justify-self: start !important;
  }

  .page-quote-placement-redesign .quote-stage {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 10px !important;
    min-height: auto !important;
    border-radius: 16px !important;
  }

  .page-quote-placement-redesign .quote-canvas-wrap {
    max-width: 100% !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }

  .page-quote-placement-redesign .placement-box {
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 7px !important;
    font-size: clamp(10px, 3.4vw, 13px) !important;
    box-shadow: 0 8px 18px rgba(7, 20, 48, 0.16) !important;
  }

  .page-quote-placement-redesign .placement-box.signature {
    padding-inline: 8px !important;
  }

  .page-quote-placement-redesign .placement-box.date {
    padding-inline: 6px !important;
  }

  .page-quote-placement-redesign .mobile-nav {
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 420px) {
  .page-quote-placement-redesign .controls-card,
  .page-quote-placement-redesign .preview-card {
    padding: 14px !important;
  }

  .page-quote-placement-redesign .placement-mode-btn,
  .page-quote-placement-redesign .reset-btn,
  .page-quote-placement-redesign .primary-btn {
    min-height: 52px !important;
  }

  .page-quote-placement-redesign .quote-stage {
    padding: 8px !important;
  }
}

/* v43 shared workflow upgrades. */
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .app-sidebar {
  width: 288px !important;
  padding: 32px 32px 30px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .app-sidebar::-webkit-scrollbar {
  display: none !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .brand-block {
  padding-bottom: 26px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .app-sidebar .costco-wordmark {
  width: 158px !important;
  max-width: 158px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .app-sidebar .costco-wordmark span {
  font-size: 36px !important;
  line-height: 0.82 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .app-sidebar .costco-wordmark small {
  width: 110px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .brand-copy h2 {
  margin-top: 18px !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .sidebar-nav {
  margin-top: 26px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .sidebar-bottom {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 26px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .nav-icon,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .sidebar-notification-icon {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .nav-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.15 !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .nav-link.active,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .nav-link:hover {
  color: var(--red) !important;
  background: var(--red-soft) !important;
  border-color: rgba(237, 0, 47, 0.16) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .nav-link.active svg,
body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .nav-link:hover svg {
  stroke: var(--red) !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .sidebar-notification-panel {
  width: 100% !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .notification-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  padding: 12px 10px !important;
  border-radius: 12px !important;
}

body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .notification-dismiss {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.workflow-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.workflow-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(7, 20, 48, 0.05);
}

.workflow-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.workflow-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.workflow-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.workflow-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.workflow-list span,
.quiet-copy {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.row-action.copy-action {
  background: #fff !important;
  border: 1px solid rgba(0, 93, 170, 0.28) !important;
  color: #005daa !important;
}

.row-action.resend-action,
.row-action.secondary-row-action {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.row-action.copy-action:disabled {
  opacity: 0.72;
  cursor: wait;
}

.detail-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 20px;
  margin-bottom: 20px;
}

.detail-action-card,
.preflight-card {
  min-width: 0;
}

.detail-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.detail-actions-grid form {
  display: contents;
}

.detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.detail-fields div,
.note-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.detail-fields span,
.note-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-fields strong,
.note-card strong {
  color: var(--ink);
}

.preflight-list,
.activity-list,
.notes-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.preflight-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.preflight-item > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.preflight-item.is-ok > span {
  background: #09a65a;
}

.preflight-item.needs-work > span {
  background: var(--red);
}

.preflight-item strong,
.preflight-item p {
  margin: 0;
}

.preflight-item p {
  color: var(--muted);
  font-weight: 750;
}

.activity-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.activity-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: #8a94ad;
}

.activity-success .activity-dot {
  background: #09a65a;
}

.activity-error .activity-dot {
  background: var(--red);
}

.activity-item p,
.activity-item small {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.note-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.danger-zone {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.review-preflight-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.review-preflight-strip div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.review-preflight-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.review-preflight-strip .is-ok span {
  background: #09a65a;
}

.review-preflight-strip .needs-work span {
  background: var(--red);
}

.review-preflight-strip strong,
.review-preflight-strip small {
  display: block;
  margin-top: 8px;
}

.review-preflight-strip small {
  overflow: hidden;
  color: var(--muted);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .workflow-insights,
  .detail-command-grid,
  .review-preflight-strip {
    grid-template-columns: 1fr;
  }

  .detail-actions-grid,
  .detail-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body:is(.page-dashboard-redesign, .page-create-redesign, .page-review-redesign, .page-quote-placement-redesign, .page-sender-profile, .page-template-redesign, .page-contract-detail-redesign) .app-sidebar {
    display: none !important;
  }

  .workflow-insights {
    margin-bottom: 14px;
  }

  .review-preflight-strip {
    gap: 8px;
  }
}

/* v47 sender email polish and custom hero image upload. */
.page-sender-profile .email-hero-upload-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 18px;
  align-items: center;
}

.page-sender-profile .email-hero-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.page-sender-profile .email-hero-thumb img,
.page-sender-profile .preview-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-sender-profile .actual-email-preview {
  overflow: hidden !important;
  border: 1px solid rgba(7, 20, 48, 0.10) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fffaf4 0%, #fff7ed 100%) !important;
  box-shadow: 0 22px 56px rgba(7, 20, 48, 0.10) !important;
}

.page-sender-profile .preview-hero {
  position: relative !important;
  min-height: 430px !important;
  padding: 0 !important;
  display: block !important;
  background: #f5ede3 !important;
  border-bottom: 4px solid #d15050 !important;
}

.page-sender-profile .preview-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 244, 0.98) 0, rgba(255, 250, 244, 0.90) 118px, rgba(255, 250, 244, 0.08) 290px, transparent 100%),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.78), transparent 36%) !important;
}

.page-sender-profile .preview-costco-wordmark {
  position: absolute !important;
  z-index: 2 !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.page-sender-profile .preview-content {
  padding: 58px clamp(24px, 6vw, 62px) 42px !important;
  text-align: center !important;
  background: linear-gradient(180deg, #fffaf4 0%, #fff7ed 100%) !important;
}

.page-sender-profile .preview-subject {
  display: inline-flex !important;
  max-width: 100% !important;
  margin: 0 auto 16px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(209, 31, 43, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(209, 31, 43, 0.06) !important;
  color: var(--red) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.page-sender-profile .preview-content h3 {
  margin-top: 0 !important;
  color: #2d2d2d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 5.4vw, 72px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.96 !important;
}

.page-sender-profile .preview-content p {
  max-width: 660px !important;
  margin-inline: auto !important;
  color: #373737 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.page-sender-profile .preview-content button {
  min-height: 64px !important;
  margin-top: 22px !important;
  padding-inline: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #d11f2b, #b91622) !important;
  box-shadow: 0 16px 34px rgba(209, 31, 43, 0.24) !important;
  font-size: 24px !important;
}

.page-sender-profile .preview-details {
  max-width: 560px !important;
  margin: 36px auto 0 !important;
  padding: 8px 26px !important;
  border: 1px solid rgba(7, 20, 48, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  text-align: left !important;
}

.page-sender-profile .preview-details div {
  min-height: 50px !important;
}

.page-sender-profile .preview-details i {
  color: var(--red) !important;
  background: #fff !important;
  border-color: rgba(209, 31, 43, 0.20) !important;
}

.page-sender-profile .preview-signature-block {
  margin: 0 clamp(24px, 6vw, 62px) 34px !important;
  padding: 22px 26px !important;
  border: 1px solid rgba(7, 20, 48, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 14px 36px rgba(7, 20, 48, 0.06) !important;
}

.page-sender-profile .preview-footer {
  padding: 26px !important;
  border-top: 1px solid rgba(7, 20, 48, 0.13) !important;
  background: #fbf3e8 !important;
  color: #3f3f3f !important;
  font-size: 16px !important;
}

@media (max-width: 1180px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-preview-card {
    position: static !important;
  }
}

@media (max-width: 620px) {
  .page-sender-profile .email-hero-upload-row,
  .page-sender-profile .photo-row,
  .page-sender-profile .preview-signature-block {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .preview-hero {
    min-height: 300px !important;
  }

  .page-sender-profile .preview-content {
    padding: 42px 18px 30px !important;
  }
}

/* v48 final email preview pass: compact, consistent, and closer to the real sent email. */
.page-sender-profile .email-preview-card {
  align-self: start !important;
}

.page-sender-profile .email-preview-card .preview-top {
  margin-bottom: 12px !important;
}

.page-sender-profile .actual-email-preview {
  max-width: 720px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 20px !important;
  background: #fffaf4 !important;
  box-shadow: 0 20px 54px rgba(7, 20, 48, 0.10) !important;
  color: var(--ink) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.page-sender-profile .preview-hero {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  height: 315px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-bottom: 3px solid #d15050 !important;
  background: #fffaf4 !important;
}

.page-sender-profile .preview-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.96) 0, rgba(255, 250, 244, 0.90) 86px, rgba(255, 250, 244, 0.12) 172px, rgba(255, 250, 244, 0) 100%) !important;
}

.page-sender-profile .preview-hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  filter: saturate(0.98) contrast(0.98) !important;
}

.page-sender-profile .preview-costco-wordmark {
  position: absolute !important;
  z-index: 2 !important;
  top: 28px !important;
  left: 50% !important;
  display: block !important;
  width: 185px !important;
  min-width: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) skew(-8deg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

.page-sender-profile .preview-costco-wordmark span {
  display: block !important;
  color: var(--red) !important;
  font-family: Arial Black, Arial, Helvetica, sans-serif !important;
  font-size: 45px !important;
  font-style: italic !important;
  font-weight: 950 !important;
  letter-spacing: -0.07em !important;
  line-height: 0.84 !important;
}

.page-sender-profile .preview-costco-wordmark small {
  display: block !important;
  width: 156px !important;
  margin: 6px auto 0 !important;
  padding: 2px 0 !important;
  border-top: 5px solid #005daa !important;
  border-bottom: 5px solid #005daa !important;
  color: #005daa !important;
  font-family: Arial Black, Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-style: italic !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.82 !important;
  text-decoration: none !important;
}

.page-sender-profile .preview-content {
  padding: 34px clamp(22px, 5vw, 44px) 28px !important;
  background: #fffaf4 !important;
  text-align: center !important;
}

.page-sender-profile .preview-subject {
  display: none !important;
}

.page-sender-profile .preview-content h3 {
  max-width: 560px !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: clamp(30px, 3.4vw, 42px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}

.page-sender-profile .preview-divider {
  width: 54px !important;
  height: 3px !important;
  margin: 16px auto 16px !important;
  border-radius: 999px !important;
  background: var(--red) !important;
}

.page-sender-profile .preview-content p {
  max-width: 520px !important;
  margin: 0 auto 10px !important;
  color: #3a455f !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

.page-sender-profile .preview-content [data-preview-closing] {
  display: none !important;
}

.page-sender-profile .preview-content button {
  min-height: 52px !important;
  margin-top: 16px !important;
  padding: 0 34px !important;
  border-radius: 10px !important;
  background: var(--red) !important;
  box-shadow: 0 12px 24px rgba(237, 0, 47, 0.20) !important;
  color: #fff !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

.page-sender-profile .preview-details {
  max-width: 500px !important;
  margin: 24px auto 0 !important;
  padding: 4px 20px !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  text-align: left !important;
}

.page-sender-profile .preview-details div {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  min-height: 44px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #edf1f7 !important;
}

.page-sender-profile .preview-details div:last-child {
  border-bottom: 0 !important;
}

.page-sender-profile .preview-details i {
  display: none !important;
}

.page-sender-profile .preview-details b {
  color: #6a748d !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.page-sender-profile .preview-details b::after {
  content: "" !important;
}

.page-sender-profile .preview-details span {
  display: contents !important;
}

.page-sender-profile .preview-details span:not(:has(b)) {
  display: block !important;
}

.page-sender-profile .preview-signature-block {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  margin: 0 clamp(22px, 5vw, 44px) 30px !important;
  padding: 16px 18px !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.page-sender-profile .preview-avatar {
  width: 76px !important;
  height: 76px !important;
}

.page-sender-profile .preview-signature-block strong {
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b,
.page-sender-profile .preview-signature-block small {
  color: #33415f !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.page-sender-profile .preview-signature-block em {
  width: 26px !important;
  height: 2px !important;
  margin: 7px 0 5px !important;
  background: var(--red) !important;
}

.page-sender-profile .preview-footer {
  padding: 18px 26px !important;
  border-top: 1px solid #e9dfd2 !important;
  background: #fbf3e8 !important;
  color: #59647d !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-align: center !important;
}

@media (max-width: 620px) {
  .page-sender-profile .preview-hero {
    height: 235px !important;
  }

  .page-sender-profile .preview-costco-wordmark {
    top: 22px !important;
    width: 150px !important;
  }

  .page-sender-profile .preview-costco-wordmark span {
    font-size: 36px !important;
  }

  .page-sender-profile .preview-costco-wordmark small {
    width: 126px !important;
    font-size: 13px !important;
    border-top-width: 4px !important;
    border-bottom-width: 4px !important;
  }

  .page-sender-profile .preview-content {
    padding: 28px 16px 22px !important;
  }

  .page-sender-profile .preview-signature-block {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .page-sender-profile .preview-avatar {
    margin-inline: auto !important;
  }

  .page-sender-profile .preview-signature-block em {
    margin-inline: auto !important;
  }
}

/* v49 sender page repair: roomier form column, lower email height, fixed preview alignment. */
.page-sender-profile .sender-layout {
  width: min(100%, 1280px) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(430px, 520px) minmax(560px, 1fr) !important;
  gap: clamp(22px, 3vw, 36px) !important;
  align-items: start !important;
}

.page-sender-profile .sender-fields,
.page-sender-profile .email-preview-card {
  min-width: 0 !important;
}

.page-sender-profile .profile-card,
.page-sender-profile .action-card {
  padding: clamp(20px, 2.2vw, 28px) !important;
}

.page-sender-profile .field-grid.two-col,
.page-sender-profile .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 18px !important;
}

.page-sender-profile .field-card {
  min-width: 0 !important;
}

.page-sender-profile .field-card input,
.page-sender-profile .field-card textarea {
  min-width: 0 !important;
  width: 100% !important;
}

.page-sender-profile .actual-email-preview {
  max-width: 680px !important;
}

.page-sender-profile .preview-hero {
  height: 250px !important;
}

.page-sender-profile .preview-hero::after {
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.96) 0, rgba(255, 250, 244, 0.90) 74px, rgba(255, 250, 244, 0.10) 150px, rgba(255, 250, 244, 0) 100%) !important;
}

.page-sender-profile .preview-costco-wordmark {
  top: 24px !important;
  right: auto !important;
  left: 50% !important;
  width: 168px !important;
  margin: 0 !important;
  transform: translateX(-50%) skew(-8deg) !important;
}

.page-sender-profile .preview-costco-wordmark span {
  font-size: 40px !important;
}

.page-sender-profile .preview-costco-wordmark small {
  width: 138px !important;
  font-size: 14px !important;
  border-top-width: 4px !important;
  border-bottom-width: 4px !important;
}

.page-sender-profile .preview-content {
  padding: 28px 34px 24px !important;
}

.page-sender-profile .preview-content h3 {
  max-width: 480px !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  line-height: 1.05 !important;
}

.page-sender-profile .preview-content p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.page-sender-profile .preview-content button {
  min-height: 48px !important;
  padding: 0 30px !important;
  font-size: 15px !important;
}

.page-sender-profile .preview-details {
  margin-top: 22px !important;
  max-width: 450px !important;
}

.page-sender-profile .preview-details div {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  min-height: 38px !important;
  padding: 8px 0 !important;
}

.page-sender-profile .preview-details span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #33415f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-sender-profile .preview-signature-block {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 34px 24px !important;
  padding: 14px 16px !important;
}

.page-sender-profile .preview-signature-block > div:last-child {
  min-width: 0 !important;
}

.page-sender-profile .preview-avatar {
  width: 68px !important;
  height: 68px !important;
}

.page-sender-profile .preview-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.page-sender-profile .preview-signature-block strong {
  font-size: 16px !important;
}

.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b,
.page-sender-profile .preview-signature-block small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-sender-profile .preview-footer {
  padding: 16px 22px !important;
}

.page-sender-profile .email-hero-upload-row {
  grid-template-columns: minmax(160px, 230px) minmax(0, 1fr) !important;
}

.page-sender-profile .action-card {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.2fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

.page-sender-profile .action-card h2 {
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1.05 !important;
}

.page-sender-profile .test-email-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

.page-sender-profile .test-email-row input {
  min-width: 0 !important;
}

@media (max-width: 1280px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(380px, 480px) minmax(500px, 1fr) !important;
  }
}

@media (max-width: 1120px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-preview-card {
    position: static !important;
  }
}

@media (max-width: 680px) {
  .page-sender-profile .field-grid.two-col,
  .page-sender-profile .field-grid,
  .page-sender-profile .email-hero-upload-row,
  .page-sender-profile .action-card,
  .page-sender-profile .test-email-row {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .preview-hero {
    height: 210px !important;
  }

  .page-sender-profile .preview-content {
    padding: 26px 16px 22px !important;
  }

  .page-sender-profile .preview-signature-block {
    margin-inline: 16px !important;
  }
}

/* v50 email settings redesign: compact editor cards with a polished live email preview. */
.page-sender-profile .app-main {
  padding-top: clamp(28px, 4vw, 44px) !important;
}

.page-sender-profile #senderProfileForm {
  width: min(100%, 1360px) !important;
  margin-inline: auto !important;
}

.page-sender-profile .email-settings-header {
  width: 100% !important;
  margin: 0 0 30px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  align-items: start !important;
}

.page-sender-profile .email-settings-header h1 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
}

.page-sender-profile .email-settings-header .page-subtitle {
  max-width: 620px !important;
  margin-top: 12px !important;
  color: #52607c !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.page-sender-profile .email-settings-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.page-sender-profile .secondary-top-btn,
.page-sender-profile .email-settings-actions .primary-btn {
  min-height: 52px !important;
  padding: 0 26px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.page-sender-profile .secondary-top-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #cfd8e8 !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 24px rgba(7, 20, 48, 0.05) !important;
}

.page-sender-profile .top-btn-icon,
.page-sender-profile .settings-card-icon,
.page-sender-profile .settings-edit-icon,
.page-sender-profile .sender-inline-details svg,
.page-sender-profile .change-image-btn svg {
  display: inline-grid !important;
  place-items: center !important;
}

.page-sender-profile .top-btn-icon svg,
.page-sender-profile .settings-card-icon svg,
.page-sender-profile .settings-edit-icon svg,
.page-sender-profile .sender-inline-details svg,
.page-sender-profile .change-image-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.page-sender-profile .email-settings-actions .primary-btn {
  background: var(--red) !important;
  box-shadow: 0 18px 38px rgba(237, 0, 47, 0.18) !important;
}

.page-sender-profile .notice-stack {
  width: 100% !important;
  margin: -14px 0 18px !important;
}

.page-sender-profile .notice {
  min-height: 38px !important;
  padding: 10px 16px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.page-sender-profile .sender-layout {
  width: 100% !important;
  grid-template-columns: minmax(380px, 470px) minmax(620px, 1fr) !important;
  gap: 28px !important;
}

.page-sender-profile .sender-fields {
  display: grid !important;
  gap: 18px !important;
}

.page-sender-profile .compact-settings-card {
  padding: 22px !important;
  border: 1px solid #dce4f1 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(7, 20, 48, 0.05) !important;
}

.page-sender-profile .card-title-row {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 28px !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
}

.page-sender-profile .card-title-row h2 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.page-sender-profile .settings-card-icon,
.page-sender-profile .settings-edit-icon {
  color: #061638 !important;
}

.page-sender-profile .settings-edit-icon {
  cursor: pointer !important;
}

.page-sender-profile .settings-edit-icon input,
.page-sender-profile .change-image-btn input,
.page-sender-profile .photo-upload-btn input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.page-sender-profile .sender-identity-row {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: center !important;
}

.page-sender-profile .large-avatar {
  width: 110px !important;
  height: 110px !important;
  border-radius: 999px !important;
  background: #edf2fa !important;
}

.page-sender-profile .large-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.page-sender-profile .sender-inline-details {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.page-sender-profile .sender-inline-details > input,
.page-sender-profile .sender-inline-details label input {
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.page-sender-profile .sender-inline-details > input#senderName {
  font-size: 19px !important;
  font-weight: 950 !important;
}

.page-sender-profile .sender-inline-details > input#senderTitle {
  color: #5b6685 !important;
  font-size: 14px !important;
}

.page-sender-profile .sender-inline-details label {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  color: #5b6685 !important;
}

.page-sender-profile .text-remove-btn {
  justify-self: start !important;
  min-height: auto !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8b1630 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.page-sender-profile .field-grid,
.page-sender-profile .field-grid.two-col,
.page-sender-profile .email-content-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.page-sender-profile .email-content-grid .field-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-sender-profile .email-content-grid .field-card span,
.page-sender-profile .compact-settings-card .field-card span {
  margin-bottom: 5px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.page-sender-profile .field-card input,
.page-sender-profile .field-card textarea {
  min-height: 38px !important;
  padding: 9px 11px !important;
  border: 1px solid #d5dfed !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.page-sender-profile .field-card textarea {
  min-height: 76px !important;
  resize: vertical !important;
}

.page-sender-profile .email-hero-upload-row {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

.page-sender-profile .email-hero-thumb {
  width: 180px !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 10px !important;
}

.page-sender-profile .cover-actions {
  display: grid !important;
  gap: 10px !important;
  justify-items: start !important;
}

.page-sender-profile .change-image-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid #cfd8e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.page-sender-profile .cover-actions .remove-photo-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.page-sender-profile .email-preview-card {
  position: sticky !important;
  top: 26px !important;
  padding: 18px !important;
  border: 1px solid #dce4f1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 22px 52px rgba(7, 20, 48, 0.08) !important;
}

.page-sender-profile .email-preview-card .preview-top {
  display: none !important;
}

.page-sender-profile .actual-email-preview {
  max-width: none !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid #dce4f1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.page-sender-profile .preview-hero {
  height: clamp(230px, 24vw, 300px) !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #f6f1eb !important;
}

.page-sender-profile .preview-hero::after {
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0)) !important;
}

.page-sender-profile .preview-hero-image {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark {
  top: 48px !important;
  left: 50% !important;
  width: 240px !important;
  transform: translateX(-50%) skew(-8deg) !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark span {
  font-size: 56px !important;
  line-height: 0.82 !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark small {
  width: 190px !important;
  margin-top: 7px !important;
  border-top-width: 5px !important;
  border-bottom-width: 5px !important;
  font-size: 18px !important;
}

.page-sender-profile .preview-content {
  padding: 28px clamp(24px, 4vw, 54px) 22px !important;
  background: #fff !important;
  text-align: center !important;
}

.page-sender-profile .preview-content h3 {
  max-width: 660px !important;
  margin: 0 auto 16px !important;
  color: var(--ink) !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

.page-sender-profile .preview-divider {
  display: none !important;
}

.page-sender-profile .preview-content p {
  max-width: 520px !important;
  margin: 0 auto 18px !important;
  color: #53607c !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.page-sender-profile .preview-content [data-preview-greeting],
.page-sender-profile .preview-content [data-preview-closing] {
  display: none !important;
}

.page-sender-profile .preview-content button {
  min-height: 52px !important;
  margin: 2px auto 24px !important;
  padding: 0 38px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--red) !important;
  box-shadow: 0 16px 30px rgba(237, 0, 47, 0.18) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

.page-sender-profile .preview-details {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 760px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.page-sender-profile .preview-details div {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 66px !important;
  padding: 12px 22px !important;
  border: 0 !important;
  text-align: left !important;
}

.page-sender-profile .preview-details div::before {
  content: "" !important;
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #cbd5e6 !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.page-sender-profile .preview-details div + div {
  border-left: 1px solid #e8edf5 !important;
}

.page-sender-profile .preview-details b {
  display: block !important;
  grid-column: 2 !important;
  color: #69748f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.page-sender-profile .preview-details b::before {
  content: none !important;
  display: none !important;
}

.page-sender-profile .preview-details span {
  display: block !important;
  grid-column: 2 !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  text-align: left !important;
  white-space: normal !important;
}

.page-sender-profile .preview-signature-block {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: center !important;
  max-width: 760px !important;
  margin: 0 auto 22px !important;
  padding: 24px 30px !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
}

.page-sender-profile .preview-signature-block .preview-avatar {
  width: 96px !important;
  height: 96px !important;
}

.page-sender-profile .preview-signature-block strong {
  margin: 0 0 4px !important;
  color: var(--ink) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b,
.page-sender-profile .preview-signature-block small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #53607c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.page-sender-profile .preview-signature-block em {
  display: none !important;
}

.page-sender-profile .actual-email-preview .preview-footer {
  padding: 18px 24px !important;
  border-top: 1px solid #e8edf5 !important;
  background: #f8fafc !important;
  color: #53607c !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

@media (max-width: 1280px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-preview-card {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .page-sender-profile .email-settings-header {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-settings-actions {
    justify-content: stretch !important;
  }

  .page-sender-profile .email-settings-actions > * {
    flex: 1 1 180px !important;
  }

  .page-sender-profile .sender-identity-row,
  .page-sender-profile .email-hero-upload-row,
  .page-sender-profile .preview-details,
  .page-sender-profile .preview-signature-block {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .large-avatar,
  .page-sender-profile .preview-signature-block .preview-avatar {
    width: 86px !important;
    height: 86px !important;
  }

  .page-sender-profile .preview-details div + div {
    border-top: 1px solid #e8edf5 !important;
    border-left: 0 !important;
  }

  .page-sender-profile .preview-signature-block {
    text-align: center !important;
    justify-items: center !important;
  }

  .page-sender-profile .preview-hero {
    height: 210px !important;
  }

  .page-sender-profile .actual-email-preview .preview-costco-wordmark {
    top: 36px !important;
    width: 168px !important;
  }

  .page-sender-profile .actual-email-preview .preview-costco-wordmark span {
    font-size: 40px !important;
  }

  .page-sender-profile .actual-email-preview .preview-costco-wordmark small {
    width: 138px !important;
    font-size: 14px !important;
  }
}

/* v51 email settings refinement: full-width workspace, clearer actions, fewer edit icons. */
.page-sender-profile .app-main {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.6vw, 56px) 72px !important;
}

.page-sender-profile #senderProfileForm {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.page-sender-profile .email-settings-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 15 !important;
  margin: 0 0 24px !important;
  padding: 0 0 16px !important;
  background: linear-gradient(180deg, rgba(246, 248, 252, 0.98), rgba(246, 248, 252, 0.90) 72%, rgba(246, 248, 252, 0)) !important;
}

.page-sender-profile .email-settings-header h1 {
  font-size: clamp(28px, 2.2vw, 38px) !important;
}

.page-sender-profile .email-settings-actions {
  align-self: center !important;
}

.page-sender-profile .email-settings-actions .primary-btn,
.page-sender-profile .secondary-top-btn {
  min-width: 190px !important;
}

.page-sender-profile .sender-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, 430px) minmax(680px, 1fr) !important;
  gap: clamp(22px, 2.4vw, 36px) !important;
  align-items: start !important;
}

.page-sender-profile .sender-fields {
  max-width: none !important;
}

.page-sender-profile .email-preview-card {
  width: 100% !important;
  max-width: none !important;
}

.page-sender-profile .card-title-row {
  grid-template-columns: 24px minmax(0, 1fr) !important;
  min-height: 30px !important;
}

.page-sender-profile .settings-edit-icon {
  display: none !important;
}

.page-sender-profile .sender-inline-details > input,
.page-sender-profile .sender-inline-details label input {
  min-height: 34px !important;
  padding: 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.page-sender-profile .sender-inline-details > input:focus,
.page-sender-profile .sender-inline-details label input:focus {
  outline: 2px solid rgba(0, 107, 179, 0.14) !important;
  outline-offset: 3px !important;
  border-radius: 5px !important;
}

.page-sender-profile .sender-photo-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 4px !important;
}

.page-sender-profile .compact-photo-btn {
  min-height: 34px !important;
  padding-inline: 13px !important;
  font-size: 12px !important;
}

.page-sender-profile .text-remove-btn {
  min-height: 34px !important;
  padding: 0 2px !important;
}

.page-sender-profile .actual-email-preview {
  min-height: auto !important;
}

.page-sender-profile .preview-hero {
  height: clamp(220px, 21vw, 330px) !important;
}

.page-sender-profile .preview-content {
  padding: clamp(24px, 3.2vw, 44px) clamp(24px, 4vw, 62px) 24px !important;
}

.page-sender-profile .preview-content h3 {
  font-size: clamp(30px, 2.9vw, 46px) !important;
}

.page-sender-profile .preview-signature-block {
  max-width: 820px !important;
}

@media (min-width: 1680px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(390px, 460px) minmax(780px, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-preview-card {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .page-sender-profile .app-main {
    padding: 20px 16px 110px !important;
  }

  .page-sender-profile .email-settings-header {
    position: static !important;
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-settings-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-settings-actions .primary-btn,
  .page-sender-profile .secondary-top-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-sender-profile .sender-identity-row {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .page-sender-profile .large-avatar {
    width: 88px !important;
    height: 88px !important;
  }

  .page-sender-profile .email-hero-upload-row {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-hero-thumb {
    width: 100% !important;
    max-width: 320px !important;
  }
}

@media (max-width: 520px) {
  .page-sender-profile .sender-identity-row,
  .page-sender-profile .preview-signature-block,
  .page-sender-profile .preview-details {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .sender-identity-row {
    justify-items: start !important;
  }

  .page-sender-profile .preview-details div + div {
    border-top: 1px solid #e8edf5 !important;
    border-left: 0 !important;
  }
}

/* v52 email settings: clearer section saving, tighter preview, and better responsive balance. */
.page-sender-profile .sender-layout {
  grid-template-columns: minmax(400px, 500px) minmax(0, 1fr) !important;
  gap: clamp(24px, 2.6vw, 40px) !important;
}

.page-sender-profile .compact-settings-card {
  padding: clamp(20px, 2vw, 28px) !important;
}

.page-sender-profile .section-save-row {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #edf1f7 !important;
}

.page-sender-profile .section-save-btn {
  min-height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(237, 0, 47, 0.22) !important;
  border-radius: 9px !important;
  background: #fff3f5 !important;
  color: var(--red) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}

.page-sender-profile .section-save-btn:hover {
  transform: translateY(-1px) !important;
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(237, 0, 47, 0.16) !important;
}

.page-sender-profile .sender-summary-card .sender-inline-details > input,
.page-sender-profile .sender-summary-card .sender-inline-details label input {
  min-height: 28px !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-sender-profile .sender-summary-card .sender-inline-details > input:first-child {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

.page-sender-profile .compact-photo-btn {
  min-width: 114px !important;
  white-space: nowrap !important;
}

.page-sender-profile .email-preview-card {
  align-self: start !important;
}

.page-sender-profile .preview-email.actual-email-preview {
  overflow: hidden !important;
  border-radius: 14px !important;
}

.page-sender-profile .preview-hero {
  height: clamp(210px, 18vw, 280px) !important;
}

.page-sender-profile .preview-content {
  padding: clamp(22px, 2.6vw, 36px) clamp(24px, 4vw, 60px) 20px !important;
}

.page-sender-profile .preview-content h3 {
  max-width: 900px !important;
  margin-bottom: 12px !important;
  font-size: clamp(28px, 2.4vw, 38px) !important;
  line-height: 1.08 !important;
}

.page-sender-profile .preview-content p {
  max-width: 680px !important;
  margin-bottom: 18px !important;
  font-size: 14px !important;
}

.page-sender-profile .preview-content button {
  min-height: 48px !important;
  margin-bottom: 22px !important;
  padding-inline: 34px !important;
  font-size: 15px !important;
}

.page-sender-profile .preview-details {
  max-width: 720px !important;
  margin-bottom: 18px !important;
}

.page-sender-profile .preview-details div {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 58px !important;
  padding: 11px 22px !important;
}

.page-sender-profile .preview-details div::before {
  content: none !important;
  display: none !important;
}

.page-sender-profile .preview-details b,
.page-sender-profile .preview-details span {
  grid-column: 1 !important;
}

.page-sender-profile .preview-signature-block {
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 18px !important;
  max-width: 720px !important;
  margin-bottom: 20px !important;
  padding: 20px 24px !important;
  background: #fff !important;
}

.page-sender-profile .preview-signature-block > div:last-child {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-sender-profile .preview-signature-block .preview-avatar {
  width: 88px !important;
  height: 88px !important;
}

.page-sender-profile .preview-signature-block strong {
  font-size: 18px !important;
}

.page-sender-profile .actual-email-preview .preview-footer {
  padding: 16px 22px !important;
}

@media (min-width: 1540px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(440px, 520px) minmax(720px, 1fr) !important;
  }
}

@media (max-width: 1320px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(350px, 440px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .page-sender-profile .section-save-row {
    justify-content: stretch !important;
  }

  .page-sender-profile .section-save-btn {
    width: 100% !important;
  }

  .page-sender-profile .preview-content h3 {
    font-size: clamp(25px, 8vw, 34px) !important;
  }

  .page-sender-profile .preview-details {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .preview-signature-block {
    gap: 12px !important;
    padding: 18px !important;
  }
}

/* v53 email settings: visible test email controls and a more polished studio layout. */
.page-sender-profile .email-settings-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  align-items: end !important;
  margin-bottom: 26px !important;
  padding: 4px 0 22px !important;
  border-bottom: 1px solid rgba(211, 219, 232, 0.72) !important;
  background: transparent !important;
}

.page-sender-profile .email-settings-header h1 {
  margin-bottom: 6px !important;
  font-size: clamp(34px, 3vw, 52px) !important;
  letter-spacing: -0.045em !important;
}

.page-sender-profile .email-settings-header .page-subtitle {
  max-width: 700px !important;
  color: #596682 !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.45 !important;
}

.page-sender-profile .email-settings-actions {
  display: grid !important;
  grid-template-columns: minmax(250px, 320px) auto auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 10px !important;
  border: 1px solid rgba(211, 219, 232, 0.78) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 45px rgba(7, 20, 48, 0.06) !important;
  backdrop-filter: blur(14px) !important;
}

.page-sender-profile .test-email-field {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.page-sender-profile .test-email-field span {
  color: #69748f !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.page-sender-profile .test-email-field input {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 13px !important;
  border: 1px solid #d7deea !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  outline: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.page-sender-profile .test-email-field input:focus {
  border-color: rgba(237, 0, 47, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(237, 0, 47, 0.08) !important;
}

.page-sender-profile .email-settings-actions .primary-btn,
.page-sender-profile .email-settings-actions .secondary-top-btn {
  min-width: 132px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.page-sender-profile .email-settings-actions .secondary-top-btn {
  border-color: #d7deea !important;
  background: #fff !important;
}

.page-sender-profile .sender-fields {
  display: grid !important;
  gap: 18px !important;
}

.page-sender-profile .compact-settings-card {
  border-color: rgba(211, 219, 232, 0.88) !important;
  box-shadow: 0 18px 42px rgba(7, 20, 48, 0.055) !important;
}

.page-sender-profile .compact-settings-card .section-head h2 {
  font-size: clamp(19px, 1.4vw, 24px) !important;
  letter-spacing: -0.03em !important;
}

.page-sender-profile .field-card span {
  color: #17223c !important;
  font-size: 12px !important;
}

.page-sender-profile .field-card input,
.page-sender-profile .field-card textarea {
  border-radius: 9px !important;
  background: #fff !important;
  font-size: 13px !important;
}

.page-sender-profile .section-save-btn {
  background: #fff !important;
}

.page-sender-profile .email-preview-card {
  padding: 16px !important;
  border-color: rgba(211, 219, 232, 0.95) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 24px 58px rgba(7, 20, 48, 0.08) !important;
}

.page-sender-profile .preview-top {
  padding: 0 2px 12px !important;
}

.page-sender-profile .preview-top span {
  color: var(--red) !important;
  letter-spacing: 0.12em !important;
}

.page-sender-profile .preview-email.actual-email-preview {
  border: 1px solid #e4e9f2 !important;
  background: #fffaf2 !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark {
  top: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(180px, 19vw, 260px) !important;
}

.page-sender-profile .actual-email-preview .preview-costco-wordmark span {
  font-size: clamp(42px, 4.8vw, 64px) !important;
}

.page-sender-profile .preview-hero::after {
  opacity: 0.34 !important;
}

.page-sender-profile .preview-content h3 {
  color: #071430 !important;
}

@media (max-width: 1480px) {
  .page-sender-profile .email-settings-header {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .page-sender-profile .email-settings-actions {
    width: min(100%, 720px) !important;
  }
}

@media (max-width: 900px) {
  .page-sender-profile .email-settings-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .page-sender-profile .test-email-field {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 560px) {
  .page-sender-profile .email-settings-header h1 {
    font-size: clamp(31px, 12vw, 44px) !important;
  }

  .page-sender-profile .email-settings-actions {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .sender-identity-row {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .sender-inline-details {
    width: 100% !important;
  }
}

/* v54 email settings: visible test card and fixed live-preview signature composition. */
.page-sender-profile .app-main {
  max-width: none !important;
}

.page-sender-profile .sender-layout {
  width: min(100%, 1560px) !important;
  max-width: none !important;
  grid-template-columns: minmax(390px, 500px) minmax(760px, 1fr) !important;
  gap: clamp(24px, 2.8vw, 44px) !important;
}

.page-sender-profile .test-email-card {
  background: linear-gradient(180deg, #fff, #fbfcff) !important;
}

.page-sender-profile .test-email-card-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

.page-sender-profile .section-test-btn {
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--red) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 28px rgba(237, 0, 47, 0.14) !important;
  white-space: nowrap !important;
}

.page-sender-profile .section-test-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(237, 0, 47, 0.18) !important;
}

.page-sender-profile .email-preview-card {
  align-self: start !important;
  width: 100% !important;
  padding: 14px !important;
}

.page-sender-profile .preview-email.actual-email-preview {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

.page-sender-profile .preview-hero {
  min-height: clamp(210px, 17vw, 300px) !important;
}

.page-sender-profile .preview-content {
  padding: clamp(24px, 2.7vw, 38px) clamp(24px, 5vw, 68px) 24px !important;
}

.page-sender-profile .preview-content h3 {
  max-width: 760px !important;
  margin-inline: auto !important;
  font-size: clamp(30px, 2.25vw, 40px) !important;
  line-height: 1.04 !important;
}

.page-sender-profile .preview-content p {
  max-width: 650px !important;
  margin-inline: auto !important;
}

.page-sender-profile .preview-details {
  width: min(100%, 720px) !important;
  margin: 24px auto 0 !important;
}

.page-sender-profile .preview-signature-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  min-height: 0 !important;
  margin: 0 auto 22px !important;
  padding: 20px 24px !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(7, 20, 48, 0.045) !important;
  text-align: left !important;
  position: relative !important;
  transform: none !important;
}

.page-sender-profile .preview-signature-block .preview-avatar {
  position: relative !important;
  flex: 0 0 86px !important;
  width: 86px !important;
  height: 86px !important;
  margin: 0 !important;
  transform: none !important;
  inset: auto !important;
}

.page-sender-profile .preview-signature-block > div:last-child {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  justify-items: start !important;
  align-content: center !important;
  position: static !important;
  transform: none !important;
}

.page-sender-profile .preview-signature-block strong,
.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b,
.page-sender-profile .preview-signature-block small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: static !important;
  transform: none !important;
}

.page-sender-profile .preview-signature-block strong {
  color: var(--ink) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

.page-sender-profile .preview-signature-block span,
.page-sender-profile .preview-signature-block b,
.page-sender-profile .preview-signature-block small {
  color: #53607c !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

.page-sender-profile .preview-signature-block b {
  color: #34415f !important;
}

.page-sender-profile .preview-signature-block small {
  color: var(--ink) !important;
}

.page-sender-profile .preview-signature-block em {
  display: none !important;
}

@media (min-width: 1720px) {
  .page-sender-profile .sender-layout {
    width: min(100%, 1660px) !important;
    grid-template-columns: minmax(430px, 540px) minmax(850px, 1fr) !important;
  }
}

@media (max-width: 1320px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(360px, 470px) minmax(640px, 1fr) !important;
  }
}

@media (max-width: 1160px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .email-preview-card {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .page-sender-profile .test-email-card-row {
    grid-template-columns: 1fr !important;
  }

  .page-sender-profile .section-test-btn {
    width: 100% !important;
  }

  .page-sender-profile .preview-signature-block {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .page-sender-profile .preview-signature-block > div:last-child {
    justify-items: center !important;
    text-align: center !important;
  }

  .page-sender-profile .preview-signature-block strong,
  .page-sender-profile .preview-signature-block span,
  .page-sender-profile .preview-signature-block b,
  .page-sender-profile .preview-signature-block small {
    text-align: center !important;
  }
}

/* v55 global full-width audit: keep every rebuilt app page using the full available canvas. */
:root {
  --platform-sidebar-width: var(--sidebar-width, 260px);
}

body:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign
) {
  overflow-x: hidden !important;
}

body:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign
) .app-main {
  width: calc(100vw - var(--platform-sidebar-width)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: var(--platform-sidebar-width) !important;
  margin-right: 0 !important;
  padding-left: clamp(26px, 3.2vw, 58px) !important;
  padding-right: clamp(26px, 3.2vw, 58px) !important;
  box-sizing: border-box !important;
}

body:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign
) .app-main > :is(
  .page-header,
  .review-hero,
  .notice-stack,
  .status-alert,
  .placement-alert,
  .review-preflight-strip,
  .dashboard-card,
  .contract-form,
  .review-layout,
  .placement-layout,
  .template-summary,
  .template-card,
  .action-card,
  .settings-tabs,
  #templateUploadForm,
  #senderProfileForm,
  .detail-command-grid
) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.page-dashboard-redesign :is(
  .dashboard-main-tight,
  .dashboard-card,
  .contracts-head,
  .dashboard-toolbar,
  .table-wrap,
  .contracts-table
) {
  width: 100% !important;
  max-width: none !important;
}

.page-create-redesign :is(
  .contract-form,
  .step-card,
  .upload-grid,
  .field-grid,
  .action-card
) {
  width: 100% !important;
  max-width: none !important;
}

.page-review-redesign :is(
  .review-layout,
  .review-panel,
  .review-fields-panel,
  .review-form,
  .review-section,
  .review-field-grid,
  .review-action-bar
) {
  width: 100% !important;
  max-width: none !important;
}

.page-quote-placement-redesign :is(
  .placement-layout,
  .controls-card,
  .preview-card,
  .quote-stage,
  .quote-canvas-wrap
) {
  width: 100% !important;
  max-width: none !important;
}

.page-template-redesign :is(
  .template-summary,
  .summary-card,
  #templateUploadForm,
  .template-card,
  .template-form-grid,
  .backups-card
) {
  width: 100% !important;
  max-width: none !important;
}

.page-sender-profile :is(
  #senderProfileForm,
  .email-settings-header,
  .sender-layout,
  .sender-fields,
  .email-preview-card
) {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.page-sender-profile .sender-layout {
  grid-template-columns: minmax(360px, 0.82fr) minmax(640px, 1.18fr) !important;
}

.page-contract-detail-redesign :is(
  .detail-command-grid,
  .detail-action-card,
  .preflight-card,
  .detail-fields,
  .activity-list
) {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 1600px) {
  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign
  ) .app-main {
    padding-left: clamp(48px, 4vw, 76px) !important;
    padding-right: clamp(48px, 4vw, 76px) !important;
  }
}

@media (max-width: 1320px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) and (min-width: 921px) {
  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign
  ) .app-main {
    padding-left: clamp(22px, 2.6vw, 34px) !important;
    padding-right: clamp(22px, 2.6vw, 34px) !important;
  }
}

@media (max-width: 920px) {
  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign
  ) .app-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: clamp(14px, 4.2vw, 24px) !important;
    padding-right: clamp(14px, 4.2vw, 24px) !important;
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-dashboard-redesign .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page-dashboard-redesign .contracts-table {
    min-width: 760px !important;
  }

  .page-quote-placement-redesign .placement-layout,
  .page-create-redesign .upload-grid,
  .page-create-redesign .field-grid,
  .page-review-redesign .review-field-grid,
  .page-template-redesign .template-form-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign
  ) .app-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* v58 workflow quality-of-life polish */
.dashboard-action-toast {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(18px, 3vw, 32px);
  z-index: 3000;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 18px;
  border: 1px solid rgba(19, 186, 115, 0.24);
  border-radius: 16px;
  background: #f0fff8;
  box-shadow: 0 18px 46px rgba(7, 20, 48, 0.14);
  color: #047857;
  font-size: 14px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-action-toast[data-tone="error"] {
  border-color: rgba(237, 0, 47, 0.22);
  background: #fff2f4;
  color: #c90026;
}

.dashboard-action-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.page-dashboard-redesign .dashboard-action-form button:disabled,
.page-dashboard-redesign .row-action:disabled,
.page-create-redesign .generate-btn:disabled {
  cursor: wait !important;
  opacity: 0.7 !important;
}

.page-dashboard-redesign .pill[title] {
  cursor: help;
}

.customer-sign-page .submit-signature-btn[disabled] {
  pointer-events: none;
}

@media (max-width: 760px) {
  .dashboard-action-toast {
    right: 14px;
    bottom: 104px;
  }
}

.page-dashboard-redesign .workflow-assist-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 14px 0 20px;
  border-bottom: 1px solid rgba(209, 216, 230, 0.78);
}

.page-dashboard-redesign .workflow-assist-intro {
  flex: 0 0 190px;
  display: grid;
  gap: 3px;
}

.page-dashboard-redesign .workflow-assist-intro strong {
  color: #071430;
  font-size: 14px;
  font-weight: 950;
}

.page-dashboard-redesign .workflow-assist-intro span {
  color: #66708a;
  font-size: 12px;
  font-weight: 800;
}

.page-dashboard-redesign .workflow-assist-items {
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}

.page-dashboard-redesign .workflow-assist-chip {
  flex: 0 0 auto;
  min-width: 172px;
  max-width: 252px;
  padding: 10px 12px;
  border: 1px solid #d9e0ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(7, 20, 48, 0.04);
  color: #071430;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.page-dashboard-redesign .workflow-assist-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(7, 20, 48, 0.08);
}

.page-dashboard-redesign .workflow-assist-chip strong {
  display: block;
  overflow: hidden;
  color: #071430;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .workflow-assist-chip span {
  display: block;
  margin-top: 2px;
  color: #ed002f;
  font-size: 12px;
  font-weight: 900;
}

.page-dashboard-redesign .workflow-assist-chip.tone-danger {
  border-color: rgba(237, 0, 47, 0.25);
  background: #fff7f8;
}

.page-dashboard-redesign .workflow-assist-chip.tone-warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fffaf0;
}

.page-dashboard-redesign .workflow-assist-chip.tone-success span {
  color: #008a55;
}

.delivery-health {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.delivery-health span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid #dbe3f0;
  border-radius: 999px;
  background: #fff;
  color: #7b8499;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.delivery-health span.is-done {
  border-color: rgba(19, 186, 115, 0.25);
  background: #effdf6;
  color: #008a55;
}

.detail-delivery-health {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .page-dashboard-redesign .workflow-assist-strip {
    display: block;
  }

  .page-dashboard-redesign .workflow-assist-items {
    margin-top: 10px;
  }
}

/* v60 automation and signing replay polish */
.signing-replay-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.signing-replay-item {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dfe6f2;
  border-radius: 14px;
  background: #fff;
  color: #071430;
}

.signing-replay-item span {
  color: #66708a;
  font-size: 12px;
  font-weight: 900;
}

.signing-replay-item strong {
  color: #071430;
  font-size: 13px;
  font-weight: 950;
}

.signing-replay-item p {
  margin: 3px 0 0;
  color: #5b6685;
  font-size: 13px;
  font-weight: 800;
}

/* v61 contract detail cleanup */
.page-contract-detail-redesign .dashboard-card {
  min-height: 0 !important;
}

.page-contract-detail-redesign .page-header {
  margin-bottom: 22px !important;
}

.detail-overview-card {
  display: grid;
  gap: 20px;
  padding: clamp(24px, 2.3vw, 34px) !important;
}

.detail-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.detail-status-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.detail-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8a94ad;
  box-shadow: 0 0 0 6px rgba(138, 148, 173, .12);
}

.detail-status-dot.status-signed {
  background: #09a65a;
  box-shadow: 0 0 0 6px rgba(9, 166, 90, .1);
}

.detail-status-dot.status-pending {
  background: #f59e0b;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, .12);
}

.detail-status-dot.status-error {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(237, 23, 55, .11);
}

.detail-overview-head h2 {
  margin: 10px 0 6px;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 48px);
  line-height: .98;
  font-weight: 950;
}

.detail-overview-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 850;
}

.detail-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(100%, 360px);
}

.detail-primary-actions .row-action {
  min-width: 170px;
}

.detail-smart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.detail-smart-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfcff);
}

.detail-smart-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .025em;
}

.detail-smart-card strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.detail-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-secondary-actions form {
  margin: 0;
}

.detail-secondary-actions .row-action {
  min-height: 42px;
  padding: 0 18px;
}

.detail-readiness-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 2px;
}

.detail-readiness-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.detail-readiness-strip b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #09a65a;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.detail-readiness-strip .needs-work {
  border-color: rgba(237, 23, 55, .2);
  background: #fff5f7;
}

.detail-readiness-strip .needs-work b {
  background: var(--red);
}

.detail-two-column {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 20px;
  margin: 20px 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.detail-compact-card {
  padding: clamp(22px, 2vw, 30px) !important;
}

.page-contract-detail-redesign .detail-compact-card .contracts-head {
  padding-bottom: 16px;
}

.page-contract-detail-redesign .detail-compact-card .contracts-head h2 {
  font-size: clamp(24px, 1.8vw, 32px);
}

.page-contract-detail-redesign .detail-fields {
  margin-top: 14px;
}

.page-contract-detail-redesign .detail-fields div,
.page-contract-detail-redesign .note-card {
  padding: 12px 13px;
  border-radius: 13px;
  background: #fbfcff;
}

.page-contract-detail-redesign .note-form .platform-textarea {
  min-height: 92px;
  resize: vertical;
}

.compact-primary-btn {
  min-height: 48px !important;
}

.compact-notes-list {
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.compact-danger-zone {
  margin-top: 14px;
  padding-top: 14px;
}

.compact-danger-zone .delete-action {
  max-width: 220px;
}

.detail-activity-list {
  gap: 0;
  margin-top: 12px;
}

.detail-activity-list .activity-item {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
}

.detail-activity-list .activity-item strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.detail-activity-list .activity-item p,
.detail-activity-list .activity-item small {
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .detail-smart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .detail-overview-head {
    display: grid;
  }

  .detail-primary-actions {
    justify-content: stretch;
    min-width: 0;
  }

  .detail-primary-actions .row-action,
  .detail-secondary-actions .row-action,
  .detail-secondary-actions form {
    width: 100%;
  }

  .detail-smart-grid {
    grid-template-columns: 1fr;
  }

  .detail-readiness-strip {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* v63: responsive button sizing normalization */
:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign,
  .page-contract-detail-redesign
) :is(
  .primary-btn,
  .secondary-btn,
  .secondary-top-btn,
  .generate-btn,
  .activate-btn,
  .save-send-btn,
  .section-save-btn,
  .section-test-btn,
  .compact-primary-btn,
  .row-action,
  .placement-mode-btn,
  .reset-btn,
  .delete-action
) {
  width: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign,
  .page-contract-detail-redesign
) :is(.primary-btn, .generate-btn, .activate-btn, .save-send-btn, .compact-primary-btn) {
  min-width: min(100%, 220px) !important;
  max-width: min(100%, 360px) !important;
  padding-inline: clamp(20px, 2.4vw, 34px) !important;
}

:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign,
  .page-contract-detail-redesign
) :is(.secondary-btn, .secondary-top-btn, .section-save-btn, .section-test-btn, .reset-btn, .delete-action) {
  min-width: min(100%, 142px) !important;
  max-width: min(100%, 260px) !important;
  padding-inline: clamp(14px, 1.8vw, 24px) !important;
}

.page-dashboard-redesign .contracts-table :is(.row-action, a.row-action, button.row-action) {
  width: min(100%, 218px) !important;
  max-width: 218px !important;
  justify-self: center !important;
}

.page-dashboard-redesign .contracts-table :is(td, th):last-child {
  width: 236px !important;
}

.page-dashboard-redesign .table-actions,
.page-dashboard-redesign .action-stack,
.page-dashboard-redesign .row-actions {
  align-items: center !important;
}

.page-create-redesign .action-card,
.page-review-redesign .review-action-bar,
.page-template-redesign .template-action-bar,
.page-template-redesign .upload-action-bar,
.page-contract-detail-redesign .detail-overview-head {
  align-items: center !important;
}

.page-create-redesign .action-card {
  grid-template-columns: auto minmax(220px, 1fr) !important;
}

.page-create-redesign .generate-btn,
.page-review-redesign .primary-btn,
.page-quote-placement-redesign .save-send-btn,
.page-template-redesign .primary-btn {
  justify-self: start !important;
}

.page-sender-profile .email-settings-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

.page-sender-profile .email-settings-actions :is(.primary-btn, .secondary-top-btn, .section-test-btn) {
  width: auto !important;
  min-width: min(100%, 176px) !important;
  max-width: min(100%, 260px) !important;
}

.page-sender-profile .section-save-row {
  display: flex !important;
  justify-content: flex-end !important;
}

.page-sender-profile .section-save-btn {
  min-width: min(100%, 136px) !important;
  max-width: min(100%, 180px) !important;
}

.page-quote-placement-redesign .placement-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.page-quote-placement-redesign .placement-buttons :is(.placement-mode-btn, .reset-btn) {
  width: 100% !important;
  max-width: 100% !important;
}

.page-quote-placement-redesign .save-send-btn {
  width: min(100%, 320px) !important;
}

.page-contract-detail-redesign .detail-secondary-actions {
  align-items: center !important;
}

.page-contract-detail-redesign .detail-secondary-actions form {
  width: auto !important;
  max-width: min(100%, 260px) !important;
}

.page-contract-detail-redesign .note-form .compact-primary-btn {
  width: min(100%, 260px) !important;
}

@media (max-width: 900px) {
  .page-dashboard-redesign .contracts-table :is(.row-action, a.row-action, button.row-action) {
    width: min(100%, 190px) !important;
    max-width: 190px !important;
  }
}

@media (max-width: 760px) {
  :is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) :is(
    .primary-btn,
    .secondary-btn,
    .secondary-top-btn,
    .generate-btn,
    .activate-btn,
    .save-send-btn,
    .section-save-btn,
    .section-test-btn,
    .compact-primary-btn,
    .row-action,
    .placement-mode-btn,
    .reset-btn,
    .delete-action
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-dashboard-redesign .contracts-table :is(.row-action, a.row-action, button.row-action),
  .page-contract-detail-redesign .detail-secondary-actions form,
  .page-contract-detail-redesign .note-form .compact-primary-btn,
  .page-sender-profile .email-settings-actions :is(.primary-btn, .secondary-top-btn, .section-test-btn) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-create-redesign .action-card,
  .page-review-redesign .review-action-bar {
    grid-template-columns: 1fr !important;
  }
}

/* v80 public Buxton Sign offer page. */
.offer-page {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #f7f9fc;
  color: #071430;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.offer-page a {
  color: inherit;
  text-decoration: none;
}

.offer-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  min-height: 82px;
  padding: 14px clamp(22px, 5vw, 82px);
  border-bottom: 1px solid #dde5ef;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.offer-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.offer-brand img {
  display: block;
  width: clamp(180px, 16vw, 238px);
  height: auto;
}

.offer-nav nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
  color: #526078;
  font-size: 14px;
  font-weight: 800;
}

.offer-nav nav > a:not(.offer-nav-button):hover {
  color: #0868b8;
}

.offer-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 11px;
  background: #071430;
  color: #fff !important;
  transition: transform 150ms ease, background-color 150ms ease;
}

.offer-nav-button:hover {
  transform: translateY(-1px);
  background: #0868b8;
}

.offer-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  align-items: center;
  gap: clamp(52px, 7vw, 112px);
  width: min(1500px, calc(100% - 44px));
  min-height: min(820px, calc(100vh - 82px));
  margin: 0 auto;
  padding: clamp(74px, 9vw, 132px) clamp(10px, 2vw, 30px);
}

.offer-hero::before,
.offer-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  filter: blur(2px);
  pointer-events: none;
}

.offer-hero::before {
  top: 8%;
  right: -16%;
  width: 560px;
  height: 560px;
  background: rgba(0, 190, 236, 0.1);
}

.offer-hero::after {
  bottom: 5%;
  left: -24%;
  width: 520px;
  height: 520px;
  background: rgba(8, 104, 184, 0.08);
}

.offer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #0868b8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.offer-eyebrow::before {
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #00bce9;
  content: "";
}

.offer-eyebrow.light {
  color: #bceeff;
}

.offer-hero-copy h1 {
  max-width: 800px;
  margin: 0;
  color: #071430;
  font-size: clamp(50px, 5.9vw, 88px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.offer-hero-copy > p {
  max-width: 690px;
  margin: 28px 0 0;
  color: #526078;
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 600;
  line-height: 1.7;
}

.offer-hero-actions,
.offer-final-cta > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.offer-primary-button,
.offer-secondary-button,
.offer-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 56px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.offer-primary-button {
  background: #ed0033;
  color: #fff !important;
}

.offer-primary-button:hover,
.offer-light-button:hover {
  transform: translateY(-2px);
  background: #c9002a;
}

.offer-primary-button span,
.offer-light-button span {
  font-size: 25px;
  font-weight: 500;
  line-height: 0;
}

.offer-secondary-button {
  border: 1px solid #cad5e3;
  background: #fff;
  color: #071430 !important;
}

.offer-secondary-button:hover {
  transform: translateY(-2px);
  border-color: #0868b8;
  color: #0868b8 !important;
}

.offer-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 28px;
  color: #526078;
  font-size: 13px;
  font-weight: 750;
}

.offer-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.offer-trust-row b {
  color: #08a364;
}

.offer-hero-visual {
  position: relative;
  width: 100%;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid #d8e2ef;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7, 20, 48, 0.1);
}

.offer-hero-visual::before {
  position: absolute;
  z-index: -1;
  inset: 18px -18px -18px 18px;
  border-radius: 26px;
  background: #0868b8;
  content: "";
}

.offer-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e3e9f1;
}

.offer-preview-top span,
.offer-preview-customer small,
.offer-preview-summary small,
.offer-status-line small {
  color: #68758d;
  font-size: 12px;
  font-weight: 750;
}

.offer-preview-top strong {
  padding: 8px 12px;
  border-radius: 999px;
  background: #e8f8f1;
  color: #07834f;
  font-size: 12px;
  font-weight: 900;
}

.offer-preview-customer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
}

.offer-preview-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e7f3ff;
  color: #0868b8;
  font-size: 13px;
  font-weight: 900;
}

.offer-preview-customer div,
.offer-preview-files p,
.offer-status-line p {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.offer-preview-customer strong {
  font-size: 16px;
  font-weight: 900;
}

.offer-preview-status {
  color: #07834f;
  font-size: 12px;
  font-weight: 900;
}

.offer-preview-files {
  display: grid;
  gap: 11px;
}

.offer-preview-files > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fafdff;
}

.offer-file-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 48px;
  border-radius: 8px;
  background: #fff0f3;
  color: #ed0033;
  font-size: 10px;
  font-weight: 950;
}

.offer-preview-files strong {
  color: #17233b;
  font-size: 14px;
  font-weight: 900;
}

.offer-preview-files small {
  color: #68758d;
  font-size: 11px;
  font-weight: 650;
}

.offer-preview-files > div > b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #dff7eb;
  color: #07834f;
}

.offer-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.offer-preview-summary > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 12px;
  background: #f3f6fa;
}

.offer-preview-summary strong {
  font-size: 15px;
  font-weight: 900;
}

.offer-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1400px, calc(100% - 44px));
  margin: 0 auto;
  border: 1px solid #dce4ee;
  border-radius: 20px;
  background: #fff;
}

.offer-proof > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 104px;
  padding: 20px;
  border-right: 1px solid #e2e8f0;
}

.offer-proof > div:last-child {
  border-right: 0;
}

.offer-proof strong {
  color: #0868b8;
  font-size: 30px;
  font-weight: 900;
}

.offer-proof span {
  color: #526078;
  font-size: 14px;
  font-weight: 800;
}

.offer-section {
  width: min(1400px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(96px, 10vw, 150px) 0;
}

.offer-section-heading {
  max-width: 780px;
  margin-bottom: 48px;
}

.offer-section-heading h2,
.offer-control-visual h2,
.offer-pricing-copy h2,
.offer-final-cta h2 {
  margin: 0;
  color: #071430;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.offer-section-heading > p,
.offer-control-visual > p,
.offer-pricing-copy > p {
  margin: 20px 0 0;
  color: #5c6980;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 600;
  line-height: 1.65;
}

.offer-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.offer-process-grid article {
  position: relative;
  min-height: 310px;
  padding: 32px;
  border: 1px solid #dbe4ef;
  border-radius: 20px;
  background: #fff;
  transition: transform 180ms ease, border-color 180ms ease;
}

.offer-process-grid article:hover,
.offer-feature-grid article:hover {
  transform: translateY(-5px);
  border-color: #a9c9e5;
}

.offer-step-number {
  position: absolute;
  top: 28px;
  right: 30px;
  color: #a6b2c3;
  font-size: 13px;
  font-weight: 900;
}

.offer-step-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 34px;
  border-radius: 16px;
  font-size: 26px;
  font-weight: 900;
}

.offer-step-icon.blue { background: #e7f3ff; color: #0868b8; }
.offer-step-icon.green { background: #e4f9ef; color: #07965a; }
.offer-step-icon.red { background: #fff0f3; color: #ed0033; }

.offer-process-grid h3,
.offer-feature-grid h3 {
  margin: 0;
  color: #0b1831;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.offer-process-grid p,
.offer-feature-grid p {
  margin: 13px 0 0;
  color: #617087;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.offer-feature-section {
  width: 100%;
  max-width: none;
  padding-inline: max(22px, calc((100% - 1400px) / 2));
  background: #fff;
}

.offer-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.offer-feature-grid article {
  min-height: 260px;
  padding: 27px;
  border: 1px solid #e0e7f0;
  border-radius: 17px;
  background: #f9fbfd;
  transition: transform 180ms ease, border-color 180ms ease;
}

.offer-feature-grid article > span {
  display: inline-flex;
  margin-bottom: 40px;
  color: #0868b8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.offer-control-section {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
  width: min(1400px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(96px, 10vw, 150px) 0;
}

.offer-control-list {
  display: grid;
  gap: 20px;
  margin-top: 38px;
}

.offer-control-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
}

.offer-control-list > div > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #dff7eb;
  color: #07834f;
}

.offer-control-list span {
  display: grid;
  gap: 6px;
}

.offer-control-list strong {
  color: #142039;
  font-size: 16px;
  font-weight: 900;
}

.offer-control-list small {
  color: #647188;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.offer-control-card {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: #071430;
  color: #fff;
}

.offer-control-card > span {
  color: #8fcdf8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-control-card > strong {
  display: block;
  margin: 10px 0 30px;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.offer-status-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.offer-status-line i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.offer-status-line i.sent { background: #27b9f2; }
.offer-status-line i.viewed { background: #36d08a; }
.offer-status-line i.signed { background: #ff3158; }

.offer-status-line b {
  font-size: 15px;
  font-style: normal;
}

.offer-status-line small {
  color: #9eaac0;
}

.offer-status-line time {
  color: #c9d2e1;
  font-size: 12px;
  font-weight: 800;
}

.offer-pricing-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  align-items: center;
  gap: clamp(46px, 8vw, 110px);
  width: min(1400px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 82px);
  border-radius: 30px;
  background: #0868b8;
  color: #fff;
}

.offer-pricing-copy h2,
.offer-pricing-copy > p {
  color: #fff;
}

.offer-pricing-copy > p {
  max-width: 650px;
  color: #d9edff;
}

.offer-light-button {
  margin-top: 32px;
  background: #fff;
  color: #075a9e !important;
}

.offer-light-button:hover {
  background: #eaf6ff;
}

.offer-plan-card {
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  background: #fff;
  color: #071430;
}

.offer-plan-card > span {
  color: #ed0033;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-plan-card h3 {
  margin: 13px 0 0;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.offer-plan-card > p {
  margin: 12px 0 0;
  color: #627087;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.offer-plan-card ul {
  display: grid;
  gap: 13px;
  margin: 26px 0;
  padding: 24px 0;
  border-top: 1px solid #e0e7ef;
  border-bottom: 1px solid #e0e7ef;
  list-style: none;
}

.offer-plan-card li {
  position: relative;
  padding-left: 26px;
  color: #26334c;
  font-size: 14px;
  font-weight: 750;
}

.offer-plan-card li::before {
  position: absolute;
  left: 0;
  color: #08a364;
  font-weight: 900;
  content: "✓";
}

.offer-plan-card > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 18px;
  border-radius: 11px;
  background: #ed0033;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.offer-plan-card > a:hover {
  background: #c9002a;
}

.offer-final-cta {
  display: grid;
  justify-items: center;
  width: min(1100px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(110px, 12vw, 170px) 0;
  text-align: center;
}

.offer-final-cta h2 {
  max-width: 920px;
}

.offer-final-cta > div {
  justify-content: center;
}

.offer-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  min-height: 130px;
  padding: 26px clamp(22px, 5vw, 82px);
  border-top: 1px solid #dce4ee;
  background: #fff;
}

.offer-footer .offer-brand img {
  width: 190px;
}

.offer-footer p {
  margin: 0;
  color: #68758b;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.offer-footer > div {
  display: flex;
  gap: 22px;
  color: #3d4b63;
  font-size: 13px;
  font-weight: 850;
}

.auth-offer-link {
  display: block;
  margin-top: 4px;
  color: #0868b8;
  text-align: center;
  font-size: 13px;
  font-weight: 850;
}

.auth-offer-link:hover {
  color: #004f91;
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .offer-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .offer-hero-copy {
    max-width: 850px;
  }

  .offer-hero-visual {
    max-width: 760px;
  }

  .offer-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer-control-section,
  .offer-pricing-section {
    grid-template-columns: 1fr;
  }

  .offer-control-card,
  .offer-plan-card {
    max-width: 700px;
  }
}

@media (max-width: 760px) {
  .offer-nav {
    min-height: 70px;
    padding: 12px 18px;
  }

  .offer-brand img {
    width: 165px;
  }

  .offer-nav nav > a:not(.offer-nav-button) {
    display: none;
  }

  .offer-nav-button {
    min-height: 42px;
    padding: 9px 16px;
  }

  .offer-hero,
  .offer-section,
  .offer-control-section,
  .offer-pricing-section,
  .offer-proof,
  .offer-final-cta {
    width: min(100% - 28px, 1400px);
  }

  .offer-hero {
    gap: 52px;
    padding: 68px 0 78px;
  }

  .offer-hero-copy h1 {
    font-size: clamp(44px, 13vw, 66px);
  }

  .offer-hero-copy > p {
    font-size: 16px;
  }

  .offer-hero-visual::before {
    display: none;
  }

  .offer-proof {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer-proof > div:nth-child(2) {
    border-right: 0;
  }

  .offer-proof > div:nth-child(-n+2) {
    border-bottom: 1px solid #e2e8f0;
  }

  .offer-process-grid,
  .offer-feature-grid {
    grid-template-columns: 1fr;
  }

  .offer-process-grid article,
  .offer-feature-grid article {
    min-height: 0;
  }

  .offer-feature-grid article > span {
    margin-bottom: 28px;
  }

  .offer-pricing-section {
    padding: 36px 22px;
    border-radius: 22px;
  }

  .offer-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-block: 38px;
  }
}

@media (max-width: 520px) {
  .offer-hero-actions,
  .offer-final-cta > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .offer-primary-button,
  .offer-secondary-button,
  .offer-light-button {
    width: 100%;
  }

  .offer-trust-row {
    display: grid;
  }

  .offer-hero-visual {
    padding: 18px;
    border-radius: 18px;
  }

  .offer-preview-top,
  .offer-preview-customer {
    align-items: flex-start;
  }

  .offer-preview-customer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .offer-preview-status {
    grid-column: 2;
  }

  .offer-preview-summary {
    grid-template-columns: 1fr;
  }

  .offer-proof {
    grid-template-columns: 1fr;
  }

  .offer-proof > div {
    justify-content: flex-start;
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .offer-proof > div:last-child {
    border-bottom: 0;
  }

  .offer-section-heading h2,
  .offer-control-visual h2,
  .offer-pricing-copy h2,
  .offer-final-cta h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .offer-process-grid article,
  .offer-feature-grid article {
    padding: 24px;
  }

  .offer-status-line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .offer-status-line time {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-page *,
  .offer-page *::before,
  .offer-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Live contract notifications: lightweight, calm, and available on every signed-in page. */
.live-notification-stack {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 1600;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}

.live-notification-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(7, 20, 48, .14);
  color: #071430;
  pointer-events: auto;
  animation: live-notification-enter .24s cubic-bezier(.2, .8, .2, 1) both;
}

.live-notification-toast.is-leaving {
  animation: live-notification-leave .18s ease both;
}

.live-notification-link {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 8px 14px 14px;
  color: inherit;
  text-decoration: none;
}

.live-notification-link:hover .live-notification-copy strong {
  color: #075fca;
}

.live-notification-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: #eaf8f1;
  color: #07965f;
}

.live-notification-toast.is-issue .live-notification-icon {
  background: #fff0f3;
  color: #ed1745;
}

.live-notification-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.live-notification-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.live-notification-copy strong {
  overflow: hidden;
  color: #071430;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .16s ease;
}

.live-notification-copy small {
  overflow: hidden;
  color: #60708d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-notification-close {
  display: grid;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6c7890;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.live-notification-close:hover,
.live-notification-close:focus-visible {
  background: #f1f4f8;
  color: #071430;
  outline: none;
}

.live-notification-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.notification-card.is-new {
  animation: live-notification-card-enter .22s ease both;
}

@keyframes live-notification-enter {
  from { opacity: 0; transform: translate3d(18px, -6px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes live-notification-leave {
  to { opacity: 0; transform: translate3d(18px, 0, 0) scale(.98); }
}

@keyframes live-notification-card-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .live-notification-stack {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
  }

  .live-notification-toast {
    border-radius: 14px;
  }

  .live-notification-link {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px 6px 12px 12px;
  }

  .live-notification-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-notification-toast,
  .live-notification-toast.is-leaving,
  .notification-card.is-new {
    animation: none !important;
  }
}

/* v87 one compact, authoritative contract processing surface. */
.contract-loading-overlay {
  place-items: center !important;
  padding: clamp(16px, 4vw, 48px) !important;
  background: rgba(244, 247, 251, .96) !important;
}

.contract-loading-card {
  display: block !important;
  width: min(100%, 720px) !important;
  min-height: 0 !important;
  max-height: min(92dvh, 720px) !important;
  padding: clamp(24px, 5vw, 42px) clamp(22px, 6vw, 54px) !important;
  overflow: auto !important;
  border: 1px solid #dce3ec !important;
  border-top: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(7, 20, 48, .11) !important;
}

.contract-loading-brand {
  justify-content: center !important;
  min-height: 0 !important;
  margin-bottom: clamp(22px, 4vw, 34px) !important;
}

.contract-loading-brand img {
  width: clamp(142px, 24vw, 184px) !important;
}

.contract-loading-content {
  justify-content: flex-start !important;
  padding: 0 !important;
}

.contract-loading-kicker {
  margin-bottom: 9px !important;
  color: #607089 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
}

.contract-loading-card h2 {
  max-width: 610px !important;
  font-size: clamp(30px, 6vw, 44px) !important;
  line-height: 1.08 !important;
}

.contract-loading-message {
  max-width: 520px !important;
  margin-top: 12px !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
}

.contract-loading-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 92px !important;
  height: 92px !important;
  margin: clamp(24px, 5vw, 34px) auto 24px !important;
}

.contract-loading-visual > svg {
  position: relative !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 34px !important;
  fill: none !important;
  stroke: #102343 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.7 !important;
}

.contract-loading-ring {
  position: absolute !important;
  inset: 0 !important;
  border: 5px solid #e5eaf0 !important;
  border-top-color: #12a66a !important;
  border-right-color: #12a66a !important;
  border-radius: 50% !important;
  animation: contract-loading-ring 1s linear infinite !important;
}

.contract-loading-status {
  gap: 10px !important;
}

.contract-loading-status > span {
  width: 9px !important;
  height: 9px !important;
  flex-basis: 9px !important;
  background: #12a66a !important;
  box-shadow: 0 0 0 5px #e5f7ef !important;
}

.contract-loading-status p {
  font-size: clamp(14px, 2vw, 16px) !important;
}

.contract-loading-progress {
  width: min(100%, 520px) !important;
  height: 9px !important;
  margin-top: 20px !important;
  background: #e9edf2 !important;
}

.contract-loading-progress span {
  width: 0 !important;
  background: linear-gradient(90deg, #102343, #12a66a) !important;
  animation: none !important;
  transition: width .42s ease !important;
}

.contract-loading-percent {
  margin: 8px 0 0 !important;
  color: #607089 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.contract-loading-footer {
  margin-top: clamp(22px, 4vw, 30px) !important;
  padding-top: 18px !important;
}

@keyframes contract-loading-ring {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .contract-loading-overlay {
    padding: 12px !important;
  }

  .contract-loading-card {
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 26px 22px 22px !important;
    border: 1px solid #dce3ec !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 38px rgba(7, 20, 48, .1) !important;
  }

  .contract-loading-brand {
    min-height: 0 !important;
    margin-bottom: 24px !important;
  }

  .contract-loading-content {
    padding: 0 !important;
  }

  .contract-loading-visual {
    width: 78px !important;
    height: 78px !important;
    margin: 24px auto 22px !important;
  }

  .contract-loading-footer {
    text-align: center !important;
  }
}

@media (max-height: 620px) {
  .contract-loading-brand { margin-bottom: 14px !important; }
  .contract-loading-visual { width: 64px !important; height: 64px !important; margin: 16px auto !important; }
  .contract-loading-visual > svg { width: 27px !important; height: 27px !important; }
  .contract-loading-footer { margin-top: 14px !important; padding-top: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .contract-loading-ring { animation: none !important; border-color: #12a66a !important; }
  .contract-loading-progress span { transition: none !important; }
}

/* Quote signature appearance controls live beside the authoritative template. */
.quote-signing-style {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.quote-signing-style .template-panel-heading.compact {
  align-items: flex-start;
  margin: 0;
}

.quote-signing-style label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  color: #17233b;
  font-size: 13px;
  font-weight: 800;
}

.quote-signing-style label b {
  color: #607089;
  font-size: 12px;
}

.quote-signing-style input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #12a66a;
}

.quote-signing-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(100px, 1fr);
  gap: 18px;
  padding: 20px 18px;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 14px;
  background: #fff;
}

.quote-signing-preview > div {
  display: flex;
  min-width: 0;
  min-height: 64px;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid #26354f;
}

.quote-signing-preview span {
  margin-bottom: auto;
  color: #607089;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-signing-preview strong {
  display: block;
  max-width: 100%;
  padding: 0 4px 2px;
  overflow: hidden;
  color: #071430;
  line-height: 1;
  white-space: nowrap;
}

.quote-signing-preview [data-quote-signature-preview] {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-weight: 500;
  transform-origin: center;
}

.quote-signing-note {
  margin: 0;
  color: #607089;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .quote-signing-preview { grid-template-columns: 1fr; }
}

/* v76 guided email builder. */
.page-sender-profile .sender-layout {
  align-items: start !important;
}

.page-sender-profile .contract-app {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.page-sender-profile .section-head p {
  margin: 5px 0 0;
  color: var(--ui-body, #526078);
  font-size: 14px;
  line-height: 1.5;
}

.email-preset-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.email-preset-card {
  display: flex;
  min-width: 0;
  min-height: 104px;
  padding: 15px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
  color: #071430;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease !important;
}

.email-preset-card strong { font-size: 14px; line-height: 1.3; }
.email-preset-card span { color: #667085; font-size: 12px; line-height: 1.45; }

.email-preset-card:hover,
.email-preset-card:focus-visible {
  border-color: #83b9e2;
  background: #f7fbff;
  transform: translateY(-1px);
}

.email-preset-card.is-selected {
  border-color: #0868b8;
  background: #edf7ff;
  box-shadow: inset 0 0 0 1px #0868b8;
}

.email-image-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.email-image-choice,
.email-image-upload-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 150px;
  padding: 8px;
  flex-direction: column;
  gap: 9px;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
  color: #071430;
  text-align: left;
  overflow: hidden;
}

button.email-image-choice { cursor: pointer; }

.email-image-choice img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
  background: #eef3f8;
}

.email-image-choice span {
  display: flex;
  min-width: 0;
  padding: 0 3px 3px;
  flex-direction: column;
  gap: 2px;
}

.email-image-choice strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-image-choice small,
.email-image-upload-card small { color: #667085; font-size: 11px; line-height: 1.4; }

.email-image-choice:hover,
.email-image-choice:focus-visible {
  border-color: #83b9e2;
  background: #f8fbff;
}

.email-image-choice.is-selected {
  border-color: #0868b8;
  box-shadow: inset 0 0 0 2px #0868b8;
}

.email-image-choice.is-selected::after {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0868b8;
  color: #fff;
  content: "✓";
  font-size: 13px;
  font-weight: 900;
}

.email-image-choice.is-new { border-style: dashed; }

.email-image-upload-card {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: #f8fbff;
  text-align: center;
  cursor: pointer;
}

.email-image-upload-card:hover {
  border-color: #0868b8;
  background: #edf7ff;
}

.email-image-upload-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.email-image-upload-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #e5f2ff;
  color: #0868b8;
  font-size: 25px;
  font-weight: 500;
}

.email-builder-save-card {
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #cfe0ee;
  border-radius: 16px;
  background: #f7fbff;
}

.email-builder-save-card > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.email-builder-save-card strong { color: #071430; font-size: 17px; }
.email-builder-save-card span { color: #5f6d82; font-size: 13px; line-height: 1.45; }
.email-builder-save-card .primary-btn { flex: 0 0 auto; }

.production-email-preview-card .preview-top > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.production-email-preview-card #previewStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.production-email-preview-card #previewStatus::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a9e63;
  content: "";
}

.production-email-preview-card #previewStatus[data-state="loading"] { color: #0868b8; }
.production-email-preview-card #previewStatus[data-state="loading"]::before { background: #0868b8; animation: email-preview-pulse 800ms ease infinite alternate; }
.production-email-preview-card #previewStatus[data-state="dirty"] { color: #9a5a00; }
.production-email-preview-card #previewStatus[data-state="dirty"]::before { background: #d97706; }
.production-email-preview-card #previewStatus[data-state="error"] { color: #c8002b; }
.production-email-preview-card #previewStatus[data-state="error"]::before { background: #c8002b; }

.preview-device-toggle {
  display: inline-grid;
  padding: 3px;
  grid-template-columns: repeat(2, auto);
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #f4f7fb;
}

.preview-device-toggle button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.preview-device-toggle button.is-active { background: #fff; color: #0868b8; box-shadow: 0 1px 3px rgba(7, 20, 48, .12); }

.email-preview-subject {
  display: flex;
  padding: 11px 14px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e0e7f0;
  background: #fff;
}

.email-preview-subject small { color: #667085; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.email-preview-subject strong { min-width: 0; overflow: hidden; color: #071430; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.email-preview-browser.is-mobile-preview {
  width: min(390px, 100%);
  margin-inline: auto;
}

@keyframes email-preview-pulse {
  from { opacity: .35; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

@media (min-width: 1321px) {
  .page-sender-profile .production-email-preview-card {
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px);
  }

  .page-sender-profile .production-email-preview-card .email-preview-browser iframe {
    min-height: 0 !important;
    height: calc(100vh - 190px);
  }
}

@media (max-width: 760px) {
  .email-preset-picker,
  .email-image-library-grid { grid-template-columns: 1fr; }

  .email-preset-card { min-height: 88px; }
  .email-image-choice,
  .email-image-upload-card { min-height: 132px; }

  .production-email-preview-card .preview-top,
  .email-builder-save-card { align-items: stretch; flex-direction: column; }

  .preview-device-toggle { width: 100%; grid-template-columns: repeat(2, 1fr); }
  .email-builder-save-card .primary-btn { width: 100%; }
  .page-sender-profile .email-preview-browser iframe { min-height: 580px; height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .production-email-preview-card #previewStatus[data-state="loading"]::before { animation: none; }
}

/* Shared interaction layer and support experience. */
.notification-trigger {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-trigger .notification-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: #ed0033;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.notification-trigger .notification-count[hidden] {
  display: none !important;
}

.notification-drawer-backdrop {
  position: fixed;
  z-index: 1190;
  inset: 0;
  background: rgba(7, 22, 48, .42);
  opacity: 0;
  transition: opacity var(--motion-standard) var(--motion-ease);
}

.notification-drawer-backdrop.is-open {
  opacity: 1;
}

.notification-drawer {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100dvh;
  border-left: 1px solid #dce4ef;
  background: #fff;
  box-shadow: -20px 0 50px rgba(18, 37, 63, .16);
  transform: translate3d(102%, 0, 0);
  visibility: hidden;
  transition: transform var(--motion-slow) var(--motion-ease), visibility 0s linear var(--motion-slow);
}

.notification-drawer.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition-delay: 0s;
}

.notification-drawer-open {
  overflow: hidden;
}

.notification-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-bottom: 1px solid #e2e8f1;
}

.notification-drawer-header .eyebrow {
  margin: 0 0 5px;
  color: #0967ef;
}

.notification-drawer-header h2 {
  margin: 0;
  color: #071630;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.1;
}

.notification-drawer-header p:last-child {
  margin: 8px 0 0;
  color: #596984;
  font-size: 15px;
  line-height: 1.5;
}

.notification-close {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #ed0033;
  color: #fff;
  cursor: pointer;
}

.notification-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.notification-close:hover {
  background: #ca002b;
  transform: translateY(-1px);
}

.notification-close:active {
  transform: scale(.96);
}

.notification-drawer-content {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  padding: 22px;
}

.notification-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
}

.notification-card > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px;
  color: #071630;
  text-decoration: none;
}

.notification-card > a:hover strong {
  color: #0967ef;
}

.notification-card-icon {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #e9f3ff;
  box-shadow: inset 0 0 0 1px #d8e9ff;
}

.notification-card strong,
.notification-card small,
.notification-card time {
  display: block;
}

.notification-card strong {
  overflow: hidden;
  color: #071630;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-card small {
  margin-top: 3px;
  color: #596984;
  font-size: 14px;
  line-height: 1.45;
}

.notification-card time {
  margin-top: 5px;
  color: #7b899e;
  font-size: 12px;
  font-weight: 700;
}

.notification-dismiss {
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #687791;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.notification-dismiss:hover {
  color: #ed0033;
}

.notification-empty {
  padding: 72px 20px;
  text-align: center;
}

.notification-empty > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e8faf2;
  color: #0da56a;
  font-size: 26px;
  font-weight: 900;
}

.notification-empty strong {
  color: #071630;
  font-size: 18px;
}

.notification-empty p {
  margin: 7px 0 0;
  color: #65748c;
  font-size: 14px;
}

.page-support-redesign {
  margin: 0;
  background: #f6f8fc;
  color: #071630;
}

.page-support-redesign .support-page-shell {
  min-height: 100vh;
}

.page-support-redesign .app-main {
  width: min(100%, 1720px);
}

.support-page-header {
  align-items: flex-end;
}

.support-search-card {
  padding: 24px;
  border: 1px solid #dce4ef;
  border-radius: 20px;
  background: #fff;
}

.support-search-card > label {
  display: block;
  margin-bottom: 9px;
  color: #17233b;
  font-size: 14px;
  font-weight: 800;
}

.support-search-wrap {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid #cfd9e8;
  border-radius: 14px;
  background: #fff;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

.support-search-wrap:focus-within {
  border-color: #0967ef;
  box-shadow: 0 0 0 4px rgba(9, 103, 239, .12);
}

.support-search-wrap svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #687791;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.support-search-wrap input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #071630;
  font: inherit;
  font-size: 16px;
}

.support-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.support-health > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  padding: 18px;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
}

.support-health-dot {
  grid-row: 1 / 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.support-health-dot.ready { background: #12b978; box-shadow: 0 0 0 5px #e4f9f0; }
.support-health-dot.attention { background: #f59e0b; box-shadow: 0 0 0 5px #fff4dc; }
.support-health strong { font-size: 14px; }
.support-health small { color: #65748c; font-size: 13px; }

.support-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.support-topic {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 26px;
  border: 1px solid #dce4ef;
  border-radius: 20px;
  background: #fff;
}

.support-topic[hidden] { display: none !important; }

.support-topic-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.support-topic-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.support-topic-icon.blue { background: #e9f3ff; color: #0967ef; }
.support-topic-icon.green { background: #e8faf2; color: #0da56a; }
.support-topic-icon.purple { background: #f0ecff; color: #7654e8; }
.support-topic-icon.orange { background: #fff2e3; color: #ed7415; }
.support-topic-icon.navy { background: #edf1f7; color: #142b52; }
.support-topic-icon.red { background: #fff0f3; color: #ed0033; }

.support-topic h2 {
  margin: 0;
  color: #071630;
  font-size: 20px;
  line-height: 1.25;
}

.support-topic p {
  margin: 7px 0 0;
  color: #596984;
  font-size: 15px;
  line-height: 1.55;
}

.support-topic > a {
  grid-column: 2;
  justify-self: start;
  color: #0967ef;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.support-topic > a span {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.support-topic > a:hover span {
  transform: translateX(4px);
}

.support-no-results {
  margin-top: 18px;
  padding: 58px 24px;
  border: 1px dashed #cbd6e6;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}

.support-no-results strong { font-size: 19px; }
.support-no-results p { margin: 7px 0 0; color: #65748c; }

.production-email-preview-card {
  align-self: start;
  overflow: hidden;
}

.production-email-preview-card .preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.production-email-preview-card .preview-top strong {
  color: #0d9b67;
  font-size: 12px;
}

.email-preview-browser {
  overflow: hidden;
  border: 1px solid #d7e0ed;
  border-radius: 16px;
  background: #f2f6fb;
}

.email-preview-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border-bottom: 1px solid #d7e0ed;
  background: #fff;
}

.email-preview-browser-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c8d2e1;
}

.email-preview-browser-bar i:first-child { background: #ed0033; }
.email-preview-browser-bar i:nth-child(2) { background: #f5a623; }
.email-preview-browser-bar i:nth-child(3) { background: #12b978; }

.email-preview-browser-bar span {
  margin-left: 7px;
  color: #65748c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.email-preview-browser iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
  background: #f2f6fb;
}

/* Static information does not move or imply clickability. */
:is(
  .performance-stat-card,
  .summary-card,
  .support-health > div,
  .support-topic,
  .settings-summary-card,
  .monday-stat,
  .dashboard-insight-card
):hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Interactive controls share a restrained hover and press response. */
:is(
  a.primary-btn,
  a.secondary-btn,
  button.primary-btn,
  button.secondary-btn,
  .monday-primary,
  .monday-secondary,
  .nav-link,
  .row-action,
  .support-topic > a
) {
  transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease) !important;
}

:is(a.primary-btn, button.primary-btn, .monday-primary):hover {
  transform: translateY(-1px);
}

:is(a.primary-btn, button.primary-btn, .monday-primary):active {
  transform: scale(.985);
}

.app-sidebar .nav-icon svg,
.mobile-nav svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .mobile-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .support-page-header {
    align-items: flex-start;
  }

  .support-page-header .primary-btn {
    width: 100%;
  }

  .support-topic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .notification-drawer {
    width: 100vw;
    border-left: 0;
  }

  .notification-drawer-header {
    padding: 22px 20px;
  }

  .notification-drawer-content {
    padding: 16px;
  }

  .notification-card {
    grid-template-columns: 1fr;
  }

  .notification-dismiss {
    justify-self: end;
  }

  .support-search-card {
    padding: 16px;
    border-radius: 16px;
  }

  .support-health {
    grid-template-columns: 1fr;
  }

  .support-topic {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px;
    border-radius: 17px;
  }

  .support-topic-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .support-topic > a {
    grid-column: 1 / -1;
  }
}

/* Automatic Create Contract v2: simplified, full-width, fluid layout. */
.page-create-automatic .automatic-create-main {
  width: calc(100vw - var(--platform-sidebar-width, 288px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: var(--platform-sidebar-width, 288px) !important;
  padding: clamp(22px, 2.4vw, 42px) clamp(18px, 3vw, 54px) 42px !important;
}

.page-create-automatic .automatic-create-header,
.page-create-automatic .automatic-step-card,
.page-create-automatic .automatic-action-card,
.page-create-automatic .automatic-success-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-create-automatic .automatic-contract-form {
  width: 100% !important;
  max-width: none !important;
}

.page-create-automatic .automatic-step-card {
  padding: clamp(20px, 2.3vw, 36px) !important;
}

.page-create-automatic .automatic-upload-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr) !important;
  gap: clamp(20px, 2.4vw, 36px) !important;
}

.page-create-automatic .automatic-drop-zone {
  min-height: clamp(230px, 24vw, 310px) !important;
  padding: clamp(24px, 4vw, 52px) !important;
  text-align: center !important;
}

.page-create-automatic .automatic-drop-zone h3 {
  margin: 0 0 28px !important;
  text-align: center !important;
}

.page-create-automatic .automatic-selected-panel {
  min-width: 0 !important;
}

.page-create-automatic .automatic-file-list {
  flex: 1 1 auto !important;
}

.page-create-automatic .automatic-empty-files {
  min-height: 180px !important;
  height: 100% !important;
}

.page-create-automatic .automatic-date-section {
  display: block !important;
}

.page-create-automatic .automatic-date-section .automatic-step-heading {
  margin-bottom: 24px !important;
}

.page-create-automatic .automatic-input-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.4vw, 32px) !important;
}

.page-create-automatic .automatic-field {
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.page-create-automatic .automatic-field > span {
  color: #071430 !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.page-create-automatic .automatic-field b {
  color: var(--red) !important;
}

.page-create-automatic .automatic-field em {
  margin-left: 6px !important;
  color: #7b879e !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.page-create-automatic .automatic-field input,
.page-create-automatic .automatic-field select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 16px !important;
  border: 1px solid #cbd4e2 !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #071430 !important;
  font: inherit !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

.page-create-automatic .automatic-field input:focus,
.page-create-automatic .automatic-field select:focus {
  border-color: #168bd2 !important;
  outline: 3px solid rgba(22, 139, 210, .12) !important;
}

.page-create-automatic .automatic-field small {
  color: #66728d !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.page-create-automatic .automatic-action-card {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 22px !important;
}

.page-create-automatic .automatic-generate-btn {
  width: min(100%, 320px) !important;
}

.page-review-redesign .review-delivery-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #a9d8ff;
  border-radius: 12px;
  background: #eef8ff;
  color: #344767;
  font-size: 13px;
  font-weight: 750;
}

.page-review-redesign .review-delivery-notice strong {
  color: #0670be;
}

.page-review-redesign .review-action-bar {
  grid-template-columns: minmax(220px, 320px) !important;
  justify-content: start !important;
}

@media (max-width: 1100px) {
  .page-create-automatic .automatic-upload-layout {
    grid-template-columns: 1fr !important;
  }

  .page-create-automatic .automatic-selected-panel {
    padding: 24px 0 0 !important;
    border-top: 1px solid #e1e6ef !important;
    border-left: 0 !important;
  }

  .page-create-automatic .automatic-file-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-create-automatic .automatic-empty-files {
    grid-column: 1 / -1 !important;
    min-height: 110px !important;
  }
}

@media (max-width: 760px) {
  .page-create-automatic .automatic-create-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 18px 12px 110px !important;
  }

  .page-create-automatic .automatic-create-header {
    gap: 12px !important;
  }

  .page-create-automatic .automatic-create-header h1 {
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  .page-create-automatic .automatic-create-header p {
    font-size: 13px !important;
  }

  .page-create-automatic .automatic-input-grid,
  .page-create-automatic .automatic-file-list {
    grid-template-columns: 1fr !important;
  }

  .page-create-automatic .automatic-drop-zone {
    min-height: 220px !important;
    padding: 24px 16px !important;
  }

  .page-create-automatic .automatic-choose-btn,
  .page-create-automatic .automatic-generate-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .page-create-automatic .automatic-header-icon {
    display: none !important;
  }

  .page-create-automatic .automatic-step-heading {
    gap: 12px !important;
  }

  .page-create-automatic .automatic-step-heading h2 {
    font-size: 22px !important;
  }

  .page-create-automatic .automatic-file-row {
    grid-template-columns: 40px minmax(0, 1fr) 30px !important;
    padding: 11px !important;
  }
}

/* v65: one source of truth for primary actions and their arrow icon. */
body .ui-primary-action.ui-primary-action.ui-primary-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 62px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ed002f, #ff1749) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 12px 28px rgba(237, 0, 47, .2) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

body .ui-primary-action.ui-primary-action.ui-primary-action:hover:not(:disabled) {
  filter: brightness(.94) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(237, 0, 47, .24) !important;
}

.btn-arrow {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 20px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.btn-arrow::before {
  content: "" !important;
  position: absolute !important;
  top: 8.5px !important;
  left: 1px !important;
  width: 20px !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: currentColor !important;
}

.btn-arrow::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  right: 1px !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 3px solid currentColor !important;
  border-right: 3px solid currentColor !important;
  transform: rotate(45deg) !important;
}

:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign,
  .page-contract-detail-redesign,
  .customer-sign-page
) :is(a, button):has(> .btn-arrow) {
  min-height: 62px !important;
  padding-right: 32px !important;
  padding-left: 32px !important;
  gap: 18px !important;
  justify-content: center !important;
}

.page-create-automatic .automatic-create-main {
  padding-top: clamp(22px, 2.4vw, 42px) !important;
}

.page-create-automatic .automatic-step-heading > div {
  min-width: 0 !important;
}

.page-create-automatic .automatic-step-heading p {
  max-width: 850px !important;
}

.page-create-automatic .automatic-drop-zone p {
  margin-bottom: 24px !important;
  text-align: center !important;
}

.page-create-automatic .automatic-empty-files small {
  display: block !important;
  margin-top: 7px !important;
  color: #7b879e !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.page-create-automatic .automatic-generate-btn {
  justify-content: center !important;
  gap: 18px !important;
  min-height: 62px !important;
  padding-inline: 32px !important;
}

.page-template-redesign .page-subtitle {
  max-width: 900px !important;
  line-height: 1.5 !important;
}

@media (max-width: 760px) {
  .page-create-automatic .automatic-step-heading {
    align-items: flex-start !important;
  }

  .page-create-automatic .automatic-step-heading p {
    font-size: 13px !important;
  }
}

/* Contract processing overlay shared by the create, review, and send transitions. */
body.contract-is-loading {
  overflow: hidden !important;
}

.contract-loading-overlay[hidden] {
  display: none !important;
}

.contract-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: rgba(7, 20, 48, .72) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

.contract-loading-overlay.is-visible {
  opacity: 1 !important;
}

.contract-loading-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(100%, 680px) !important;
  min-height: 650px !important;
  padding: clamp(42px, 5vw, 60px) clamp(28px, 5vw, 58px) !important;
  border: 1px solid rgba(255, 255, 255, .88) !important;
  border-radius: 24px !important;
  background: #fff !important;
  color: #071430 !important;
  text-align: center !important;
  box-shadow: 0 32px 90px rgba(7, 20, 48, .28) !important;
  transform: translateY(10px) scale(.985) !important;
  transition: transform .2s ease !important;
}

.contract-loading-overlay.is-visible .contract-loading-card {
  transform: translateY(0) scale(1) !important;
}

.contract-loading-document-icon {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 50% !important;
  background: #eef5ff !important;
  color: #3f83ed !important;
}

.contract-loading-document-icon svg,
.contract-loading-shield svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.contract-loading-document-icon svg {
  width: 29px !important;
  height: 29px !important;
}

.contract-loading-kicker {
  margin: 22px 0 16px !important;
  color: #3f83ed !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.contract-loading-card h2 {
  margin: 0 !important;
  color: #071430 !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
}

.contract-loading-message {
  max-width: 520px !important;
  margin: 20px auto 10px !important;
  color: #66728d !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 750 !important;
}

.contract-loading-spinner {
  display: block !important;
  width: clamp(116px, 28vw, 156px) !important;
  height: auto !important;
  margin: 18px auto 34px !important;
  object-fit: contain !important;
}

.contract-loading-divider {
  width: 100% !important;
  height: 1px !important;
  margin-top: auto !important;
  background: #dfe6f0 !important;
}

.contract-loading-footer {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 13px !important;
  margin-top: 28px !important;
  color: #65728b !important;
  text-align: left !important;
}

.contract-loading-footer p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
}

.contract-loading-shield {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 50% !important;
  background: #eef5ff !important;
  color: #3f83ed !important;
}

.contract-loading-shield svg {
  width: 20px !important;
  height: 20px !important;
}

@media (max-width: 520px) {
  .contract-loading-overlay {
    padding: 12px !important;
  }

  .contract-loading-card {
    min-height: min(620px, calc(100vh - 24px)) !important;
    padding: 30px 20px !important;
    border-radius: 20px !important;
  }

  .contract-loading-message {
    font-size: 14px !important;
  }

  .contract-loading-spinner {
    margin-top: 12px !important;
    margin-bottom: 26px !important;
  }

  .contract-loading-footer {
    margin-top: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contract-loading-overlay,
  .contract-loading-card {
    transition: none !important;
  }
}

/* v68 dashboard performance, engagement, action, and handoff workspace. */
.page-dashboard-redesign .sales-performance-card,
.page-dashboard-redesign .dashboard-insight-grid,
.page-dashboard-redesign .achievement-strip {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
}

.page-dashboard-redesign .dashboard-kicker {
  margin: 0 0 5px;
  color: #66728d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-dashboard-redesign .sales-performance-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: clamp(24px, 2.4vw, 38px);
  border: 1px solid #dfe5ef;
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 8%, rgba(237, 0, 47, .1), transparent 28%),
    radial-gradient(circle at 70% 104%, rgba(22, 139, 210, .1), transparent 32%),
    #fff;
  box-shadow: 0 18px 48px rgba(7, 20, 48, .07);
}

.page-dashboard-redesign .sales-performance-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(237, 0, 47, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(237, 0, 47, .025), 0 0 0 68px rgba(22, 139, 210, .02);
  pointer-events: none;
}

.page-dashboard-redesign .sales-performance-head,
.page-dashboard-redesign .sales-title-group,
.page-dashboard-redesign .sales-chart-heading,
.page-dashboard-redesign .sales-change-row,
.page-dashboard-redesign .sales-goal-block > div:first-child {
  display: flex;
  align-items: center;
}

.page-dashboard-redesign .sales-performance-head {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.page-dashboard-redesign .sales-title-group {
  min-width: 0;
  gap: 14px;
}

.page-dashboard-redesign .sales-title-icon,
.page-dashboard-redesign .insight-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
}

.page-dashboard-redesign .sales-title-icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, #eef7ff, #e1f0ff);
  color: #087fc7;
  box-shadow: inset 0 0 0 1px rgba(8, 127, 199, .09);
}

.page-dashboard-redesign .sales-title-icon svg,
.page-dashboard-redesign .insight-card-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-dashboard-redesign .sales-title-group h2 {
  margin: 0;
  color: #071430;
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 950;
  letter-spacing: -.035em;
}

.page-dashboard-redesign .sales-title-group > div > p:last-child {
  margin: 5px 0 0;
  color: #66728d;
  font-size: 13px;
  font-weight: 750;
}

.page-dashboard-redesign .sales-period-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  padding: 5px;
  border: 1px solid #dce4f0;
  border-radius: 14px;
  background: rgba(246, 248, 252, .9);
  box-shadow: inset 0 1px 2px rgba(7, 20, 48, .03);
}

.page-dashboard-redesign .sales-period-toggle button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #69758e;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.page-dashboard-redesign .sales-period-toggle button:hover {
  color: #071430;
  background: #fff;
}

.page-dashboard-redesign .sales-period-toggle button:active {
  transform: scale(.96);
}

.page-dashboard-redesign .sales-period-toggle button.is-active {
  background: #071430;
  color: #fff;
  box-shadow: 0 8px 20px rgba(7, 20, 48, .16);
}

.page-dashboard-redesign .sales-performance-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(480px, 1.55fr);
  gap: clamp(22px, 2.8vw, 44px);
  align-items: stretch;
}

.page-dashboard-redesign .sales-score-panel {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid rgba(215, 224, 237, .85);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 14px 36px rgba(7, 20, 48, .045);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.page-dashboard-redesign .sales-period-label {
  color: #69758e;
  font-size: 12px;
  font-weight: 900;
}

.page-dashboard-redesign .sales-total {
  display: block;
  margin: 7px 0 9px;
  color: #071430;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1;
}

.page-dashboard-redesign .sales-change-row {
  flex-wrap: wrap;
  gap: 7px;
  color: #7b879d;
  font-size: 11px;
  font-weight: 750;
}

.page-dashboard-redesign .sales-change-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #edf5ff;
  color: #087fc7;
  font-size: 11px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-change-badge.is-positive {
  background: #eafbf3;
  color: #008a55;
}

.page-dashboard-redesign .sales-change-badge.is-negative {
  background: #fff0f3;
  color: #d1002a;
}

.page-dashboard-redesign .sales-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.page-dashboard-redesign .sales-mini-stats > div {
  padding: 13px;
  border-radius: 13px;
  background: #f6f8fc;
}

.page-dashboard-redesign .sales-mini-stats span,
.page-dashboard-redesign .sales-goal-block span,
.page-dashboard-redesign .sales-goal-block small {
  display: block;
  color: #758198;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
}

.page-dashboard-redesign .sales-mini-stats strong {
  display: block;
  margin-top: 5px;
  color: #071430;
  font-size: 18px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-goal-block > div:first-child {
  justify-content: space-between;
  margin-bottom: 8px;
}

.page-dashboard-redesign .sales-goal-block > div:first-child strong {
  color: #ed002f;
  font-size: 12px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-goal-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: #e8edf5;
}

.page-dashboard-redesign .sales-goal-track span {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ed002f, #ff5b78);
  box-shadow: 0 0 16px rgba(237, 0, 47, .28);
  transition: width 720ms cubic-bezier(.2, .85, .25, 1);
}

.page-dashboard-redesign .sales-goal-block small {
  margin-top: 7px;
  text-align: right;
}

.page-dashboard-redesign .sales-chart-panel {
  min-width: 0;
  padding: 20px 22px 12px;
  border: 1px solid rgba(215, 224, 237, .82);
  border-radius: 18px;
  background: rgba(255, 255, 255, .68);
}

.page-dashboard-redesign .sales-chart-heading {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.page-dashboard-redesign .sales-chart-heading strong,
.page-dashboard-redesign .sales-chart-heading span {
  display: block;
}

.page-dashboard-redesign .sales-chart-heading strong {
  color: #071430;
  font-size: 14px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-chart-heading div span {
  margin-top: 3px;
  color: #8490a5;
  font-size: 10px;
  font-weight: 750;
}

.page-dashboard-redesign .sales-chart-live {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef7ff;
  color: #087fc7;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.page-dashboard-redesign .sales-chart {
  width: 100%;
  min-height: 250px;
}

.page-dashboard-redesign .sales-chart svg {
  display: block;
  width: 100%;
  height: 250px;
  overflow: visible;
}

.page-dashboard-redesign .sales-grid-line {
  stroke: #e5eaf2;
  stroke-width: 1;
  stroke-dasharray: 4 7;
}

.page-dashboard-redesign .sales-area-path {
  fill: url("#salesGradient");
  fill: rgba(22, 139, 210, .09);
}

.page-dashboard-redesign .sales-line-path {
  fill: none;
  stroke: #168bd2;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 7px rgba(22, 139, 210, .2));
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
}

.page-dashboard-redesign .is-updating .sales-line-path {
  animation: dashboard-line-draw 720ms cubic-bezier(.2, .8, .2, 1) both;
}

.page-dashboard-redesign .sales-point-hit {
  fill: transparent;
  cursor: pointer;
}

.page-dashboard-redesign .sales-point-dot {
  fill: #fff;
  stroke: #168bd2;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 150ms ease, fill 150ms ease;
}

.page-dashboard-redesign .sales-chart-point:hover .sales-point-dot,
.page-dashboard-redesign .sales-chart-point:focus .sales-point-dot {
  fill: #168bd2;
  transform: scale(1.45);
  outline: none;
}

.page-dashboard-redesign .sales-axis-label {
  fill: #7f8ba1;
  font-size: 10px;
  font-weight: 850;
}

.page-dashboard-redesign .dashboard-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.page-dashboard-redesign .dashboard-insight-card {
  position: relative;
  min-width: 0;
  min-height: 390px;
  padding: 22px;
  border: 1px solid #dfe5ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(7, 20, 48, .055);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.page-dashboard-redesign .dashboard-insight-card:hover {
  z-index: 2;
  border-color: #cfd8e7;
  box-shadow: 0 22px 50px rgba(7, 20, 48, .095);
  transform: translateY(-4px);
}

.page-dashboard-redesign .insight-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.page-dashboard-redesign .insight-card-icon {
  width: 44px;
  height: 44px;
}

.page-dashboard-redesign .insight-card-icon.red { background: #fff0f3; color: #ed002f; }
.page-dashboard-redesign .insight-card-icon.blue { background: #eef7ff; color: #168bd2; }
.page-dashboard-redesign .insight-card-icon.green { background: #ebfbf3; color: #0a9e63; }

.page-dashboard-redesign .insight-card-head h3 {
  margin: 0;
  color: #071430;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.025em;
}

.page-dashboard-redesign .insight-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff0f3;
  color: #d6002b;
  font-size: 12px;
  font-weight: 950;
}

.page-dashboard-redesign .insight-count.green { background: #ebfbf3; color: #008a55; }

.page-dashboard-redesign .insight-card-copy {
  margin: 14px 0 18px;
  color: #69758e;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.page-dashboard-redesign .insight-action-list,
.page-dashboard-redesign .handoff-list {
  display: grid;
  gap: 9px;
}

.page-dashboard-redesign .insight-action-row,
.page-dashboard-redesign .handoff-row {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e3e8f1;
  border-radius: 13px;
  background: #fbfcfe;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.page-dashboard-redesign .insight-action-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
}

.page-dashboard-redesign .insight-action-row:hover,
.page-dashboard-redesign .handoff-row:hover {
  border-color: #cfd8e7;
  background: #fff;
  transform: translateX(2px);
}

.page-dashboard-redesign .insight-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ed002f;
  box-shadow: 0 0 0 4px rgba(237, 0, 47, .09);
}

.page-dashboard-redesign .tone-followup .insight-status-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .11); }
.page-dashboard-redesign .tone-resume .insight-status-dot { background: #168bd2; box-shadow: 0 0 0 4px rgba(22, 139, 210, .1); }

.page-dashboard-redesign .insight-action-row > div,
.page-dashboard-redesign .handoff-row a {
  min-width: 0;
}

.page-dashboard-redesign .insight-action-row strong,
.page-dashboard-redesign .insight-action-row span,
.page-dashboard-redesign .handoff-row strong,
.page-dashboard-redesign .handoff-row span {
  display: block;
}

.page-dashboard-redesign .insight-action-row strong,
.page-dashboard-redesign .handoff-row strong {
  overflow: hidden;
  color: #071430;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .insight-action-row span,
.page-dashboard-redesign .handoff-row span {
  overflow: hidden;
  margin-top: 2px;
  color: #7b879d;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .insight-action-row a,
.page-dashboard-redesign .insight-action-row button,
.page-dashboard-redesign .handoff-row button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d6deea;
  border-radius: 9px;
  background: #fff;
  color: #071430;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.page-dashboard-redesign .insight-action-row a:hover,
.page-dashboard-redesign .insight-action-row button:hover,
.page-dashboard-redesign .handoff-row button:hover {
  border-color: #168bd2;
  color: #087fc7;
  box-shadow: 0 6px 14px rgba(22, 139, 210, .1);
}

.page-dashboard-redesign .insight-action-row a:active,
.page-dashboard-redesign .insight-action-row button:active,
.page-dashboard-redesign .handoff-row button:active { transform: scale(.96); }

.page-dashboard-redesign .engagement-funnel {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.page-dashboard-redesign .engagement-funnel > div {
  position: relative;
  display: flex;
  min-width: 120px;
  width: max(38%, var(--funnel-width));
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border-radius: 11px;
  background: linear-gradient(90deg, #eaf6ff, #f5faff);
  color: #087fc7;
  box-sizing: border-box;
  transition: width 650ms cubic-bezier(.2, .8, .2, 1), transform 160ms ease;
}

.page-dashboard-redesign .engagement-funnel > div:nth-child(2) { margin-left: 6%; background: linear-gradient(90deg, #eafbf4, #f4fdf9); color: #008a55; }
.page-dashboard-redesign .engagement-funnel > div:nth-child(3) { margin-left: 12%; background: linear-gradient(90deg, #fff0f3, #fff7f8); color: #d6002b; }
.page-dashboard-redesign .engagement-funnel > div:hover { transform: translateX(3px); }
.page-dashboard-redesign .engagement-funnel span { font-size: 11px; font-weight: 900; }
.page-dashboard-redesign .engagement-funnel b { font-size: 15px; font-weight: 950; }

.page-dashboard-redesign .engagement-speed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.page-dashboard-redesign .engagement-speed-grid > div {
  padding: 13px;
  border: 1px solid #e3e8f1;
  border-radius: 13px;
  background: #fbfcfe;
}

.page-dashboard-redesign .engagement-speed-grid span,
.page-dashboard-redesign .engagement-speed-grid strong { display: block; }
.page-dashboard-redesign .engagement-speed-grid span { color: #7b879d; font-size: 10px; font-weight: 850; }
.page-dashboard-redesign .engagement-speed-grid strong { margin-top: 6px; color: #071430; font-size: 15px; font-weight: 950; }

.page-dashboard-redesign .handoff-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.page-dashboard-redesign .handoff-row a {
  color: inherit;
  text-decoration: none;
}

.page-dashboard-redesign .insight-empty-state {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border: 1px dashed #cfe7db;
  border-radius: 14px;
  background: #f5fcf8;
  text-align: left;
}

.page-dashboard-redesign .insight-empty-state > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dff8eb;
  color: #008a55;
  font-weight: 950;
}

.page-dashboard-redesign .insight-empty-state strong,
.page-dashboard-redesign .insight-empty-state small { display: block; }
.page-dashboard-redesign .insight-empty-state strong { color: #075f3d; font-size: 13px; font-weight: 950; }
.page-dashboard-redesign .insight-empty-state small { margin-top: 3px; color: #56806d; font-size: 10px; font-weight: 750; }

.page-dashboard-redesign .achievement-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 2.3fr);
  gap: 22px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 22px 24px;
  border: 1px solid rgba(104, 73, 203, .14);
  border-radius: 20px;
  background: linear-gradient(120deg, #f9f6ff, #fff 42%, #fff7f8);
  box-shadow: 0 14px 38px rgba(7, 20, 48, .05);
}

.page-dashboard-redesign .achievement-strip::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 0, 47, .13), transparent 68%);
  pointer-events: none;
}

.page-dashboard-redesign .achievement-intro {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-dashboard-redesign .achievement-spark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, #6e54db, #8d71ec);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(110, 84, 219, .25);
  animation: dashboard-spark-pulse 2.8s ease-in-out infinite;
}

.page-dashboard-redesign .achievement-intro h2 {
  margin: 0;
  color: #071430;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.025em;
}

.page-dashboard-redesign .achievement-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.page-dashboard-redesign .achievement-item {
  position: relative;
  min-width: 0;
  min-height: 70px;
  padding: 12px;
  border: 1px solid rgba(219, 224, 237, .88);
  border-radius: 13px;
  background: rgba(255, 255, 255, .78);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.page-dashboard-redesign .achievement-item:hover {
  border-color: rgba(110, 84, 219, .28);
  box-shadow: 0 10px 24px rgba(74, 53, 148, .08);
  transform: translateY(-3px) rotate(-.3deg);
}

.page-dashboard-redesign .achievement-item span,
.page-dashboard-redesign .achievement-item strong,
.page-dashboard-redesign .achievement-item small { display: block; }
.page-dashboard-redesign .achievement-item span { color: #7b879d; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.page-dashboard-redesign .achievement-item strong { overflow: hidden; margin-top: 6px; color: #071430; font-size: 14px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.page-dashboard-redesign .achievement-item small { overflow: hidden; margin-top: 3px; color: #7b879d; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.page-dashboard-redesign .achievement-item.celebration { background: linear-gradient(145deg, #fff5f7, #fff); }
.page-dashboard-redesign .achievement-item.celebration i { position: absolute; top: 8px; right: 9px; color: #ed002f; font-size: 12px; font-style: normal; }

@keyframes dashboard-line-draw {
  from { stroke-dashoffset: 1200; opacity: .2; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes dashboard-spark-pulse {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(8deg) scale(1.07); }
}

@media (max-width: 1320px) {
  .page-dashboard-redesign .dashboard-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-dashboard-redesign .handoff-card {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .page-dashboard-redesign .handoff-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-dashboard-redesign .achievement-strip {
    grid-template-columns: 1fr;
  }
}

/* v77 polished email builder and reliable sticky preview. */
.page-sender-profile {
  --email-builder-blue: #0868b8;
  --email-builder-navy: #071430;
  --email-builder-border: #dce4ef;
  --email-builder-muted: #627089;
}

.page-sender-profile .contract-app,
.page-sender-profile .app-main,
.page-sender-profile #senderProfileForm,
.page-sender-profile .sender-layout,
.page-sender-profile .sender-fields {
  overflow: visible !important;
}

.page-sender-profile .email-builder-section {
  scroll-margin-top: 20px;
  border-color: var(--email-builder-border) !important;
}

.page-sender-profile .email-builder-section .section-head {
  padding-bottom: 16px;
  border-bottom: 1px solid #edf1f6;
}

.page-sender-profile .email-builder-section .settings-card-icon {
  background: #eaf5ff !important;
  color: var(--email-builder-blue) !important;
}

.delivery-testing-card .test-email-card-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf1f6;
}

.production-email-preview-card {
  transform: none !important;
  transition: none !important;
}

@media (min-width: 1181px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(520px, .92fr) minmax(460px, 1.08fr) !important;
    gap: 24px !important;
  }

  .page-sender-profile .production-email-preview-card {
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
    max-height: calc(100vh - 36px) !important;
    overflow: hidden !important;
  }

  .page-sender-profile .production-email-preview-card .email-preview-browser iframe {
    height: calc(100vh - 190px) !important;
    min-height: 500px !important;
  }
}

@media (max-width: 1180px) {
  .page-sender-profile .sender-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .page-sender-profile .production-email-preview-card { position: static !important; max-height: none !important; }
}

@media (max-width: 760px) {
  .page-sender-profile .email-builder-section { scroll-margin-top: 10px; }
}

.page-sender-profile .builder-color-control input[type="color"] {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px !important;
  border: 1px solid #cfd9e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.page-sender-profile :is(.email-builder-canvas-controls, .email-builder-item) input[type="range"],
.page-sender-profile .builder-visible-toggle input[type="checkbox"] {
  accent-color: #0967ef !important;
}

@media (max-width: 1100px) {
  .page-dashboard-redesign .sales-performance-body {
    grid-template-columns: 1fr;
  }

  .page-dashboard-redesign .sales-score-panel {
    display: grid;
    grid-template-columns: minmax(190px, .75fr) minmax(260px, 1fr);
    column-gap: 22px;
    align-items: center;
  }

  .page-dashboard-redesign .sales-score-panel > :is(.sales-period-label, .sales-total, .sales-change-row) { grid-column: 1; }
  .page-dashboard-redesign .sales-score-panel > :is(.sales-mini-stats, .sales-goal-block) { grid-column: 2; }
  .page-dashboard-redesign .sales-mini-stats { grid-row: 1 / span 2; margin: 0 0 10px; }
}

@media (max-width: 900px) {
  .page-dashboard-redesign .dashboard-insight-grid {
    grid-template-columns: 1fr;
  }

  .page-dashboard-redesign .handoff-card { grid-column: auto; }
  .page-dashboard-redesign .handoff-list { grid-template-columns: 1fr; }
  .page-dashboard-redesign .achievement-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-dashboard-redesign .achievement-item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .page-dashboard-redesign .sales-performance-card { padding: 18px; border-radius: 18px; }
  .page-dashboard-redesign .sales-performance-head { display: block; }
  .page-dashboard-redesign .sales-period-toggle { width: 100%; margin-top: 18px; box-sizing: border-box; }
  .page-dashboard-redesign .sales-period-toggle button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .page-dashboard-redesign .sales-score-panel { display: block; padding: 17px; }
  .page-dashboard-redesign .sales-mini-stats { margin: 20px 0; }
  .page-dashboard-redesign .sales-chart-panel { padding: 17px 12px 8px; }
  .page-dashboard-redesign .sales-chart-heading { padding: 0 6px; }
  .page-dashboard-redesign .sales-chart { min-height: 215px; overflow-x: auto; }
  .page-dashboard-redesign .sales-chart svg { min-width: 540px; height: 215px; }
  .page-dashboard-redesign .dashboard-insight-card { min-height: 0; padding: 18px; border-radius: 18px; }
  .page-dashboard-redesign .achievement-strip { padding: 18px; }
}

@media (max-width: 440px) {
  .page-dashboard-redesign .sales-title-icon { display: none; }
  .page-dashboard-redesign .sales-total { font-size: 40px; }
  .page-dashboard-redesign .sales-mini-stats,
  .page-dashboard-redesign .engagement-speed-grid,
  .page-dashboard-redesign .achievement-items { grid-template-columns: 1fr; }
  .page-dashboard-redesign .achievement-item:last-child { grid-column: auto; }
  .page-dashboard-redesign .insight-action-row { grid-template-columns: 8px minmax(0, 1fr); }
  .page-dashboard-redesign .insight-action-row > :is(a, form) { grid-column: 2; justify-self: start; }
  .page-dashboard-redesign .handoff-row { grid-template-columns: 1fr; }
  .page-dashboard-redesign .handoff-row form { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .page-dashboard-redesign .sales-line-path,
  .page-dashboard-redesign .achievement-spark {
    animation: none !important;
  }

  .page-dashboard-redesign :is(.dashboard-insight-card, .achievement-item, .insight-action-row, .handoff-row) {
    transition: none !important;
  }
}

/* v69 dashboard simplification and semantic color pass. */
.page-dashboard-redesign .sales-performance-card {
  background:
    radial-gradient(circle at 96% 0%, rgba(22, 139, 210, .09), transparent 27%),
    linear-gradient(145deg, #ffffff 0%, #ffffff 58%, #f7fbff 100%);
  box-shadow: 0 16px 42px rgba(7, 20, 48, .075);
}

.page-dashboard-redesign .sales-performance-card::before {
  border-color: rgba(22, 139, 210, .1);
  box-shadow: 0 0 0 34px rgba(22, 139, 210, .022), 0 0 0 68px rgba(7, 20, 48, .012);
}

.page-dashboard-redesign .sales-performance-body {
  grid-template-columns: minmax(250px, .62fr) minmax(480px, 1.7fr);
}

.page-dashboard-redesign .sales-score-panel,
.page-dashboard-redesign .sales-chart-panel {
  border-color: #dbe4ef;
  box-shadow: 0 12px 28px rgba(7, 20, 48, .045);
}

.page-dashboard-redesign .sales-mini-stats {
  margin-bottom: 0;
}

.page-dashboard-redesign .sales-highlight-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.page-dashboard-redesign .sales-highlight-row > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #dce9e3;
  border-radius: 13px;
  background: linear-gradient(145deg, #f4fcf8, #fff);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.page-dashboard-redesign .sales-highlight-row > div:hover {
  border-color: rgba(10, 158, 99, .3);
  box-shadow: 0 9px 22px rgba(10, 158, 99, .08);
  transform: translateY(-2px);
}

.page-dashboard-redesign .sales-highlight-row span,
.page-dashboard-redesign .sales-highlight-row strong,
.page-dashboard-redesign .sales-highlight-row small {
  display: block;
}

.page-dashboard-redesign .sales-highlight-row span {
  color: #5f786d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-dashboard-redesign .sales-highlight-row strong {
  overflow: hidden;
  margin-top: 4px;
  color: #075f3d;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .sales-highlight-row small {
  overflow: hidden;
  margin-top: 2px;
  color: #70877d;
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-dashboard-redesign .sales-chart {
  position: relative;
}

.page-dashboard-redesign .sales-point-tooltip {
  position: absolute;
  z-index: 5;
  display: grid;
  min-width: 132px;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: #071430;
  color: #fff;
  box-shadow: 0 14px 34px rgba(7, 20, 48, .24);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, calc(-100% - 12px)) scale(.96);
  transform-origin: bottom center;
  transition: opacity 130ms ease, transform 130ms ease;
}

.page-dashboard-redesign .sales-point-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #071430;
  transform: translateX(-50%) rotate(45deg);
}

.page-dashboard-redesign .sales-point-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 12px)) scale(1);
}

.page-dashboard-redesign .sales-point-tooltip span {
  color: #a9d8ff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-dashboard-redesign .sales-point-tooltip strong {
  font-size: 16px;
  font-weight: 950;
}

.page-dashboard-redesign .sales-point-tooltip small {
  color: #c7d3e6;
  font-size: 9px;
  font-weight: 750;
}

.page-dashboard-redesign .sales-chart-point.is-active .sales-point-dot,
.page-dashboard-redesign .sales-chart-point:hover .sales-point-dot,
.page-dashboard-redesign .sales-chart-point:focus .sales-point-dot {
  fill: #13a96a;
  stroke: #13a96a;
  transform: scale(1.55);
}

.page-dashboard-redesign .dashboard-insight-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.page-dashboard-redesign .dashboard-insight-card {
  min-height: 330px;
  box-shadow: 0 14px 36px rgba(7, 20, 48, .065);
}

.page-dashboard-redesign .action-center-card {
  border-color: rgba(237, 0, 47, .18);
  background: linear-gradient(145deg, #fff3f5 0%, #fff 70%);
}

.page-dashboard-redesign .action-center-card:hover {
  border-color: rgba(237, 0, 47, .32);
  box-shadow: 0 20px 46px rgba(7, 20, 48, .1);
}

.page-dashboard-redesign .action-center-card .insight-card-icon.red {
  background: #ed002f;
  color: #fff;
  box-shadow: 0 9px 20px rgba(237, 0, 47, .18);
}

.page-dashboard-redesign .action-center-card .insight-count {
  background: #ed002f;
  color: #fff;
}

.page-dashboard-redesign .action-center-card .insight-action-row {
  border-color: rgba(237, 0, 47, .12);
  background: rgba(255, 255, 255, .82);
}

.page-dashboard-redesign .engagement-card {
  border-color: rgba(22, 139, 210, .17);
  background: linear-gradient(145deg, #f1f9ff 0%, #fff 72%);
}

.page-dashboard-redesign .engagement-card:hover {
  border-color: rgba(22, 139, 210, .3);
  box-shadow: 0 20px 46px rgba(7, 20, 48, .1);
}

.page-dashboard-redesign .engagement-funnel > div:nth-child(3) {
  background: linear-gradient(90deg, #dcf8e9, #effcf5);
  color: #007a49;
}

.page-dashboard-redesign .engagement-speed-grid > div {
  background: rgba(255, 255, 255, .82);
}

@media (max-width: 1100px) {
  .page-dashboard-redesign .sales-performance-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-dashboard-redesign .sales-score-panel {
    display: block;
  }

  .page-dashboard-redesign .sales-score-panel > :is(.sales-period-label, .sales-total, .sales-change-row, .sales-mini-stats) {
    grid-column: auto;
    grid-row: auto;
  }

  .page-dashboard-redesign .sales-mini-stats {
    margin-top: 20px;
  }
}

@media (max-width: 900px) {
  .page-dashboard-redesign .dashboard-insight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .page-dashboard-redesign .sales-chart {
    overflow: visible;
  }

  .page-dashboard-redesign .sales-chart svg {
    width: 100%;
    min-width: 0;
  }

  .page-dashboard-redesign .sales-highlight-row {
    grid-template-columns: 1fr;
  }

  .page-dashboard-redesign .sales-highlight-row > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    align-items: center;
  }

  .page-dashboard-redesign .sales-highlight-row strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .page-dashboard-redesign .sales-highlight-row small {
    grid-column: 1;
  }

  .page-dashboard-redesign .sales-point-tooltip {
    min-width: 116px;
    padding: 9px 10px;
  }
}

/* v70 final cascade placement. */
.page-dashboard-redesign .sales-performance-card {
  overflow: visible;
  padding: 4px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page-dashboard-redesign .sales-performance-card::before { display: none; }
.page-dashboard-redesign .sales-chart-panel { background: #fff; }
.page-dashboard-redesign .sales-chart { min-height: 320px; overflow: visible; }
.page-dashboard-redesign .sales-chart svg { width: 100%; min-width: 0; height: 320px; }
.page-dashboard-redesign .sales-area-path { fill: rgba(22, 139, 210, .1); }
.page-dashboard-redesign .sales-line-path { stroke-width: 3; filter: none; }
.page-dashboard-redesign .dashboard-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-dashboard-redesign .dashboard-insight-card,
.page-dashboard-redesign .action-center-card,
.page-dashboard-redesign .engagement-card {
  min-height: 320px;
  border-color: #dce4ef;
  background: #fff;
  box-shadow: 0 12px 30px rgba(7, 20, 48, .06);
}

@media (max-width: 900px) {
  .page-dashboard-redesign .dashboard-insight-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .page-dashboard-redesign .sales-performance-card { padding: 4px 0 0; border-radius: 0; }
  .page-dashboard-redesign .sales-chart { min-height: 265px; overflow: visible; }
  .page-dashboard-redesign .sales-chart svg { min-width: 0; height: 265px; }
}

/* v71 flat surfaces and a proportionally rendered responsive chart. */
.contract-app :is(
  [class*="card"],
  [class*="panel"],
  [class*="section"],
  button,
  .primary-btn,
  .ui-primary-action,
  .filter-tab
) {
  box-shadow: none !important;
}

.contract-app :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(22, 139, 210, .28);
  outline-offset: 2px;
}

.page-dashboard-redesign .sales-chart {
  min-height: 0;
  overflow: visible;
}

.page-dashboard-redesign .sales-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  overflow: visible;
}

@media (max-width: 700px) {
  .page-dashboard-redesign .sales-chart { min-height: 0; }
  .page-dashboard-redesign .sales-chart svg { height: auto; }
}

/* v72 Buxton Sign product branding. */
.app-sidebar .brand-block {
  display: block;
}

.buxton-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #071430;
  text-decoration: none;
}

.buxton-brand img {
  display: block;
  width: 94px;
  height: 94px;
  object-fit: contain;
  object-position: left center;
}

.buxton-brand > span {
  color: #071430;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.035em;
  line-height: 1;
}

.monday-sidebar .sidebar-brand {
  display: flex;
  align-items: flex-start;
}

.monday-sidebar .sidebar-brand .buxton-brand img {
  width: 82px;
  height: 82px;
}

.monday-sidebar .sidebar-brand .buxton-brand > span {
  font-size: 22px;
}

.buxton-mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #071430;
}

.buxton-mobile-strip {
  display: none;
}

.buxton-mobile-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.buxton-mobile-brand strong {
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.costco-auth-page .costco-auth-brand {
  justify-content: center;
  text-align: center;
}

.buxton-auth-brand,
.buxton-signing-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #071430;
}

.buxton-auth-brand img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.buxton-auth-brand strong {
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.035em;
}

.buxton-signing-brand {
  align-items: flex-start;
}

.buxton-signing-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.buxton-signing-brand strong {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.025em;
}

.buxton-email-preview-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #071430;
}

.buxton-email-preview-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.buxton-email-preview-brand strong {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.025em;
}

@media (max-width: 920px) {
  .buxton-mobile-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 18px;
    border-bottom: 1px solid #dfe5f0;
    background: #fff;
    color: #071430;
    text-decoration: none;
  }

  .buxton-mobile-strip img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .buxton-mobile-strip strong {
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.025em;
  }

  .buxton-brand img {
    width: 72px;
    height: 72px;
  }

  .buxton-brand > span {
    font-size: 21px;
  }

  .buxton-auth-brand img {
    width: 82px;
    height: 82px;
  }

  .buxton-signing-brand img {
    width: 58px;
    height: 58px;
  }
}

/* Operations visual simplification v5 */
.ops-v5-main{display:flex;flex-direction:column;gap:18px;padding-top:28px}.ops-v5-testbar{min-height:42px;display:flex;align-items:center;gap:14px;padding:8px 16px;border:1px solid #f1d28b;border-radius:14px;background:#fff9ea;color:#684700}.ops-v5-testbar span{font-size:11px;font-weight:900;letter-spacing:.12em}.ops-v5-testbar strong{font-size:14px;color:#111c35}.ops-v5-testbar a{margin-left:auto;color:#7c5500;font-size:13px;font-weight:800;text-decoration:none}.ops-v5-role-picker{position:relative;z-index:8}.ops-v5-role-picker summary{display:flex;align-items:center;gap:12px;min-height:60px;padding:9px 14px;border:1px solid #d9e2ef;border-radius:16px;background:#fff;cursor:pointer;list-style:none}.ops-v5-role-picker summary::-webkit-details-marker{display:none}.ops-v5-role-picker summary img,.ops-v5-role-picker summary>i,.ops-v5-role-picker nav img,.ops-v5-role-picker nav i{width:40px;height:40px;border-radius:12px;object-fit:cover;display:grid;place-items:center;background:#eaf3ff;color:#0867ed;font-style:normal;font-weight:900}.ops-v5-role-picker summary span{display:grid}.ops-v5-role-picker small{font-size:10px;font-weight:900;letter-spacing:.08em;color:#6d7d98}.ops-v5-role-picker summary strong{font-size:15px}.ops-v5-role-picker summary>b{margin-left:auto;padding:7px 10px;border-radius:999px;background:#eef3f9;font-size:11px}.ops-v5-role-picker summary em{font-size:12px;color:#0867ed;font-style:normal;font-weight:800}.ops-v5-role-picker nav{position:absolute;top:68px;right:0;display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px;width:min(560px,calc(100vw - 32px));padding:12px;border:1px solid #d9e2ef;border-radius:18px;background:#fff;box-shadow:0 16px 40px rgba(12,31,66,.16)}.ops-v5-role-picker nav a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;color:#101a32;text-decoration:none}.ops-v5-role-picker nav a:hover,.ops-v5-role-picker nav a.is-active{background:#edf5ff}.ops-v5-role-picker nav span{display:grid}.ops-v5-role-picker nav strong{font-size:13px}.ops-v5-role-picker nav small{font-size:10px}
.ops-v5-hero{min-height:170px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;border-radius:26px;color:#fff;overflow:hidden}.ops-v5-hero.owner{background:linear-gradient(115deg,#071d43,#12356d)}.ops-v5-hero.scheduler{background:linear-gradient(115deg,#8d3428,#c8563d)}.ops-v5-hero.designer{background:linear-gradient(115deg,#35226c,#6e47c6)}.ops-v5-hero.installer{background:linear-gradient(115deg,#064939,#08785e)}.ops-v5-hero p{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.16em}.ops-v5-hero h1{margin:0;font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-.045em}.ops-v5-hero div>span{display:block;margin-top:10px;color:rgba(255,255,255,.78);font-size:15px}.ops-v5-hero>aside{min-width:145px;padding:18px 20px;border:1px solid rgba(255,255,255,.24);border-radius:20px;background:rgba(255,255,255,.1);text-align:center}.ops-v5-hero>aside strong{display:block;font-size:42px;line-height:1}.ops-v5-hero>aside span{font-size:12px;color:rgba(255,255,255,.76)}.ops-v5-hero button{padding:14px 20px;border:0;border-radius:14px;background:#fff;color:#35226c;font-weight:900;cursor:pointer}
.ops-v5-snapshot{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ops-v5-snapshot article{display:flex;align-items:center;gap:14px;min-height:94px;padding:18px 20px;border:1px solid #dbe4ef;border-radius:20px;background:#fff}.ops-v5-snapshot i{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;font-size:20px;font-style:normal;font-weight:900}.ops-v5-snapshot strong{display:block;font-size:28px;line-height:1}.ops-v5-snapshot span{display:block;margin-top:6px;color:#5c6b84;font-size:13px;font-weight:700}.ops-v5-snapshot .red i{background:#fff0f3;color:#ef003c}.ops-v5-snapshot .amber i{background:#fff5df;color:#c57d00}.ops-v5-snapshot .green i{background:#e8f8f2;color:#009b69}
.ops-v5-owner-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.ops-v5-focus,.ops-v5-team,.ops-v5-route,.ops-v5-open-work,.ops-v5-flow>article,.ops-v5-next-job,.ops-v5-day-list{border:1px solid #d9e3ef;border-radius:22px;background:#fff}.ops-v5-focus,.ops-v5-team,.ops-v5-route,.ops-v5-open-work,.ops-v5-day-list{padding:22px}.ops-v5-focus>header,.ops-v5-team>header,.ops-v5-route>header,.ops-v5-open-work>header,.ops-v5-day-list>header{display:flex;align-items:flex-start;justify-content:space-between}.ops-v5-focus header small,.ops-v5-team header small,.ops-v5-route header small,.ops-v5-open-work header small,.ops-v5-day-list header small{color:#0870ef;font-size:10px;font-weight:900;letter-spacing:.15em}.ops-v5-focus h2,.ops-v5-team h2,.ops-v5-route h2,.ops-v5-open-work h2,.ops-v5-day-list h2{margin:4px 0 14px;font-size:24px}.ops-v5-focus header>b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#fff0f3;color:#ef003c}.ops-v5-focus-list{display:grid;gap:8px}.ops-v5-focus-list>a,.ops-v5-open-work>a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f7f9fc;color:#111b33;text-decoration:none;transition:transform .16s ease,background .16s ease}.ops-v5-focus-list>a:hover,.ops-v5-open-work>a:hover{transform:translateY(-2px);background:#edf5ff}.ops-v5-focus-list>a>i,.ops-v5-open-work>a>i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#e5f1ff;color:#076ce9;font-style:normal;font-weight:900}.ops-v5-focus-list>a>div,.ops-v5-open-work>a>span{display:grid;min-width:0}.ops-v5-focus-list span,.ops-v5-open-work small{color:#65748e;font-size:12px}.ops-v5-focus-list em,.ops-v5-open-work em{margin-left:auto;color:#076ce9;font-size:12px;font-style:normal;font-weight:900}.ops-v5-person{display:grid;grid-template-columns:38px minmax(100px,1fr) minmax(80px,1fr) auto;align-items:center;gap:10px;padding:10px 0}.ops-v5-person>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eaf3ff;color:#0867ed;font-style:normal;font-weight:900}.ops-v5-person>span{display:grid}.ops-v5-person small{color:#6f7e96}.ops-v5-person>b{height:7px;border-radius:999px;background:#e9eef5;overflow:hidden}.ops-v5-person>b u{display:block;width:var(--load);height:100%;border-radius:inherit;background:#1672ed}.ops-v5-person>em{font-size:12px;color:#53627a;font-style:normal}
.ops-v5-scheduler-summary{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:14px}.ops-v5-scheduler-summary>article,.ops-v5-scheduler-summary>a{min-height:96px;padding:18px 20px;border:1px solid #dbe4ef;border-radius:20px;background:#fff}.ops-v5-scheduler-summary article{display:grid}.ops-v5-scheduler-summary small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#707f95}.ops-v5-scheduler-summary article strong{font-size:30px}.ops-v5-scheduler-summary article span{color:#62708a;font-size:12px}.ops-v5-scheduler-summary article.alert{border-color:#f5a8b9;background:#fff5f7}.ops-v5-scheduler-summary>a{display:flex;align-items:center;gap:14px;color:#111c35;text-decoration:none}.ops-v5-scheduler-summary>a i{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#fff0df;color:#b76500;font-style:normal;font-size:22px}.ops-v5-scheduler-summary>a strong,.ops-v5-scheduler-summary>a span{display:block}.ops-v5-scheduler-summary>a span{color:#65748b;font-size:12px}.ops-v5-dispatch{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);gap:16px}.ops-v5-route>header>span{color:#7b5d4d;font-size:12px;font-weight:800}.ops-v5-route-line{position:relative;display:grid;gap:8px}.ops-v5-route-line:before{content:"";position:absolute;left:99px;top:43px;bottom:28px;width:2px;background:#dfe6ef}.ops-v5-route-line .origin,.ops-v5-route-line>a{position:relative;z-index:1;display:grid;grid-template-columns:72px 38px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;color:#101b34;text-decoration:none}.ops-v5-route-line .origin{grid-template-columns:38px minmax(0,1fr);margin-bottom:5px;padding:12px;border-radius:14px;background:#fff4e7}.ops-v5-route-line .origin>i,.ops-v5-route-line>a>i{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#bd6427;font-style:normal;font-weight:900}.ops-v5-route-line>a{padding:8px 10px;border-radius:14px;transition:background .16s ease}.ops-v5-route-line>a:hover{background:#f5f8fc}.ops-v5-route-line time{color:#53627a;font-size:12px;font-weight:900}.ops-v5-route-line>a>i{background:#e9f3ff;color:#0868e9}.ops-v5-route-line span{display:grid}.ops-v5-route-line small{color:#6b7990}.ops-v5-route-line em{color:#6b7990;font-size:12px;font-style:normal}.ops-v5-open-work>a{margin-bottom:8px}
.ops-v5-designer-pulse{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ops-v5-designer-pulse article{display:flex;align-items:end;gap:12px;padding:18px 20px;border-radius:18px}.ops-v5-designer-pulse strong{font-size:34px;line-height:1}.ops-v5-designer-pulse span{padding-bottom:3px;font-size:13px;font-weight:800}.ops-v5-designer-pulse .red{background:#fff0f3;color:#bc1741}.ops-v5-designer-pulse .blue{background:#eaf4ff;color:#085fbf}.ops-v5-designer-pulse .green{background:#e9f8f2;color:#087d5b}.ops-v5-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.ops-v5-flow>article{overflow:hidden}.ops-v5-flow>article>header{display:flex;justify-content:space-between;padding:20px}.ops-v5-flow>article.blue header{background:#edf5ff}.ops-v5-flow>article.violet header{background:#f2edff}.ops-v5-flow>article.amber header{background:#fff5e4}.ops-v5-flow header small{font-size:10px;font-weight:900;letter-spacing:.13em;color:#6d7c94}.ops-v5-flow h2{margin:4px 0;font-size:23px}.ops-v5-flow header span{color:#63718a;font-size:12px}.ops-v5-flow header b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#fff}.ops-v5-flow>article>div{display:grid;gap:6px;padding:12px}.ops-v5-flow a{display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:10px;padding:10px;border-radius:12px;color:#111c35;text-decoration:none}.ops-v5-flow a:hover{background:#f4f7fb}.ops-v5-flow a>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eaf3ff;color:#0867ed;font-style:normal;font-weight:900}.ops-v5-flow a>span{display:grid}.ops-v5-flow a small{color:#6a7890}.ops-v5-flow a em{color:#0867ed;font-size:22px;font-style:normal}.ops-v5-flow p{padding:20px;text-align:center;color:#748198}
.ops-v5-installer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.6fr);gap:16px}.ops-v5-next-job{display:grid;grid-template-columns:125px minmax(0,1fr) minmax(190px,.55fr);overflow:hidden}.ops-v5-next-time{display:grid;place-content:center;padding:22px;background:#073e33;color:#fff;text-align:center}.ops-v5-next-time small{font-size:10px;font-weight:900;letter-spacing:.15em}.ops-v5-next-time strong{margin:8px 0;font-size:32px}.ops-v5-next-time span{font-size:12px;color:#bde9dc}.ops-v5-next-main{position:relative;padding:26px}.ops-v5-next-main>i{position:absolute;right:22px;top:22px;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#e7f7f1;color:#08755a;font-style:normal;font-size:20px;font-weight:900}.ops-v5-next-main p{margin:0;color:#07815f;font-size:10px;font-weight:900;letter-spacing:.14em}.ops-v5-next-main h2{margin:6px 60px 4px 0;font-size:28px}.ops-v5-next-main>span{color:#62718a}.ops-v5-next-main>div{display:flex;gap:8px;margin-top:20px}.ops-v5-next-main a{padding:10px 14px;border-radius:11px;background:#e9f5f1;color:#075b48;font-size:12px;font-weight:900;text-decoration:none}.ops-v5-next-main a:last-child{background:#08755a;color:#fff}.ops-v5-next-job>aside{display:flex;flex-direction:column;justify-content:center;padding:22px;border-left:1px solid #e0e7f0;background:#fafcfb}.ops-v5-next-job>aside small{margin-top:10px;color:#748197;font-size:9px;font-weight:900;letter-spacing:.13em}.ops-v5-next-job>aside strong{font-size:14px}.ops-v5-next-job>aside span{color:#67758d;font-size:12px}.ops-v5-next-job.empty{display:grid;place-items:center;min-height:260px}.ops-v5-day-list ol{position:relative;display:grid;gap:14px;padding:0;margin:0;list-style:none}.ops-v5-day-list ol:before{content:"";position:absolute;left:18px;top:18px;bottom:18px;width:2px;background:#dce4ed}.ops-v5-day-list li{position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px}.ops-v5-day-list li>i{z-index:1;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#edf2f7;color:#60708a;font-style:normal;font-weight:900}.ops-v5-day-list li.done>i{background:#e7f8f1;color:#00865e}.ops-v5-day-list li.current>i{background:#08755a;color:#fff}.ops-v5-day-list li span{display:grid}.ops-v5-day-list li small{color:#68768d}
.ops-v5-clear{display:grid;place-items:center;gap:5px;min-height:130px;text-align:center;color:#68768e}.ops-v5-clear>i{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#e8f8f2;color:#00865e;font-style:normal;font-size:20px}.ops-v5-clear strong{color:#17223a}.ops-v5-directory{border:1px solid #d8e2ee;border-radius:20px;background:#fff;overflow:hidden}.ops-v5-directory>summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none}.ops-v5-directory>summary::-webkit-details-marker{display:none}.ops-v5-directory summary span{display:grid}.ops-v5-directory summary small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#6e7d95}.ops-v5-directory summary strong{font-size:18px}.ops-v5-directory summary b{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#edf3fa}.ops-v5-directory summary em{color:#0867ed;font-size:12px;font-style:normal;font-weight:900}.ops-v5-directory[open] summary em{font-size:0}.ops-v5-directory[open] summary em:after{content:"Close";font-size:12px}.ops-v5-directory>section{padding:0 20px 20px;border-top:1px solid #e1e7ef}.ops-v5-directory .ops-search{margin-top:16px}
@media(max-width:1100px){.ops-v5-owner-grid,.ops-v5-dispatch,.ops-v5-installer{grid-template-columns:1fr}.ops-v5-flow{grid-template-columns:1fr 1fr}.ops-v5-open-work{order:-1}.ops-v5-next-job{grid-template-columns:115px 1fr}.ops-v5-next-job>aside{grid-column:1/-1;border-left:0;border-top:1px solid #e0e7f0}.ops-v5-next-job>aside{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 12px}}
@media(max-width:760px){.ops-v5-main{gap:12px;padding:12px 12px 110px}.ops-v5-testbar{align-items:flex-start;flex-wrap:wrap}.ops-v5-testbar strong{order:2;width:calc(100% - 60px)}.ops-v5-testbar a{position:absolute;right:28px}.ops-v5-role-picker summary>b{display:none}.ops-v5-role-picker nav{position:fixed;left:12px;right:12px;top:auto;bottom:88px;width:auto;grid-template-columns:1fr;max-height:60vh;overflow:auto}.ops-v5-hero{min-height:150px;padding:24px;border-radius:22px}.ops-v5-hero h1{font-size:34px}.ops-v5-hero>aside{min-width:90px;padding:14px}.ops-v5-hero>aside strong{font-size:34px}.ops-v5-snapshot,.ops-v5-designer-pulse{grid-template-columns:1fr 1fr 1fr;gap:7px}.ops-v5-snapshot article{display:grid;gap:7px;min-height:106px;padding:12px}.ops-v5-snapshot i{width:36px;height:36px}.ops-v5-snapshot strong{font-size:24px}.ops-v5-snapshot span{font-size:11px}.ops-v5-owner-grid,.ops-v5-dispatch,.ops-v5-flow,.ops-v5-installer{display:grid;grid-template-columns:1fr}.ops-v5-scheduler-summary{grid-template-columns:1fr 1fr}.ops-v5-scheduler-summary>a{grid-column:1/-1}.ops-v5-route-line:before{left:18px}.ops-v5-route-line>a{grid-template-columns:38px minmax(0,1fr) auto}.ops-v5-route-line>a time{grid-column:2;grid-row:2}.ops-v5-route-line>a>i{grid-column:1;grid-row:1/3}.ops-v5-flow{gap:10px}.ops-v5-next-job{grid-template-columns:1fr}.ops-v5-next-time{display:flex;align-items:center;justify-content:space-between;padding:15px 18px}.ops-v5-next-time strong{margin:0;font-size:24px}.ops-v5-next-main{padding:22px 18px}.ops-v5-next-job>aside{grid-column:auto;grid-template-columns:1fr;padding:18px;border-top:1px solid #e0e7f0}.ops-v5-next-main>div{display:grid;grid-template-columns:1fr 1fr}.ops-v5-next-main a{text-align:center}.ops-v5-next-main a:last-child{grid-column:1/-1}.ops-v5-directory .ops-project-table{overflow-x:auto}.ops-v5-directory .ops-project-row{min-width:900px}}
@media(max-width:480px){.ops-v5-testbar strong{font-size:12px}.ops-v5-role-picker summary em{display:none}.ops-v5-hero{align-items:flex-start}.ops-v5-hero>aside{display:none}.ops-v5-hero h1{font-size:31px}.ops-v5-hero div>span{font-size:13px}.ops-v5-snapshot article{min-width:0}.ops-v5-snapshot i{display:none}.ops-v5-snapshot span{line-height:1.2}.ops-v5-designer-pulse article{display:grid;gap:4px;padding:13px}.ops-v5-designer-pulse strong{font-size:28px}.ops-v5-designer-pulse span{font-size:11px}.ops-v5-focus,.ops-v5-team,.ops-v5-route,.ops-v5-open-work,.ops-v5-day-list{padding:17px}.ops-v5-person{grid-template-columns:34px minmax(90px,1fr) auto}.ops-v5-person>b{display:none}.ops-v5-route-line>a>em{display:none}.ops-v5-scheduler-summary>article,.ops-v5-scheduler-summary>a{min-height:82px;padding:13px}.ops-v5-next-main h2{font-size:25px}.ops-v5-directory>section{padding:0 12px 12px}.ops-v5-directory .ops-search{display:grid}.ops-v5-directory .ops-search button{width:100%}}

/* Operations preview profile photos */
.ops-persona-bar nav a {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}
.ops-persona-bar nav a > img,
.ops-persona-bar nav a > i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: #e9f2ff;
  color: #0967ef;
  font-style: normal;
  font-weight: 900;
}
.ops-persona-bar nav a > span { display: grid; min-width: 0; }
.ops-persona-bar nav a.is-active > i { background: rgba(255,255,255,.14); color: #fff; }
.ops-role-avatar { overflow: hidden; }
.ops-role-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ops-team-grid img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.ops-note-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  object-fit: cover;
  display: block;
}

/* Private operations preview */
.page-operations-preview { background:#f3f6fb; color:#071430; }
.operations-main { max-width:1800px; margin-left:288px; padding:34px 34px 80px; }
.operations-main *, .operations-main *::before, .operations-main *::after { box-sizing:border-box; }
.operations-main a { color:inherit; }
.ops-safety-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; border:1px solid #f1d79a; border-radius:18px; background:#fff8e7; padding:14px 18px; }
.ops-safety-bar div { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.ops-safety-bar span,.ops-eyebrow { color:#0867df; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.ops-safety-bar strong { font-size:15px; }.ops-safety-bar p { margin:0; color:#657189; font-size:14px; }.ops-safety-bar a,.ops-back { font-weight:850; text-decoration:none; }
.ops-hero { display:flex; align-items:end; justify-content:space-between; gap:32px; padding:14px 4px 28px; }
.ops-hero h1 { max-width:820px; margin:5px 0 10px; font-size:clamp(36px,4vw,64px); line-height:1; letter-spacing:-.045em; }.ops-hero>div>p:last-child { max-width:780px; margin:0; color:#5e6c86; font-size:17px; line-height:1.6; }
.ops-hero-actions,.crm-modal-actions { display:flex; gap:12px; flex-wrap:wrap; }
.ops-button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; border:1px solid #d6dfeb; border-radius:13px; padding:11px 20px; font:inherit; font-weight:850; text-decoration:none; cursor:pointer; transition:transform .16s ease,background .16s ease,border-color .16s ease; }.ops-button:hover { transform:translateY(-1px); }.ops-button-primary { border-color:#0870f5; background:#0870f5; color:#fff !important; }.ops-button-secondary { background:#fff; color:#0b2447 !important; }
.ops-persona-bar,.ops-role-intro,.ops-morning-route,.ops-panel,.ops-directory-panel,.ops-team-panel,.ops-project-hero,.ops-project-summary,.ops-project-tabs { border:1px solid #dce4ef; border-radius:20px; background:#fff; }
.ops-persona-bar { display:grid; grid-template-columns:240px 1fr; align-items:center; gap:22px; padding:18px; }.ops-persona-bar>div { display:grid; gap:3px; }.ops-persona-bar>div span { color:#6b7891; font-size:13px; }.ops-persona-bar nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.ops-persona-bar a { display:grid; gap:2px; border-radius:12px; padding:11px 14px; text-decoration:none; }.ops-persona-bar a:hover { background:#f4f7fb; }.ops-persona-bar a.is-active { background:#09234d; color:#fff; }.ops-persona-bar small { opacity:.72; }
.ops-role-intro { display:flex; align-items:center; gap:16px; margin-top:16px; padding:20px 22px; }.ops-role-avatar { display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:#e9f3ff; color:#0870f5; font-size:20px; font-weight:900; }.ops-role-intro>div:nth-child(2) { flex:1; }.ops-role-intro p,.ops-role-intro h2,.ops-role-intro span { margin:0; }.ops-role-intro p { color:#0870f5; font-size:12px; font-weight:900; text-transform:uppercase; }.ops-role-intro h2 { margin:2px 0 4px; font-size:24px; }.ops-role-intro span { color:#65728a; }.ops-focus-pill { flex:0 0 auto!important; border-radius:999px; background:#ebf8ef; padding:8px 12px; color:#087a46; font-weight:850; }
.ops-morning-route,.ops-directory-panel,.ops-team-panel { margin-top:18px; padding:24px; }.ops-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }.ops-section-heading h2 { margin:3px 0 0; font-size:25px; letter-spacing:-.025em; }.ops-section-heading>span,.ops-section-heading a { color:#63718a; font-size:13px; font-weight:800; text-decoration:none; }
.ops-route-line { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); align-items:center; }.ops-route-line article { display:flex; min-width:0; align-items:center; gap:12px; border-radius:15px; background:#f7f9fc; padding:16px; }.ops-route-line article i { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:10px; background:#e7f1ff; color:#0870f5; font-style:normal; font-weight:900; }.ops-route-line article div { display:grid; min-width:0; }.ops-route-line small { color:#77839a; font-weight:800; }.ops-route-line span { overflow:hidden; color:#647189; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.ops-route-line>b { height:2px; background:#dfe6f0; }
.ops-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:18px; }.ops-stat-grid article { position:relative; overflow:hidden; border:1px solid #dce4ef; border-radius:18px; background:#fff; padding:20px 22px; }.ops-stat-grid article::before { position:absolute; top:0; bottom:0; left:0; width:5px; background:var(--tone); content:""; }.ops-stat-grid .tone-blue{--tone:#148edf}.ops-stat-grid .tone-amber{--tone:#ee9c19}.ops-stat-grid .tone-green{--tone:#13a66c}.ops-stat-grid .tone-navy{--tone:#102a54}.ops-stat-grid span,.ops-stat-grid p { color:#66738c; }.ops-stat-grid span { font-size:12px; font-weight:900; text-transform:uppercase; }.ops-stat-grid strong { display:block; margin:5px 0 2px; font-size:36px; }.ops-stat-grid p { margin:0; font-size:13px; }
.ops-control-grid,.ops-detail-grid,.ops-conversation-grid,.ops-schedule-grid,.ops-files-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:18px; margin-top:18px; align-items:start; }.ops-panel { padding:24px; }.ops-job-list,.ops-action-list,.ops-thread,.ops-appointment-list,.ops-file-list,.ops-contract-list { display:grid; gap:9px; }.ops-job-list>a { display:grid; grid-template-columns:76px 120px minmax(0,1fr) auto; align-items:center; gap:14px; border:1px solid #e1e7f0; border-radius:14px; padding:14px; text-decoration:none; }.ops-job-list>a:hover,.ops-action-list>a:hover,.ops-project-row:not(.ops-project-head):hover { border-color:#a9c8ef; background:#f8fbff; }.ops-job-list time,.ops-job-list strong,.ops-job-list small { display:block; }.ops-job-list time { font-weight:900; }.ops-job-list small { margin-top:3px; color:#67748c; }.ops-job-list em { font-style:normal; font-weight:850; }.ops-job-type { border-radius:999px; padding:6px 9px; background:#eaf3ff; color:#0867df; font-size:11px; font-weight:900; text-align:center; }
.ops-action-list>a { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid #e1e7f0; border-radius:14px; padding:14px; text-decoration:none; }.ops-action-list i { width:9px; height:9px; border-radius:50%; background:#14a36c; }.ops-action-list i.danger { background:#ef3151; }.ops-action-list span,.ops-action-list small { color:#69768e; }
.ops-search { display:flex; width:min(100%,520px); gap:8px; }.ops-search input { width:100%; border:1px solid #d9e2ed; border-radius:12px; padding:12px 14px; font:inherit; }.ops-search button { border:0; border-radius:12px; background:#09234d; padding:0 18px; color:#fff; font-weight:850; }.ops-filter-row { display:flex; gap:8px; margin-bottom:15px; overflow:auto; padding-bottom:3px; }.ops-filter-row a { flex:0 0 auto; border:1px solid #dde4ee; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:850; text-decoration:none; }.ops-filter-row a.is-active { border-color:#0870f5; background:#eaf3ff; color:#0867df; }
.ops-project-table { display:grid; overflow:hidden; border:1px solid #dce4ee; border-radius:16px; }.ops-project-row { display:grid; grid-template-columns:minmax(230px,1.3fr) minmax(170px,.8fr) minmax(210px,1fr) minmax(180px,.85fr) minmax(145px,.55fr); align-items:center; gap:14px; border-bottom:1px solid #e5eaf1; padding:15px 17px; text-decoration:none; }.ops-project-row:last-child { border-bottom:0; }.ops-project-head { background:#f6f8fb; color:#657189; font-size:12px; font-weight:900; text-transform:uppercase; }.ops-project-row>span { display:grid; min-width:0; gap:3px; }.ops-project-row small { overflow:hidden; color:#69768d; text-overflow:ellipsis; white-space:nowrap; }.ops-customer-cell { grid-template-columns:38px 1fr!important; }.ops-customer-cell i { display:grid; width:36px; height:36px; grid-row:1/3; place-items:center; border-radius:50%; background:#eaf3ff; color:#0870f5; font-style:normal; font-weight:900; }.ops-customer-cell b,.ops-customer-cell small { grid-column:2; }
.ops-team-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.ops-team-grid article { display:flex; align-items:center; gap:10px; border-radius:13px; background:#f6f8fb; padding:13px; }.ops-team-grid i { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#e6f1ff; color:#0870f5; font-style:normal; font-weight:900; }.ops-team-grid div { display:grid; }.ops-team-grid span { color:#68758d; font-size:12px; }
.ops-empty,.ops-empty-compact { display:grid; place-items:center; gap:5px; min-height:120px; border:1px dashed #ccd7e5; border-radius:14px; padding:24px; color:#66738b; text-align:center; }.ops-empty-compact { min-height:80px; }.ops-back { display:inline-block; margin:0 0 13px 4px; color:#0867df!important; }
.ops-project-hero { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:24px; }.ops-project-person { display:flex; align-items:center; gap:15px; }.ops-project-person>i { display:grid; width:62px; height:62px; place-items:center; border-radius:50%; background:#eaf3ff; color:#0870f5; font-size:23px; font-style:normal; font-weight:900; }.ops-project-person p,.ops-project-person h1,.ops-project-person span { margin:0; }.ops-project-person p { color:#0870f5; font-size:12px; font-weight:900; text-transform:uppercase; }.ops-project-person h1 { margin:2px 0; font-size:34px; letter-spacing:-.035em; }.ops-project-person span,.ops-project-contact a { color:#647189; }.ops-project-contact { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px 18px; }.ops-project-contact a { text-decoration:none; font-weight:750; }
.ops-project-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:16px; overflow:hidden; }.ops-project-summary article { display:grid; gap:3px; border-right:1px solid #e1e7ef; padding:18px 20px; }.ops-project-summary article:last-child { border-right:0; }.ops-project-summary small,.ops-project-summary span { color:#68758d; }.ops-project-summary small { font-size:11px; font-weight:900; text-transform:uppercase; }
.ops-project-tabs { display:flex; gap:4px; margin-top:16px; overflow:auto; padding:7px; }.ops-project-tabs button { display:flex; min-height:44px; align-items:center; gap:7px; border:0; border-radius:12px; background:transparent; padding:9px 16px; color:#65728a; font:inherit; font-weight:850; white-space:nowrap; cursor:pointer; }.ops-project-tabs button.is-active { background:#09234d; color:#fff; }.ops-project-tabs span { display:grid; min-width:20px; height:20px; place-items:center; border-radius:999px; background:#eaf3ff; color:#0870f5; font-size:11px; }.ops-tab-panel { display:none; }.ops-tab-panel.is-active { display:block; animation:ops-in .2s ease; }@keyframes ops-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ops-detail-stack { display:grid; gap:18px; }.ops-workflow-line { display:grid; gap:8px; }.ops-workflow-line article { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; border:1px solid #e0e7f0; border-radius:13px; padding:11px; }.ops-workflow-line article>i { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#edf2f8; font-style:normal; font-weight:900; }.ops-workflow-line article.is-complete>i { background:#e4f7ee; color:#09925c; }.ops-workflow-line article.is-skipped { opacity:.55; }.ops-workflow-line article div { display:grid; }.ops-workflow-line article span { color:#6a778e; font-size:12px; }.ops-workflow-line form { display:flex; gap:5px; }.ops-workflow-line button { border:1px solid #dce4ee; border-radius:9px; background:#fff; padding:7px 9px; font-weight:800; cursor:pointer; }.ops-inline-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; margin-top:14px; }.ops-inline-form input,.ops-inline-form select,.operations-main input,.operations-main select,.operations-main textarea { max-width:100%; border:1px solid #d7e0eb; border-radius:11px; background:#fff; padding:11px 12px; color:#071430; font:inherit; }
.ops-field-actions>p { color:#66738b; }.ops-field-actions form,.ops-composer form,.ops-upload-card form { display:grid; gap:10px; }.ops-action-button { min-height:48px; border:0; border-radius:12px; font:inherit; font-weight:900; cursor:pointer; }.ops-action-button.success { background:#e7f8ef; color:#087b4d; }.ops-action-button.danger { background:#fff0f2; color:#d80d35; }.ops-access-card { background:#fff8e8; border-color:#f0dda9; }.ops-issues-card>div { display:grid; gap:2px; border-top:1px solid #e6eaf0; padding:10px 0; }.ops-issues-card span { color:#6b7790; font-size:12px; }
.ops-conversation-grid,.ops-schedule-grid,.ops-files-grid { grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); }.ops-thread article { display:grid; grid-template-columns:38px 1fr; gap:10px; border-radius:14px; background:#f7f9fc; padding:14px; }.ops-thread article.is-private { background:#fff8e7; }.ops-thread article>i { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:#e6f1ff; color:#0870f5; font-style:normal; font-weight:900; }.ops-thread header { display:flex; justify-content:space-between; gap:12px; }.ops-thread header span { color:#6b7790; font-size:11px; }.ops-thread p { margin:6px 0 0; line-height:1.5; }
.ops-appointment-list>article { display:grid; grid-template-columns:130px minmax(0,1fr) auto auto; align-items:center; gap:13px; border:1px solid #e0e7ef; border-radius:13px; padding:13px; }.ops-appointment-list time,.ops-appointment-list>article>div { display:grid; }.ops-appointment-list span,.ops-appointment-list small { color:#69768e; }.ops-appointment-list form { display:flex; gap:5px; }.ops-appointment-list button { border:1px solid #d9e2ec; border-radius:8px; background:#fff; padding:6px 8px; font-weight:800; }.ops-test-availability { display:grid; gap:8px; margin-top:15px; border-top:1px solid #e2e8f0; padding-top:15px; }.ops-test-availability>p { margin:0; color:#6a778e; }.ops-test-availability form { display:grid; gap:7px; }.ops-test-availability label { display:flex; gap:8px; border-radius:10px; background:#f6f8fb; padding:9px; }
.ops-file-list>a,.ops-contract-list>a { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid #e0e7ef; border-radius:13px; padding:13px; text-decoration:none; }.ops-file-list>a>i { display:grid; width:42px; height:42px; place-items:center; border-radius:10px; background:#eaf3ff; color:#0870f5; font-style:normal; font-weight:900; }.ops-file-list>a>div,.ops-contract-list>a>div { display:grid; }.ops-file-list span,.ops-file-list small,.ops-contract-list span { color:#69768e; }.ops-contract-list>a { grid-template-columns:minmax(0,1fr) auto auto; }.ops-contract-list b { color:#0870f5; }
.ops-check-grid { display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; }.ops-check-grid legend { width:100%; margin-bottom:4px; font-weight:850; }.ops-check-grid label,.ops-workflow-picker label { display:flex!important; align-items:center; gap:7px; border:1px solid #dde5ee; border-radius:10px; padding:9px 11px!important; }.ops-check-grid input,.ops-workflow-picker input { width:auto!important; }.form-end { display:flex; justify-content:flex-end; }
.ops-project-modal .crm-modal-card { width:min(920px,100%); }.ops-workflow-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border:0; padding:0; }.ops-workflow-picker legend { margin-bottom:7px; font-weight:850; }.ops-workflow-picker label { display:flex; }.ops-project-modal .crm-modal-head button { display:grid; width:42px; height:42px; place-items:center; border:0; border-radius:12px; background:#ef1742; color:#fff; font-size:25px; cursor:pointer; }

@media (max-width:1250px){.operations-main{margin-left:250px;padding:24px 22px 70px}.ops-control-grid,.ops-detail-grid,.ops-conversation-grid,.ops-schedule-grid,.ops-files-grid{grid-template-columns:1fr}.ops-persona-bar{grid-template-columns:1fr}.ops-project-summary{grid-template-columns:repeat(2,1fr)}.ops-project-summary article:nth-child(2){border-right:0}.ops-project-summary article:nth-child(-n+2){border-bottom:1px solid #e1e7ef}.ops-route-line{grid-template-columns:1fr 22px 1fr}.ops-route-line article:nth-of-type(n+3),.ops-route-line b:nth-of-type(n+3){display:none}.ops-project-row{grid-template-columns:minmax(210px,1.2fr) minmax(150px,.7fr) minmax(190px,1fr) minmax(140px,.65fr)}.ops-project-row>span:nth-child(4){display:none}.ops-project-head span:nth-child(4){display:none}}
@media (max-width:920px){.operations-main{margin-left:0;padding:18px 14px 96px}.ops-hero{align-items:stretch;flex-direction:column}.ops-hero-actions>*{flex:1}.ops-stat-grid{grid-template-columns:repeat(2,1fr)}.ops-team-grid{grid-template-columns:repeat(2,1fr)}.ops-project-table{border:0;gap:10px;overflow:visible}.ops-project-head{display:none}.ops-project-row{grid-template-columns:1fr 1fr;border:1px solid #dce4ee!important;border-radius:15px;background:#fff;padding:15px}.ops-project-row>span:nth-child(4){display:grid}.ops-project-row>span:last-child{align-items:end}.ops-project-hero{align-items:flex-start;flex-direction:column}.ops-project-contact{justify-content:flex-start}.ops-workflow-picker{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.operations-main{padding:12px 10px 88px}.ops-safety-bar{align-items:flex-start;flex-direction:column;gap:10px}.ops-safety-bar div{display:grid;gap:3px}.ops-hero{padding-top:5px}.ops-hero h1{font-size:39px}.ops-persona-bar nav{grid-template-columns:repeat(2,1fr)}.ops-role-intro{align-items:flex-start;flex-wrap:wrap}.ops-focus-pill{margin-left:68px}.ops-morning-route,.ops-directory-panel,.ops-team-panel,.ops-panel{padding:17px}.ops-route-line{display:grid;grid-template-columns:1fr;gap:8px}.ops-route-line>b{display:none}.ops-route-line article:nth-of-type(n){display:flex}.ops-stat-grid{grid-template-columns:1fr 1fr;gap:9px}.ops-stat-grid article{padding:16px}.ops-stat-grid strong{font-size:28px}.ops-job-list>a{grid-template-columns:64px 1fr}.ops-job-type{justify-self:start}.ops-job-list>a>div{grid-column:1/3}.ops-job-list em{grid-column:2;grid-row:1;text-align:right}.ops-section-heading{align-items:flex-start;flex-direction:column;gap:6px}.ops-search{width:100%}.ops-project-row{grid-template-columns:1fr}.ops-project-row>span:last-child{align-items:start}.ops-team-grid{grid-template-columns:1fr}.ops-project-summary{grid-template-columns:1fr}.ops-project-summary article{border-right:0;border-bottom:1px solid #e1e7ef!important}.ops-project-summary article:last-child{border-bottom:0!important}.ops-project-person>i{width:48px;height:48px}.ops-project-person h1{font-size:28px}.ops-workflow-line article{grid-template-columns:34px 1fr}.ops-workflow-line form{grid-column:2;flex-wrap:wrap}.ops-inline-form{grid-template-columns:1fr}.ops-appointment-list>article{grid-template-columns:1fr}.ops-thread header{flex-direction:column;gap:2px}.ops-workflow-picker{grid-template-columns:1fr}.ops-project-modal .crm-modal-card{padding:17px}.ops-stat-grid p{font-size:12px}}
@media (max-width:400px){.ops-stat-grid{grid-template-columns:1fr}.ops-persona-bar nav{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.operations-main *{scroll-behavior:auto!important}.ops-tab-panel.is-active,.ops-button{animation:none!important;transition:none!important}}

/* Role-specific operations preview */
.ops-role-dashboard-hero{--role:#102a54;--role-soft:#edf3fb;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:18px;border:1px solid #dce4ef;border-left:7px solid var(--role);border-radius:22px;background:linear-gradient(120deg,var(--role-soft),#fff 62%);padding:28px 30px}
.ops-role-dashboard-hero.role-scheduler{--role:#e85b43;--role-soft:#fff2ed}.ops-role-dashboard-hero.role-designer{--role:#7457d9;--role-soft:#f3efff}.ops-role-dashboard-hero.role-installer{--role:#11956b;--role-soft:#eaf9f3}
.ops-role-dashboard-hero .ops-role-avatar{width:68px;height:68px;border:4px solid #fff;box-shadow:0 0 0 1px #dbe3ee;background:#fff}
.ops-role-copy h1{margin:3px 0 7px;font-size:clamp(30px,3vw,48px);line-height:1.05;letter-spacing:-.04em}.ops-role-copy>p:last-child{max-width:780px;margin:0;color:#5e6c84;line-height:1.55}.ops-role-dashboard-hero .ops-eyebrow{color:var(--role)}
.ops-role-stats .tone-rose{--tone:#e93957}.ops-role-stats .tone-violet{--tone:#7457d9}.ops-role-stats article{transition:border-color .16s ease}.ops-role-stats article:hover{border-color:#dce4ef}
.ops-dispatch-route{border-top:5px solid #e85b43}.ops-designer-pipeline{border-top:5px solid #7457d9}.ops-installer-route-panel{margin-top:18px;border-top:5px solid #11956b}
.ops-installer-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.ops-installer-summary article{border:1px solid #dce4ef;border-radius:18px;padding:20px 22px;background:#fff}.ops-installer-summary article:first-child{background:#eaf9f3;border-color:#bee9d8}.ops-installer-summary article:nth-child(2){background:#fff7e8;border-color:#f2dcad}.ops-installer-summary article:nth-child(3){background:#fff0f2;border-color:#f2cad1}.ops-installer-summary span{color:#68758c;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.ops-installer-summary strong{display:block;margin:5px 0 2px;font-size:25px}.ops-installer-summary p{margin:0;color:#65728a;font-size:13px}
.ops-installer-job-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ops-installer-job-grid>a{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;border:1px solid #dbe5ed;border-radius:18px;background:#fff;padding:19px;text-decoration:none;transition:transform .16s ease,border-color .16s ease}.ops-installer-job-grid>a:hover{transform:translateY(-2px);border-color:#79cbb0}.ops-installer-job-grid time{font-size:20px;font-weight:900}.ops-installer-job-grid .ops-job-type{justify-self:end}.ops-installer-job-grid h3,.ops-installer-job-grid p,.ops-installer-job-grid dl{grid-column:1/3;margin:0}.ops-installer-job-grid h3{font-size:24px}.ops-installer-job-grid p{color:#65728a}.ops-installer-job-grid dl{display:grid;gap:7px;margin-top:8px}.ops-installer-job-grid dl>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;border-top:1px solid #edf0f4;padding-top:7px}.ops-installer-job-grid dt{color:#768198;font-size:11px;font-weight:900;text-transform:uppercase}.ops-installer-job-grid dd{margin:0}.ops-installer-job-grid>a>strong{grid-column:1/3;margin-top:7px;color:#087856}
.ops-brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.ops-brief-grid article{display:grid;gap:4px;min-height:112px;border:1px solid #dee6ef;border-radius:15px;background:#f7f9fc;padding:16px}.ops-brief-grid article.tone-amber{background:#fff8e7;border-color:#efdda9}.ops-brief-grid article.tone-blue{background:#eef6ff;border-color:#cae0fa}.ops-brief-grid article.tone-violet{background:#f4f0ff;border-color:#dcd2fb}.ops-brief-grid article.tone-green{background:#eaf9f3;border-color:#c5ebdc}.ops-brief-grid small{color:#65738b;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.ops-brief-grid strong{font-size:16px;line-height:1.35}.ops-brief-grid span{color:#68758d;font-size:12px}.ops-readonly-callout{border-color:#cddbf0;background:#eef5ff}.ops-readonly-callout p:last-child{color:#5f6f87;line-height:1.6}
.ops-view-scheduler .ops-project-tabs button.is-active{background:#bd4936}.ops-view-designer .ops-project-tabs button.is-active{background:#6446c4}.ops-view-installer .ops-project-tabs button.is-active{background:#087856}.ops-view-installer .ops-back{color:#087856!important}
@media(max-width:1250px){.ops-role-dashboard-hero{grid-template-columns:auto minmax(0,1fr)}.ops-role-dashboard-hero .ops-hero-actions{grid-column:2}.ops-installer-job-grid{grid-template-columns:1fr}}
@media(max-width:760px){.ops-role-dashboard-hero{grid-template-columns:auto minmax(0,1fr);padding:21px 18px}.ops-role-dashboard-hero .ops-hero-actions{grid-column:1/3}.ops-role-dashboard-hero .ops-hero-actions>*{flex:1}.ops-persona-bar nav{display:flex;overflow-x:auto;padding-bottom:5px}.ops-persona-bar nav a{min-width:145px}.ops-installer-summary{grid-template-columns:1fr}.ops-brief-grid{grid-template-columns:1fr}}
@media(max-width:480px){.ops-role-dashboard-hero{grid-template-columns:1fr}.ops-role-dashboard-hero .ops-hero-actions{grid-column:1}.ops-role-copy h1{font-size:32px}.ops-installer-job-grid dl>div{grid-template-columns:1fr;gap:2px}}

/* Static information surfaces should not imply that they are clickable. */
.page-dashboard-redesign .sales-kpi-card,
.offer-process-grid article,
.offer-feature-grid article {
  box-shadow: none !important;
  transition: none !important;
}

.page-dashboard-redesign .sales-kpi-card:hover,
.offer-process-grid article:hover,
.offer-feature-grid article:hover {
  border-color: #dce4ef !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Clean account notification drawer. */
.notification-drawer-backdrop {
  position: fixed !important;
  z-index: 9998 !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(7, 20, 48, .48) !important;
  opacity: 0;
  transition: opacity 180ms ease !important;
}

.notification-drawer-backdrop.is-open { opacity: 1; }

.notification-drawer {
  position: fixed !important;
  z-index: 9999 !important;
  inset: 0 0 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(440px, 100vw) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  overflow: hidden !important;
  border: 0 !important;
  border-left: 1px solid #dce4ef !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: -18px 0 44px rgba(7, 20, 48, .12) !important;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease !important;
}

.notification-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
}

.notification-drawer-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 30px 28px 24px !important;
  border-bottom: 1px solid #e3e9f2 !important;
  background: #fff !important;
}

.notification-drawer-header h2 {
  margin: 4px 0 7px !important;
  color: #071430 !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}

.notification-drawer-header > div > p:last-child {
  max-width: 300px;
  margin: 0 !important;
  color: #63708a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.notification-kicker {
  margin: 0 !important;
  color: #0967ef !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.notification-close {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #d7e0ec !important;
  border-radius: 10px !important;
  background: #f7f9fc !important;
  color: #34415d !important;
  box-shadow: none !important;
}

.notification-close:hover {
  border-color: #b8c6d9 !important;
  background: #eef3f8 !important;
  color: #071430 !important;
  transform: none !important;
}

.notification-close svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

.notification-drawer-content {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #f7f9fc !important;
}

.notification-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  padding: 16px !important;
  border: 1px solid #dde5ef !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.notification-card[hidden] { display: none !important; }

.notification-card-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
  color: #071430 !important;
  text-decoration: none !important;
}

.notification-card-copy strong {
  overflow-wrap: anywhere;
  color: #071430 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.notification-card-copy small,
.notification-card-copy time {
  overflow-wrap: anywhere;
  color: #65728c !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.notification-card-copy time {
  margin-top: 3px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.notification-dismiss {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #526078 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.page-quote-placement-redesign .quote-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.page-quote-placement-redesign .quote-page-navigation {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.page-quote-placement-redesign .quote-page-navigation button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.page-quote-placement-redesign .quote-page-navigation button:last-child {
  border-right: 0;
}

.page-quote-placement-redesign .quote-page-navigation button:hover:not(:disabled),
.page-quote-placement-redesign .quote-page-navigation button:focus-visible {
  background: var(--blue-soft);
  color: var(--blue);
}

.page-quote-placement-redesign .quote-page-navigation button:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 680px) {
  .page-quote-placement-redesign .quote-page-actions {
    width: 100%;
    justify-content: space-between;
  }

  .page-quote-placement-redesign .quote-page-navigation {
    flex: 1 1 auto;
  }

  .page-quote-placement-redesign .quote-page-navigation button {
    flex: 1 1 50%;
  }
}

.notification-dismiss:hover {
  border-color: #b8c6d9 !important;
  background: #f3f6fa !important;
  color: #071430 !important;
  transform: none !important;
}

.notification-empty {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  padding: 72px 22px !important;
  color: #65728c !important;
  text-align: center !important;
}

.notification-empty[hidden] { display: none !important; }

.notification-empty > span {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #e6f8f0 !important;
  color: #078451 !important;
}

.notification-empty svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.notification-empty strong { color: #071430 !important; font-size: 16px !important; }
.notification-empty p { margin: 0 !important; font-size: 13px !important; }
body.notification-drawer-open { overflow: hidden !important; }

/* Operations product pass v4 */
.ops-product-main { --ink:#071630; --muted:#63708a; --line:#dce4ef; --blue:#0c6ff2; --green:#0c9863; --amber:#d8880b; --red:#e8334e; --violet:#7454d8; }
.ops-preview-lock { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; border:1px solid #ead9a6; border-radius:16px; background:#fff9e9; padding:12px 16px; }
.ops-preview-lock>div { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }.ops-preview-lock span { color:#9a6308; font-size:10px; font-weight:950; letter-spacing:.1em; }.ops-preview-lock strong { font-size:14px; }.ops-preview-lock p { margin:0; color:#6b7588; font-size:12px; }.ops-preview-lock a { color:#7c520c!important; font-size:12px; font-weight:900; text-decoration:none; white-space:nowrap; }
.ops-role-switcher { position:relative; z-index:9; margin-bottom:16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.ops-role-switcher>summary { display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; align-items:center; gap:11px; min-height:62px; padding:10px 15px; list-style:none; cursor:pointer; }.ops-role-switcher>summary::-webkit-details-marker{display:none}.ops-role-switcher summary img,.ops-role-switcher summary>i { display:grid; width:40px; height:40px; place-items:center; border-radius:12px; object-fit:cover; background:#eaf3ff; color:var(--blue); font-style:normal; font-weight:950; }.ops-role-switcher summary span { display:grid; }.ops-role-switcher summary small { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }.ops-role-switcher summary em { border-radius:999px; background:#edf3fa; padding:6px 10px; color:#45536d; font-size:11px; font-style:normal; font-weight:900; }.ops-role-switcher summary>b { color:var(--blue); font-size:12px; }
.ops-role-switcher>nav { position:absolute; top:calc(100% + 8px); right:0; left:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border:1px solid var(--line); border-radius:17px; background:#fff; padding:12px; box-shadow:0 20px 45px rgba(15,31,58,.14); }.ops-role-switcher nav a { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:9px; border-radius:12px; padding:10px; text-decoration:none; }.ops-role-switcher nav a:hover,.ops-role-switcher nav a.is-active { background:#eef5ff; }.ops-role-switcher nav img,.ops-role-switcher nav i { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; object-fit:cover; background:#eaf3ff; color:var(--blue); font-style:normal; font-weight:950; }.ops-role-switcher nav span { display:grid; }.ops-role-switcher nav small { color:var(--muted); font-size:11px; }
.ops-product-hero { --role:#173055; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:150px; overflow:hidden; border-radius:24px; background:#0a1e3e; padding:28px 30px; color:#fff; }.ops-product-hero.role-scheduler { --role:#f09832; background:linear-gradient(115deg,#712d22,#c75540); }.ops-product-hero.role-designer { --role:#8a6be8; background:linear-gradient(115deg,#30225f,#6849bd); }.ops-product-hero.role-installer { --role:#1eb886; background:linear-gradient(115deg,#10332d,#086c54); }.ops-product-person { display:flex; min-width:0; align-items:center; gap:18px; }.ops-product-person>img,.ops-product-person>i { display:grid; width:74px; height:74px; flex:0 0 74px; place-items:center; border:3px solid rgba(255,255,255,.3); border-radius:20px; object-fit:cover; background:rgba(255,255,255,.12); font-size:28px; font-style:normal; font-weight:950; }.ops-product-person p,.ops-product-person h1,.ops-product-person span { margin:0; }.ops-product-person p { color:#afd1ff; font-size:11px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }.role-scheduler .ops-product-person p { color:#ffd6b5; }.role-designer .ops-product-person p { color:#ded2ff; }.role-installer .ops-product-person p { color:#baf5e1; }.ops-product-person h1 { margin:4px 0 5px; font-size:clamp(30px,3vw,46px); line-height:1; letter-spacing:-.04em; }.ops-product-person span { color:rgba(255,255,255,.75); line-height:1.5; }.ops-product-actions { display:flex; gap:10px; flex-wrap:wrap; }.ops-product-hero .ops-button-secondary { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff!important; }.ops-product-hero .ops-button-primary { border-color:#fff; background:#fff; color:#102645!important; }
.ops-owner-overview { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:14px; margin-top:16px; }.ops-owner-primary { display:grid; align-content:center; min-height:210px; border-radius:22px; background:#eaf3ff; padding:28px; }.ops-owner-primary>strong { font-size:62px; line-height:.9; letter-spacing:-.06em; }.ops-owner-primary h2 { margin:6px 0; font-size:22px; }.ops-owner-primary>span { color:var(--muted); }.ops-signal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.ops-signal-grid article { display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:20px; background:#fff; padding:20px; }.ops-signal-grid i { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:13px; font-style:normal; font-weight:950; }.ops-signal-grid span { display:grid; min-width:0; }.ops-signal-grid small { color:var(--muted); font-size:11px; font-weight:850; }.ops-signal-grid strong { margin:2px 0; font-size:30px; }.ops-signal-grid em { color:var(--muted); font-size:11px; font-style:normal; }.signal-red i{background:#fff0f2;color:var(--red)}.signal-amber i{background:#fff5df;color:var(--amber)}.signal-green i{background:#e8f8f1;color:var(--green)}
.ops-owner-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:14px; margin-top:14px; }.ops-surface { border:1px solid var(--line); border-radius:20px; background:#fff; padding:22px; }.ops-span-2 { grid-column:1/3; }.ops-priority-surface { border-top:4px solid var(--red); }.ops-workload-list { display:grid; gap:15px; }.ops-workload-list article { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:9px 12px; }.ops-workload-list i { display:grid; width:38px; height:38px; grid-row:1/3; place-items:center; border-radius:12px; background:#eaf3ff; color:var(--blue); font-style:normal; font-weight:950; }.ops-workload-list div { display:flex; justify-content:space-between; gap:8px; }.ops-workload-list span { color:var(--muted); font-size:12px; }.ops-workload-list b { grid-column:2; height:6px; overflow:hidden; border-radius:999px; background:#edf1f6; }.ops-workload-list u { display:block; width:var(--load); height:100%; border-radius:inherit; background:var(--blue); text-decoration:none; }
.ops-dispatch-strip,.ops-designer-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }.ops-dispatch-strip article,.ops-designer-summary article { border:1px solid var(--line); border-radius:18px; background:#fff; padding:18px 20px; }.ops-dispatch-strip small,.ops-designer-summary small { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }.ops-dispatch-strip strong,.ops-designer-summary strong { display:block; margin:4px 0; font-size:32px; }.ops-dispatch-strip span,.ops-designer-summary span { color:var(--muted); font-size:12px; }.ops-dispatch-strip .has-alert { border-color:#f2b3bc; background:#fff2f4; }.ops-scheduler-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); gap:14px; margin-top:14px; }.ops-route-origin { display:flex; align-items:center; gap:12px; border-radius:14px; background:#fff3e6; padding:13px; }.ops-route-origin>i { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#fff; color:#c55c1c; font-style:normal; }.ops-route-origin>div { display:grid; }.ops-route-origin small,.ops-route-origin span { color:var(--muted); font-size:11px; }.ops-dispatch-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:13px; }.ops-dispatch-columns>section { border-radius:15px; background:#f6f8fb; padding:12px; }.ops-dispatch-columns header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }.ops-dispatch-columns header>i { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; background:#fff; color:#c05c20; font-style:normal; font-weight:900; }.ops-dispatch-columns header>div { display:grid; }.ops-dispatch-columns header span,.ops-dispatch-columns>section>p { color:var(--muted); font-size:11px; }.ops-dispatch-columns a { display:grid; grid-template-columns:auto 1fr; gap:8px; margin-top:7px; border-left:4px solid #e67f3b; border-radius:10px; background:#fff; padding:10px; text-decoration:none; }.ops-dispatch-columns time { color:#b7551b; font-size:11px; font-weight:950; }.ops-dispatch-columns a div { display:grid; }.ops-dispatch-columns a span { color:var(--muted); font-size:11px; }.ops-unassigned-queue>a { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; border-top:1px solid #edf0f4; padding:13px 2px; text-decoration:none; }.ops-unassigned-queue>a>i { display:grid; width:36px; height:36px; place-items:center; border-radius:11px; background:#fff3e4; color:#b45418; font-style:normal; font-weight:950; }.ops-unassigned-queue>a>div { display:grid; }.ops-unassigned-queue span,.ops-unassigned-queue small { color:var(--muted); font-size:11px; }.ops-unassigned-queue>a>b { color:#b45418; font-size:11px; }
.ops-designer-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }.ops-designer-summary article:first-child{background:#f1edff;border-color:#ddd2ff}.ops-designer-summary article.warm{background:#fff5e8;border-color:#f2dab8}.ops-designer-summary article.cool{background:#eaf5ff;border-color:#cee2f6}.ops-pipeline-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:14px; }.ops-pipeline-board>article { border-radius:19px; background:#eef4fb; padding:12px; }.ops-pipeline-board header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 4px 11px; }.ops-pipeline-board header span { font-size:12px; font-weight:900; }.ops-pipeline-board header b { display:grid; min-width:24px; height:24px; place-items:center; border-radius:999px; background:#fff; font-size:11px; }.ops-pipeline-board>article>div { display:grid; gap:8px; }.ops-pipeline-board a { display:grid; grid-template-columns:34px 1fr; gap:3px 9px; border:1px solid rgba(10,30,60,.08); border-radius:13px; background:#fff; padding:11px; text-decoration:none; }.ops-pipeline-board a>i { display:grid; width:34px; height:34px; grid-row:1/4; place-items:center; border-radius:10px; background:#edf3ff; color:var(--blue); font-style:normal; font-weight:950; }.ops-pipeline-board a strong,.ops-pipeline-board a small,.ops-pipeline-board a em { grid-column:2; }.ops-pipeline-board a small,.ops-pipeline-board a em { color:var(--muted); font-size:10px; font-style:normal; }.ops-pipeline-board>article>div>p { margin:8px; color:var(--muted); font-size:12px; }.ops-pipeline-board .pipeline-violet{background:#f2eeff}.ops-pipeline-board .pipeline-amber{background:#fff6e7}.ops-pipeline-board .pipeline-green{background:#eaf8f2}.ops-designer-lower { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.ops-installer-command { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:14px; margin-top:16px; }.ops-next-job { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) minmax(220px,.55fr); gap:22px; overflow:hidden; border-radius:24px; background:#082b25; padding:28px 28px 74px; color:#fff; }.ops-next-job-time { display:grid; align-content:start; min-width:100px; }.ops-next-job-time small,.ops-next-job aside small { color:#9de1ca; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.ops-next-job-time strong { margin:4px 0; font-size:34px; }.ops-next-job-time span { color:#c2ded5; }.ops-next-job-main p { margin:0; color:#f2c45e; font-size:10px; font-weight:950; letter-spacing:.1em; }.ops-next-job-main h2 { margin:5px 0; font-size:36px; letter-spacing:-.04em; }.ops-next-job-main>span { color:#c6ddd6; }.ops-next-job-main>div { display:flex; gap:8px; margin-top:17px; }.ops-next-job-main a { border:1px solid rgba(255,255,255,.25); border-radius:11px; padding:10px 12px; color:#fff!important; font-size:12px; font-weight:900; text-decoration:none; }.ops-next-job aside { display:grid; align-content:start; gap:5px; border-left:1px solid rgba(255,255,255,.16); padding-left:20px; }.ops-next-job aside span { margin-bottom:12px; color:#c6ddd6; font-size:12px; }.ops-open-brief { position:absolute; right:0; bottom:0; left:0; padding:17px 28px; background:rgba(255,255,255,.1); color:#fff!important; font-weight:900; text-decoration:none; }.ops-next-job.is-empty { display:block; padding-bottom:28px; }.ops-field-day { border:1px solid var(--line); border-radius:22px; background:#fff; padding:22px; }.ops-field-day h2 { margin:4px 0 14px; }.ops-field-day ol { display:grid; gap:5px; margin:0; padding:0; list-style:none; }.ops-field-day li { display:grid; grid-template-columns:30px 1fr; gap:9px; padding:8px; }.ops-field-day li>i { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:#edf2f7; color:#6d7890; font-size:11px; font-style:normal; font-weight:900; }.ops-field-day li.is-current { border-radius:11px; background:#e8f8f2; }.ops-field-day li.is-current>i,.ops-field-day li.is-done>i { background:var(--green); color:#fff; }.ops-field-day li div { display:grid; }.ops-field-day li span { color:var(--muted); font-size:11px; }.ops-installer-mobile-help { display:flex; align-items:center; gap:12px; margin-top:12px; border-radius:14px; background:#fff3df; padding:13px 16px; }.ops-installer-mobile-help span { color:#6d6457; font-size:12px; }
.ops-product-directory { margin-top:16px; }.ops-product-directory .ops-section-heading { margin-bottom:14px; }
.ops-project-next-action { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:15px; border-radius:18px; background:#0a2245; padding:18px 21px; color:#fff; }.ops-project-next-action>div { display:grid; gap:2px; }.ops-project-next-action small { color:#9fc5f7; font-size:10px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }.ops-project-next-action strong { font-size:21px; }.ops-project-next-action span { color:#c7d4e7; font-size:12px; }.ops-project-next-action button { border:1px solid rgba(255,255,255,.26); border-radius:11px; background:rgba(255,255,255,.1); padding:10px 13px; color:#fff; font-weight:900; cursor:pointer; }
.ops-installer-mobile-nav { display:none; }
@media(max-width:1300px){.ops-signal-grid{grid-template-columns:1fr}.ops-signal-grid article{padding:13px}.ops-scheduler-grid,.ops-installer-command{grid-template-columns:1fr}.ops-pipeline-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){.ops-owner-overview,.ops-owner-grid,.ops-designer-lower{grid-template-columns:1fr}.ops-span-2{grid-column:1}.ops-dispatch-columns{grid-template-columns:1fr}.ops-product-hero{align-items:flex-start;flex-direction:column}.ops-product-actions{width:100%}.ops-product-actions>*{flex:1}.ops-role-switcher>nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ops-preview-lock{align-items:flex-start;flex-direction:column;gap:7px}.ops-preview-lock>div{display:grid}.ops-role-switcher>summary{grid-template-columns:40px 1fr auto}.ops-role-switcher summary>b{display:none}.ops-role-switcher>nav{grid-template-columns:1fr}.ops-product-hero{min-height:0;padding:21px 18px}.ops-product-person{align-items:flex-start}.ops-product-person>img,.ops-product-person>i{width:54px;height:54px;flex-basis:54px;border-radius:15px}.ops-product-person h1{font-size:30px}.ops-owner-overview{grid-template-columns:1fr}.ops-signal-grid{grid-template-columns:1fr}.ops-dispatch-strip,.ops-designer-summary,.ops-pipeline-board{grid-template-columns:1fr}.ops-next-job{grid-template-columns:1fr;padding:22px 18px 70px}.ops-next-job aside{border-top:1px solid rgba(255,255,255,.16);border-left:0;padding-top:14px;padding-left:0}.ops-next-job-main h2{font-size:30px}.ops-installer-mobile-nav{position:fixed;z-index:70;right:8px;bottom:78px;left:8px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d7e1ed;border-radius:16px;background:#fff;padding:6px;box-shadow:0 12px 30px rgba(7,20,48,.16)}.ops-installer-mobile-nav a{display:grid;place-items:center;gap:2px;min-height:48px;border-radius:10px;color:#65728a!important;font-size:10px;font-weight:850;text-decoration:none}.ops-installer-mobile-nav a.is-active{background:#e8f8f2;color:#087856!important}.ops-project-next-action{align-items:flex-start;flex-direction:column}.ops-project-next-action button{width:100%}}
@media(max-width:480px){.ops-product-person{display:grid;grid-template-columns:auto 1fr}.ops-product-person>div{min-width:0}.ops-product-person>span{font-size:13px}.ops-owner-primary>strong{font-size:50px}.ops-next-job-main>div{display:grid}.ops-role-switcher summary em{display:none}}

@media (max-width: 560px) {
  .notification-drawer { width: 100vw !important; }
  .notification-drawer-header { padding: 22px 18px 18px !important; }
  .notification-drawer-header h2 { font-size: 27px !important; }
  .notification-drawer-content { padding: 12px !important; }
  .notification-card { padding: 14px !important; }
}

/* Final responsive shell correction: five equal mobile destinations and no pink page wash. */
body:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign,
  .page-contract-detail-redesign
) :is(.contract-app, .costco-platform-shell) {
  background: #f6f8fc !important;
}

@media (max-width: 920px) {
  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) .mobile-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 7px !important;
  }

  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) .mobile-nav a {
    min-height: 58px !important;
    padding: 7px 2px !important;
  }

  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) .mobile-nav span {
    overflow: hidden;
    font-size: 10px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-legacy-shell .monday-header,
  .page-legacy-shell .admin-mode-banner,
  .page-legacy-shell .platform-switcher-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .page-legacy-shell .monday-header :is(.monday-primary, .monday-secondary),
  .page-legacy-shell .admin-mode-banner a,
  .page-legacy-shell .platform-switcher-bar a {
    width: 100% !important;
    min-height: 46px;
    justify-content: center;
    box-sizing: border-box;
  }

  .page-legacy-shell .settings-subnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .page-legacy-shell .settings-subnav a {
    display: flex;
    min-width: 0 !important;
    justify-content: center;
  }
}

/* v73 complete Buxton wordmark and single column mobile metrics. */
.buxton-brand,
.buxton-auth-brand,
.buxton-signing-brand,
.buxton-email-preview-brand,
.buxton-mobile-brand {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  background: transparent;
}

.buxton-brand {
  max-width: 210px;
  padding: 11px 12px;
}

.buxton-brand img,
.monday-sidebar .sidebar-brand .buxton-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.buxton-mobile-strip {
  justify-content: center;
  min-height: 66px;
  background: #fff;
}

.buxton-mobile-strip img {
  display: block;
  width: min(190px, 66vw);
  height: auto;
  object-fit: contain;
}

.buxton-mobile-brand {
  width: 176px;
  padding: 7px 9px;
}

.buxton-mobile-brand img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.costco-auth-page .costco-auth-brand {
  width: 100%;
}

.buxton-auth-brand {
  max-width: 290px;
  margin: 0 auto;
  padding: 16px 18px;
}

.buxton-auth-brand img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.buxton-signing-brand {
  max-width: 240px;
  padding: 12px 14px;
}

.buxton-signing-brand img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.buxton-email-preview-brand {
  max-width: 230px;
  padding: 12px 14px;
}

.buxton-email-preview-brand img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.buxton-full-email-logo {
  width: min(100%, 230px) !important;
  height: auto !important;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 600px) {
  .page-dashboard-redesign .sales-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .page-dashboard-redesign .sales-kpi-card {
    width: 100%;
    min-height: 138px;
  }

  .buxton-auth-brand {
    max-width: 250px;
  }

  .buxton-signing-brand {
    max-width: 210px;
  }
}

/* v74 compact contract actions on mobile. */
.contract-action-menu > summary {
  display: none;
}

.contract-action-menu:not([open]) > .action-stack {
  display: grid;
}

@media (max-width: 760px) {
  .page-dashboard-redesign .table-wrap {
    overflow: visible !important;
  }

  .page-dashboard-redesign .contracts-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-dashboard-redesign .contracts-table tr.dashboard-contract-row {
    width: 100% !important;
  }

  .page-dashboard-redesign .contracts-table .actions-cell,
  .page-dashboard-redesign .contracts-table :is(td, th):last-child {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
  }

  .page-dashboard-redesign .contract-action-menu {
    width: 100%;
  }

  .page-dashboard-redesign .contract-action-menu > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid #cfd9e7;
    border-radius: 11px;
    background: #fff;
    color: #071430;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    list-style: none;
  }

  .page-dashboard-redesign .contract-action-menu > summary::-webkit-details-marker {
    display: none;
  }

  .page-dashboard-redesign .contract-action-menu > summary span {
    width: 9px;
    height: 9px;
    border-right: 2px solid #0868b8;
    border-bottom: 2px solid #0868b8;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
  }

  .page-dashboard-redesign .contract-action-menu[open] > summary span {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .page-dashboard-redesign .contract-action-menu:not([open]) > .action-stack {
    display: none !important;
  }

  .page-dashboard-redesign .contract-action-menu[open] > .action-stack {
    display: grid !important;
    width: 100%;
    gap: 7px;
    margin-top: 8px;
  }

  .page-dashboard-redesign .contract-action-menu .dashboard-action-form,
  .page-dashboard-redesign .contract-action-menu .row-action {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
}

/* v75 contract activity drawer. */
.page-dashboard-redesign .timeline-cell {
  align-content: center;
}

.page-dashboard-redesign .timeline-history-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0868b8;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.page-dashboard-redesign .timeline-history-button:hover {
  color: #004f91;
}

.page-dashboard-redesign .timeline-history-button:focus-visible {
  outline: 3px solid rgba(8, 104, 184, 0.2);
  outline-offset: 4px;
  border-radius: 4px;
}

.page-dashboard-redesign .timeline-history-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.activity-drawer-shell[hidden] {
  display: none !important;
}

.activity-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  justify-items: end;
}

.activity-drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(7, 20, 48, 0.36);
  cursor: default;
}

.activity-drawer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(440px, 100vw);
  height: 100dvh;
  border-left: 1px solid #dce3ed;
  background: #fff;
  color: #071430;
  box-shadow: -18px 0 48px rgba(7, 20, 48, 0.12);
  animation: activity-drawer-enter 180ms ease-out both;
}

.activity-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.activity-drawer-header h2 {
  margin: 0;
  color: #071430;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.activity-drawer-header p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
  color: #5b6685;
  font-size: 13px;
  font-weight: 750;
}

.activity-drawer-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff2dc;
  color: #925500;
  font-size: 12px;
  font-weight: 900;
}

.activity-drawer-status[data-status="signed"] {
  background: #e5f9ef;
  color: #057748;
}

.activity-drawer-status[data-status="email_issue"] {
  background: #fff0f3;
  color: #c8002b;
}

.activity-drawer-status[data-status="expired"] {
  background: #eef1f5;
  color: #536078;
}

.activity-drawer-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 10px;
  background: #ed002f !important;
  color: #fff !important;
  cursor: pointer;
  line-height: 0;
}

.activity-drawer-close:hover {
  background: #c90028 !important;
  color: #fff !important;
}

.activity-drawer-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.activity-drawer-scroll {
  overflow-y: auto;
  padding: 22px 24px 30px;
  overscroll-behavior: contain;
}

.activity-attention-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #f2c36c;
  border-radius: 13px;
  background: #fffaf0;
  color: #7b4600;
}

.activity-attention-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #aa6500;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-weight: 900;
}

.activity-attention-card strong {
  display: block;
  margin-bottom: 6px;
  color: #8a4e00;
  font-size: 14px;
  font-weight: 950;
}

.activity-attention-card p {
  margin: 0;
  color: #6f5a3c;
  font-size: 13px;
  line-height: 1.55;
}

.activity-drawer-heading {
  margin-bottom: 18px;
  color: #071430;
  font-size: 14px;
  font-weight: 950;
}

.activity-history-groups {
  display: grid;
  gap: 26px;
}

.activity-history-group h3 {
  margin: 0 0 15px;
  color: #071430;
  font-size: 13px;
  font-weight: 950;
}

.activity-history-list {
  display: grid;
}

.activity-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 58px;
  padding-bottom: 14px;
}

.activity-history-item:last-child {
  min-height: 42px;
  padding-bottom: 0;
}

.activity-history-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf4ff;
  color: #0868d8;
}

.activity-history-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.activity-kind-email .activity-history-icon,
.activity-level-success .activity-history-icon {
  background: #e7f9f0;
  color: #07965a;
}

.activity-kind-signed .activity-history-icon,
.activity-kind-signature .activity-history-icon {
  background: #edeaff;
  color: #7048e8;
}

.activity-kind-error .activity-history-icon,
.activity-level-error .activity-history-icon {
  background: #fff0f3;
  color: #df0734;
}

.activity-history-rail {
  position: absolute;
  z-index: 1;
  top: 31px;
  bottom: -2px;
  left: 16px;
  width: 1px;
  background: #d9e1ec;
}

.activity-history-item:last-child .activity-history-rail {
  display: none;
}

.activity-history-copy {
  min-width: 0;
  padding-top: 5px;
}

.activity-history-copy strong {
  display: block;
  color: #17233b;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.activity-history-copy p,
.activity-history-copy small {
  display: block;
  margin: 3px 0 0;
  color: #69758d;
  font-size: 11px;
  line-height: 1.45;
}

.activity-history-item time {
  padding-top: 6px;
  color: #4e5b73;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.activity-history-empty {
  padding: 34px 18px;
  border: 1px dashed #cfd8e6;
  border-radius: 13px;
  color: #65718a;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

body.activity-drawer-open {
  overflow: hidden;
}

@keyframes activity-drawer-enter {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 760px) {
  .page-dashboard-redesign .timeline-history-button {
    min-height: 40px;
    margin-top: 10px;
  }

  .activity-drawer {
    width: 100vw;
    border-left: 0;
  }

  .activity-drawer-header {
    padding: 18px 18px 16px;
  }

  .activity-drawer-header h2 {
    font-size: 18px;
  }

  .activity-drawer-scroll {
    padding: 18px 18px 26px;
  }

  .activity-history-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .activity-history-item time {
    grid-column: 2;
    padding-top: 0;
  }
}

/* v76 content aware dashboard columns. */
@media (min-width: 921px) {
  .page-dashboard-redesign .table-wrap {
    overflow-x: auto !important;
  }

  .page-dashboard-redesign .contracts-table {
    width: 100% !important;
    min-width: 1090px !important;
    table-layout: auto !important;
  }

  .page-dashboard-redesign .contracts-table :is(th, td):nth-child(1) {
    width: clamp(215px, 18vw, 310px) !important;
    min-width: 215px !important;
    max-width: 310px !important;
  }

  .page-dashboard-redesign .contracts-table :is(th, td):nth-child(2) {
    width: clamp(100px, 8vw, 130px) !important;
    min-width: 100px !important;
    max-width: 130px !important;
  }

  .page-dashboard-redesign .contracts-table :is(th, td):nth-child(3) {
    width: clamp(220px, 20vw, 360px) !important;
    min-width: 220px !important;
    max-width: 360px !important;
    overflow-wrap: anywhere;
  }

  .page-dashboard-redesign .contracts-table :is(th, td):nth-child(4) {
    width: clamp(105px, 8vw, 130px) !important;
    min-width: 105px !important;
    max-width: 130px !important;
  }

  .page-dashboard-redesign .contracts-table :is(th, td):nth-child(5) {
    width: clamp(260px, 22vw, 380px) !important;
    min-width: 260px !important;
    max-width: 380px !important;
  }

  .page-dashboard-redesign .contracts-table :is(th, td):nth-child(6) {
    width: clamp(190px, 15vw, 230px) !important;
    min-width: 190px !important;
    max-width: 230px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .activity-drawer {
    animation: none;
  }
}

/* v77 readable dashboard typography at every breakpoint. */
.page-dashboard-redesign .sales-greeting {
  font-size: clamp(15px, 1vw, 17px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.page-dashboard-redesign .sales-overview-head h2 {
  font-size: clamp(34px, 3vw, 48px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}

.page-dashboard-redesign .sales-overview-meta {
  font-size: clamp(13px, 0.9vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
  line-height: 1.45;
}

.page-dashboard-redesign .sales-period-toggle button {
  min-height: 44px !important;
  padding-inline: clamp(16px, 1.4vw, 24px) !important;
  font-size: clamp(14px, 0.9vw, 16px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
}

.page-dashboard-redesign .sales-kpi-card {
  min-height: 168px !important;
  padding: 22px 70px 20px 24px !important;
}

.page-dashboard-redesign .sales-kpi-card > span:not(.sales-kpi-icon) {
  max-width: calc(100% - 38px) !important;
  font-size: clamp(12px, 0.75vw, 14px) !important;
  letter-spacing: 0.045em !important;
  line-height: 1.3;
}

.page-dashboard-redesign .sales-kpi-card > strong {
  margin-top: 12px !important;
  font-size: clamp(30px, 2.5vw, 42px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

.page-dashboard-redesign .sales-kpi-card > p {
  flex-wrap: wrap;
  margin-top: 18px !important;
}

.page-dashboard-redesign .sales-kpi-card small {
  font-size: clamp(12px, 0.72vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.page-dashboard-redesign .sales-kpi-card .sales-change-badge {
  padding: 5px 8px !important;
  font-size: clamp(12px, 0.72vw, 13px) !important;
  line-height: 1.2;
}

.activity-drawer-header {
  padding: 20px 22px 18px;
}

.activity-drawer-header h2 {
  font-size: clamp(20px, 1.5vw, 23px);
}

.activity-drawer-header p,
.activity-drawer-status,
.activity-drawer-heading,
.activity-history-group h3,
.activity-history-copy strong {
  font-size: 14px;
}

.activity-history-copy p,
.activity-history-copy small,
.activity-history-item time {
  font-size: 12px;
  line-height: 1.5;
}

.activity-attention-card {
  gap: 11px;
  margin-bottom: 22px;
  padding: 14px 15px;
}

.activity-attention-card strong {
  font-size: 14px;
}

.activity-attention-card p {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .page-dashboard-redesign .sales-kpi-card {
    min-height: 158px !important;
  }
}

@media (max-width: 700px) {
  .page-dashboard-redesign .sales-overview-head {
    gap: 18px !important;
  }

  .page-dashboard-redesign .sales-overview-head h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }

  .page-dashboard-redesign .sales-period-toggle button {
    padding-inline: 10px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 600px) {
  .page-dashboard-redesign .sales-kpi-card {
    min-height: 150px !important;
    padding: 20px 64px 18px 20px !important;
  }

  .page-dashboard-redesign .sales-kpi-card > span:not(.sales-kpi-icon) {
    font-size: 12px !important;
  }

  .page-dashboard-redesign .sales-kpi-card > strong {
    font-size: clamp(30px, 10vw, 38px) !important;
  }

  .page-dashboard-redesign .sales-kpi-card small,
  .page-dashboard-redesign .sales-kpi-card .sales-change-badge {
    font-size: 12px !important;
  }

  .activity-drawer-header {
    padding: 16px 16px 15px;
  }

  .activity-drawer-header h2 {
    font-size: 20px;
  }
}

/* v78 consistent dashboard history and action controls. */
.page-dashboard-redesign .timeline-history-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: min(100%, 156px);
  min-height: 40px;
  margin: 16px 0 0 !important;
  padding: 9px 14px !important;
  border: 1px solid #b9cee4 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0868b8 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2;
  box-sizing: border-box;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.page-dashboard-redesign .timeline-history-button:hover {
  border-color: #0868b8 !important;
  background: #f2f8ff !important;
  color: #00569c !important;
}

.page-dashboard-redesign .timeline-history-button:focus-visible {
  outline: 3px solid rgba(8, 104, 184, 0.2);
  outline-offset: 2px;
}

.page-dashboard-redesign .timeline-history-button svg {
  width: 16px;
  height: 16px;
}

.page-dashboard-redesign .contract-action-menu {
  width: 100%;
}

.page-dashboard-redesign .contract-action-menu > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid #b9cee4;
  border-radius: 10px;
  background: #fff;
  color: #071430;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  list-style: none;
  box-sizing: border-box;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.page-dashboard-redesign .contract-action-menu > summary:hover {
  border-color: #0868b8;
  background: #f7fbff;
}

.page-dashboard-redesign .contract-action-menu > summary::-webkit-details-marker {
  display: none;
}

.page-dashboard-redesign .contract-action-menu > summary span {
  width: 9px;
  height: 9px;
  border-right: 2px solid #0868b8;
  border-bottom: 2px solid #0868b8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.page-dashboard-redesign .contract-action-menu[open] > summary span {
  transform: rotate(225deg) translate(-2px, -2px);
}

.page-dashboard-redesign .contract-action-menu:not([open]) > .action-stack {
  display: none !important;
}

.page-dashboard-redesign .contract-action-menu[open] > .action-stack {
  display: grid !important;
  width: 100%;
  gap: 7px;
  margin-top: 8px;
}

.page-dashboard-redesign .contract-action-menu .dashboard-action-form,
.page-dashboard-redesign .contract-action-menu .row-action {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .page-dashboard-redesign .timeline-history-button {
    width: 100%;
  }

  .page-dashboard-redesign .contract-action-menu > summary {
    min-height: 46px;
    padding: 11px 14px;
  }
}

/* v79 desktop action stack and compact history link. */
.page-dashboard-redesign .timeline-history-button {
  width: auto !important;
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.page-dashboard-redesign .timeline-history-button:hover {
  border: 0 !important;
  background: transparent !important;
  color: #004f91 !important;
}

.page-dashboard-redesign .timeline-history-button svg {
  width: 14px;
  height: 14px;
}

.page-dashboard-redesign .contract-action-menu > summary {
  display: none !important;
}

.page-dashboard-redesign .contract-action-menu:not([open]) > .action-stack,
.page-dashboard-redesign .contract-action-menu[open] > .action-stack {
  display: grid !important;
  margin-top: 0;
}

@media (max-width: 760px) {
  .page-dashboard-redesign .contract-action-menu > summary {
    display: flex !important;
  }

  .page-dashboard-redesign .contract-action-menu:not([open]) > .action-stack {
    display: none !important;
  }

  .page-dashboard-redesign .contract-action-menu[open] > .action-stack {
    display: grid !important;
    margin-top: 8px;
  }
}

/* v81 preserve the original transparent Buxton Sign artwork. */
:is(
  .buxton-brand,
  .buxton-auth-brand,
  .buxton-signing-brand,
  .buxton-email-preview-brand,
  .buxton-mobile-brand,
  .offer-brand
) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(
  .buxton-brand,
  .buxton-auth-brand,
  .buxton-signing-brand,
  .buxton-email-preview-brand,
  .buxton-mobile-brand,
  .offer-brand
) img,
.buxton-full-email-logo {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* v82 modern two panel sign in experience. */
.modern-signin-page {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #fff !important;
  background-image: none !important;
  color: #071430;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.modern-signin-page *,
.modern-signin-page *::before,
.modern-signin-page *::after {
  box-sizing: border-box;
}

.modern-signin-page::before {
  display: none;
  content: none;
}

.modern-signin-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(28px, 5vh, 58px) 0 28px;
}

.modern-signin-card {
  display: grid;
  grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
  min-height: min(820px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid #e0e7f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}

.modern-signin-welcome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(54px, 5vw, 76px) clamp(42px, 5vw, 84px) 145px;
  border-right: 1px solid #e2e8f1;
  background: #fff;
}

.modern-signin-logo {
  display: inline-flex;
  width: min(100%, 315px);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-signin-logo img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-welcome-copy {
  margin-top: clamp(44px, 5vh, 58px);
}

.modern-welcome-copy h1 {
  margin: 0;
  color: #071430;
  font-size: clamp(43px, 4.1vw, 60px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.modern-title-line {
  display: block;
  width: min(270px, 72%);
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: #0b64ed;
  transform: rotate(-1deg);
}

.modern-welcome-copy p {
  margin: 26px 0 0;
  color: #52678e;
  font-size: 20px;
  font-weight: 550;
  line-height: 1.5;
}

.modern-benefit-list {
  display: grid;
  gap: 24px;
  margin-top: 36px;
}

.modern-benefit-list article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.modern-benefit-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: #eaf1ff;
  color: #095ee9;
}

.modern-benefit-icon svg,
.modern-secure-badge svg,
.modern-input-wrap > svg,
.modern-password-toggle svg,
.modern-access-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modern-benefit-icon svg {
  width: 30px;
  height: 30px;
}

.modern-benefit-list article > span:last-child {
  display: grid;
  gap: 5px;
}

.modern-benefit-list strong {
  color: #111c34;
  font-size: 16px;
  font-weight: 900;
}

.modern-benefit-list small {
  max-width: 310px;
  color: #536b98;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.45;
}

.modern-wave-art {
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -65px;
  left: -8%;
  height: 210px;
  pointer-events: none;
}

.modern-wave-art::before,
.modern-wave-art::after,
.modern-wave-art i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 170px;
  border-radius: 50% 58% 0 0;
  content: "";
  transform-origin: center bottom;
}

.modern-wave-art::before {
  background: linear-gradient(125deg, rgba(17, 77, 244, 0.95), rgba(68, 137, 255, 0.58));
  transform: rotate(7deg) scale(1.12, 0.82);
}

.modern-wave-art::after {
  background: linear-gradient(120deg, rgba(8, 98, 240, 0.82), rgba(113, 114, 255, 0.20));
  transform: translateY(-20px) rotate(-7deg) scale(1.08, 0.72);
}

.modern-wave-art i:nth-child(1) {
  background: linear-gradient(115deg, rgba(0, 184, 236, 0.42), rgba(98, 108, 255, 0.10));
  transform: translateY(-45px) rotate(10deg) scale(1.13, 0.58);
}

.modern-wave-art i:nth-child(2) {
  height: 130px;
  border-top: 2px solid rgba(54, 92, 245, 0.22);
  background: transparent;
  transform: translateY(-68px) rotate(-5deg) scale(1.08, 0.55);
}

.modern-wave-art i:nth-child(3) {
  height: 112px;
  border-top: 1px solid rgba(0, 176, 231, 0.25);
  background: transparent;
  transform: translateY(-84px) rotate(7deg) scale(1.12, 0.58);
}

.modern-signin-form-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(70px, 7vw, 110px) clamp(52px, 7vw, 105px) clamp(58px, 6vw, 88px);
  background: #fff;
}

.modern-secure-badge {
  position: absolute;
  top: 44px;
  right: clamp(40px, 5vw, 72px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid #dce4ef;
  background: #fff;
  color: #075de8;
  font-size: 13px;
  font-weight: 850;
}

.modern-secure-badge svg {
  width: 18px;
  height: 18px;
}

.modern-form-heading h2 {
  margin: 0;
  color: #071430;
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.modern-form-heading p {
  margin: 10px 0 0;
  color: #52678e;
  font-size: 18px;
  font-weight: 550;
}

.modern-signin-notices {
  margin-top: 24px;
}

.modern-signin-form {
  display: grid;
  gap: 28px;
  margin-top: 42px;
}

.modern-signin-field {
  display: grid;
  gap: 11px;
}

.modern-signin-field label {
  color: #111c34;
  font-size: 14px;
  font-weight: 900;
}

.modern-input-wrap {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 58px;
  padding: 0 17px;
  border: 1px solid #cbd6e5;
  border-radius: 10px;
  background: #fff !important;
  color: #657b9e;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.modern-input-wrap:focus-within {
  border-color: #0967ef;
  box-shadow: 0 0 0 4px rgba(9, 103, 239, 0.10);
}

.modern-input-wrap > svg {
  width: 21px;
  height: 21px;
}

.modern-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #17233b !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 15px !important;
  font-weight: 650;
}

.modern-input-wrap input::placeholder {
  color: #8190a8;
  opacity: 1;
}

.modern-password-toggle {
  display: grid;
  place-items: center;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #63799b !important;
  box-shadow: none !important;
  cursor: pointer;
}

.modern-password-toggle:hover {
  background: #eef4ff !important;
  color: #075de8 !important;
}

.modern-password-toggle svg {
  width: 22px;
  height: 22px;
}

.modern-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: -6px;
  color: #63728e;
  font-size: 13px;
  font-weight: 600;
}

.modern-form-options label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.modern-form-options input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0967ef;
}

.modern-form-options a {
  color: #075de8;
  font-weight: 750;
  text-decoration: none;
}

.modern-form-options a:hover {
  text-decoration: underline;
}

.modern-signin-submit {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100% !important;
  min-height: 62px !important;
  padding: 13px 25px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(100deg, #084bd6, #0a70ff) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 19px !important;
  font-weight: 850 !important;
  transition: transform 150ms ease, filter 150ms ease;
}

.modern-signin-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.modern-signin-submit > span {
  font-size: 27px;
  font-weight: 450;
  line-height: 1;
}

.modern-new-user-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 34px 0;
  color: #617291;
  font-size: 13px;
  font-weight: 650;
}

.modern-new-user-divider::before,
.modern-new-user-divider::after {
  height: 1px;
  background: #dce4ef;
  content: "";
}

.modern-access-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #dce4ef;
  border-radius: 11px;
  background: #fff;
}

.modern-access-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #075de8;
}

.modern-access-icon svg {
  width: 28px;
  height: 28px;
}

.modern-access-card > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.modern-access-card strong {
  color: #17233b;
  font-size: 13px;
  font-weight: 900;
}

.modern-access-card small {
  max-width: 280px;
  color: #62728f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.modern-access-card > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid #cbd6e5;
  border-radius: 8px;
  background: #fff;
  color: #17233b;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.modern-access-card > a:hover {
  border-color: #0967ef;
  color: #075de8;
}

.modern-signin-footer {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #657697;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.modern-signin-footer p {
  margin: 0;
}

.modern-signin-footer nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.modern-signin-footer a {
  color: #075de8;
  font-weight: 750;
  text-decoration: none;
}

.modern-signin-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 1050px) {
  .modern-signin-card {
    grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr);
  }

  .modern-signin-welcome {
    padding-inline: 42px;
  }

  .modern-signin-form-panel {
    padding-inline: 52px;
  }

  .modern-benefit-list small {
    font-size: 13px;
  }
}

@media (max-width: 1180px) {
  .modern-signin-shell {
    width: min(100% - 32px, 820px);
    padding-top: 18px;
  }

  .modern-signin-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .modern-signin-welcome {
    padding: 34px 30px 86px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f1;
  }

  .modern-signin-logo {
    width: min(100%, 250px);
  }

  .modern-welcome-copy {
    margin-top: 34px;
  }

  .modern-welcome-copy h1 {
    font-size: clamp(38px, 8vw, 50px);
  }

  .modern-welcome-copy p {
    margin-top: 22px;
    font-size: 17px;
  }

  .modern-benefit-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 32px;
  }

  .modern-benefit-list article {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .modern-benefit-icon {
    width: 42px;
    height: 42px;
  }

  .modern-benefit-icon svg {
    width: 22px;
    height: 22px;
  }

  .modern-benefit-list strong {
    font-size: 12px;
  }

  .modern-benefit-list small {
    display: none;
  }

  .modern-wave-art {
    height: 110px;
    bottom: -62px;
  }

  .modern-signin-form-panel {
    padding: 90px 30px 38px;
  }

  .modern-secure-badge {
    top: 28px;
    right: 30px;
  }
}

@media (max-width: 520px) {
  .modern-signin-shell {
    width: 100%;
    gap: 18px;
    padding: 0;
  }

  .modern-signin-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .modern-signin-welcome {
    padding: 24px 20px 28px;
  }

  .modern-signin-logo {
    width: 210px;
  }

  .modern-welcome-copy {
    margin-top: 28px;
  }

  .modern-welcome-copy h1 {
    font-size: 40px;
  }

  .modern-welcome-copy p {
    margin-top: 16px;
    font-size: 16px;
  }

  .modern-title-line {
    height: 5px;
  }

  .modern-benefit-list {
    display: none;
  }

  .modern-benefit-list article {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .modern-benefit-list strong {
    font-size: 13px;
  }

  .modern-signin-form-panel {
    padding: 82px 20px 34px;
  }

  .modern-wave-art {
    display: none;
  }

  .modern-secure-badge {
    top: 22px;
    right: 20px;
  }

  .modern-form-heading h2 {
    font-size: 29px;
  }

  .modern-form-heading p {
    font-size: 15px;
  }

  .modern-signin-form {
    gap: 22px;
    margin-top: 32px;
  }

  .modern-form-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .modern-access-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .modern-access-card > a {
    grid-column: 1 / -1;
    width: 100%;
  }

  .modern-signin-footer {
    padding: 0 20px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modern-signin-page *,
  .modern-signin-page *::before,
  .modern-signin-page *::after {
    transition-duration: 0.01ms !important;
  }
}

/* v83 isolate modern sign in controls from legacy form styles. */
.modern-signin-page .modern-input-wrap > input#email,
.modern-signin-page .modern-input-wrap > input#password {
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* v84 keep browser autofill white and stack the sign in layout before it becomes cramped. */
.modern-signin-page .modern-input-wrap input:-webkit-autofill,
.modern-signin-page .modern-input-wrap input:-webkit-autofill:hover,
.modern-signin-page .modern-input-wrap input:-webkit-autofill:focus,
.modern-signin-page .modern-input-wrap input:autofill {
  background-color: #fff !important;
  -webkit-text-fill-color: #17233b !important;
  caret-color: #17233b !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-out 0s;
}

.modern-signin-page #rememberEmail {
  display: inline-block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  accent-color: #0967ef;
  appearance: auto !important;
}

/* v85 deliberate motion system. Motion communicates state, navigation, or progress only. */
:root {
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-slow: 240ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

:is(
  .page-template-redesign .template-redesign-shell,
  .page-template-redesign .template-hero-card,
  .page-template-redesign .template-upload-card,
  .page-create-automatic .automatic-step-card,
  .page-create-automatic .automatic-action-bar,
  .page-customer-sign .customer-sign-shell,
  .page-sender-profile .sender-profile-shell
) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

:is(
  .settings-action-card,
  .file-tile,
  .page-dashboard-redesign .dashboard-contract-row,
  .page-dashboard-redesign .performance-stat-card,
  .page-dashboard-redesign .dashboard-insight-card,
  .page-dashboard-redesign .achievement-item,
  .page-dashboard-redesign .insight-action-row,
  .page-dashboard-redesign .handoff-row
) {
  transition: border-color var(--motion-standard) var(--motion-ease), background-color var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease) !important;
}

:is(
  .settings-action-card,
  .file-tile,
  .page-dashboard-redesign .dashboard-contract-row,
  .page-dashboard-redesign .performance-stat-card,
  .page-dashboard-redesign .dashboard-insight-card,
  .page-dashboard-redesign .achievement-item,
  .page-dashboard-redesign .insight-action-row,
  .page-dashboard-redesign .handoff-row
):hover {
  transform: none !important;
}

.page-dashboard-redesign .achievement-spark,
.page-dashboard-redesign .is-updating .sales-line-path,
.page-dashboard-redesign .dashboard-contract-row.signed-pulse td {
  animation: none !important;
}

.dashboard-confetti-overlay {
  display: none !important;
}

:is(
  button,
  .button,
  .primary-btn,
  .secondary-btn,
  .small-btn,
  .monday-primary,
  .monday-secondary,
  .sidebar-nav a,
  .settings-subnav a,
  input,
  select,
  textarea
) {
  transition-duration: var(--motion-fast) !important;
  transition-timing-function: var(--motion-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}
/* Buxton Sign template library */
.page-template-redesign .template-library-card {
  display: grid;
  gap: 24px;
}

.template-header-actions,
.template-editor-actions,
.template-page-controls,
.template-editor-header {
  display: flex;
  align-items: center;
}

.template-header-actions { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.template-header-actions > a { min-height: 48px; padding: 0 20px; }

.page-template-redesign .template-editor-launch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid #cfe1f7;
  border-radius: 20px;
  background: #f5f9ff;
}
.template-editor-launch-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 16px; background: #0869e8; color: #fff; }
.template-editor-launch-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.template-editor-launch-copy h2 { margin: 3px 0 6px; color: #071430; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; }
.template-editor-launch-copy p:last-child { margin: 0; max-width: 790px; color: #5e6e88; font-size: 15px; line-height: 1.55; }
.template-editor-launch-button { min-width: 228px; min-height: 54px; justify-content: space-between; padding-inline: 22px; }

/* Visual contract template editor */
.page-template-editor { background: #f4f7fb; color: #071430; }
.page-template-editor .app-sidebar svg { max-width: 28px; max-height: 28px; }
.page-template-editor .app-sidebar .logo-image { width: 100%; height: auto; }
.page-template-editor .app-sidebar .user-avatar { width: 46px; height: 46px; object-fit: cover; }
.template-editor-page .app-main { max-width: none; padding: 30px clamp(18px, 2.5vw, 44px) 54px; }
.template-editor-header { justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.template-editor-header h1 { margin: 4px 0 6px; font-size: clamp(32px, 3vw, 48px); line-height: 1.04; }
.template-editor-header p:last-child { margin: 0; max-width: 760px; color: #5c6981; font-size: 16px; line-height: 1.55; }
.template-editor-back { display: inline-flex; margin-bottom: 10px; color: #0869e8; font-weight: 800; text-decoration: none; }
.template-editor-actions { justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.template-editor-actions :is(button, a) { min-height: 48px; padding: 0 18px; border-radius: 12px; font-weight: 850; }
.template-save-state { min-width: 140px; color: #66758e; font-size: 13px; font-weight: 800; text-align: right; }
.template-save-state[data-mode="dirty"] { color: #a35d00; }
.template-save-state[data-mode="saved"] { color: #078456; }
.template-save-state[data-mode="error"] { color: #e6003d; }

.template-editor-shell { display: grid; grid-template-columns: minmax(250px, 290px) minmax(520px, 1fr) minmax(240px, 280px); align-items: start; gap: 16px; }
.template-toolbox,
.template-canvas-panel,
.template-properties { border: 1px solid #d6e0ed; border-radius: 18px; background: #fff; }
.template-toolbox,
.template-properties { position: sticky; top: 18px; max-height: calc(100vh - 36px); padding: 18px; overflow: auto; }
.template-canvas-panel { min-width: 0; overflow: hidden; }
.template-panel-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.template-panel-number { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: #e9f3ff; color: #0869e8; font-weight: 900; }
.template-panel-heading h2 { margin: 0; font-size: 20px; }
.template-panel-heading p { margin: 3px 0 0; color: #71809a; font-size: 13px; line-height: 1.4; }
.template-page-browser { padding-bottom: 18px; border-bottom: 1px solid #e1e8f2; }
.template-field-browser { padding-top: 18px; }
.template-page-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: -4px 0 12px; }
.template-page-summary strong { font-size: 14px; }
.template-page-summary span { color: #71809a; font-size: 11px; font-weight: 700; }
.template-page-thumbnails { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.template-page-thumbnail { display: grid; min-width: 0; gap: 7px; padding: 7px; border: 1px solid #d9e3ef; border-radius: 11px; background: #f8fafd; color: #12203a; text-align: left; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.template-page-thumbnail:hover { border-color: #81b7f5; background: #f0f7ff; transform: translateY(-1px); }
.template-page-thumbnail.is-active { border-color: #0869e8; background: #eaf4ff; box-shadow: inset 0 0 0 1px #0869e8; }
.template-page-thumbnail-preview { display: grid; min-height: 112px; place-items: center; overflow: hidden; border: 1px solid #e0e6ee; border-radius: 7px; background: #fff; }
.template-page-thumbnail-preview canvas { display: block; max-width: 100%; height: auto; }
.template-page-thumbnail-preview.has-error { padding: 8px; color: #9b2745; font-size: 10px; text-align: center; }
.template-page-thumbnail-details { display: grid; gap: 2px; }
.template-page-thumbnail-details b { font-size: 12px; }
.template-page-thumbnail-details small { color: #6f7e96; font-size: 10px; }
.template-field-search input { width: 100%; min-height: 44px; margin-bottom: 16px; padding: 0 12px; border: 1px solid #ccd8e7; border-radius: 11px; background: #fff; font: inherit; }
.template-field-palette { display: grid; gap: 18px; }
.template-field-palette h3 { margin: 0 0 8px; color: #64748d; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.template-field-list { display: grid; gap: 7px; }
.template-field-choice { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #dce5f0; border-radius: 10px; background: #f9fbfe; color: #14203a; text-align: left; cursor: pointer; }
.template-field-choice:hover { border-color: #84b9f8; background: #f0f7ff; transform: translateY(-1px); }
.template-field-choice span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #e2f0ff; color: #0869e8; font-size: 18px; }
.template-field-choice b { font-size: 13px; }

.template-canvas-toolbar { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #dfe7f1; }
.template-canvas-toolbar > div:first-child { display: grid; gap: 3px; }
.template-canvas-toolbar strong { font-size: 14px; }
.template-canvas-toolbar span { color: #71809a; font-size: 12px; }
.template-page-controls { justify-content: flex-end; gap: 7px; }
.template-page-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d3deeb; border-radius: 9px; background: #fff; color: #12203a; font-size: 20px; cursor: pointer; }
.template-page-controls button:hover { border-color: #6da9f5; color: #0869e8; }
.template-page-controls button:disabled { opacity: .4; cursor: not-allowed; }
.template-page-controls label { display: flex; align-items: center; gap: 5px; color: #65748d; font-size: 12px; font-weight: 700; }
.template-page-controls input { width: 48px; height: 34px; padding: 0 5px; border: 1px solid #d3deeb; border-radius: 8px; text-align: center; }
.template-canvas-stage { position: relative; min-height: 720px; padding: 24px; overflow: auto; background: #e9eef5; }
.template-canvas-loading { position: sticky; top: 12px; z-index: 8; width: max-content; margin: 0 auto -40px; padding: 10px 16px; border: 1px solid #bcd8fa; border-radius: 999px; background: #fff; color: #0869e8; font-size: 13px; font-weight: 850; }
.template-canvas-loading[hidden] { display: none; }
.template-canvas-wrap { position: relative; margin: 0 auto; box-shadow: 0 3px 18px rgba(9, 30, 66, .11); }
.template-canvas-wrap canvas { display: block; background: #fff; }
.template-field-layer { position: absolute; inset: 0; pointer-events: none; }
.template-field-box { position: absolute; display: flex; align-items: center; padding: 2px; overflow: visible; border: 1px solid #1685e8; border-radius: 3px; background: rgba(30, 151, 239, .12); color: #004e92; font-family: Helvetica, Arial, sans-serif; font-weight: 400; white-space: nowrap; cursor: move; pointer-events: auto; touch-action: none; }
.template-field-content { display: block; width: 100%; max-height: 100%; overflow: hidden; }
.template-field-box.is-multiline { align-items: flex-start; line-height: 1.18; white-space: pre-line; }
.template-field-box.is-signing { border-color: #ee1648; background: rgba(246, 25, 79, .13); color: #a0002c; }
.template-field-box.is-selected { z-index: 3; outline: 3px solid rgba(8, 105, 232, .24); }
.template-field-box.is-signing.is-selected { outline-color: rgba(238, 22, 72, .24); }
.template-field-size-badge { display: none; position: absolute; left: 0; bottom: calc(100% + 5px); width: max-content; max-width: 190px; padding: 4px 7px; border-radius: 6px; background: #071430; color: #fff; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; }
.template-field-box.is-selected .template-field-size-badge { display: block; }
.template-resize-handle { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 5px 0 2px; background: currentColor; cursor: nwse-resize; }
.template-canvas-help { margin: 0; padding: 11px 16px; border-top: 1px solid #dfe7f1; color: #66758d; font-size: 12px; line-height: 1.45; }

.template-empty-properties { padding: 18px 12px; border: 1px dashed #c9d6e5; border-radius: 12px; color: #70809a; font-size: 13px; line-height: 1.5; text-align: center; }
.template-property-form { display: grid; gap: 13px; }
.template-property-form[hidden] { display: none !important; }
.template-property-form > label,
.template-position-grid label { display: grid; gap: 6px; color: #25314a; font-size: 12px; font-weight: 850; }
.template-property-form :is(input, select) { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #ccd8e7; border-radius: 10px; background: #fff; color: #0a1730; font: inherit; }
.template-font-size-field > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.template-font-size-field > span:first-child b { color: #0869e8; font-size: 12px; }
.template-font-size-control { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 9px; }
.template-property-form .template-font-size-control input[type="range"] { min-height: 28px; padding: 0; border: 0; accent-color: #0869e8; }
.template-font-fit-note { color: #65748d; font-size: 11px; font-weight: 700; line-height: 1.45; }
.template-font-fit-note[data-mode="warning"] { color: #a35d00; }
.template-font-fit-note[data-mode="accurate"] { color: #078456; }
.template-position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.template-delete-field { min-height: 42px; margin-top: 3px; border: 1px solid #ffc0cf; border-radius: 10px; background: #fff5f7; color: #d40039; font-weight: 850; cursor: pointer; }
.template-editor-tip { margin-top: 18px; padding: 14px; border-radius: 12px; background: #eef6ff; color: #27466f; }
.template-editor-tip strong { color: #075ebf; font-size: 13px; }
.template-editor-tip p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }

@media (max-width: 1500px) {
  .template-editor-shell { grid-template-columns: 230px minmax(480px, 1fr); }
  .template-properties { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(0, 1fr); max-height: none; gap: 18px; }
  .template-properties .template-panel-heading { grid-row: span 2; }
  .template-property-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .template-position-grid { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .page-template-redesign .template-editor-launch { grid-template-columns: auto minmax(0, 1fr); }
  .template-editor-launch-button { grid-column: 1 / -1; width: 100%; }
  .template-editor-header { align-items: flex-start; flex-direction: column; }
  .template-editor-actions { width: 100%; justify-content: flex-start; }
  .template-save-state { order: 3; width: 100%; text-align: left; }
  .template-editor-shell { grid-template-columns: 1fr; }
  .template-toolbox,
  .template-properties { position: static; max-height: none; }
  .template-page-thumbnails { grid-template-columns: repeat(4, minmax(100px, 1fr)); overflow-x: auto; }
  .template-field-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-canvas-panel { grid-row: 2; }
  .template-properties { display: block; grid-column: auto; }
  .template-properties .template-panel-heading { grid-row: auto; }
}

@media (max-width: 620px) {
  .page-template-redesign .template-editor-launch { grid-template-columns: 1fr; text-align: left; }
  .template-editor-launch-icon { width: 48px; height: 48px; }
  .template-header-actions { width: 100%; justify-content: stretch; }
  .template-header-actions > a { width: 100%; }
  .template-editor-page .app-main { padding-inline: 12px; }
  .template-editor-header h1 { font-size: 32px; }
  .template-editor-actions :is(button, a) { flex: 1; }
  .template-field-palette { grid-template-columns: 1fr; }
  .template-page-thumbnails { grid-template-columns: repeat(2, minmax(112px, 1fr)); }
  .template-canvas-toolbar { align-items: flex-start; flex-direction: column; }
  .template-page-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .template-canvas-stage { min-height: 520px; padding: 12px; }
  .template-property-form { grid-template-columns: 1fr; }
  .template-position-grid { grid-template-columns: 1fr 1fr; }
}

.page-template-redesign .template-picker {
  padding: 20px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #f8fbff;
}

.page-template-redesign .template-picker > label {
  display: block;
  margin-bottom: 10px;
  color: #071430;
  font-size: 15px;
  font-weight: 800;
}

.page-template-redesign .template-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.page-template-redesign .template-picker select {
  width: 100%;
  min-height: 48px;
  padding: 0 44px 0 14px;
  border: 1px solid #cdd9e8;
  border-radius: 12px;
  background: #fff;
  color: #071430;
  font: inherit;
  font-weight: 700;
}

.page-template-redesign .template-version-list {
  display: grid;
  gap: 12px;
}

.page-template-redesign .template-version-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #fff;
}

.page-template-redesign .template-version-row.is-active {
  border-color: #92ddc1;
  background: #f4fcf8;
}

.page-template-redesign .template-version-title,
.page-template-redesign .template-version-actions,
.page-template-redesign .template-version-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.page-template-redesign .template-version-title {
  gap: 10px;
}

.page-template-redesign .template-version-title strong {
  overflow-wrap: anywhere;
  color: #071430;
  font-size: 17px;
}

.page-template-redesign .template-version-main > p {
  margin: 7px 0 11px;
  color: #566580;
  font-size: 14px;
  line-height: 1.5;
}

.page-template-redesign .template-active-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: #dff8ec;
  color: #08764d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.page-template-redesign :is(.template-verified-badge, .template-warning-badge) {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.page-template-redesign .template-verified-badge {
  background: #e2f4ff;
  color: #0967b9;
}

.page-template-redesign .template-warning-badge {
  background: #fff3d9;
  color: #946000;
}

.page-template-redesign .template-version-main > .template-validation-note {
  margin-top: -3px;
  color: #8a5a00;
}

.page-template-redesign .template-version-meta {
  gap: 6px 16px;
  color: #687792;
  font-size: 13px;
  font-weight: 650;
}

.page-template-redesign .template-version-actions {
  justify-content: flex-end;
  gap: 10px;
}

.page-template-redesign .template-version-actions form {
  margin: 0;
}

.page-template-redesign .template-version-actions :is(.primary-btn, .secondary-btn),
.page-template-redesign .template-picker .secondary-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.page-template-redesign .template-version-actions .primary-btn {
  border: 1px solid #0d63e7;
  background: #0d63e7;
  color: #fff;
}

@media (max-width: 720px) {
  .page-template-redesign .template-picker-controls,
  .page-template-redesign .template-version-row {
    grid-template-columns: 1fr;
  }

  .page-template-redesign .template-version-actions,
  .page-template-redesign .template-version-actions form,
  .page-template-redesign .template-version-actions :is(.primary-btn, .secondary-btn),
  .page-template-redesign .template-picker .secondary-btn {
    width: 100%;
  }
}

/* Shared shell adapter for the remaining administrative screens. */
body.page-legacy-shell {
  --sidebar-width: 288px;
  --line: #dfe5f0;
  --ink: #071430;
  --muted: #5b6685;
  margin: 0 !important;
  min-width: 320px;
  overflow-x: hidden;
  background: #f6f8fc !important;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-legacy-shell .costco-platform-shell {
  display: block !important;
  width: 100%;
  min-height: 100vh;
  background: #f6f8fc !important;
}

.page-legacy-shell .monday-main {
  display: block !important;
  width: calc(100% - var(--sidebar-width)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 0 var(--sidebar-width) !important;
  padding: clamp(28px, 3.5vw, 48px) clamp(26px, 3.2vw, 58px) 96px !important;
  box-sizing: border-box;
}

.page-legacy-shell :is(.monday-board-shell, .settings-action-card, .guide-card, .admin-mode-banner, .platform-switcher-bar) {
  box-shadow: none !important;
}

.page-legacy-shell :is(.settings-action-card, .settings-subnav a, button, a.monday-primary, a.monday-secondary):hover {
  transform: none !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  body.page-legacy-shell { --sidebar-width: 250px; }
}

@media (max-width: 920px) {
  .page-legacy-shell .monday-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 22px clamp(14px, 4.2vw, 24px) calc(116px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Final responsive shell correction. Keep this last in the cascade. */
body:is(
  .page-dashboard-redesign,
  .page-create-redesign,
  .page-review-redesign,
  .page-quote-placement-redesign,
  .page-sender-profile,
  .page-template-redesign,
  .page-contract-detail-redesign
) :is(.contract-app, .costco-platform-shell) {
  background: #f6f8fc !important;
}

@media (max-width: 920px) {
  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) .mobile-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 7px !important;
  }

  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) .mobile-nav a {
    min-height: 58px !important;
    padding: 7px 2px !important;
  }

  body:is(
    .page-dashboard-redesign,
    .page-create-redesign,
    .page-review-redesign,
    .page-quote-placement-redesign,
    .page-sender-profile,
    .page-template-redesign,
    .page-contract-detail-redesign
  ) .mobile-nav span {
    overflow: hidden;
    font-size: 10px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.page-legacy-shell .admin-mode-banner,
  body.page-legacy-shell .platform-switcher-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    align-items: start !important;
  }

  body.page-legacy-shell .admin-mode-banner > div,
  body.page-legacy-shell .platform-switcher-bar > div {
    display: grid !important;
    gap: 4px !important;
  }

  body.page-legacy-shell .admin-mode-banner span,
  body.page-legacy-shell .platform-switcher-bar span,
  body.page-legacy-shell .platform-switcher-bar small {
    display: block !important;
  }

  body.page-legacy-shell .monday-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.page-legacy-shell .monday-header :is(.monday-primary, .monday-secondary),
  body.page-legacy-shell .admin-mode-banner a,
  body.page-legacy-shell .platform-switcher-bar a {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  body.page-legacy-shell .settings-subnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body.page-legacy-shell .settings-subnav a {
    display: flex !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body.page-legacy-shell :is(.admin-mode-banner, .platform-switcher-bar) :is(span, small) {
    color: #5b6685 !important;
  }
}

/* Final email builder sizing overrides. */
@media (min-width: 1321px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 1320px) {
  .page-sender-profile .sender-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .page-sender-profile .email-preview-card {
    position: static !important;
  }
}

/* Final notification drawer: contained, readable, and fluid at every width. */
#notificationDrawer,
#notificationDrawer * {
  box-sizing: border-box !important;
}

#notificationDrawer {
  width: min(440px, 100vw) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#notificationDrawer .notification-drawer-header {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 28px 24px 22px !important;
}

#notificationDrawer .notification-drawer-header > div {
  min-width: 0 !important;
}

#notificationDrawer .notification-drawer-header h2 {
  margin: 5px 0 8px !important;
  font-size: clamp(28px, 8vw, 34px) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

#notificationDrawer .notification-drawer-header > div > p:last-child {
  max-width: none !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#notificationDrawer .notification-close {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #ed0033 !important;
  color: #fff !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#notificationDrawer .notification-close:hover {
  background: #ca002b !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#notificationDrawer .notification-close svg {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  stroke: currentColor !important;
}

#notificationDrawer .notification-drawer-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#notificationDrawer .notification-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
}

#notificationDrawer .notification-card[hidden],
#notificationDrawer .notification-empty[hidden] {
  display: none !important;
}

#notificationDrawer .notification-card-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#notificationDrawer .notification-card-copy :is(strong, small, time) {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#notificationDrawer .notification-card-copy strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

#notificationDrawer .notification-card-copy small {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#notificationDrawer .notification-card-copy time {
  margin-top: 2px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#notificationDrawer .notification-dismiss {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1px solid #d6dfeb !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #44516b !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#notificationDrawer .notification-dismiss:hover {
  border-color: #b9c6d8 !important;
  background: #f1f5fa !important;
  color: #071430 !important;
  transform: none !important;
}

@media (max-width: 560px) {
  #notificationDrawer .notification-drawer-header {
    padding: max(20px, env(safe-area-inset-top)) 18px 18px !important;
  }

  #notificationDrawer .notification-drawer-content {
    padding: 12px !important;
  }

  #notificationDrawer .notification-card {
    gap: 10px !important;
    padding: 14px !important;
  }
}

@media (max-width: 390px) {
  #notificationDrawer .notification-card {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  #notificationDrawer .notification-dismiss {
    justify-self: start !important;
  }
}
.page-dashboard-redesign .in-person-action,
.page-contract-detail-redesign .in-person-action {
  color: #087a50;
  border-color: #9ddfc5;
  background: #effbf6;
}

.page-dashboard-redesign .in-person-action:hover,
.page-contract-detail-redesign .in-person-action:hover {
  color: #056441;
  border-color: #61c99d;
  background: #e2f8ee;
}

.page-dashboard-redesign .undo-in-person-action,
.page-contract-detail-redesign .undo-in-person-action {
  color: #9a5a00;
  border-color: #efcb8a;
  background: #fff8e9;
}

.page-dashboard-redesign .undo-in-person-action:hover,
.page-contract-detail-redesign .undo-in-person-action:hover {
  color: #794600;
  border-color: #dda744;
  background: #fff1d2;
}

/* Notification totals remain readable when the navigation item is hovered. */
.notification-trigger:hover .notification-count,
.notification-trigger:focus-visible .notification-count {
  border-color: #ed0033 !important;
  background: #ed0033 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* v75 premium system: one final, lightweight consistency and motion layer. */
:root {
  --ui-ink: #071430;
  --ui-body: #526078;
  --ui-muted: #667085;
  --ui-canvas: #f6f8fc;
  --ui-surface: #ffffff;
  --ui-border: #dfe5f0;
  --ui-border-strong: #cbd6e5;
  --ui-blue: #0868b8;
  --ui-blue-hover: #00569c;
  --ui-focus: #0967ef;
  --ui-red: #ed002f;
  --ui-green: #0a9e63;
  --ui-warning: #d97706;
  --ui-error: #c8002b;
  --ui-radius-control: 10px;
  --ui-radius-card: 16px;
  --ui-motion-fast: 140ms;
  --ui-motion: 200ms;
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-behavior: smooth; }

body {
  color: var(--ui-ink);
  background-color: var(--ui-canvas);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(9, 103, 239, .24) !important;
  outline-offset: 2px !important;
}

:where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, .primary-btn, .secondary-btn, .ui-primary-action, [role="button"]) {
  transition: background-color var(--ui-motion-fast) ease,
              border-color var(--ui-motion-fast) ease,
              color var(--ui-motion-fast) ease,
              transform var(--ui-motion-fast) var(--ui-ease),
              box-shadow var(--ui-motion-fast) ease !important;
}

:where(button, .primary-btn, .secondary-btn, .ui-primary-action, [role="button"]).is-pressed {
  transform: translateY(1px) scale(.985) !important;
}

.primary-btn,
.ui-primary-action,
.section-save-btn,
.section-test-btn {
  min-height: 48px;
  border-radius: var(--ui-radius-control) !important;
  font-weight: 800 !important;
}

.primary-btn:hover,
.ui-primary-action:hover {
  box-shadow: 0 8px 20px rgba(8, 104, 184, .16) !important;
  transform: translateY(-1px);
}

.btn-arrow {
  transition: transform var(--ui-motion) var(--ui-ease) !important;
}

:where(.primary-btn, .ui-primary-action):hover .btn-arrow {
  transform: translateX(3px);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-color: var(--ui-border-strong) !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
  transition: border-color var(--ui-motion-fast) ease, box-shadow var(--ui-motion-fast) ease !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  border-color: var(--ui-focus) !important;
  box-shadow: 0 0 0 3px rgba(9, 103, 239, .12) !important;
}

::placeholder { color: #7d899d !important; opacity: 1; }

.page-header h1,
.monday-header h1 {
  color: var(--ui-ink) !important;
  font-size: clamp(32px, 3.25vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.06 !important;
}

.page-subtitle,
.monday-header p { color: var(--ui-body) !important; }

.dashboard-card,
.automatic-step-card,
.automatic-action-card,
.review-panel,
.review-preflight-strip,
.profile-card,
.email-preview-card,
.template-card,
.template-summary,
.action-card,
.support-search-card,
.support-health,
.support-topic,
.monday-board-shell,
.settings-group,
.detail-smart-card {
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

/* Static information never moves when hovered. */
.sales-kpi-card,
.summary-card,
.detail-smart-card,
.readiness-item,
.achievement-item {
  box-shadow: none !important;
  transform: none !important;
}

.sales-kpi-card:hover,
.summary-card:hover,
.detail-smart-card:hover,
.readiness-item:hover,
.achievement-item:hover {
  box-shadow: none !important;
  transform: none !important;
}

.page-dashboard-redesign .sales-performance-card {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-dashboard-redesign .sales-performance-card::before { display: none !important; }
.page-dashboard-redesign .achievement-spark { animation: none !important; }

.sales-period-toggle button,
.filter-tab {
  min-height: 42px;
  border-radius: 9px !important;
}

.sales-period-toggle button:hover:not(.is-active),
.filter-tab:hover:not(.active) {
  background: #eef5fc !important;
  color: var(--ui-blue) !important;
}

.sales-period-toggle button.is-active,
.filter-tab.active {
  box-shadow: 0 4px 12px rgba(7, 20, 48, .12) !important;
}

.settings-action-card,
.support-topic a,
.customer-link,
.workflow-assist-chip,
.contract-action-menu summary {
  transition: color var(--ui-motion-fast) ease,
              border-color var(--ui-motion-fast) ease,
              background-color var(--ui-motion-fast) ease,
              transform var(--ui-motion-fast) var(--ui-ease) !important;
}

.settings-action-card:hover,
.settings-action-card:focus-visible {
  border-color: #a9c9e5 !important;
  background: #fbfdff !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

.support-topic a:hover,
.customer-link:hover { color: var(--ui-blue-hover) !important; }

.contract-action-menu[open] > summary,
.contract-action-menu.is-open > summary {
  border-color: #a9c9e5 !important;
  background: #f3f8fd !important;
}

.notice,
.status-alert {
  animation: premium-notice-in 220ms var(--ui-ease) both;
}

.premium-motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(8px);
}

.premium-motion-ready .reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms var(--ui-ease) var(--reveal-delay, 0ms),
              transform 240ms var(--ui-ease) var(--reveal-delay, 0ms) !important;
}

@keyframes premium-notice-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Legacy settings surfaces use the same spacing and card language. */
.settings-page .monday-main {
  width: 100%;
  max-width: none;
}

.settings-center-grid { gap: 22px !important; }

.settings-group {
  padding: clamp(20px, 2.2vw, 30px) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-card) !important;
  background: #fff !important;
}

.settings-action-card {
  min-height: 150px;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.settings-action-card strong { color: var(--ui-ink) !important; font-size: 18px !important; }
.settings-action-card span { color: var(--ui-body) !important; font-size: 14px !important; line-height: 1.55 !important; }

@media (max-width: 920px) {
  .app-main,
  .monday-main { padding-inline: clamp(14px, 4vw, 24px) !important; }

  .page-header {
    align-items: flex-start !important;
    gap: 18px !important;
  }

  .page-header .primary-btn { width: 100%; }

  .sales-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .sales-kpi-card {
    width: 100% !important;
    min-height: 132px !important;
    padding: 20px !important;
  }

  .sales-kpi-card > span:not(.sales-kpi-icon) { font-size: 12px !important; }
  .sales-kpi-card > strong { font-size: clamp(30px, 9vw, 42px) !important; }
  .sales-kpi-card small { font-size: 12px !important; }

  .settings-card-grid,
  .support-topic-grid,
  .template-summary,
  .detail-two-column { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .page-header h1,
  .monday-header h1 { font-size: 34px !important; }

  .page-header,
  .sales-overview-head { flex-direction: column !important; align-items: stretch !important; }

  .sales-period-toggle { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; }
  .sales-period-toggle button { width: 100% !important; padding-inline: 8px !important; }

  .dashboard-card,
  .automatic-step-card,
  .automatic-action-card,
  .review-panel,
  .profile-card,
  .template-card,
  .support-search-card,
  .support-topic,
  .settings-group { border-radius: 14px !important; }

  .modern-signin-page,
  .modern-signin-shell,
  .modern-signin-card,
  .modern-signin-welcome,
  .modern-signin-form-panel,
  .modern-signin-form,
  .modern-input-wrap,
  .modern-access-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .modern-signin-welcome,
  .modern-signin-form-panel { padding-inline: 22px !important; }

  .modern-welcome-copy h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 38px) !important;
    white-space: normal !important;
  }

  .modern-form-heading h2 {
    max-width: 100% !important;
    font-size: clamp(28px, 8vw, 32px) !important;
    overflow-wrap: anywhere !important;
  }

  .modern-secure-badge {
    justify-self: start !important;
    margin-left: 0 !important;
  }

  .modern-input-wrap input { min-width: 0 !important; font-size: 14px !important; }

  .modern-signin-submit,
  .modern-access-card a { min-height: 48px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .premium-motion-ready .reveal-item,
  .premium-motion-ready .reveal-item.is-revealed,
  .notice,
  .status-alert,
  :where(button, a, input, select, textarea, summary) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* v80 final cascade lock for the email editor. */
.page-sender-profile .email-preview-anchor { min-width: 0 !important; align-self: start !important; }
.page-sender-profile .email-builder-section { position: relative !important; overflow: hidden !important; border-width: 1px 1px 1px 4px !important; }
.page-sender-profile .email-builder-section .section-head { margin: -4px -4px 20px !important; padding: 20px 20px 17px !important; }
.page-sender-profile .email-section-sender { border-left-color: #0868b8 !important; }
.page-sender-profile .email-section-sender .section-head { background: #f4f9ff !important; }
.page-sender-profile .email-section-sender .settings-card-icon { background: #e2f1ff !important; color: #0868b8 !important; }
.page-sender-profile .email-section-content { border-left-color: #0891b2 !important; }
.page-sender-profile .email-section-content .section-head { background: #f2fbfd !important; }
.page-sender-profile .email-section-content .settings-card-icon { background: #ddf5f9 !important; color: #087c99 !important; }
.page-sender-profile .email-section-cover { border-left-color: #0a9e63 !important; }
.page-sender-profile .email-section-cover .section-head { background: #f1fbf6 !important; }
.page-sender-profile .email-section-cover .settings-card-icon { background: #dff7e9 !important; color: #087d4f !important; }
.page-sender-profile .email-section-delivery { border-left-color: #d97706 !important; }
.page-sender-profile .email-section-delivery .section-head { background: #fff9ef !important; }
.page-sender-profile .email-section-delivery .settings-card-icon { background: #fff0d5 !important; color: #a85b00 !important; }

@media (min-width: 1321px) {
  .page-sender-profile .production-email-preview-card.is-preview-following { z-index: 20 !important; max-height: calc(100vh - 36px) !important; overflow: hidden !important; }
}

@media (max-width: 760px) {
  .page-sender-profile .email-builder-section .section-head { margin: -2px -2px 18px !important; padding: 17px 16px 15px !important; }
}

/* v83 fluid customer signing workspace. */
body.customer-sign-page {
  width: 100% !important;
  min-width: 320px !important;
  padding: clamp(14px, 1.8vw, 28px) !important;
  overflow-x: hidden !important;
  background: #f4f7fc !important;
}

.customer-sign-page .sign-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.customer-sign-page .sign-header {
  width: 100% !important;
  margin-bottom: clamp(14px, 1.4vw, 22px) !important;
  padding: clamp(24px, 2.3vw, 38px) !important;
  border-top: 7px solid #0967ef !important;
}

.customer-sign-page .buxton-signing-brand {
  width: min(100%, 224px) !important;
  max-width: 224px !important;
}

.customer-sign-page .brand-row {
  margin-bottom: clamp(18px, 1.8vw, 28px) !important;
}

.customer-sign-page .header-main {
  align-items: center !important;
}

.customer-sign-page .header-main h1 {
  font-size: clamp(42px, 4.2vw, 68px) !important;
}

.customer-sign-page .open-pdf-btn,
.customer-sign-page .secondary-btn {
  border-color: #cfdbea !important;
  color: #0967ef !important;
}

.customer-sign-page .open-pdf-btn:hover,
.customer-sign-page .secondary-btn:hover {
  border-color: rgba(9, 103, 239, .38) !important;
  background: #edf5ff !important;
  color: #0756c8 !important;
}

.customer-sign-page .sign-layout {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, clamp(390px, 28vw, 470px)) !important;
  gap: clamp(16px, 1.7vw, 26px) !important;
  align-items: start !important;
}

.customer-sign-page .pdf-card,
.customer-sign-page .sign-card {
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(20px, 2vw, 32px) !important;
}

.customer-sign-page .pdf-frame-wrap {
  width: 100% !important;
  height: clamp(650px, calc(100vh - 325px), 1080px) !important;
  min-height: 0 !important;
}

.customer-sign-page .sign-card {
  top: clamp(14px, 1.8vw, 28px) !important;
}

.customer-sign-page .field-card input:focus {
  border-color: rgba(9, 103, 239, .48) !important;
  box-shadow: 0 0 0 4px rgba(9, 103, 239, .09) !important;
}

.customer-sign-page .signature-preview {
  background: radial-gradient(circle at top left, rgba(9, 103, 239, .06), transparent 18rem), #fff !important;
}

.customer-sign-page .agreement-row input {
  accent-color: #0967ef !important;
}

.customer-sign-page .submit-signature-btn {
  background: #0967ef !important;
  box-shadow: 0 16px 34px rgba(9, 103, 239, .2) !important;
}

.customer-sign-page .submit-signature-btn:hover:not(:disabled) {
  background: #0756c8 !important;
  box-shadow: 0 20px 40px rgba(9, 103, 239, .24) !important;
}

@media (max-width: 1120px) {
  .customer-sign-page .sign-layout {
    grid-template-columns: 1fr !important;
  }

  .customer-sign-page .sign-card {
    position: static !important;
  }

  .customer-sign-page .pdf-frame-wrap {
    height: clamp(560px, 70vh, 880px) !important;
  }
}

@media (max-width: 640px) {
  body.customer-sign-page {
    padding: 8px !important;
  }

  .customer-sign-page .sign-header,
  .customer-sign-page .pdf-card,
  .customer-sign-page .sign-card,
  .customer-sign-page .sign-complete-card {
    border-radius: 14px !important;
  }

  .customer-sign-page .sign-header {
    padding: 22px 18px !important;
  }

  .customer-sign-page .header-main {
    width: 100% !important;
    align-items: stretch !important;
  }

  .customer-sign-page .header-main > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  .customer-sign-page .buxton-signing-brand {
    max-width: 190px !important;
  }

  .customer-sign-page .header-main h1 {
    max-width: 100% !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .customer-sign-page .header-main p {
    overflow-wrap: anywhere !important;
  }

  .customer-sign-page .pdf-card,
  .customer-sign-page .sign-card {
    padding: 18px 14px !important;
  }

  .customer-sign-page .pdf-frame-wrap {
    height: 64vh !important;
    min-height: 420px !important;
    border-radius: 10px !important;
  }

  .customer-sign-page .card-head h2 {
    font-size: 27px !important;
  }

  .customer-sign-page .signature-preview {
    min-height: 118px !important;
    padding: 18px !important;
    font-size: clamp(38px, 12vw, 50px) !important;
  }
}

/* v85 place the full width loading workspace after legacy overlay rules. */
.contract-loading-overlay {
  padding: clamp(12px, 2.5vw, 36px) !important;
}

.contract-loading-card {
  box-sizing: border-box !important;
  align-items: stretch !important;
  width: min(100%, 1380px) !important;
  min-height: min(900px, calc(100vh - clamp(24px, 5vw, 72px))) !important;
  max-height: calc(100vh - clamp(24px, 5vw, 72px)) !important;
  padding: 0 clamp(30px, 7vw, 118px) clamp(30px, 4vw, 58px) !important;
  overflow: auto !important;
  border: 1px solid #dce5f1 !important;
  border-top: 9px solid #0967ef !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 70px rgba(7, 20, 48, .2) !important;
}

.contract-loading-brand {
  display: flex !important;
  align-items: center !important;
  min-height: 112px !important;
}

.contract-loading-brand img {
  display: block !important;
  width: clamp(152px, 16vw, 220px) !important;
  height: auto !important;
}

.contract-loading-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px 0 30px !important;
  text-align: center !important;
}

.contract-loading-document-icon {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
}

.contract-loading-document-icon svg {
  width: 38px !important;
  height: 38px !important;
}

.contract-loading-kicker {
  margin: 24px 0 14px !important;
  font-size: 14px !important;
  letter-spacing: .16em !important;
}

.contract-loading-card h2 {
  width: 100% !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: 1.04 !important;
}

.contract-loading-message {
  width: 100% !important;
  overflow-wrap: anywhere !important;
  max-width: 760px !important;
  margin: 22px auto 8px !important;
  font-size: clamp(16px, 1.7vw, 21px) !important;
  line-height: 1.55 !important;
}

.contract-loading-spinner {
  width: clamp(150px, 15vw, 210px) !important;
  margin: 20px auto 26px !important;
}

.contract-loading-steps {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 760px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.contract-loading-steps li {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  gap: 10px !important;
  color: #7c89a2 !important;
  font-size: clamp(13px, 1.25vw, 17px) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.contract-loading-steps li:not(:last-child)::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 2px !important;
  margin: 0 14px !important;
  background: #dce5f1 !important;
}

.contract-loading-steps li > span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border: 2px solid #aebbd0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 15px !important;
}

.contract-loading-steps li.is-complete,
.contract-loading-steps li.is-current {
  color: #0967ef !important;
}

.contract-loading-steps li.is-complete > span {
  border-color: #0967ef !important;
  background: #0967ef !important;
}

.contract-loading-steps li.is-current > span {
  border: 7px solid #dceaff !important;
  background: #0967ef !important;
  box-shadow: 0 0 0 2px #0967ef !important;
}

.contract-loading-divider {
  margin-top: 0 !important;
}

.contract-loading-footer {
  justify-content: center !important;
  margin-top: 28px !important;
  padding: 0 20px !important;
  text-align: center !important;
}

.contract-loading-footer p {
  font-size: clamp(13px, 1.3vw, 16px) !important;
}

@media (max-width: 720px) {
  .contract-loading-overlay {
    padding: 0 !important;
  }

  .contract-loading-card {
    width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 20px 24px !important;
    border: 0 !important;
    border-top: 6px solid #0967ef !important;
    border-radius: 0 !important;
  }

  .contract-loading-brand {
    justify-content: center !important;
    min-height: 88px !important;
  }

  .contract-loading-content {
    padding: 8px 0 24px !important;
  }

  .contract-loading-card h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }

  .contract-loading-message {
    font-size: 15px !important;
  }

  .contract-loading-spinner {
    width: 142px !important;
    margin: 14px auto 22px !important;
  }

  .contract-loading-steps {
    align-items: stretch !important;
    flex-direction: column !important;
    width: min(100%, 260px) !important;
    gap: 12px !important;
  }

  .contract-loading-steps li {
    flex: 0 0 auto !important;
  }

  .contract-loading-steps li::after {
    display: none !important;
  }

  .contract-loading-footer {
    align-items: flex-start !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

/* v86 minimal responsive contract processing states. */
.contract-loading-overlay {
  place-items: center !important;
  padding: clamp(10px, 2.5vw, 34px) !important;
  background: #f4f7fb !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.contract-loading-card {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: stretch !important;
  width: min(100%, 1120px) !important;
  min-height: min(760px, calc(100dvh - clamp(20px, 5vw, 68px))) !important;
  max-height: calc(100dvh - clamp(20px, 5vw, 68px)) !important;
  padding: 0 clamp(34px, 6vw, 82px) 30px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #dbe4f0 !important;
  border-top: 6px solid #0967ef !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 50px rgba(7, 20, 48, .1) !important;
}

.contract-loading-brand {
  display: flex !important;
  align-items: center !important;
  min-height: clamp(82px, 10vw, 108px) !important;
}

.contract-loading-brand img {
  width: clamp(148px, 18vw, 205px) !important;
  height: auto !important;
}

.contract-loading-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 6px 0 28px !important;
  text-align: center !important;
}

.contract-loading-kicker {
  margin: 0 0 12px !important;
  color: #0967ef !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.contract-loading-card h2 {
  max-width: 820px !important;
  margin: 0 !important;
  color: #071430 !important;
  font-size: clamp(34px, 5vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04 !important;
}

.contract-loading-message {
  max-width: 650px !important;
  margin: 16px auto 0 !important;
  color: #53617c !important;
  font-size: clamp(16px, 1.7vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.contract-loading-visual {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 500px) !important;
  height: clamp(220px, 29vh, 300px) !important;
  margin: clamp(22px, 4vh, 38px) auto 18px !important;
}

.contract-loading-pdf,
.contract-loading-contract-page {
  box-sizing: border-box !important;
  border: 1px solid #cbd6e6 !important;
  background: #ffffff !important;
  box-shadow: 0 13px 30px rgba(7, 20, 48, .1) !important;
}

.contract-loading-pdf {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(150px, 20vw, 190px) !important;
  aspect-ratio: .78 !important;
  padding: 22px 14px !important;
  border-radius: 12px !important;
  color: #071430 !important;
}

.contract-loading-pdf--lead {
  transform: translateX(6px) rotate(-1.5deg) !important;
}

.contract-loading-pdf--quote {
  transform: translateX(-6px) rotate(1.5deg) !important;
}

.contract-loading-pdf svg {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 26px !important;
  fill: none !important;
  stroke: #0967ef !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.6 !important;
}

.contract-loading-pdf span {
  font-size: clamp(12px, 1.25vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.contract-loading-scan {
  position: absolute !important;
  z-index: 3 !important;
  top: 50% !important;
  left: 4% !important;
  width: 92% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #0967ef !important;
  box-shadow: 0 0 16px 5px rgba(9, 103, 239, .25) !important;
  animation: contract-document-scan 2.2s ease-in-out infinite alternate !important;
}

.contract-loading-contract-page {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: clamp(200px, 26vw, 250px) !important;
  min-height: clamp(250px, 34vh, 310px) !important;
  padding: 30px 28px !important;
  border-radius: 12px !important;
  color: #071430 !important;
  text-align: left !important;
}

.contract-loading-contract-page strong {
  margin-bottom: 24px !important;
  font-size: 18px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.contract-loading-contract-page i {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-bottom: 9px !important;
  border-radius: 99px !important;
  background: #e3e9f2 !important;
}

.contract-loading-contract-page span {
  margin: 16px 0 5px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.contract-loading-contract-page b {
  display: block !important;
  width: 100% !important;
  height: 30px !important;
  border: 1px solid #cbd6e6 !important;
  border-radius: 5px !important;
  background: #f8faff !important;
}

.contract-loading-contract-page b.is-short {
  width: 72% !important;
}

.contract-loading-check {
  position: absolute !important;
  right: calc(50% - 155px) !important;
  bottom: 18px !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  border: 6px solid #ffffff !important;
  border-radius: 50% !important;
  background: #12a66a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(18, 166, 106, .22) !important;
}

.contract-loading-check svg {
  width: 32px !important;
  height: 32px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2.4 !important;
}

.contract-loading-status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  gap: 12px !important;
  color: #071430 !important;
}

.contract-loading-status > span {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  border-radius: 50% !important;
  background: #0967ef !important;
  box-shadow: 0 0 0 6px #e8f1ff !important;
}

.contract-loading-status p {
  margin: 0 !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
}

.contract-loading-progress {
  position: relative !important;
  width: min(100%, 620px) !important;
  height: 4px !important;
  margin-top: 24px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e5ebf4 !important;
}

.contract-loading-progress span {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 34% !important;
  border-radius: inherit !important;
  background: #0967ef !important;
  animation: contract-progress-travel 1.8s ease-in-out infinite !important;
}

.contract-loading-footer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid #e1e7f0 !important;
  color: #53617c !important;
  text-align: center !important;
}

.contract-loading-footer p {
  margin: 0 !important;
  font-size: clamp(13px, 1.3vw, 15px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

@keyframes contract-document-scan {
  from { transform: translateY(-72px); opacity: .7; }
  to { transform: translateY(72px); opacity: 1; }
}

@keyframes contract-progress-travel {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(300%); }
}

@media (max-width: 900px) {
  .contract-loading-card {
    width: min(100%, 760px) !important;
    min-height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    padding-right: clamp(26px, 6vw, 54px) !important;
    padding-left: clamp(26px, 6vw, 54px) !important;
  }

  .contract-loading-visual {
    height: clamp(205px, 27vh, 270px) !important;
  }
}

@media (max-width: 600px) {
  .contract-loading-overlay {
    padding: 0 !important;
  }

  .contract-loading-card {
    width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 20px 22px !important;
    border: 0 !important;
    border-top: 5px solid #0967ef !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .contract-loading-brand {
    min-height: 76px !important;
  }

  .contract-loading-brand img {
    width: 142px !important;
  }

  .contract-loading-content {
    justify-content: flex-start !important;
    padding: clamp(14px, 4vh, 30px) 0 24px !important;
  }

  .contract-loading-kicker {
    margin-bottom: 9px !important;
    font-size: 11px !important;
  }

  .contract-loading-card h2 {
    font-size: clamp(31px, 10vw, 40px) !important;
  }

  .contract-loading-message {
    max-width: 390px !important;
    margin-top: 12px !important;
    font-size: 15px !important;
  }

  .contract-loading-visual {
    width: 100% !important;
    height: clamp(190px, 31vh, 245px) !important;
    margin: 20px auto 16px !important;
  }

  .contract-loading-pdf {
    width: min(41vw, 150px) !important;
    padding: 16px 8px !important;
  }

  .contract-loading-pdf svg {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 18px !important;
  }

  .contract-loading-pdf span {
    font-size: 10px !important;
  }

  .contract-loading-contract-page {
    width: min(62vw, 220px) !important;
    min-height: min(29vh, 250px) !important;
    padding: 22px 24px !important;
  }

  .contract-loading-contract-page strong {
    margin-bottom: 16px !important;
    font-size: 16px !important;
  }

  .contract-loading-contract-page span {
    margin-top: 10px !important;
  }

  .contract-loading-contract-page b {
    height: 24px !important;
  }

  .contract-loading-check {
    right: calc(50% - 135px) !important;
    bottom: 6px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .contract-loading-status {
    gap: 10px !important;
  }

  .contract-loading-status p {
    font-size: 14px !important;
  }

  .contract-loading-progress {
    margin-top: 18px !important;
  }

  .contract-loading-footer {
    padding-top: 18px !important;
  }
}

@media (max-width: 360px), (max-height: 680px) {
  .contract-loading-brand {
    min-height: 64px !important;
  }

  .contract-loading-content {
    padding-top: 6px !important;
  }

  .contract-loading-visual {
    height: 180px !important;
    margin-top: 14px !important;
  }

  .contract-loading-card h2 {
    font-size: 29px !important;
  }

  .contract-loading-message {
    font-size: 14px !important;
  }

  .contract-loading-footer {
    padding-top: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contract-loading-scan,
  .contract-loading-progress span {
    animation: none !important;
  }

  .contract-loading-progress span {
    width: 64% !important;
  }
}

/* v88 final contract progress design. Keep this last so retired loaders cannot leak through. */
.contract-loading-overlay {
  place-items: center !important;
  padding: clamp(14px, 4vw, 42px) !important;
  background: rgba(244, 247, 251, .97) !important;
}

.contract-loading-card {
  display: block !important;
  width: min(100%, 680px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - clamp(28px, 8vw, 84px)) !important;
  padding: clamp(24px, 5vw, 40px) clamp(22px, 6vw, 50px) !important;
  overflow: auto !important;
  border: 1px solid #dce3ec !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 20px 54px rgba(7, 20, 48, .1) !important;
}

.contract-loading-card::before,
.contract-loading-card::after {
  display: none !important;
  content: none !important;
}

.contract-loading-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 0 0 clamp(22px, 4vw, 32px) !important;
}

.contract-loading-brand img {
  width: clamp(142px, 26vw, 180px) !important;
  height: auto !important;
}

.contract-loading-content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.contract-loading-kicker {
  margin: 0 0 8px !important;
  color: #66758b !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .09em !important;
}

.contract-loading-card h2 {
  max-width: 580px !important;
  margin: 0 !important;
  color: #071430 !important;
  font-size: clamp(30px, 6vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1.08 !important;
}

.contract-loading-message {
  max-width: 500px !important;
  margin: 12px auto 0 !important;
  color: #53617c !important;
  font-size: clamp(15px, 2.2vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.contract-loading-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 88px !important;
  height: 88px !important;
  margin: clamp(24px, 5vw, 32px) auto 22px !important;
}

.contract-loading-visual > svg {
  position: relative !important;
  z-index: 2 !important;
  width: 33px !important;
  height: 33px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: #102343 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.7 !important;
}

.contract-loading-ring {
  position: absolute !important;
  inset: 0 !important;
  border: 5px solid #e5eaf0 !important;
  border-top-color: #12a66a !important;
  border-right-color: #12a66a !important;
  border-radius: 50% !important;
  animation: contract-loading-ring 1s linear infinite !important;
}

.contract-loading-pdf,
.contract-loading-contract-page,
.contract-loading-scan,
.contract-loading-check {
  display: none !important;
}

.contract-loading-status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #071430 !important;
}

.contract-loading-status > span {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px !important;
  border-radius: 50% !important;
  background: #12a66a !important;
  box-shadow: 0 0 0 5px #e5f7ef !important;
}

.contract-loading-status p {
  margin: 0 !important;
  font-size: clamp(14px, 2vw, 16px) !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
}

.contract-loading-progress {
  position: relative !important;
  width: min(100%, 500px) !important;
  height: 9px !important;
  margin-top: 20px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e9edf2 !important;
}

.contract-loading-progress span {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: var(--contract-loading-progress, 0%) !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #102343, #12a66a) !important;
  transform: none !important;
  animation: none !important;
  transition: width .42s ease !important;
}

.contract-loading-percent {
  margin: 8px 0 0 !important;
  color: #66758b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.contract-loading-footer {
  display: block !important;
  width: 100% !important;
  margin: clamp(22px, 4vw, 28px) 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid #e1e7f0 !important;
  color: #53617c !important;
  text-align: center !important;
}

.contract-loading-footer p {
  margin: 0 !important;
  font-size: clamp(13px, 1.8vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

@media (max-width: 600px) {
  .contract-loading-overlay { padding: 12px !important; }
  .contract-loading-card {
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 26px 22px 22px !important;
    border: 1px solid #dce3ec !important;
    border-radius: 19px !important;
    box-shadow: 0 14px 38px rgba(7, 20, 48, .09) !important;
  }
  .contract-loading-brand { min-height: 0 !important; margin-bottom: 24px !important; }
  .contract-loading-brand img { width: 142px !important; }
  .contract-loading-content { justify-content: flex-start !important; padding: 0 !important; }
  .contract-loading-visual { width: 76px !important; height: 76px !important; margin: 23px auto 21px !important; }
  .contract-loading-footer { padding-top: 17px !important; }
}

@media (max-height: 620px) {
  .contract-loading-brand { margin-bottom: 14px !important; }
  .contract-loading-visual { width: 62px !important; height: 62px !important; margin: 15px auto !important; }
  .contract-loading-visual > svg { width: 26px !important; height: 26px !important; }
  .contract-loading-footer { margin-top: 14px !important; padding-top: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .contract-loading-ring { animation: none !important; border-color: #12a66a !important; }
  .contract-loading-progress span { transition: none !important; width: var(--contract-loading-progress, 0%) !important; }
}

/* v89 approved split-image contract loading screen. */
.contract-loading-overlay {
  place-items: center !important;
  padding: clamp(16px, 3vw, 42px) !important;
  background: rgba(239, 245, 252, .97) !important;
}

.contract-loading-card {
  display: block !important;
  width: min(100%, 1260px) !important;
  min-height: min(82vh, 760px) !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 1px solid #dce6f1 !important;
  border-radius: 30px !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(31, 59, 94, .14) !important;
}

.contract-loading-main {
  display: grid !important;
  grid-template-columns: minmax(440px, .93fr) minmax(0, 1.22fr) !important;
  width: 100% !important;
  min-height: min(82vh, 760px) !important;
}

.contract-loading-copy {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  min-width: 0 !important;
  padding: clamp(44px, 5vw, 68px) clamp(40px, 5vw, 66px) clamp(44px, 5vw, 64px) !important;
  background: #fff !important;
}

.contract-loading-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.contract-loading-brand img {
  display: block !important;
  width: clamp(190px, 20vw, 242px) !important;
  max-width: 100% !important;
  height: auto !important;
}

.contract-loading-content {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: clamp(52px, 8vh, 96px) 0 24px !important;
  flex-direction: column !important;
  text-align: left !important;
}

.contract-loading-kicker,
.contract-loading-kicker:empty {
  display: none !important;
}

.contract-loading-card h2 {
  width: min(100%, 470px) !important;
  max-width: 470px !important;
  margin: 0 !important;
  color: #071735 !important;
  font-size: clamp(42px, 4.35vw, 58px) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
}

.contract-loading-message {
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  margin: clamp(26px, 4vh, 38px) 0 0 !important;
  color: #596d8c !important;
  font-size: clamp(17px, 1.45vw, 20px) !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
}

.contract-loading-status-row {
  display: flex !important;
  align-items: center !important;
  width: min(100%, 480px) !important;
  margin-top: clamp(32px, 5vh, 48px) !important;
  gap: 22px !important;
}

.contract-loading-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 62px !important;
  height: 62px !important;
  margin: 0 !important;
  flex: 0 0 62px !important;
}

.contract-loading-ring {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #eef5fd !important;
  box-shadow: 0 0 0 0 rgba(41, 126, 221, .15) !important;
  animation: contract-loading-soft-pulse 1.7s ease-in-out infinite !important;
}

.contract-loading-visual > svg {
  position: relative !important;
  z-index: 2 !important;
  width: 27px !important;
  height: 27px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: #2477d4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

.contract-loading-status {
  display: block !important;
  min-width: 0 !important;
  color: #0a1a38 !important;
}

.contract-loading-status p {
  margin: 0 !important;
  color: #0a1a38 !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.contract-loading-progress {
  position: relative !important;
  width: min(100%, 480px) !important;
  height: 11px !important;
  margin-top: 28px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #dfe9f5 !important;
}

.contract-loading-progress span {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: var(--contract-loading-progress, 0%) !important;
  border-radius: inherit !important;
  background: #3189e5 !important;
  transform: none !important;
  animation: none !important;
  transition: width .42s ease !important;
}

.contract-loading-percent {
  width: min(100%, 480px) !important;
  margin: 12px 0 0 !important;
  color: #276fbe !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.contract-loading-footer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  color: #637999 !important;
  text-align: left !important;
}

.contract-loading-footer p {
  margin: 0 !important;
  color: #637999 !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.contract-loading-media {
  position: relative !important;
  min-width: 0 !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 29px 29px 0 !important;
  background: #e9eef4 !important;
}

.contract-loading-media::before {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 1 !important;
  width: clamp(80px, 13vw, 180px) !important;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .88) 28%, rgba(255, 255, 255, 0) 100%) !important;
  content: "" !important;
  pointer-events: none !important;
}

.contract-loading-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: min(82vh, 760px) !important;
  object-fit: cover !important;
  object-position: 58% center !important;
}

@keyframes contract-loading-soft-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(41, 126, 221, .12); }
  50% { transform: scale(1.035); box-shadow: 0 0 0 8px rgba(41, 126, 221, 0); }
}

@media (max-width: 980px) {
  .contract-loading-card {
    width: min(100%, 760px) !important;
    min-height: 0 !important;
  }

  .contract-loading-main {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .contract-loading-copy {
    padding: clamp(34px, 6vw, 52px) clamp(28px, 7vw, 58px) 34px !important;
  }

  .contract-loading-content {
    padding: clamp(38px, 6vh, 62px) 0 22px !important;
  }

  .contract-loading-card h2,
  .contract-loading-message,
  .contract-loading-status-row,
  .contract-loading-progress,
  .contract-loading-percent {
    width: 100% !important;
    max-width: 600px !important;
  }

  .contract-loading-card h2 {
    font-size: clamp(38px, 7vw, 52px) !important;
  }

  .contract-loading-media {
    min-height: clamp(210px, 34vh, 330px) !important;
    border-radius: 0 0 29px 29px !important;
  }

  .contract-loading-media::before {
    inset: 0 0 auto !important;
    width: auto !important;
    height: 76px !important;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%) !important;
  }

  .contract-loading-media img {
    height: clamp(210px, 34vh, 330px) !important;
    min-height: 0 !important;
    object-position: center 52% !important;
  }
}

@media (max-width: 600px) {
  .contract-loading-overlay {
    padding: 0 !important;
  }

  .contract-loading-card {
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .contract-loading-copy {
    padding: 28px 24px 26px !important;
  }

  .contract-loading-brand img {
    width: 170px !important;
  }

  .contract-loading-content {
    padding: clamp(34px, 6vh, 52px) 0 20px !important;
  }

  .contract-loading-card h2 {
    font-size: clamp(35px, 10.5vw, 46px) !important;
  }

  .contract-loading-message {
    margin-top: 22px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .contract-loading-status-row {
    margin-top: 30px !important;
    gap: 16px !important;
  }

  .contract-loading-visual {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  .contract-loading-status p {
    font-size: 15px !important;
  }

  .contract-loading-progress {
    height: 9px !important;
    margin-top: 24px !important;
  }

  .contract-loading-footer {
    padding-top: 12px !important;
  }

  .contract-loading-media {
    min-height: 190px !important;
    border-radius: 0 !important;
  }

  .contract-loading-media img {
    height: 190px !important;
  }
}

@media (max-height: 680px) and (min-width: 981px) {
  .contract-loading-card,
  .contract-loading-main {
    min-height: calc(100vh - 24px) !important;
    min-height: calc(100dvh - 24px) !important;
  }

  .contract-loading-copy {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .contract-loading-content {
    padding-top: 32px !important;
    padding-bottom: 16px !important;
  }

  .contract-loading-card h2 {
    font-size: 42px !important;
  }

  .contract-loading-message {
    margin-top: 20px !important;
  }

  .contract-loading-status-row {
    margin-top: 26px !important;
  }

  .contract-loading-media img {
    min-height: calc(100vh - 24px) !important;
    min-height: calc(100dvh - 24px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contract-loading-ring {
    animation: none !important;
  }

  .contract-loading-progress span {
    transition: none !important;
  }
}

/* v87 document-first customer signing workspace. */
body.customer-sign-page {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: clamp(8px, 1vw, 16px) !important;
}

.customer-sign-page .sign-shell {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - clamp(16px, 2vw, 32px)) !important;
  min-height: calc(100dvh - clamp(16px, 2vw, 32px)) !important;
}

.customer-sign-page .sign-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  margin-bottom: 10px !important;
  padding: 12px clamp(16px, 1.8vw, 28px) !important;
  border-top-width: 5px !important;
  border-radius: 16px !important;
}

.customer-sign-page .brand-row {
  margin: 0 !important;
}

.customer-sign-page .buxton-signing-brand {
  width: clamp(142px, 11vw, 182px) !important;
  max-width: none !important;
}

.customer-sign-page .header-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.customer-sign-page .header-main > div {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.customer-sign-page .header-main h1 {
  margin: 0 !important;
  color: #0967ef !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.customer-sign-page .header-main p {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #526079 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.customer-sign-page .open-pdf-btn,
.customer-sign-page .secondary-btn {
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

.customer-sign-page .notice-stack {
  margin: 0 0 10px !important;
}

.customer-sign-page .sign-layout {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 640px !important;
  height: calc(100vh - 110px) !important;
  height: calc(100dvh - 110px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
  gap: clamp(10px, 1vw, 16px) !important;
  align-items: stretch !important;
}

.customer-sign-page .pdf-card,
.customer-sign-page .sign-card {
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(12px, 1.1vw, 18px) !important;
  border-radius: 16px !important;
}

.customer-sign-page .pdf-card {
  display: flex !important;
  flex-direction: column !important;
}

.customer-sign-page .card-head {
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}

.customer-sign-page .card-head h2 {
  font-size: clamp(24px, 2vw, 30px) !important;
}

.customer-sign-page .card-head p {
  margin-top: 5px !important;
  font-size: 13px !important;
}

.customer-sign-page .pdf-frame-wrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 11px !important;
}

.customer-sign-page .sign-card {
  position: sticky !important;
  top: 8px !important;
  max-height: 100% !important;
  overflow: hidden auto !important;
  scrollbar-gutter: stable !important;
}

.customer-sign-page .sign-card .card-head.simple {
  margin-bottom: 12px !important;
}

.customer-sign-page .sign-tabs {
  margin-bottom: 10px !important;
}

.customer-sign-page .sign-panel.active {
  gap: 10px !important;
}

.customer-sign-page .field-card {
  gap: 7px !important;
  padding: 12px !important;
  border-radius: 11px !important;
}

.customer-sign-page .field-card input {
  min-height: 46px !important;
}

.customer-sign-page .signature-preview {
  min-height: 126px !important;
  padding: 16px !important;
  border-radius: 11px !important;
  font-size: clamp(38px, 3.6vw, 56px) !important;
}

.customer-sign-page .agreement-row {
  margin: 12px 0 !important;
}

.customer-sign-page .submit-signature-btn {
  min-height: 54px !important;
}

@media (max-width: 1180px) {
  .customer-sign-page .sign-layout {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .customer-sign-page .pdf-card {
    height: clamp(640px, calc(100vh - 110px), 920px) !important;
    height: clamp(640px, calc(100dvh - 110px), 920px) !important;
  }

  .customer-sign-page .sign-card {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 700px) {
  body.customer-sign-page {
    padding: 6px !important;
  }

  .customer-sign-page .sign-shell {
    min-height: calc(100vh - 12px) !important;
    min-height: calc(100dvh - 12px) !important;
  }

  .customer-sign-page .sign-header {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .customer-sign-page .buxton-signing-brand {
    width: 142px !important;
  }

  .customer-sign-page .header-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .customer-sign-page .header-main > div {
    display: block !important;
  }

  .customer-sign-page .header-main h1 {
    display: none !important;
  }

  .customer-sign-page .header-main p {
    font-size: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .customer-sign-page .header-main .open-pdf-btn {
    width: auto !important;
    min-height: 38px !important;
  }

  .customer-sign-page .pdf-card,
  .customer-sign-page .sign-card {
    padding: 11px !important;
    border-radius: 12px !important;
  }

  .customer-sign-page .pdf-card {
    height: 74vh !important;
    height: 74dvh !important;
    min-height: 500px !important;
  }

  .customer-sign-page .card-head {
    flex-direction: row !important;
    align-items: center !important;
  }

  .customer-sign-page .card-head .secondary-btn {
    width: auto !important;
  }

  .customer-sign-page .card-head h2 {
    font-size: 23px !important;
  }

  .customer-sign-page .card-head p {
    font-size: 12px !important;
  }
}

@media (max-height: 760px) and (min-width: 1181px) {
  .customer-sign-page .sign-layout {
    min-height: 590px !important;
  }

  .customer-sign-page .sign-header {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .customer-sign-page .signature-preview {
    min-height: 104px !important;
  }
}

/* Customer workspace and intelligent scheduling */
.page-customer-hub,
.page-customer-workspace {
  background: #f5f7fb;
  color: #071430;
}

.customer-app-shell .app-main {
  width: auto;
  max-width: none;
  margin-left: var(--sidebar-width, 288px);
  padding: clamp(24px, 3vw, 48px);
}

.customer-page-header,
.customer-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.customer-page-header h1,
.customer-profile-header h1 {
  margin: 2px 0 7px;
  color: #071430;
  font-size: clamp(36px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.045em;
}

.customer-page-header > div > p:last-child,
.customer-profile-header p {
  margin: 0;
  color: #66738d;
  font-size: 16px;
  font-weight: 600;
}

.customer-kicker {
  margin: 0;
  color: #0967ef;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.crm-primary-btn,
.crm-secondary-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  padding: 0 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.crm-primary-btn {
  border: 1px solid #0967ef;
  background: #0967ef;
  color: #fff;
}

.crm-primary-btn:hover { background: #0759d1; transform: translateY(-1px); }
.crm-primary-btn:active { transform: translateY(0); }
.crm-secondary-btn { border: 1px solid #d6deeb; background: #fff; color: #071430; }
.crm-secondary-btn:hover { border-color: #9db0cb; background: #f8fafc; }
.crm-primary-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.crm-primary-btn.wide, .crm-secondary-btn.wide { width: 100%; }

.customer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 34px 0 20px;
}

.customer-toolbar > span { color: #77839a; font-weight: 750; }
.customer-search-form { position: relative; width: min(100%, 580px); }
.customer-search-form svg { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #66738d; stroke-width: 2; }
.customer-search-form input { width: 100%; min-height: 52px; border: 1px solid #d9e1ed; border-radius: 14px; background: #fff; padding: 0 18px 0 50px; color: #071430; font: inherit; font-weight: 650; }
.customer-search-form input:focus { border-color: #6ba7ff; outline: 3px solid rgba(9,103,239,.12); }

.customer-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.customer-directory-card { display: flex; min-height: 278px; flex-direction: column; border: 1px solid #dfe5ef; border-radius: 20px; background: #fff; padding: 22px; color: #071430; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.customer-directory-card:hover { transform: translateY(-3px); border-color: #a8c9f7; box-shadow: 0 16px 34px rgba(7,20,48,.08); }
.customer-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.customer-avatar, .customer-profile-avatar { display: grid; place-items: center; border-radius: 50%; background: #e9f3ff; color: #0967ef; font-weight: 900; }
.customer-avatar { width: 48px; height: 48px; font-size: 19px; }
.customer-directory-card h2 { margin: 22px 0 5px; font-size: 23px; letter-spacing: -.02em; }
.customer-address { min-height: 42px; margin: 0; color: #68758e; line-height: 1.45; }
.customer-card-meta { display: grid; gap: 8px; margin-top: 18px; }
.customer-card-meta span { display: flex; min-width: 0; align-items: center; gap: 9px; color: #4f5d77; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.customer-card-meta svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: #8794aa; stroke-width: 1.8; }
.customer-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; border-top: 1px solid #edf0f5; padding-top: 16px; color: #6b7890; font-size: 13px; }
.customer-card-footer strong { color: #071430; }

.crm-status { display: inline-flex; width: fit-content; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 10px; background: #eef2f7; color: #526078; font-size: 11px; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.crm-status-new, .crm-status-pending { background: #fff3d9; color: #9a5b00; }
.crm-status-consultation, .crm-status-scheduled { background: #e8f3ff; color: #0865c9; }
.crm-status-quoted { background: #f0ebff; color: #6044b6; }
.crm-status-active { background: #e9f8f0; color: #087a4c; }
.crm-status-complete, .crm-status-signed, .crm-status-confirmed { background: #e4f8ec; color: #07814d; }

.customer-empty-state { display: grid; min-height: 430px; place-items: center; align-content: center; border: 1px dashed #cdd8e8; border-radius: 22px; background: #fff; padding: 40px; text-align: center; }
.customer-empty-state > span { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 20px; background: #eaf3ff; }
.customer-empty-state svg { width: 32px; height: 32px; fill: none; stroke: #0967ef; stroke-width: 1.8; }
.customer-empty-state h2 { margin: 20px 0 7px; font-size: 26px; }
.customer-empty-state p { max-width: 540px; margin: 0; color: #68758e; line-height: 1.6; }

.crm-modal[hidden] { display: none; }
.crm-modal { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; padding: 20px; }
.crm-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(7,20,48,.56); backdrop-filter: blur(6px); }
.crm-modal-card { position: relative; width: min(100%, 760px); max-height: calc(100vh - 40px); overflow: auto; border-radius: 22px; background: #fff; padding: 28px; box-shadow: 0 30px 90px rgba(7,20,48,.24); }
.crm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.crm-modal-head h2 { margin: 4px 0 0; font-size: 32px; }
.crm-modal-head > button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 12px; background: #071430; color: #fff; font-size: 26px; cursor: pointer; }
body.modal-open { overflow: hidden; }

.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.crm-form-grid label, .appointment-details-form label { display: grid; gap: 7px; color: #34415b; font-size: 12px; font-weight: 850; }
.crm-form-grid input, .crm-form-grid select, .appointment-details-form input, .appointment-details-form select, .note-composer textarea { width: 100%; min-height: 48px; border: 1px solid #d7dfeb; border-radius: 11px; background: #fff; padding: 0 13px; color: #071430; font: inherit; font-weight: 650; }
.crm-form-grid input:focus, .crm-form-grid select:focus, .appointment-details-form input:focus, .appointment-details-form select:focus, .note-composer textarea:focus { border-color: #70a9f8; outline: 3px solid rgba(9,103,239,.1); }
.span-2 { grid-column: 1 / -1; }
.crm-modal-actions, .form-end { display: flex; justify-content: flex-end; gap: 10px; padding-top: 10px; }

.customer-workspace-main { max-width: 1760px !important; }
.customer-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #65728b; font-size: 13px; font-weight: 800; text-decoration: none; }
.customer-back-link:hover { color: #0967ef; }
.customer-profile-header { border: 1px solid #dfe5ef; border-radius: 22px; background: #fff; padding: 24px 28px; }
.customer-profile-identity { display: flex; min-width: 0; align-items: center; gap: 18px; }
.customer-profile-identity > div { min-width: 0; }
.customer-profile-avatar { width: 62px; height: 62px; flex: 0 0 auto; font-size: 23px; }
.customer-title-row { display: flex; align-items: center; gap: 13px; }
.customer-profile-header h1 { font-size: clamp(30px, 3vw, 43px); }
.customer-profile-contact { display: flex; max-width: 560px; flex-wrap: wrap; justify-content: flex-end; gap: 9px 18px; }
.customer-profile-contact a, .customer-profile-contact span { display: flex; min-width: 0; align-items: center; gap: 8px; color: #48566f; font-size: 13px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.customer-profile-contact a:hover { color: #0967ef; }
.customer-profile-contact svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #8290a6; stroke-width: 1.8; }

.customer-tabs { display: flex; gap: 26px; margin-top: 24px; border-bottom: 1px solid #dce3ee; }
.customer-tabs button { position: relative; display: flex; min-height: 48px; align-items: center; gap: 7px; border: 0; background: transparent; padding: 0 2px; color: #6a7690; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.customer-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: #0967ef; content: ""; opacity: 0; transform: scaleX(.5); transition: .18s ease; }
.customer-tabs button.is-active { color: #071430; }
.customer-tabs button.is-active::after { opacity: 1; transform: scaleX(1); }
.customer-tabs button span { border-radius: 999px; background: #eaf2ff; padding: 2px 7px; color: #0967ef; font-size: 10px; }
.customer-tab-panel { display: none; padding-top: 24px; }
.customer-tab-panel.is-active { display: block; animation: crm-panel-in .22s ease both; }
@keyframes crm-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; align-items: start; }
.schedule-calendar-card, .schedule-recommendation-card, .crm-content-card, .appointment-details-strip { border: 1px solid #dfe5ef; border-radius: 20px; background: #fff; }
.schedule-calendar-card { min-width: 0; padding: 22px; overflow-x: auto; overflow-y: hidden; }
.schedule-card-head, .contracts-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.schedule-card-head h2, .crm-content-card h2, .schedule-recommendation-card h2, .contracts-panel-head h2 { margin: 3px 0 0; color: #071430; font-size: 24px; letter-spacing: -.025em; }
.week-controls { display: flex; align-items: center; gap: 6px; }
.week-controls a { display: grid; min-width: 36px; height: 36px; place-items: center; border: 1px solid #dbe3ef; border-radius: 10px; color: #33415a; font-size: 17px; font-weight: 850; text-decoration: none; }
.week-controls a:nth-child(2) { padding: 0 13px; font-size: 12px; }
.week-controls a:hover { border-color: #a9b9d0; background: #f7f9fc; }

.crm-week-calendar { display: grid; grid-template-columns: 58px repeat(7, minmax(90px, 1fr)); grid-template-rows: 58px 600px; min-width: 780px; border: 1px solid #e4e9f1; border-radius: 14px; overflow: auto hidden; }
.calendar-time-head { border-right: 1px solid #e7ebf2; border-bottom: 1px solid #e7ebf2; }
.calendar-day-head { display: flex; align-items: center; justify-content: center; gap: 7px; border-right: 1px solid #e7ebf2; border-bottom: 1px solid #e7ebf2; color: #718099; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.calendar-day-head strong { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #071430; font-size: 13px; }
.calendar-time-column { position: relative; grid-column: 1; grid-row: 2; border-right: 1px solid #e7ebf2; background: #fbfcfe; }
.calendar-time-column span { position: absolute; right: 8px; color: #8a96a9; font-size: 9px; font-weight: 750; transform: translateY(-5px); }
.calendar-grid-body { position: relative; grid-column: 2 / 9; grid-row: 2; background: repeating-linear-gradient(to right, transparent 0, transparent calc(14.285% - 1px), #edf0f5 calc(14.285% - 1px), #edf0f5 14.285%); }
.calendar-grid-body > i { position: absolute; right: 0; left: 0; height: 1px; background: #edf0f5; }
.calendar-event { position: absolute; z-index: 2; top: var(--event-top); left: calc((100% / 7) * var(--event-day) + 5px); width: calc(100% / 7 - 10px); height: var(--event-height); min-height: 34px; overflow: hidden; border-left: 3px solid #168c61; border-radius: 7px; background: #e7f7f0; padding: 7px 8px; color: #075d40; }
.calendar-event strong, .calendar-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event strong { font-size: 10px; }.calendar-event span { margin-top: 2px; font-size: 9px; }
.calendar-event.event-scheduled { border-left-color: #0967ef; background: #e8f2ff; color: #0757bb; }

.schedule-recommendation-card { position: sticky; top: 22px; padding: 25px; }
.recommendation-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #fff4df; color: #b56800; margin-bottom: 18px; }
.recommendation-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.recommended-time { display: block; margin-top: 6px; color: #0967ef; font-size: 29px; letter-spacing: -.03em; }
.recommendation-facts { display: grid; gap: 10px; margin: 23px 0; border-top: 1px solid #e7ebf2; border-bottom: 1px solid #e7ebf2; padding: 18px 0; }
.recommendation-facts span { display: flex; align-items: center; gap: 10px; color: #526078; font-size: 13px; font-weight: 700; }
.recommendation-facts svg { width: 18px; height: 18px; fill: none; stroke: #7e8da4; stroke-width: 1.8; }
.availability-form { display: grid; gap: 8px; margin-top: 18px; }
.availability-form > p { margin: 0 0 3px; color: #6e7b92; font-size: 12px; font-weight: 750; }
.availability-form label { position: relative; display: block; cursor: pointer; }
.availability-form input { position: absolute; opacity: 0; }
.availability-form label span { display: flex; justify-content: space-between; gap: 8px; border: 1px solid #dfe5ef; border-radius: 10px; padding: 10px 11px; color: #69768d; font-size: 11px; }
.availability-form input:checked + span { border-color: #8ab9fa; background: #f1f7ff; color: #075dc9; }
.availability-form label b { color: #071430; }
.crm-test-mode-banner { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; border: 1px solid #f3ca7c; border-radius: 15px; background: #fffaf0; padding: 14px 17px; color: #6b4905; }
.crm-test-mode-banner > span { flex: 0 0 auto; border-radius: 7px; background: #9b6500; padding: 6px 9px; color: #fff; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.crm-test-mode-banner strong, .crm-test-mode-banner p { display: block; margin: 0; }
.crm-test-mode-banner strong { color: #4b3304; font-size: 13px; }
.crm-test-mode-banner p { margin-top: 2px; color: #806529; font-size: 12px; line-height: 1.45; }
.availability-form [data-availability-picker] { display: grid; gap: 8px; }
.availability-form [data-availability-picker] > p { margin: 0 0 3px; color: #6e7b92; font-size: 12px; font-weight: 750; }
.availability-test-confirm { display: grid; gap: 15px; border: 1px solid #f0c66f; border-radius: 14px; background: #fffbf2; padding: 15px; }
.availability-test-confirm[hidden], .availability-form [data-availability-picker][hidden] { display: none !important; }
.availability-test-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.availability-test-head span { border-radius: 7px; background: #9b6500; padding: 5px 7px; color: #fff; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.availability-test-head strong { color: #765008; font-size: 11px; }
.availability-test-confirm dl { display: grid; gap: 8px; margin: 0; }
.availability-test-confirm dl div { display: grid; gap: 2px; }
.availability-test-confirm dt, .availability-test-confirm small { color: #89733f; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.availability-test-confirm dd { margin: 0; color: #071430; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.availability-email-preview { display: grid; gap: 7px; }
.availability-email-preview > div { border: 1px solid #ead8ae; border-radius: 11px; background: #fff; padding: 12px; }
.availability-email-preview strong { color: #071430; font-size: 11px; }
.availability-email-preview p { margin: 5px 0 10px; color: #59667c; font-size: 10px; line-height: 1.45; }
.availability-email-preview span { display: inline-flex; border-radius: 8px; background: #071430; padding: 7px 10px; color: #fff; font-size: 9px; font-weight: 850; }
.availability-test-confirm ul { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.availability-test-confirm li { border-radius: 8px; background: #fff; padding: 8px 9px; color: #39465d; font-size: 10px; font-weight: 750; }
.availability-test-confirm > p { margin: 0; color: #786536; font-size: 10px; line-height: 1.5; }
.availability-test-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.availability-test-actions button { min-width: 0; padding-right: 10px; padding-left: 10px; }
.availability-selection-error { margin: 0 !important; border-radius: 8px; background: #fff2f2; padding: 8px 10px; color: #b42318 !important; font-size: 10px !important; font-weight: 800 !important; }
.communication-test-history { display: grid; gap: 8px; margin-top: 16px; border-top: 1px solid #e5eaf1; padding-top: 15px; }
.communication-test-history > div { display: flex; align-items: center; justify-content: space-between; color: #6c7990; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.communication-test-history > div strong { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; background: #eef2f7; color: #4c5a70; }
.communication-test-history article { position: relative; display: grid; gap: 2px; border: 1px solid #e2e7ef; border-radius: 9px; background: #fff; padding: 9px 58px 9px 10px; }
.communication-test-history article b { color: #17233c; font-size: 10px; }.communication-test-history article small { color: #77849a; font-size: 9px; overflow-wrap: anywhere; }
.communication-test-history article em { position: absolute; top: 50%; right: 9px; border-radius: 999px; background: #fff4df; padding: 4px 7px; color: #875900; font-size: 8px; font-style: normal; font-weight: 900; transform: translateY(-50%); }
@media (max-width: 560px) {
  .crm-test-mode-banner { align-items: flex-start; }
  .availability-test-actions { grid-template-columns: 1fr; }
}

.appointment-details-strip { margin-top: 18px; overflow: hidden; }
.appointment-details-strip summary { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 22px; padding: 17px 22px; cursor: pointer; list-style: none; }
.appointment-details-strip summary::-webkit-details-marker { display: none; }
.appointment-details-strip summary > div { display: flex; align-items: center; gap: 13px; }
.details-strip-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #edf4ff; color: #0967ef; }
.details-strip-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.appointment-details-strip summary b, .appointment-details-strip summary small { display: block; }.appointment-details-strip summary b { color: #071430; font-size: 14px; }.appointment-details-strip summary small { margin-top: 3px; color: #7a879c; font-size: 11px; }
.appointment-summary { display: flex; align-items: center; gap: 16px; color: #49566f; font-size: 13px; }
.appointment-summary i { width: 4px; height: 4px; border-radius: 50%; background: #c1cad8; }
.priority-high, .priority-urgent { color: #c86600 !important; }.priority-low { color: #718099 !important; }
.appointment-details-strip summary em { font-size: 20px; font-style: normal; transition: transform .18s ease; }
.appointment-details-strip[open] summary em { transform: rotate(180deg); }
.appointment-details-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border-top: 1px solid #e5eaf2; background: #fbfcfe; padding: 20px 22px; }
.appointment-details-form .crm-primary-btn { align-self: end; }

.customer-content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 20px; align-items: start; }
.crm-content-card { padding: 25px; }
.crm-content-card > h2 { margin-bottom: 22px; }
.project-glance-card dl { display: grid; gap: 0; margin: 0; }
.project-glance-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e9edf3; padding: 15px 0; }.project-glance-card dl div:last-child { border: 0; }
.project-glance-card dt { color: #6b7890; font-size: 13px; font-weight: 700; }.project-glance-card dd { margin: 0; color: #071430; font-size: 13px; font-weight: 850; text-align: right; }

.customer-notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 370px); gap: 20px; align-items: start; }
.customer-note-thread { display: grid; gap: 0; }
.customer-note-thread article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 13px; border-top: 1px solid #e8edf4; padding: 18px 0; }
.customer-note-thread article > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: #eaf3ff; color: #0967ef; font-weight: 900; }
.customer-note-thread header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-note-thread header strong { font-size: 13px; }.customer-note-thread time { color: #8a96a9; font-size: 11px; }
.customer-note-thread p { margin: 7px 0 0; color: #4f5d76; line-height: 1.55; white-space: pre-wrap; }
.note-composer { position: sticky; top: 22px; }
.note-composer h2 { margin-bottom: 5px; }.note-composer > p { margin: 0 0 17px; color: #748198; font-size: 13px; }
.note-composer textarea { min-height: 180px; resize: vertical; padding: 13px; line-height: 1.5; }.note-composer form { display: grid; gap: 12px; }
.inline-empty { border: 1px dashed #ccd7e7; border-radius: 15px; padding: 32px; text-align: center; }.inline-empty h3 { margin: 0 0 6px; }.inline-empty p { margin: 0; color: #718098; }

.contracts-panel-head { margin-bottom: 20px; }.customer-contract-list { display: grid; gap: 10px; }
.customer-contract-list > a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 20px; align-items: center; gap: 13px; border: 1px solid #e0e6ef; border-radius: 13px; padding: 13px; color: #071430; text-decoration: none; transition: .16s ease; }
.customer-contract-list > a:hover { border-color: #a9c7ef; background: #f8fbff; }
.contract-doc-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: #eef4ff; color: #0967ef; }.contract-doc-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.customer-contract-list strong, .customer-contract-list small { display: block; }.customer-contract-list small { margin-top: 3px; color: #77849a; }.customer-contract-list em { color: #7c8aa0; font-size: 24px; font-style: normal; }

.customer-booking-page { min-height: 100vh; background: #f2f6fb; padding: clamp(16px, 4vw, 50px); color: #071430; font-family: inherit; }
.booking-shell { width: min(100%, 680px); margin: 0 auto; border: 1px solid #dfe6ef; border-radius: 24px; background: #fff; padding: clamp(25px, 5vw, 48px); text-align: center; box-shadow: 0 22px 60px rgba(7,20,48,.09); }
.booking-logo { width: min(100%, 230px); height: auto; margin-bottom: 44px; }
.booking-shell h1 { margin: 7px 0 12px; font-size: clamp(34px, 7vw, 50px); line-height: 1.02; letter-spacing: -.045em; }.booking-intro { max-width: 500px; margin: 0 auto 28px; color: #63708a; line-height: 1.6; }
.booking-slot-list { display: grid; gap: 11px; text-align: left; }.booking-slot-list label { position: relative; cursor: pointer; }.booking-slot-list input { position: absolute; opacity: 0; }.booking-slot-list label span { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid #dce3ed; border-radius: 13px; padding: 16px 18px; }.booking-slot-list input:checked + span { border-color: #0967ef; background: #eff6ff; box-shadow: 0 0 0 3px rgba(9,103,239,.1); }.booking-slot-list label b { font-size: 14px; }.booking-slot-list label strong { color: #0967ef; font-size: 17px; }.booking-slot-list button { margin-top: 10px; }
.booking-success-icon { display: grid; width: 64px; height: 64px; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: #e8f8ef; color: #07804d; }.booking-success-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2.2; }.booking-confirmation { display: grid; gap: 4px; border-radius: 15px; background: #f5f8fc; padding: 18px; }.booking-confirmation span { color: #66738d; }.booking-shell footer { margin-top: 38px; color: #8a96a8; font-size: 12px; }

@media (max-width: 1380px) {
  .customer-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1120px) {
  .page-customer-hub .app-sidebar,
  .page-customer-workspace .app-sidebar { display: none !important; }
  .page-customer-hub .mobile-nav,
  .page-customer-workspace .mobile-nav {
    position: fixed !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(54px, 1fr)) !important;
    gap: 2px !important;
    overflow-x: auto !important;
    border: 1px solid #dfe5ef !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    padding: 7px !important;
    box-shadow: 0 16px 44px rgba(7,20,48,.14) !important;
    backdrop-filter: blur(16px) !important;
  }
  .page-customer-hub .mobile-nav a,
  .page-customer-workspace .mobile-nav a {
    display: grid !important;
    min-width: 54px !important;
    min-height: 56px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    border-radius: 12px !important;
    padding: 4px 2px !important;
    color: #66738d !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-decoration: none !important;
  }
  .page-customer-hub .mobile-nav a span,
  .page-customer-workspace .mobile-nav a span { display: grid !important; place-items: center !important; }
  .page-customer-hub .mobile-nav svg,
  .page-customer-workspace .mobile-nav svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }
  .page-customer-hub .mobile-nav a.active,
  .page-customer-workspace .mobile-nav a.active { background: #eaf3ff !important; color: #0967ef !important; }
  .customer-app-shell .app-main { margin-left: 0; padding-bottom: 96px; }
  .schedule-layout { grid-template-columns: 1fr; }
  .schedule-recommendation-card, .note-composer { position: static; }
  .schedule-recommendation-card { display: grid; grid-template-columns: minmax(0, 1fr); }
  .customer-content-grid, .customer-notes-layout { grid-template-columns: 1fr; }
  .appointment-details-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .customer-app-shell .app-main { padding: 18px 14px 92px; }
  .customer-page-header, .customer-profile-header { align-items: stretch; flex-direction: column; }
  .customer-page-header .crm-primary-btn { width: 100%; }
  .customer-directory-grid { grid-template-columns: 1fr; }
  .customer-toolbar { align-items: stretch; flex-direction: column; }.customer-toolbar > span { text-align: right; }
  .customer-profile-header { min-width: 0; padding: 18px; }
  .customer-profile-identity { width: 100%; align-items: flex-start; }
  .customer-profile-avatar { width: 50px; height: 50px; }
  .customer-title-row { width: 100%; min-width: 0; align-items: flex-start; flex-direction: column; gap: 7px; }
  .customer-profile-header h1 { max-width: 100%; overflow-wrap: anywhere; }
  .customer-profile-header p { overflow-wrap: anywhere; }
  .customer-profile-contact { display: grid; width: 100%; max-width: 100%; grid-template-columns: 1fr; justify-content: stretch; }
  .customer-profile-contact a, .customer-profile-contact span { width: 100%; max-width: 100%; }
  .customer-tabs { width: 100%; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .customer-tabs::-webkit-scrollbar { display: none; }
  .customer-tabs button { width: auto !important; min-width: max-content; max-width: none !important; flex: 0 0 auto; justify-content: center; padding: 0 14px; white-space: nowrap; }
  .schedule-calendar-card { padding: 14px; }.schedule-card-head { align-items: flex-start; flex-direction: column; }.crm-week-calendar { min-width: 720px; }
  .schedule-recommendation-card { padding: 20px; }.appointment-details-strip summary { align-items: flex-start; }.appointment-summary { display: none; }
  .appointment-details-form, .crm-form-grid { grid-template-columns: 1fr; }.appointment-details-form .span-2, .crm-form-grid .span-2 { grid-column: auto; }
  .crm-modal-card { max-height: calc(100vh - 20px); padding: 20px; }.crm-modal { padding: 10px; }
  .customer-contract-list > a { grid-template-columns: 40px minmax(0, 1fr) 18px; }.customer-contract-list .crm-status { grid-column: 2; width: fit-content; }.customer-contract-list em { grid-column: 3; grid-row: 1 / 3; }
  .customer-booking-page { padding: 0; background: #fff; }
  .booking-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }.booking-logo { margin-bottom: 32px; }.booking-slot-list label span { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-tab-panel.is-active, .customer-directory-card, .crm-primary-btn { animation: none; transition: none; }
}

/* Keep the shared destinations on one compact mobile row. */
@media (max-width: 920px) {
  body.page-customer-hub .mobile-nav,
  body.page-customer-workspace .mobile-nav {
    grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
  }
}

/* Compact template manager and always-visible Designer field workflow. */
.template-manager-clean .app-main { max-width: none; }
.template-clean-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.template-clean-header h1 { margin: 3px 0 5px; font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.template-clean-header > div > p:last-child { margin: 0; color: #62708b; font-size: 16px; }
.template-clean-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.template-clean-actions .primary-btn,
.template-clean-actions .secondary-btn { min-height: 52px; }

.template-active-panel {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid #dce5f0;
  border-radius: 20px;
  background: #fff;
}
.template-active-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 17px;
  background: #eaf3ff;
  color: #0d6bed;
}
.template-active-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.template-active-copy > span { color: #68758f; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.template-active-copy h2 { margin: 3px 0 8px; font-size: clamp(21px, 2vw, 28px); overflow-wrap: anywhere; }
.template-active-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; color: #697792; font-size: 14px; font-weight: 700; }
.template-active-layout { display: grid; justify-items: end; gap: 8px; }
.template-active-layout a { color: #0767df; font-size: 14px; font-weight: 850; text-decoration: none; }
.template-layout-pill { display: inline-flex; align-items: center; min-height: 32px; border-radius: 999px; padding: 0 13px; font-size: 12px; font-weight: 900; }
.template-layout-pill.is-ready { background: #e9faf2; color: #087a4e; }
.template-layout-pill.is-needed { background: #fff3df; color: #966000; }

.template-add-panel,
.template-library-clean {
  margin-top: 18px;
  border: 1px solid #dce5f0;
  border-radius: 20px;
  background: #fff;
}
.template-add-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 82px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}
.template-add-panel > summary::-webkit-details-marker { display: none; }
.template-add-panel > summary > span:first-child { display: grid; gap: 4px; }
.template-add-panel > summary strong { font-size: 20px; }
.template-add-panel > summary small { color: #697792; font-size: 14px; }
.template-summary-plus { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #f1f6fc; color: #0b2147; font-size: 25px; transition: transform .2s ease; }
.template-add-panel[open] .template-summary-plus { transform: rotate(45deg); }
.template-add-panel form { border-top: 1px solid #e3e9f2; padding: 22px 24px 24px; }
.template-upload-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; margin-bottom: 18px; }
.template-manager-clean .upload-card,
.template-manager-clean .notes-card { min-height: 154px; }
.template-manager-clean .notes-card span { display: flex; justify-content: space-between; gap: 12px; }
.template-manager-clean .notes-card small { color: #8490a7; font-weight: 750; }

.template-library-clean { padding: 24px; }
.template-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.template-library-head h2 { margin: 2px 0 0; font-size: clamp(28px, 3vw, 38px); }
.template-library-head > span { color: #6e7b94; font-weight: 800; }
.template-library-list { display: grid; gap: 12px; }
.template-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 19px 20px;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background: #fbfcfe;
}
.template-library-row.is-active { border-color: #8de1bd; background: #f1fbf6; }
.template-library-main { min-width: 0; }
.template-library-main p { margin: 7px 0 0; color: #63718b; }
.template-version-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.template-version-title > strong { font-size: 18px; overflow-wrap: anywhere; }
.template-version-meta { display: flex; flex-wrap: wrap; gap: 5px 17px; margin-top: 9px; color: #71809a; font-size: 13px; font-weight: 750; }
.template-library-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.template-library-actions form { margin: 0; }
.template-library-actions .primary-btn,
.template-library-actions .secondary-btn,
.template-delete-btn { min-width: 108px; min-height: 44px; justify-content: center; border-radius: 12px; padding: 0 17px; }
.template-delete-btn { border: 1px solid #ffd2da; background: #fff5f7; color: #d7193f; font: inherit; font-weight: 850; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.template-delete-btn:hover { border-color: #ed1845; background: #ffe9ee; transform: translateY(-1px); }

.template-page-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 20px;
  margin-bottom: 16px;
  padding: 17px 18px 14px;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  background: #fff;
}
.template-page-strip .template-panel-heading { grid-column: 1; align-self: center; }
.template-page-strip .template-page-summary { grid-column: 1; align-self: center; min-width: 142px; }
.template-page-strip .template-page-thumbnails {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex !important;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 7px;
  scroll-snap-type: x proximity;
}
.template-page-strip .template-page-thumbnail { flex: 0 0 104px; width: 104px; scroll-snap-align: start; }
.template-page-strip .template-page-thumbnail canvas,
.template-page-strip .template-page-thumbnail img { max-height: 116px; object-fit: contain; }
.template-editor-shell { grid-template-columns: minmax(245px, 285px) minmax(0, 1fr) minmax(270px, 310px); align-items: start; }
.template-toolbox { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; }
.template-toolbox .template-field-browser { border-top: 0; padding-top: 0; }
.template-field-box[data-key="designer_signature"] .template-field-content { font-family: "Brush Script MT", "Segoe Script", cursive; font-style: italic; }

@media (max-width: 1100px) {
  .template-editor-shell { grid-template-columns: minmax(225px, 260px) minmax(0, 1fr); }
  .template-properties { position: static; grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .template-clean-header { align-items: stretch; flex-direction: column; }
  .template-clean-actions { width: 100%; }
  .template-clean-actions > * { flex: 1 1 0; }
  .template-active-panel { grid-template-columns: 54px minmax(0, 1fr); }
  .template-active-icon { width: 54px; height: 54px; }
  .template-active-layout { grid-column: 1 / -1; justify-items: start; }
  .template-upload-grid { grid-template-columns: 1fr; }
  .template-library-row { grid-template-columns: 1fr; }
  .template-library-actions { justify-content: flex-start; }
  .template-page-strip { grid-template-columns: 1fr; }
  .template-page-strip .template-panel-heading,
  .template-page-strip .template-page-summary,
  .template-page-strip .template-page-thumbnails { grid-column: 1; grid-row: auto; }
  .template-page-strip .template-page-summary { display: flex; justify-content: space-between; min-width: 0; }
  .template-editor-shell { display: flex; flex-direction: column; }
  .template-toolbox,
  .template-properties { position: static; width: 100%; max-height: none; order: 0; }
  .template-canvas-panel { width: 100%; order: 1; }
  .template-properties { order: 2; }
}
@media (max-width: 560px) {
  .template-clean-actions { flex-direction: column; }
  .template-clean-actions > * { width: 100%; }
  .template-active-panel { padding: 19px; }
  .template-add-panel > summary,
  .template-add-panel form,
  .template-library-clean { padding-left: 17px; padding-right: 17px; }
  .template-library-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .template-library-actions > a:first-child { grid-column: 1 / -1; }
  .template-library-actions form,
  .template-library-actions button,
  .template-library-actions a { width: 100%; }
}

/* Focused template editor workspace v9 */
.page-template-editor {
  --editor-border: #d9e2ef;
  --editor-blue: #1268ed;
  --editor-blue-soft: #eaf3ff;
  --editor-ink: #071a3b;
  --editor-muted: #60708d;
  background: #f5f8fc;
}
.page-template-editor .app-main {
  max-width: none;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 42px);
}
.page-template-editor .template-editor-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 22px;
  max-width: 1900px;
}
.template-editor-heading {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.template-editor-heading h1 {
  color: var(--editor-ink);
  font-size: clamp(34px, 3.4vw, 52px);
  letter-spacing: -.045em;
  line-height: .98;
  margin: 6px 0 3px;
}
.template-editor-heading strong {
  color: var(--editor-ink);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-editor-back {
  color: #075fcf;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  width: fit-content;
}
.template-editor-back:hover { color: #004fae; text-decoration: underline; }
.template-save-state {
  align-items: center;
  color: #4c607e;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}
.template-save-state::before {
  background: #a9b5c7;
  border-radius: 50%;
  content: "";
  height: 8px;
  width: 8px;
}
.template-save-state[data-mode="saved"]::before { background: #13a76f; }
.template-save-state[data-mode="dirty"]::before { background: #f59e0b; }
.template-save-state[data-mode="error"]::before { background: #ef3340; }
.template-save-state[data-mode="saving"] { color: #1768d7; }
.template-save-state[data-mode="local"] { color: #8a5a00; }
.template-save-state[data-mode="saving"]::before {
  animation: template-save-pulse 1s ease-in-out infinite;
  background: #1768d7;
}
.template-save-state[data-mode="local"]::before { background: #f59e0b; }
@keyframes template-save-pulse {
  50% { opacity: .35; transform: scale(.78); }
}
@media (prefers-reduced-motion: reduce) {
  .template-save-state[data-mode="saving"]::before { animation: none; }
}
.template-editor-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.template-history-button,
.template-more-menu > summary {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #556887;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-height: 44px;
  padding: 0 13px;
}
.template-history-button:hover:not(:disabled),
.template-more-menu > summary:hover { background: #fff; border-color: var(--editor-border); color: #075fcf; }
.template-history-button:disabled { cursor: default; opacity: .38; }
.template-more-menu { position: relative; }
.template-more-menu > summary { list-style: none; }
.template-more-menu > summary::-webkit-details-marker { display: none; }
.template-more-menu[open] > summary { background: #fff; border-color: var(--editor-border); color: var(--editor-ink); }
.template-more-menu > div {
  background: #fff;
  border: 1px solid var(--editor-border);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(14, 32, 62, .12);
  display: grid;
  gap: 4px;
  min-width: 210px;
  padding: 7px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}
.template-more-menu a,
.template-more-menu button {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--editor-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 10px 11px;
  text-align: left;
  text-decoration: none;
}
.template-more-menu a:hover,
.template-more-menu button:hover { background: #f1f6fc; color: #075fcf; }
.page-template-editor .template-save-layout {
  border-radius: 10px;
  min-height: 46px;
  min-width: 164px;
  padding: 0 24px;
}
.page-template-editor .template-editor-shell {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(224px, 270px) minmax(520px, 1fr) minmax(250px, 292px);
  margin: 0 auto;
  max-width: 1900px;
}
.page-template-editor .template-toolbox,
.page-template-editor .template-properties,
.page-template-editor .template-canvas-panel {
  background: #fff;
  border: 1px solid var(--editor-border);
  border-radius: 14px;
  box-shadow: none;
  min-width: 0;
}
.page-template-editor .template-toolbox,
.page-template-editor .template-properties {
  max-height: calc(100vh - 34px);
  overflow: auto;
  position: sticky;
  top: 16px;
}
.page-template-editor .template-toolbox { padding: 0; }
.template-sidebar-tabs {
  border-bottom: 1px solid var(--editor-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 14px;
}
.template-sidebar-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #5d6e89;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  min-height: 54px;
  padding: 0 9px;
}
.template-sidebar-tabs button:hover { color: #075fcf; }
.template-sidebar-tabs button.is-active { border-bottom-color: var(--editor-blue); color: var(--editor-ink); }
.template-sidebar-panel { padding: 16px 14px 18px; }
.template-sidebar-panel[hidden] { display: none; }
.template-field-search { display: block; margin-bottom: 14px; }
.template-field-search input {
  background: #f9fbfe;
  border: 1px solid var(--editor-border);
  border-radius: 9px;
  color: var(--editor-ink);
  font: inherit;
  font-size: 13px;
  min-height: 42px;
  padding: 0 12px;
  width: 100%;
}
.template-field-search input:focus { border-color: #7ab0fa; box-shadow: 0 0 0 3px rgba(18, 104, 237, .1); outline: 0; }
.template-field-palette { display: grid; gap: 17px; }
.template-field-palette section { display: grid; gap: 7px; }
.template-field-palette h3 {
  color: #5f718e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}
.template-field-list { display: grid; gap: 5px; }
.template-field-choice {
  align-items: center;
  background: #f9fbfe;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  color: #3f5270;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 7px;
  grid-template-columns: 14px minmax(0, 1fr) 20px;
  min-height: 38px;
  padding: 5px 8px;
  text-align: left;
  width: 100%;
}
.template-field-choice:hover { background: var(--editor-blue-soft); border-color: #7cb0f8; color: #075fcf; transform: translateX(2px); }
.template-field-choice b { font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-field-grip { color: #95a4bb; font-size: 13px; letter-spacing: -3px; }
.template-field-add { align-items: center; border: 1px solid #b8c8dc; border-radius: 50%; display: flex; font-size: 14px; height: 19px; justify-content: center; width: 19px; }
.template-page-summary { align-items: center; display: flex; gap: 5px; justify-content: space-between; margin: 0 1px 12px; }
.template-page-summary strong { color: var(--editor-ink); font-size: 13px; }
.template-page-summary span { color: var(--editor-muted); font-size: 11px; font-weight: 700; }
.page-template-editor .template-page-thumbnails {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}
.page-template-editor .template-page-thumbnail {
  align-items: stretch;
  background: #f8fafe;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  text-align: left;
  width: 100%;
}
.page-template-editor .template-page-thumbnail:hover { border-color: #80b4fa; transform: translateY(-1px); }
.page-template-editor .template-page-thumbnail.is-active { background: var(--editor-blue-soft); border-color: var(--editor-blue); box-shadow: 0 0 0 2px rgba(18, 104, 237, .08); }
.template-page-thumbnail-preview { align-items: center; background: #fff; border: 1px solid #e2e8f1; border-radius: 6px; display: flex; height: 112px; justify-content: center; overflow: hidden; }
.template-page-thumbnail-preview canvas { max-height: 106px; max-width: 100%; object-fit: contain; }
.template-page-thumbnail-details { display: grid; gap: 2px; }
.template-page-thumbnail-details b { color: var(--editor-ink); font-size: 12px; }
.template-page-thumbnail-details small { color: var(--editor-muted); font-size: 10px; font-weight: 700; }
.page-template-editor .template-canvas-panel { overflow: hidden; }
.page-template-editor .template-canvas-toolbar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--editor-border);
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  min-height: 68px;
  padding: 10px 14px;
}
.page-template-editor .template-page-controls { align-items: center; display: flex; gap: 7px; }
.page-template-editor .template-page-controls button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--editor-border);
  border-radius: 9px;
  color: var(--editor-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 20px;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.page-template-editor .template-page-controls button:hover:not(:disabled) { background: var(--editor-blue-soft); border-color: #83b6fa; color: #075fcf; }
.page-template-editor .template-page-controls button:disabled { opacity: .35; }
.page-template-editor .template-page-controls label { align-items: center; color: var(--editor-muted); display: flex; font-size: 12px; font-weight: 800; gap: 6px; }
.page-template-editor .template-page-controls input {
  border: 1px solid var(--editor-border);
  border-radius: 8px;
  color: var(--editor-ink);
  font: inherit;
  font-weight: 850;
  height: 40px;
  text-align: center;
  width: 58px;
}
.template-toolbar-count { color: #62738e; font-size: 12px; font-weight: 800; justify-self: center; }
.page-template-editor .template-zoom-controls { color: #61738f; font-size: 12px; font-weight: 800; }
.page-template-editor .template-canvas-stage {
  background: #e9eef5;
  min-height: calc(100vh - 270px);
  overflow: auto;
  padding: 24px;
}
.page-template-editor .template-canvas-wrap { box-shadow: 0 3px 15px rgba(16, 36, 68, .1); }
.page-template-editor .template-canvas-help {
  background: #fff;
  border-top: 1px solid var(--editor-border);
  color: #677893;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
  padding: 9px 14px;
  text-align: center;
}
.page-template-editor .template-properties { padding: 18px; }
.template-properties-heading { border-bottom: 1px solid var(--editor-border); margin-bottom: 15px; padding-bottom: 14px; }
.template-properties-heading h2 { color: var(--editor-ink); font-size: 19px; letter-spacing: -.025em; margin: 0 0 4px; }
.template-properties-heading p { color: var(--editor-muted); font-size: 12px; margin: 0; }
.page-template-editor .template-empty-properties {
  align-items: center;
  border: 1px dashed #cbd7e6;
  border-radius: 10px;
  color: #64748d;
  display: flex;
  font-size: 13px;
  justify-content: center;
  line-height: 1.5;
  min-height: 100px;
  padding: 18px;
  text-align: center;
}
.page-template-editor .template-property-form { display: grid; gap: 15px; }
.page-template-editor .template-property-form[hidden] { display: none; }
.page-template-editor .template-property-form > label { color: var(--editor-ink); display: grid; font-size: 12px; font-weight: 850; gap: 7px; }
.page-template-editor .template-property-form select,
.page-template-editor .template-property-form input[type="number"] {
  background: #fff;
  border: 1px solid var(--editor-border);
  border-radius: 9px;
  color: var(--editor-ink);
  font: inherit;
  font-size: 13px;
  min-height: 43px;
  padding: 0 10px;
  width: 100%;
}
.template-font-size-field > span:first-child { align-items: center; display: flex; justify-content: space-between; }
.template-font-size-field b { color: #5f718d; font-size: 11px; }
.template-font-stepper { display: grid; gap: 6px; grid-template-columns: 39px minmax(0, 1fr) 39px; }
.template-font-stepper button {
  background: #f7f9fc;
  border: 1px solid var(--editor-border);
  border-radius: 9px;
  color: var(--editor-ink);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 850;
}
.template-font-stepper button:hover { background: var(--editor-blue-soft); border-color: #86b7f8; color: #075fcf; }
.template-font-fit-note { color: #18815c; font-size: 10px; font-weight: 750; line-height: 1.4; }
.template-font-fit-note[data-mode="warning"] { color: #a45e00; }
.template-precision-details,
.quote-signing-style { border-top: 1px solid var(--editor-border); padding-top: 13px; }
.template-precision-details > summary,
.quote-signing-style > summary { color: #4c5f7d; cursor: pointer; font-size: 12px; font-weight: 850; list-style-position: inside; }
.template-position-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.template-position-grid label { color: #60718b; display: grid; font-size: 10px; gap: 4px; }
.template-field-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.template-field-actions button { border-radius: 9px; min-height: 42px; padding: 0 9px; }
.page-template-editor .template-delete-field { background: #fff4f5; border: 1px solid #f4c8ce; color: #d9002e; }
.page-template-editor .template-delete-field:hover { background: #ffe8eb; border-color: #ef8c9c; }
.quote-signing-content { display: grid; gap: 13px; padding-top: 13px; }
.page-template-editor .quote-signing-preview { margin: 0; }
.page-template-editor .quote-signing-style label { font-size: 11px; }
.template-shortcut-hint { background: #f2f7fd; border-radius: 9px; color: #54708f; font-size: 10px; font-weight: 700; line-height: 1.45; margin: 17px 0 0; padding: 10px; }

@media (max-width: 1320px) {
  .page-template-editor .app-main { padding: 24px; }
  .page-template-editor .template-editor-shell { grid-template-columns: minmax(208px, 230px) minmax(470px, 1fr) minmax(236px, 260px); }
  .page-template-editor .template-properties { padding: 15px; }
}
@media (max-width: 1100px) {
  .page-template-editor .template-editor-shell { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); }
  .page-template-editor .template-properties { grid-column: 1 / -1; max-height: none; position: static; }
  .page-template-editor .template-property-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-template-editor .template-property-form .template-font-size-field,
  .page-template-editor .template-property-form .template-precision-details,
  .page-template-editor .template-property-form .template-field-actions { grid-column: auto; }
  .page-template-editor .quote-signing-style,
  .page-template-editor .template-shortcut-hint { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .page-template-editor .app-main { padding: 18px; }
  .page-template-editor .template-editor-header { align-items: stretch; flex-direction: column; }
  .template-editor-actions { display: grid; grid-template-columns: auto auto 1fr; }
  .page-template-editor .template-save-layout { grid-column: 1 / -1; width: 100%; }
  .page-template-editor .template-editor-shell { display: flex; flex-direction: column; }
  .page-template-editor .template-toolbox,
  .page-template-editor .template-properties { max-height: none; position: static; width: 100%; }
  .page-template-editor .template-canvas-panel { order: 1; width: 100%; }
  .page-template-editor .template-toolbox { order: 0; }
  .page-template-editor .template-properties { order: 2; }
  .page-template-editor .template-page-thumbnails { grid-template-columns: repeat(4, minmax(96px, 1fr)); overflow-x: auto; }
  .template-sidebar-panel[data-editor-panel="fields"] { max-height: 390px; overflow: auto; }
  .page-template-editor .template-property-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .page-template-editor .app-main { padding: 12px; }
  .template-editor-heading h1 { font-size: 34px; }
  .template-history-button span { display: none; }
  .template-history-button { width: 44px; }
  .template-editor-actions { grid-template-columns: 44px 44px 1fr; }
  .page-template-editor .template-canvas-toolbar { grid-template-columns: 1fr auto; }
  .template-toolbar-count { display: none; }
  .page-template-editor .template-page-controls label span { display: none; }
  .page-template-editor .template-page-controls input { width: 48px; }
  .page-template-editor .template-canvas-stage { min-height: 62vh; padding: 12px; }
  .page-template-editor .template-page-thumbnails { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .page-template-editor .template-property-form { grid-template-columns: 1fr; }
  .template-field-actions { grid-template-columns: 1fr; }
}

/* Calm, crash-safe template editor workspace v11 */
.page-template-editor {
  --editor-panel-height: calc(100vh - 176px);
  --editor-border: #d9e2ee;
  --editor-ink: #081a39;
  --editor-muted: #66748c;
}
.page-template-editor .app-main { padding: 24px clamp(20px, 2.4vw, 38px) 32px; }
.page-template-editor .template-editor-header {
  align-items: center;
  margin-bottom: 16px;
  max-width: 1920px;
}
.page-template-editor .template-editor-heading { gap: 3px; }
.page-template-editor .template-editor-heading h1 {
  font-size: clamp(32px, 2.5vw, 40px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 3px 0 1px;
}
.page-template-editor .template-editor-heading strong { font-size: 14px; font-weight: 750; }
.page-template-editor .template-editor-back,
.page-template-editor .template-save-state { font-size: 12px; }
.page-template-editor .template-editor-actions { gap: 5px; }
.page-template-editor .template-history-button,
.page-template-editor .template-more-menu > summary { min-height: 40px; padding: 0 11px; }
.page-template-editor .template-save-layout { min-height: 44px; min-width: 146px; padding-inline: 20px; }
.template-shortcuts-menu {
  border-top: 1px solid #e6ebf2;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 11px;
}
.template-shortcuts-menu strong { color: var(--editor-ink); font-size: 12px; }
.template-shortcuts-menu span { color: var(--editor-muted); font-size: 11px; white-space: nowrap; }
.template-shortcuts-menu kbd {
  background: #f3f6fa;
  border: 1px solid #d8e0eb;
  border-radius: 4px;
  color: #31425e;
  font: inherit;
  padding: 1px 4px;
}
.page-template-editor .template-editor-shell {
  gap: 12px;
  grid-template-columns: 276px minmax(540px, 1fr) 280px;
  max-width: 1920px;
  transition: grid-template-columns .2s ease;
}
.page-template-editor .template-editor-page.is-toolbox-collapsed .template-editor-shell { grid-template-columns: 0 minmax(540px, 1fr) 280px; }
.page-template-editor .template-editor-page.is-properties-collapsed .template-editor-shell { grid-template-columns: 276px minmax(540px, 1fr) 0; }
.page-template-editor .template-editor-page.is-toolbox-collapsed.is-properties-collapsed .template-editor-shell { grid-template-columns: 0 minmax(540px, 1fr) 0; }
.page-template-editor .template-toolbox,
.page-template-editor .template-properties,
.page-template-editor .template-canvas-panel { border-radius: 12px; }
.page-template-editor .template-toolbox,
.page-template-editor .template-properties {
  height: var(--editor-panel-height);
  max-height: var(--editor-panel-height);
  overflow: hidden;
  top: 12px;
  transition: opacity .14s ease, transform .2s ease;
}
.page-template-editor .template-editor-page.is-toolbox-collapsed .template-toolbox,
.page-template-editor .template-editor-page.is-properties-collapsed .template-properties {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.template-panel-title,
.template-properties-heading {
  align-items: center;
  border-bottom: 1px solid var(--editor-border);
  display: flex;
  justify-content: space-between;
  margin: 0;
  min-height: 58px;
  padding: 10px 12px 10px 16px;
}
.template-panel-title > div,
.template-properties-heading > div { display: grid; gap: 1px; min-width: 0; }
.template-panel-title strong,
.template-properties-heading h2 { font-size: 17px; font-weight: 760; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.template-panel-title span,
.template-properties-heading p { color: var(--editor-muted); font-size: 11px; margin: 0; }
.template-panel-title button,
.template-properties-heading button {
  align-items: center;
  background: #f5f8fc;
  border: 1px solid #e0e7f0;
  border-radius: 8px;
  color: #4d607e;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 23px;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.template-panel-title button:hover,
.template-properties-heading button:hover { background: #eaf3ff; border-color: #9ec5fa; color: #075fcf; }
.page-template-editor .template-sidebar-tabs { flex: 0 0 auto; padding: 0 14px; }
.page-template-editor .template-sidebar-tabs button { font-size: 13px; min-height: 46px; }
.page-template-editor .template-sidebar-panel {
  height: calc(var(--editor-panel-height) - 105px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px 13px 18px;
  scrollbar-width: thin;
}
.page-template-editor .template-field-search { margin-bottom: 12px; position: sticky; top: -14px; z-index: 3; padding-top: 1px; background: #fff; }
.page-template-editor .template-field-search input { min-height: 40px; }
.page-template-editor .template-field-palette { gap: 16px; }
.page-template-editor .template-field-palette h3 { font-size: 11px; letter-spacing: .045em; }
.page-template-editor .template-field-list { gap: 3px; }
.page-template-editor .template-field-choice {
  background: transparent;
  border-color: transparent;
  border-radius: 7px;
  gap: 8px;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  min-height: 42px;
  padding: 5px 7px;
  transform: none;
}
.page-template-editor .template-field-choice:hover,
.page-template-editor .template-field-choice:focus-visible { background: #eef5ff; border-color: #c9ddfb; color: #075fcf; outline: 0; transform: none; }
.page-template-editor .template-field-choice b { color: inherit; font-size: 13px; font-weight: 650; }
.template-field-type-icon {
  align-items: center;
  background: #edf3fb;
  border-radius: 6px;
  color: #54708f;
  display: flex;
  font-size: 11px;
  font-weight: 850;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.template-field-usage { color: #73839b; font-size: 9px; font-weight: 750; white-space: nowrap; }
.page-template-editor .template-field-add {
  border: 0;
  border-radius: 6px;
  color: #075fcf;
  font-size: 10px;
  font-weight: 850;
  height: 26px;
  opacity: 0;
  padding: 0 6px;
  width: auto;
}
.page-template-editor .template-field-choice:hover .template-field-add,
.page-template-editor .template-field-choice:focus-visible .template-field-add { background: #fff; opacity: 1; }
.page-template-editor .template-page-thumbnails { gap: 8px; }
.page-template-editor .template-page-thumbnail { border-radius: 8px; padding: 7px; }
.page-template-editor .template-page-thumbnail-preview { height: 134px; }
.page-template-editor .template-page-thumbnail-preview canvas { max-height: 128px; }
.page-template-editor .template-canvas-panel { height: var(--editor-panel-height); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.page-template-editor .template-canvas-toolbar {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 58px;
  padding: 8px 10px;
  white-space: nowrap;
}
.page-template-editor .template-page-controls { flex-wrap: nowrap; gap: 6px; }
.page-template-editor .template-page-controls button { border-radius: 8px; font-size: 17px; height: 36px; width: 36px; }
.page-template-editor .template-page-controls label { font-size: 11px; white-space: nowrap; }
.page-template-editor .template-page-controls input { height: 36px; width: 52px; }
.page-template-editor .template-zoom-controls { margin-left: auto; }
.page-template-editor .template-zoom-controls .template-fit-button { font-size: 10px; font-weight: 850; width: 40px; }
.template-panel-reveal {
  background: #eef5ff;
  border: 1px solid #c9ddfb;
  border-radius: 8px;
  color: #075fcf;
  cursor: pointer;
  display: none;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  height: 36px;
  padding: 0 10px;
}
.template-editor-page.is-toolbox-collapsed .template-panel-reveal-left,
.template-editor-page.is-properties-collapsed .template-panel-reveal-right { display: inline-flex; align-items: center; }
.page-template-editor .template-canvas-stage {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  scrollbar-width: thin;
}
.page-template-editor .template-canvas-wrap { box-shadow: 0 2px 10px rgba(16, 36, 68, .08); margin-inline: auto; }
.page-template-editor .template-canvas-help { font-size: 10px; padding: 7px 12px; }
.page-template-editor .template-properties { padding: 0; }
.page-template-editor .template-property-form,
.page-template-editor .template-empty-properties,
.page-template-editor .quote-signing-style { margin: 14px; }
.page-template-editor .template-property-form { gap: 13px; overflow: auto; max-height: calc(var(--editor-panel-height) - 90px); padding-right: 2px; }
.page-template-editor .template-empty-properties { min-height: 86px; }
.page-template-editor .template-property-form > label { font-size: 11px; gap: 6px; }
.page-template-editor .template-property-form select,
.page-template-editor .template-property-form input[type="number"] { min-height: 40px; }
.page-template-editor .quote-signing-style { padding-top: 12px; }
.page-template-editor .template-shortcut-hint { display: none; }

@media (max-width: 1380px) {
  .page-template-editor .template-editor-shell { grid-template-columns: 248px minmax(500px, 1fr) 254px; }
  .page-template-editor .template-editor-page.is-toolbox-collapsed .template-editor-shell { grid-template-columns: 0 minmax(500px, 1fr) 254px; }
  .page-template-editor .template-editor-page.is-properties-collapsed .template-editor-shell { grid-template-columns: 248px minmax(500px, 1fr) 0; }
}
@media (max-width: 1120px) {
  .page-template-editor { --editor-panel-height: auto; }
  .page-template-editor .template-editor-shell,
  .page-template-editor .template-editor-page.is-toolbox-collapsed .template-editor-shell,
  .page-template-editor .template-editor-page.is-properties-collapsed .template-editor-shell,
  .page-template-editor .template-editor-page.is-toolbox-collapsed.is-properties-collapsed .template-editor-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .page-template-editor .template-toolbox { height: min(72vh, 720px); max-height: min(72vh, 720px); }
  .page-template-editor .template-sidebar-panel { height: calc(min(72vh, 720px) - 105px); }
  .page-template-editor .template-canvas-panel { height: min(78vh, 840px); }
  .page-template-editor .template-properties { grid-column: 1 / -1; height: auto; max-height: none; position: static; }
  .page-template-editor .template-property-form { max-height: none; }
  .template-properties-heading button,
  .template-panel-reveal-right { display: none !important; }
}
@media (max-width: 820px) {
  .page-template-editor .app-main { padding: 16px 12px 90px; }
  .page-template-editor .template-editor-header { gap: 12px; }
  .page-template-editor .template-editor-shell,
  .page-template-editor .template-editor-page.is-toolbox-collapsed .template-editor-shell,
  .page-template-editor .template-editor-page.is-properties-collapsed .template-editor-shell { display: flex; }
  .page-template-editor .template-toolbox { height: auto; max-height: none; }
  .page-template-editor .template-sidebar-panel { height: auto; max-height: 410px; }
  .page-template-editor .template-canvas-panel { height: 72vh; min-height: 560px; }
  .page-template-editor .template-toolbox,
  .page-template-editor .template-properties { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
  .template-panel-title button,
  .template-panel-reveal { display: none !important; }
  .page-template-editor .template-page-thumbnails { display: flex; overflow-x: auto; }
  .page-template-editor .template-page-thumbnail { flex: 0 0 112px; }
}
@media (max-width: 560px) {
  .page-template-editor .template-editor-heading h1 { font-size: 30px; }
  .page-template-editor .template-canvas-toolbar { gap: 5px; overflow-x: auto; justify-content: flex-start; }
  .page-template-editor .template-toolbar-count { display: none; }
  .page-template-editor .template-zoom-controls { margin-left: 4px; }
  .page-template-editor .template-canvas-stage { padding: 10px; }
  .page-template-editor .template-canvas-panel { min-height: 520px; }
}

.page-template-editor .template-canvas-wrap.is-drop-target { outline: 3px solid rgba(18, 104, 237, .65); outline-offset: 3px; }
.page-template-editor .template-field-box.is-invalid,
.page-template-editor .template-field-box.is-invalid.is-selected { border-color: #e6003d; box-shadow: 0 0 0 2px rgba(230, 0, 61, .18); }