/* ==========================================================================
   ogPumper Design System  (ogp-ds)  v0.2  2026-09-23
   --------------------------------------------------------------------------
   v0.2 = the "next-gen" shell and control surfaces:
     - sidebar + topbar application frame (icon rail at laptop width, drawer +
       bottom bar on phones), command palette, field iconography
     - operations dashboard primitives (attention strip, comparison KPIs,
       coverage, bar lists, activity)
     - control-surface grid (sticky identification column + sticky header,
       column groups, deltas, micro bars, exception rows, quick filter chips,
       saved views, density)
     - route checklist for pumpers, entry sub-bar + mobile action bar
   It still loads AFTER the legacy layer and restyles the legacy class names, so
   every page improves; the showcase pages use the new primitives directly.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ogp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ogp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ogp-fs-xs: 11px; --ogp-fs-sm: 12px; --ogp-fs-base: 13px; --ogp-fs-md: 14px; --ogp-fs-lg: 16px; --ogp-fs-xl: 19px; --ogp-fs-2xl: 22px; --ogp-fs-3xl: 28px;
  --ogp-lh: 1.45; --ogp-lh-tight: 1.2;
  --ogp-sp-1: 4px; --ogp-sp-2: 8px; --ogp-sp-3: 12px; --ogp-sp-4: 16px; --ogp-sp-5: 20px; --ogp-sp-6: 24px; --ogp-sp-8: 32px;
  --ogp-r-sm: 3px; --ogp-r: 4px; --ogp-r-lg: 6px; --ogp-r-pill: 999px;
  --ogp-bg: #f2f4f8; --ogp-surface: #ffffff; --ogp-surface-2: #f7f8fb; --ogp-surface-3: #edf0f5;
  --ogp-border: #dde2ea; --ogp-border-strong: #c2cad6;
  --ogp-fg: #16202e; --ogp-fg-muted: #586374; --ogp-fg-subtle: #8a95a7;
  --ogp-fg-on-dark: #e6ebf3; --ogp-fg-on-dark-muted: #9aa7bb;
  --ogp-primary: #1f56b3; --ogp-primary-hover: #194a9b; --ogp-primary-active: #143f85; --ogp-primary-bg: #e8effa; --ogp-primary-fg: #ffffff;
  --ogp-accent: #3b82f6; --ogp-ring: rgba(59, 130, 246, 0.35);
  --ogp-success: #1f7a3f; --ogp-success-bg: #e6f4ea; --ogp-success-border: #b7dfc3;
  --ogp-warning: #9a5b00; --ogp-warning-bg: #fdf3e1; --ogp-warning-border: #f0d39a;
  --ogp-danger: #b42318; --ogp-danger-hover: #9d1d14; --ogp-danger-bg: #fbe9e7; --ogp-danger-border: #f2b8b2;
  --ogp-info: #0b5ea8; --ogp-info-bg: #e6f1fb; --ogp-info-border: #b3d3f2;
  --ogp-st-on: #1f9d63; --ogp-st-on-bg: #e3f6ec;
  --ogp-st-down: #d6453d; --ogp-st-down-bg: #fdeceb;
  --ogp-st-attn: #d98b1b; --ogp-st-attn-bg: #fdf1dc;
  --ogp-st-idle: #94a3b8; --ogp-st-idle-bg: #eef2f7;
  --ogp-oil: #f1f1f1; --ogp-oil-ink: #4b5563;
  --ogp-gas: #fdfbe4; --ogp-gas-ink: #a16207;
  --ogp-water: #e9f2fc; --ogp-water-ink: #1d4ed8;
  --ogp-inj: #f1ecfb; --ogp-inj-ink: #6d28d9;
  --ogp-well: #e9f8ea;
  --ogp-prior-bg: #f1f3f6; --ogp-prior-fg: #5c6778;
  --ogp-side-w: 236px; --ogp-rail-w: 64px; --ogp-top-h: 48px; --ogp-bottom-h: 58px;
  --ogp-side-bg: #0f1729; --ogp-side-bg-2: #131d33; --ogp-side-fg: #c9d2e0; --ogp-side-muted: #7f8ca5; --ogp-side-line: rgba(255, 255, 255, 0.08);
  --ogp-side-active: rgba(91, 155, 255, 0.16); --ogp-side-accent: #5b9bff;
  --ogp-nav-bg: var(--ogp-side-bg); --ogp-nav-accent: var(--ogp-side-accent);
  --ogp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ogp-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.16), 0 1px 3px rgba(16, 24, 40, 0.08);
  --ogp-t: 120ms ease;
  --ogp-font-display: var(--ogp-font-sans);
  --ogp-side-fg-strong: #ffffff; --ogp-side-hover: rgba(255, 255, 255, 0.06); --ogp-side-hover-2: rgba(255, 255, 255, 0.09);
  --ogp-side-search-bg: rgba(255, 255, 255, 0.05); --ogp-side-kbd: rgba(255, 255, 255, 0.14); --ogp-side-cnt-bg: rgba(255, 255, 255, 0.1);
  --ogp-side-border: rgba(255, 255, 255, 0.04); --ogp-side-scroll: rgba(255, 255, 255, 0.15); --ogp-side-cta: #7ee3b0; --ogp-avatar-bg: #243352;
  --ogp-mark-a: #5b9bff; --ogp-mark-b: #1f56b3; --ogp-mark-fg: #ffffff;
  --ogp-topbar-bg: rgba(255, 255, 255, 0.92); --ogp-overlay: rgba(15, 23, 41, 0.5); --ogp-overlay-2: rgba(15, 23, 41, 0.45);
  --ogp-loading-bg: rgba(242, 244, 248, 0.82); --ogp-actionbar-bg: rgba(255, 255, 255, 0.96); --ogp-hint-bg: rgba(255, 255, 255, 0.7);
  --ogp-tip-bg: #0f1729; --ogp-tip-fg: #ffffff; --ogp-tip-muted: rgba(255, 255, 255, 0.85);
  --ogp-hero-a: #0f1729; --ogp-hero-b: #182848; --ogp-hero-c: #1f56b3; --ogp-hero-glow: rgba(91, 155, 255, 0.25); --ogp-hero-ok-b: #14532d;
  --ogp-c-oil: #6b7280; --ogp-c-gas: #d9a400; --ogp-c-water: #3b82f6; --ogp-c-inj: #8b5cf6; --ogp-c-run: #1f56b3; --ogp-c-wells: #16a34a;
  --ogp-login-glow: rgba(91, 155, 255, 0.18); --ogp-login-grid: rgba(255, 255, 255, 0.035);
  --ogp-chip-active-bg: var(--ogp-fg); --ogp-chip-active-fg: #ffffff; --ogp-chip-active-n: rgba(255, 255, 255, 0.2);
  --ogp-bar-default: #9fb4d6;
  --ogp-sticky-top: 0px;
}

/* 2. Base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0 !important; min-height: 100vh; font-family: var(--ogp-font-sans); font-size: var(--ogp-fs-base); line-height: var(--ogp-lh); color: var(--ogp-fg); background: var(--ogp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: auto; min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--ogp-sp-2); font-family: var(--ogp-font-sans); font-weight: 600; line-height: var(--ogp-lh-tight); color: var(--ogp-fg); }
h1 { font-size: var(--ogp-fs-2xl); } h2 { font-size: var(--ogp-fs-xl); } h3 { font-size: var(--ogp-fs-lg); } h4 { font-size: var(--ogp-fs-md); } h5 { font-size: var(--ogp-fs-base); } h6 { font-size: var(--ogp-fs-sm); }
h1 small, h2 small, h3 small, h4 small { font-size: 75%; font-weight: 400; color: var(--ogp-fg-muted); }
p { margin: 0 0 var(--ogp-sp-2); }
small, .small { font-size: var(--ogp-fs-sm); }
a { color: var(--ogp-primary); text-decoration: none; }
a:hover { color: var(--ogp-primary-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ogp-accent); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--ogp-border); margin: var(--ogp-sp-4) 0; }
code, kbd, pre { font-family: var(--ogp-font-mono); font-size: 0.92em; }
strong, b { font-weight: 600; }
.text-muted { color: var(--ogp-fg-muted) !important; }
::selection { background: var(--ogp-primary-bg); }
.material-icons { vertical-align: middle; font-size: 20px; line-height: 1; }
.ogp-ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -3px; }
.ogp-ic-lg { width: 20px; height: 20px; }
.ogp-sr-only, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ogp-skip { position: absolute; left: 8px; top: -40px; z-index: 2000; padding: 6px 10px; background: var(--ogp-surface); border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); }
.ogp-skip:focus { top: 8px; }

/* 3. Application frame ----------------------------------------------------- */
body.ogp-app { display: grid; grid-template-columns: var(--ogp-side-w) minmax(0, 1fr); grid-template-rows: minmax(100vh, auto); }
.ogp-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--ogp-side-bg); color: var(--ogp-side-fg); display: flex; flex-direction: column; border-right: 1px solid var(--ogp-side-border); scrollbar-width: thin; scrollbar-color: var(--ogp-side-scroll) transparent; }
.ogp-side-brand { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--ogp-side-line); min-height: var(--ogp-top-h); }
.ogp-side-mark { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(160deg, var(--ogp-mark-a), var(--ogp-mark-b)); display: inline-flex; align-items: center; justify-content: center; color: var(--ogp-mark-fg); flex: 0 0 auto; }
.ogp-side-mark .ogp-ic { width: 18px; height: 18px; stroke-width: 2; }
.ogp-side-brand-text { min-width: 0; line-height: 1.15; }
.ogp-side-brand-text b { display: block; color: var(--ogp-side-fg-strong); font-size: var(--ogp-fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-side-brand-text span { display: block; color: var(--ogp-side-muted); font-size: var(--ogp-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-env { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(217, 139, 27, 0.2); color: #f2b544; margin-left: 4px; vertical-align: 1px; }
.ogp-side-search { margin: 10px 12px 6px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--ogp-side-search-bg); border: 1px solid var(--ogp-side-line); border-radius: var(--ogp-r); color: var(--ogp-side-muted); font: inherit; font-size: var(--ogp-fs-sm); cursor: pointer; text-align: left; width: calc(100% - 24px); transition: background-color var(--ogp-t), border-color var(--ogp-t), color var(--ogp-t); }
.ogp-side-search:hover { background: var(--ogp-side-hover-2); color: var(--ogp-side-fg); }
.ogp-side-search span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
.ogp-kbd { font-family: var(--ogp-font-mono); font-size: 10px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--ogp-side-kbd); color: var(--ogp-side-muted); white-space: nowrap; }
.ogp-side-nav { flex: 1 1 auto; padding: 4px 8px 8px; }
.ogp-side-group { margin-top: 10px; }
.ogp-side-label { padding: 6px 8px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ogp-side-muted); }
.ogp-side-link { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; margin: 1px 0; color: var(--ogp-side-fg); font-size: var(--ogp-fs-base); font-weight: 500; text-decoration: none; border-radius: var(--ogp-r); border: 0; background: transparent; width: 100%; font-family: inherit; cursor: pointer; text-align: left; position: relative; transition: background-color var(--ogp-t), color var(--ogp-t); }
.ogp-side-link .ogp-ic { color: var(--ogp-side-muted); transition: color var(--ogp-t); }
.ogp-side-link:hover { background: var(--ogp-side-hover); color: var(--ogp-side-fg-strong); text-decoration: none; }
.ogp-side-link:hover .ogp-ic { color: var(--ogp-side-fg-strong); }
.ogp-side-link.is-active { background: var(--ogp-side-active); color: var(--ogp-side-fg-strong); }
.ogp-side-link.is-active .ogp-ic { color: var(--ogp-side-accent); }
.ogp-side-link.is-active::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--ogp-side-accent); }
.ogp-side-link .ogp-side-txt { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-side-link .ogp-side-cnt { font-size: var(--ogp-fs-xs); font-weight: 600; padding: 0 6px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--ogp-side-cnt-bg); color: var(--ogp-side-fg); }
.ogp-side-link .ogp-side-cnt.is-danger { background: rgba(214, 69, 61, 0.28); color: #ffb4ae; }
.ogp-side-link .ogp-side-cnt.is-attn { background: rgba(217, 139, 27, 0.28); color: #f5c76b; }
.ogp-side-link.ogp-side-cta { color: var(--ogp-side-cta); }
.ogp-side-link.ogp-side-cta .ogp-ic { color: var(--ogp-side-cta); }
.ogp-side-sub { margin: 0 0 2px 26px; padding-left: 8px; border-left: 1px solid var(--ogp-side-line); }
.ogp-side-sub .ogp-side-link { height: 28px; font-size: var(--ogp-fs-sm); font-weight: 400; color: var(--ogp-side-muted); }
.ogp-side-sub .ogp-side-link.is-active, .ogp-side-sub .ogp-side-link:hover { color: var(--ogp-side-fg-strong); }
.ogp-side-sub .ogp-side-link.is-active::before { display: none; }
.ogp-side-foot { padding: 8px 8px 10px; border-top: 1px solid var(--ogp-side-line); }
.ogp-side-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--ogp-r); width: 100%; border: 0; background: transparent; color: var(--ogp-side-fg); font: inherit; cursor: pointer; text-align: left; }
.ogp-side-user:hover { background: var(--ogp-side-hover); }
.ogp-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ogp-avatar-bg); color: var(--ogp-side-fg-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: uppercase; flex: 0 0 auto; }
.ogp-side-user b { display: block; font-size: var(--ogp-fs-sm); font-weight: 600; color: var(--ogp-side-fg-strong); text-transform: capitalize; }
.ogp-side-user span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-side-muted); }
.ogp-side-user-menu { display: none; margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--ogp-side-line); }
.ogp-side-foot.is-open .ogp-side-user-menu { display: block; }
.ogp-side-user-menu a { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--ogp-r); color: var(--ogp-side-fg); font-size: var(--ogp-fs-sm); text-decoration: none; }
.ogp-side-user-menu a:hover, .ogp-side-user-menu button:hover { background: var(--ogp-side-hover); color: var(--ogp-side-fg-strong); }
.ogp-frame { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.ogp-topbar { position: sticky; top: 0; z-index: 900; height: var(--ogp-top-h); display: flex; align-items: center; gap: var(--ogp-sp-3); padding: 0 var(--ogp-sp-5); background: var(--ogp-topbar-bg); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid var(--ogp-border); }
.ogp-side-toggle { display: none; width: 34px; height: 34px; border-radius: var(--ogp-r); border: 1px solid var(--ogp-border); background: var(--ogp-surface); color: var(--ogp-fg); align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.ogp-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--ogp-fs-base); color: var(--ogp-fg-muted); white-space: nowrap; overflow: hidden; }
.ogp-crumbs a { color: var(--ogp-fg-muted); }
.ogp-crumbs .ogp-sep { color: var(--ogp-fg-subtle); }
.ogp-crumbs .is-current { color: var(--ogp-fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ogp-topbar-status { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: nowrap; }
.ogp-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--ogp-r-pill); border: 1px solid var(--ogp-border); background: var(--ogp-surface); font-size: var(--ogp-fs-xs); font-weight: 500; color: var(--ogp-fg-muted); white-space: nowrap; text-decoration: none; }
.ogp-pill b { color: var(--ogp-fg); font-weight: 600; }
.ogp-pill .ogp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ogp-st-idle); flex: 0 0 auto; }
.ogp-pill.is-on .ogp-dot { background: var(--ogp-st-on); box-shadow: 0 0 0 3px var(--ogp-st-on-bg); }
.ogp-pill.is-attn .ogp-dot { background: var(--ogp-st-attn); box-shadow: 0 0 0 3px var(--ogp-st-attn-bg); }
.ogp-pill.is-down .ogp-dot { background: var(--ogp-st-down); box-shadow: 0 0 0 3px var(--ogp-st-down-bg); }
a.ogp-pill:hover { border-color: var(--ogp-border-strong); text-decoration: none; color: var(--ogp-fg); }
.ogp-topbar .ogp-icon-btn { width: 32px; height: 32px; border-radius: var(--ogp-r); border: 1px solid transparent; background: transparent; color: var(--ogp-fg-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ogp-topbar .ogp-icon-btn:hover { background: var(--ogp-surface-3); color: var(--ogp-fg); }
.ogp-main { flex: 1 0 auto; width: 100%; min-width: 0; }
.ogp-foot { padding: 10px var(--ogp-sp-5); border-top: 1px solid var(--ogp-border); font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ogp-foot a { color: var(--ogp-fg-muted); }
.ogp-bottombar { display: none; }
.ogp-backdrop { display: none; position: fixed; inset: 0; z-index: 990; background: var(--ogp-overlay); }
.ogp-app.is-drawer-open .ogp-backdrop { display: block; }
@media (max-width: 1199px) {
  body.ogp-app { grid-template-columns: var(--ogp-rail-w) minmax(0, 1fr); }
  .ogp-side-brand { justify-content: center; padding: 10px 6px; }
  .ogp-side-brand-text, .ogp-side-search span, .ogp-side-search .ogp-kbd, .ogp-side-label, .ogp-side-link .ogp-side-txt, .ogp-side-user b, .ogp-side-user span, .ogp-side-sub, .ogp-side-user .ogp-caret { display: none; }
  .ogp-side-search { margin: 8px 12px 4px; width: 40px; justify-content: center; padding: 0; }
  .ogp-side-nav { padding: 4px 8px; }
  .ogp-side-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ogp-side-line); }
  .ogp-side-group:first-child { border-top: 0; }
  .ogp-side-link { justify-content: center; padding: 0; height: 36px; }
  .ogp-side-link .ogp-ic { width: 18px; height: 18px; }
  .ogp-side-link .ogp-side-cnt { position: absolute; top: 3px; right: 4px; height: 14px; line-height: 14px; padding: 0 4px; font-size: 10px; }
  .ogp-side-user { justify-content: center; padding: 6px 0; }
  .ogp-side-foot.is-open .ogp-side-user-menu { position: fixed; left: var(--ogp-rail-w); bottom: 8px; width: 200px; background: var(--ogp-side-bg-2); border: 1px solid var(--ogp-side-line); border-radius: var(--ogp-r); box-shadow: var(--ogp-shadow-md); padding: 4px; z-index: 1000; }
  .ogp-topbar { padding: 0 var(--ogp-sp-4); }
}
@media (max-width: 767px) {
  body.ogp-app { grid-template-columns: minmax(0, 1fr); }
  .ogp-side { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 1000; transform: translateX(-104%); visibility: hidden; transition: transform 160ms ease, visibility 0s linear 160ms; box-shadow: var(--ogp-shadow-md); overscroll-behavior: contain; }
  /* closed, the drawer leaves the tab order and the reading order too (visibility, not only an off-screen transform) */
  .ogp-app.is-drawer-open .ogp-side { transform: none; visibility: visible; transition: transform 160ms ease, visibility 0s; }
  .ogp-side-brand { justify-content: flex-start; padding: 12px 14px 10px; }
  .ogp-side-brand-text, .ogp-side-search span, .ogp-side-label, .ogp-side-link .ogp-side-txt, .ogp-side-user b, .ogp-side-user span, .ogp-side-sub { display: block; }
  .ogp-side-search { width: calc(100% - 24px); justify-content: flex-start; padding: 0 10px; margin: 10px 12px 6px; }
  .ogp-side-search .ogp-kbd { display: none; }
  .ogp-side-group { border-top: 0; margin-top: 10px; padding-top: 0; }
  .ogp-side-link { justify-content: flex-start; padding: 0 8px; height: 38px; }
  .ogp-side-link .ogp-side-cnt { position: static; height: 16px; line-height: 16px; }
  .ogp-side-user { justify-content: flex-start; }
  .ogp-side-foot.is-open .ogp-side-user-menu { position: static; width: auto; background: transparent; border: 0; box-shadow: none; padding: 4px 0 0; }
  .ogp-side-toggle { display: inline-flex; }
  .ogp-topbar { padding: 0 var(--ogp-sp-3); gap: var(--ogp-sp-2); }
  .ogp-topbar-status .ogp-pill-secondary { display: none; }
  .ogp-main { padding-bottom: calc(var(--ogp-bottom-h) + env(safe-area-inset-bottom, 0px)); }
  .ogp-foot { display: none; }
  .ogp-bottombar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; height: calc(var(--ogp-bottom-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ogp-surface); border-top: 1px solid var(--ogp-border); }
  .ogp-bottombar a, .ogp-bottombar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ogp-fg-muted); font: inherit; font-size: 10.5px; font-weight: 500; text-decoration: none; border: 0; background: transparent; cursor: pointer; }
  .ogp-bottombar .ogp-ic { width: 20px; height: 20px; }
  .ogp-bottombar .is-active { color: var(--ogp-primary); }
  .ogp-bottombar .ogp-bb-primary .ogp-bb-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--ogp-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: -14px; box-shadow: var(--ogp-shadow-md); }
  .ogp-bottombar .ogp-bb-primary { color: var(--ogp-primary); }
}
.navbar.navbar-static-top, .navbar.bg-faded, .navbar.navbar-fixed-top { position: static; background: var(--ogp-surface); border: 0; border-bottom: 1px solid var(--ogp-border); border-radius: 0; margin-bottom: 0; min-height: var(--ogp-top-h); }
.navbar .navbar-brand h3 { font-size: var(--ogp-fs-md); margin: 0; line-height: var(--ogp-top-h); }
.navbar-nav > li > a { color: var(--ogp-fg-muted); font-size: var(--ogp-fs-base); }
.navbar-nav > li.active > a { color: var(--ogp-fg); box-shadow: inset 0 -2px 0 var(--ogp-primary); }

/* 4. Command palette ------------------------------------------------------- */
.ogp-palette { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; background: var(--ogp-overlay-2); }
.ogp-palette[hidden] { display: none; }
.ogp-palette-box { width: 100%; max-width: 580px; background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r-lg); box-shadow: var(--ogp-shadow-md); overflow: hidden; }
.ogp-palette-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-bottom: 1px solid var(--ogp-border); }
.ogp-palette-input input { flex: 1 1 auto; border: 0; outline: 0; font: inherit; font-size: var(--ogp-fs-md); background: transparent; color: var(--ogp-fg); min-width: 0; }
.ogp-palette-input .ogp-ic { color: var(--ogp-fg-subtle); }
.ogp-palette-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.ogp-palette-group { padding: 8px 8px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ogp-fg-subtle); }
.ogp-palette-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--ogp-r); cursor: pointer; color: var(--ogp-fg); text-decoration: none; }
.ogp-palette-item .ogp-ic { color: var(--ogp-fg-subtle); }
.ogp-palette-item b { font-weight: 500; }
.ogp-palette-item span { color: var(--ogp-fg-muted); font-size: var(--ogp-fs-sm); margin-left: auto; white-space: nowrap; }
.ogp-palette-item.is-active, .ogp-palette-item:hover { background: var(--ogp-primary-bg); text-decoration: none; }
.ogp-palette-empty { padding: 20px; text-align: center; color: var(--ogp-fg-muted); font-size: var(--ogp-fs-sm); }
.ogp-palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--ogp-border); font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); background: var(--ogp-surface-2); }
.ogp-palette-foot kbd { font-family: var(--ogp-font-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--ogp-border-strong); border-bottom-width: 2px; border-radius: 3px; background: var(--ogp-surface); color: var(--ogp-fg); box-shadow: none; }

/* 5. Page header, filter bar, quick bar, segmented control ---------------- */
.ogp-page { padding: var(--ogp-sp-4) var(--ogp-sp-5) var(--ogp-sp-8); }
@media (max-width: 767px) { .ogp-page { padding: var(--ogp-sp-3) var(--ogp-sp-3) var(--ogp-sp-6); } }
.ogp-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ogp-sp-2) var(--ogp-sp-4); margin-bottom: var(--ogp-sp-3); }
.ogp-page-title { font-size: var(--ogp-fs-xl); font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.ogp-page-title small { font-size: var(--ogp-fs-sm); font-weight: 400; color: var(--ogp-fg-muted); margin-left: 8px; letter-spacing: 0; }
.ogp-page-sub { font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); margin: 3px 0 0; }
.ogp-page-actions, .ogp-page-actions.dontprint { display: flex; flex-wrap: wrap; gap: var(--ogp-sp-2); margin-left: auto; align-items: center; }
.ogp-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ogp-fg-subtle); margin-bottom: 4px; }
.ogp-filterbar, .ogp-filterbar.dontprint { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ogp-sp-2) var(--ogp-sp-3); padding: var(--ogp-sp-2) var(--ogp-sp-3); background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); margin-bottom: var(--ogp-sp-2); }
.ogp-filterbar form { display: contents; }
.ogp-filterbar .ogp-actions { margin-left: auto; display: flex; gap: var(--ogp-sp-2); align-items: center; }
.ogp-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ogp-field > label, .ogp-field-label { font-size: var(--ogp-fs-xs); font-weight: 500; color: var(--ogp-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; line-height: 1.2; }
.ogp-field-inline { flex-direction: row; align-items: center; gap: var(--ogp-sp-2); }
.ogp-field-inline > label { text-transform: none; letter-spacing: 0; font-size: var(--ogp-fs-sm); }
.ogp-daterange { display: inline-flex; align-items: stretch; }
.ogp-daterange .btn { border-radius: 0; margin: 0; }
.ogp-daterange .btn:first-child { border-radius: var(--ogp-r) 0 0 var(--ogp-r); }
.ogp-daterange .btn:last-child { border-radius: 0 var(--ogp-r) var(--ogp-r) 0; }
.ogp-daterange .form-control { border-radius: 0; margin: 0 -1px; width: 118px; text-align: center; position: relative; z-index: 1; }
.ogp-daterange .has-feedback { margin: 0; }
.ogp-daterange .form-control-feedback { display: none; }
.ogp-quickbar, div.ogp-quickbar.dontprint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ogp-sp-2); margin: 0 0 var(--ogp-sp-2); }
.ogp-search { position: relative; flex: 0 1 260px; min-width: 160px; }
.ogp-search .ogp-ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--ogp-fg-subtle); pointer-events: none; }
.ogp-search input { width: 100%; height: 32px; padding: 0 28px 0 30px; border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); font: inherit; font-size: var(--ogp-fs-base); background: var(--ogp-surface); color: var(--ogp-fg); }
.ogp-search input:focus { outline: none; border-color: var(--ogp-accent); box-shadow: 0 0 0 3px var(--ogp-ring); }
.ogp-search .ogp-search-clear { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--ogp-fg-subtle); border-radius: 3px; cursor: pointer; display: none; }
.ogp-search.has-value .ogp-search-clear { display: inline-flex; align-items: center; justify-content: center; }
.ogp-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ogp-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--ogp-r-pill); border: 1px solid var(--ogp-border-strong); background: var(--ogp-surface); color: var(--ogp-fg-muted); font: inherit; font-size: var(--ogp-fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--ogp-t), color var(--ogp-t), border-color var(--ogp-t); }
.ogp-chip:hover { border-color: var(--ogp-fg-subtle); color: var(--ogp-fg); }
.ogp-chip.is-active { background: var(--ogp-chip-active-bg); border-color: var(--ogp-chip-active-bg); color: var(--ogp-chip-active-fg); }
.ogp-chip .ogp-chip-n { font-family: var(--ogp-font-mono); font-size: var(--ogp-fs-xs); padding: 0 5px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--ogp-surface-3); color: var(--ogp-fg-muted); }
.ogp-chip.is-active .ogp-chip-n { background: var(--ogp-chip-active-n); color: var(--ogp-chip-active-fg); }
.ogp-chip .ogp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ogp-st-idle); }
.ogp-chip.st-attn .ogp-dot { background: var(--ogp-st-attn); } .ogp-chip.st-down .ogp-dot { background: var(--ogp-st-down); } .ogp-chip.st-idle .ogp-dot { background: var(--ogp-st-idle); } .ogp-chip.st-on .ogp-dot { background: var(--ogp-st-on); }
.ogp-toggle { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--ogp-r); border: 1px solid transparent; background: transparent; color: var(--ogp-fg-muted); font: inherit; font-size: var(--ogp-fs-sm); cursor: pointer; }
.ogp-toggle:hover { background: var(--ogp-surface-3); color: var(--ogp-fg); }
.ogp-toggle .ogp-switch { width: 28px; height: 16px; border-radius: 8px; background: var(--ogp-border-strong); position: relative; transition: background-color var(--ogp-t); }
.ogp-toggle .ogp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform var(--ogp-t); }
.ogp-toggle[aria-pressed="true"] .ogp-switch { background: var(--ogp-primary); }
.ogp-toggle[aria-pressed="true"] .ogp-switch::after { transform: translateX(12px); }
.ogp-views { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.ogp-count { font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); font-variant-numeric: tabular-nums; }
.ogp-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--ogp-surface-3); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); }
.ogp-seg > label, .ogp-seg > button, .ogp-seg > a { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; height: 26px; border-radius: var(--ogp-r-sm); border: 0; background: transparent; font: inherit; font-size: var(--ogp-fs-sm); font-weight: 500; color: var(--ogp-fg-muted); cursor: pointer; white-space: nowrap; margin: 0; text-decoration: none; transition: background-color var(--ogp-t), color var(--ogp-t); }
.ogp-seg > label input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ogp-seg > label:has(input:checked), .ogp-seg > .is-active, .ogp-seg > label.active { background: var(--ogp-surface); color: var(--ogp-fg); box-shadow: var(--ogp-shadow-sm); }
.ogp-seg > label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.ogp-seg > label:has(input:focus-visible) { outline: 2px solid var(--ogp-accent); outline-offset: 1px; }
.ogp-seg-wrap { flex-wrap: wrap; }
.ogp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ogp-sp-2); margin-bottom: var(--ogp-sp-2); }
.ogp-spacer { flex: 1 1 auto; }

/* 6. Buttons --------------------------------------------------------------- */
.btn, .ogp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; font-family: var(--ogp-font-sans); font-size: var(--ogp-fs-base); font-weight: 500; line-height: 1; color: var(--ogp-fg); background: var(--ogp-surface); border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; box-shadow: none; background-image: none; text-shadow: none; transition: background-color var(--ogp-t), border-color var(--ogp-t), color var(--ogp-t), box-shadow var(--ogp-t); vertical-align: middle; }
.btn:hover, .ogp-btn:hover { background: var(--ogp-surface-2); border-color: var(--ogp-border-strong); color: var(--ogp-fg); text-decoration: none; }
.btn:active, .ogp-btn:active { background: var(--ogp-surface-3); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ogp-ring); }
.btn:focus:not(:focus-visible) { box-shadow: none; }
.btn[disabled], .btn.disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.btn-primary, .ogp-btn-primary { color: var(--ogp-primary-fg); background: var(--ogp-primary); border-color: var(--ogp-primary); }
.btn-primary:hover, .btn-primary:focus, .ogp-btn-primary:hover { color: #fff; background: var(--ogp-primary-hover); border-color: var(--ogp-primary-hover); }
.btn-primary:active, .btn-primary.active { background: var(--ogp-primary-active); border-color: var(--ogp-primary-active); color: #fff; }
.btn-default, .btn-secondary, .btn-success, .btn-info, .btn-light, .ogp-btn-secondary { color: var(--ogp-fg); background: var(--ogp-surface); border-color: var(--ogp-border-strong); }
.btn-default:hover, .btn-secondary:hover, .btn-success:hover, .btn-info:hover, .btn-success:focus, .btn-default:focus { color: var(--ogp-fg); background: var(--ogp-surface-2); border-color: var(--ogp-border-strong); }
.btn-success.btn-confirm { color: #fff; background: var(--ogp-success); border-color: var(--ogp-success); }
.btn-danger, .ogp-btn-danger { color: #fff; background: var(--ogp-danger); border-color: var(--ogp-danger); }
.btn-danger:hover, .btn-danger:focus { color: #fff; background: var(--ogp-danger-hover); border-color: var(--ogp-danger-hover); }
.btn-outline-danger { color: var(--ogp-danger); background: var(--ogp-surface); border-color: var(--ogp-danger-border); }
.btn-outline-danger:hover { background: var(--ogp-danger-bg); color: var(--ogp-danger); }
.btn-warning { color: var(--ogp-warning); background: var(--ogp-warning-bg); border-color: var(--ogp-warning-border); }
.btn-link, .ogp-btn-ghost { color: var(--ogp-primary); background: transparent; border-color: transparent; }
.btn-link:hover, .ogp-btn-ghost:hover { background: var(--ogp-primary-bg); border-color: transparent; color: var(--ogp-primary-hover); text-decoration: none; }
.btn-lg, .ogp-btn-lg { height: 40px; padding: 0 18px; font-size: var(--ogp-fs-md); }
.btn-sm, .ogp-btn-sm { height: 26px; padding: 0 8px; font-size: var(--ogp-fs-sm); }
.btn-xs, .ogp-btn-xs { height: 22px; padding: 0 6px; font-size: var(--ogp-fs-xs); }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: var(--ogp-sp-2); }
.btn.fa, .btn.material-icons, .ogp-btn-icon { width: 32px; padding: 0; font-size: 14px; }
.btn.fa::before { font-family: FontAwesome; }
.btn-lg.fa { width: 38px; }
.btn-group { display: inline-flex; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
table button:not(.btn):not(.close) { font: inherit; font-size: var(--ogp-fs-xs); height: 22px; padding: 0 6px; border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r-sm); background: var(--ogp-surface); cursor: pointer; }
.btn.dontprint { display: inline-flex; }

/* 7. Forms ----------------------------------------------------------------- */
label { display: inline-block; margin-bottom: 4px; font-size: var(--ogp-fs-sm); font-weight: 500; color: var(--ogp-fg-muted); max-width: 100%; }
.form-group { margin-bottom: var(--ogp-sp-3); }
.form-inline .form-group { margin-bottom: 0; }
.form-control, .ogp-input, .ogp-select, .ogp-textarea, input[type="text"].form-control, select.form-control, textarea.form-control { display: block; width: 100%; height: 32px; padding: 0 8px; font-family: var(--ogp-font-sans); font-size: var(--ogp-fs-base) !important; line-height: 30px; color: var(--ogp-fg); background: var(--ogp-surface); border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); box-shadow: none; background-image: none; transition: border-color var(--ogp-t), box-shadow var(--ogp-t); }
.form-control:hover { border-color: var(--ogp-border-strong); }
.form-control:focus, .ogp-input:focus, .ogp-select:focus, .ogp-textarea:focus { outline: none; border-color: var(--ogp-accent); box-shadow: 0 0 0 3px var(--ogp-ring); }
.form-control::placeholder { color: var(--ogp-fg-subtle); opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: var(--ogp-surface-3); color: var(--ogp-fg-muted); cursor: default; opacity: 1; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
textarea.form-control, .ogp-textarea { height: auto; min-height: 72px; line-height: var(--ogp-lh); padding: 6px 8px; resize: vertical; }
select.form-control, .ogp-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235a6577' stroke-width='1.5' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 12px; height: 32px !important; line-height: 30px; }
select.form-control[multiple], select.form-control[size]:not([size="1"]) { height: auto !important; background-image: none; padding-right: 8px; line-height: var(--ogp-lh); }
select.form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ogp-fg); }
.has-feedback .form-control { padding-right: 30px; }
.form-control-feedback { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 30px; height: 32px; line-height: 32px; text-align: center; pointer-events: none; color: var(--ogp-fg-subtle); font-size: 14px; }
label ~ .form-control-feedback { top: 22px; }
.has-feedback { position: relative; }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--ogp-primary); cursor: pointer; }
.checkbox-inline, .radio-inline, .form-check-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ogp-fg); font-size: var(--ogp-fs-base); padding-left: 0; margin: 0; cursor: pointer; }
.checkbox-inline input, .radio-inline input, .form-check-label input { margin: 0; position: static; }
.form-check { padding-left: 0; margin-bottom: 4px; }
.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-left: var(--ogp-sp-3); }
.input-sm, .form-control-sm { height: 26px; line-height: 24px; font-size: var(--ogp-fs-sm) !important; padding: 0 6px; }
.input-lg, .form-control-lg { height: 38px; line-height: 36px; font-size: var(--ogp-fs-md) !important; }
.has-error .form-control, .form-control.is-invalid { border-color: var(--ogp-danger); }
.has-error label { color: var(--ogp-danger); }
.help-block, .ogp-hint { display: block; margin-top: 3px; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogDate { width: 118px !important; margin-top: 0 !important; }
.ogp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ogp-sp-3); }
.ogp-form-actions { display: flex; gap: var(--ogp-sp-2); align-items: center; margin-top: var(--ogp-sp-3); }

/* 8. Tables: dense base + control-surface grid ----------------------------- */
.ogp-table-wrap, .table-full, .table-responsive { width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); }
.ogp-table-wrap > .table, .table-full .table { margin-bottom: 0; }
.table-full > .table { display: block; }
.table-responsive { border: 0; }
table.table, .ogp-table { width: 100%; max-width: 100%; margin-bottom: var(--ogp-sp-3); border-collapse: separate; border-spacing: 0; font-size: var(--ogp-fs-sm); line-height: 1.35; font-variant-numeric: tabular-nums; background: var(--ogp-surface); }
table.table caption { caption-side: top; padding: var(--ogp-sp-2) var(--ogp-sp-3); text-align: left; color: var(--ogp-fg); }
table.table caption h4 { margin: 0; font-size: var(--ogp-fs-md); }
.table > thead > tr > th, .ogp-table th { padding: 6px 8px; vertical-align: bottom; text-align: left; font-size: var(--ogp-fs-xs); font-weight: 600; color: var(--ogp-fg-muted); letter-spacing: 0.01em; background: var(--ogp-surface-2); border-top: 0; border-bottom: 1px solid var(--ogp-border-strong); white-space: nowrap; }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .ogp-table td { padding: 4px 8px; vertical-align: middle; border-top: 0; border-bottom: 1px solid var(--ogp-border); color: var(--ogp-fg); }
.table-sm > thead > tr > th, .table-sm > tbody > tr > td, .table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 3px 6px; }
.table-bordered { border: 0; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-left: 1px solid var(--ogp-border); }
.table-bordered > thead > tr > th:first-child, .table-bordered > tbody > tr > td:first-child, .table-bordered > tfoot > tr > td:first-child { border-left: 0; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--ogp-surface); }
.table-striped > tbody > tr:nth-of-type(even) { background: var(--ogp-surface-2); }
.table-hover > tbody > tr:hover, .ogp-table tbody tr:hover, .table > tbody > tr:hover { background: var(--ogp-primary-bg); }
.table > tbody > tr > td a { font-weight: 500; }
td[align="right"], th[align="right"], .num, .ogp-num, .text-right { text-align: right !important; }
td[align="center"], th[align="center"], .text-center { text-align: center !important; }
th[bgcolor], td[bgcolor] { background-color: var(--ogp-surface-2) !important; }
.table > thead.fixed-header, .ogp-table thead, .table[data-ogp-table] > thead { position: sticky; top: var(--ogp-sticky-top); z-index: 5; }
.table > thead.fixed-header > tr > th, .table[data-ogp-table] > thead > tr > th { background: var(--ogp-surface-2); opacity: 1; box-shadow: inset 0 -1px 0 var(--ogp-border-strong); }
.fixed-header { background: var(--ogp-surface-2) !important; opacity: 1 !important; }
.table col.prior, .table > thead > tr > th.prior, .table > tbody > tr > td.prior { background-color: var(--ogp-prior-bg) !important; color: var(--ogp-prior-fg); opacity: 1 !important; }
.table > thead > tr > th.prior { color: var(--ogp-fg-subtle); }
.table > tbody > tr > td.prior a { color: var(--ogp-prior-fg); }
.table > thead > tr > th.current { border-bottom-color: var(--ogp-primary); }
.prior { opacity: 1 !important; }
.total-row, .ogp-row-total, .table > tbody > tr.ogp-row-total > td, .table > tfoot > tr > td { font-weight: 600; background: var(--ogp-surface-2) !important; border-top: 2px solid var(--ogp-border-strong) !important; border-color: var(--ogp-border-strong); border-style: solid !important; border-width: 2px 0 1px !important; }
.total-row > td { border-top: 2px solid var(--ogp-border-strong); }
.ogp-row-danger > td { background: var(--ogp-danger-bg) !important; }
.ogp-row-warn > td { background: var(--ogp-warning-bg) !important; }
.ogp-row-ok > td { background: var(--ogp-success-bg) !important; }
.ogp-row-muted > td { color: var(--ogp-fg-muted); }
th[data-sort] { cursor: pointer; user-select: none; padding-right: 18px; position: relative; }
th[data-sort]::after { content: ""; position: absolute; right: 6px; top: 50%; margin-top: -3px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ogp-border-strong); }
th[data-sort][aria-sort="ascending"]::after { border-top: 0; border-bottom: 5px solid var(--ogp-primary); }
th[data-sort][aria-sort="descending"]::after { border-top: 5px solid var(--ogp-primary); }
th[data-sort]:hover { color: var(--ogp-fg); }
.ogp-cell-key { font-weight: 500; color: var(--ogp-fg); white-space: nowrap; }
.ogp-cell-muted { color: var(--ogp-fg-muted); }
.ogp-cell-mono { font-family: var(--ogp-font-mono); font-size: 0.95em; }
.ogp-delta-up, .table > tbody > tr > td.ogp-delta-up { color: var(--ogp-success); }
.ogp-delta-down, .table > tbody > tr > td.ogp-delta-down { color: var(--ogp-danger); font-weight: 500; }
.table .material-icons { font-size: 18px; }
.table button[style*="transparent"] { padding: 0; height: auto; }
.ogp-table-meta { display: flex; flex-wrap: wrap; gap: var(--ogp-sp-2) var(--ogp-sp-4); align-items: center; font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); padding: 6px 2px; }
.displaytextsmall, td.displaytextsmall, th.displaytextsmall { font-size: var(--ogp-fs-sm) !important; }
.displaytextsmallheader, th.displaytextsmallheader { font-size: var(--ogp-fs-xs) !important; font-weight: 600; }
.alert-dark { color: var(--ogp-fg); background: var(--ogp-surface-2); border-color: var(--ogp-border); border-left-color: var(--ogp-border-strong); font-weight: 600; padding: 6px 10px; }
.alert-dark h4, .alert-dark h5 { margin: 0; font-size: var(--ogp-fs-base); }
.ogp-grid { position: relative; max-height: calc(100vh - var(--ogp-top-h) - 232px); min-height: 240px; overflow: auto; border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); background: var(--ogp-surface); scrollbar-width: thin; }
.ogp-grid.is-tall { max-height: none; overflow: visible; }
.ogp-grid > div.table { display: block; }
.ogp-grid table.table { margin: 0; border-collapse: separate; }
.ogp-grid thead, .ogp-grid .table > thead.fixed-header { position: static; }
.ogp-grid thead th { position: sticky; top: 0; z-index: 5; background: var(--ogp-surface-2); }
.ogp-grid thead tr.ogp-grid-groups th { top: 0; height: 24px; padding: 3px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ogp-fg-subtle); text-align: center; border-bottom: 1px solid var(--ogp-border); background: var(--ogp-surface); box-shadow: none; }
.ogp-grid thead tr.ogp-grid-groups th.g-prior { color: var(--ogp-prior-fg); background: var(--ogp-prior-bg); }
.ogp-grid thead tr.ogp-grid-groups th.g-current { color: var(--ogp-primary); background: var(--ogp-primary-bg); }
.ogp-grid thead tr.ogp-grid-groups th.g-inv { background: var(--ogp-surface-2); }
.ogp-grid thead tr.ogp-grid-head th { top: 24px; height: 30px; }
.ogp-grid thead th.ogp-th-delta { white-space: nowrap; }
.ogp-grid thead tr.total-row td, .ogp-grid thead tr.total-row th { position: sticky; top: 54px; z-index: 5; background: var(--ogp-surface-2) !important; height: 30px; }
.ogp-grid th:first-child, .ogp-grid td:first-child { position: sticky; left: 0; z-index: 3; background: var(--ogp-surface); box-shadow: inset -1px 0 0 var(--ogp-border); min-width: 180px; max-width: 260px; }
.ogp-grid thead th:first-child { z-index: 7; background: var(--ogp-surface-2); }
.ogp-grid thead tr.ogp-grid-groups th:first-child { background: var(--ogp-surface); text-align: left; color: var(--ogp-fg-subtle); }
.ogp-grid .table-striped > tbody > tr:nth-of-type(even) td:first-child { background: var(--ogp-surface-2); }
.ogp-grid .table > tbody > tr:hover td:first-child, .ogp-grid .table > tbody > tr:hover > td { background: var(--ogp-primary-bg); }
.ogp-grid .table > tbody > tr.is-selected > td, .ogp-grid .table > tbody > tr.is-selected td:first-child { background: #dbe7fb; }
.ogp-grid .table > tbody > tr > td { white-space: nowrap; }
.ogp-grid .table > tbody > tr > td.ogp-cell-comment { white-space: normal; min-width: 180px; max-width: 320px; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-grid .table > thead > tr > th.fixed-col-width { min-width: 180px; }
.ogp-grid.is-compact .table > tbody > tr > td { padding-top: 2px; padding-bottom: 2px; line-height: 1.25; }
.ogp-grid.is-compact .ogp-loc-sub { display: none; }
.ogp-grid .table > thead.fixed-header > tr > th { box-shadow: inset 0 -1px 0 var(--ogp-border-strong); }
.ogp-grid .table > tbody > tr.is-hidden { display: none; }
.ogp-grid tr.ogp-group-row > td { position: sticky; left: 0; background: var(--ogp-surface-3) !important; font-size: var(--ogp-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ogp-fg-muted); padding: 4px 8px; z-index: 3; box-shadow: none; }
.ogp-grid tr.ogp-group-row > td .ogp-count { margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ogp-loc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ogp-loc-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ogp-loc-name a { font-weight: 600; color: var(--ogp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-loc-name a:hover { color: var(--ogp-primary); }
.ogp-loc-sub { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ogp-fg-subtle); white-space: nowrap; }
.ogp-loc-sub .ogp-mono { font-family: var(--ogp-font-mono); }
.ogp-st { width: 8px; height: 8px; border-radius: 50%; background: var(--ogp-st-idle); flex: 0 0 auto; display: inline-block; }
.ogp-st.is-on { background: var(--ogp-st-on); } .ogp-st.is-down { background: var(--ogp-st-down); } .ogp-st.is-attn { background: var(--ogp-st-attn); } .ogp-st.is-idle { background: var(--ogp-st-idle); }
.ogp-flag { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ogp-flag.f-ng { background: var(--ogp-st-idle-bg); color: #5b6676; }
.ogp-flag.f-zero { background: var(--ogp-st-down-bg); color: var(--ogp-st-down); }
.ogp-flag.f-drop { background: var(--ogp-st-attn-bg); color: var(--ogp-st-attn); }
.ogp-flag.f-rise { background: var(--ogp-st-on-bg); color: var(--ogp-st-on); }
.ogp-flag.f-down { background: var(--ogp-st-down-bg); color: var(--ogp-st-down); }
.ogp-flag.f-note { background: var(--ogp-info-bg); color: var(--ogp-info); }
.ogp-flag.f-tank { background: var(--ogp-st-attn-bg); color: var(--ogp-st-attn); }
tr.is-attn > td:first-child { box-shadow: inset 3px 0 0 var(--ogp-st-attn), inset -1px 0 0 var(--ogp-border) !important; }
tr.is-down > td:first-child { box-shadow: inset 3px 0 0 var(--ogp-st-down), inset -1px 0 0 var(--ogp-border) !important; }
tr.is-ng > td { color: var(--ogp-fg-subtle); }
tr.is-ng > td:first-child .ogp-loc-name a { color: var(--ogp-fg-muted); font-weight: 500; }
.ogp-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ogp-font-mono); font-size: var(--ogp-fs-xs); font-weight: 500; white-space: nowrap; }
.ogp-delta.up { color: var(--ogp-st-on); } .ogp-delta.down { color: var(--ogp-st-down); } .ogp-delta.flat { color: var(--ogp-fg-subtle); }
.ogp-delta .ogp-delta-pct { color: var(--ogp-fg-subtle); font-weight: 400; }
td.ogp-barcell { background-image: linear-gradient(var(--ogp-bar-c, var(--ogp-bar-default)), var(--ogp-bar-c, var(--ogp-bar-default))); background-repeat: no-repeat; background-size: var(--w, 0%) 3px; background-position: 6px calc(100% - 2px); }
td.ogp-barcell.is-max { --ogp-bar-c: var(--ogp-primary); }

/* 9. Badges ---------------------------------------------------------------- */
.ogp-badge, .badge, .label, .tm-min-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 18px; border-radius: var(--ogp-r-sm); font-size: var(--ogp-fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ogp-fg); background: var(--ogp-surface-3); border: 1px solid var(--ogp-border); vertical-align: middle; }
.ogp-badge-ok, .badge-success, .label-success { color: var(--ogp-success); background: var(--ogp-success-bg); border-color: var(--ogp-success-border); }
.ogp-badge-warn, .badge-warning, .label-warning { color: var(--ogp-warning); background: var(--ogp-warning-bg); border-color: var(--ogp-warning-border); }
.ogp-badge-danger, .badge-danger, .label-danger, .tm-min-badge-overdue { color: var(--ogp-danger) !important; background: var(--ogp-danger-bg) !important; border-color: var(--ogp-danger-border) !important; }
.ogp-badge-info, .badge-info, .label-info { color: var(--ogp-info); background: var(--ogp-info-bg); border-color: var(--ogp-info-border); }
.ogp-badge-primary, .badge-primary, .label-primary { color: var(--ogp-primary); background: var(--ogp-primary-bg); border-color: #c5d6f2; }
.ogp-badge-neutral { color: var(--ogp-fg-muted); }
.ogp-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 10. Panels / cards / legacy .well ---------------------------------------- */
.ogp-panel, .well, .card, .panel { background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); box-shadow: var(--ogp-shadow-sm); margin-bottom: var(--ogp-sp-3); background-image: none; }
.well { padding: var(--ogp-sp-3); min-height: 0; }
.well.row { margin-left: 0; margin-right: 0; }
.card { padding: 0; }
.card-header, .panel-heading, .ogp-panel-header { display: flex; align-items: center; gap: var(--ogp-sp-2); padding: 7px var(--ogp-sp-3); min-height: 36px; background: var(--ogp-surface-2); border-bottom: 1px solid var(--ogp-border); border-radius: var(--ogp-r) var(--ogp-r) 0 0; font-size: var(--ogp-fs-base); font-weight: 600; }
.ogp-panel-header h1, .ogp-panel-header h2, .ogp-panel-header h3, .ogp-panel-header h4, .card-header h5 { margin: 0; font-size: var(--ogp-fs-base); }
.ogp-panel-header .ogp-ic { color: var(--ogp-fg-subtle); }
.ogp-panel-header a.ogp-panel-link { margin-left: auto; font-size: var(--ogp-fs-xs); font-weight: 500; }
.ogp-panel-body, .card-body, .card-block, .panel-body { padding: var(--ogp-sp-3); }
.ogp-panel-body.ogp-flush { padding: 0; }
.ogp-panel-footer, .card-footer, .panel-footer { padding: var(--ogp-sp-2) var(--ogp-sp-3); background: var(--ogp-surface-2); border-top: 1px solid var(--ogp-border); }
.ogp-panel-title { font-size: var(--ogp-fs-base); font-weight: 600; margin: 0; }
.ogp-panel-sub { font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); font-weight: 400; }
.mb-4 { margin-bottom: var(--ogp-sp-4) !important; } .mb-0 { margin-bottom: 0 !important; }
.tm-min-card { border-color: var(--ogp-border) !important; border-radius: var(--ogp-r) !important; box-shadow: var(--ogp-shadow-sm); }
.tm-min-head { background: var(--ogp-surface-2); border-bottom-color: var(--ogp-border) !important; padding: 8px 12px !important; }
.tm-min-title { font-weight: 600 !important; font-size: var(--ogp-fs-base); }
.tm-min-actions a { font-weight: 500 !important; font-size: var(--ogp-fs-sm); }
.tm-min-due { font-weight: 600 !important; }
.tm-min-row { border-top-color: var(--ogp-border) !important; }
.tm-min-empty { color: var(--ogp-fg-muted) !important; font-size: var(--ogp-fs-sm); }

/* 11. Alerts + toasts ------------------------------------------------------ */
.alert, .ogp-alert { position: relative; display: flex; gap: var(--ogp-sp-2); align-items: flex-start; padding: 10px 12px; margin-bottom: var(--ogp-sp-3); font-size: var(--ogp-fs-base); line-height: var(--ogp-lh); color: var(--ogp-fg); background: var(--ogp-surface-2); border: 1px solid var(--ogp-border); border-left-width: 3px; border-radius: var(--ogp-r); text-shadow: none; background-image: none; box-shadow: none; }
.alert p, .ogp-alert p { margin: 0; text-align: left !important; }
.alert-danger, .ogp-alert-danger { color: var(--ogp-danger); background: var(--ogp-danger-bg); border-color: var(--ogp-danger-border); border-left-color: var(--ogp-danger); }
.alert-success, .ogp-alert-success { color: var(--ogp-success); background: var(--ogp-success-bg); border-color: var(--ogp-success-border); border-left-color: var(--ogp-success); }
.alert-warning, .ogp-alert-warning { color: var(--ogp-warning); background: var(--ogp-warning-bg); border-color: var(--ogp-warning-border); border-left-color: var(--ogp-warning); }
.alert-info, .ogp-alert-info { color: var(--ogp-info); background: var(--ogp-info-bg); border-color: var(--ogp-info-border); border-left-color: var(--ogp-info); }
.ogp-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ogp-toast { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: var(--ogp-side-bg); color: var(--ogp-fg-on-dark); border-radius: var(--ogp-r); box-shadow: var(--ogp-shadow-md); font-size: var(--ogp-fs-base); border-left: 3px solid var(--ogp-side-accent); opacity: 0; transform: translateY(6px); transition: opacity var(--ogp-t), transform var(--ogp-t); }
.ogp-toast.is-in { opacity: 1; transform: none; }
.ogp-toast-ok { border-left-color: #4cc38a; } .ogp-toast-danger { border-left-color: #f0665c; } .ogp-toast-warn { border-left-color: #f2b544; }

/* 12. Modals, dropdowns, datepicker, tooltips ------------------------------ */
.modal-backdrop { background: #101828; }
.modal-backdrop.in, .modal-backdrop.show { opacity: 0.55; }
.modal-dialog { margin: 40px auto; max-width: 560px; width: auto; }
.modal.fade .modal-dialog { transform: translateY(-8px); transition: transform var(--ogp-t), opacity var(--ogp-t); }
.modal.in .modal-dialog, .modal.show .modal-dialog { transform: none; }
.modal-content { border: 1px solid var(--ogp-border); border-radius: var(--ogp-r-lg); box-shadow: var(--ogp-shadow-md); background: var(--ogp-surface); }
.modal-header { display: flex; align-items: center; gap: var(--ogp-sp-2); padding: var(--ogp-sp-3) var(--ogp-sp-4); border-bottom: 1px solid var(--ogp-border); }
.modal-header .close { order: 2; margin-left: auto; margin-top: 0; }
.modal-title { font-size: var(--ogp-fs-md); font-weight: 600; margin: 0; line-height: 1.3; }
.modal-body { padding: var(--ogp-sp-4); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--ogp-sp-2); padding: var(--ogp-sp-3) var(--ogp-sp-4); border-top: 1px solid var(--ogp-border); background: var(--ogp-surface-2); border-radius: 0 0 var(--ogp-r-lg) var(--ogp-r-lg); }
.modal-footer .btn + .btn { margin-left: 0; }
.close { font-size: 20px; font-weight: 400; line-height: 1; color: var(--ogp-fg-muted); opacity: 1; text-shadow: none; background: transparent; border: 0; padding: 4px 6px; border-radius: var(--ogp-r-sm); cursor: pointer; }
.close:hover { color: var(--ogp-fg); background: var(--ogp-surface-3); opacity: 1; }
@media (max-width: 767px) { .modal-dialog { margin: 12px; } }
.dropdown-menu { border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); box-shadow: var(--ogp-shadow-md); padding: 4px 0; font-size: var(--ogp-fs-base); min-width: 180px; }
.dropdown-item, .dropdown-menu > li > a { padding: 6px 12px; color: var(--ogp-fg); font-size: var(--ogp-fs-base); }
.dropdown-item:hover, .dropdown-menu > li > a:hover { background: var(--ogp-surface-3); color: var(--ogp-fg); }
.dropdown-divider { margin: 4px 0; border-top: 1px solid var(--ogp-border); }
.datepicker { padding: 6px; border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); box-shadow: var(--ogp-shadow-md); font-size: var(--ogp-fs-sm); font-family: var(--ogp-font-sans); }
.datepicker table tr td, .datepicker table tr th { width: 30px; height: 28px; border-radius: var(--ogp-r-sm); }
.datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--ogp-surface-3); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active, .datepicker table tr td.active:active { background: var(--ogp-primary); background-image: none; color: #fff; text-shadow: none; border: 0; }
.datepicker table tr td.today, .datepicker table tr td.today:hover { background: var(--ogp-primary-bg); background-image: none; color: var(--ogp-primary); }
.datepicker table tr td.old, .datepicker table tr td.new { color: var(--ogp-fg-subtle); }
.datepicker .datepicker-switch, .datepicker .prev, .datepicker .next { font-weight: 600; }
.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover { background: var(--ogp-surface-3); }
.tooltip-inner { background: var(--ogp-side-bg); font-size: var(--ogp-fs-xs); border-radius: var(--ogp-r-sm); padding: 4px 8px; }
.tooltip.top .tooltip-arrow { border-top-color: var(--ogp-side-bg); }

/* 13. Loading / empty / error states -------------------------------------- */
#loading, .ogp-loading-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--ogp-sp-3); background: var(--ogp-loading-bg); color: var(--ogp-fg-muted); font-size: var(--ogp-fs-sm); }
#loading[hidden], .ogp-loading-overlay[hidden] { display: none; }
.ogp-spinner, .spinner-border { display: inline-block; width: 28px; height: 28px; flex: 0 0 auto; border: 3px solid var(--ogp-border); border-top-color: var(--ogp-primary); border-radius: 50%; animation: ogp-spin 0.8s linear infinite; vertical-align: middle; }
.ogp-spinner-sm, .spinner-border-sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes ogp-spin { to { transform: rotate(360deg); } }
.ogp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1095; pointer-events: none; opacity: 0; }
.ogp-progress::before { content: ""; position: absolute; inset: 0; width: 0; background: var(--ogp-accent); }
html.is-navigating .ogp-progress { opacity: 1; }
html.is-navigating .ogp-progress::before { animation: ogp-progress 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ogp-progress { 0% { width: 0; } 60% { width: 70%; } 100% { width: 92%; } }
.ogp-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: var(--ogp-sp-8) var(--ogp-sp-4); color: var(--ogp-fg-muted); background: var(--ogp-surface); border: 1px dashed var(--ogp-border-strong); border-radius: var(--ogp-r); }
.ogp-state-title { font-size: var(--ogp-fs-md); font-weight: 600; color: var(--ogp-fg); }
.ogp-state-hint { font-size: var(--ogp-fs-sm); max-width: 48ch; }
.ogp-state-icon { color: var(--ogp-fg-subtle); }
.ogp-state-icon .ogp-ic { width: 28px; height: 28px; stroke-width: 1.4; }
.ogp-state-error { border-color: var(--ogp-danger-border); background: var(--ogp-danger-bg); }
.ogp-state-error .ogp-state-title { color: var(--ogp-danger); }
.ogp-state .btn { margin-top: var(--ogp-sp-2); }
.ogp-state-inline { padding: var(--ogp-sp-4); border-style: solid; }
table .ogp-state-row td { padding: var(--ogp-sp-6) var(--ogp-sp-3) !important; text-align: center !important; color: var(--ogp-fg-muted); }
.ogp-skeleton { position: relative; overflow: hidden; background: var(--ogp-surface-3); border-radius: var(--ogp-r-sm); min-height: 12px; }
.ogp-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: ogp-shimmer-x 1.2s infinite; }
@keyframes ogp-shimmer-x { to { transform: translateX(100%); } }

/* 14. Dashboard primitives ------------------------------------------------- */
.ogp-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ogp-sp-3); }
@media (min-width: 1100px) { .ogp-dash { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); } }
.ogp-dash-col { display: flex; flex-direction: column; gap: var(--ogp-sp-3); min-width: 0; }
.ogp-dash .ogp-panel { margin: 0; }
.ogp-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--ogp-border); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); overflow: hidden; margin-bottom: var(--ogp-sp-3); }
.ogp-attn-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--ogp-surface); color: var(--ogp-fg); text-decoration: none; position: relative; min-width: 0; }
.ogp-attn-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ogp-st-idle); }
.ogp-attn-item.sev-down::before { background: var(--ogp-st-down); } .ogp-attn-item.sev-attn::before { background: var(--ogp-st-attn); } .ogp-attn-item.sev-on::before { background: var(--ogp-st-on); } .ogp-attn-item.sev-info::before { background: var(--ogp-accent); }
.ogp-attn-item .ogp-ic { margin-top: 2px; color: var(--ogp-fg-subtle); }
.ogp-attn-item.sev-down .ogp-ic { color: var(--ogp-st-down); } .ogp-attn-item.sev-attn .ogp-ic { color: var(--ogp-st-attn); } .ogp-attn-item.sev-on .ogp-ic { color: var(--ogp-st-on); } .ogp-attn-item.sev-info .ogp-ic { color: var(--ogp-accent); }
.ogp-attn-item b { display: block; font-size: var(--ogp-fs-base); font-weight: 600; line-height: 1.3; }
.ogp-attn-item span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); margin-top: 1px; }
a.ogp-attn-item:hover { background: var(--ogp-surface-2); text-decoration: none; }
.ogp-attn-item .ogp-attn-go { margin-left: auto; align-self: center; color: var(--ogp-fg-subtle); }
.ogp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ogp-sp-2); margin-bottom: var(--ogp-sp-3); }
.ogp-kpi { background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); padding: 9px 12px 10px; min-width: 0; box-shadow: var(--ogp-shadow-sm); position: relative; }
.ogp-kpi-label { font-size: var(--ogp-fs-xs); font-weight: 500; color: var(--ogp-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ogp-kpi-label .ogp-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.ogp-kpi-value { font-size: var(--ogp-fs-2xl); font-weight: 600; line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ogp-kpi-value small { font-size: var(--ogp-fs-sm); font-weight: 500; color: var(--ogp-fg-muted); margin-left: 3px; letter-spacing: 0; }
.ogp-kpi-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--ogp-fs-xs); font-weight: 500; color: var(--ogp-fg-muted); font-variant-numeric: tabular-nums; }
.ogp-kpi-delta.is-up { color: var(--ogp-st-on); } .ogp-kpi-delta.is-down { color: var(--ogp-st-down); } .ogp-kpi-delta.is-flat { color: var(--ogp-fg-subtle); }
.ogp-kpi-cmp { display: grid; gap: 3px; margin-top: 8px; }
.ogp-kpi-cmp i { display: block; height: 4px; border-radius: 2px; background: var(--ogp-border); width: var(--w, 0%); max-width: 100%; }
.ogp-kpi-cmp i.cur { background: var(--ogp-kpi-c, var(--ogp-primary)); }
.ogp-kpi-oil { --ogp-kpi-c: var(--ogp-c-oil); } .ogp-kpi-gas { --ogp-kpi-c: var(--ogp-c-gas); } .ogp-kpi-water { --ogp-kpi-c: var(--ogp-c-water); } .ogp-kpi-inj { --ogp-kpi-c: var(--ogp-c-inj); } .ogp-kpi-neutral { --ogp-kpi-c: var(--ogp-border-strong); }
.ogp-kpi-oil .ogp-dot { background: var(--ogp-c-oil); } .ogp-kpi-gas .ogp-dot { background: var(--ogp-c-gas); } .ogp-kpi-water .ogp-dot { background: var(--ogp-c-water); } .ogp-kpi-inj .ogp-dot { background: var(--ogp-c-inj); } .ogp-kpi-neutral .ogp-dot { background: var(--ogp-border-strong); }
.ogp-coverage { display: flex; flex-direction: column; gap: 6px; }
.ogp-coverage-head { display: flex; align-items: baseline; gap: 8px; }
.ogp-coverage-head b { font-size: var(--ogp-fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ogp-coverage-head span { color: var(--ogp-fg-muted); font-size: var(--ogp-fs-sm); }
.ogp-bar { height: 8px; border-radius: 4px; background: var(--ogp-surface-3); overflow: hidden; display: flex; }
.ogp-bar i { display: block; height: 100%; background: var(--ogp-st-on); width: var(--w, 0%); transition: width 300ms ease; }
.ogp-bar i.b-attn { background: var(--ogp-st-attn); } .ogp-bar i.b-down { background: var(--ogp-st-down); } .ogp-bar i.b-idle { background: var(--ogp-st-idle); } .ogp-bar i.b-primary { background: var(--ogp-primary); }
.ogp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; background: var(--ogp-st-on); }
.ogp-legend i.b-attn { background: var(--ogp-st-attn); } .ogp-legend i.b-down { background: var(--ogp-st-down); } .ogp-legend i.b-idle { background: var(--ogp-st-idle); }
.ogp-barlist { display: grid; grid-template-columns: minmax(80px, max-content) 1fr max-content; gap: 5px 10px; align-items: center; font-size: var(--ogp-fs-sm); }
.ogp-barlist .lbl { color: var(--ogp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-barlist .bar { height: 8px; border-radius: 3px; background: var(--ogp-surface-3); overflow: hidden; }
.ogp-barlist .bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--ogp-st-attn); }
.ogp-barlist .val { font-family: var(--ogp-font-mono); font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); text-align: right; }
.ogp-list { list-style: none; margin: 0; padding: 0; }
.ogp-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ogp-border); font-size: var(--ogp-fs-sm); min-width: 0; }
.ogp-list li:first-child { border-top: 0; }
.ogp-list .ogp-list-main { flex: 1 1 auto; min-width: 0; }
.ogp-list .ogp-list-main b { display: block; font-weight: 500; color: var(--ogp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-list .ogp-list-main span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-list .ogp-list-val { font-family: var(--ogp-font-mono); font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); white-space: nowrap; }
.ogp-list .ogp-list-time { font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ogp-list a.ogp-list-main:hover b { color: var(--ogp-primary); }
.ogp-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.ogp-chiprow a { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 3px; background: var(--ogp-surface-3); color: var(--ogp-fg); font-size: var(--ogp-fs-xs); font-weight: 500; text-decoration: none; }
.ogp-chiprow a:hover { background: var(--ogp-primary-bg); color: var(--ogp-primary); }
.ogp-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--ogp-sp-2); }
.ogp-stat { padding: 6px 8px; border-radius: var(--ogp-r); background: var(--ogp-surface-2); }
.ogp-stat b { display: block; font-size: var(--ogp-fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ogp-stat span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-stat.st-down b { color: var(--ogp-st-down); } .ogp-stat.st-attn b { color: var(--ogp-st-attn); } .ogp-stat.st-on b { color: var(--ogp-st-on); }
.ogp-mini-table { width: 100%; border-collapse: collapse; font-size: var(--ogp-fs-sm); font-variant-numeric: tabular-nums; }
.ogp-mini-table th { text-align: left; font-size: var(--ogp-fs-xs); font-weight: 600; color: var(--ogp-fg-muted); padding: 5px 8px; border-bottom: 1px solid var(--ogp-border-strong); background: var(--ogp-surface-2); white-space: nowrap; }
.ogp-mini-table td { padding: 5px 8px; border-bottom: 1px solid var(--ogp-border); white-space: nowrap; }
.ogp-mini-table tr:last-child td { border-bottom: 0; }
.ogp-mini-table tr:hover td { background: var(--ogp-primary-bg); }
.ogp-mini-table td.num, .ogp-mini-table th.num { text-align: right; }
.ogp-mini-table td.ogp-cell-wrap { white-space: normal; }

/* 15. Route checklist, progress, action bar -------------------------------- */
.ogp-progress-block { display: flex; flex-direction: column; gap: 6px; }
.ogp-progress-block .ogp-progress-txt { display: flex; align-items: baseline; gap: 8px; font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); }
.ogp-progress-block .ogp-progress-txt b { font-size: var(--ogp-fs-xl); color: var(--ogp-fg); font-variant-numeric: tabular-nums; }
.ogp-route { list-style: none; margin: 0; padding: 0; }
.ogp-route li { border-top: 1px solid var(--ogp-border); }
.ogp-route li:first-child { border-top: 0; }
.ogp-route-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ogp-fg); text-decoration: none; min-height: 44px; }
.ogp-route-item:hover { background: var(--ogp-primary-bg); text-decoration: none; }
.ogp-route-item .ogp-route-st { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ogp-border-strong); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.ogp-route-item .ogp-route-st .ogp-ic { width: 12px; height: 12px; stroke-width: 3; display: none; }
.ogp-route-item.is-done .ogp-route-st { background: var(--ogp-st-on); border-color: var(--ogp-st-on); }
.ogp-route-item.is-done .ogp-route-st .ogp-ic { display: block; }
.ogp-route-item.is-next .ogp-route-st { border-color: var(--ogp-primary); box-shadow: 0 0 0 3px var(--ogp-primary-bg); }
.ogp-route-item.is-down .ogp-route-st { border-color: var(--ogp-st-down); }
.ogp-route-item .ogp-route-main { flex: 1 1 auto; min-width: 0; }
.ogp-route-item .ogp-route-main b { display: block; font-weight: 600; font-size: var(--ogp-fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-route-item.is-done .ogp-route-main b { color: var(--ogp-fg-muted); font-weight: 500; }
.ogp-route-item .ogp-route-main span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-route-item .ogp-route-meta { display: flex; align-items: center; gap: 6px; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); white-space: nowrap; }
.ogp-route-item .ogp-route-go { color: var(--ogp-fg-subtle); }
.ogp-route-item.is-next { background: var(--ogp-primary-bg); }
.ogp-route-item.is-next .ogp-route-go { color: var(--ogp-primary); }
.ogp-next-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ogp-primary); border-radius: var(--ogp-r); background: linear-gradient(180deg, #f3f7ff, #fff); margin-bottom: var(--ogp-sp-3); }
.ogp-next-card .ogp-next-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ogp-primary); }
.ogp-next-card b { display: block; font-size: var(--ogp-fs-lg); font-weight: 600; }
.ogp-next-card span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-actionbar, div.ogp-actionbar.dontprint { display: none; }
@media (max-width: 767px) {
  .ogp-actionbar, div.ogp-actionbar.dontprint { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(var(--ogp-bottom-h) + env(safe-area-inset-bottom, 0px)); z-index: 940; padding: 8px 12px; background: var(--ogp-actionbar-bg); border-top: 1px solid var(--ogp-border); box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06); }
  .ogp-actionbar .btn { flex: 1 1 auto; height: 44px; font-size: var(--ogp-fs-md); }
  .ogp-actionbar .btn.btn-icon-only { flex: 0 0 44px; width: 44px; padding: 0; }
  .ogp-has-actionbar .ogp-main { padding-bottom: calc(var(--ogp-bottom-h) + 68px + env(safe-area-inset-bottom, 0px)); }
  body.ogp-standalone.ogp-has-actionbar { padding-bottom: 76px !important; }
  body.ogp-standalone .ogp-actionbar { bottom: 0; }
}

/* 15b. Page layouts ------------------------------------------------------- */
.ogp-pumper-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ogp-sp-4); align-items: start; }
@media (min-width: 1100px) { .ogp-pumper-grid { grid-template-columns: minmax(360px, 1.4fr) minmax(320px, 1fr); } }
.ogp-pumper-grid .ogp-panel { margin-bottom: var(--ogp-sp-3); }
.ogp-pumper-grid .tm-min-wrap { margin: 0 0 var(--ogp-sp-3) !important; }
.ogp-pumper-side { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ogp-pumper .ogp-route { max-height: 62vh; overflow-y: auto; }
@media (max-width: 767px) { .ogp-pumper .ogp-route { max-height: none; } }
.ogp-entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ogp-sp-2); }
.ogp-report-body > h4 + div .table-full, .ogp-report-body > h4 + .table-full { border-radius: 0 0 var(--ogp-r) var(--ogp-r); }
.ogp-side-brand-text .ogp-env { vertical-align: 0; }
.ogp-login-brand-top .ogp-env, .ogp-login-brand-top span.ogp-env { display: inline-flex; vertical-align: 1px; }
.ogp-entry #add_RT, .ogp-entry #add_WT { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin: 2px 0; white-space: nowrap; font: inherit; font-size: var(--ogp-fs-sm); font-weight: 500; color: var(--ogp-fg); background: var(--ogp-surface); border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); cursor: pointer; }
.ogp-entry #add_RT:hover, .ogp-entry #add_WT:hover { background: var(--ogp-surface-2); }

/* 16. Standalone pages: sub-bar + Gauge Entry ------------------------------ */
body.ogp-standalone { display: block; }
.ogp-subbar { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: var(--ogp-sp-3); min-height: 52px; padding: 6px var(--ogp-sp-4); background: var(--ogp-side-bg); color: var(--ogp-side-fg); border-bottom: 1px solid var(--ogp-side-line); }
.ogp-subbar .ogp-subbar-back { width: 34px; height: 34px; border-radius: var(--ogp-r); border: 1px solid var(--ogp-side-kbd); background: var(--ogp-side-search-bg); color: var(--ogp-side-fg-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; text-decoration: none; }
.ogp-subbar .ogp-subbar-back:hover { background: var(--ogp-side-hover-2); }
.ogp-subbar-title { min-width: 0; line-height: 1.2; }
.ogp-subbar-title .ogp-eyebrow { color: var(--ogp-side-muted); margin-bottom: 1px; }
.ogp-subbar-title b { display: block; font-size: var(--ogp-fs-md); font-weight: 600; color: var(--ogp-side-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-subbar-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ogp-subbar-meta .ogp-pill { background: var(--ogp-side-hover); border-color: var(--ogp-side-kbd); color: var(--ogp-side-muted); }
.ogp-subbar-meta .ogp-pill b { color: var(--ogp-side-fg-strong); }
.ogp-subbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ogp-subbar-actions .btn { background: var(--ogp-side-hover); border-color: var(--ogp-side-kbd); color: var(--ogp-side-fg-strong); }
.ogp-subbar-actions .btn:hover { background: var(--ogp-side-hover-2); }
.ogp-subbar-actions .btn-primary { background: var(--ogp-primary); border-color: var(--ogp-primary); color: var(--ogp-primary-fg); }
.ogp-subbar-actions .btn-primary:hover { background: var(--ogp-primary-hover); border-color: var(--ogp-primary-hover); }
@media (max-width: 767px) { .ogp-subbar { padding: 6px 10px; gap: 8px; } .ogp-subbar-meta .ogp-pill-secondary, .ogp-subbar-actions .ogp-hide-sm { display: none; } }
.ogp-entry .container-fluid { padding-top: var(--ogp-sp-3) !important; }
.ogp-entry .well { padding: var(--ogp-sp-3); }
.ogp-entry h4 { font-size: var(--ogp-fs-md); margin: 0 0 4px; }
.ogp-entry h5 { font-size: var(--ogp-fs-sm); font-weight: 600; color: var(--ogp-fg-muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 4px; }
.ogp-entry .row[style*="background-color"] { border-radius: var(--ogp-r); margin-left: 0; margin-right: 0; padding: 6px 4px !important; margin-bottom: 4px; border-left: 3px solid var(--ogp-border-strong); }
.ogp-entry .row[style*="#EEEEEE"], .ogp-entry .row[style*="#eeeeee"] { border-left-color: var(--ogp-oil-ink); background-color: var(--ogp-oil) !important; }
.ogp-entry .row[style*="#FFFFE1"], .ogp-entry .row[style*="#ffffe1"] { border-left-color: var(--ogp-gas-ink); background-color: var(--ogp-gas) !important; }
.ogp-entry .row[style*="#E6F2FF"], .ogp-entry .row[style*="#e6f2ff"] { border-left-color: var(--ogp-water-ink); background-color: var(--ogp-water) !important; }
.ogp-entry .row[style*="#F5F3D4"], .ogp-entry .row[style*="#f5f3d4"], .ogp-entry .row[style*="#acd1f9"] { border-left-color: var(--ogp-inj-ink); background-color: var(--ogp-inj) !important; }
.ogp-entry .row[style*="#e6ffe6"] { border-left-color: var(--ogp-st-on); background-color: var(--ogp-well) !important; }
.ogp-entry input.form-control, .ogp-entry input[type="number"], .ogp-entry input[type="text"], .ogp-entry input[type="time"] { height: 32px; font-family: var(--ogp-font-mono); font-size: var(--ogp-fs-base) !important; text-align: right; border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); padding: 0 6px; background: var(--ogp-surface); }
.ogp-entry input[readonly], .ogp-entry input[tabindex="-1"] { background: var(--ogp-surface-2); color: var(--ogp-fg); font-weight: 600; border-color: var(--ogp-border); }
.ogp-entry input:focus { outline: none; border-color: var(--ogp-accent); box-shadow: 0 0 0 3px var(--ogp-ring); }
.ogp-entry select { height: 32px; font-size: var(--ogp-fs-base) !important; border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); background: var(--ogp-surface); padding: 0 6px; }
.ogp-entry small { color: var(--ogp-fg-muted); font-size: var(--ogp-fs-xs); }
.ogp-entry textarea { border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); font: inherit; font-size: var(--ogp-fs-base); padding: 6px 8px; }
.ogp-entry .expandable-section { border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); margin: 8px 0; }
.ogp-entry .section-header { padding: 8px 12px; background: var(--ogp-surface-2); cursor: pointer; font-weight: 600; font-size: var(--ogp-fs-base); }
.ogp-entry .section-header h5, .ogp-entry .section-header a { color: var(--ogp-fg); text-transform: none; letter-spacing: 0; font-size: var(--ogp-fs-md); }
.ogp-entry .panel-title { font-size: var(--ogp-fs-md); }
.ogp-entry .table-responsive { border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); }
.ogp-entry .table-condensed > tbody > tr > td, .ogp-entry .table-condensed > thead > tr > th { padding: 3px 5px; }
.ogp-entry button.btn-primary.btn-lg { height: 40px; padding: 0 28px; }
.ogp-entry .navbar { display: none; }
.ogp-entry .btn { white-space: nowrap; }
@media (max-width: 767px) {
  .ogp-entry input.form-control, .ogp-entry input[type="number"], .ogp-entry input[type="text"], .ogp-entry input[type="time"], .ogp-entry select { height: 40px; font-size: var(--ogp-fs-md) !important; min-width: 64px; }
  .ogp-entry .col-xs-3, .ogp-entry .col-xs-9 { padding-left: 4px; padding-right: 4px; }
  .ogp-entry .well.col-xs-5 { width: 100%; }
}

/* 17. Reports catalog, Wells Down summary, Login split --------------------- */
.ogp-reports { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ogp-sp-3); align-items: start; }
@media (min-width: 1000px) { .ogp-reports { grid-template-columns: 280px minmax(0, 1fr); } .ogp-reports.is-report-open { grid-template-columns: 220px minmax(0, 1fr); } }
.ogp-catalog { background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); overflow: hidden; }
.ogp-catalog-group { padding: 8px 10px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ogp-fg-subtle); border-top: 1px solid var(--ogp-border); }
.ogp-catalog-group:first-child { border-top: 0; }
.ogp-catalog-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ogp-fg); border-left: 3px solid transparent; }
.ogp-catalog-item .ogp-ic { color: var(--ogp-fg-subtle); margin-top: 2px; }
.ogp-catalog-item b { display: block; font-weight: 500; font-size: var(--ogp-fs-base); }
.ogp-catalog-item span { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-catalog-item:hover { background: var(--ogp-surface-2); }
.ogp-catalog-item.is-active { background: var(--ogp-primary-bg); border-left-color: var(--ogp-primary); }
.ogp-catalog-item.is-active .ogp-ic { color: var(--ogp-primary); }
.is-report-open .ogp-catalog-item span { display: none; }
.ogp-report-body { min-height: 120px; }
.ogp-report-body > h4 { font-size: var(--ogp-fs-md); margin: 0; padding: 8px 12px; background: var(--ogp-surface-2); border: 1px solid var(--ogp-border); border-bottom: 0; border-radius: var(--ogp-r) var(--ogp-r) 0 0; }
.ogp-report-body .ogp-state { min-height: 260px; }
.ogp-wd-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ogp-sp-3); margin-bottom: var(--ogp-sp-3); }
@media (min-width: 900px) { .ogp-wd-summary { grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr) minmax(220px, 1fr); } }
.ogp-wd-summary .ogp-panel { margin: 0; }
td.ogp-days { position: relative; }
td.ogp-days .ogp-days-bar { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--ogp-surface-3); overflow: hidden; }
td.ogp-days .ogp-days-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--ogp-st-attn); }
td.ogp-days.is-long .ogp-days-bar i { background: var(--ogp-st-down); }
.ogp-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ogp-bg); }
@media (min-width: 900px) { .ogp-login { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr); } }
.ogp-login-brand { background: var(--ogp-side-bg); color: var(--ogp-fg-on-dark); padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 160px; }
.ogp-login-brand::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 20% 110%, var(--ogp-login-glow), transparent 60%); pointer-events: none; }
.ogp-login-brand-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.ogp-login-brand-top b { color: var(--ogp-side-fg-strong); font-size: var(--ogp-fs-md); }
.ogp-login-brand-top span { color: var(--ogp-side-muted); font-size: var(--ogp-fs-xs); display: block; }
.ogp-login-hero { position: relative; z-index: 1; max-width: 46ch; }
.ogp-login-hero h2 { color: var(--ogp-side-fg-strong); font-size: var(--ogp-fs-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; }
.ogp-login-hero p { color: var(--ogp-side-fg); font-size: var(--ogp-fs-md); margin: 0; }
.ogp-login-art { position: absolute; right: -20px; bottom: -10px; width: 46%; max-width: 420px; opacity: .55; pointer-events: none; }
.ogp-login-art svg { width: 100%; height: auto; display: block; stroke: var(--ogp-side-accent); }
.ogp-login-foot { position: relative; z-index: 1; font-size: var(--ogp-fs-xs); color: var(--ogp-side-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.ogp-login-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.ogp-login-card { width: 100%; max-width: 380px; }
.ogp-login-card .ogp-auth-logo { display: flex; margin-bottom: var(--ogp-sp-4); }
.ogp-login-card .ogp-auth-logo img { max-height: 56px; max-width: 100%; height: auto; }
.ogp-login-card h1 { font-size: var(--ogp-fs-xl); margin: 0 0 2px; }
.ogp-login-card .ogp-auth-sub { color: var(--ogp-fg-muted); font-size: var(--ogp-fs-sm); margin: 0 0 var(--ogp-sp-4); text-align: left; }
.ogp-login-card .form-control { height: 38px; line-height: 36px; font-size: var(--ogp-fs-md) !important; }
.ogp-login-card .btn-lg { height: 40px; margin-top: var(--ogp-sp-2); }
.ogp-login-card .ogp-auth-foot { margin-top: var(--ogp-sp-4); font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); }
@media (max-width: 899px) { .ogp-login-brand { padding: 18px 20px; } .ogp-login-hero h2 { font-size: var(--ogp-fs-xl); } .ogp-login-hero p { font-size: var(--ogp-fs-sm); } .ogp-login-art { display: none; } .ogp-login-foot { display: none; } }
.ogp-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ogp-sp-6) var(--ogp-sp-4); background: var(--ogp-bg); }
.ogp-auth-card { width: 100%; max-width: 380px; background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r-lg); box-shadow: var(--ogp-shadow-sm); padding: var(--ogp-sp-6); }
.ogp-auth-title { text-align: center; font-size: var(--ogp-fs-lg); font-weight: 600; margin: 0 0 2px; }
.ogp-auth-sub { text-align: center; font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); margin: 0 0 var(--ogp-sp-4); }
.ogp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ogp-sp-2); margin-bottom: var(--ogp-sp-4); }
.ogp-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-height: 58px; background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r); color: var(--ogp-fg); text-decoration: none; box-shadow: var(--ogp-shadow-sm); transition: border-color var(--ogp-t); }
.ogp-tile:hover { border-color: var(--ogp-primary); text-decoration: none; color: var(--ogp-fg); }
.ogp-tile-title { font-weight: 600; font-size: var(--ogp-fs-base); display: flex; align-items: center; gap: 6px; }
.ogp-tile-hint { font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); }
.ogp-section-title { font-size: var(--ogp-fs-xs); font-weight: 600; color: var(--ogp-fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--ogp-sp-3) 0 var(--ogp-sp-2); }

/* 18. Utilities ------------------------------------------------------------ */
.ogp-flex { display: flex; align-items: center; gap: var(--ogp-sp-2); flex-wrap: wrap; }
.ogp-stack { display: flex; flex-direction: column; gap: var(--ogp-sp-2); }
.ogp-grow { flex: 1 1 auto; }
.ogp-muted { color: var(--ogp-fg-muted); } .ogp-subtle { color: var(--ogp-fg-subtle); }
.ogp-small { font-size: var(--ogp-fs-sm); } .ogp-xs { font-size: var(--ogp-fs-xs); }
.ogp-mono { font-family: var(--ogp-font-mono); }
.ogp-nowrap { white-space: nowrap; } .ogp-right { text-align: right; } .ogp-center { text-align: center; }
.ogp-mt-1 { margin-top: var(--ogp-sp-1); } .ogp-mt-2 { margin-top: var(--ogp-sp-2); } .ogp-mt-3 { margin-top: var(--ogp-sp-3); } .ogp-mt-4 { margin-top: var(--ogp-sp-4); }
.ogp-mb-1 { margin-bottom: var(--ogp-sp-1); } .ogp-mb-2 { margin-bottom: var(--ogp-sp-2); } .ogp-mb-3 { margin-bottom: var(--ogp-sp-3); } .ogp-mb-4 { margin-bottom: var(--ogp-sp-4); }
.ogp-hidden { display: none !important; }
.ogp-kbd-hint { font-family: var(--ogp-font-mono); font-size: var(--ogp-fs-xs); padding: 1px 4px; border: 1px solid var(--ogp-border-strong); border-bottom-width: 2px; border-radius: 3px; background: var(--ogp-surface-2); }
@media (max-width: 767px) { .ogp-hide-sm { display: none !important; } }
@media (min-width: 768px) { .ogp-only-sm { display: none !important; } }
@media (max-width: 1199px) { .ogp-hide-md { display: none !important; } }

/* 19. Legacy shims --------------------------------------------------------- */
.container-fluid, .container-fluid-spacious, .container { padding-left: var(--ogp-sp-4); padding-right: var(--ogp-sp-4); }
.container-fluid-spacious { padding-left: var(--ogp-sp-5); padding-right: var(--ogp-sp-5); }
.row { margin-left: -8px; margin-right: -8px; }
.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.footer, footer.footer { position: static !important; height: auto !important; line-height: var(--ogp-lh) !important; margin-top: auto; padding: var(--ogp-sp-3) var(--ogp-sp-5); background: var(--ogp-surface); border-top: 1px solid var(--ogp-border); color: var(--ogp-fg-muted); font-size: var(--ogp-fs-sm); text-align: left !important; }
.footer .row { margin: 0; } .footer [class*="col-"] { padding: 0; float: none; }
.ogp-footer-inner { display: flex; flex-wrap: wrap; gap: var(--ogp-sp-2) var(--ogp-sp-5); align-items: center; justify-content: space-between; }
.container-fluid > .row[style*="text-align: center"] h4 { text-align: left; }
.form-control[style*="font-size"] { font-size: var(--ogp-fs-base) !important; }
.form-inline label[style*="padding-right"] { margin: 0 6px 0 0; }
.btn[style*="width: 80px"] { width: auto !important; }
.btn-toolbar .btn[style*="margin-top"] { margin-top: 0 !important; }
.btn-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ogp-sp-2) var(--ogp-sp-3); margin: 0 0 var(--ogp-sp-3); }
.btn-toolbar > [class*="col-"] { float: none; width: auto; flex: 0 1 auto; padding: 0; }
.btn-toolbar-item { display: inline-flex; align-items: center; margin: 0 6px 0 0; vertical-align: middle; }
.btn-toolbar-item.has-feedback .form-control-feedback { margin-top: 0 !important; }
.btn-toolbar-item[style*="float"] { float: none !important; }
.btn-toolbar-item[style*="margin-top"] { margin-top: 0 !important; margin-left: 0 !important; }
form.form-inline.well { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ogp-sp-2); padding: var(--ogp-sp-2) var(--ogp-sp-3) !important; margin: 0 0 var(--ogp-sp-3) !important; }
form.form-inline.well > [class*="col-"] { float: none; width: auto; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--ogp-sp-2); align-items: center; }
form.form-inline.well > [class*="col-"]:last-child { margin-left: auto; }
div.table { display: block; width: 100%; }
div.dontprint { display: block; }
.printonly h4 { font-size: var(--ogp-fs-md); }
.well h4[style*="capitalize"] { margin: 0; }
caption h4 { text-align: left; }

/* 21. Pass B: trend charts, sparklines, column chooser, keyboard rows, pumper hero, entry hints, login brand */
.ogp-trend { position: relative; padding: 4px 0 2px; }
.ogp-trend-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 4px 12px; border-top: 1px solid var(--ogp-border); min-height: 52px; }
.ogp-trend-row:first-child { border-top: 0; }
.ogp-trend-lbl { min-width: 0; }
.ogp-trend-lbl b { display: block; font-size: var(--ogp-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ogp-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-trend-lbl b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c, var(--ogp-primary)); margin-right: 6px; vertical-align: 0; }
.ogp-trend-lbl .v { display: block; font-size: var(--ogp-fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.15; }
.ogp-trend-lbl .v small { font-size: var(--ogp-fs-xs); font-weight: 500; color: var(--ogp-fg-muted); margin-left: 3px; }
.ogp-trend-lbl .s { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ogp-trend-lbl .s i { font-style: normal; } .ogp-trend-lbl .s i.up { color: var(--ogp-st-on); } .ogp-trend-lbl .s i.down { color: var(--ogp-st-down); }
.ogp-trend-svg { display: block; width: 100%; height: 44px; overflow: visible; }
.ogp-trend-svg .area { fill: var(--c, var(--ogp-primary)); fill-opacity: .10; }
.ogp-trend-svg .line { fill: none; stroke: var(--c, var(--ogp-primary)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ogp-trend-svg .bar { fill: var(--c, var(--ogp-primary)); fill-opacity: .55; }
.ogp-trend-svg .bar.is-zero { fill-opacity: .12; }
.ogp-trend-svg .dot { fill: var(--c, var(--ogp-primary)); stroke: var(--ogp-surface); stroke-width: 1.5; }
.ogp-trend-svg .cur { stroke: var(--ogp-fg-subtle); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; }
.ogp-trend-svg .base { stroke: var(--ogp-border); stroke-width: 1; }
.ogp-trend.is-hover .ogp-trend-svg .cur { opacity: 1; }
.ogp-trend-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ogp-tip-bg); color: var(--ogp-tip-fg); border-radius: var(--ogp-r); padding: 6px 9px; font-size: var(--ogp-fs-xs); box-shadow: var(--ogp-shadow-sm); min-width: 150px; display: none; }
.ogp-trend.is-hover .ogp-trend-tip { display: block; }
.ogp-trend-tip b { display: block; font-weight: 600; margin-bottom: 3px; color: var(--ogp-tip-fg); }
.ogp-trend-tip div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; color: var(--ogp-tip-muted); }
.ogp-trend-tip div span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--c); margin-right: 5px; vertical-align: 1px; }
.ogp-trend-axis { display: flex; justify-content: space-between; padding: 2px 12px 6px 156px; font-size: 10.5px; color: var(--ogp-fg-subtle); font-variant-numeric: tabular-nums; }
.ogp-trend-skel { padding: 10px 12px; display: grid; gap: 10px; }
.ogp-trend-skel i { display: block; height: 42px; border-radius: var(--ogp-r); background: linear-gradient(90deg, var(--ogp-surface-2), var(--ogp-surface-3), var(--ogp-surface-2)); background-size: 200% 100%; animation: ogp-shimmer 1.2s linear infinite; }
@keyframes ogp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ogp-trend-err { padding: 14px 12px; font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); }
@media (max-width: 767px) { .ogp-trend-row { grid-template-columns: 96px minmax(0, 1fr); padding: 4px 8px; } .ogp-trend-lbl .v { font-size: var(--ogp-fs-md); } .ogp-trend-axis { padding-left: 112px; } }

.ogp-kpi-avg { font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ogp-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 40px; align-items: end; margin-top: 6px; }
.ogp-hour { display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.ogp-hour i { display: block; flex: 1 1 0; height: var(--h, 0%); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--ogp-surface-3); }
.ogp-hour i.t { background: var(--ogp-st-on); } .ogp-hour i.p { background: var(--ogp-border-strong); }
.ogp-hours-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ogp-fg-subtle); margin-top: 3px; }

.ogp-spark { display: inline-block; width: 64px; height: 18px; vertical-align: middle; margin-left: auto; flex: 0 0 auto; }
.ogp-spark svg { display: block; overflow: visible; }
.ogp-spark .ogp-spark-line { fill: none; stroke: var(--ogp-fg-muted); stroke-width: 1.2; stroke-linejoin: round; }
.ogp-spark .ogp-spark-area { fill: var(--ogp-fg-muted); fill-opacity: .12; }
.ogp-spark .ogp-spark-dot { fill: var(--ogp-primary); }
tr.is-down .ogp-spark .ogp-spark-line { stroke: var(--ogp-st-down); } tr.is-down .ogp-spark .ogp-spark-area { fill: var(--ogp-st-down); }
tr.is-attn .ogp-spark .ogp-spark-line { stroke: var(--ogp-st-attn); } tr.is-attn .ogp-spark .ogp-spark-area { fill: var(--ogp-st-attn); }
.ogp-loc-name { display: flex; align-items: center; gap: 6px; }
.ogp-loc-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogp-rowactions { display: inline-flex; gap: 2px; margin-left: 2px; opacity: 0; transition: opacity var(--ogp-t); }
.ogp-rowactions a { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--ogp-fg-muted); border: 1px solid transparent; }
.ogp-rowactions a:hover { color: var(--ogp-primary); background: var(--ogp-surface); border-color: var(--ogp-border-strong); text-decoration: none; }
.ogp-rowactions .ogp-ic { width: 14px; height: 14px; }
tr:hover .ogp-rowactions, tr.is-focus .ogp-rowactions, tr.is-selected .ogp-rowactions, .ogp-rowactions:focus-within { opacity: 1; }
@media (hover: none) { .ogp-rowactions { opacity: 1; } }
.ogp-grid tbody tr.is-focus > td { background: var(--ogp-primary-bg) !important; }
.ogp-grid tbody tr.is-focus > td:first-child { box-shadow: inset 3px 0 0 var(--ogp-primary); }
.ogp-kbd-hint { display: none; gap: 8px; align-items: center; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-subtle); margin-left: 8px; }
.ogp-kbd-hint kbd { font: 10.5px var(--ogp-font-mono); padding: 1px 5px; border: 1px solid var(--ogp-border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--ogp-surface); color: var(--ogp-fg-muted); }
@media (min-width: 1100px) and (hover: hover) { .ogp-kbd-hint { display: inline-flex; } }

.ogp-pop { position: absolute; z-index: 960; min-width: 220px; max-height: 60vh; overflow: auto; background: var(--ogp-surface); border: 1px solid var(--ogp-border-strong); border-radius: var(--ogp-r); box-shadow: 0 10px 30px rgba(16, 24, 40, .14); padding: 6px; }
.ogp-pop[hidden] { display: none; }
.ogp-pop-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px; font-size: var(--ogp-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ogp-fg-subtle); }
.ogp-pop-title button { font: inherit; background: none; border: 0; color: var(--ogp-primary); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.ogp-pop label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; font-size: var(--ogp-fs-sm); cursor: pointer; margin: 0; }
.ogp-pop label:hover { background: var(--ogp-surface-2); }
.ogp-pop label input { margin: 0; }
.ogp-pop label .g { margin-left: auto; font-size: 10.5px; color: var(--ogp-fg-subtle); text-transform: uppercase; letter-spacing: .04em; }
.ogp-toggle.is-on { color: var(--ogp-primary); }
.ogp-views { position: relative; }

.ogp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ogp-sp-4); align-items: center; padding: var(--ogp-sp-3) var(--ogp-sp-4); margin-bottom: var(--ogp-sp-3); background: linear-gradient(135deg, var(--ogp-hero-a) 0%, var(--ogp-hero-b) 55%, var(--ogp-hero-c) 140%); color: #fff; border-radius: var(--ogp-r-lg); box-shadow: var(--ogp-shadow-sm); position: relative; overflow: hidden; }
.ogp-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 200px at 100% 0%, var(--ogp-hero-glow), transparent 60%); pointer-events: none; }
.ogp-hero > * { position: relative; z-index: 1; }
.ogp-ring { width: 78px; height: 78px; position: relative; flex: 0 0 auto; }
.ogp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ogp-ring circle { fill: none; stroke-width: 7; }
.ogp-ring .track { stroke: rgba(255, 255, 255, .14); }
.ogp-ring .val { stroke: var(--ogp-st-on); stroke-linecap: round; stroke-dasharray: var(--d, 0) 1000; transition: stroke-dasharray 500ms ease; }
.ogp-ring .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ogp-ring .txt b { font-size: var(--ogp-fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ogp-ring .txt span { font-size: 10px; color: rgba(255, 255, 255, .7); margin-top: 2px; }
.ogp-hero-main { min-width: 0; }
.ogp-hero-main .ogp-eyebrow { color: rgba(255, 255, 255, .65); }
.ogp-hero-main h2 { margin: 2px 0 2px; font-size: var(--ogp-fs-2xl); font-weight: 600; letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogp-hero-main h2 small { font-size: var(--ogp-fs-sm); font-weight: 500; color: rgba(255, 255, 255, .7); margin-left: 6px; font-family: var(--ogp-font-mono); }
.ogp-hero-main p { margin: 0; font-size: var(--ogp-fs-sm); color: rgba(255, 255, 255, .75); }
.ogp-hero-main p .ogp-flag { vertical-align: 1px; }
.ogp-hero-stats { display: flex; gap: 8px; }
.ogp-hero-stat { padding: 6px 12px; border-radius: var(--ogp-r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); min-width: 74px; }
.ogp-hero-stat b { display: block; font-size: var(--ogp-fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ogp-hero-stat b.is-down { color: #ff8a80; }
.ogp-hero-stat span { display: block; font-size: var(--ogp-fs-xs); color: rgba(255, 255, 255, .7); white-space: nowrap; }
.ogp-hero-cta { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ogp-hero .btn-primary { background: var(--ogp-primary); border-color: var(--ogp-primary); color: var(--ogp-primary-fg); height: 38px; padding: 0 16px; font-size: var(--ogp-fs-md); }
.ogp-hero .btn-primary:hover { background: var(--ogp-primary-hover); border-color: var(--ogp-primary-hover); }
.ogp-hero .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; height: 38px; }
.ogp-hero .btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ogp-hero.is-complete { background: linear-gradient(135deg, var(--ogp-hero-a), var(--ogp-hero-ok-b) 140%); }
@media (max-width: 899px) { .ogp-hero { grid-template-columns: auto minmax(0, 1fr); } .ogp-hero-stats { grid-column: 1 / -1; } .ogp-hero-stat { flex: 1 1 0; min-width: 0; } }
@media (max-width: 480px) { .ogp-hero { padding: 12px; gap: 12px; } .ogp-ring { width: 64px; height: 64px; } .ogp-hero-main h2 { font-size: var(--ogp-fs-xl); white-space: normal; } .ogp-hero .btn-primary { flex: 1 1 auto; } }
.ogp-seg-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--ogp-r); background: var(--ogp-surface-3); }
.ogp-seg-tabs button { font: inherit; font-size: var(--ogp-fs-xs); font-weight: 500; padding: 3px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--ogp-fg-muted); cursor: pointer; white-space: nowrap; }
.ogp-seg-tabs button .n { font-family: var(--ogp-font-mono); margin-left: 4px; color: var(--ogp-fg-subtle); }
.ogp-seg-tabs button.is-active { background: var(--ogp-surface); color: var(--ogp-fg); box-shadow: var(--ogp-shadow-sm); }
.ogp-route.is-seg-remaining li.is-done, .ogp-route.is-seg-done li:not(.is-done) { display: none; }
.ogp-route li { display: block; }
.ogp-route-empty { display: none; padding: 14px 12px; font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); }

.ogp-hint { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: var(--ogp-hint-bg); border: 1px solid var(--ogp-border); font-size: 11px !important; color: var(--ogp-fg-muted) !important; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; }
.ogp-hint b { font-family: var(--ogp-font-mono); font-weight: 500; color: var(--ogp-fg); }
.ogp-hint.is-diff b { color: var(--ogp-st-attn); }
@media (max-width: 767px) { .ogp-hint { display: block; margin: 4px 0 0; width: max-content; max-width: 100%; } }

.ogp-brandmark { display: flex; align-items: center; gap: 10px; margin-bottom: var(--ogp-sp-4); }
.ogp-brandmark .ogp-side-mark { width: 40px; height: 40px; border-radius: 10px; }
.ogp-brandmark .ogp-side-mark .ogp-ic { width: 22px; height: 22px; }
.ogp-brandmark .w { font-size: var(--ogp-fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.ogp-brandmark .w small { display: block; font-size: var(--ogp-fs-xs); font-weight: 500; color: var(--ogp-fg-subtle); letter-spacing: 0; margin-top: 3px; }
.ogp-login-brand { background-image: linear-gradient(var(--ogp-login-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ogp-login-grid) 1px, transparent 1px); background-size: 28px 28px; background-color: var(--ogp-side-bg); }
.ogp-login-points { position: relative; z-index: 1; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; max-width: 46ch; }
.ogp-login-points li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--ogp-fs-sm); color: var(--ogp-side-fg); }
.ogp-login-points li .ogp-ic { color: var(--ogp-side-accent); margin-top: 2px; flex: 0 0 auto; }
@media (max-width: 899px) { .ogp-login-points { display: none; } }

@media (max-width: 999px) { .ogp-reports > div { order: -1; } }
.ogp-side-link .ogp-side-n { margin-left: auto; font-family: var(--ogp-font-mono); font-size: 10.5px; padding: 0 6px; border-radius: 9px; background: var(--ogp-side-cnt-bg); color: var(--ogp-side-muted); }

@media (max-width: 480px) { .ogp-seg.ogp-seg-wrap { flex-direction: column; align-items: stretch; } .ogp-seg.ogp-seg-wrap label { width: 100%; text-align: left; } }
.ogp-spark { width: 56px; }
/* 22. Interface themes ------------------------------------------------------
   Six complete looks, chosen on the login page (cookie ogp_ui, ?ui=<id> for QA) and switchable
   from the user menu. Every theme is a token set; only Horizon also changes the frame (navigation
   across the top at >= 1200px). Markup is identical for all of them. */
h1, h2, .ogp-page-title, .ogp-login-hero h2, .ogp-hero-main h2, .ogp-login-card h1 { font-family: var(--ogp-font-display); }
.ogp-side-user-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; border: 0; background: transparent; color: var(--ogp-side-fg); font: inherit; font-size: var(--ogp-fs-sm); border-radius: var(--ogp-r); cursor: pointer; text-align: left; }
.ogp-side-user-menu button b { font-weight: 600; color: var(--ogp-side-fg-strong); margin-left: auto; }

/* picker (login) + in-app dialog */
.ogp-uipick { border: 0; padding: 0; margin: var(--ogp-sp-4) 0 0; min-width: 0; }
.ogp-uipick-head { display: block; padding: 0; margin: 0 0 8px; }
.ogp-uipick-head span { display: block; font-size: var(--ogp-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ogp-fg-subtle); }
.ogp-uipick-head small { display: block; font-size: var(--ogp-fs-xs); color: var(--ogp-fg-muted); margin-top: 2px; }
.ogp-uipick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ogp-uipick-item { position: relative; display: block; margin: 0; padding: 6px 6px 7px; border: 1px solid var(--ogp-border); border-radius: var(--ogp-r-lg); background: var(--ogp-surface); cursor: pointer; transition: border-color var(--ogp-t), box-shadow var(--ogp-t); }
.ogp-uipick-item:hover { border-color: var(--ogp-border-strong); }
.ogp-uipick-item.is-active { border-color: var(--ogp-primary); box-shadow: 0 0 0 2px var(--ogp-primary-bg); }
.ogp-uipick-item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ogp-uipick-item:focus-within { outline: 2px solid var(--ogp-accent); outline-offset: 2px; }
.ogp-uipick-item b { display: block; font-size: var(--ogp-fs-sm); font-weight: 600; margin-top: 6px; color: var(--ogp-fg); }
.ogp-uipick-item small { display: block; font-size: 10.5px; color: var(--ogp-fg-muted); line-height: 1.3; }
.ogp-uipick-item.is-active b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ogp-primary); margin-left: 6px; vertical-align: 1px; }
.ogp-uipick-prev { position: relative; display: block; height: 58px; border-radius: 4px; overflow: hidden; background: var(--p-bg); border: 1px solid rgba(0, 0, 0, .06); }
.ogp-uipick-prev i { position: absolute; display: block; }
.ogp-uipick-prev .s { left: 0; top: 0; bottom: 0; width: 24%; background: var(--p-side); }
.ogp-uipick-prev .t { left: 24%; right: 0; top: 0; height: 9px; background: var(--p-surface); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ogp-uipick-prev .c1 { left: 29%; top: 15px; width: 30%; height: 14px; background: var(--p-surface); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.ogp-uipick-prev .c2 { left: 63%; top: 15px; width: 30%; height: 14px; background: var(--p-surface); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.ogp-uipick-prev .c3 { left: 29%; top: 34px; width: 64%; height: 18px; background: var(--p-surface); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.ogp-uipick-prev .b { left: 33%; top: 39px; width: 14%; height: 8px; border-radius: 2px; background: var(--p-primary); }
.ogp-uipick-prev .l1 { left: 51%; top: 40px; width: 36%; height: 2px; background: var(--p-fg); opacity: .35; }
.ogp-uipick-prev .l2 { left: 51%; top: 45px; width: 26%; height: 2px; background: var(--p-accent); opacity: .9; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .s { width: 100%; height: 11px; bottom: auto; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .t { display: none; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .c1 { left: 6%; top: 17px; width: 42%; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .c2 { left: 52%; top: 17px; width: 42%; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .c3 { left: 6%; top: 36px; width: 88%; height: 16px; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .b { left: 10%; top: 40px; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .l1 { left: 30%; top: 41px; width: 40%; }
.ogp-uipick-item[data-nav="top"] .ogp-uipick-prev .l2 { left: 30%; top: 46px; width: 28%; }
.ogp-login-card { max-width: 440px; }
@media (max-width: 420px) { .ogp-uipick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ogp-uidialog { position: fixed; inset: 0; z-index: 1210; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ogp-overlay-2); }
.ogp-uidialog[hidden] { display: none; }
.ogp-uidialog-box { width: 100%; max-width: 560px; background: var(--ogp-surface); border: 1px solid var(--ogp-border); border-radius: var(--ogp-r-lg); box-shadow: var(--ogp-shadow-md); padding: 14px 16px 16px; }
.ogp-uidialog-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.ogp-uidialog-head b { display: block; font-size: var(--ogp-fs-lg); font-weight: 600; }
.ogp-uidialog-head span { display: block; font-size: var(--ogp-fs-sm); color: var(--ogp-fg-muted); }
.ogp-uidialog-head .ogp-icon-btn { margin-left: auto; }
.ogp-uidialog .ogp-uipick { margin-top: 8px; }
.ogp-uidialog .ogp-uipick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .ogp-uidialog .ogp-uipick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dark-theme shims for the legacy layer */
html[data-ogp-dark] { color-scheme: dark; }
html[data-ogp-dark] .ogp-uipick-prev { border-color: rgba(255, 255, 255, .12); }
html[data-ogp-dark] .ogp-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
html[data-ogp-dark] .ogp-trend-skel i { background: linear-gradient(90deg, var(--ogp-surface-2), var(--ogp-surface-3), var(--ogp-surface-2)); background-size: 200% 100%; }
html[data-ogp-dark] .btn-primary, html[data-ogp-dark] .ogp-btn-primary { color: var(--ogp-primary-fg); }
html[data-ogp-dark] img[src$=".gif"], html[data-ogp-dark] .glyphicon { filter: none; }
html[data-ogp-dark] .ogp-spark .ogp-spark-line { stroke: var(--ogp-fg-muted); }
html[data-ogp-dark] .ogp-env { background: rgba(255, 192, 67, .18); }
html[data-ogp-dark] .modal-content, html[data-ogp-dark] .dropdown-menu, html[data-ogp-dark] .datepicker { background: var(--ogp-surface); color: var(--ogp-fg); border-color: var(--ogp-border-strong); }
html[data-ogp-dark] .modal-header, html[data-ogp-dark] .modal-footer { border-color: var(--ogp-border); }
html[data-ogp-dark] .ogp-entry .row[style*="background-color"] { border-left-width: 3px; }
html[data-ogp-dark] .close { color: var(--ogp-fg); text-shadow: none; opacity: .7; }
html[data-ogp-dark] .ogp-grid tbody tr.is-focus > td { background: var(--ogp-primary-bg) !important; }
html[data-ogp-dark] .ogp-entry .row[style*="white"], html[data-ogp-dark] .ogp-entry .row[style*="#F5F5F5"], html[data-ogp-dark] .ogp-entry .row[style*="#f5f5f5"], html[data-ogp-dark] .ogp-entry .row[style*="#FFFFFF"], html[data-ogp-dark] .ogp-entry .row[style*="#ffffff"] { background-color: var(--ogp-surface-2) !important; border-left-color: var(--ogp-border-strong); }
html[data-ogp-dark] .table th.oil, html[data-ogp-dark] .table td.oil, html[data-ogp-dark] .table .oil { background-color: var(--ogp-oil) !important; color: var(--ogp-oil-ink); }
html[data-ogp-dark] .table th.gas, html[data-ogp-dark] .table td.gas, html[data-ogp-dark] .table .gas { background-color: var(--ogp-gas) !important; color: var(--ogp-gas-ink); }
html[data-ogp-dark] .table th.water, html[data-ogp-dark] .table td.water, html[data-ogp-dark] .table .water { background-color: var(--ogp-water) !important; color: var(--ogp-water-ink); }
html[data-ogp-dark] .table th.injection, html[data-ogp-dark] .table td.injection, html[data-ogp-dark] .table .injection { background-color: var(--ogp-inj) !important; color: var(--ogp-inj-ink); }
html[data-ogp-dark] [bgcolor="#666699"], html[data-ogp-dark] [bgcolor="#FFFFFF"], html[data-ogp-dark] [bgcolor="#ffffff"] { background-color: var(--ogp-surface-3) !important; color: var(--ogp-fg); }
html[data-ogp-dark] .table > thead > tr > th { background-color: var(--ogp-surface-2); }
html[data-ogp-dark] .table > tbody > tr > td, html[data-ogp-dark] .table > tfoot > tr > td { color: var(--ogp-fg); }
html[data-ogp-dark] .ogp-entry input[readonly], html[data-ogp-dark] .ogp-entry input[tabindex="-1"] { background: var(--ogp-surface-3); }
.panel-default > .panel-heading, .panel > .panel-heading, .panel-default > .panel-heading + .panel-collapse > .panel-body { background: var(--ogp-surface-2); color: var(--ogp-fg); border-color: var(--ogp-border); }
.panel-default, .panel-default > .panel-heading { border-color: var(--ogp-border); }
.panel-default .panel-title, .panel-heading h3 { color: var(--ogp-fg); }
html[data-ogp-dark] .thumbnail, html[data-ogp-dark] .panel-body { background: var(--ogp-surface); border-color: var(--ogp-border); color: var(--ogp-fg); }

/* ---- The first three looks, redone 2026-10-04 (frontend-design, TasteSkill and web-design-guidelines).
   Shared rules for all three: one accent family per look, state colour (down / attention / ok / info)
   only for state and dark enough to read as text (4.5:1 on the surface and on its own tint), flat
   surfaces separated by 1 px rules instead of soft card shadows, no gradient washes or glows on the
   pumper hero and the sign-in panel, labels in sentence case instead of tracked capitals, and a
   typeface chosen for this subject rather than a default. Each look spends its boldness in one place. */

/* ---- Navy (default): field navy, built to read in daylight ----
   Bold in one place: the type. Atkinson Hyperlegible Next was drawn for low-vision reading, so 0/O,
   1/l/I and 5/S never collide in a lease name, a tank number or a gauge, on a phone in the sun. Ink,
   chrome and the one primary are a single navy; the rest is white paper and cool rules. */
html[data-ogp-theme="navy"] {
  --ogp-font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ogp-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ogp-bg: #f3f5f8; --ogp-surface: #ffffff; --ogp-surface-2: #f5f7fa; --ogp-surface-3: #e8ecf2;
  --ogp-border: #d6dde6; --ogp-border-strong: #8796ab;
  --ogp-fg: #0e1a2b; --ogp-fg-muted: #46546a; --ogp-fg-subtle: #59677d;
  --ogp-primary: #1c3d73; --ogp-primary-hover: #163263; --ogp-primary-active: #112853; --ogp-primary-bg: #e6edf7; --ogp-primary-fg: #ffffff;
  --ogp-accent: #2457c5; --ogp-ring: rgba(36, 87, 197, 0.32);
  --ogp-success: #1d7243; --ogp-success-bg: #e4f3ea; --ogp-success-border: #b3d9c1;
  --ogp-warning: #94580a; --ogp-warning-bg: #fbf0dd; --ogp-warning-border: #ecd0a0;
  --ogp-danger: #b42a22; --ogp-danger-hover: #9c231c; --ogp-danger-bg: #fbe9e7; --ogp-danger-border: #f0b9b3;
  --ogp-info: #1f5a9e; --ogp-info-bg: #e6effa; --ogp-info-border: #b7cfee;
  --ogp-st-on: #1d7243; --ogp-st-on-bg: #e4f3ea; --ogp-st-down: #b42a22; --ogp-st-down-bg: #fbe9e7;
  --ogp-st-attn: #94580a; --ogp-st-attn-bg: #fbf0dd; --ogp-st-idle: #6b778a; --ogp-st-idle-bg: #edf0f4;
  --ogp-prior-bg: #f0f3f7; --ogp-prior-fg: #4f5c70;
  --ogp-side-bg: #12264a; --ogp-side-bg-2: #183058; --ogp-side-fg: #d3dceb; --ogp-side-muted: #9aabc6; --ogp-side-line: rgba(255, 255, 255, 0.1);
  --ogp-side-active: rgba(255, 255, 255, 0.1); --ogp-side-accent: #ffffff; --ogp-nav-accent: #ffffff;
  --ogp-side-fg-strong: #ffffff; --ogp-side-hover: rgba(255, 255, 255, 0.07); --ogp-side-hover-2: rgba(255, 255, 255, 0.11);
  --ogp-side-search-bg: rgba(255, 255, 255, 0.08); --ogp-side-kbd: rgba(255, 255, 255, 0.18); --ogp-side-cnt-bg: rgba(255, 255, 255, 0.12);
  --ogp-side-border: rgba(255, 255, 255, 0.06); --ogp-side-scroll: rgba(255, 255, 255, 0.2); --ogp-side-cta: #ffffff; --ogp-avatar-bg: #2a4373;
  --ogp-mark-a: #ffffff; --ogp-mark-b: #ffffff; --ogp-mark-fg: #12264a;
  --ogp-topbar-bg: rgba(255, 255, 255, 0.96); --ogp-overlay: rgba(14, 26, 43, 0.5); --ogp-overlay-2: rgba(14, 26, 43, 0.45);
  --ogp-loading-bg: rgba(243, 245, 248, 0.85); --ogp-actionbar-bg: rgba(255, 255, 255, 0.97);
  --ogp-tip-bg: #12264a; --ogp-tip-fg: #ffffff;
  --ogp-hero-a: #12264a; --ogp-hero-b: #12264a; --ogp-hero-c: #12264a; --ogp-hero-glow: transparent; --ogp-hero-ok-b: #12264a;
  --ogp-login-glow: transparent; --ogp-login-grid: transparent;
  --ogp-shadow-sm: none; --ogp-shadow-md: 0 10px 28px rgba(14, 26, 43, 0.18), 0 1px 3px rgba(14, 26, 43, 0.1);
  --ogp-c-oil: #34445c; --ogp-c-gas: #a87b00; --ogp-c-water: #2f6fd6; --ogp-c-inj: #7350c2; --ogp-c-run: #1c3d73; --ogp-c-wells: #1d7243;
  --ogp-chip-active-bg: #0e1a2b; --ogp-bar-default: #9aaac0;
}

/* ---- Graphite: control-room gray, colour only for alarms ----
   Bold in one place: the absence of colour. Built on the high-performance HMI rule (ISA-101) that
   operators already know from SCADA screens: a mid-gray field that does not glare all day, graphite
   ink for every control, normal states in gray, so the only colour on screen is a well down or a
   number out of band. IBM Plex Sans Condensed fits two more grid columns in the same width. */
html[data-ogp-theme="graphite"] {
  --ogp-font-sans: "IBM Plex Sans Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --ogp-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ogp-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ogp-r-sm: 2px; --ogp-r: 2px; --ogp-r-lg: 2px; --ogp-r-pill: 2px;
  --ogp-bg: #dfe2e6; --ogp-surface: #eceef1; --ogp-surface-2: #e4e7eb; --ogp-surface-3: #d6dae0;
  --ogp-border: #c3c8cf; --ogp-border-strong: #7e8691;
  --ogp-fg: #1b1e22; --ogp-fg-muted: #41474f; --ogp-fg-subtle: #535a64; --ogp-fg-on-dark: #eceef1; --ogp-fg-on-dark-muted: #b9bec6;
  --ogp-primary: #2a2e34; --ogp-primary-hover: #1d2025; --ogp-primary-active: #131518; --ogp-primary-bg: #d3d7dc; --ogp-primary-fg: #f2f3f5;
  --ogp-accent: #1b1e22; --ogp-ring: rgba(27, 30, 34, 0.35);
  --ogp-success: #4b5460; --ogp-success-bg: #dadde2; --ogp-success-border: #b3b9c1;
  --ogp-warning: #8a4b00; --ogp-warning-bg: #efdfc6; --ogp-warning-border: #d8b987;
  --ogp-danger: #a8231b; --ogp-danger-hover: #8f1d16; --ogp-danger-bg: #f1d9d6; --ogp-danger-border: #dba59f;
  --ogp-info: #3a5674; --ogp-info-bg: #dde3ea; --ogp-info-border: #b2c0cf;
  --ogp-st-on: #4b5460; --ogp-st-on-bg: #dadde2; --ogp-st-down: #a8231b; --ogp-st-down-bg: #f1d9d6;
  --ogp-st-attn: #8a4b00; --ogp-st-attn-bg: #efdfc6; --ogp-st-idle: #646c77; --ogp-st-idle-bg: #dcdfe3;
  --ogp-oil: #e2e4e7; --ogp-oil-ink: #3e444c; --ogp-gas: #e7e2d2; --ogp-gas-ink: #5e5226; --ogp-water: #dbe2ea; --ogp-water-ink: #2f4c6a;
  --ogp-inj: #e2dfe8; --ogp-inj-ink: #4f4466; --ogp-well: #dde2df;
  --ogp-prior-bg: #e4e7eb; --ogp-prior-fg: #454c55;
  --ogp-side-bg: #cdd1d7; --ogp-side-bg-2: #c4c9d0; --ogp-side-fg: #22262b; --ogp-side-muted: #464d56; --ogp-side-line: rgba(0, 0, 0, 0.1);
  --ogp-side-active: rgba(0, 0, 0, 0.08); --ogp-side-accent: #1b1e22; --ogp-nav-accent: #1b1e22;
  --ogp-side-fg-strong: #111316; --ogp-side-hover: rgba(0, 0, 0, 0.05); --ogp-side-hover-2: rgba(0, 0, 0, 0.08);
  --ogp-side-search-bg: #e4e7eb; --ogp-side-kbd: #b2b8c0; --ogp-side-cnt-bg: rgba(0, 0, 0, 0.08); --ogp-side-border: rgba(0, 0, 0, 0.08);
  --ogp-side-scroll: rgba(0, 0, 0, 0.2); --ogp-side-cta: #22262b; --ogp-avatar-bg: #aeb4bc;
  --ogp-mark-a: #2a2e34; --ogp-mark-b: #2a2e34; --ogp-mark-fg: #eceef1;
  --ogp-topbar-bg: rgba(236, 238, 241, 0.97); --ogp-overlay: rgba(27, 30, 34, 0.45); --ogp-overlay-2: rgba(27, 30, 34, 0.4);
  --ogp-loading-bg: rgba(223, 226, 230, 0.85); --ogp-actionbar-bg: rgba(236, 238, 241, 0.97); --ogp-hint-bg: rgba(236, 238, 241, 0.8);
  --ogp-tip-bg: #2a2e34; --ogp-tip-fg: #f2f3f5;
  --ogp-hero-a: #2a2e34; --ogp-hero-b: #2a2e34; --ogp-hero-c: #2a2e34; --ogp-hero-glow: transparent; --ogp-hero-ok-b: #2a2e34;
  --ogp-login-glow: transparent; --ogp-login-grid: transparent;
  --ogp-shadow-sm: none; --ogp-shadow-md: 0 8px 24px rgba(20, 22, 26, 0.22), 0 1px 2px rgba(20, 22, 26, 0.12);
  --ogp-c-oil: #3b4049; --ogp-c-gas: #8a7633; --ogp-c-water: #45698f; --ogp-c-inj: #6b5a8c; --ogp-c-run: #2a2e34; --ogp-c-wells: #4b5460;
  --ogp-chip-active-bg: #1b1e22; --ogp-chip-active-fg: #f2f3f5; --ogp-bar-default: #8d949e;
}

/* ---- Ledger: the columnar pad, ruled green paper with totals in red ----
   Bold in one place: the ruling. A bookkeeper's columnar pad is pale green to cut glare over long
   columns of figures, ruled in blue between entries, with a red double rule under the heading and
   above every total. Public Sans carries the Franklin Gothic of business forms, with tabular figures;
   the sidebar is the green buckram of a bound ledger; ids and keys stay in JetBrains Mono. No serif, no cream, no brass. */
html[data-ogp-theme="ledger"] {
  --ogp-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ogp-font-display: var(--ogp-font-sans);
  --ogp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ogp-r-sm: 2px; --ogp-r: 2px; --ogp-r-lg: 2px; --ogp-r-pill: 2px;
  --ogp-rule-red: #b8483d; --ogp-rule-blue: #b2c8d6;
  --ogp-bg: #e3ebdf; --ogp-surface: #f4f8f0; --ogp-surface-2: #ecf2e7; --ogp-surface-3: #dfe8d9;
  --ogp-border: #bccfd9; --ogp-border-strong: #6d8b9f;
  --ogp-fg: #16201c; --ogp-fg-muted: #3d4b45; --ogp-fg-subtle: #52605a; --ogp-fg-on-dark: #e8f0ea; --ogp-fg-on-dark-muted: #a9c0b2;
  --ogp-primary: #23533d; --ogp-primary-hover: #1c4532; --ogp-primary-active: #153627; --ogp-primary-bg: #d6e6d6; --ogp-primary-fg: #ffffff;
  --ogp-accent: #23533d; --ogp-ring: rgba(35, 83, 61, 0.32);
  --ogp-success: #24693f; --ogp-success-bg: #dcecdf; --ogp-success-border: #a9cdb3;
  --ogp-warning: #8a5200; --ogp-warning-bg: #f3e7cd; --ogp-warning-border: #dcc391;
  --ogp-danger: #a8281f; --ogp-danger-hover: #8f2019; --ogp-danger-bg: #f5dfdb; --ogp-danger-border: #e0aaa3;
  --ogp-info: #2a5a7c; --ogp-info-bg: #dde8ef; --ogp-info-border: #aec6d6;
  --ogp-st-on: #24693f; --ogp-st-on-bg: #dcecdf; --ogp-st-down: #a8281f; --ogp-st-down-bg: #f5dfdb;
  --ogp-st-attn: #8a5200; --ogp-st-attn-bg: #f3e7cd; --ogp-st-idle: #6c7a73; --ogp-st-idle-bg: #e4eae0;
  --ogp-oil: #e6ece2; --ogp-oil-ink: #3a4540; --ogp-gas: #efe9cf; --ogp-gas-ink: #6b5410; --ogp-water: #dce7ee; --ogp-water-ink: #2a5a7c;
  --ogp-inj: #e6e1ec; --ogp-inj-ink: #5a3f7a; --ogp-well: #dbeadb;
  --ogp-prior-bg: #e8efe3; --ogp-prior-fg: #43514a;
  --ogp-side-bg: #1f3a2f; --ogp-side-bg-2: #254436; --ogp-side-fg: #d8e6dc; --ogp-side-muted: #a8c1b3; --ogp-side-line: rgba(255, 255, 255, 0.09);
  --ogp-side-active: rgba(244, 248, 240, 0.12); --ogp-side-accent: #f4f8f0; --ogp-nav-accent: #f4f8f0;
  --ogp-side-fg-strong: #ffffff; --ogp-side-hover: rgba(255, 255, 255, 0.07); --ogp-side-hover-2: rgba(255, 255, 255, 0.11);
  --ogp-side-search-bg: rgba(255, 255, 255, 0.08); --ogp-side-kbd: rgba(255, 255, 255, 0.18); --ogp-side-cnt-bg: rgba(255, 255, 255, 0.12);
  --ogp-side-border: rgba(255, 255, 255, 0.06); --ogp-side-scroll: rgba(255, 255, 255, 0.2); --ogp-side-cta: #f4f8f0; --ogp-avatar-bg: #3a5a4a;
  --ogp-mark-a: #f4f8f0; --ogp-mark-b: #f4f8f0; --ogp-mark-fg: #1f3a2f;
  --ogp-topbar-bg: rgba(244, 248, 240, 0.97); --ogp-overlay: rgba(22, 32, 28, 0.45); --ogp-overlay-2: rgba(22, 32, 28, 0.4);
  --ogp-loading-bg: rgba(227, 235, 223, 0.85); --ogp-actionbar-bg: rgba(244, 248, 240, 0.97); --ogp-hint-bg: rgba(244, 248, 240, 0.85);
  --ogp-tip-bg: #1f3a2f; --ogp-tip-fg: #ffffff;
  --ogp-hero-a: #1f3a2f; --ogp-hero-b: #1f3a2f; --ogp-hero-c: #1f3a2f; --ogp-hero-glow: transparent; --ogp-hero-ok-b: #1f3a2f;
  --ogp-login-glow: transparent; --ogp-login-grid: transparent;
  --ogp-shadow-sm: none; --ogp-shadow-md: 0 8px 24px rgba(22, 40, 30, 0.2), 0 1px 2px rgba(22, 40, 30, 0.12);
  --ogp-c-oil: #2f3a35; --ogp-c-gas: #8f6d00; --ogp-c-water: #2f6189; --ogp-c-inj: #6b4f8f; --ogp-c-run: #23533d; --ogp-c-wells: #24693f;
  --ogp-chip-active-bg: #16201c; --ogp-chip-active-fg: #f4f8f0; --ogp-bar-default: #7d9eb3;
}

/* the three looks share their structure rules; each block below only states what differs */
html[data-ogp-theme="navy"] .ogp-eyebrow, html[data-ogp-theme="graphite"] .ogp-eyebrow, html[data-ogp-theme="ledger"] .ogp-eyebrow,
html[data-ogp-theme="navy"] .ogp-side-label, html[data-ogp-theme="graphite"] .ogp-side-label, html[data-ogp-theme="ledger"] .ogp-side-label,
html[data-ogp-theme="navy"] .ogp-kpi-label, html[data-ogp-theme="graphite"] .ogp-kpi-label, html[data-ogp-theme="ledger"] .ogp-kpi-label,
html[data-ogp-theme="navy"] .ogp-grid thead tr.ogp-grid-groups th, html[data-ogp-theme="graphite"] .ogp-grid thead tr.ogp-grid-groups th, html[data-ogp-theme="ledger"] .ogp-grid thead tr.ogp-grid-groups th,
html[data-ogp-theme="navy"] .ogp-grid tr.ogp-group-row > td, html[data-ogp-theme="graphite"] .ogp-grid tr.ogp-group-row > td, html[data-ogp-theme="ledger"] .ogp-grid tr.ogp-group-row > td,
html[data-ogp-theme="navy"] .ogp-uipick-head span, html[data-ogp-theme="graphite"] .ogp-uipick-head span, html[data-ogp-theme="ledger"] .ogp-uipick-head span,
html[data-ogp-theme="navy"] :is(.ogp-field > label, .ogp-field-label, .ogp-palette-group, .ogp-catalog-group, .ogp-section-title, .ogp-next-card .ogp-next-lbl, .ogp-entry h5, .ogp-trend-lbl b, .ogp-pop label .g),
html[data-ogp-theme="graphite"] :is(.ogp-field > label, .ogp-field-label, .ogp-palette-group, .ogp-catalog-group, .ogp-section-title, .ogp-next-card .ogp-next-lbl, .ogp-entry h5, .ogp-trend-lbl b, .ogp-pop label .g),
html[data-ogp-theme="ledger"] :is(.ogp-field > label, .ogp-field-label, .ogp-palette-group, .ogp-catalog-group, .ogp-section-title, .ogp-next-card .ogp-next-lbl, .ogp-entry h5, .ogp-trend-lbl b, .ogp-pop label .g) {
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
html[data-ogp-theme="navy"] .ogp-side-label, html[data-ogp-theme="graphite"] .ogp-side-label, html[data-ogp-theme="ledger"] .ogp-side-label { font-size: var(--ogp-fs-xs); }
html[data-ogp-theme="navy"] .ogp-hero.is-complete, html[data-ogp-theme="graphite"] .ogp-hero.is-complete, html[data-ogp-theme="ledger"] .ogp-hero.is-complete { background: var(--ogp-hero-a); }
html[data-ogp-theme="navy"] .ogp-hero-main .ogp-eyebrow, html[data-ogp-theme="graphite"] .ogp-hero-main .ogp-eyebrow, html[data-ogp-theme="ledger"] .ogp-hero-main .ogp-eyebrow { color: var(--ogp-fg-on-dark-muted); }
html[data-ogp-theme="navy"] .ogp-grid .table > tbody > tr.is-selected > td, html[data-ogp-theme="navy"] .ogp-grid .table > tbody > tr.is-selected td:first-child,
html[data-ogp-theme="graphite"] .ogp-grid .table > tbody > tr.is-selected > td, html[data-ogp-theme="graphite"] .ogp-grid .table > tbody > tr.is-selected td:first-child,
html[data-ogp-theme="ledger"] .ogp-grid .table > tbody > tr.is-selected > td, html[data-ogp-theme="ledger"] .ogp-grid .table > tbody > tr.is-selected td:first-child { background: var(--ogp-primary-bg); }
html[data-ogp-theme="navy"] .ogp-flag.f-ng, html[data-ogp-theme="graphite"] .ogp-flag.f-ng, html[data-ogp-theme="ledger"] .ogp-flag.f-ng { color: var(--ogp-fg-muted); }
html[data-ogp-theme="navy"] .ogp-side-link .ogp-side-cnt.is-danger, html[data-ogp-theme="ledger"] .ogp-side-link .ogp-side-cnt.is-danger { background: #ffd9d5; color: #8d1f18; }
html[data-ogp-theme="navy"] .ogp-side-link .ogp-side-cnt.is-attn, html[data-ogp-theme="ledger"] .ogp-side-link .ogp-side-cnt.is-attn { background: #fbe3b8; color: #6e4100; }
html[data-ogp-theme="graphite"] .ogp-side-link .ogp-side-cnt.is-danger { background: var(--ogp-st-down); color: #ffffff; }
html[data-ogp-theme="graphite"] .ogp-side-link .ogp-side-cnt.is-attn { background: var(--ogp-st-attn); color: #ffffff; }

/* keyboard focus that reaches 3:1 and survives forced-colours mode (the base ring is a 30% tint, 1.5:1) */
html[data-ogp-theme="navy"] :is(.btn, .ogp-btn):focus-visible, html[data-ogp-theme="graphite"] :is(.btn, .ogp-btn):focus-visible, html[data-ogp-theme="ledger"] :is(.btn, .ogp-btn):focus-visible { outline: 2px solid var(--ogp-accent); outline-offset: 2px; box-shadow: none; }
html[data-ogp-theme="navy"] :is(.form-control, .ogp-input, .ogp-select, .ogp-textarea, .ogp-entry input):focus-visible,
html[data-ogp-theme="graphite"] :is(.form-control, .ogp-input, .ogp-select, .ogp-textarea, .ogp-entry input):focus-visible,
html[data-ogp-theme="ledger"] :is(.form-control, .ogp-input, .ogp-select, .ogp-textarea, .ogp-entry input):focus-visible { outline: 2px solid var(--ogp-accent); outline-offset: 1px; box-shadow: none; }
/* toasts and tooltips sit on the tip colour, which is dark in all three (graphite's rail is light) */
html[data-ogp-theme="navy"] .ogp-toast, html[data-ogp-theme="graphite"] .ogp-toast, html[data-ogp-theme="ledger"] .ogp-toast,
html[data-ogp-theme="navy"] .tooltip-inner, html[data-ogp-theme="graphite"] .tooltip-inner, html[data-ogp-theme="ledger"] .tooltip-inner { background: var(--ogp-tip-bg); color: var(--ogp-tip-fg); }
html[data-ogp-theme="graphite"] .ogp-env { background: var(--ogp-st-attn-bg); color: var(--ogp-st-attn); }
/* lease codes under a lease name: these monospace faces have shorter capitals than the old JetBrains Mono, so they
   get a size step to keep the codes as tall as before */
html[data-ogp-theme="navy"] .ogp-loc-sub .ogp-mono, html[data-ogp-theme="graphite"] .ogp-loc-sub .ogp-mono, html[data-ogp-theme="ledger"] .ogp-loc-sub .ogp-mono { font-size: 11.5px; }
/* Bootstrap paints every <kbd> dark grey; the key caps take the rail's own colours instead */
html[data-ogp-theme="navy"] .ogp-kbd, html[data-ogp-theme="graphite"] .ogp-kbd, html[data-ogp-theme="ledger"] .ogp-kbd { background: transparent; box-shadow: none; }
html[data-ogp-theme="navy"] .ogp-login-art svg, html[data-ogp-theme="graphite"] .ogp-login-art svg, html[data-ogp-theme="ledger"] .ogp-login-art svg { stroke: var(--ogp-side-muted); }

/* Navy: the white indicator bar reads on the navy rail; titles get the type's heavier weight */
html[data-ogp-theme="navy"] .ogp-side-link.is-active { font-weight: 700; }
html[data-ogp-theme="navy"] .ogp-page-title { font-weight: 700; letter-spacing: -0.005em; }
html[data-ogp-theme="navy"] .ogp-side-mark { border-radius: 4px; }

/* Graphite: frames are drawn, not lifted; the active item is ink on gray with a graphite bar */
html[data-ogp-theme="graphite"] .ogp-page-title, html[data-ogp-theme="graphite"] h1 { font-family: var(--ogp-font-display); font-weight: 600; letter-spacing: -0.01em; }
html[data-ogp-theme="graphite"] .ogp-side { border-right: 1px solid var(--ogp-border-strong); }
html[data-ogp-theme="graphite"] .ogp-side-link.is-active { font-weight: 600; background: var(--ogp-surface); }
html[data-ogp-theme="graphite"] .ogp-topbar { border-bottom: 1px solid var(--ogp-border-strong); }
html[data-ogp-theme="graphite"] .ogp-panel-header, html[data-ogp-theme="graphite"] .table > thead > tr > th { background: var(--ogp-surface-3); }
html[data-ogp-theme="graphite"] .ogp-login-brand { border-right: 1px solid var(--ogp-border-strong); }

/* Ledger: the ruling. Blue between entries, a red rule under each heading, a red double rule over totals */
html[data-ogp-theme="ledger"] .table > tbody > tr > td, html[data-ogp-theme="ledger"] .table > tbody > tr > th, html[data-ogp-theme="ledger"] .ogp-table td { border-bottom-color: var(--ogp-rule-blue); }
html[data-ogp-theme="ledger"] .table > thead > tr > th, html[data-ogp-theme="ledger"] .ogp-table th { border-bottom: 1px solid var(--ogp-rule-red); }
/* one red rule under the heading: the column-group row above the heading row is ruled blue like the entries */
html[data-ogp-theme="ledger"] .ogp-grid thead tr.ogp-grid-groups th, html[data-ogp-theme="ledger"] .ogp-grid .table > thead.fixed-header > tr.ogp-grid-groups > th, html[data-ogp-theme="ledger"] .table[data-ogp-table] > thead > tr.ogp-grid-groups > th { border-bottom-color: var(--ogp-rule-blue); box-shadow: inset 0 -1px 0 var(--ogp-rule-blue); }
html[data-ogp-theme="ledger"] .table > thead.fixed-header > tr > th, html[data-ogp-theme="ledger"] .table[data-ogp-table] > thead > tr > th,
html[data-ogp-theme="ledger"] .ogp-grid .table > thead.fixed-header > tr > th, html[data-ogp-theme="ledger"] .ogp-grid thead tr.ogp-grid-head th { box-shadow: inset 0 -1px 0 var(--ogp-rule-red); }
html[data-ogp-theme="ledger"] .total-row, html[data-ogp-theme="ledger"] .ogp-row-total, html[data-ogp-theme="ledger"] .table > tbody > tr.ogp-row-total > td,
html[data-ogp-theme="ledger"] .table > tfoot > tr > td, html[data-ogp-theme="ledger"] .total-row > td { border-top: 3px double var(--ogp-rule-red) !important; }
/* a totals row pinned under the heading (Current Production) closes the heading block instead */
html[data-ogp-theme="ledger"] .ogp-grid thead tr.total-row td, html[data-ogp-theme="ledger"] .ogp-grid thead tr.total-row th { border-top: 0 !important; border-bottom: 3px double var(--ogp-rule-red) !important; }
html[data-ogp-theme="ledger"] .ogp-panel-header { border-bottom: 1px solid var(--ogp-rule-red); background: var(--ogp-surface); }
html[data-ogp-theme="ledger"] .ogp-page-title { font-weight: 700; letter-spacing: -0.01em; }
html[data-ogp-theme="ledger"] .ogp-topbar { border-bottom: 1px solid var(--ogp-border-strong); }
html[data-ogp-theme="ledger"] .ogp-side-mark { border-radius: 2px; }

/* ---- Rig: industrial dark, safety orange ---- */
html[data-ogp-theme="rig"] {
  --ogp-font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ogp-fs-xs: 11.5px; --ogp-fs-sm: 12.5px; --ogp-fs-base: 13.5px; --ogp-fs-md: 14.5px; --ogp-fs-lg: 16.5px; --ogp-fs-xl: 20px; --ogp-fs-2xl: 23px;
  --ogp-bg: #121517; --ogp-surface: #1a1e22; --ogp-surface-2: #20252a; --ogp-surface-3: #2a3036;
  --ogp-border: #2c3239; --ogp-border-strong: #3c444d;
  --ogp-fg: #e9edf0; --ogp-fg-muted: #a5afb9; --ogp-fg-subtle: #85919c; --ogp-fg-on-dark: #e9edf0; --ogp-fg-on-dark-muted: #a5afb9;
  --ogp-primary: #f5820d; --ogp-primary-hover: #ff932a; --ogp-primary-active: #d97005; --ogp-primary-bg: rgba(245, 130, 13, 0.14); --ogp-primary-fg: #140c00;
  --ogp-accent: #ffa63d; --ogp-ring: rgba(245, 130, 13, 0.4);
  --ogp-r-sm: 1px; --ogp-r: 2px; --ogp-r-lg: 3px;
  --ogp-success: #3ddc84; --ogp-success-bg: rgba(61, 220, 132, 0.12); --ogp-success-border: rgba(61, 220, 132, 0.35);
  --ogp-warning: #ffc043; --ogp-warning-bg: rgba(255, 192, 67, 0.12); --ogp-warning-border: rgba(255, 192, 67, 0.35);
  --ogp-danger: #ff5c4d; --ogp-danger-hover: #ff7366; --ogp-danger-bg: rgba(255, 92, 77, 0.12); --ogp-danger-border: rgba(255, 92, 77, 0.35);
  --ogp-info: #5cb8ff; --ogp-info-bg: rgba(92, 184, 255, 0.12); --ogp-info-border: rgba(92, 184, 255, 0.35);
  --ogp-st-on: #3ddc84; --ogp-st-on-bg: rgba(61, 220, 132, 0.14); --ogp-st-down: #ff5c4d; --ogp-st-down-bg: rgba(255, 92, 77, 0.14); --ogp-st-attn: #ffc043; --ogp-st-attn-bg: rgba(255, 192, 67, 0.14); --ogp-st-idle: #7a8794; --ogp-st-idle-bg: rgba(122, 135, 148, 0.16);
  --ogp-oil: #2a2e33; --ogp-oil-ink: #cfd5dc; --ogp-gas: #33301f; --ogp-gas-ink: #ffd766; --ogp-water: #1d2b3a; --ogp-water-ink: #7cc2ff; --ogp-inj: #2c2438; --ogp-inj-ink: #c9a3ff; --ogp-well: #1f3126;
  --ogp-prior-bg: #1e2226; --ogp-prior-fg: #8b95a0;
  --ogp-side-bg: #0d0f11; --ogp-side-bg-2: #131619; --ogp-side-fg: #c9d0d7; --ogp-side-muted: #7b8590; --ogp-side-line: rgba(255, 255, 255, 0.07); --ogp-side-active: rgba(245, 130, 13, 0.18); --ogp-side-accent: #f5820d;
  --ogp-side-cta: #3ddc84; --ogp-avatar-bg: #2a3036; --ogp-mark-a: #ffa63d; --ogp-mark-b: #d97005; --ogp-mark-fg: #140c00;
  --ogp-topbar-bg: rgba(18, 21, 23, 0.88); --ogp-overlay: rgba(0, 0, 0, 0.6); --ogp-overlay-2: rgba(0, 0, 0, 0.55); --ogp-loading-bg: rgba(18, 21, 23, 0.85); --ogp-actionbar-bg: rgba(26, 30, 34, 0.96); --ogp-hint-bg: rgba(255, 255, 255, 0.06);
  --ogp-tip-bg: #0d0f11; --ogp-hero-a: #0d0f11; --ogp-hero-b: #26221c; --ogp-hero-c: #f5820d; --ogp-hero-glow: rgba(245, 130, 13, 0.28); --ogp-hero-ok-b: #1f6b3a;
  --ogp-login-glow: rgba(245, 130, 13, 0.2);
  --ogp-c-oil: #cfd5dc; --ogp-c-gas: #ffd766; --ogp-c-water: #7cc2ff; --ogp-c-inj: #c9a3ff; --ogp-c-run: #ffa63d; --ogp-c-wells: #3ddc84;
  --ogp-chip-active-bg: #f5820d; --ogp-chip-active-fg: #140c00; --ogp-chip-active-n: rgba(0, 0, 0, 0.18); --ogp-bar-default: #4a5561;
  --ogp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ogp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-ogp-theme="rig"] .ogp-topbar { border-bottom: 2px solid var(--ogp-primary); }
html[data-ogp-theme="rig"] .ogp-eyebrow, html[data-ogp-theme="rig"] .ogp-side-label, html[data-ogp-theme="rig"] .ogp-kpi-label { letter-spacing: .12em; font-weight: 700; }
html[data-ogp-theme="rig"] .ogp-page-title { text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
html[data-ogp-theme="rig"] .ogp-page-title small { text-transform: none; letter-spacing: 0; }
html[data-ogp-theme="rig"] .ogp-kpi { border-top: 2px solid var(--ogp-kpi-c, var(--ogp-border-strong)); }
html[data-ogp-theme="rig"] .ogp-side-link.is-active::before { width: 4px; }
html[data-ogp-theme="rig"] .ogp-login-hero h2 { text-transform: uppercase; letter-spacing: .01em; font-weight: 700; }
html[data-ogp-theme="rig"] .ogp-login-brand { background-image: repeating-linear-gradient(135deg, rgba(245, 130, 13, 0.06) 0 14px, transparent 14px 28px); }
html[data-ogp-theme="rig"] .btn-primary, html[data-ogp-theme="rig"] .ogp-btn-primary { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Slate: operator dark, electric blue ---- */
html[data-ogp-theme="slate"] {
  --ogp-bg: #0b0f19; --ogp-surface: #111827; --ogp-surface-2: #161f31; --ogp-surface-3: #1e293b;
  --ogp-border: #243049; --ogp-border-strong: #334366;
  --ogp-fg: #e5eaf3; --ogp-fg-muted: #9aa8c2; --ogp-fg-subtle: #6b7b99; --ogp-fg-on-dark: #e5eaf3; --ogp-fg-on-dark-muted: #9aa8c2;
  --ogp-primary: #5b9bff; --ogp-primary-hover: #74acff; --ogp-primary-active: #4a8af0; --ogp-primary-bg: rgba(91, 155, 255, 0.14); --ogp-primary-fg: #071022;
  --ogp-accent: #7dd3fc; --ogp-ring: rgba(91, 155, 255, 0.4);
  --ogp-r-sm: 4px; --ogp-r: 6px; --ogp-r-lg: 8px;
  --ogp-success: #34d399; --ogp-success-bg: rgba(52, 211, 153, 0.12); --ogp-success-border: rgba(52, 211, 153, 0.35);
  --ogp-warning: #fbbf24; --ogp-warning-bg: rgba(251, 191, 36, 0.12); --ogp-warning-border: rgba(251, 191, 36, 0.35);
  --ogp-danger: #f87171; --ogp-danger-hover: #fb8f8f; --ogp-danger-bg: rgba(248, 113, 113, 0.12); --ogp-danger-border: rgba(248, 113, 113, 0.35);
  --ogp-info: #7dd3fc; --ogp-info-bg: rgba(125, 211, 252, 0.12); --ogp-info-border: rgba(125, 211, 252, 0.35);
  --ogp-st-on: #34d399; --ogp-st-on-bg: rgba(52, 211, 153, 0.14); --ogp-st-down: #f87171; --ogp-st-down-bg: rgba(248, 113, 113, 0.14); --ogp-st-attn: #fbbf24; --ogp-st-attn-bg: rgba(251, 191, 36, 0.14); --ogp-st-idle: #64748b; --ogp-st-idle-bg: rgba(100, 116, 139, 0.18);
  --ogp-oil: #1f2937; --ogp-oil-ink: #cbd5e1; --ogp-gas: #2a2a1a; --ogp-gas-ink: #fde68a; --ogp-water: #172a45; --ogp-water-ink: #93c5fd; --ogp-inj: #261f3d; --ogp-inj-ink: #c4b5fd; --ogp-well: #14301f;
  --ogp-prior-bg: #131b2c; --ogp-prior-fg: #8b98b4;
  --ogp-side-bg: #0f1524; --ogp-side-bg-2: #131a2b; --ogp-side-fg: #c3cde0; --ogp-side-muted: #7484a3; --ogp-side-line: rgba(255, 255, 255, 0.07); --ogp-side-active: rgba(91, 155, 255, 0.16); --ogp-side-accent: #5b9bff;
  --ogp-side-cta: #34d399; --ogp-avatar-bg: #1e293b; --ogp-mark-a: #7dd3fc; --ogp-mark-b: #2563eb; --ogp-mark-fg: #071022;
  --ogp-topbar-bg: rgba(11, 15, 25, 0.85); --ogp-overlay: rgba(0, 0, 0, 0.6); --ogp-overlay-2: rgba(0, 0, 0, 0.55); --ogp-loading-bg: rgba(11, 15, 25, 0.85); --ogp-actionbar-bg: rgba(17, 24, 39, 0.96); --ogp-hint-bg: rgba(255, 255, 255, 0.06);
  --ogp-tip-bg: #0f1524; --ogp-hero-a: #0f1524; --ogp-hero-b: #14213a; --ogp-hero-c: #2563eb; --ogp-hero-glow: rgba(125, 211, 252, 0.25); --ogp-hero-ok-b: #14532d;
  --ogp-login-glow: rgba(125, 211, 252, 0.16);
  --ogp-c-oil: #cbd5e1; --ogp-c-gas: #fde68a; --ogp-c-water: #60a5fa; --ogp-c-inj: #a78bfa; --ogp-c-run: #5b9bff; --ogp-c-wells: #34d399;
  --ogp-chip-active-bg: #e5eaf3; --ogp-chip-active-fg: #0b0f19; --ogp-chip-active-n: rgba(0, 0, 0, 0.14); --ogp-bar-default: #33456b;
  --ogp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --ogp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-ogp-theme="slate"] .ogp-kpi { background: linear-gradient(180deg, var(--ogp-surface-2), var(--ogp-surface)); }
html[data-ogp-theme="slate"] .ogp-topbar { border-bottom: 1px solid var(--ogp-border); }
html[data-ogp-theme="slate"] .ogp-side-link.is-active { box-shadow: inset 0 0 0 1px rgba(91, 155, 255, 0.25); }
html[data-ogp-theme="slate"] .ogp-login-brand { background-image: radial-gradient(rgba(125, 211, 252, 0.12) 1px, transparent 1px); background-size: 22px 22px; }
html[data-ogp-theme="slate"] .ogp-trend-svg .area { fill-opacity: .18; }

/* ---- Horizon: navigation across the top, teal ---- */
html[data-ogp-theme="horizon"] {
  --ogp-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ogp-bg: #f5f8f8; --ogp-surface: #ffffff; --ogp-surface-2: #f2f6f6; --ogp-surface-3: #e8efef;
  --ogp-border: #dde6e6; --ogp-border-strong: #c3d1d1;
  --ogp-fg: #12201f; --ogp-fg-muted: #56706e; --ogp-fg-subtle: #8aa19f;
  --ogp-primary: #0f766e; --ogp-primary-hover: #0b5f59; --ogp-primary-active: #094f4a; --ogp-primary-bg: #e0f2f1; --ogp-primary-fg: #ffffff;
  --ogp-accent: #14b8a6; --ogp-ring: rgba(20, 184, 166, 0.35);
  --ogp-r-sm: 6px; --ogp-r: 8px; --ogp-r-lg: 12px;
  --ogp-side-bg: #0b2a2a; --ogp-side-bg-2: #103434; --ogp-side-fg: #cfe3e1; --ogp-side-muted: #7fa3a0; --ogp-side-line: rgba(255, 255, 255, 0.1); --ogp-side-active: rgba(20, 184, 166, 0.22); --ogp-side-accent: #2dd4bf;
  --ogp-side-cta: #a7f3d0; --ogp-avatar-bg: #1b4a48; --ogp-mark-a: #2dd4bf; --ogp-mark-b: #0f766e; --ogp-mark-fg: #062020;
  --ogp-topbar-bg: rgba(255, 255, 255, 0.92);
  --ogp-st-idle: #9db3b1; --ogp-st-idle-bg: #edf3f3; --ogp-prior-bg: #f0f5f5; --ogp-prior-fg: #566f6d;
  --ogp-hero-a: #0b2a2a; --ogp-hero-b: #0f4444; --ogp-hero-c: #14b8a6; --ogp-hero-glow: rgba(45, 212, 191, 0.25); --ogp-hero-ok-b: #166534;
  --ogp-tip-bg: #0b2a2a; --ogp-login-glow: rgba(45, 212, 191, 0.16);
  --ogp-c-oil: #5f6f6e; --ogp-c-gas: #d4a017; --ogp-c-water: #2563eb; --ogp-c-inj: #7c3aed; --ogp-c-run: #0f766e; --ogp-c-wells: #16a34a;
  --ogp-chip-active-bg: #12201f; --ogp-shadow-sm: 0 1px 3px rgba(18, 32, 31, 0.08); --ogp-shadow-md: 0 12px 32px rgba(18, 32, 31, 0.16), 0 1px 3px rgba(18, 32, 31, 0.08);
}
html[data-ogp-theme="horizon"] .ogp-chip, html[data-ogp-theme="horizon"] .ogp-pill, html[data-ogp-theme="horizon"] .ogp-flag, html[data-ogp-theme="horizon"] .ogp-badge { border-radius: 999px; }
html[data-ogp-theme="horizon"] .btn, html[data-ogp-theme="horizon"] .form-control { border-radius: 8px; }
html[data-ogp-theme="horizon"] .ogp-kpi, html[data-ogp-theme="horizon"] .ogp-panel, html[data-ogp-theme="horizon"] .ogp-tile, html[data-ogp-theme="horizon"] .ogp-attn { border-radius: 12px; }
html[data-ogp-theme="horizon"] .ogp-page-title { font-weight: 700; letter-spacing: -0.02em; }
html[data-ogp-theme="horizon"] .ogp-login-hero h2 { font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 1200px) {
  html[data-ogp-theme="horizon"] body.ogp-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  html[data-ogp-theme="horizon"] .ogp-side { position: sticky; top: 0; z-index: 965; height: 56px; width: auto; flex-direction: row; align-items: center; gap: 4px; padding: 0 20px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--ogp-side-line); }
  html[data-ogp-theme="horizon"] .ogp-side-brand { border: 0; padding: 0 16px 0 0; min-height: 0; margin-right: 6px; border-right: 1px solid var(--ogp-side-line); }
  html[data-ogp-theme="horizon"] .ogp-side-brand-text span { display: none; }
  html[data-ogp-theme="horizon"] .ogp-side-search { width: 230px; margin: 0 10px 0 auto; order: 5; }
  html[data-ogp-theme="horizon"] .ogp-side-nav { flex: 0 1 auto; display: flex; align-items: center; gap: 2px; padding: 0; }
  html[data-ogp-theme="horizon"] .ogp-side-group { margin: 0; position: relative; }
  html[data-ogp-theme="horizon"] .ogp-side-label { padding: 0 10px; height: 34px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; font-size: var(--ogp-fs-sm); font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--ogp-side-fg); cursor: pointer; user-select: none; }
  html[data-ogp-theme="horizon"] .ogp-side-label::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
  html[data-ogp-theme="horizon"] .ogp-side-group:hover .ogp-side-label, html[data-ogp-theme="horizon"] .ogp-side-group.is-open .ogp-side-label, html[data-ogp-theme="horizon"] .ogp-side-group:focus-within .ogp-side-label { background: var(--ogp-side-hover); color: var(--ogp-side-fg-strong); }
  html[data-ogp-theme="horizon"] .ogp-side-group.has-active .ogp-side-label { color: var(--ogp-side-fg-strong); box-shadow: inset 0 -2px 0 var(--ogp-side-accent); border-radius: 8px 8px 0 0; }
  html[data-ogp-theme="horizon"] .ogp-side-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); min-width: 230px; padding: 6px; background: var(--ogp-side-bg-2); border: 1px solid var(--ogp-side-line); border-radius: 10px; box-shadow: var(--ogp-shadow-md); z-index: 970; }
  html[data-ogp-theme="horizon"] .ogp-side-group:hover .ogp-side-menu, html[data-ogp-theme="horizon"] .ogp-side-group.is-open .ogp-side-menu, html[data-ogp-theme="horizon"] .ogp-side-group:focus-within .ogp-side-menu { display: block; }
  html[data-ogp-theme="horizon"] .ogp-side-menu .ogp-side-link { height: 34px; border-radius: 6px; }
  html[data-ogp-theme="horizon"] .ogp-side-link.is-active::before { display: none; }
  html[data-ogp-theme="horizon"] .ogp-side-sub { margin-left: 18px; }
  html[data-ogp-theme="horizon"] .ogp-side-foot { border: 0; padding: 0; order: 6; position: relative; }
  html[data-ogp-theme="horizon"] .ogp-side-user { padding: 4px 6px; border-radius: 8px; }
  html[data-ogp-theme="horizon"] .ogp-side-user .ogp-side-brand-text span { display: block; }
  html[data-ogp-theme="horizon"] .ogp-side-user-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--ogp-side-bg-2); border: 1px solid var(--ogp-side-line); border-radius: 10px; padding: 6px; box-shadow: var(--ogp-shadow-md); margin: 0; }
  html[data-ogp-theme="horizon"] .ogp-topbar { top: 56px; }
  html[data-ogp-theme="horizon"] .ogp-main > .ogp-page { max-width: 1400px; margin: 0 auto; }
  html[data-ogp-theme="horizon"] .ogp-foot { max-width: 1400px; margin: 0 auto; width: 100%; }
}
@media (max-width: 1199px) { html[data-ogp-theme="horizon"] .ogp-side-menu { display: block; } }

/* 23. Experience picker (login + in-app dialog). Glyphs are CSS-drawn miniatures of each navigation model. */
.ogp-uxpick { border: 0; padding: 0; margin: var(--ogp-sp-4) 0 0; min-width: 0; }
.ogp-uxpick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ogp-uxpick-item { position: relative; display: block; margin: 0; padding: 6px 6px 7px; border: 1px solid var(--ogp-border); border-radius: var(--ogp-r-lg); background: var(--ogp-surface); cursor: pointer; transition: border-color var(--ogp-t), box-shadow var(--ogp-t); }
.ogp-uxpick-item:hover { border-color: var(--ogp-border-strong); }
.ogp-uxpick-item.is-active { border-color: var(--ogp-primary); box-shadow: 0 0 0 2px var(--ogp-primary-bg); }
.ogp-uxpick-item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ogp-uxpick-item:focus-within { outline: 2px solid var(--ogp-accent); outline-offset: 2px; }
.ogp-uxpick-item b { display: block; font-size: var(--ogp-fs-sm); font-weight: 600; margin-top: 6px; color: var(--ogp-fg); }
.ogp-uxpick-item small { display: block; font-size: 10.5px; color: var(--ogp-fg-muted); line-height: 1.3; }
.ogp-uxpick-item.is-active b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ogp-primary); margin-left: 6px; vertical-align: 1px; }
.ogp-uxpick-glyph { position: relative; display: block; height: 58px; border-radius: 4px; overflow: hidden; background: var(--ogp-surface-3); border: 1px solid var(--ogp-border); }
.ogp-uxpick-glyph i { position: absolute; inset: 0; display: block; background-repeat: no-repeat; }
/* classic: sidebar + rows */
.ogp-uxpick-glyph i.classic { background-image: linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)); background-size: 24% 100%, 66% 9px, 66% 9px, 66% 9px; background-position: 0 0, 30% 12px, 30% 26px, 30% 40px; opacity: .9; }
/* command: thin rail + status tiles + right activity rail */
.ogp-uxpick-glyph i.command { background-image: linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-st-down), var(--ogp-st-down)), linear-gradient(var(--ogp-st-attn), var(--ogp-st-attn)), linear-gradient(var(--ogp-st-on), var(--ogp-st-on)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-border-strong), var(--ogp-border-strong)); background-size: 10% 100%, 18% 12px, 18% 12px, 18% 12px, 60% 22px, 20% 100%; background-position: 0 0, 14% 6px, 44% 6px, 74% 6px, 14% 26px, 100% 0; }
/* workspace: tree sidebar + tab strip + panel */
.ogp-uxpick-glyph i.workspace { background-image: linear-gradient(var(--ogp-surface-2), var(--ogp-surface-2)), linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-primary), var(--ogp-primary)), linear-gradient(var(--ogp-border-strong), var(--ogp-border-strong)), linear-gradient(var(--ogp-surface), var(--ogp-surface)); background-size: 28% 100%, 14% 3px, 18% 3px, 14% 3px, 16% 6px, 16% 6px, 62% 30px; background-position: 0 0, 6% 10px, 12% 20px, 12% 30px, 34% 4px, 54% 4px, 34% 16px; }
/* intelligence: chart bars + kpi tiles */
.ogp-uxpick-glyph i.intelligence { background-image: linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-c-water), var(--ogp-c-water)), linear-gradient(var(--ogp-c-oil), var(--ogp-c-oil)), linear-gradient(var(--ogp-c-gas), var(--ogp-c-gas)), linear-gradient(var(--ogp-c-water), var(--ogp-c-water)), linear-gradient(var(--ogp-primary), var(--ogp-primary)); background-size: 28% 12px, 28% 12px, 28% 12px, 10% 14px, 10% 22px, 10% 10px, 10% 26px, 10% 18px; background-position: 6% 6px, 50% 6px, 94% 6px, 12% 100%, 28% 100%, 44% 100%, 60% 100%, 76% 100%; }
/* field: phone with a big button and a checklist */
.ogp-uxpick-glyph i.field { background-image: linear-gradient(var(--ogp-fg), var(--ogp-fg)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-primary), var(--ogp-primary)), linear-gradient(var(--ogp-st-on), var(--ogp-st-on)), linear-gradient(var(--ogp-st-on), var(--ogp-st-on)), linear-gradient(var(--ogp-border-strong), var(--ogp-border-strong)); background-size: 34% 100%, 28% 90%, 22% 10px, 6px 6px, 6px 6px, 6px 6px; background-position: 50% 0, 50% 50%, 50% 40px, 40% 12px, 40% 22px, 40% 32px; }
/* explorer: three columns + timeline dots */
.ogp-uxpick-glyph i.explorer { background-image: linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-primary), var(--ogp-primary)), linear-gradient(var(--ogp-st-attn), var(--ogp-st-attn)), linear-gradient(var(--ogp-st-on), var(--ogp-st-on)), linear-gradient(var(--ogp-border-strong), var(--ogp-border-strong)); background-size: 22% 100%, 22% 100%, 44% 100%, 6px 6px, 6px 6px, 6px 6px, 2px 100%; background-position: 4% 0, 30% 0, 100% 0, 66% 12px, 66% 26px, 66% 40px, 68% 0; }
/* console: dark header bar + side rail + table rows + inspector panel */
.ogp-uxpick-glyph i.console { background-image: linear-gradient(var(--ogp-fg), var(--ogp-fg)), linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-surface), var(--ogp-surface)), linear-gradient(var(--ogp-primary), var(--ogp-primary)); background-size: 100% 9px, 12% 100%, 54% 7px, 54% 7px, 54% 7px, 26% 100%; background-position: 0 0, 0 0, 18% 16px, 18% 28px, 18% 40px, 100% 9px; }
/* control room: dark board of small cells, one in alarm */
.ogp-uxpick-glyph i.controlroom { background-color: #161616; background-image: radial-gradient(circle, var(--ogp-st-down) 0 3px, transparent 3.5px), radial-gradient(circle, #8d8d8d 0 2px, transparent 2.5px); background-size: 100% 100%, 12px 12px; background-position: 62% 46%, 4px 4px; background-repeat: no-repeat, repeat; }
/* brief: a headline, lines of text and one small chart */
.ogp-uxpick-glyph i.brief { background-image: linear-gradient(var(--ogp-fg), var(--ogp-fg)), linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(var(--ogp-fg-subtle), var(--ogp-fg-subtle)), linear-gradient(to top right, transparent 48%, var(--ogp-primary) 50%, transparent 54%); background-size: 70% 10px, 80% 3px, 60% 3px, 34% 22px; background-position: 10% 8px, 10% 24px, 10% 31px, 88% 44px; }
@media (max-width: 420px) { .ogp-uxpick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ogp-uidialog .ogp-uxpick { margin-top: 8px; }
.ogp-uidialog-box { max-width: 640px; max-height: 90vh; overflow: auto; }

/* 20. Responsive + print + motion ------------------------------------------ */
@media (max-width: 767px) {
  .ogp-page-header { align-items: flex-start; flex-direction: column; }
  .ogp-page-actions { margin-left: 0; width: 100%; }
  .ogp-filterbar { padding: var(--ogp-sp-2); }
  .ogp-filterbar .ogp-actions { margin-left: 0; width: 100%; }
  .ogp-filterbar .ogp-actions .btn { flex: 1 1 auto; }
  .ogp-field { flex: 1 1 140px; }
  .form-inline .form-control { width: 100%; }
  .ogp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn, .form-control, select.form-control { height: 36px !important; line-height: 34px; }
  .btn.fa { width: 36px; }
  .ogp-seg > label, .ogp-seg > button { height: 30px; }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 5px 6px; }
  .ogp-grid { max-height: calc(100vh - var(--ogp-top-h) - var(--ogp-bottom-h) - 150px); }
  .ogp-grid th:first-child, .ogp-grid td:first-child { min-width: 132px; max-width: 160px; }
  .ogp-search { flex: 1 1 100%; }
  .ogp-views { margin-left: 0; }
}
@media print {
  body, body.ogp-app { background: #fff; font-size: 11px; display: block; }
  .ogp-side, .ogp-topbar, .ogp-bottombar, .ogp-actionbar, .ogp-foot, .footer, .dontprint, .ogp-filterbar, .ogp-quickbar, .ogp-page-actions, .ogp-progress, .ogp-toasts, #loading, .ogp-palette, .ogp-subbar, .ogp-backdrop { display: none !important; }
  .printonly { display: block !important; }
  .ogp-page { padding: 0; }
  .ogp-grid { max-height: none; overflow: visible; border: 0; }
  .ogp-grid thead th, .ogp-grid th:first-child, .ogp-grid td:first-child { position: static; }
  .ogp-table-wrap, .table-full { border: 0; overflow: visible; }
  table.table { font-size: 10px; }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 2px 4px; }
  .ogp-kpi { box-shadow: none; }
  a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .ogp-spinner, .spinner-border { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}