/* BidSmart Professional UI Layer
   Loaded after legacy style.css. Keeps existing markup/business logic intact. */

:root {
  --bs-red: #c81920;
  --bs-red-strong: #a90f15;
  --bs-red-soft: #fff0f1;
  --bs-black: #121417;
  --bs-black-2: #1c1f24;
  --bs-text: #1b1d21;
  --bs-muted: #6f747d;
  --bs-bg: #eef1f5;
  --bs-surface: #f4f6f8;
  --bs-surface-strong: #ffffff;
  --bs-border: rgba(20, 24, 31, 0.09);
  --bs-shadow-raised: 10px 10px 24px rgba(23, 29, 38, 0.10), -10px -10px 24px rgba(255,255,255,0.92);
  --bs-shadow-soft: 6px 6px 16px rgba(23, 29, 38, 0.09), -6px -6px 16px rgba(255,255,255,0.94);
  --bs-shadow-inset: inset 3px 3px 8px rgba(20, 25, 34, 0.10), inset -3px -3px 8px rgba(255,255,255,0.95);
  --bs-radius-xl: 28px;
  --bs-radius-lg: 22px;
  --bs-radius-md: 16px;
  --bs-radius-sm: 12px;
  --bs-content: 1440px;
  --bs-focus: 0 0 0 4px rgba(200,25,32,.14);
}

html { scroll-behavior: smooth; background: var(--bs-bg); }
body {
  color: var(--bs-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { text-underline-offset: 3px; }
::selection { background: rgba(200,25,32,.18); color: var(--bs-black); }

/* ---------- Accessible focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bs-red) !important;
  outline-offset: 2px;
  box-shadow: var(--bs-focus) !important;
}

/* ---------- Portal shell ---------- */
.roof-dashboard-body {
  margin: 0 !important;
  min-height: 100vh;
  background: var(--bs-bg) !important;
  color: var(--bs-text);
}
.portal-layout { min-height: 100vh; background: transparent !important; }
.portal-main,
.roof-dashboard-main {
  min-width: 0;
  background: transparent !important;
  padding: 0 !important;
}
.roof-dashboard-overlay { display: none !important; }
.roof-dashboard-content {
  position: relative;
  width: min(var(--bs-content), calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 64px !important;
}

/* ---------- Premium top navigation ---------- */
.portal-topbar {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(18,20,23,.96) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 34px rgba(9,10,13,.16) !important;
  backdrop-filter: blur(16px);
}
.portal-topbar-inner {
  width: min(var(--bs-content), calc(100% - 40px));
  min-height: 76px !important;
  margin: 0 auto;
  padding: 10px 0 !important;
  display: flex;
  align-items: center;
  gap: 28px;
}
.portal-top-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
  text-decoration: none !important;
  min-width: max-content;
}
.portal-top-brand-logo {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.04) !important;
  overflow: hidden;
}
.portal-top-brand-logo img { width: 36px !important; height: 36px !important; object-fit: contain; }
.portal-top-brand-copy { display: grid; gap: 1px; line-height: 1.1; }
.portal-top-brand-copy strong { color: #fff !important; font-size: 1.02rem !important; letter-spacing: .01em; }
.portal-top-brand-copy small { color: rgba(255,255,255,.60) !important; font-size: .72rem !important; font-weight: 600; }
.portal-nav-panel { flex: 1; display: flex !important; align-items: center; justify-content: space-between; gap: 22px; min-width: 0; }
.portal-top-menu { display: flex !important; align-items: center; justify-content: center; gap: 4px !important; flex: 1; }
.portal-top-menu-link {
  position: relative;
  min-height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.72) !important;
  text-decoration: none !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.portal-top-menu-link:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; transform: translateY(-1px); }
.portal-top-menu-link.active {
  color: #fff !important;
  background: linear-gradient(180deg, #d51d25, #b41118) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 18px rgba(200,25,32,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.portal-top-menu-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: #fff !important; color: var(--bs-red) !important;
  font-size: .68rem; font-weight: 900;
}
.portal-top-account { display: flex !important; align-items: center; gap: 10px !important; min-width: max-content; }
.portal-top-user {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 6px 10px 6px 6px !important;
  border-radius: 14px !important;
  color: #fff !important; text-decoration: none !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: background .18s ease, border-color .18s ease;
}
.portal-top-user:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.13) !important; }
.portal-top-avatar {
  width: 34px !important; height: 34px !important; border-radius: 11px !important;
  display: grid !important; place-items: center !important;
  background: #fff !important; color: var(--bs-red) !important;
  font-weight: 900 !important; box-shadow: 0 5px 12px rgba(0,0,0,.18) !important;
}
.portal-top-user-copy { display: grid; gap: 1px; max-width: 150px; }
.portal-top-user-copy strong { color: #fff !important; font-size: .82rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-top-user-copy small { color: rgba(255,255,255,.58) !important; font-size: .68rem !important; }
.portal-logout-form { margin: 0 !important; display: inline-flex !important; }
.portal-top-logout {
  min-height: 42px !important; padding: 0 15px !important;
  border: 1px solid rgba(255,255,255,.13) !important; border-radius: 12px !important;
  background: transparent !important; color: #fff !important;
  font-size: .82rem !important; font-weight: 800 !important; cursor: pointer;
  box-shadow: none !important; transform: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.portal-top-logout:hover { background: #fff !important; color: var(--bs-black) !important; border-color: #fff !important; }
.portal-nav-toggle {
  display: none;
  min-height: 42px; padding: 0 15px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff; font-weight: 800;
}

/* ---------- Page headings ---------- */
.portal-page-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 28px !important;
}
.roof-page-title,
.portal-page-heading h1 {
  margin: 0 0 7px !important;
  color: var(--bs-black) !important;
  font-size: clamp(1.9rem, 3vw, 2.65rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 900 !important;
}
.portal-page-heading p,
.muted-copy,
.roof-design-desc,
.overview-feature-desc,
.visualizer-helper {
  color: var(--bs-muted) !important;
  line-height: 1.6 !important;
}
.portal-page-heading p { max-width: 760px; margin: 0 !important; font-size: .98rem; }
.roof-subtitle {
  color: var(--bs-black) !important;
  font-size: 1.2rem !important;
  letter-spacing: -.015em;
  font-weight: 850 !important;
}

/* ---------- Neomorphic sections ---------- */
.dashboard-section-card,
.roof-design-card,
.profile-summary-card,
.profile-details-under-card,
.edit-profile-single-card,
.verification-resubmit-card,
.bid-status-list-card,
.visualizer-control-panel,
.visualizer-preview-panel,
.saved-visualizer-card,
.inventory-card,
.quotation-detail-form,
.card,
.notifications-list,
.signup-requirements-box {
  border: 1px solid rgba(255,255,255,.75) !important;
  background: var(--bs-surface) !important;
  box-shadow: var(--bs-shadow-raised) !important;
  border-radius: var(--bs-radius-lg) !important;
}
.dashboard-section-card {
  padding: 26px !important;
  margin: 0 0 28px !important;
}
.dashboard-section-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 18px; padding-bottom: 18px !important; margin-bottom: 20px !important;
  border-bottom: 1px solid var(--bs-border) !important;
}
.roof-card-grid,
.dashboard-preview-grid {
  gap: 22px !important;
}
.roof-design-card {
  overflow: hidden !important;
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.roof-design-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200,25,32,.16) !important;
  box-shadow: 12px 14px 30px rgba(23,29,38,.13), -10px -10px 24px rgba(255,255,255,.94) !important;
}
.roof-design-image { background: #e3e6eb !important; aspect-ratio: 16 / 10; overflow: hidden; }
.roof-design-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .35s ease; }
.roof-design-card:hover .roof-design-image img { transform: scale(1.025); }
.roof-design-body { padding: 20px !important; }
.roof-design-body h3,
.overview-action-header h3,
.inventory-title-row h3 { color: var(--bs-black) !important; font-weight: 850 !important; letter-spacing: -.015em; }
.roof-design-meta,
.roof-design-meta-stack {
  color: #555b64 !important;
  gap: 8px !important;
  font-size: .88rem !important;
}

/* ---------- Dashboard stat cards ---------- */
.overview-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 18px !important;
  margin-bottom: 28px !important;
}
.overview-stats-grid .roof-design-card {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  background: linear-gradient(145deg, #f8fafb, #edf0f3) !important;
}
.overview-stats-grid .roof-design-card::before {
  content: "";
  position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--bs-red);
}
.overview-stats-grid .roof-design-body { padding: 24px 24px 22px 26px !important; }
.overview-stats-grid h3 { color: var(--bs-muted) !important; font-size: .78rem !important; text-transform: uppercase; letter-spacing: .075em; }
.admin-stat-number {
  color: var(--bs-black) !important;
  font-size: 2.25rem !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  margin: 18px 0 0 !important;
  font-weight: 900 !important;
}

/* ---------- Buttons ---------- */
.roof-post-btn,
.admin-btn-neutral,
.admin-btn-danger,
.main-btn,
.profile-primary-btn,
.profile-secondary-btn,
.roof-remove-btn,
.roof-select-btn,
button.roof-post-btn,
a.roof-post-btn,
a.admin-btn-neutral,
button.admin-btn-neutral {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  box-sizing: border-box !important;
  border-radius: 13px !important;
  padding: 0 17px !important;
  border: 1px solid transparent !important;
  font-size: .88rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .17s ease, box-shadow .17s ease, background .17s ease, color .17s ease, border-color .17s ease;
}
.roof-post-btn,
.main-btn,
.profile-primary-btn,
.roof-select-btn {
  background: linear-gradient(180deg, #d71f27, #b90f16) !important;
  color: #fff !important;
  border-color: #ac0f15 !important;
  box-shadow: 0 8px 18px rgba(181,15,21,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.roof-post-btn:hover,
.main-btn:hover,
.profile-primary-btn:hover,
.roof-select-btn:hover { transform: translateY(-1px) !important; background: linear-gradient(180deg, #e1242d, #bd1017) !important; box-shadow: 0 11px 22px rgba(181,15,21,.24) !important; }
.admin-btn-neutral,
.profile-secondary-btn {
  background: var(--bs-surface) !important;
  color: var(--bs-black) !important;
  border-color: rgba(20,24,31,.08) !important;
  box-shadow: var(--bs-shadow-soft) !important;
}
.admin-btn-neutral:hover,
.profile-secondary-btn:hover { transform: translateY(-1px) !important; color: var(--bs-red) !important; border-color: rgba(200,25,32,.15) !important; }
.admin-btn-danger,
.roof-remove-btn {
  background: #1d2025 !important; color: #fff !important; border-color: #111317 !important;
  box-shadow: 0 7px 16px rgba(16,18,21,.16) !important;
}
.admin-btn-danger:hover,
.roof-remove-btn:hover { background: #090a0c !important; transform: translateY(-1px) !important; }
button:disabled,
.roof-post-btn:disabled { cursor: not-allowed !important; opacity: .46 !important; transform: none !important; box-shadow: none !important; }
.dashboard-primary-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap; }
.overview-view-link { color: var(--bs-red) !important; font-weight: 800 !important; text-decoration: none !important; }
.overview-view-link:hover { color: var(--bs-red-strong) !important; text-decoration: underline !important; }

/* ---------- Forms ---------- */
.auth-panel input,
.auth-panel select,
.auth-panel textarea,
.dashboard-form input,
.dashboard-form textarea,
.dashboard-form select,
.manufacturer-bid-form input,
.manufacturer-bid-form textarea,
.manufacturer-bid-form select,
.profile-grid-form input,
.profile-grid-form textarea,
.profile-grid-form select,
.design-quantity-form input,
.design-quantity-form select,
.design-quantity-form textarea,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea,
.visualizer-form input:not([type="range"]):not([type="hidden"]),
.visualizer-form select,
.quotation-detail-form input,
.quotation-detail-form select,
.quotation-detail-form textarea,
.inventory-form input,
.inventory-form select,
.inventory-form textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="search"], select, textarea {
  min-height: 46px;
  padding: 11px 14px !important;
  color: var(--bs-text) !important;
  background: #eef1f4 !important;
  border: 1px solid rgba(20,24,31,.07) !important;
  border-radius: 13px !important;
  box-shadow: var(--bs-shadow-inset) !important;
  outline: none !important;
}
textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #959aa2 !important; }
label, .signup-field-label, .profile-label { color: #34383f !important; font-weight: 750 !important; }
label > span:first-child { display: inline-block; margin-bottom: 7px; }
fieldset { border: 1px solid var(--bs-border) !important; }

/* Checkbox/radio retain native semantics */
input[type="checkbox"], input[type="radio"] { accent-color: var(--bs-red); }
input[type="range"] { accent-color: var(--bs-red); }

/* ---------- Status, alerts, banners ---------- */
.alert,
.verification-banner,
.visualizer-disclaimer {
  border-radius: 15px !important;
  border: 1px solid var(--bs-border) !important;
  box-shadow: none !important;
}
.alert { padding: 14px 16px !important; font-weight: 650; }
.alert.success { background: #fff !important; color: #174b31 !important; border-left: 4px solid #2a7a51 !important; }
.alert.error { background: #fff !important; color: #8f1116 !important; border-left: 4px solid var(--bs-red) !important; }
.alert.info { background: #fff !important; color: #31363e !important; border-left: 4px solid var(--bs-black) !important; }
.verification-banner {
  padding: 17px 19px !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
  background: var(--bs-surface) !important;
  box-shadow: var(--bs-shadow-soft) !important;
  margin-bottom: 26px !important;
}
.verification-banner.verified { border-left: 4px solid #2a7a51 !important; }
.verification-banner.pending { border-left: 4px solid var(--bs-red) !important; }
.verification-banner p { margin: 4px 0 0 !important; color: var(--bs-muted) !important; }
.security-chip,
.client-bid-status,
.profile-badge,
.document-chip-list span {
  display: inline-flex !important; align-items: center !important; justify-content: center;
  min-height: 30px; padding: 0 10px !important; border-radius: 999px !important;
  background: #fff !important; color: var(--bs-black) !important;
  border: 1px solid rgba(20,24,31,.10) !important;
  font-size: .75rem !important; font-weight: 800 !important;
  box-shadow: 3px 3px 8px rgba(23,29,38,.07), -3px -3px 8px rgba(255,255,255,.95) !important;
}
.status-accepted, .status-success, .status-approved { color: #205f40 !important; }
.status-rejected, .status-failed, .status-denied { color: #9d151a !important; }
.status-pending { color: #5d6168 !important; }

/* ---------- Tables ---------- */
.table-wrap,
.admin-table-wrap,
.client-quotation-table-wrap {
  overflow-x: auto !important;
  border-radius: 18px !important;
  background: var(--bs-surface) !important;
  box-shadow: var(--bs-shadow-soft) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
}
table {
  width: 100%; border-collapse: separate !important; border-spacing: 0 !important;
  background: transparent !important;
}
thead th {
  padding: 14px 15px !important;
  background: var(--bs-black) !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  text-transform: uppercase;
  letter-spacing: .055em;
  border: 0 !important;
  white-space: nowrap;
}
tbody td {
  padding: 15px !important;
  color: #383c43 !important;
  background: rgba(255,255,255,.42) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(20,24,31,.06) !important;
  vertical-align: middle !important;
}
tbody tr:last-child td { border-bottom: 0 !important; }
tbody tr:hover td { background: rgba(255,255,255,.78) !important; }

/* ---------- Empty states ---------- */
.empty-design-box {
  min-height: 130px;
  display: grid !important; place-items: center !important;
  padding: 26px !important; text-align: center !important;
  color: var(--bs-muted) !important;
  border: 1px dashed rgba(20,24,31,.17) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.34) !important;
}

/* ---------- Profile ---------- */
.profile-avatar,
.profile-photo {
  border: 4px solid var(--bs-surface) !important;
  box-shadow: 6px 6px 16px rgba(20,24,31,.14), -6px -6px 16px rgba(255,255,255,.94) !important;
}
.profile-view-grid { gap: 12px 18px !important; }
.profile-view-item {
  padding: 13px 15px !important;
  border-radius: 14px !important;
  background: #eef1f4 !important;
  box-shadow: inset 2px 2px 6px rgba(20,24,31,.07), inset -2px -2px 6px rgba(255,255,255,.9) !important;
}
.profile-view-label { color: #7a7f87 !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .055em; }
.profile-view-value { color: var(--bs-black) !important; font-weight: 750 !important; }

/* ---------- Supplier inventory / quotes ---------- */
.inventory-title-row,
.overview-action-header { align-items: flex-start !important; gap: 12px !important; }
.inventory-card-actions,
.roof-bid-actions,
.saved-visualizer-actions {
  display: flex !important; align-items: center !important; gap: 9px !important; flex-wrap: wrap;
}
.inventory-card-actions form,
.roof-bid-actions form { margin: 0 !important; }
.quotation-total-note {
  padding: 12px 14px !important; border-radius: 13px !important;
  background: #fff !important; border-left: 3px solid var(--bs-red) !important;
  color: var(--bs-muted) !important;
}

/* ---------- Notifications ---------- */
.notification-card,
.notification-card-link {
  border-radius: 16px !important;
}
.notification-card {
  background: var(--bs-surface) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: var(--bs-shadow-soft) !important;
}
.notification-card:hover { transform: translateY(-1px); }
.notification-time { color: #8a8f97 !important; }

/* ---------- WebGL visualizer ---------- */
.visualizer-layout-3d {
  display: grid !important;
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: start !important;
}
.visualizer-control-panel { padding: 24px !important; }
.visualizer-control-panel h2 { margin: 0 0 8px !important; font-size: 1.2rem !important; }
.visualizer-form { gap: 16px !important; }
.catalogue-reference-box {
  min-height: 150px !important; border-radius: 16px !important;
  overflow: hidden; background: #e7eaee !important;
  box-shadow: var(--bs-shadow-inset) !important;
  border: 1px solid rgba(20,24,31,.06) !important;
}
.catalogue-reference-box img { width: 100%; height: 170px; object-fit: cover; }
.color-fieldset { border-radius: 16px !important; padding: 14px !important; background: rgba(255,255,255,.36) !important; }
.color-swatch-grid { gap: 9px !important; }
.color-swatch,
.color-swatch-btn {
  border-radius: 12px !important;
  box-shadow: 3px 3px 8px rgba(20,24,31,.10), -3px -3px 8px rgba(255,255,255,.9) !important;
}
.visualizer-preview-panel { padding: 14px !important; position: sticky; top: 100px; }
.visualizer-stage-3d {
  min-height: clamp(440px, 62vh, 700px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 20%, #f9fafb 0%, #dfe3e8 55%, #cfd4db 100%) !important;
  box-shadow: inset 4px 4px 14px rgba(20,24,31,.10), inset -4px -4px 14px rgba(255,255,255,.88) !important;
}
#roof3dCanvas { width: 100% !important; height: 100% !important; min-height: 440px; display: block; }
.visualizer-3d-help {
  top: 14px !important; left: 14px !important; right: auto !important;
  padding: 8px 11px !important; border-radius: 10px !important;
  background: rgba(18,20,23,.78) !important; color: #fff !important;
  font-size: .75rem !important; backdrop-filter: blur(8px);
}
.visualizer-caption-3d {
  left: 14px !important; right: 14px !important; bottom: 14px !important;
  padding: 13px 15px !important; border-radius: 14px !important;
  background: rgba(18,20,23,.84) !important; color: #fff !important;
  backdrop-filter: blur(10px);
}
.visualizer-caption-3d span { color: rgba(255,255,255,.68) !important; }
.visualizer-disclaimer { margin-top: 12px !important; padding: 13px 15px !important; background: #f8f9fa !important; color: #646a72 !important; font-size: .81rem !important; }
.saved-visualizer-grid { gap: 18px !important; }
.saved-visualizer-card { padding: 16px !important; }

/* ---------- Authentication ---------- */
.auth-page {
  background: var(--bs-bg) !important;
  min-height: 100vh;
}
.auth-wrapper {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr) !important;
  background: var(--bs-bg) !important;
}
.auth-left {
  position: relative;
  padding: clamp(42px, 6vw, 80px) !important;
  background:
    linear-gradient(145deg, rgba(15,16,19,.91), rgba(28,19,20,.87)),
    url('../../background.png') center/cover no-repeat !important;
  color: #fff;
  overflow: hidden;
}
.auth-left::after {
  content: "";
  position: absolute; width: 360px; height: 360px; right: -160px; bottom: -160px;
  border-radius: 50%; background: rgba(200,25,32,.25); filter: blur(4px);
}
.left-content { position: relative; z-index: 1; max-width: 620px !important; margin: auto 0; }
.brand-title {
  color: #fff !important; text-shadow: none !important;
  font-size: clamp(3rem, 6vw, 5.2rem) !important;
  letter-spacing: -.055em !important; line-height: .95 !important;
  margin: 0 0 16px !important;
}
.tagline { color: rgba(255,255,255,.88) !important; text-shadow: none !important; font-size: 1.25rem !important; margin-bottom: 34px !important; }
.feature-grid { gap: 14px !important; }
.feature-card {
  min-height: 120px !important; padding: 20px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.12) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px);
}
.feature-card h3 { color: #fff !important; font-size: .93rem !important; }
.feature-card p { color: rgba(255,255,255,.62) !important; font-size: .84rem !important; line-height: 1.5 !important; }
.feature-icon { color: #fff !important; width: 32px; height: 32px; margin-bottom: 10px !important; }
.feature-icon .app-icon { width: 28px; height: 28px; }
.auth-right {
  padding: 42px !important;
  background: var(--bs-bg) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.auth-panel {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  padding: 34px !important;
  background: var(--bs-surface) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 26px !important;
  box-shadow: 14px 14px 34px rgba(22,28,37,.12), -14px -14px 34px rgba(255,255,255,.94) !important;
}
.signup-panel,
.signup-panel-wide { width: min(100%, 820px) !important; max-width: 820px !important; }
.auth-panel h2 { color: var(--bs-black) !important; font-size: 1.75rem !important; letter-spacing: -.03em; margin-bottom: 22px !important; }
.role-toggle {
  padding: 5px !important; border-radius: 14px !important;
  background: #e8ebef !important;
  box-shadow: var(--bs-shadow-inset) !important;
}
.role-toggle-btn {
  min-height: 42px; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: #686d75 !important; font-weight: 800 !important;
}
.role-toggle-btn.active {
  background: #fff !important; color: var(--bs-red) !important;
  box-shadow: 4px 4px 10px rgba(20,24,31,.09), -4px -4px 10px rgba(255,255,255,.95) !important;
}
.password-wrap { position: relative; }
.toggle-password {
  position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  border: 0 !important; background: transparent !important; color: #6f747d !important; cursor: pointer;
}
.toggle-password:hover { background: rgba(255,255,255,.58) !important; color: var(--bs-red) !important; }
.login-bottom-link, .signup-bottom { color: var(--bs-muted) !important; font-size: .88rem; }
.login-bottom-link a, .signup-bottom a { color: var(--bs-red) !important; font-weight: 800; }
.signup-section-title {
  padding: 18px 0 7px !important; margin: 0 !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: var(--bs-black) !important; font-size: 1rem !important;
}

/* ---------- Modals ---------- */
.modal-content,
.admin-modal-content,
.visualizer-modal-content {
  background: var(--bs-surface) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 70px rgba(8,10,14,.24), inset 0 1px 0 #fff !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .portal-topbar-inner { width: min(100% - 28px, var(--bs-content)); gap: 14px; }
  .portal-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; margin-left: auto; }
  .portal-nav-panel {
    display: none !important;
    position: absolute;
    left: 14px; right: 14px; top: calc(100% + 8px);
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(18,20,23,.985) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.28) !important;
  }
  .portal-nav-panel.is-open { display: grid !important; gap: 14px !important; }
  .portal-top-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px !important; }
  .portal-top-menu-link { justify-content: flex-start !important; }
  .portal-top-account { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); justify-content: space-between; }
  .visualizer-layout-3d { grid-template-columns: 1fr !important; }
  .visualizer-preview-panel { position: relative; top: auto; }
  .overview-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 900px) {
  .roof-dashboard-content { width: min(100% - 28px, var(--bs-content)); padding-top: 28px !important; }
  .portal-page-heading { align-items: flex-start !important; flex-direction: column !important; }
  .dashboard-primary-actions { width: 100%; }
  .dashboard-primary-actions > * { flex: 1 1 180px; }
  .auth-wrapper { grid-template-columns: 1fr !important; }
  .auth-left { min-height: 420px; padding: 44px 28px !important; }
  .auth-right { padding: 28px 18px 40px !important; }
  .auth-panel { padding: 27px 22px !important; }
  .signup-grid { grid-template-columns: 1fr !important; }
  .signup-grid .full-span, .signup-bottom { grid-column: 1 !important; }
}

@media (max-width: 640px) {
  .portal-topbar-inner { width: calc(100% - 20px); min-height: 68px !important; }
  .portal-top-brand-copy small, .portal-top-user-copy { display: none !important; }
  .portal-top-menu { grid-template-columns: 1fr !important; }
  .portal-top-account { align-items: stretch !important; }
  .portal-top-user { flex: 1; }
  .portal-top-logout { min-width: 90px; }
  .roof-dashboard-content { width: calc(100% - 22px); padding-bottom: 42px !important; }
  .overview-stats-grid { grid-template-columns: 1fr !important; }
  .dashboard-section-card { padding: 19px !important; border-radius: 18px !important; }
  .roof-card-grid, .dashboard-preview-grid { grid-template-columns: 1fr !important; }
  .visualizer-two-column, .quotation-field-grid, .profile-view-grid { grid-template-columns: 1fr !important; }
  .visualizer-stage-3d, #roof3dCanvas { min-height: 360px !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .auth-left { min-height: auto; }
  .brand-title { font-size: 3rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Final roof swatch component uses the runtime-generated class name. */
.color-swatch-button {
  min-height: 54px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(20,24,31,.08) !important;
  background: var(--bs-surface) !important;
  color: var(--bs-black) !important;
  box-shadow: var(--bs-shadow-soft) !important;
  cursor: pointer;
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease;
}
.color-swatch-button:hover { transform: translateY(-1px) !important; border-color: rgba(200,25,32,.18) !important; }
.color-swatch-button.active {
  border-color: rgba(200,25,32,.55) !important;
  box-shadow: var(--bs-shadow-inset), 0 0 0 3px rgba(200,25,32,.09) !important;
}
.color-swatch-button span { border-radius: 9px !important; }
.color-swatch-button small { color: var(--bs-muted) !important; font-weight: 700 !important; }

@media (max-width: 1280px) {
  .portal-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; margin-left: auto; }
  .portal-nav-panel {
    display: none !important;
    position: absolute;
    left: 14px; right: 14px; top: calc(100% + 8px);
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(18,20,23,.985) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.28) !important;
  }
  .portal-nav-panel.is-open { display: grid !important; gap: 14px !important; }
  .portal-top-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px !important; }
  .portal-top-menu-link { justify-content: flex-start !important; }
  .portal-top-account { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); justify-content: space-between; }
}

/* Address selector and signup detail polish */
.signup-heading { margin-bottom: 18px !important; }
.signup-heading p { color: var(--bs-muted) !important; line-height: 1.55 !important; }
.address-preview {
  padding: 13px 15px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.52) !important;
  border: 1px solid rgba(20,24,31,.07) !important;
  box-shadow: var(--bs-shadow-soft) !important;
  color: var(--bs-text) !important;
}
.address-preview-label {
  display: block; margin-bottom: 4px;
  color: var(--bs-muted) !important;
  font-size: .70rem !important; font-weight: 850 !important;
  text-transform: uppercase; letter-spacing: .065em;
}
.signup-requirements-box { padding: 20px !important; }
.signup-requirements-box h3 { color: var(--bs-black) !important; margin-top: 0 !important; }
.signup-requirements-box p,
.signup-requirements-box li { color: var(--bs-muted) !important; line-height: 1.55 !important; }
.nested-signup-grid { margin-top: 14px !important; }

@media (max-width: 1000px) {
  .auth-wrapper { grid-template-columns: 1fr !important; }
  .auth-left { min-height: 390px; padding: 44px 28px !important; }
  .auth-right { padding: 28px 18px 40px !important; }
}


/* Roof visualizer gallery reference support for preset thumbnails */
.catalogue-reference-box img[src$=".svg"]{background:#f6f8fb;border-radius:18px;padding:12px;object-fit:contain !important}

/* ---------------------------------------------------------
   Read-only company 3D roof viewer
   --------------------------------------------------------- */
.viewer-readonly-badge{
  display:inline-flex;align-items:center;min-height:34px;padding:0 12px;margin-bottom:10px;
  border-radius:999px;background:rgba(197,27,35,.08);color:#a61118;border:1px solid rgba(197,27,35,.12);
  font-size:.74rem;font-weight:850;letter-spacing:.025em;
}
.readonly-roof-layout{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(330px,.58fr);gap:22px;align-items:start}
.readonly-roof-stage-card,.readonly-roof-details{
  border-radius:24px;background:#f4f6f8;border:1px solid rgba(20,24,31,.07);
  box-shadow:14px 14px 30px rgba(30,35,43,.10),-10px -10px 24px rgba(255,255,255,.86);
}
.readonly-roof-stage-card{padding:18px}.readonly-visualizer-stage{min-height:620px;border-radius:20px;overflow:hidden}
.readonly-camera-actions{display:flex;gap:9px;flex-wrap:wrap;padding-top:14px}.readonly-camera-actions .admin-btn-neutral{flex:1;min-width:120px}
.readonly-roof-details{padding:20px;display:grid;gap:18px}.readonly-reference-card{display:grid;grid-template-columns:110px 1fr;gap:15px;align-items:center;padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(20,24,31,.06);box-shadow:0 10px 22px rgba(18,23,30,.055)}
.readonly-reference-image{height:100px;border-radius:14px;overflow:hidden;background:#eef1f4}.readonly-reference-image img{width:100%;height:100%;object-fit:cover}.readonly-reference-image img[src$=".svg"]{object-fit:contain;padding:7px}
.readonly-reference-card h2{margin:4px 0 7px;font-size:1.15rem}.readonly-reference-card p{margin:0;color:#6b7179;font-size:.82rem;line-height:1.52}.eyebrow-label{font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#a61118}
.readonly-spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.readonly-spec-grid>div{padding:13px;border-radius:15px;background:#eef1f4;box-shadow:inset 3px 3px 8px rgba(38,44,52,.075),inset -3px -3px 8px rgba(255,255,255,.76)}.readonly-spec-grid span,.readonly-spec-grid strong{display:block}.readonly-spec-grid span{color:#777d85;font-size:.7rem;margin-bottom:5px}.readonly-spec-grid strong{font-size:.8rem;line-height:1.4}.readonly-primary-action{width:100%;text-align:center}.matching-request-tools{display:flex;justify-content:flex-start;margin:10px 0 4px}.dashboard-roof-actions{margin-top:14px}
@media(max-width:1050px){.readonly-roof-layout{grid-template-columns:1fr}.readonly-visualizer-stage{min-height:520px}}
@media(max-width:640px){.readonly-roof-stage-card,.readonly-roof-details{padding:14px;border-radius:19px}.readonly-visualizer-stage{min-height:390px}.readonly-reference-card{grid-template-columns:1fr}.readonly-reference-image{height:180px}.readonly-spec-grid{grid-template-columns:1fr}.readonly-camera-actions{display:grid;grid-template-columns:1fr 1fr}.readonly-camera-actions .admin-btn-neutral{min-width:0}}

/* Connected request workflow */
.request-draft-primary-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 10px}
.request-draft-primary-actions>a{flex:1 1 180px}
.post-bid-form{margin-top:8px}
@media(max-width:640px){.request-draft-primary-actions{display:grid;grid-template-columns:1fr}}

/* Client roof color preview controls */
.roof-colorized-image-shell{background:linear-gradient(180deg,#fff,#f7f8fa);overflow:hidden}
.roof-colorized-image-shell img{transition:opacity .18s ease,transform .25s ease}
.roof-card-color-preview{padding:12px 16px 2px}
.roof-card-color-label{display:block;margin-bottom:8px;color:#686f78;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em}
.roof-preview-swatches{display:flex;flex-wrap:wrap;gap:8px}
.roof-preview-swatch{appearance:none;border:1px solid rgba(20,24,31,.10);background:#fff;border-radius:999px;min-height:34px;padding:5px 9px 5px 6px;display:inline-flex;align-items:center;gap:7px;color:#3f454d;font:inherit;font-size:.76rem;font-weight:750;cursor:pointer;box-shadow:0 6px 14px rgba(15,18,24,.05);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.roof-preview-swatch>span{width:20px;height:20px;border-radius:50%;background:var(--roof-preview-color,#5C6670);border:2px solid rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(15,18,24,.14)}
.roof-preview-swatch small{font-size:inherit;font-weight:inherit}
.roof-preview-swatch:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(15,18,24,.08)}
.roof-preview-swatch.is-active{border-color:rgba(196,22,28,.38);box-shadow:0 0 0 2px rgba(196,22,28,.09),0 8px 18px rgba(15,18,24,.07);color:#9f1116}
.readonly-color-preview-control{padding:16px 18px;border-radius:18px;background:#fff;border:1px solid rgba(20,24,31,.07);box-shadow:0 10px 22px rgba(15,18,24,.05)}
.readonly-color-preview-control>span{display:block;color:#747b84;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.readonly-color-preview-control .roof-preview-swatches{margin-bottom:10px}
.readonly-color-preview-control strong{font-size:.9rem;color:#171a1e}

/* Clean launch roof preview: isolated roof object + neutral gray shadow only. */
.roof-colorized-image-shell{
  background:linear-gradient(180deg,#fff 0%,#f8f9fb 100%);
}
.roof-colorized-image-shell img[data-roof-color-preview]{
  object-fit:contain !important;
  filter:drop-shadow(0 18px 18px rgba(45,50,56,.24)) !important;
}
.roof-colorized-image-shell:hover img[data-roof-color-preview]{
  transform:translateY(-2px) scale(1.01);
}

/* Catalogue actions stay stacked so the 3D preview and request action remain clear. */
.catalogue-card-actions,
.dashboard-roof-actions{
  grid-template-columns:1fr !important;
}
.catalogue-card-actions .roof-select-btn,
.dashboard-roof-actions .roof-select-btn{
  width:100% !important;
}

/* Roof-only color layer: the original preview/background never changes color. */
.roof-colorized-image-shell{
  position:relative !important;
  background:linear-gradient(180deg,#fff 0%,#f8f9fb 100%) !important;
  isolation:isolate;
}
.roof-colorized-image-shell > .roof-preview-base-layer{
  position:relative !important;
  z-index:1;
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 18px 18px rgba(45,50,56,.22)) !important;
}
.roof-colorized-image-shell > img.roof-preview-tint-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:none !important;
  pointer-events:none;
}
.roof-design-card:hover .roof-colorized-image-shell > .roof-preview-base-layer,
.roof-design-card:hover .roof-colorized-image-shell > img.roof-preview-tint-layer{
  transform:translateY(-2px) scale(1.01) !important;
}


/* Final roof color preview: transparent roof layer + neutral CSS shadow only */
.roof-colorized-image-shell{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%) !important;
  isolation:isolate;
}
.roof-colorized-image-shell::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:12%;
  height:18%;
  border-radius:50%;
  background:rgba(75,82,90,.28);
  filter:blur(16px);
  transform:scaleX(1.08);
  z-index:0;
  pointer-events:none;
}
.roof-colorized-image-shell > .roof-preview-base-layer{display:none !important;}
.roof-colorized-image-shell > img[data-roof-color-preview],
.roof-colorized-image-shell > img.roof-preview-tint-layer{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:none !important;
  pointer-events:auto;
}
.roof-design-card:hover .roof-colorized-image-shell > img[data-roof-color-preview],
.roof-design-card:hover .roof-colorized-image-shell > img.roof-preview-tint-layer{
  transform:translateY(-2px) scale(1.01) !important;
}



/* ---------- Premium announcements experience ---------- */
.announcements-content{max-width:1180px;}
.portal-eyebrow{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  margin:0 0 8px!important;
  color:var(--bs-red)!important;
  font-size:.72rem!important;
  font-weight:900!important;
  letter-spacing:.105em!important;
  text-transform:uppercase;
}
.announcements-heading{align-items:center!important;}
.announcements-heading-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 15px;
  border:1px solid rgba(19,22,26,.08);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#30343a;
  box-shadow:0 9px 24px rgba(19,22,26,.07), inset 0 1px 0 rgba(255,255,255,.9);
  font-size:.78rem;
  font-weight:850;
  white-space:nowrap;
}
.announcement-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#c81720;
  box-shadow:0 0 0 5px rgba(200,23,32,.10);
}
.announcements-info-strip{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 24px;
  padding:16px 18px;
  border:1px solid rgba(20,24,29,.07);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(247,248,250,.86));
  box-shadow:0 10px 30px rgba(17,20,24,.055), inset 0 1px 0 rgba(255,255,255,.95);
}
.announcements-info-icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#17191d;
  color:#fff;
  font-family:Georgia,serif;
  font-weight:800;
  box-shadow:0 6px 15px rgba(17,20,24,.15);
}
.announcements-info-strip strong{display:block;margin:0 0 2px;color:#191c20;font-size:.9rem;}
.announcements-info-strip p{margin:0;color:var(--bs-muted);font-size:.84rem;line-height:1.55;}
.announcement-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.announcement-card{
  position:relative;
  overflow:hidden;
  min-height:230px;
  padding:24px 24px 21px!important;
  border:1px solid rgba(18,21,25,.07)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff 0%,#fafbfc 100%)!important;
  box-shadow:0 15px 38px rgba(22,25,30,.075), inset 0 1px 0 #fff!important;
}
.announcement-card-accent{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#cb1821,#ec343c);
}
.announcement-type-result .announcement-card-accent{background:linear-gradient(90deg,#1f7150,#43a272);}
.announcement-type-maintenance .announcement-card-accent{background:linear-gradient(90deg,#3f4855,#747f8d);}
.announcement-type-general .announcement-card-accent{background:linear-gradient(90deg,#25292f,#5f6670);}
.announcement-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 17px;
}
.announcement-card-head time{
  color:#80868e;
  font-size:.73rem;
  font-weight:750;
  white-space:nowrap;
}
.announcement-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(198,22,31,.09);
  color:#b4141c;
  border:1px solid rgba(198,22,31,.12);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.announcement-type-result .announcement-type-badge{background:rgba(34,126,88,.09);color:#1f704f;border-color:rgba(34,126,88,.13);}
.announcement-type-maintenance .announcement-type-badge,.announcement-type-general .announcement-type-badge{background:rgba(54,61,70,.08);color:#454c55;border-color:rgba(54,61,70,.11);}
.announcement-card h2{
  margin:0 0 10px!important;
  color:#16191d!important;
  font-size:1.16rem!important;
  line-height:1.25!important;
  letter-spacing:-.02em!important;
  font-weight:900!important;
}
.announcement-message{
  color:#616770;
  font-size:.88rem;
  line-height:1.7;
}
.announcement-card-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:21px;
  padding-top:15px;
  border-top:1px solid rgba(22,25,30,.07);
  color:#878c93;
  font-size:.7rem;
  font-weight:750;
}
.announcement-expiry{
  margin-top:11px;
  color:#a05d16;
  font-size:.69rem;
  font-weight:800;
}
.announcement-empty-state{
  grid-column:1/-1;
  width:100%;
  min-height:360px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:44px 28px!important;
  border:1px solid rgba(18,21,25,.07)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(205,24,33,.055),transparent 34%),
    linear-gradient(145deg,#fff,#f8f9fb)!important;
  box-shadow:0 17px 42px rgba(22,25,30,.07),inset 0 1px 0 #fff!important;
}
.announcement-empty-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#f0f2f5);
  color:#ca1821;
  border:1px solid rgba(18,21,25,.07);
  box-shadow:10px 10px 25px rgba(26,29,34,.10),-8px -8px 20px rgba(255,255,255,.85);
  font-size:1.16rem;
  font-weight:900;
}
.announcement-empty-kicker{
  margin-bottom:7px;
  color:#c61820;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.announcement-empty-state h2{
  margin:0 0 9px!important;
  color:#171a1e!important;
  font-size:1.42rem!important;
  letter-spacing:-.025em!important;
  font-weight:900!important;
}
.announcement-empty-state p{
  max-width:570px;
  margin:0!important;
  color:#717780!important;
  font-size:.88rem;
  line-height:1.65;
}
.announcement-empty-action{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 17px;
  border-radius:12px;
  background:#17191d;
  color:#fff!important;
  text-decoration:none!important;
  font-size:.78rem;
  font-weight:850;
  box-shadow:0 8px 18px rgba(17,20,24,.17);
}
.announcement-empty-action:hover{transform:translateY(-1px);background:#25292e;}
.announcement-error-state .announcement-empty-icon{color:#fff;background:linear-gradient(145deg,#d91d25,#aa1118);}

@media (max-width:820px){
  .announcement-grid{grid-template-columns:1fr;}
  .announcements-heading{align-items:flex-start!important;}
  .announcements-heading-badge{display:none;}
  .announcement-empty-state{min-height:300px;}
}
@media (max-width:560px){
  .announcements-info-strip{padding:14px;border-radius:16px;}
  .announcement-card{padding:20px!important;border-radius:19px!important;}
  .announcement-card-head{align-items:flex-start;flex-direction:column;gap:8px;}
  .announcement-card-footer{flex-direction:column;gap:5px;}
  .announcement-empty-state{padding:34px 18px!important;}
}

/* ---------- Signup SMS OTP verification ---------- */
.signup-grid .signup-otp-box.full-span {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(20,24,31,.10) !important;
  background: #f8f9fb !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.signup-otp-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.signup-otp-header > div {
  min-width: 0 !important;
  width: auto !important;
}
.signup-otp-header strong {
  display: block !important;
  margin: 0 0 3px !important;
  color: #14181f !important;
  font-size: .92rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.signup-otp-header small {
  display: block !important;
  margin: 0 !important;
  max-width: 590px !important;
  color: #68707d !important;
  font-size: .79rem !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.signup-otp-button {
  width: auto !important;
  min-width: 112px !important;
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 15px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(20,24,31,.10) !important;
  background: #ffffff !important;
  color: #14181f !important;
  box-shadow: 0 5px 12px rgba(20,24,31,.08) !important;
  font: 800 .82rem/1 Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.signup-otp-button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(200,25,32,.20) !important;
  color: #c81920 !important;
}
.signup-otp-button-primary {
  min-width: 126px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#d71f27,#b90f16) !important;
  border-color: #ab0f15 !important;
  box-shadow: 0 7px 14px rgba(181,15,21,.18) !important;
}
.signup-otp-button-primary:hover:not(:disabled) {
  color: #fff !important;
  background: linear-gradient(180deg,#e1242d,#bd1017) !important;
}
.signup-otp-button:disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
  transform: none !important;
}
.signup-otp-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 126px !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.signup-grid .signup-otp-row input#signupOtpCode {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1.5px solid #d7dce3 !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: none !important;
  letter-spacing: .16em !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  text-align: center !important;
}
.signup-grid .signup-otp-row input#signupOtpCode:focus {
  border-color: #c81920 !important;
  box-shadow: 0 0 0 3px rgba(200,25,32,.08) !important;
}
.signup-otp-status {
  margin: 8px 0 0 !important;
  font-size: .78rem !important;
  line-height: 1.4 !important;
  color: #68707d !important;
  white-space: normal !important;
  word-break: normal !important;
}
.signup-otp-status.is-success { color: #1f7a4c !important; font-weight: 750 !important; }
.signup-otp-status.is-error { color: #b20f18 !important; font-weight: 750 !important; }
.signup-otp-status.is-info { color: #68707d !important; }
@media (max-width: 640px) {
  .signup-otp-header { grid-template-columns: 1fr !important; }
  .signup-otp-button.signup-otp-send { width: 100% !important; }
  .signup-otp-row { grid-template-columns: 1fr !important; }
  .signup-otp-button.signup-otp-verify { width: 100% !important; }
}


/* Verified identity / authenticity indicators */
.verified-identity-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 3px 8px !important;
  margin-left: 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23, 125, 75, .20) !important;
  background: rgba(23, 125, 75, .09) !important;
  color: #147447 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.verified-identity-icon {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  stroke-width: 2.5 !important;
}
.profile-badges .verified-identity-badge {
  margin-left: 0 !important;
  min-height: 29px !important;
  padding: 5px 10px !important;
  font-size: .76rem !important;
}
.portal-account-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.portal-verified-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #16854f !important;
  color: #fff !important;
  flex: 0 0 18px !important;
}
.portal-verified-check-icon {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 3 !important;
}
.verification-approved-once {
  animation: verifiedNoticeIn .28s ease both;
}
@keyframes verifiedNoticeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inline interactive 3D roof previews inside Available Roofs catalogue cards. */
.roof-inline-3d-shell{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse at 50% 72%,rgba(97,104,113,.10),rgba(97,104,113,.035) 30%,transparent 58%),
    linear-gradient(180deg,#fff 0%,#f6f8fb 100%)!important;
}
.roof-inline-3d-shell::after{
  left:20%!important;
  right:20%!important;
  bottom:12%!important;
  height:16%!important;
  background:rgba(70,76,84,.24)!important;
  filter:blur(17px)!important;
  z-index:0!important;
}
.roof-inline-3d-shell > img[data-roof-color-preview]{
  position:relative!important;
  z-index:1!important;
  transition:opacity .22s ease!important;
}
.roof-card-3d-canvas{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
  transition:opacity .22s ease;
}
.roof-card-3d-canvas.is-dragging{cursor:grabbing}
.roof-inline-3d-shell.is-3d-ready > img[data-roof-color-preview]{opacity:0!important;pointer-events:none!important}
.roof-inline-3d-shell.is-3d-ready > .roof-card-3d-canvas{opacity:1}
.roof-card-3d-hint{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:11px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid rgba(218,221,226,.9);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#6c727a;
  box-shadow:0 5px 14px rgba(21,25,31,.05);
  backdrop-filter:blur(7px);
  font-size:.67rem;
  font-weight:800;
  white-space:nowrap;
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.roof-card-3d-hint svg{width:14px;height:14px;flex:0 0 14px}
.roof-inline-3d-shell.is-3d-ready .roof-card-3d-hint{opacity:.92}
.roof-design-card:hover .roof-inline-3d-shell.is-3d-ready > img[data-roof-color-preview]{transform:none!important}
.roof-design-card:hover .roof-card-3d-canvas{transform:none!important}
@media(max-width:640px){
  .roof-card-3d-hint{bottom:8px;font-size:.62rem;padding:4px 8px}
}


/* Static exact-model roof previews */
.roof-inline-preview-shell,
.roof-colorized-image-shell {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% 72%,rgba(97,104,113,.10),rgba(97,104,113,.035) 30%,transparent 58%),
    linear-gradient(180deg,#fff 0%,#f6f8fb 100%) !important;
}

.roof-inline-preview-shell img[data-roof-color-preview],
.roof-colorized-image-shell img[data-roof-color-preview] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 14px !important;
  transition: transform .28s ease !important;
}

.roof-design-card:hover .roof-inline-preview-shell img[data-roof-color-preview],
.roof-design-card:hover .roof-colorized-image-shell img[data-roof-color-preview] {
  transform: scale(1.02);
}


/* Exact preview product interaction */
#roofProductStage.is-exact-interactive,
.roof-inline-preview-shell.is-exact-interactive {
  cursor: grab;
  touch-action: none;
  perspective: 980px;
}
#roofProductStage.is-exact-interactive.is-dragging,
.roof-inline-preview-shell.is-exact-interactive.is-dragging { cursor: grabbing; }
#roofProductStage.is-exact-interactive img[data-roof-color-preview],
.roof-inline-preview-shell.is-exact-interactive img[data-roof-color-preview] {
  transform-origin: 50% 50%;
  will-change: transform;
  transition: none !important;
}
#roofProductStage.is-exact-interactive::before,
.roof-inline-preview-shell.is-exact-interactive::before {
  content: ''; display: none;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(218,221,226,.92);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #6c727a;
  box-shadow: 0 5px 14px rgba(21,25,31,.05);
  backdrop-filter: blur(7px);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}





/* No floor shadow for roof previews */
#roofProductStage::after,
.roof-inline-preview-shell::after,
.roof-colorized-image-shell::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}