/* ═══════════════════════════════════════════════════════════════
   phone-fresh.css: the phone Service Hub in the "Fresh" look of the landing
   page (Ren 2026-11-11). Phone shell only: loaded with media max-width:900px
   and every rule sits under body:not(.dx), so PC never uses it.
   Look only: no ids, text or behaviour change.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
body:not(.dx) { --pf-ink: #14201A; --pf-mut: #56635A; --pf-line: #E1E7E2; --pf-soft: #F4F6F4; --pf-bg: #FFFFFF; --pf-card: #FFFFFF; --pf-g: #1E7A33; --pf-deep: #0E2B18;
  --pf-head: 'Plus Jakarta Sans', Outfit, Inter, system-ui, sans-serif; }
body.dark-mode:not(.dx) { --pf-ink: #EEF3F0; --pf-mut: #A9B6AE; --pf-line: #2C3A31; --pf-soft: #131C17; --pf-bg: #0C1410; --pf-card: #16201A; --pf-g: #2EA84A; --pf-deep: #0A2112; }
body:not(.dx), body:not(.dx) #nhHome { background-color: var(--pf-bg) !important; }
/* top: white header like the landing */
body:not(.dx) .nh-hero { background: var(--pf-bg) !important; border-bottom: 1px solid var(--pf-line); box-shadow: none !important; }
body:not(.dx) .nh-hero .nh-wordmark { color: var(--pf-ink) !important; }
body:not(.dx) .nh-hero .nh-wordmark .cc-wm-c { color: #2EA84A !important; }
body:not(.dx) .nh-hero .nh-bell { color: var(--pf-ink) !important; }
body:not(.dx) .nh-search { background: var(--pf-soft) !important; border: 1.5px solid var(--pf-line) !important; border-radius: 16px !important; box-shadow: none !important; }
body:not(.dx) .nh-search-btn { background: var(--pf-g) !important; border-radius: 12px !important; }
/* sections */
body:not(.dx) #nhHome .nh-sec h2 { font: 800 21px/1.15 var(--pf-head) !important; letter-spacing: -.03em; color: var(--pf-ink); }
body:not(.dx) .nh-cat { border-radius: 22px !important; box-shadow: none !important; }
body:not(.dx) .nh-cat .nh-ctxt b { font-family: var(--pf-head); font-size: 15px; letter-spacing: -.01em; }
body:not(.dx) .nh-cico { background: #fff !important; border-radius: 15px !important; }
body:not(.dx) .nh-mapbtn, body:not(.dx) .nh-pchip { border: 1.5px solid var(--pf-line) !important; box-shadow: none !important; }
body:not(.dx) .nh-trust { background: linear-gradient(120deg, #0E2B18, #17532B 70%, #1E7A33) !important; border-radius: 24px !important; box-shadow: none !important; }
body:not(.dx) .nh-trust-txt b { font-family: var(--pf-head); letter-spacing: -.02em; }
body:not(.dx) .nh-pcard { background: var(--pf-card) !important; border: 1.5px solid var(--pf-line) !important; border-radius: 22px !important; box-shadow: none !important; }
body:not(.dx) .nh-pphoto { background: var(--pf-soft) !important; }
body:not(.dx) #nhBottomNav { background: color-mix(in srgb, var(--pf-bg) 88%, transparent) !important; border-top: 1px solid var(--pf-line); }
/* Task Feed / provider top: same white header */
body:not(.dx) .tf-hero { background: var(--pf-bg) !important; border-bottom: 1px solid var(--pf-line); box-shadow: none !important; }
body:not(.dx) .tf-hero .cc-wm-dark { color: var(--pf-ink) !important; }
body:not(.dx) .tf-hero .cc-wm-dark .cc-wm-c { color: #2EA84A !important; }
body:not(.dx) .tf-hero .tf-bell { color: var(--pf-ink) !important; }
body:not(.dx) .tf-search { background: var(--pf-soft) !important; border: 1.5px solid var(--pf-line) !important; border-radius: 16px !important; box-shadow: none !important; }
body:not(.dx) #taskFeedView .main-content-area, body:not(.dx) #taskFeedView .tab-main-body, body:not(.dx) #providerView .main-content-area, body:not(.dx) #providerView .tab-main-body, body:not(.dx) #providerView { background-color: var(--pf-bg) !important; }
body:not(.dx) .tf-seg { background: var(--pf-soft) !important; border-radius: 16px !important; }
body:not(.dx) .tf-tile { border-radius: 22px !important; box-shadow: none !important; }
/* Messages */
body:not(.dx) #chatContactsPanel { background: var(--pf-bg) !important; }
body:not(.dx) #chatContactsPanel .chat-contacts-header { background: var(--pf-bg) !important; border-bottom: 1px solid var(--pf-line); }
body:not(.dx) #chatContactsPanel .chat-contacts-header h4 { color: var(--pf-ink) !important; font-family: var(--pf-head) !important; letter-spacing: -.03em; }
body:not(.dx) #chatContactsPanel .chat-contacts-header .chatbox-action-btn, body:not(.dx) #chatContactsPanel .chat-contacts-header button { color: var(--pf-ink) !important; }
/* Account */
body:not(.dx) #profileView { background: var(--pf-bg) !important; }
body:not(.dx) #pfHeroMobile { background: linear-gradient(120deg, #0E2B18, #17532B 70%, #1E7A33) !important; }
body:not(.dx) .pfc-card { border: 1.5px solid var(--pf-line); border-radius: 22px !important; box-shadow: none !important; }
body:not(.dx) #profileName { font-family: var(--pf-head); letter-spacing: -.02em; }
/* Provider mode top: same white header */
body:not(.dx) #phHome { background-color: var(--pf-bg) !important; }
body:not(.dx) .ph-hero { background: var(--pf-bg) !important; border-bottom: 1px solid var(--pf-line); box-shadow: none !important; }
body:not(.dx) .ph-hero .cc-wm-dark { color: var(--pf-ink) !important; }
body:not(.dx) .ph-hero .cc-wm-dark .cc-wm-c { color: #2EA84A !important; }
body:not(.dx) .ph-hero .ph-bell { color: var(--pf-ink) !important; }
body:not(.dx) .ph-search { background: var(--pf-soft) !important; border: 1.5px solid var(--pf-line) !important; border-radius: 16px !important; box-shadow: none !important; }
body:not(.dx) #phHome .ph-sec-h h2 { font: 800 19px/1.15 var(--pf-head) !important; letter-spacing: -.03em; color: var(--pf-ink); }
body:not(.dx) #phFeedSlot .main-content-area, body:not(.dx) #phFeedSlot #taskFeedContainer { background-color: var(--pf-bg) !important; }
body:not(.dx) #phFeedSlot #taskFeedContainer .feed-empty { border: 1.5px dashed var(--pf-line); border-radius: 22px; }
/* provider lists */
body:not(.dx) #nhHome .professional-card, body:not(.dx) #nhHome .professional-card .prof-card-head { background: var(--pf-card) !important; }
body:not(.dx) #nhHome .professional-card { border: 1.5px solid var(--pf-line) !important; border-radius: 22px !important; box-shadow: none !important; }
/* dark mode */
body.dark-mode:not(.dx) .nh-cico { background: rgba(255, 255, 255, .08) !important; }
body.dark-mode:not(.dx) .nh-hero .nh-wordmark, body.dark-mode:not(.dx) .tf-hero .cc-wm-dark, body.dark-mode:not(.dx) .ph-hero .cc-wm-dark { color: #fff !important; }
}