/* Site-wide Hëllef Dir design system. Loaded after the compiled app and app-theme.css. */
body app-root {
  display: block;
  min-height: 100vh;
  --primary: #173d36;
  --primary-light: #326b55;
  --primary-dark: #10332e;
  --accent: #bc6347;
  --accent-glow: rgba(188, 99, 71, .14);
  --bg-body: #f7f5ef;
  --bg-surface: #fffdf8;
  --bg-card: #fffdf8;
  --bg-card-hover: #f0f6e9;
  --border-subtle: #d8ded6;
  --border-medium: #adbfaf;
  --text-primary: #173d36;
  --text-secondary: #526962;
  --text-muted: #708578;
  --text-on-primary: #fff;
  --shadow-sm: 0 3px 12px rgba(17, 55, 44, .07);
  --shadow-md: 0 16px 38px rgba(17, 55, 44, .10);
  --shadow-lg: 0 24px 55px rgba(17, 55, 44, .13);
  --shadow-glow: 0 12px 26px rgba(17, 55, 44, .12);
  color: var(--hd-ink);
  background: var(--hd-cream);
}
body app-root :is(app-about, app-pricing, app-apply-service-provider,
  app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account,
  app-login, app-register, app-overview, app-userview,
  app-offer-review, app-provider-offer, app-sp-portal,
  app-sp-login, app-admin) {
  display: block;
  min-height: 100vh;
  background: var(--hd-cream);
  color: var(--hd-ink);
}
body app-root :is(button, input, select, textarea) { font-family: inherit; }
body app-root :is(a, button) { -webkit-tap-highlight-color: transparent; }

/* Navigation and footer appear throughout the Angular experience. */
body app-navigation-bar .sticky-header {
  background: rgba(255, 253, 248, .97) !important;
  border-bottom: 1px solid var(--hd-line) !important;
}
body app-navigation-bar .nav-bar {
  max-width: 1320px !important;
  margin-inline: auto !important;
  color: var(--hd-ink) !important;
}
body app-navigation-bar .nav-logo { display: none !important; }
body app-navigation-bar .nav-brand::before {
  content: 'H';
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin-right: 9px;
  border-radius: 10px;
  background: var(--hd-ink);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.09em;
}
body app-navigation-bar :is(.brand-name, .nav-link, .hamburger) {
  color: var(--hd-ink) !important;
}
body app-navigation-bar .brand-tld { color: #bd654a !important; }
body app-navigation-bar .language-select {
  background: #fff !important;
  border: 1px solid #b9cbbf !important;
  color: var(--hd-ink) !important;
  box-shadow: none !important;
}
body app-navigation-bar .language-select:hover { background: #eff5e9 !important; }
body app-navigation-bar .language-button {
  background: #fff !important;
  border: 1px solid #b9cbbf !important;
  border-radius: 9px !important;
  color: var(--hd-ink) !important;
  box-shadow: none !important;
}
body app-navigation-bar .language-button:hover { background: #eff5e9 !important; }
body app-navigation-bar .dropdown-content {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 11px !important;
  box-shadow: var(--hd-shadow) !important;
}
body app-navigation-bar .dropdown-content :is(a, button) { color: var(--hd-ink) !important; }
body app-navigation-bar .dropdown-content :is(a, button):hover { background: #eef4e6 !important; }
body app-navigation-bar .nav-btn { border-radius: 9px !important; }
body app-navigation-bar .login-btn {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: #fff !important;
}
body app-footer .footer {
  background: var(--hd-deep) !important;
  border-top: 0 !important;
  color: #eaf0e6 !important;
  box-shadow: none !important;
}
body app-footer :is(.brand-name, .brand-first, .brand-second, .brand-tld) { color: #fff !important; }
body app-footer .footer-logo :is(.brand-name, .brand-tld) { display: none !important; }
body app-footer :is(.footer-tagline, .footer-copy, .footer-links a) { color: #bfd2c4 !important; }
body app-footer .footer-links a:hover { color: #e5eecc !important; }

/* Editorial content pages and provider introduction. */
body :is(app-about .about-hero, app-pricing .pricing-hero,
  app-apply-service-provider .apply-hero) {
  position: relative;
  overflow: hidden;
  background: var(--hd-deep) !important;
  padding: clamp(70px, 8vw, 116px) 24px clamp(69px, 7vw, 96px) !important;
  text-align: center;
}
body :is(app-about .about-hero, app-pricing .pricing-hero,
  app-apply-service-provider .apply-hero)::after {
  content: '✳';
  position: absolute;
  right: -4%;
  top: -115px;
  color: #214b3e;
  font-size: 26rem;
  line-height: 1;
  pointer-events: none;
}
body :is(app-about .about-hero-title, app-pricing .pricing-hero-title,
  app-apply-service-provider .apply-hero-title) {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto 19px !important;
  color: #f7f7ed !important;
  font-size: clamp(2.55rem, 5vw, 4.65rem) !important;
  font-weight: 740 !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}
body :is(app-about .about-hero-desc, app-pricing .pricing-hero-desc,
  app-apply-service-provider .apply-hero-desc) {
  position: relative;
  z-index: 1;
  max-width: 680px !important;
  margin-inline: auto !important;
  color: #c5d7c7 !important;
  font-size: clamp(1.03rem, 1.5vw, 1.18rem) !important;
  line-height: 1.7 !important;
}
body app-about .about-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  max-width: 1100px !important;
  padding: clamp(38px, 5vw, 70px) 24px !important;
}
body app-about .about-block {
  display: flex;
  flex-direction: column;
  min-height: 256px;
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 17px !important;
  color: var(--hd-ink) !important;
  box-shadow: var(--hd-shadow) !important;
}
body app-about .about-block.highlight { background: #eaf2e3 !important; border-color: #c0d4bb !important; }
body app-about .about-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 19px;
  background: #e7f1e0 !important;
  border-radius: 12px;
  color: var(--hd-ink) !important;
  font-size: 0 !important;
}
body app-about .about-block:nth-child(2) .about-icon { background: #f8e9df !important; }
body app-about .about-block:nth-child(3) .about-icon { background: #e5eeea !important; }
body app-about .about-icon::before { content: '✦'; font-size: 1.5rem; }
body app-about .about-block:nth-child(2) .about-icon::before { content: '⌂'; }
body app-about .about-block:nth-child(3) .about-icon::before { content: '✓'; }
body app-about .about-block:nth-child(4) .about-icon::before { content: '↗'; }
body app-about .about-block h2 {
  color: var(--hd-ink) !important;
  font-size: 1.45rem !important;
  letter-spacing: -.035em;
}
body app-about .about-block p { color: var(--hd-muted) !important; line-height: 1.7 !important; }

body app-pricing .pricing-section { max-width: 1120px !important; padding: clamp(36px, 5vw, 70px) 24px !important; }
body app-pricing .pricing-notice {
  background: #eaf2e3 !important;
  border: 1px solid #c4d8bf !important;
  border-radius: 13px !important;
  color: var(--hd-ink) !important;
}
body app-pricing .pricing-notice p { color: var(--hd-muted) !important; }
body app-pricing .pricing-grid { gap: 16px !important; }
body app-pricing .pricing-card {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 17px !important;
  color: var(--hd-ink) !important;
  box-shadow: var(--hd-shadow) !important;
}
body app-pricing .pricing-card.featured {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
}
body app-pricing .pricing-card :is(.pricing-badge, .pricing-price, .pricing-label, li) { color: var(--hd-ink) !important; }
body app-pricing .pricing-card.featured :is(.pricing-badge, .pricing-price, .pricing-label, li) { color: #eef4e9 !important; }
body app-pricing .pricing-card.featured .pricing-label { color: #b9d0c0 !important; }
body app-pricing .pricing-ribbon {
  background: var(--hd-coral) !important;
  color: var(--hd-deep) !important;
  box-shadow: none !important;
}
body app-pricing :is(.pricing-how h3, .pricing-promo h3) { color: var(--hd-ink) !important; }
body app-pricing .how-step {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 15px !important;
  color: var(--hd-ink) !important;
}
body app-pricing .how-step :is(h4, p) { color: var(--hd-ink) !important; }
body app-pricing .step-number {
  background: var(--hd-lime) !important;
  color: var(--hd-deep) !important;
  box-shadow: none !important;
}
body app-pricing .pricing-promo {
  background: #e8f0e0 !important;
  border: 1px solid #bdd2b9 !important;
  border-radius: 17px !important;
  color: var(--hd-ink) !important;
}
body app-pricing .pricing-promo p,
body app-pricing .pricing-feedback { color: var(--hd-muted) !important; }
body app-pricing .promo-icon { font-size: 0 !important; color: var(--hd-ink) !important; }
body app-pricing .promo-icon::before { content: '✦'; font-size: 1.6rem; }

body app-apply-service-provider .apply-hero-content { position: relative; z-index: 1; }
body app-apply-service-provider .apply-hero .apply-cta-btn {
  background: var(--hd-coral) !important;
  color: var(--hd-deep) !important;
  border-radius: 11px !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .13) !important;
}
body app-apply-service-provider .apply-section {
  max-width: 1120px !important;
  padding: clamp(39px, 5vw, 72px) 24px !important;
}
body app-apply-service-provider .section-title {
  color: var(--hd-ink) !important;
  font-size: clamp(1.9rem, 3vw, 2.8rem) !important;
  letter-spacing: -.045em !important;
}
body app-apply-service-provider .benefits-grid { gap: 15px !important; }
body app-apply-service-provider .benefit-card,
body app-apply-service-provider .step-item {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--hd-shadow) !important;
  color: var(--hd-ink) !important;
}
body app-apply-service-provider .benefit-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  background: #e7f1e0 !important;
  border-radius: 11px;
  color: var(--hd-ink) !important;
  font-size: 0 !important;
}
body app-apply-service-provider .benefit-icon::before { content: '✦'; font-size: 1.5rem; }
body app-apply-service-provider .benefit-card :is(h3, p),
body app-apply-service-provider .step-body :is(h3, p) { color: var(--hd-ink) !important; }
body app-apply-service-provider .benefit-card p,
body app-apply-service-provider .step-body p { color: var(--hd-muted) !important; }
body app-apply-service-provider .step-num {
  background: var(--hd-lime) !important;
  color: var(--hd-deep) !important;
  box-shadow: none !important;
}
body app-apply-service-provider .pricing-info-card {
  background: #eaf2e3 !important;
  border: 1px solid #bfd3b9 !important;
  border-radius: 17px !important;
  color: var(--hd-ink) !important;
}
body app-apply-service-provider .pricing-info-card :is(.pricing-header, .commission-label, .commission-value) { color: var(--hd-ink) !important; }
body app-apply-service-provider .pricing-info-card :is(.pricing-description, .pricing-note) { color: var(--hd-muted) !important; }
body app-apply-service-provider .apply-bottom-cta {
  background: var(--hd-deep) !important;
  border-radius: 19px !important;
  color: #fff !important;
}
body app-apply-service-provider .apply-bottom-text { color: #eaf1e7 !important; }
body app-apply-service-provider .apply-bottom-cta .apply-cta-btn {
  background: var(--hd-coral) !important;
  color: var(--hd-deep) !important;
  border-radius: 10px !important;
}
body app-apply-service-provider .apply-back-btn {
  background: transparent !important;
  border: 1px solid #a8c4b1 !important;
  color: #f0f4e9 !important;
  border-radius: 10px !important;
}

/* Provider application screens and account entry. */
body :is(app-apply-service-wizard .email-form-container,
  app-apply-personal-data .service-provider-form,
  app-apply-work-experience .work-experience-form,
  app-apply-create-account .create-account-form) {
  max-width: 660px !important;
  margin: clamp(30px, 4vw, 58px) auto 70px !important;
  padding: clamp(22px, 4vw, 42px) !important;
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 19px !important;
  box-shadow: var(--hd-shadow) !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .step-indicator {
  background: #eff3e9 !important;
  border: 1px solid #e2e9db !important;
  border-radius: 13px !important;
  padding: 13px !important;
  gap: 8px !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .step-label {
  color: var(--hd-muted) !important;
  font-size: .8rem !important;
  line-height: 1.25 !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .active-step .step-label {
  color: var(--hd-ink) !important;
  font-weight: 800 !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .completed-step .step-label {
  color: #347453 !important;
}
body app-apply-service-wizard .lu-notice { background: #eaf2e3 !important; color: var(--hd-ink) !important; }
body app-apply-service-wizard .lu-text strong { color: var(--hd-ink) !important; }
body app-apply-service-wizard .lu-text span { color: var(--hd-muted) !important; }
body app-apply-service-wizard .lu-flag { font-size: 0 !important; }
body app-apply-service-wizard .lu-flag::before {
  content: 'LU';
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--hd-ink);
  color: #e7f1d5;
  font-size: .95rem;
  font-weight: 850;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) :is(h3, h4, .section-title) {
  color: var(--hd-ink) !important;
  letter-spacing: -.025em !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) :is(label, .terms, .section-subtitle) {
  color: var(--hd-ink) !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) a { color: #316c52 !important; }
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) :is(.btn, .submit-btn, .submit-all-button, .submit-button, .add-button) {
  background: var(--hd-ink) !important;
  border: 1px solid var(--hd-ink) !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: none !important;
}
body :is(app-apply-service-wizard, app-apply-personal-data,
  app-apply-work-experience, app-apply-create-account) .back-btn {
  background: transparent !important;
  border: 1px solid #a9c2ae !important;
  border-radius: 10px !important;
  color: var(--hd-ink) !important;
}
body app-apply-personal-data .field-doc-upload {
  background: #edf4e7 !important;
  border: 1px dashed #99b89f !important;
  border-radius: 10px !important;
  color: var(--hd-ink) !important;
}
body app-apply-personal-data .field-doc-upload :is(label, span, .doc-icon) { color: var(--hd-ink) !important; }

body app-login html,
body app-login body,
body app-register .register-wrapper {
  background: var(--hd-cream) !important;
  color: var(--hd-ink) !important;
}
body app-login body { min-height: calc(100vh - 65px); padding: 26px 18px 66px !important; }
body app-register .register-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding: 24px 18px 66px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body :is(app-login, app-register) form {
  max-width: 530px !important;
  margin: 25px auto !important;
  padding: clamp(25px, 4vw, 42px) !important;
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--hd-shadow) !important;
  color: var(--hd-ink) !important;
}
body :is(app-login h1, app-register .form-title) {
  background: none !important;
  -webkit-text-fill-color: var(--hd-ink) !important;
  color: var(--hd-ink) !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
  font-weight: 760 !important;
  letter-spacing: -.045em !important;
}
body :is(app-login, app-register) :is(label, section, p, .sp-notice) { color: var(--hd-ink) !important; }
body :is(app-login, app-register) form :is(a, #signin-option, #toggle-password, .apply-link) { color: #2a7050 !important; }
body app-register .sp-notice {
  background: #eaf2e3 !important;
  border: 1px solid #c4d8bf !important;
  color: var(--hd-ink) !important;
}
body app-register .sp-notice :is(p, a) { color: var(--hd-ink) !important; }
body :is(app-login, app-register) form :is(input:not([type=checkbox]), select, textarea) {
  background: #fff !important;
  border-color: #b8cabc !important;
  color: var(--hd-ink) !important;
}
body :is(app-login, app-register) form button[type=submit] {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: #fff !important;
}

/* Provider and administration sign-in have their own lazy-loaded components. */
body app-sp-login .sp-login-wrapper,
body app-admin .admin-wrapper { background: var(--hd-cream) !important; color: var(--hd-ink) !important; }
body app-sp-login .sp-login-card,
body app-admin .admin-login {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--hd-shadow) !important;
  color: var(--hd-ink) !important;
}
body app-sp-login .sp-login-card h2,
body app-admin .admin-login h2 { color: var(--hd-ink) !important; font-weight: 760 !important; }
body app-sp-login :is(label, .hint),
body app-admin .admin-back-link { color: var(--hd-muted) !important; }
body :is(app-sp-login, app-admin) input {
  background: #fff !important;
  border: 1px solid #b8cabc !important;
  color: var(--hd-ink) !important;
  border-radius: 10px !important;
}
body :is(app-sp-login, app-admin) input::placeholder { color: #84988a !important; }
body :is(app-sp-login, app-admin) :is(.btn-primary, .login-form button) {
  background: var(--hd-ink) !important;
  border: 1px solid var(--hd-ink) !important;
  border-radius: 10px !important;
  color: #fff !important;
}

/* Browsing providers, agreements, customer dashboard, and operational portals. */
body :is(app-overview, app-offer-review, app-provider-offer,
  app-userview, app-sp-portal, app-admin) :is(h1, h2, h3, h4) { color: var(--hd-ink); }
body app-overview :is(.profile, .reviews-panel),
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(.main-container, .profile-card, .booking-card, .offer-card,
  .inquiry-card, .questions-card, .action-card, .scheduling-card,
  .card, .rate-card, .invoice-card, .employee-card, .pw-category-card,
  .admin-dashboard, .edit-panel) {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--hd-shadow) !important;
  color: var(--hd-ink) !important;
}
body app-overview .profile {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 34px) !important;
}
body app-overview .provider-name { color: var(--hd-ink) !important; font-weight: 780 !important; }
body app-overview .stats-bar { gap: 12px; }
body app-overview .stat-item {
  min-width: 0;
  padding: 12px 14px !important;
  border-radius: 11px;
  text-align: center;
}
body app-overview .stat-value { color: var(--hd-ink) !important; font-size: 18px; }
body app-overview .stat-label { color: var(--hd-muted) !important; font-size: 11px; }
body app-overview .info-tag { display: inline-flex; width: auto; padding: 4px 8px; border-radius: 6px; }
body app-overview .hd-empty-state {
  width: min(100%, 760px);
  margin: clamp(28px, 7vh, 70px) auto;
  padding: clamp(28px, 6vw, 64px);
  background: var(--hd-paper);
  border: 1px solid var(--hd-line);
  border-radius: 22px;
  box-shadow: var(--hd-shadow);
  color: var(--hd-ink);
  text-align: center;
}
body app-overview .hd-empty-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: #ad5b40;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body app-overview .hd-empty-state h1 {
  margin: 0 auto 18px;
  max-width: 630px;
  color: var(--hd-ink);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.12;
  letter-spacing: -.055em;
}
body app-overview .hd-empty-state p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--hd-muted);
  font-size: 17px;
  line-height: 1.65;
}
body app-overview .hd-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
body app-overview .hd-empty-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
}
body app-overview .hd-empty-primary { background: var(--hd-ink); color: #fff; }
body app-overview .hd-empty-primary:hover { background: #24574a; color: #fff; }
body app-overview .hd-empty-secondary { border: 1px solid #b8cabc; color: var(--hd-ink); }
body app-overview .hd-empty-secondary:hover { background: #edf3e9; color: var(--hd-ink); }
body app-overview :is(.info-tag, .cred-chip, .lang-tag, .cap-tag, .stat-item) {
  background: #eaf2e3 !important;
  color: var(--hd-ink) !important;
  border-color: #c5d6c0 !important;
}
body app-overview :is(.mail-button, .mail-span),
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(.btn-primary, .primary-btn, .submit-btn, .btn-save, .btn-add-emp) {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(.tab-bar, .dashboard-tabs, .sub-tab-bar) {
  background: #eaf0e5 !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 12px !important;
}
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(.tab.active, .dash-tab.active, .sub-tab.active) {
  background: var(--hd-ink) !important;
  color: #fff !important;
}
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: #fff !important;
  border: 1px solid #b8cabc !important;
  border-radius: 10px !important;
  color: var(--hd-ink) !important;
}
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(.auth-gate, .empty-state) {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 17px !important;
  color: var(--hd-ink) !important;
}
body :is(app-offer-review, app-provider-offer, app-userview, app-sp-portal, app-admin)
  :is(.status-banner.success, .payment-confirmed-card, .payment-saved-card,
  .contract-card, .success-msg) {
  background: #e7f2e1 !important;
  border-color: #b8d3b1 !important;
  color: var(--hd-ink) !important;
}

body app-sp-portal .sp-portal-container { max-width: 1160px !important; color: var(--hd-ink) !important; }
body app-sp-portal :is(.portal-header h1, .profile-form h3, .add-labels-section h3,
  .org-section h2, .services-section h2, .pricing-weights-section h2,
  .application-info h3, .work-experiences h3, h2) { color: var(--hd-ink) !important; }
body app-sp-portal :is(.sp-name, .pw-cat-label, .invoice-val, .cat-name) { color: var(--hd-ink) !important; }
body app-sp-portal :is(.form-group label, .invoice-form label, .rate-field label,
  .invoice-label, .emp-email, .we-company, .org-hint, .services-hint,
  .avail-cat, .loading-msg, .info-grid strong, .pw-weight-label,
  .pw-question-label, .we-resp) { color: var(--hd-muted) !important; }
body app-sp-portal :is(.we-card, .add-employee-form, .avail-label,
  .label-chip, .pw-answer-row, .invoice-card, .rate-card, .employee-card) {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 12px !important;
  color: var(--hd-ink) !important;
}
body app-sp-portal :is(.label-chip, .pw-answer-row) { background: #edf4e7 !important; }
body app-sp-portal :is(.tab-bar, .invoice-row, .add-labels-section,
  .application-info, .work-experiences, .services-section,
  .add-service-row, .invoice-form) { border-color: var(--hd-line) !important; }
body app-sp-portal .tab-bar button { color: var(--hd-muted) !important; }
body app-sp-portal .tab-bar button.active,
body app-sp-portal .tab-bar button:hover {
  color: var(--hd-ink) !important;
  border-bottom-color: var(--hd-coral) !important;
  background: #eef4e8 !important;
}
body app-sp-portal :is(.btn-logout, .btn-link, .pw-toggle) {
  color: var(--hd-ink) !important;
  border-color: #a8c5af !important;
}
body app-sp-portal :is(.btn-upload, .btn-save) {
  background: var(--hd-ink) !important;
  color: #fff !important;
  border-radius: 9px !important;
}
body app-sp-portal :is(.photo-placeholder, .profile-photo) {
  border-color: #94b69b !important;
}
body app-sp-portal .photo-placeholder { background: #e6f0dc !important; color: var(--hd-ink) !important; }
body app-sp-portal :is(.service-select, .filter-input, .feedback-textarea,
  .pw-weight-input) {
  background: #fff !important;
  color: var(--hd-ink) !important;
  border: 1px solid #b8cabc !important;
  border-radius: 9px !important;
}
body app-sp-portal .service-select option { background: #fff !important; color: var(--hd-ink) !important; }

body app-admin .admin-wrapper { max-width: 1300px !important; }
body app-admin :is(.admin-header h2, .admin-dashboard h2, .edit-panel h3) { color: var(--hd-ink) !important; }
body app-admin .admin-table {
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
body app-admin .admin-table :is(th, td) { border-color: var(--hd-line) !important; color: var(--hd-ink) !important; }
body app-admin .admin-table th { background: #eaf1e6 !important; }
body app-admin .admin-table tr:hover td { background: #f1f6ea !important; }
body app-admin :is(.cap-tag, .q-type-badge, .acct-provider) {
  background: #e7f1e0 !important;
  color: var(--hd-ink) !important;
  border-color: #bdd3b9 !important;
}
body app-admin .tab-bar button { color: var(--hd-muted) !important; }
body app-admin .tab-bar button.active,
body app-admin .tab-bar button:hover {
  color: var(--hd-ink) !important;
  border-bottom-color: var(--hd-coral) !important;
}

@media (max-width: 760px) {
  body app-about .about-section { grid-template-columns: 1fr; }
  body app-about .about-block { min-height: 0; }
  body app-pricing .pricing-grid { grid-template-columns: 1fr !important; }
  body app-apply-service-provider .benefits-grid { grid-template-columns: 1fr !important; }
  body :is(app-about .about-hero, app-pricing .pricing-hero,
    app-apply-service-provider .apply-hero) { padding: 65px 20px 70px !important; }
  body :is(app-about .about-hero, app-pricing .pricing-hero,
    app-apply-service-provider .apply-hero)::after { font-size: 17rem; top: -60px; right: -70px; }
  body :is(app-apply-service-wizard .email-form-container,
    app-apply-personal-data .service-provider-form,
    app-apply-work-experience .work-experience-form,
    app-apply-create-account .create-account-form) {
    width: calc(100% - 24px) !important;
    margin-top: 18px !important;
    padding: 22px 17px !important;
  }
  body :is(app-apply-service-wizard, app-apply-personal-data,
    app-apply-work-experience, app-apply-create-account) .step-indicator { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  body app-root :is(button, a) { transition: none !important; animation: none !important; }
}