/* Shared neutral canvas and elevated white panels across Repairology. */
:root{
 --site-page-background:#f4f4f4;
 --site-card-background:#fff;
 --site-card-border:#e2e2e2;
 --site-card-shadow:0 2px 5px rgb(0 0 0 / 4%),0 7px 20px rgb(0 0 0 / 3%);
 --site-surface:#f4f4f4;
 --phone-surface:#f4f4f4;
 --career-surface:#f4f4f4;
}
html,body[data-ui-shell],body[data-ui-shell] main{background-color:var(--site-page-background)}
/* Page canvases share a single gray, including transaction and account screens. */
body[data-ui-shell] :is(
 .hero,.gray,.section-light,.brand-banner,.repair-services-section,.component-quality-section,
 .google-reviews-section,.customer-stories,.home-repair-promise,.home-guides-section,
 .home-shop-section,.home-more-repairs,.home-faq-refined,.category-page,.category-hero,
 .category-brand-strip,.category-neighborhood,.phone-repair-page,.phone-band,
 .careers-page,.careers-hero,.careers-fit,.careers-process,.careers-application-entry,
 .business-public-pricing,.business-public-cta,.help-center,.guide-popular,.guide-expert,
 .corporate-neighborhood,.store-home,.store-brands,.repair-booking,.booking-fullscreen,
 .booking-progress,.customer-portal,.portal-workspace,.hiring-portal,.ti-page
){background:var(--site-page-background)}
body[data-ui-shell] #repair-guide-page,
body[data-ui-shell] .careers-refined #apply{background:var(--site-page-background)}
/* White cards retain their existing geometry, content, and state styling. */
body[data-ui-shell] :is(
 .home-device-choice,.help-controls,.device,.review,.customer-story,.google-review-card,
 .manufacturer-repair-card,.brand-logo-tile,.repair-menu-card,.trust-card,
 .home-promise-split,.home-service-benefits article,.home-more-repairs .service-grid>a,
 .home-shop-card,.home-guide-card,.home-faq-refined details,.repair-service-card,
 .component-quality-card,.related-device-card,.category-option-grid>a,
 .category-three-grid>article,.category-faq-grid details,.phone-brand-card,
 .phone-issue-card,.phone-confidence,.phone-faq-list details,.phone-final-cta,
 .careers-value-grid article,.careers-strengths li,.career-job-card,.careers-process-grid li,
 .careers-application-entry form,.business-public-tier,.form-panel,.flow-result,
 .location-box,.corporate-finder-box,.corporate-location-card,.facility-finder,
 .guide-card,.guide-popular-grid>a,.shop-product-card,.store-editorial-card,
 .store-blog-grid>article,.store-benefit-card,.store-promo-grid>a,.store-phone-grid>a,
 .store-category-grid>a,.shop-filters,.repair-flow-panel,.repair-summary,
 .portal-login,.portal-card,.portal-stat,.portal-guest-launch,.hiring-card,.hiring-apply-card
){background:var(--site-card-background);border-color:var(--site-card-border);box-shadow:var(--site-card-shadow)}
/* Keep image wells and headings part of the same white card surface. */
body[data-ui-shell] :is(
 .manufacturer-card-art,.home-shop-art,.home-guide-art,.repair-service-art,
 .related-device-art,.related-device-copy,.guide-card-image,.shop-product-art,
 .dropdown-card-footer,.facility-search-area,.google-reviews-heading
){background:var(--site-card-background)}
body[data-ui-shell] :is(.phone-hero-art,.category-hero-art,.category-step-visual){
 background:var(--site-card-background);box-shadow:var(--site-card-shadow)
}
body[data-ui-shell] .facility-card{background:var(--site-card-background);box-shadow:0 1px 4px rgb(0 0 0 / 4%)}
body[data-ui-shell] .facility-results,
body[data-ui-shell] .facility-finder-note{background:var(--site-card-background)}
body[data-ui-shell] :is(.promo:not(.black),.help-ai){background:var(--site-card-background);box-shadow:var(--site-card-shadow)}
/* Customer workspace sections and booking choices keep their selected borders and badges. */
body[data-ui-shell] .portal-workspace .portal-panel:not(:has(>h2)):not(.portal-progress-panel),
body[data-ui-shell] .portal-progress-panel,
body[data-ui-shell] .portal-panel:has(form){background:var(--site-card-background);box-shadow:var(--site-card-shadow)}
body[data-ui-shell] :is(.booking-service-card,.booking-location-card,.screen-tier-card,.booking-visit-card,.booking-repair-card){box-shadow:0 2px 7px rgb(0 0 0 / 5%)}
body[data-ui-shell] .home-device-choice:hover{border-color:#999;box-shadow:0 5px 16px rgb(0 0 0 / 9%)}
body[data-ui-shell] .home-faq-refined details[open],
body[data-ui-shell] .category-faq-grid details[open]{background:#fff;border-color:#bcbcbc}