:root {
  color-scheme: light;
  --opright-night: #010510;
  --opright-navy: #07152f;
  --opright-panel: #0b1d43;
  --opright-blue: #0877ff;
  --opright-cyan: #03a7ff;
  --opright-royal: #0b43ee;
  --opright-ice: #eaf3ff;
  --opright-wash: #f4f7fc;
  --opright-line: #dbe5f2;
  --opright-muted: #66758b;
  --opright-gradient: linear-gradient(135deg, var(--opright-cyan), var(--opright-blue) 48%, var(--opright-royal));
  --navy: var(--opright-night);
  --green: var(--opright-blue);
  --bg: var(--opright-wash);
  --paper: #fff;
  --muted: var(--opright-muted);
  --line: var(--opright-line);
  --site-ink: var(--opright-night);
  --site-green: var(--opright-blue);
  --site-lime: #7bd5ff;
  --site-cream: var(--opright-wash);
  --site-line: var(--opright-line);
  --workspace-canvas: var(--opright-wash);
  --workspace-border: var(--opright-line);
  --workspace-muted: var(--opright-muted);
  --guide-navy: var(--opright-night);
  --guide-green: var(--opright-blue);
  --support-navy: var(--opright-night);
  --platform-ink: var(--opright-night);
  --platform-green: var(--opright-blue);
}

::selection { color: #fff; background: var(--opright-blue); }
:where(button,a,input,select,textarea):focus-visible { outline: 3px solid rgb(3 167 255 / 42%); outline-offset: 2px; }

/* Public brand surfaces */
body:has(#appView.hidden),.marketingSite { background: var(--opright-night); }
.marketingNav { color: #f8fbff; border-bottom-color: rgb(93 143 255 / 18%); background: rgb(1 5 16 / 88%); box-shadow: 0 10px 35px rgb(0 0 0 / 22%); }
.marketingBrand { color: #fff; letter-spacing: .16em; text-transform: uppercase; }
.marketingBrand>img,.authboxHeading>img,.workspaceBrand>img,.legalBrand img,.platformBrand img,.platformGateCard img { border-radius: 22%; background: var(--opright-night); box-shadow: 0 0 0 1px rgb(84 144 255 / 20%),0 10px 32px rgb(0 66 255 / 18%); }
.marketingLinks a,.marketingSignIn,.marketingActions .marketingSignIn { color: #b8c8e2; }
.marketingLinks a:hover,.marketingSignIn:hover,.marketingExistingCustomer a,.marketingTextLink { color: var(--opright-cyan)!important; }
.marketingActions .marketingSignIn { border-color: rgb(114 158 255 / 24%); background: rgb(255 255 255 / 5%); }
.marketingButton,.primary,.featured .pricingCta,.installSection #browserInstallButton,.platformButtonPrimary { color: #fff; border-color: transparent; background: var(--opright-gradient); box-shadow: 0 10px 28px rgb(7 93 255 / 25%); }
.marketingButton:hover,.primary:hover { box-shadow: 0 15px 38px rgb(7 93 255 / 35%); }
.marketingHero { max-width: none; padding-inline: max(38px,calc((100vw - 1144px)/2)); color: #fff; background: radial-gradient(circle at 82% 24%,rgb(3 167 255 / 20%),transparent 30%),radial-gradient(circle at 61% 74%,rgb(11 67 238 / 23%),transparent 34%),linear-gradient(145deg,#010510 0%,#030a1c 57%,#071a3d 100%); }
.marketingHero h1,.marketingHeroCopy .marketingProof strong { color: #f8fbff; }
.marketingHero h1 span,.marketingEyebrow,.marketingHero .marketingEyebrow { color: var(--opright-cyan); }
.marketingHeroCopy>p,.marketingExistingCustomer,.marketingProof { color: #aebed7!important; }
.marketingEyebrow>span { background: var(--opright-cyan); box-shadow: 0 0 0 4px rgb(3 167 255 / 16%),0 0 20px rgb(3 167 255 / 55%); }
.showcaseGlow { background: radial-gradient(ellipse at 65% 42%,rgb(3 167 255 / 28%),transparent 63%),radial-gradient(ellipse at 32% 85%,rgb(11 67 238 / 28%),transparent 60%); }
.showcaseWindow { color: #eef6ff; border-color: rgb(83 136 255 / 28%); background: rgb(7 21 47 / 94%); box-shadow: 0 35px 100px rgb(0 20 78 / 45%); }
.showcaseChrome { border-bottom-color: rgb(111 156 255 / 14%); background: #040b1b; }
.showcaseChrome>b,.showcaseHeader p,.showcaseSection>span:first-child,.showcaseMetrics span,.showcaseJob small,.showcaseTime { color: #8fa5c6; }
.showcaseMetrics>div { color: #f4f8ff; border-color: rgb(110 155 255 / 15%); background: rgb(255 255 255 / 5%); }
.showcaseJob { border-bottom-color: rgb(110 155 255 / 13%); }
.showcaseChip,.featureIcon,.invoiceFieldChip,.installAppPanel .installStepNumber { color: #075ed5; background: var(--opright-ice); }
.showcaseFloat { color: #edf5ff; border-color: rgb(101 151 255 / 25%); background: #0a1834; box-shadow: 0 15px 42px rgb(0 22 78 / 42%); }
.showcaseFloat small { color: #9cb0ce; }
.tradeStrip { color: #a9b9d2; border-block-color: rgb(105 151 255 / 14%); background: #020713; }
.tradeStrip>div>span,.tradeStrip>span { color: #93a7c5; }
.featureSection,.pricingSection { max-width: none; color: var(--opright-night); background: var(--opright-wash); }
.featureSection>*,.pricingSection>* { width: min(1134px,calc(100% - 76px)); margin-inline: auto; }
.featureCard,.pricingCard { border-color: #dce6f3; background: #fff; box-shadow: 0 13px 34px rgb(1 29 79 / 6%); }
.featureSchedule { background: linear-gradient(150deg,#fff 55%,#eaf3ff); }
.featureMiniTimeline>i,.featureMiniTeam i,.featureMiniBars i:nth-child(7) { background: var(--opright-blue); }
.featureMiniBars i { background: #dbe9fb; }
.featureMiniBars i:nth-child(6) { background: #75b9ff; }
.industrySection,.installSection,.closingSection { color: #fff; background: radial-gradient(circle at 88% 18%,rgb(3 167 255 / 15%),transparent 31%),linear-gradient(137deg,#010510 0%,#07152f 68%,#0b2452 100%); }
.industrySection .sectionIntro h2,.closingSection h2 { color: #fff; }
.industrySection .sectionIntro>p,.closingSection>p,.installSection .sectionIntro>p { color: #afbed6; }
.industryPills>span { color: #dfeaff; border-color: rgb(111 156 255 / 24%); background: rgb(255 255 255 / 6%); }
.pricingCard.featured { border-color: var(--opright-blue); box-shadow: 0 20px 54px rgb(7 93 255 / 17%); }
.planPopular { background: var(--opright-gradient); }
.phoneScreen { background: radial-gradient(circle at 75% 20%,#14377b,transparent 36%),linear-gradient(153deg,#040a19,#091b3e 58%,#0b2d68); }
.closingSection { border-top: 1px solid rgb(95 146 255 / 15%); }
.marketingFooter { max-width: none; padding-inline: max(38px,calc((100vw - 1134px)/2)); color: #dce8fb; border-top-color: rgb(105 151 255 / 15%); background: #010510; }
.marketingFooter>p,.marketingFooter>div>a,.marketingFooter>span { color: #8fa4c3; }
.marketingSite .signInSection:not([hidden]) { color: var(--opright-night); background: radial-gradient(circle at 18% 15%,rgb(3 167 255 / 18%),transparent 30%),radial-gradient(circle at 90% 82%,rgb(11 67 238 / 16%),transparent 32%),#020713; }
.signInCopy,.signInCopy h2 { color: #fff; }
.signInCopy>p,.signInBenefits span { color: #b5c5dd; }

/* Signed-in workspace */
body:has(#appView:not(.hidden)) { background: var(--opright-wash); color: var(--opright-night); }
#appView .top { color: #fff; border-bottom-color: rgb(88 139 255 / 22%); background: rgb(1 5 16 / 95%); box-shadow: 0 9px 28px rgb(0 20 72 / 18%); }
.workspaceBrandCopy>span { color: #69baff; }
.workspaceBrandCopy>strong,.companyBrandWordmark { color: #fff!important; }
.workspaceLivePill { color: #8fd3ff; border: 1px solid rgb(65 155 255 / 22%); background: rgb(8 119 255 / 13%); }
.workspaceLivePill>i { background: var(--opright-cyan); box-shadow: 0 0 12px rgb(3 167 255 / 80%); }
.workspaceHeaderButton { color: #d9e7fb; border-color: rgb(113 157 255 / 22%); background: rgb(255 255 255 / 6%); }
#appView .hero,.settingsHubIntro,.homeCommandDeck,.scheduleCommandDeck,.paymentOverview,.migrationHero,.billingConsentSummary,.launchAccessBanner,.settingsHelpHero,.supportHero { color: #fff; background: radial-gradient(circle at 86% 14%,rgb(3 167 255 / 22%),transparent 31%),linear-gradient(135deg,#010510,#071b3f 67%,#0b2f70); box-shadow: 0 18px 46px rgb(0 38 122 / 18%); }
.primary,.workspaceUnsavedSave,.workspaceLeaveSave { background: var(--opright-gradient)!important; }
.secondary { color: #08244d; background: #e7f1ff; }
.link,.eyebrow,.settingsHubBack,.settingsHubEyebrow,.legalSettingsHeading span,.invoiceShareEyebrow,.invoiceShareSectionLabel,.migrationEyebrow,.paymentEyebrow,.homePageHeader>div>span,.schedulePageHeader>div>span { color: var(--opright-blue); }
#appView .panel,#appView .card,#appView .stat,#appView .form,.settingsHubCard,.workCard,.invoiceShareContact,.invoiceShareEditor,.invoiceSharePreview,.migrationSourceCard,.migrationFileCard,.migrationMapping,.migrationReview,.migrationHistorySection { border-color: #dce6f2; background: #fff; box-shadow: 0 8px 26px rgb(1 35 91 / 5%); }
:where(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { border-color: #d6e2f0; background: #fbfdff; }
:where(input,select,textarea):focus { border-color: #62adff!important; box-shadow: 0 0 0 4px rgb(8 119 255 / 11%)!important; }
.settingsHubIcon,.settingsSearchResultIcon,.migrationOwnerPill,.invoiceSegmented,.stripeEmbeddedTabs button,.routeAppChoice a,.invoiceShareSummary>div { background: #eef5ff; }
.settingsHubHelpCard { border-color: #bdd8ff; background: linear-gradient(145deg,#f8fbff,#eaf3ff); }
.settingsHubHelpCard .settingsHubIcon,.stripeEmbeddedTabs button.active { color: #fff; background: var(--opright-night); }
.tabs { border-top-color: rgb(91 141 255 / 22%); background: rgb(1 5 16 / 96%); box-shadow: 0 -14px 38px rgb(0 20 70 / 18%); }
.tabs button { color: #8ea4c4; }
.tabs button.active { color: #66c9ff; }
.oprightGuideLauncher,.oprightGuideSend,.guideLauncher,.guideSend { background: var(--opright-gradient)!important; }
.workspaceLoadingScreen,.requiredLegalConsent { background: radial-gradient(circle at 70% 20%,rgb(3 167 255 / 18%),transparent 32%),rgb(1 5 16 / 94%); }
.workspaceLoadingCard { border-color: rgb(100 151 255 / 22%); background: #07152f; box-shadow: 0 28px 82px rgb(0 0 0 / 42%); }
.workspaceLoadingName,.workspaceLoadingMessage { color: #fff; }
.workspaceLoadingEyebrow,.workspaceLoadingSpinner { color: var(--opright-cyan); border-color: rgb(3 167 255 / 25%); border-top-color: var(--opright-cyan); }

@media (min-width:1060px) {
  #appView .tabs { border-right-color: rgb(91 141 255 / 20%); background: #010510; }
  #appView .tabs::before { color: #fff; letter-spacing: .16em; text-transform: uppercase; }
  #appView .tabs button.active { color: #fff; background: linear-gradient(110deg,rgb(3 167 255 / 22%),rgb(11 67 238 / 34%)); box-shadow: inset 3px 0 var(--opright-cyan); }
}

/* Legal, customer, and platform surfaces */
.legalTopbar,.legalSidebar>div,.platformSidebar,.platformGate { background: var(--opright-night); }
.legalArticleHeader,.platformHero { background: linear-gradient(135deg,#010510,#071b3f 68%,#0b2f70); }
.legalSidebarEyebrow,.legalArticleHeader>span,.platformEyebrow { color: var(--opright-cyan); }
.legalCallout,.statusSummary { border-color: #c8ddfb; background: #eef5ff; }
.legalArticle a,.legalContactLine a,.clientFooter a { color: #075ed5; }
.clientShell,.clientCard,.platformMetric,.platformCard,.platformTableCard { border-color: #dce6f2; }
.platformNav button.active,.platformButtonPrimary { background: var(--opright-gradient); }

/* Retire the previous decorative green without changing semantic success states. */
#appView :where(
  [class*="Eyebrow"],
  [class*="eyebrow"],
  .homeTitleCopy > span,
  .homeSectionEyebrow,
  .homeRouteEyebrow,
  .homeRouteListEyebrow,
  .homeQuietEyebrow,
  .homeRouteScheduleLink,
  .homeRouteTime,
  .settingsSearchLabel,
  .helpSearchBlock > label,
  .helpPopularCategory,
  .helpArticleEyebrow,
  .workspaceNotificationHeader > div > span,
  .helpPrivacyNote > span,
  .jobOrderCrew,
  .plannerJobCrew,
  .plannerGroupTotal,
  .legalSettingsHeading > a,
  .legalContactLine a,
  .billingConsentForm .check a,
  .legalSignupCheck a
) { color: var(--opright-blue) !important; }

#appView :where(
  .hero .eyebrow,
  .plannerCommandCopy > span,
  .helpHeroEyebrow,
  .helpHero h2 span,
  .workspaceLoadingEyebrow
) { color: #65c8ff !important; }

#appView :where(
  .settingsHubIcon,
  .settingsSearchResultIcon,
  .settingsSearchClear,
  .helpSearchSuggestionIcon,
  .helpQuickStartNumber,
  .helpTopicIcon,
  .helpArticleExpand,
  .homeMetricIcon:not(.homeMetricIconInvoice):not(.homeMetricIconRevenue),
  .plannerGroupDate,
  .jobOrderEmptyIcon,
  .notificationOwnerPill,
  .schedulingOwnerPill,
  .payOwnerPill,
  .analyticsOwnerBadge,
  .migrationOwnerPill
) {
  color: #075ed5 !important;
  border-color: #c8ddfb !important;
  background: var(--opright-ice) !important;
}

#appView :where(
  .settingsSearchResult:hover,
  .settingsSearchResult[aria-selected="true"],
  .helpSearchSuggestion:hover,
  .helpSearchSuggestion[aria-selected="true"],
  .helpTopicCard.is-active,
  .settingsHubHelpCard,
  .statsTileFeatured
) {
  border-color: #bdd8ff !important;
  background: linear-gradient(145deg, #f8fbff, #eaf3ff) !important;
}

#appView #calendar .plannerTodayButton.active {
  color: #a8dcff !important;
  border-color: rgb(3 167 255 / 42%) !important;
  background: rgb(8 119 255 / 18%) !important;
}

#appView #calendar .plannerWeekDay > i.hasJobs { background: var(--opright-cyan) !important; }
#appView #calendar .plannerWeekDay.today:not(.active) > strong { color: #8fd3ff !important; }
#appView #calendar .plannerSchedule:not(.plannerScheduleOverdue) { border-left-color: var(--opright-blue) !important; }

#appView :where(
  .jobOrderCount,
  .plannerJobStatus:not(.plannerOverdueTag),
  .homeRouteBadge
) {
  color: #075ed5 !important;
  background: var(--opright-ice) !important;
}

#appView :where(.settingsSearchField, .helpSearchField):focus-within {
  border-color: #62adff !important;
  box-shadow: 0 0 0 4px rgb(8 119 255 / 10%) !important;
}

#appView .helpAskGuide > span { color: var(--opright-cyan) !important; }
#appView .helpContactSupport { border-color: var(--opright-line) !important; }

@media (max-width:760px) {
  .featureSection>*,.pricingSection>* { width: calc(100% - 42px); }
  .marketingHero { padding-inline: 22px; }
  .marketingFooter { padding-inline: 21px; }
}

@media print {
  :root { --navy: #111; --green: #075ed5; --bg: #fff; }
}