/* =====================================================================================================================
   Oasis.Ui — the Oasis corporate theme (pass U1). Tokens, base type, the app shell and the oui-* classes the pages use.
   The controls themselves (buttons, inputs, sections, KPI tiles, grids, dialogs, messages ...) are in oasis-kit.css, ported
   from the HotelSimplify control library and re-themed here. Light ("Day") and dark ("Night") themes: the top bar's toggle
   sets data-theme on <html>; without a choice the device setting wins. Tokens are the only place colours are defined.
   ===================================================================================================================== */
:root {
  /* surfaces and lines */
  --surface-100: #F3F6FA; --surface-200: #FFFFFF; --surface-300: #EAEFF6;
  --line: #DAE1EB; --line-strong: #8D9BB0;
  --ink: #0F172A; --ink-muted: #4B5A70;
  /* corporate blue, a deep navy for the side bar, and a cyan accent for highlights */
  --brand: #1D4ED8; --brand-strong: #1E3A8A; --brand-deep: #172554; --brand-soft: #E2EAFF; --on-brand: #FFFFFF;
  --accent: #0891B2; --accent-soft: #D5F5FB;
  --navy: #0B1A33; --navy-2: #132a52; --navy-line: #1F365F; --on-navy: #E8EEF8; --on-navy-muted: #A9B8D0;
  /* states */
  --warning: #D97706; --warning-soft: #FEF3C7; --warning-ink: #8A3A0A;
  --danger: #B42318; --danger-soft: #FDE7E5;
  --info: #0369A1;
  --tone-neutral: var(--ink-muted); --tone-neutral-soft: var(--surface-300);
  --tone-primary: var(--brand); --tone-primary-soft: var(--brand-soft);
  --tone-success: #15803D; --tone-success-soft: #DCF5E3;
  --tone-warning: var(--warning); --tone-warning-soft: var(--warning-soft);
  --tone-danger: var(--danger); --tone-danger-soft: var(--danger-soft);
  --tone-info: var(--info); --tone-info-soft: #DDF0FB;
  --focus: #2563EB; --focus-ring: var(--focus);
  /* shape, space, depth, motion */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-2: 0 8px 22px -8px rgba(15, 23, 42, .20), 0 2px 4px rgba(15, 23, 42, .05);
  --shadow-pop: 0 12px 32px rgba(15, 23, 42, .18);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --cover-l: 34%; --cover-l2: 46%;
  --page-max: 1440px;
  --font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans Devanagari", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, monospace;
  color-scheme: light;

  /* the names the first passes used, kept so nothing breaks */
  --surface: var(--surface-200); --canvas: var(--surface-100); --brand-ink: var(--on-brand);
  --ok-ink: #14672F; --ok-bg: #DCF5E3;
  --info-ink: #0B4F86; --info-bg: #DDF0FB;
  --warn-ink: #8A3A0A; --warn-bg: #FEF3C7;
  --bad-ink: #A1251A; --bad-bg: #FDE7E5;
  --neutral-ink: #45536A; --neutral-bg: #EEF2F7;
  --radius-input: var(--radius-md); --radius-card: var(--radius-lg); --shadow-float: var(--shadow-pop);
}
/* Night: chosen with the top bar's toggle, otherwise it follows the device */
:root[data-theme="dark"] {
  --surface-100: #0A1120; --surface-200: #101A2E; --surface-300: #18243D;
  --line: #233250; --line-strong: #4A5D80;
  --ink: #E7EDF7; --ink-muted: #A0AFC7;
  --brand: #6B95FF; --brand-strong: #9DB9FF; --brand-deep: #1B2E66; --brand-soft: #172A55; --on-brand: #081022;
  --accent: #38C5E8; --accent-soft: #0E3340;
  --navy: #070F1F; --navy-2: #0F1D38; --navy-line: #1A2B4D;
  --warning: #F2B04A; --warning-soft: #3A2A10; --warning-ink: #F8D48F;
  --danger: #F2847A; --danger-soft: #3D1C1C;
  --info: #7DC3F5;
  --tone-success: #63C987; --tone-success-soft: #14321F; --tone-info-soft: #13293D;
  --focus: #7FA6FF;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 10px 26px -10px rgba(0, 0, 0, .75); --shadow-pop: 0 14px 36px rgba(0, 0, 0, .55);
  --cover-l: 26%; --cover-l2: 34%;
  --ok-ink: #8FE0AB; --ok-bg: #14321F; --info-ink: #A8D6F8; --info-bg: #13293D; --warn-ink: #F8D48F; --warn-bg: #3A2A10;
  --bad-ink: #F7A49C; --bad-bg: #3D1C1C; --neutral-ink: #BAC6D9; --neutral-bg: #18243D;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #0A1120; --surface-200: #101A2E; --surface-300: #18243D;
    --line: #233250; --line-strong: #4A5D80;
    --ink: #E7EDF7; --ink-muted: #A0AFC7;
    --brand: #6B95FF; --brand-strong: #9DB9FF; --brand-deep: #1B2E66; --brand-soft: #172A55; --on-brand: #081022;
    --accent: #38C5E8; --accent-soft: #0E3340;
    --navy: #070F1F; --navy-2: #0F1D38; --navy-line: #1A2B4D;
    --warning: #F2B04A; --warning-soft: #3A2A10; --warning-ink: #F8D48F;
    --danger: #F2847A; --danger-soft: #3D1C1C;
    --info: #7DC3F5;
    --tone-success: #63C987; --tone-success-soft: #14321F; --tone-info-soft: #13293D;
    --focus: #7FA6FF;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 10px 26px -10px rgba(0, 0, 0, .75); --shadow-pop: 0 14px 36px rgba(0, 0, 0, .55);
    --cover-l: 26%; --cover-l2: 34%;
    --ok-ink: #8FE0AB; --ok-bg: #14321F; --info-ink: #A8D6F8; --info-bg: #13293D; --warn-ink: #F8D48F; --warn-bg: #3A2A10;
    --bad-ink: #F7A49C; --bad-bg: #3D1C1C; --neutral-ink: #BAC6D9; --neutral-bg: #18243D;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.oui { margin: 0; background: var(--surface-100); color: var(--ink); font: 400 14px/22px var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.oui a { color: var(--brand); text-underline-offset: 2px; }
.oui a:hover { color: var(--brand-strong); }
.oui h1 { font-size: 24px; line-height: 32px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 var(--space-4); }
.oui h2 { font-size: 17px; line-height: 24px; font-weight: 600; margin: var(--space-6) 0 var(--space-3); }
.oui h3 { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0 0 var(--space-2); }
.oui p { margin: 0 0 var(--space-3); }
.oui .muted { color: var(--ink-muted); }
.oui .small { font-size: 12.5px; line-height: 18px; }
.oui .num, .oui td.num, .oui th.num { font-variant-numeric: tabular-nums; text-align: right; }
.oui .mono { font-family: var(--mono); font-size: 13px; }
.oui .strong { font-weight: 600; }
.oui .grow { flex: 1; }
.oui hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
.oui kbd { font: 500 11px var(--font); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface-200); color: var(--ink-muted); white-space: nowrap; }
.oui .icon, .oui .ico { flex: none; display: inline-block; vertical-align: middle; }
.oui * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Visible focus everywhere (WCAG 2.1 AA). */
.oui :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.oui-skip { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--surface-200); color: var(--ink); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.oui-skip:focus { top: 8px; }
.oui-sr, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* native controls get the kit's look even outside an Ox* component */
.oui :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select, textarea) {
  font: 400 14px var(--font); color: var(--ink); background: var(--surface-200); border: 1px solid var(--line-strong); border-radius: var(--radius-md); min-width: 0;
  transition: border-color .12s, box-shadow .12s; }
.oui :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select) { height: 38px; padding: 0 var(--space-3); }
.oui :where(textarea) { padding: var(--space-2) var(--space-3); line-height: 22px; min-height: 84px; }
.oui :where(input, select, textarea):hover:not(:disabled) { border-color: var(--ink-muted); }
.oui :where(input, select, textarea):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.oui :where(input, select, textarea):disabled { background: var(--surface-300); color: var(--ink-muted); cursor: not-allowed; }
.oui :where(input, select, textarea)[aria-invalid=true] { border-color: var(--danger); }
.oui input[type=checkbox], .oui input[type=radio] { accent-color: var(--brand); width: 16px; height: 16px; }
.oui ::placeholder { color: var(--ink-muted); opacity: .8; }
.oui fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) var(--space-4); margin: 0 0 var(--space-3); }
.oui legend { padding: 0 var(--space-2); color: var(--ink); font-weight: 600; font-size: 13.5px; }

/* the button the kit is built on (variants and sizes are in oasis-kit.css) */
.ox-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-4);
          border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: 600 14px var(--font);
          text-decoration: none; white-space: nowrap; cursor: pointer;
          transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
a.ox-btn, a.ox-btn:hover { color: var(--on-brand); }
.ox-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.ox-btn:not(:disabled):active { transform: translateY(1px) scale(.98); }
.ox-btn:not(.secondary):not(.quiet):not(.danger):not(:disabled):hover { box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 60%, transparent); }
.ox-btn.secondary, a.ox-btn.secondary { background: var(--surface-200); color: var(--ink); border-color: var(--line-strong); }
.ox-btn.secondary:hover, a.ox-btn.secondary:hover { background: var(--surface-300); color: var(--ink); border-color: var(--ink-muted); }
.ox-btn.outline, a.ox-btn.outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.ox-btn.outline:hover, a.ox-btn.outline:hover { background: var(--brand-soft); color: var(--brand-strong); }
.ox-btn.danger, a.ox-btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.ox-btn.danger:hover, a.ox-btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.ox-btn.quiet, a.ox-btn.quiet { background: transparent; border-color: transparent; color: var(--ink-muted); }
.ox-btn.quiet:hover, a.ox-btn.quiet:hover { background: var(--surface-300); color: var(--ink); border-color: transparent; }
.ox-btn.small { height: 30px; padding: 0 var(--space-3); font-size: 13px; font-weight: 500; }
.ox-btn:disabled, .ox-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ox-btn .icon { margin: 0 -2px; }
.ox-btn.busy, .oui-btn.busy { pointer-events: none; opacity: .75; }
.ox-btn.busy::after, .oui-btn.busy::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: oui-spin .7s linear infinite; }
@keyframes oui-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------------------- app shell: navy side bar */
.oui-shell { display: grid; grid-template-columns: var(--side-w, 248px) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .22s var(--ease-out); }
.oui-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
            color: var(--on-navy); overflow-y: auto; z-index: 25; scrollbar-color: var(--navy-line) transparent; }
.oui-side-head { display: flex; align-items: center; gap: var(--space-2); height: 60px; padding: 0 var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--navy-line); flex: none; }
.oui-logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--on-navy); text-decoration: none; font-weight: 650; font-size: 15px; letter-spacing: -.005em; }
.oui .oui-logo, .oui .oui-logo:hover { color: var(--on-navy); }
.oui-logo .mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; letter-spacing: .02em;
                  color: #fff; background: linear-gradient(135deg, #2563EB 0%, #0891B2 100%); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .8), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.oui-logo .name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.oui-logo .name small { font-size: 11px; font-weight: 500; color: var(--on-navy-muted); letter-spacing: .04em; text-transform: uppercase; }
.oui-side-collapse { width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; color: var(--on-navy-muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.oui-side-collapse:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.oui-side-collapse .icon { transition: transform .2s var(--ease-out); }
.oui-side nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); flex: 1; }
.oui-side .group { margin: var(--space-4) var(--space-3) var(--space-1); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--on-navy-muted); text-transform: uppercase; letter-spacing: .07em; }
.oui-side nav > .group:first-child { margin-top: var(--space-1); }
/* C106: menu groups that open and close (NavGroup); the side bar keeps its scroll position (oasis-ui.js). */
.oui-navgroup, .oui-navgroup > .items { display: flex; flex-direction: column; gap: 2px; }
.oui-navgroup.collapsed > .items { display: none; }
.oui-side nav > .oui-navgroup:first-child > .group { margin-top: var(--space-1); }
.oui-side button.group { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 4px 0; border: 0;
                         background: none; font-family: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.oui-side button.group:hover { color: #fff; }
.oui-side button.group .icon { flex: none; transition: transform .2s var(--ease-out); }
.oui-navgroup.collapsed > button.group .icon { transform: rotate(-90deg); }
.oui-shell.rail .oui-navgroup.collapsed > .items { display: flex; }
@media (prefers-reduced-motion: reduce) { .oui-side button.group .icon { transition: none; } }
.oui-side a { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-md);
              color: var(--on-navy-muted); text-decoration: none; font-weight: 500; transition: background-color .15s, color .15s; }
.oui .oui-side a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.oui .oui-side a.active { background: linear-gradient(90deg, rgba(37, 99, 235, .55), rgba(37, 99, 235, .22)); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #60A5FA; }
.oui-side a .icon, .oui-side a .ico { opacity: .85; transition: transform .2s var(--ease-out); }
.oui-side a:hover .icon, .oui-side a:hover .ico { transform: translateX(2px); }
.oui-side a.active .icon, .oui-side a.active .ico { opacity: 1; color: #93C5FD; }
.oui-side a .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oui-side a .oui-navcount { margin-left: auto; flex: none; } /* C43: "My work" badge */
.oui-shell.rail .oui-side a .oui-navcount { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.oui-side-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--navy-line); font-size: 12px; color: var(--on-navy-muted); flex: none; }
.oui-side :focus-visible { outline-color: #93C5FD; }

.oui-mainwrap { display: flex; flex-direction: column; min-width: 0; background: radial-gradient(1200px 380px at 70% -140px, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%), var(--surface-100); }
.oui-top { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6);
           background: color-mix(in srgb, var(--surface-200) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
           border-bottom: 1px solid var(--line); }
.oui-top .oui-logo { display: none; }
.oui-search { flex: 1; max-width: 520px; position: relative; display: flex; align-items: center; }
.oui-search .icon { position: absolute; left: 10px; color: var(--ink-muted); pointer-events: none; }
.oui .oui-search input { width: 100%; height: 38px; padding: 0 56px 0 36px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-100); font: inherit; color: var(--ink); }
.oui .oui-search input:focus { background: var(--surface-200); }
.oui-search kbd { position: absolute; right: 10px; pointer-events: none; }
.oui-top .oui-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.oui-userchip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-200); min-width: 0; }
.oui-userchip .oxk-avatar { box-shadow: 0 0 0 2px var(--surface-200); }
.oui-userchip .who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.oui-userchip .who strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.oui-userchip .who small { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.oui-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--ink-muted); cursor: pointer; text-decoration: none; }
.oui-icon-btn:hover { background: var(--surface-300); color: var(--ink); }
.oui-icon-btn.bordered { border-color: var(--line); }
.oui-theme .when-dark { display: none; }
:root[data-theme="dark"] .oui-theme .when-dark { display: inline-block; }
:root[data-theme="dark"] .oui-theme .when-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .oui-theme .when-dark { display: inline-block; }
  :root:not([data-theme="light"]) .oui-theme .when-light { display: none; }
}
.oui-menu-btn { display: none !important; }
.oui-main { flex: 1; min-width: 0; padding: var(--space-6) var(--space-8) var(--space-8); }
.oui-main > .oui-content { max-width: var(--page-max); margin: 0 auto; }
.oui-main > .oui-content > * { animation: oui-rise .36s var(--ease-out) backwards; }
.oui-main > .oui-content > *:nth-child(2) { animation-delay: .03s; }
.oui-main > .oui-content > *:nth-child(3) { animation-delay: .06s; }
.oui-main > .oui-content > *:nth-child(n+4) { animation-delay: .09s; }
.oui-main > .oui-content > .oxk-page { animation: none; }
.oui-foot { padding: var(--space-4) var(--space-6); color: var(--ink-muted); font-size: 12px; }
.oui-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 24; }
.oui-scrim[hidden] { display: none !important; }
@keyframes oui-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes oui-fade { from { opacity: 0; } to { opacity: 1; } }

/* rail: the side bar folded to icons (remembered per browser) */
.oui-shell.rail { --side-w: 72px; }
.oui-shell.rail .oui-logo .name, .oui-shell.rail .oui-side .group, .oui-shell.rail .oui-side a .label, .oui-shell.rail .oui-side-foot { display: none; }
.oui-shell.rail .oui-side-head { justify-content: center; padding: 0; flex-direction: column; height: auto; gap: 6px; padding: 12px 0; }
.oui-shell.rail .oui-logo { flex: none; }
.oui-shell.rail .oui-side-collapse .icon { transform: rotate(180deg); }
.oui-shell.rail .oui-side nav { padding: var(--space-3) 10px; }
.oui-shell.rail .oui-side a { justify-content: center; padding: 0; }
.oui-shell.rail .oui-side a:hover::after { content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--surface-200);
                                          padding: 4px 10px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; z-index: 50; pointer-events: none; }

/* phones and narrow windows: the side bar slides in */
@media (max-width: 1023px) {
  .oui-shell, .oui-shell.rail { --side-w: 0px; grid-template-columns: minmax(0, 1fr); }
  .oui-side { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; max-width: 86vw; transform: translateX(-100%); transition: transform .2s var(--ease-out); }
  .oui-shell.rail .oui-logo .name, .oui-shell.rail .oui-side .group, .oui-shell.rail .oui-side a .label { display: revert; }
  .oui-shell.rail .oui-side a { justify-content: flex-start; padding: 0 var(--space-3); }
  .oui-side.open { transform: none; box-shadow: var(--shadow-pop); }
  .oui-side-collapse { display: none; }
  .oui-menu-btn { display: inline-grid !important; }
  .oui-top { padding: 0 var(--space-3); }
  .oui-top .oui-logo { display: flex; flex: none; color: var(--ink); }
  .oui .oui-top .oui-logo, .oui .oui-top .oui-logo:hover { color: var(--ink); }
  .oui-top .oui-logo .name { display: none; }
  .oui-main { padding: var(--space-4); }
  .oui-userchip .who { display: none; }
  .oui-userchip { padding: 2px; }
  .oui-search kbd { display: none; }
}
@media (max-width: 640px) { .oui-search { display: none; } }

/* ------------------------------------------------------------------------------ signed-out pages (sign-in, public) */
.oui-auth { min-height: 100vh; display: flex; flex-direction: column;
            background: radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
                        radial-gradient(700px 360px at -10% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface-100); }
.oui-auth-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-8); }
.oui-auth-head .oui-logo, .oui .oui-auth-head .oui-logo:hover { color: var(--ink); }
.oui-auth-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }
.oui-auth-card { width: 100%; max-width: 460px; margin: var(--space-6) auto; background: var(--surface-200); border: 1px solid var(--line); border-radius: 14px;
                 padding: var(--space-8); box-shadow: var(--shadow-2); animation: oui-rise .4s var(--ease-out) backwards; }
.oui-auth-card h1 { font-size: 24px; line-height: 32px; }
.oui-auth-foot { text-align: center; color: var(--ink-muted); font-size: 12.5px; padding: var(--space-6); }
.oui-auth-foot a { color: var(--ink-muted); }
@media (max-width: 960px) {
  .oui-auth-head { padding: var(--space-3) var(--space-4); }
  .oui-auth-main { padding: var(--space-3) var(--space-4) var(--space-6); }
  .oui-auth-card { padding: var(--space-6) var(--space-4); margin: var(--space-3) auto; }
}

/* ------------------------------------------------------------------- page heading (pages not yet on OxPage) */
.oui-crumbs { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); margin-bottom: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oui-crumbs a { color: var(--ink-muted); text-decoration: none; }
.oui-crumbs a:hover { color: var(--brand); text-decoration: underline; }
.oui-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.oui-pagehead h1 { margin: 0; font-size: 26px; line-height: 34px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.oui-pagehead > div:first-child { min-width: 0; flex: 1 1 280px; }
.oui-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------------- oui-btn: the first passes' button = ox-btn */
.oui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-md);
           border: 1px solid var(--line-strong); background: var(--surface-200); color: var(--ink); font: 500 14px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
           transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
.oui a.oui-btn { color: var(--ink); }
.oui-btn:hover { background: var(--surface-300); border-color: var(--ink-muted); }
.oui-btn:not([disabled]):active { transform: translateY(1px) scale(.98); }
.oui-btn.primary, .oui a.oui-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.oui-btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 60%, transparent); }
.oui-btn.danger, .oui a.oui-btn.danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; font-weight: 600; }
.oui-btn.danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
.oui-btn.ghost, .oui a.oui-btn.ghost { border-color: transparent; background: transparent; color: var(--brand); }
.oui-btn.ghost:hover { background: var(--brand-soft); }
.oui-btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.oui-btn[disabled], .oui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.oui-btn .icon, .oui-btn .ico { margin: 0 -2px; }

/* ---------------------------------------------------------------------------------------------- forms (oui-field) */
.oui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); min-width: 0; }
.oui-field > label { font: 500 13px/18px var(--font); color: var(--ink-muted); }
.oui-field > label > span[aria-hidden] { color: var(--danger); }
.oui-field .help { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); }
.oui-field .error { font-size: 12.5px; line-height: 16px; color: var(--danger); font-weight: 500; display: flex; gap: 6px; align-items: center; animation: oui-rise .18s var(--ease-out) both; }
.oui-field .error::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color: #FFF; font-size: 10px; font-weight: 700; flex: none; }
.oui-field > input, .oui-field > select, .oui-field > textarea, .oui-field > .oui-prefix { width: 100%; }
.oui-prefix { display: flex; align-items: stretch; }
.oui-prefix > span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--surface-300); color: var(--ink-muted); font-weight: 500; }
.oui .oui-prefix > input { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; flex: 1; }
.oui-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); padding: var(--space-3); background: var(--surface-200);
               border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.oui-filters .oui-field { margin: 0; min-width: 150px; }
.oui-filters > input[type=search], .oui-filters > .oui-field:first-child { flex: 1 1 240px; }
.oui-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--space-4); }
.oui-check { display: flex; gap: 10px; align-items: center; margin: var(--space-1) 0 var(--space-3); cursor: pointer; }
.oui-check input { margin: 0; flex: none; }
.oui-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.oui-switch input { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line-strong); margin: 0; cursor: pointer; transition: background .18s; flex: none; }
.oui-switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease-out); }
.oui-switch input:checked { background: var(--brand); }
.oui-switch input:checked::after { transform: translateX(16px); }

/* -------------------------------------------------------------------------------- cards, KPI tiles, facts, columns */
.oui-card { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6) var(--space-6); margin-bottom: var(--space-4); box-shadow: var(--shadow-1); min-width: 0; }
.oui-card > h2:first-child, .oui-card > h3:first-child { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-6)) var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line);
                                                     font-size: 15.5px; line-height: 24px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.oui-card > h2:first-child:only-child, .oui-card > h3:first-child:only-child { border-bottom: 0; margin-bottom: calc(-1 * var(--space-6)); }
.oui-card.flush { padding: 0; overflow: hidden; }
.oui-card.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.oui-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.oui-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); min-height: 112px; background: var(--surface-200); border: 1px solid var(--line);
           border-radius: var(--radius-lg); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); overflow: hidden; isolation: isolate;
           transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s; }
.oui-kpi::before { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; z-index: -1;
                   background: radial-gradient(circle, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%); transition: transform .4s var(--ease-out); }
.oui-kpi .label { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 500; }
.oui-kpi .value { font-size: 28px; line-height: 36px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: auto; }
.oui-kpi .note { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.oui a.oui-kpi { color: var(--ink); }
a.oui-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
a.oui-kpi:hover::before { transform: scale(1.35); }
.oui-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.oui-facts dt { color: var(--ink-muted); font-size: 13px; }
.oui-facts dd { margin: 0; overflow-wrap: anywhere; }
.oui-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; }
.oui-cols > .oui-card { margin-bottom: 0; }

/* ------------------------------------------------------------------------------------------------- status chips */
.oui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; height: 22px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.oui-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.oui-chip.ok { color: var(--ok-ink); background: var(--ok-bg); }
.oui-chip.info { color: var(--info-ink); background: var(--info-bg); }
.oui-chip.warn { color: var(--warn-ink); background: var(--warn-bg); }
.oui-chip.bad { color: var(--bad-ink); background: var(--bad-bg); }
.oui-chip.neutral { color: var(--neutral-ink); background: var(--neutral-bg); }

/* ------------------------------------------------------------------------------------------------- data table */
.oui-table-wrap { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; box-shadow: var(--shadow-1); margin-bottom: var(--space-4); }
.oui-card .oui-table-wrap, .oxk-section-body .oui-table-wrap { box-shadow: none; }
.oui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 20px; }
.oui-table caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line); }
.oui-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-300); text-align: left; font: 600 11.5px/16px var(--font); letter-spacing: .04em; text-transform: uppercase;
                color: var(--ink-muted); padding: 10px var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.oui-table td { padding: 10px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.oui-table tbody tr:last-child td { border-bottom: 0; }
.oui-table tbody tr { transition: background-color .12s; }
.oui-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-300) 55%, transparent); }
.oui-table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.oui-table th a:hover { color: var(--ink); }
.oui-table th a[aria-sort]::after { content: "↕"; color: var(--line-strong); }
.oui-table th[aria-sort=ascending] a::after { content: "↑"; color: var(--brand); }
.oui-table th[aria-sort=descending] a::after { content: "↓"; color: var(--brand); }
.oui-table th[aria-sort=ascending], .oui-table th[aria-sort=descending] { color: var(--ink); }
.oui-table td .oui-btn.sm + .oui-btn.sm { margin-left: 4px; }
.oui-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-muted); flex-wrap: wrap; background: var(--surface-200); }
.oui-pager nav { display: flex; gap: 4px; }
.oui-pager a, .oui-pager span.cur { min-width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); font-weight: 500; }
.oui-pager a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.oui-pager span.cur { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ------------------------------------------------------------------------------------------------- tabs, steps */
.oui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.oui-tabs::-webkit-scrollbar { display: none; }
.oui-tabs a, .oui-tabs span { position: relative; padding: 10px 12px 12px; color: var(--ink-muted); text-decoration: none; white-space: nowrap; font-weight: 500; border-radius: var(--radius-md) var(--radius-md) 0 0; transition: color .15s, background-color .15s; }
.oui-tabs a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-300) 70%, transparent); }
.oui-tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); transform: scaleX(0); transition: transform .25s var(--ease-out); }
.oui-tabs a[aria-current=page] { color: var(--ink); font-weight: 600; }
.oui-tabs a[aria-current=page]::after { transform: scaleX(1); }
.oui-tabs span[aria-disabled=true] { color: var(--line-strong); cursor: not-allowed; }
.oui-tabs span[aria-disabled=true] .soon { font-size: 11px; margin-left: 4px; }
.oui-steps { list-style: none; display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; overflow-x: auto; }
.oui-steps li { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px 11px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.oui-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); }
.oui-steps li.done::after, .oui-steps li.current::after, .oui-steps li[aria-current]::after { background: var(--brand); }
.oui-steps li.current, .oui-steps li[aria-current] { color: var(--ink); }

/* --------------------------------------------------------------------------------------------------- states */
.oui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); color: var(--ink-muted); }
.oui-empty .empty-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
                         box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.oui-empty p { margin: 0; max-width: 46ch; }
.oui-skeleton { display: block; height: 14px; margin: 8px 0; border-radius: 4px; background-color: var(--surface-300);
                background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--surface-200) 70%, transparent) 50%, transparent 100%); background-size: 400px 100%; background-repeat: no-repeat;
                animation: oui-shimmer 1.3s linear infinite; }
@keyframes oui-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }

/* ------------------------------------------------------------------------------------------------ banner, toast */
.oui-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); border: 1px solid transparent; animation: oui-rise .22s var(--ease-out) both; }
.oui-banner > .icon { margin-top: 2px; flex: none; }
.oui-banner.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 22%, transparent); }
.oui-banner.info { background: var(--info-bg); color: var(--info-ink); border-color: color-mix(in srgb, var(--info-ink) 22%, transparent); }
.oui-banner.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 25%, transparent); }
.oui-banner.bad { background: var(--bad-bg); color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad-ink) 25%, transparent); }
.oui-banner a { color: inherit; font-weight: 600; }
.oui-toasts { position: fixed; right: 16px; top: 76px; z-index: 140; display: flex; flex-direction: column; gap: var(--space-2); width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.oui-toast { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); overflow: hidden; pointer-events: auto;
             background: var(--surface-200); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--tone-success); border-radius: var(--radius-md);
             box-shadow: var(--shadow-pop), 0 12px 28px -12px rgba(0, 0, 0, .3); animation: oui-toast-in .26s var(--ease-out) both; font-size: 13.5px; line-height: 20px; }
.oui-toast > .icon { color: var(--tone-success); flex: none; margin-top: 1px; }
.oui-toast.bad { border-left-color: var(--danger); background: var(--surface-200); }
.oui-toast.bad > .icon { color: var(--danger); }
.oui-toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tone-success); opacity: .55; transform-origin: left; animation: oui-toast-time 4s linear forwards; }
.oui-toast.bad::after { display: none; }
.oui-toast button { margin-left: auto; flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--ink-muted); font: inherit; font-size: 18px; cursor: pointer; }
.oui-toast button:hover { background: var(--surface-300); color: var(--ink); }
@keyframes oui-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes oui-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------------------------------------------------------------------------ dialog, drawer */
dialog.oui-dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface-200);
                    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .12); color: var(--ink); }
dialog.oui-dialog[open] { animation: oui-dialog-in .22s var(--ease-out) backwards; }
dialog.oui-dialog::backdrop, dialog.oui-drawer::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog.oui-dialog > form, dialog.oui-dialog > .body { padding: var(--space-4) var(--space-6) var(--space-6); }
dialog.oui-dialog header, dialog.oui-drawer header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
dialog.oui-dialog header h2, dialog.oui-drawer header h2 { margin: 0; font-size: 17px; line-height: 24px; }
dialog.oui-dialog footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); }
dialog.oui-drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw); border: 0; border-left: 1px solid var(--line); padding: 0; background: var(--surface-200); box-shadow: var(--shadow-pop); color: var(--ink); }
dialog.oui-drawer[open] { animation: oui-drawer-in .24s var(--ease-out) backwards; }
dialog.oui-drawer > .body { padding: var(--space-4) var(--space-6); }
.oui-close { width: 32px; height: 32px; display: inline-grid; place-items: center; background: none; border: 0; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-muted); padding: 0; }
.oui-close:hover { background: var(--surface-300); color: var(--ink); }
@keyframes oui-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes oui-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------------------------------- timeline, usage bar */
.oui-timeline { list-style: none; margin: 0; padding: 0; }
.oui-timeline li { position: relative; padding: 0 0 var(--space-4) 30px; }
.oui-timeline li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-soft); box-shadow: inset 0 0 0 3px var(--brand), 0 0 0 4px var(--surface-200); }
.oui-timeline li::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: 2px; width: 2px; background: var(--line); }
.oui-timeline li:last-child { padding-bottom: 0; }
.oui-timeline li:last-child::after { display: none; }
.oui-bar { height: 8px; border-radius: 999px; background: var(--surface-300); overflow: hidden; }
.oui-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent))); transform-origin: left; animation: oui-grow .8s var(--ease-out) .1s backwards; }
.oui-bar.warn > span { background: var(--warning); }
.oui-bar.bad > span { background: var(--danger); }
@keyframes oui-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------------------------------------- reduced motion, print */
@media (prefers-reduced-motion: reduce) {
  .oui *, .oui *::before, .oui *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .oui-side, .oui-top, .oui-toasts, .oui-skip, .oui-scrim, .oui-actions, .oxk-actions { display: none !important; }
  .oui-shell { display: block; }
  .oui-main { padding: 0; }
  body.oui { background: #fff; color: #000; }
  .oui-card, .oui-table-wrap, .oui-kpi { box-shadow: none; }
}

/* ------------------------------------------------------------------------------------------------ U1 refinements */
/* tiles and cards that are links keep body text colours */
.oui a.oxk-stat, .oui a.ox-card, .oui a.oxk-tile, .oui a.oui-kpi { color: var(--ink); text-decoration: none; }
.oui a.oxk-stat.hero { color: #fff; }
/* native selects get the kit's caret */
.oui select:not([multiple]):not(.oxk-select) { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
/* links inside tables read as record names */
.oui-table td a:not(.oui-btn):not(.ox-btn) { font-weight: 550; text-decoration: none; }
.oui-table td a:not(.oui-btn):not(.ox-btn):hover { text-decoration: underline; }
.oui-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 560px) { .oui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }
:root[data-theme="dark"] .oui-btn.danger, :root[data-theme="dark"] .oui a.oui-btn.danger { color: #1B0A08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .oui-btn.danger, :root:not([data-theme="light"]) .oui a.oui-btn.danger { color: #1B0A08; } }
@media (min-width: 1280px) { .oxk-stats:not(.cols-3) { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.oxk-person small { font-weight: 400; }
a.oxk-person { text-decoration: none; }
a.oxk-person:hover > span > span:first-child { text-decoration: underline; }

/* Brand: the Oasis Services logo (BrandLogo) and the palm app-icon mark in the side bar */
.oui-brandlogo { display: inline-flex; align-items: center; flex: none; }
.oui-brandlogo img { display: block; height: var(--h, 40px); width: auto; }
.oui-brandlogo .on-dark { display: none; }
:root[data-theme="dark"] .oui-brandlogo .on-light { display: none; }
:root[data-theme="dark"] .oui-brandlogo .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .oui-brandlogo .on-light { display: none; }
  :root:not([data-theme="light"]) .oui-brandlogo .on-dark { display: block; }
}
.oui-logo .mark.brand-mark { background: #fff; padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.oui-logo .mark.brand-mark img { width: 100%; height: 100%; display: block; }

/* C55: payment-link checkout (CheckoutShell) — summary on a dark panel tinted by the product colour, action on the right. */
.oui-checkout { --co-brand: #1D4ED8; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface-200); }
.oui-checkout-summary { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 56px clamp(24px, 6vw, 88px) 32px; color: #fff; isolation: isolate; overflow: hidden;
                        background: radial-gradient(560px 360px at 100% 0%, color-mix(in srgb, var(--co-brand) 55%, transparent), transparent 70%), linear-gradient(160deg, #0B1A33 0%, #10244A 70%, color-mix(in srgb, var(--co-brand) 40%, #0B1A33) 140%); }
.oui-checkout-merchant { display: flex; align-items: center; gap: 12px; }
.oui-checkout-merchant strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.oui-checkout-merchant small { display: block; color: rgba(255, 255, 255, .7); font-size: 12.5px; margin-top: 2px; }
.oui-checkout-initial { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.oui-checkout-amount { margin-top: 12px; }
.oui-checkout-eyebrow { display: block; color: rgba(255, 255, 255, .72); font-size: 13px; margin-bottom: 6px; }
.oui-checkout-figure { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.oui-checkout-amount p { margin: 10px 0 0; color: rgba(255, 255, 255, .82); max-width: 44ch; }
.oui-checkout-lines { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; }
.oui-checkout-lines dt { color: rgba(255, 255, 255, .66); }
.oui-checkout-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.oui-checkout-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255, 255, 255, .66); font-size: 12px; }
.oui-checkout-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.oui-checkout-summary .oui-brandlogo .on-light { display: none; }
.oui-checkout-summary .oui-brandlogo .on-dark { display: block; }
.oui-checkout-action { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.oui-checkout-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.oui .oui-checkout-inner h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.oui-checkout-inner .oxb-block, .oui-checkout-inner .ox-btn.oxb-block { width: 100%; justify-content: center; }
.oui-checkout-note { color: var(--ink-muted); font-size: 12.5px; line-height: 19px; }
.oui-checkout-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.oui-checkout-state .oui-checkout-badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-300); color: var(--ink); }
.oui-checkout-state .oui-checkout-badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.oui-checkout-state .oui-checkout-badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
@media (max-width: 860px) {
  .oui-checkout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .oui-checkout-summary { padding: 28px 20px 24px; gap: 18px; }
  .oui-checkout-action { padding: 28px 20px 40px; align-items: flex-start; }
}

/* =====================================================================================================================
   C56 · one sober style for every Oasis app (Admin, Console, Identity, public site), matching the checkout and sign-in
   pages: flat cards with hairline borders, neutral icon tiles, a quiet navy side bar with a thin active marker, small
   uppercase table heads, calmer KPI tiles. Written with the .oui prefix so it wins over oasis-kit.css (loaded after).
   ===================================================================================================================== */
.oui { --radius-lg: 12px; }
/* side bar: navy, a soft highlight and a thin marker for the current page */
.oui .oui-side { background: var(--navy); }
.oui .oui-side a { color: var(--on-navy-muted); font-weight: 500; }
.oui .oui-side a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.oui .oui-side a.active { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 #93C5FD; }
.oui .oui-side a.active .icon, .oui .oui-side a.active .ico { color: #fff; }
.oui .oui-side a:hover .icon, .oui .oui-side a:hover .ico { transform: none; }
.oui .oui-side .group { color: rgba(169, 184, 208, .8); font-size: 10.5px; letter-spacing: .09em; }
/* top bar: white, hairline */
.oui .oui-top { background: color-mix(in srgb, var(--surface-200) 92%, transparent); box-shadow: none; border-bottom: 1px solid var(--line); }
/* page head: neutral icon tile, quiet eyebrow */
.oui .oxk-head-icon, .oui .oxk-section-icon { background: var(--surface-300); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.oui .oxk-head-icon { width: 44px; height: 44px; border-radius: 12px; }
.oui .oxk-eyebrow { color: var(--ink-muted); letter-spacing: .08em; }
.oui .oxk-head h1 { font-weight: 650; letter-spacing: -.02em; }
/* cards and sections: flat */
.oui .oxk-section, .oui .ox-card, .oui .oxk-tile { box-shadow: none; border-color: var(--line); }
.oui .oxk-section-head { padding: 14px var(--space-4); }
.oui .oxk-section-head h2, .oui .oxk-section-head h3 { font-size: 15px; letter-spacing: -.005em; }
/* KPI tiles: no glow, smaller figures, the tone only on the icon */
.oui .oxk-stat { box-shadow: none; background: var(--surface-200); }
.oui .oxk-stat::before { display: none; }
.oui .oxk-stat-icon { background: var(--surface-300); color: var(--t); border: 1px solid var(--line); }
.oui .oxk-stat-label { font-size: 13px; }
.oui .oxk-stat-value { font-size: 28px; line-height: 34px; font-weight: 650; }
.oui .oxk-stat.clickable:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.oui .oxk-stat.hero { background: var(--navy); }
.oui .oxk-stat.hero::before { display: none; }
/* tables: light head, row hover */
.oui .oui-table th { background: var(--surface-100); color: var(--ink-muted); font-size: 11px; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.oui .oui-table tbody tr:hover > td { background: color-mix(in srgb, var(--surface-300) 45%, transparent); }
.oui .oui-table-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* buttons: a little rounder, no lift */
.oui .ox-btn { border-radius: 8px; box-shadow: none; }
.oui .ox-btn:hover { transform: none; }
/* tabs: underline in ink */
.oui .oxk-tab.active { color: var(--ink); }
.oui .oxk-section-icon[class*="tone-"], .oui .oxk-stat-icon, .oui .oxk-head-icon[class*="tone-"] { background: var(--surface-300); border: 1px solid var(--line); }
.oui .oxk-section-icon[class*="tone-"], .oui .oxk-head-icon[class*="tone-"] { color: var(--ink); }