/*!
 * ============================================================================
 * DIALEDRIDE™ | DIALEDRIDE KINEMETRIC™
 * Biomechanical Telemetry & Trigonometric Coordinate Engine
 *
 * Copyright (c) 2025–2026 John Gould, trading as DialedRide. All rights reserved.
 * @license Proprietary
 *
 * PROPRIETARY AND CONFIDENTIAL.
 * This software, including its algorithms, analytical models, scoring methods,
 * thresholds and interface designs, is the intellectual property of John Gould
 * and contains confidential information and trade secrets.
 *
 * Use is licensed only under the DialedRide KineMetric Terms of Use or a separate
 * written licence. Copying, modifying, distributing, decompiling or reverse
 * engineering this software is not permitted, except where the law allows it.
 * ============================================================================
 */
 /**/ @media screen { html:root.studio-ui { --st-canvas: #f3f2ee; --st-panel: #ffffff; --st-soft: #eeefeb; --st-ink: #222b31; --st-muted: #636e73; --st-line: #dce0dc; --st-accent: #087e83; --st-accent-soft: #e1f1ef; --st-nav: #17252c; --st-nav-muted: #bbc8cd; --st-radius: 16px; --st-shadow: 0 3px 14px rgb(30 47 52 / 4%); --ui-paper: var(--st-canvas); --ui-white: var(--st-panel); --ui-ink: var(--st-ink); --ui-muted: var(--st-muted); --ui-subtle: var(--st-muted); --ui-line: var(--st-line); --ui-line-soft: var(--st-line); --ui-green: var(--st-accent); --ui-green-2: var(--st-accent); --ui-green-soft: var(--st-accent-soft); --ui-lime: #a5e6df; --ui-violet: #54719a; --ui-violet-soft: #edf1f7; --ui-radius: var(--st-radius); --ui-shadow: var(--st-shadow); --ui-shadow-soft: var(--st-shadow); --dr-input-bg: var(--st-panel); --dr-surface-strong: var(--st-panel); --dr-surface-soft: var(--st-soft); --dr-surface-2: var(--st-soft); --dr-surface-3: var(--st-soft); --dr-elevated: var(--st-panel); --dr-accent: var(--st-accent); --dr-accent-soft: var(--st-accent-soft); --dr-accent-border: var(--st-accent); color-scheme: light; } html:root.studio-ui.dark { --st-canvas: #121a20; --st-panel: #1c282f; --st-soft: #233139; --st-ink: #eef3f4; --st-muted: #b0bec5; --st-line: #35454e; --st-accent: #87dcd4; --st-accent-soft: #233f43; --st-nav: #0c1419; --ui-violet: #afc5e8; --ui-violet-soft: #28374b; --st-shadow: 0 3px 16px rgb(0 0 0 / 10%); color-scheme: dark; } html:root.studio-ui body { font-family: 'DM Sans', 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased; background: var(--st-canvas) !important; color: var(--st-ink) !important; } html:root.studio-ui body::before { content: none !important; } html:root.studio-ui :where(button, input, select, textarea) { font: inherit; } html:root.studio-ui :where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--st-accent) !important; outline-offset: 3px !important; } html:root.studio-ui :where(button, summary, a) { -webkit-tap-highlight-color: transparent; } html:root.studio-ui :where(button, summary) { touch-action: manipulation; } html:root.studio-ui [hidden] { display: none !important; } html:root.studio-ui .page-workspace .dr-app-shell { display: block !important; background: var(--st-canvas) !important; } /**/ html:root.studio-ui body.page-workspace .dr-global-sidebar { position: sticky; top: 0; z-index: 90; width: 100% !important; height: 76px; overflow: visible; background: var(--st-nav) !important; box-shadow: none !important; color: #eff6f7 !important; transform: none; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-topbar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; padding: 0 28px !important; max-width: none; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-brand { display: flex !important; margin: 0; gap: 12px !important; flex-shrink: 0; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-brand > div:first-child { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: #a5e6df !important; transform: none; color: #173b40 !important; } html:root.studio-ui body.page-workspace .dr-studio-mark { font-size: 24px; color: #173b40 !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar [data-dr-shell-brand-name] { display: block !important; max-width: 250px; font-size: 18px !important; line-height: 1.2; letter-spacing: -.035em !important; text-transform: none !important; white-space: normal; color: #eff6f7 !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar [data-dr-shell-brand-tagline] { display: block !important; margin-top: 4px; color: #bbc8cd !important; font: 10px 'IBM Plex Mono', monospace !important; text-transform: uppercase; letter-spacing: .12em !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-account-tier-badge { display: none; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions { display: flex !important; flex: 1; flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 7px !important; width: auto; min-width: 0; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions > *, html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions :is(.dr-button, summary.dr-button) { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions > details { position: relative !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions > [hidden] { display: none !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-account-tier-switch { position: absolute; right: 28px; top: 91px; width: 126px; min-height: 28px; margin: 0; padding: 4px 8px; border: 1px solid var(--st-line) !important; background: var(--st-canvas) !important; color: var(--st-muted) !important; font: 10px 'DM Sans', sans-serif !important; text-transform: none; } html:root.studio-ui body.page-workspace .dr-workspace-bar:has(~ main) .dr-workspace-bar__status { margin-right: 150px; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-button, .dr-app-more > summary, .dr-sidebar-workflow > summary) { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-height: 42px; gap: 8px; padding: 10px 13px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: var(--st-nav-muted) !important; font-size: 12px !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-button, summary, .dr-sidebar-workflow__item) :is(span, i) { display: inline !important; color: inherit !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar details[open] > summary { background: #29434a !important; color: #eff6f7 !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-button, summary):hover { background: #293c45 !important; color: #fff !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-button--primary { order: 10; color: #14363a !important; background: #a5e6df !important; border-color: #a5e6df !important; margin-left: 8px; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-button--primary:hover { background: #c5f1ec !important; color: #14363a !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions > .dr-button--primary { background: #a5e6df !important; border-color: #a5e6df !important; color: #14363a !important; padding-inline: 17px !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions { justify-content: flex-end !important; } html:root.studio-ui body.page-workspace .dr-sidebar-workflow, html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-more { position: relative; width: auto !important; margin: 0; padding: 0; border: 0; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-sidebar-workflow > summary .dr-sidebar-workflow__current { display: none !important; } html:root.studio-ui body.page-workspace .dr-sidebar-workflow__menu, html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-more-panel { position: absolute !important; top: calc(100% + 12px); right: 0; left: auto; width: 240px; min-width: 220px; margin: 0; padding: 8px; border: 1px solid #35454e !important; border-radius: 14px !important; background: #17252c !important; box-shadow: 0 16px 40px #0003; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-sidebar-workflow__item, .dr-app-menu-item) { display: flex !important; width: 100% !important; min-height: 42px; align-items: center; justify-content: flex-start; padding: 10px 12px !important; border: none !important; border-radius: 8px; background: transparent !important; color: #c2cfd3 !important; font-size: 13px; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-sidebar-workflow__item.is-active, .dr-app-menu-item:hover, .dr-sidebar-workflow__item:hover:not(:disabled), .dr-shell-action--active) { background: #29464b !important; color: #b3eee8 !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-account-identity { display: flex; padding: 12px 8px; margin-bottom: 8px; border: 0; border-bottom: 1px solid #35454e; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-account-identity__copy > * { display: block !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-billing-status:empty { display: none; } /**/ html:root.studio-ui body.page-workspace .dr-workspace-bar { position: relative; top: auto; min-height: 62px; padding: 0 32px; border-bottom: 1px solid var(--st-line); background: var(--st-canvas) !important; box-shadow: none; backdrop-filter: none; } html:root.studio-ui .dr-workspace-bar__copy { display: flex; align-items: center; gap: 14px; } html:root.studio-ui .dr-workspace-bar__copy span { font: 12px 'DM Sans', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; } html:root.studio-ui .dr-workspace-bar__copy span::after { content: '/'; margin-left: 14px; opacity: .4; } html:root.studio-ui .dr-workspace-bar__copy strong { margin: 0 !important; font-size: 12px !important; font-weight: 600; } html:root.studio-ui body.page-workspace .dr-workspace-bar__status { font: 10px 'IBM Plex Mono', monospace; } html:root.studio-ui body.page-workspace .dr-workspace-bar__status::before { background: var(--st-accent); box-shadow: none; width: 5px; height: 5px; } html:root.studio-ui body.page-workspace .dr-workspace-shell { display: grid !important; grid-template-columns: 230px minmax(0, 1fr) !important; max-width: 1800px !important; gap: 36px !important; padding: 16px 32px 64px !important; } html:root.studio-ui body.page-workspace .dr-client-sidebar { position: sticky; top: 100px; padding: 0 22px 0 0; border-right: 1px solid var(--st-line); background: transparent; } html:root.studio-ui body.page-workspace .dr-client-sidebar .dr-panel { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html:root.studio-ui body.page-workspace .dr-client-sidebar__head { margin: 0 0 14px; } html:root.studio-ui body.page-workspace .dr-client-sidebar .dr-kicker { font-size: 10px !important; } html:root.studio-ui body.page-workspace .dr-client-list { max-height: calc(100vh - 290px) !important; padding-right: 0; } html:root.studio-ui body.page-workspace [data-testid="client-open"] { padding: 14px 10px !important; border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; transition: background 150ms ease; } html:root.studio-ui body.page-workspace [data-testid="client-open"]:hover { background: var(--st-soft) !important; } html:root.studio-ui body.page-workspace [data-testid="client-open"][aria-pressed="true"] { border-color: var(--st-line) !important; background: var(--st-panel) !important; box-shadow: var(--st-shadow); } html:root.studio-ui body.page-workspace .dr-client-avatar { width: 36px; height: 36px; border-radius: 50% !important; background: var(--st-accent-soft) !important; color: var(--st-accent) !important; font: 600 12px 'DM Sans', sans-serif; } html:root.studio-ui .dr-directory-name { font-size: 13px; letter-spacing: -.02em; } html:root.studio-ui .dr-directory-contact { font-size: 10px; margin-top: 3px; } html:root.studio-ui .dr-directory-meta { font: 9px 'IBM Plex Mono', monospace; letter-spacing: 0; text-transform: none; opacity: .85; } html:root.studio-ui body.page-workspace .dr-client-collapse { border: 0; background: transparent; color: var(--st-muted); } /**/ html:root.studio-ui body.page-workspace :is(.dr-panel, .dr-card, .dr-card-compact, .dr-subpanel, .dr-shell, .dr-settings-shell, .dr-metric, .dr-empty-state) { border: 1px solid var(--st-line) !important; border-radius: var(--st-radius) !important; background: var(--st-panel) !important; box-shadow: var(--st-shadow) !important; color: var(--st-ink) !important; } html:root.studio-ui body.page-workspace :is(.dr-input, .dr-select, .dr-textarea, input, select, textarea) { min-height: 44px; border: 1px solid var(--st-line) !important; border-radius: 9px !important; background: var(--st-panel) !important; color: var(--st-ink) !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px; color-scheme: inherit !important; } html:root.studio-ui body.page-workspace :is(input[type=checkbox], input[type=radio]) { min-height: 18px; accent-color: var(--st-accent); } html:root.studio-ui body.page-workspace .dr-button { min-height: 42px; border-radius: 9px !important; font-family: 'DM Sans', sans-serif !important; font-size: 12px; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; transition: background 150ms ease, border-color 150ms ease; } html:root.studio-ui body.page-workspace :is(.dr-button--primary, .dr-button-primary) { background: var(--st-accent) !important; border-color: var(--st-accent) !important; color: var(--st-panel) !important; box-shadow: none !important; } html:root.studio-ui body.page-workspace :is(.dr-button--primary, .dr-button-primary) * { color: inherit !important; } /**/ html:root.studio-ui.dark body.page-workspace :is(.dr-button--primary, .dr-button-primary, .dr-button--garage-add, .dr-button--fit-optimizer, .dr-analysis6-switch--active, .dr-analysis6-tab--active, .dr-workspace-tabs > .dr-button[aria-pressed="true"], .dr-workspace-tabs > .dr-button.is-active, .dr-client-actionbar .dr-tab[aria-selected="true"], .dr-client-actionbar .dr-tab.is-active) { color: #172b2d !important; } html:root.studio-ui.dark body.page-workspace :is(.dr-button--primary, .dr-button-primary, .dr-button--garage-add, .dr-button--fit-optimizer, .dr-analysis6-switch--active, .dr-analysis6-tab--active, .dr-workspace-tabs > .dr-button[aria-pressed="true"], .dr-workspace-tabs > .dr-button.is-active, .dr-client-actionbar .dr-tab[aria-selected="true"], .dr-client-actionbar .dr-tab.is-active) * { color: inherit !important; } html:root.studio-ui body.page-workspace .dr-button--primary:hover:not(:disabled) { filter: brightness(.94); transform: none; } html:root.studio-ui body.page-workspace :is(.dr-button--secondary, .dr-button--ghost) { background: transparent !important; border-color: var(--st-line) !important; color: var(--st-ink) !important; } html:root.studio-ui body.page-workspace .dr-button--ghost { border-color: transparent !important; } html:root.studio-ui body.page-workspace :is(.dr-button--secondary, .dr-button--ghost):hover:not(:disabled) { background: var(--st-soft) !important; } html:root.studio-ui body.page-workspace .dr-kicker { color: var(--st-muted) !important; font: 500 10px 'IBM Plex Mono', monospace !important; letter-spacing: .08em !important; } html:root.studio-ui body.page-workspace :is(.dr-section-title, .dr-settings-title, .dr-rides3-title, .dr-analysis6-title) { font-family: 'DM Sans', sans-serif; letter-spacing: -.04em; text-transform: none; } /**/ html:root.studio-ui body.page-workspace .dr-client-header { padding: 6px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html:root.studio-ui body.page-workspace .dr-client-header__top { gap: 20px; align-items: center; } html:root.studio-ui body.page-workspace .dr-client-title { display: flex; flex-direction: column; gap: 8px; font-family: 'DM Sans', sans-serif !important; font-size: clamp(28px, 3vw, 42px) !important; font-weight: 500 !important; line-height: 1.16; letter-spacing: -.055em !important; text-transform: none !important; } html:root.studio-ui body.page-workspace #client-workspace-title { font-size: clamp(28px, 3vw, 42px) !important; } html:root.studio-ui body.page-workspace .dr-client-title__label { font: 500 10px 'IBM Plex Mono', monospace !important; letter-spacing: .12em; color: var(--st-accent) !important; text-transform: uppercase; } html:root.studio-ui body.page-workspace .dr-client-meta-strip { margin-top: 13px; gap: 12px; } html:root.studio-ui body.page-workspace .dr-client-meta-strip > span { padding: 0; border: 0; border-radius: 0; background: transparent !important; font-size: 11px; color: var(--st-muted) !important; } html:root.studio-ui body.page-workspace .dr-client-workspace-nav { margin-top: 25px; padding-top: 0; border-top: 0; border-bottom: 1px solid var(--st-line); } html:root.studio-ui body.page-workspace .dr-client-workspace-nav { box-shadow: none !important; background: transparent !important; } html:root.studio-ui body.page-workspace .dr-client-workspace-nav .dr-workspace-tabs { display: flex !important; gap: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow-y: hidden !important; } html:root.studio-ui body.page-workspace .dr-client-workspace-nav .dr-workspace-tab { position: relative; flex: 0 0 auto; min-height: 51px; min-width: auto !important; width: auto !important; padding: 12px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--st-muted) !important; font-size: 13px !important; box-shadow: none !important; } /**/ html:root.studio-ui body.page-workspace .dr-client-workspace-nav .dr-workspace-tabs > .dr-workspace-tab.is-active { color: var(--st-accent) !important; } html:root.studio-ui body.page-workspace .dr-workspace-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--st-accent); content: ''; } html:root.studio-ui body.page-workspace .dr-workspace-main > * + * { margin-top: 24px !important; } html:root.studio-ui body.page-workspace [data-dr-overview] { display: grid; gap: 20px; } html:root.studio-ui body.page-workspace [data-dr-overview] > * { margin-top: 0 !important; } html:root.studio-ui body.page-workspace .dr-overview2-toolbar { padding: 0; } html:root.studio-ui body.page-workspace .dr-overview2-toolbar__note { font-size: 11px; } html:root.studio-ui body.page-workspace .dr-studio-pulse { display: flex; gap: 20px; align-items: center; padding: 4px 0 8px; } html:root.studio-ui .dr-studio-pulse__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; gap: 24px; margin: 0; } html:root.studio-ui .dr-studio-pulse__facts > div { border-right: 1px solid var(--st-line); padding-right: 20px; } html:root.studio-ui .dr-studio-pulse__facts dt { color: var(--st-muted); font-size: 11px; margin-bottom: 8px; } html:root.studio-ui .dr-studio-pulse__facts dd { color: var(--st-ink); font: 500 25px 'DM Sans', sans-serif; letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; } html:root.studio-ui .dr-studio-pulse__customize { text-align: right; } html:root.studio-ui .dr-studio-pulse__customize .dr-overview2-toolbar__note { margin: 0; font-size: 10px; } html:root.studio-ui body.page-workspace .dr-overview2-vitals { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html:root.studio-ui body.page-workspace .dr-overview2-vital { padding: 23px !important; border: 1px solid var(--st-line) !important; border-radius: 16px !important; background: var(--st-panel) !important; box-shadow: var(--st-shadow); } html:root.studio-ui body.page-workspace .dr-overview2-vital:first-child { border-top: 3px solid var(--st-accent) !important; } html:root.studio-ui:not(.dark) body.page-workspace .dr-overview2-vital:first-child { --ui-ink: #eff6f7; --ui-muted: #b6c7ce; --st-muted: #b6c7ce; --ui-violet: #a5e6df; background: #20343d !important; color: #eff6f7 !important; border-color: #20343d !important; border-top-color: #087e83 !important; } html:root.studio-ui:not(.dark) body.page-workspace .dr-overview2-vital:first-child :is(h3, strong) { color: #eff6f7 !important; } html:root.studio-ui:not(.dark) body.page-workspace .dr-overview2-vital:first-child :is(p, span, text) { color: #b6c7ce !important; fill: #b6c7ce; } html:root.studio-ui body.page-workspace #client-selector [data-testid="client-open"][aria-pressed="true"] { background: var(--st-panel) !important; border-color: var(--st-line) !important; box-shadow: inset 3px 0 var(--st-accent) !important; } html:root.studio-ui body.page-workspace .dr-insights { padding: 25px !important; } html:root.studio-ui body.page-workspace .dr-insights__header h2 { font-size: 24px; font-weight: 500; letter-spacing: -.035em; } html:root.studio-ui body.page-workspace .dr-insight-tile { border-color: var(--st-line) !important; border-radius: 12px !important; background: var(--st-panel) !important; } html:root.studio-ui body.page-workspace .dr-insight-tile__head h3 { font-size: 15px; font-weight: 600; } html:root.studio-ui body.page-workspace .dr-insight-tile__hero strong { font-weight: 500; letter-spacing: -.04em; } html:root.studio-ui body.page-workspace .dr-insight-proof { border-color: var(--st-line); border-radius: 12px; background: var(--st-soft) !important; } html:root.studio-ui body.page-workspace .dr-overview2-vital h3 { font-size: 17px; letter-spacing: -.03em; } html:root.studio-ui body.page-workspace .dr-overview2-vital__value { font-weight: 500; letter-spacing: -.055em; } html:root.studio-ui body.page-workspace .dr-overview2-vital__heading { align-items: flex-start; } html:root.studio-ui body.page-workspace .dr-overview2-vital__reading strong { font-size: 34px; font-weight: 500; letter-spacing: -.045em; } html:root.studio-ui body.page-workspace [data-testid="client-open"][aria-pressed="true"] { box-shadow: inset 3px 0 var(--st-accent); } html:root.studio-ui body.page-workspace .dr-overview2-vitals__head h2 { font-weight: 500; letter-spacing: -.035em; font-size: 24px; } html:root.studio-ui body.page-workspace :is(.dr-ovcustom-modal, .dr-ovcustom-modal__head, .dr-ovcustom-modal__footer, [data-dr-onboarding-dialog], [data-dr-confirm-dialog], [data-dr-alert-dialog], [data-dr-ride-entry-dialog]) { border-color: var(--st-line) !important; background: var(--st-panel) !important; color: var(--st-ink) !important; } html:root.studio-ui body.page-workspace :is(.dr-ovcustom-overlay, [data-dr-onboarding], [data-dr-confirm], [data-dr-alert]) { background: rgb(9 20 26 / 72%) !important; backdrop-filter: blur(8px); } html:root.studio-ui body.page-workspace :is(.dr-ovcustom-preset, .dr-ovcustom-row) { border-color: var(--st-line) !important; background: var(--st-soft) !important; } html:root.studio-ui body.page-workspace :is(.dr-ovcustom-preset.is-active, .dr-ovcustom-row.is-on) { border-color: var(--st-accent) !important; background: var(--st-accent-soft) !important; } html:root.studio-ui body.page-workspace .dr-ovcustom-switch { background: var(--st-line) !important; border-radius: 20px !important; } html:root.studio-ui body.page-workspace .dr-ovcustom-switch:checked { background: var(--st-accent) !important; } html:root.studio-ui body.page-workspace .dr-ovcustom-preset i { color: var(--st-accent) !important; } html:root.studio-ui body.page-workspace :is([data-dr-overview], [data-dr-settings], [data-dr-onboarding-dialog]) :where(.bg-black, [class*="bg-black/"], [class*="bg-white/"]) { background-color: var(--st-soft) !important; } html:root.studio-ui body.page-workspace :is(.dr-overview2-panel__summary, .dr-overview2-highlight__head) { padding: 19px 23px; } html:root.studio-ui body.page-workspace .dr-overview2-panel__title { font-size: 16px; letter-spacing: -.025em; } html:root.studio-ui body.page-workspace .dr-overview2-panel__body { padding: 0 23px 23px; } html:root.studio-ui body.page-workspace :is(.dr-overview2-evidence-row, .dr-overview2-zone-legend > div, .dr-overview2-progress-helper, .dr-leak-metric, .dr-leak-sowhat, .dr-ride4-finding, .dr-ride4-metrics > div) { border-color: var(--st-line) !important; border-radius: 10px; background: var(--st-soft) !important; color: var(--st-ink) !important; } html:root.studio-ui body.page-workspace :is(.dr-overview2-highlight, .dr-leak-card, .dr-overview2-evidence-card) { background: var(--st-panel) !important; } html:root.studio-ui body.page-workspace :is(.dr-client-more__panel, .dr-context-menu, .dr-rides3-row-menu) { border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-panel) !important; box-shadow: 0 15px 40px #0002; } html:root.studio-ui body.page-workspace :is(.dr-rides3-table__head, .dr-ride4-interval-head) { background: var(--st-soft) !important; color: var(--st-muted) !important; font-size: 10px; letter-spacing: .05em; } html:root.studio-ui body.page-workspace :is(.dr-rides3-row, .dr-ride4-interval-row) { border-color: var(--st-line) !important; padding-top: 17px; padding-bottom: 17px; } html:root.studio-ui body.page-workspace .dr-rides3-row:hover { background: var(--st-soft) !important; } html:root.studio-ui body.page-workspace :is(.dr-rides3-row--selected, .dr-rides3-selected, .dr-rides3-baseline-toggle--active, .dr-rides3-select-toggle--active, .dr-rides3-baseline) { background: var(--st-accent-soft) !important; border-color: var(--st-accent) !important; } html:root.studio-ui body.page-workspace :is(.dr-settings-tab.is-active, .dr-analysis6-tab.is-active, .dr-button--selected) { background: var(--st-accent-soft) !important; color: var(--st-accent) !important; border-color: var(--st-accent) !important; } html:root.studio-ui body.page-workspace :is(.dr-settings-card, .dr-settings-section, .dr-ride4-chart-wrap, .dr-analysis6-empty) { border-color: var(--st-line); background: var(--st-panel) !important; } html:root.studio-ui body.page-workspace [data-dr-empty-client] { position: relative; min-height: 65vh; align-items: flex-start; padding: clamp(28px, 5vw, 80px) !important; overflow: hidden; text-align: left; border: 0 !important; background: var(--st-panel) !important; } html:root.studio-ui body.page-workspace [data-dr-empty-client] h1 { max-width: 650px; font: 500 clamp(30px, 4vw, 56px)/1.12 'DM Sans', sans-serif; letter-spacing: -.05em; text-transform: none; } html:root.studio-ui body.page-workspace [data-dr-empty-client] p { font-size: 14px; line-height: 1.8; max-width: 520px; } html:root.studio-ui body.page-workspace [data-dr-empty-client] > div:last-child { justify-content: flex-start; } html:root.studio-ui body.page-workspace [data-dr-empty-client] > div:first-child { border: 0; border-radius: 16px; color: var(--st-accent); background: var(--st-accent-soft); } /**/ html:root.studio-ui body.page-login .auth-layout { max-width: none; min-height: 100vh; margin: 0; padding: 0; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; } html:root.studio-ui body.page-login .auth-context { position: relative; min-height: 100vh; padding: clamp(40px, 7vw, 104px); overflow: hidden; border: 0 !important; border-radius: 0 !important; background: #17252c !important; color: #eff6f7 !important; } html:root.studio-ui body.page-login .auth-context::after { content: ''; position: absolute; width: 560px; height: 560px; bottom: -320px; right: -150px; border: 1px solid #91ddd750; border-radius: 50%; box-shadow: 0 0 0 36px #17252c, 0 0 0 37px #91ddd735, 0 0 0 74px #17252c, 0 0 0 75px #91ddd725; pointer-events: none; } html:root.studio-ui body.page-login .auth-context > div { position: relative; z-index: 1; } html:root.studio-ui body.page-login .auth-context h1 { font-size: clamp(36px, 4.2vw, 65px) !important; font-weight: 500 !important; } html:root.studio-ui body.page-login .auth-context { padding: clamp(40px, 6vw, 90px) !important; } html:root.studio-ui body.page-login .auth-layout { width: 100% !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; } html:root.studio-ui body.page-login .auth-panel { padding: clamp(35px, 6vw, 90px) !important; } html:root.studio-ui body.page-login .auth-context__mark { width: 48px; height: 48px; border: 0; border-radius: 14px; background: #a5e6df !important; color: #173b40 !important; transform: none; margin-bottom: 56px; } html:root.studio-ui body.page-login .auth-context__eyebrow { color: #a5e6df !important; font: 10px 'IBM Plex Mono', monospace; letter-spacing: .16em; } html:root.studio-ui body.page-login .auth-context h1 { max-width: 620px; margin: 20px 0; font-size: clamp(36px, 4.2vw, 65px); line-height: 1.04; font-weight: 500; letter-spacing: -.055em; color: #eff6f7 !important; } html:root.studio-ui body.page-login .auth-context p { color: #b6c7ce !important; font-size: 14px; line-height: 1.8; } html:root.studio-ui body.page-login .auth-steps { border-top: 1px solid #41515a; padding-top: 24px; margin-top: 38px; gap: 18px; } html:root.studio-ui body.page-login .auth-steps li { border: 0; background: transparent; padding: 0; color: #e1ebef; font-size: 12px; } html:root.studio-ui body.page-login .auth-steps li > span:first-child { border: 0; background: transparent; color: #a5e6df; font: 11px 'IBM Plex Mono', monospace; } html:root.studio-ui body.page-login .auth-context__foot { position: relative; z-index: 1; margin-top: 50px; max-width: 340px; } html:root.studio-ui body.page-login .auth-panel { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100vh; padding: clamp(35px, 7vw, 110px); border: 0 !important; border-radius: 0 !important; background: var(--st-canvas) !important; box-shadow: none !important; } html:root.studio-ui body.page-login .auth-title { font-size: 36px !important; font-weight: 500; letter-spacing: -.045em; text-transform: none !important; } html:root.studio-ui body.page-login .auth-copy { font-size: 14px; line-height: 1.7; margin-bottom: 26px; } html:root.studio-ui body.page-login .auth-provider-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } html:root.studio-ui body.page-login .auth-provider-row .button-secondary { border: 0 !important; background: transparent !important; font-size: 12px; } html:root.studio-ui body.page-login .auth-provider-row .button-primary { background: var(--st-panel) !important; color: var(--st-ink) !important; border: 1px solid var(--st-line) !important; } html:root.studio-ui body.page-login .button { min-height: 48px; border-radius: 9px !important; text-transform: none; letter-spacing: 0; font-size: 13px; } html:root.studio-ui body.page-login .field input { height: 50px; border-radius: 9px !important; background: var(--st-panel) !important; border-color: var(--st-line) !important; font-size: 14px; } html:root.studio-ui body.page-login [data-email-code-form] .button { width: 100%; } /**/ html:root.studio-ui body.page-upload { --bg: var(--st-canvas); --panel: var(--st-panel); --text: var(--st-ink); --muted: var(--st-muted); --border: var(--st-line); --gold: var(--st-accent); --accent: var(--st-accent); --dr-bg: var(--st-canvas); --dr-surface: var(--st-panel); --dr-surface-soft: var(--st-soft); --dr-text: var(--st-ink); --dr-muted: var(--st-muted); --dr-subtle: var(--st-muted); --dr-border: var(--st-line); --dr-gold: var(--st-accent); } html:root.studio-ui body.page-upload .main { max-width: 1240px; padding-top: 44px; gap: 28px; } html:root.studio-ui body.page-upload .topbar { border-radius: 0 !important; background: #17252c !important; border: 0 !important; } html:root.studio-ui body.page-upload .topbar .brand-name { color: #eff6f7 !important; font-size: 22px; font-weight: 600; letter-spacing: -.03em; text-transform: none; } html:root.studio-ui body.page-upload .brand-mark { border: 0; border-radius: 12px; background: #a5e6df; color: #173b40; } html:root.studio-ui body.page-upload .brand-meta { color: #bbc8cd; } html:root.studio-ui body.page-upload .panel-pad { padding: 30px; } html:root.studio-ui body.page-upload .section-title { max-width: none; font-size: 36px; line-height: 1.12; } html:root.studio-ui body.page-upload .upload-grid { grid-template-columns: 1fr; gap: 24px; } html:root.studio-ui body.page-upload .input { min-height: 48px; border-radius: 9px; background: var(--st-soft); color: var(--st-ink); border-color: var(--st-line); } html:root.studio-ui body.page-upload .panel { background: var(--st-panel) !important; border: 1px solid var(--st-line) !important; border-radius: 18px !important; box-shadow: var(--st-shadow); } html:root.studio-ui body.page-upload :is(.section-title, h1) { color: var(--st-ink); text-transform: none; letter-spacing: -.035em; font-weight: 600; } html:root.studio-ui body.page-upload :is(.dropzone, .note-input, .uid-input) { border: 1px dashed var(--st-line); border-radius: 12px; background: var(--st-soft); color: var(--st-ink); } html:root.studio-ui body.page-upload .dropzone { min-height: 210px; } html:root.studio-ui body.page-upload .button { min-height: 44px; border-radius: 9px; text-transform: none; letter-spacing: 0; } html:root.studio-ui body.page-upload .button-primary { background: var(--st-accent); color: var(--st-panel); } html:root.studio-ui body.page-ops { --bg: var(--st-canvas); --paper: var(--st-canvas); --ink: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line); --green: #17252c; --green-2: #087e83; --lime: #a5e6df; } html:root.studio-ui body.page-ops .sidebar { background: #17252c; } html:root.studio-ui body.page-ops .page-heading h1 { font-size: 38px; font-weight: 500; letter-spacing: -.05em; } html:root.studio-ui body.page-ops :is(.panel, .metric-card, .gate-card) { border-radius: 16px; box-shadow: var(--st-shadow); } html:root.studio-ui body.page-ops .content { padding-top: 40px; } html:root.studio-ui body.page-admin :is(.panel, .admin-panel, .gate-card, .auth-panel) { border-radius: 16px !important; border-color: var(--st-line) !important; background: var(--st-panel) !important; box-shadow: var(--st-shadow) !important; } html:root.studio-ui body.page-admin :is(.gate-panel, .ui-sidebar) { border-radius: 16px; background: var(--st-panel) !important; color: var(--st-ink) !important; } html:root.studio-ui body.page-admin .ui-sidebar { border-radius: 0; background: #17252c !important; color: #eff6f7 !important; } html:root.studio-ui body.page-admin :is(h1, h2, .brand-title) { font-family: 'DM Sans', sans-serif; text-transform: none; letter-spacing: -.04em; } html:root.studio-ui body.page-admin :is(input, select, textarea) { min-height: 44px; border: 1px solid var(--st-line); border-radius: 9px; background: var(--st-panel); color: var(--st-ink); } html:root.studio-ui body.page-admin .button { min-height: 44px; border-radius: 9px; letter-spacing: 0; text-transform: none; } /**/ @media (min-width: 901px) { html:root.studio-ui body.page-workspace .dr-workspace-shell.is-clients-collapsed { grid-template-columns: 52px minmax(0, 1fr) !important; } html:root.studio-ui body.page-workspace .dr-client-sidebar.is-collapsed { padding-right: 10px; } html:root.studio-ui body.page-workspace .dr-global-sidebar.is-collapsed .dr-topbar { padding: 0 28px !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar.is-collapsed .dr-app-brand > div:last-child { display: block !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar.is-collapsed .dr-sidebar-workflow__menu { display: grid; } html:root.studio-ui body.page-workspace .dr-global-sidebar.is-collapsed .dr-sidebar-workflow:not([open]) .dr-sidebar-workflow__menu { display: none; } } @media (min-width: 901px) and (max-width: 1150px) { html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-topbar { padding-inline: 20px !important; gap: 14px !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar [data-dr-shell-brand-name] { font-size: 16px !important; max-width: 170px; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-button, summary) { padding-inline: 10px !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar [data-dr-shell-section="help"] { display: none !important; } html:root.studio-ui body.page-workspace .dr-workspace-shell { grid-template-columns: 200px minmax(0, 1fr) !important; gap: 24px !important; padding-inline: 22px !important; } } @media (max-width: 900px) { html:root.studio-ui body.page-workspace .dr-workspace-shell { display: block !important; padding: 20px 18px 50px !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar { position: fixed; width: min(310px, calc(100vw - 50px)) !important; height: 100dvh; overflow-y: auto; transform: translateX(-105%); } html:root.studio-ui body.page-workspace .dr-global-sidebar.is-open { transform: translateX(0); } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-topbar { height: auto; min-height: 100%; flex-direction: column !important; align-items: stretch !important; padding: 30px 20px !important; gap: 30px !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex: 0 0 auto !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-topbar { justify-content: flex-start !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions > *, html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-actions :is(.dr-button, summary.dr-button) { width: 100% !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-account-tier-switch { position: static; width: 100%; margin-top: 12px; background: #17252c !important; color: #c2cfd3 !important; } html:root.studio-ui body.page-workspace .dr-global-sidebar :is(.dr-button, .dr-app-more > summary, .dr-sidebar-workflow > summary) { width: 100% !important; justify-content: flex-start; min-height: 46px; } html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-button--primary { order: 0; margin: 0 0 12px; } html:root.studio-ui body.page-workspace .dr-sidebar-workflow__menu, html:root.studio-ui body.page-workspace .dr-global-sidebar .dr-app-more-panel { position: static !important; width: 100%; min-width: 0; box-shadow: none; margin-top: 6px; } html:root.studio-ui body.page-workspace .dr-workspace-bar { position: sticky; top: 0; z-index: 85; min-height: 66px; padding: 0 16px; gap: 10px; background: var(--st-panel) !important; } html:root.studio-ui body.page-workspace .dr-workspace-bar :is(.ui-menu-button, .ui-client-button) { min-width: 44px; height: 44px; display: grid; background: var(--st-panel) !important; color: var(--st-ink) !important; border: 1px solid var(--st-line); } html:root.studio-ui .dr-workspace-bar__copy { display: block; flex: 1; } html:root.studio-ui .dr-workspace-bar__copy span { font-size: 10px !important; } html:root.studio-ui .dr-workspace-bar__copy span::after { content: none; } html:root.studio-ui body.page-workspace .dr-workspace-bar__status { display: none; } html:root.studio-ui body.page-workspace .dr-workspace-shell > .dr-client-sidebar { position: fixed; top: 66px; z-index: 88; right: 0; bottom: 0; width: min(340px, calc(100vw - 40px)) !important; height: calc(100dvh - 66px) !important; max-height: none !important; overflow-y: auto; padding: 24px; background: var(--st-canvas) !important; border: 0; transform: translateX(105%); } html:root.studio-ui body.page-workspace .dr-workspace-shell > .dr-client-sidebar.is-open { transform: translateX(0); } html:root.studio-ui body.page-workspace .dr-client-list { max-height: none !important; } html:root.studio-ui body.page-workspace .dr-client-title { font-size: 32px !important; } html:root.studio-ui body.page-workspace #client-workspace-title { font-size: 32px !important; } html:root.studio-ui body.page-workspace .dr-client-header__top { gap: 10px; flex-direction: row !important; align-items: flex-start !important; } html:root.studio-ui body.page-workspace .dr-client-header__identity { flex: 1; } html:root.studio-ui body.page-workspace .dr-client-primary-actions { display: flex !important; width: auto !important; flex: 0 0 auto; justify-content: flex-end; } html:root.studio-ui body.page-workspace .dr-client-primary-actions:has(> .dr-button--primary) { flex-direction: column; max-width: 110px; } html:root.studio-ui body.page-workspace .dr-client-primary-actions .dr-client-more > summary { width: 44px !important; min-height: 44px; } html:root.studio-ui body.page-workspace .dr-client-workspace-nav .dr-workspace-tabs { gap: 22px !important; overflow-x: auto !important; } html:root.studio-ui body.page-workspace .dr-client-workspace-nav .dr-workspace-tab { flex: 0 0 auto; min-width: 80px !important; } html:root.studio-ui body.page-workspace .dr-overview2-vital { padding: 18px !important; } html:root.studio-ui body.page-workspace :is(.dr-overview2-panel__summary, .dr-overview2-highlight__head) { padding: 17px; } html:root.studio-ui body.page-workspace .dr-overview2-panel__body { padding: 0 17px 18px; } html:root.studio-ui body.page-login .auth-layout { grid-template-columns: 1fr; } html:root.studio-ui body.page-login .auth-context { min-height: auto; padding: 32px; } html:root.studio-ui body.page-login .auth-context { padding: 32px !important; } html:root.studio-ui body.page-login .auth-layout { grid-template-columns: 1fr !important; } html:root.studio-ui body.page-login .auth-context__mark { margin-bottom: 24px; } html:root.studio-ui body.page-login .auth-context h1 { max-width: 540px; font-size: 38px; } html:root.studio-ui body.page-login .auth-steps, html:root.studio-ui body.page-login .auth-context__foot { display: none; } html:root.studio-ui body.page-login .auth-panel { min-height: auto; padding: 38px 32px; } html:root.studio-ui body.page-login .auth-panel { padding: 38px 32px !important; } html:root.studio-ui body.page-upload .main { grid-template-columns: minmax(0, 1fr); padding-top: 24px; } html:root.studio-ui body.page-upload :is(.panel, .upload-grid, .upload-grid > *) { min-width: 0; } html:root.studio-ui body.page-upload .panel-pad { padding: 22px; } html:root.studio-ui body.page-upload .section-title { font-size: 30px; } } @media (max-width: 480px) { html:root.studio-ui body.page-workspace .dr-client-title { font-size: 28px !important; } html:root.studio-ui body.page-workspace #client-workspace-title { font-size: 28px !important; } html:root.studio-ui body.page-workspace .dr-client-primary-actions { flex-wrap: wrap; max-width: 130px; justify-content: flex-end; } html:root.studio-ui body.page-workspace .dr-studio-pulse { flex-wrap: wrap; gap: 12px; } html:root.studio-ui .dr-studio-pulse__facts { flex-basis: 100%; gap: 12px; } html:root.studio-ui .dr-studio-pulse__facts > div { padding-right: 6px; } html:root.studio-ui .dr-studio-pulse__facts dt { font-size: 10px; } html:root.studio-ui .dr-studio-pulse__facts dd { font-size: 21px; } html:root.studio-ui .dr-studio-pulse__customize { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; } html:root.studio-ui body.page-workspace .dr-insights { padding: 18px !important; } html:root.studio-ui body.page-workspace .dr-client-primary-actions > .dr-button--primary { font-size: 11px; padding-inline: 10px; } html:root.studio-ui body.page-workspace .dr-client-meta-strip { flex-wrap: wrap; gap: 6px; } html:root.studio-ui body.page-workspace [data-dr-empty-client] { padding: 28px !important; } html:root.studio-ui body.page-workspace [data-dr-empty-client] .dr-button { width: 100%; text-align: left; } } @media (prefers-reduced-motion: reduce) { html:root.studio-ui *, html:root.studio-ui *::before, html:root.studio-ui *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } }