/* ============================================================================
   White Sand OS — Visual refresh (last sheet before primitives.css)
   ----------------------------------------------------------------------------
   One layer that lifts every screen at once through the shared classes they
   already use (.page-head, .kpi, .card, .tbl, .btn, .badge, .ni …). It only
   restyles; it never hides content or changes layout semantics, so a screen
   that looks wrong here can be fixed by deleting a rule, not by touching JS.

   Principles:
   • Calm by default. Neutral surfaces, one brand-red action per view, no
     decorative glows. Red means "act here", danger keeps its own role.
   • Hierarchy through type and space, not boxes. Bigger titles, quieter
     labels, fewer borders and shadows.
   • Readable density. 14px body, 44px touch rows, tabular numerals.
   All colours come from tokens.css, so every theme (light, dark, sand,
   midnight, ocean, black, hc) follows automatically.
   ========================================================================== */

:root {
  --fs-sm: 13px;
  --fs-md: 14px;
  --rf-radius: 14px;
  --rf-active-bg: color-mix(in srgb, var(--sidebar-text-strong) 7%, transparent);
  --rf-hover-bg: color-mix(in srgb, var(--sidebar-text-strong) 5%, transparent);
  --rf-link: var(--text);
}

body { font-size: var(--fs-md); }

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar .sb-scroll { padding: 10px 10px 16px; }
.sb-navsearch input { height: 36px; border-radius: 10px; }

/* Daily-work rows pinned above the hubs */
.sb-home { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--sidebar-line); }

.ni {
  min-height: 38px;
  padding-inline: 10px;
  border-radius: 10px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--sidebar-text);
}
.ni:hover { background: var(--rf-hover-bg); color: var(--sidebar-text-strong); }
.ni.active {
  background: var(--rf-active-bg);
  color: var(--sidebar-text-strong);
  font-weight: 600;
}
.ni.active::before {
  inset-block: 9px;
  width: 3px;
  background: var(--brand);
}
.ni.active .ni-ic { color: var(--brand); }
.ni-ic { width: 20px; opacity: .75; }

/* Hub heads: icon + title, no counters, quiet caret */
.sb-hub { margin: 0 0 2px; border: 0; border-radius: 0; }
.sb-hub-head {
  grid-template-columns: auto 1fr auto;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--sidebar-text-strong);
}
.sb-hub-head:hover, .sb-hub-head:focus-visible { background: var(--rf-hover-bg); }
.sb-hub-ic { display: grid; place-items: center; width: 20px; color: var(--sidebar-text); }
.sb-hub-head[aria-expanded="true"] .sb-hub-ic { color: var(--brand); }
.sb-hub-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
.sb-hub-count { display: none; }
.sb-hub-caret { font-size: 14px; color: var(--sidebar-text); opacity: .7; }
.sb-hub-body { padding: 2px 0 8px; }
.sb-hub-body .ni { padding-inline-start: 40px; min-height: 36px; font-size: 13.5px; }
.sb-hub-body .ni .ni-ic { display: none; }
.sb-hub-body .ni.active::before { inset-inline-start: 22px; }
.sb-flat > .sb-sec { display: none; }
.sb-more {
  width: auto;
  margin: 2px 0 0;
  padding: 6px 10px 6px 10px;
  padding-inline-start: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 12.5px;
  text-align: start;
  opacity: .85;
}
.sb-more:hover, .sb-more:focus-visible { background: var(--rf-hover-bg); color: var(--sidebar-text-strong); border: 0; }
.app-frame.collapsed .sb-hub-body .ni { padding-inline: 0; }
.app-frame.collapsed .sb-hub-body .ni .ni-ic { display: grid; }
.app-frame.collapsed .sb-home { border-bottom: 0; }

/* Quick access (favourites / recent) reads as a label, not a heading */
.sb-quick { border-bottom-color: var(--sidebar-line); }
.sb-sec-label { font-size: 11px; letter-spacing: .02em; text-transform: none; }

/* ---- Topbar ------------------------------------------------------------- */
.topbar { background: color-mix(in srgb, var(--surface-0) 88%, transparent); }
.cmdk-trigger-label { border-radius: 12px; background: var(--surface-1); }

/* ---- Page header -------------------------------------------------------- */
.page-head { margin-bottom: 24px; gap: 16px; align-items: flex-end; }
.page-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  gap: 12px;
}
.page-sub { margin-top: 4px; font-size: var(--fs-md); color: var(--text-2); }
.page-title-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn { height: 38px; border-radius: 10px; font-size: var(--fs-md); font-weight: 600; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { box-shadow: 0 2px 8px var(--brand-glow); }
.btn-outline { --bd: var(--line-strong); }
.btn-sm { height: 32px; font-size: 12.5px; border-radius: 9px; }

/* ---- Cards -------------------------------------------------------------- */
.card { border-radius: var(--rf-radius); box-shadow: none; }
.card-head { padding-block: 14px; }
.card-title { font-size: 15px; font-weight: 600; }
.card-hover:hover, .kpi-link:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }

/* ---- KPI tiles: label first, big calm number ------------------------------ */
.grid-kpi { gap: 12px; }
.kpi {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--rf-radius);
  box-shadow: none;
}
.kpi:not(.kpi-link):hover { transform: none; box-shadow: none; border-color: var(--line); }
.kpi-top { order: -1; }
.kpi-label { margin-top: 0; font-size: 13px; color: var(--text-2); }
.kpi-val {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { border-radius: var(--rf-radius); }
.tbl thead th {
  background: var(--surface-1);
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
}
.tbl tbody td { padding: 12px 16px; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.tbl .num, .tbl td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.cell-main { font-weight: 600; }

/* Record names read as text; the brand colour is kept for actions */
.entity-link { color: var(--rf-link); font-weight: 600; }
.entity-link:hover { color: var(--brand); }

.avatar { border-radius: 50%; }
.avatar.lg, .avatar.xl { border-radius: 16px; }

/* ---- Inputs, filters, badges ------------------------------------------- */
.searchbox input, .select, .input, input.inp {
  border-radius: 10px;
}
.badge { font-weight: 600; }

/* ---- Empty states: gentle, not alarming --------------------------------- */
.empty { color: var(--text-2); }
.empty .icn { color: var(--text-3); opacity: .8; }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 920px) {
  .page-title { font-size: 22px; }
  .page-head { align-items: stretch; }
  .page-actions { width: 100%; }
  .page-actions .btn-primary { flex: 1; }
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px; }
  .kpi-val { font-size: 22px; }
  /* A bare 1fr track grows to its widest child's min-content (the topbar),
     which pushed the whole frame ~100px past a phone screen. */
  .app-frame, .app-frame.collapsed { grid-template-columns: minmax(0, 1fr); }
  .app-main, .app-content { min-width: 0; }
  .topbar { gap: 8px; padding-inline: 12px; }
  .topbar-search { min-width: 0; flex: 1; max-width: none; }
  .topbar .topbar-spacer { display: none; }
  .topbar .lang-btn, .topbar .conn-pill, .topbar .user-meta { display: none; }
  .user-trigger { padding: 3px; }
  .sb-hub-head, .ni { min-height: 44px; }
}

/* ============================================================================
   White Sand identity — desktop web layer (themes "identity" / "identity-night")
   ----------------------------------------------------------------------------
   Everything below is scoped to ≥921px AND an identity theme, so phones and
   tablets, and users on any other theme, render exactly as before.
   Type: Alexandria for display (headings, big numbers), IBM Plex Mono for
   codes and figures, IBM Plex Sans Arabic stays the body face.
   ========================================================================== */
@media (min-width: 921px) {
  :root[data-theme^="identity"] {
    --font-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-code: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
    --grid-line: color-mix(in srgb, var(--text) 4%, transparent);
    --rf-radius: 14px;
  }

  /* Canvas: warm sand with a faint drafting grid (project drawings) */
  :root[data-theme^="identity"] .app-main {
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
      var(--surface-0);
  }

  /* Sidebar: logo black with a red spine */
  :root[data-theme^="identity"] .app-side { position: relative; overflow: hidden; }
  :root[data-theme^="identity"] .app-side::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; pointer-events: none;
    background: linear-gradient(var(--brand) 0 38%, transparent 38%);
  }
  :root[data-theme^="identity"] .app-side > * { position: relative; z-index: 1; }
  :root[data-theme^="identity"] .sb-brand { border-bottom-color: var(--sidebar-line); }
  :root[data-theme^="identity"] .sb-brand-txt b { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
  :root[data-theme^="identity"] .sb-navsearch input { background: rgba(255,255,255,.06); border-color: transparent; color: var(--sidebar-text-strong); }
  :root[data-theme^="identity"] .sb-hub-title { font-family: var(--font-display); font-weight: 500; }
  :root[data-theme^="identity"] .ni.active { background: var(--sidebar-active-bg); color: #fff; }
  :root[data-theme^="identity"] .ni.active .ni-ic,
  :root[data-theme^="identity"] .sb-hub-head[aria-expanded="true"] .sb-hub-ic { color: var(--brand); }
  :root[data-theme^="identity"] .sb-roleswitch { background: rgba(255,255,255,.06); }
  :root[data-theme^="identity"] .sb-roleswitch .rs-btn.on { background: #fff; color: #111; }
  :root[data-theme^="identity"] .collapse-btn { color: var(--sidebar-text); }

  /* Section names on the black sidebar: the space chips and panel links were
     drawn with the page's --text-2 (dark grey on black) and group headings at
     72% opacity — both unreadable. Use the sidebar's own ramp instead. */
  :root[data-theme^="identity"] .sb-sec,
  :root[data-theme^="identity"] .sb-subgroup > .sb-sec { opacity: 1; color: var(--sidebar-text); }
  :root[data-theme^="identity"] .sb-sec:hover { color: var(--sidebar-text-strong); }
  :root[data-theme^="identity"] .osr-space {
    color: var(--sidebar-text); border-color: rgba(255,255,255,.16); background: transparent;
  }
  :root[data-theme^="identity"] .osr-space:hover,
  :root[data-theme^="identity"] .osr-space:focus-visible {
    color: var(--sidebar-text-strong); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.32);
  }
  :root[data-theme^="identity"] .osr-space[aria-expanded="true"] {
    color: var(--sidebar-text-strong); background: rgba(255,255,255,.09); border-color: var(--brand);
  }
  :root[data-theme^="identity"] .osr-space-count { background: rgba(255,255,255,.12); color: var(--sidebar-text-strong); }
  :root[data-theme^="identity"] .osr-item { color: var(--sidebar-text); }
  :root[data-theme^="identity"] .osr-item:hover,
  :root[data-theme^="identity"] .osr-item:focus-visible { color: var(--sidebar-text-strong); background: rgba(255,255,255,.07); }
  :root[data-theme^="identity"] .osr-item[aria-current="page"] { color: var(--sidebar-text-strong); }
  :root[data-theme^="identity"] .osr-panel { border-color: rgba(255,255,255,.12); }
  :root[data-theme^="identity"] .osr-empty { color: var(--sidebar-text); }
  :root[data-theme^="identity"] .app-side .gsh-mode { color: color-mix(in srgb, var(--sidebar-text) 82%, transparent); }

  /* Topbar: paper, hairline, search as the primary instrument */
  :root[data-theme^="identity"] .topbar { background: color-mix(in srgb, var(--surface-0) 90%, transparent); }
  :root[data-theme^="identity"] .cmdk-trigger-label { background: var(--surface-1); border-color: var(--line-strong); border-radius: 10px; }
  :root[data-theme^="identity"] .kbd { font-family: var(--font-code); }

  /* Page header: editorial display title */
  :root[data-theme^="identity"] .page-title {
    font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; line-height: 1.15;
  }
  :root[data-theme^="identity"] .page-sub { font-size: 14px; }
  :root[data-theme^="identity"] .page-title-ic { background: var(--text); color: var(--surface-0); border: 0; border-radius: 10px; }
  :root[data-theme^="identity"] .crumbs { font-family: var(--font-code); letter-spacing: .06em; }

  /* Cards & KPI tiles */
  :root[data-theme^="identity"] .card,
  :root[data-theme^="identity"] .kpi,
  :root[data-theme^="identity"] .table-wrap { border-radius: var(--rf-radius); border-color: var(--line); }
  :root[data-theme^="identity"] .card-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
  :root[data-theme^="identity"] .kpi-val { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
  :root[data-theme^="identity"] .grid-kpi > .kpi:first-child { background: var(--text); border-color: var(--text); }
  :root[data-theme^="identity"] .grid-kpi > .kpi:first-child .kpi-val { color: var(--surface-0); }
  :root[data-theme^="identity"] .grid-kpi > .kpi:first-child .kpi-label { color: color-mix(in srgb, var(--surface-0) 65%, transparent); }

  /* Tables: quiet header, mono figures, ink record names */
  :root[data-theme^="identity"] .tbl thead th { background: var(--surface-1); color: var(--text-3); font-weight: 500; }
  /* REM-12: table cells use the numeral token, not the mono face (Arabic cells). */
  :root[data-theme^="identity"] .tbl .num,
  :root[data-theme^="identity"] .tbl td.num,
  :root[data-theme^="identity"] .tbl .mono { font-family: var(--font-cell-num); }
  :root[data-theme^="identity"] .mono { font-family: var(--font-code); }
  :root[data-theme^="identity"] .avatar { background: var(--text) !important; color: var(--surface-0) !important; border-radius: 9px; font-family: var(--font-display); }

  /* Buttons: one red action; the secondary action is ink */
  :root[data-theme^="identity"] .btn { border-radius: 10px; }
  :root[data-theme^="identity"] .btn-primary { background: var(--brand-action, var(--brand)); }
  :root[data-theme^="identity"] .btn-outline, :root[data-theme^="identity"] .btn-ghost { border-color: var(--line-strong); }
  :root[data-theme^="identity"] .badge { border-radius: 6px; font-weight: 600; }
}

/* Inline-style utilities (CSP wave 1, !important = old inline precedence). See docs/security/CSP_STYLE_MIGRATION.md */
.u-ai-baseline{align-items:baseline !important}
.u-ai-center{align-items:center !important}
.u-ai-end{align-items:end !important}
.u-ai-flex-end{align-items:flex-end !important}
.u-ai-flex-start{align-items:flex-start !important}
.u-ai-start{align-items:start !important}
.u-ai-stretch{align-items:stretch !important}
.u-align-self-center{align-self:center !important}
.u-align-self-flex-end{align-self:flex-end !important}
.u-align-self-flex-start{align-self:flex-start !important}
.u-b-1px-dashed-border{border:1px dashed var(--border) !important}
.u-b-1px-dashed-var-border-line{border:1px dashed var(--border,var(--line)) !important}
.u-b-1px-solid-border{border:1px solid var(--border) !important}
.u-b-1px-solid-brand55{border:1px solid var(--brand)55 !important}
.u-b-1px-solid-danger{border:1px solid var(--danger) !important}
.u-b-1px-solid-danger55{border:1px solid var(--danger)55 !important}
.u-b-1px-solid-he5e5e5{border:1px solid #e5e5e5 !important}
.u-b-1px-solid-heee{border:1px solid #eee !important}
.u-b-1px-solid-info55{border:1px solid var(--info)55 !important}
.u-b-1px-solid-line{border:1px solid var(--line) !important}
.u-b-1px-solid-ok55{border:1px solid var(--ok)55 !important}
.u-b-1px-solid-var-border-line{border:1px solid var(--border,var(--line)) !important}
.u-b-1px-solid-warn{border:1px solid var(--warn) !important}
.u-b-none{border:none !important}
.u-border-block-end-1px-solid-line-soft{border-block-end:1px solid var(--line-soft) !important}
.u-border-bottom-1px-dashed-line{border-bottom:1px dashed var(--line) !important}
.u-border-bottom-1px-dashed-line-soft{border-bottom:1px dashed var(--line-soft) !important}
.u-border-bottom-1px-solid-border{border-bottom:1px solid var(--border) !important}
.u-border-bottom-1px-solid-line{border-bottom:1px solid var(--line) !important}
.u-border-bottom-1px-solid-line-soft{border-bottom:1px solid var(--line-soft) !important}
.u-border-bottom-1px-solid-var-border-line{border-bottom:1px solid var(--border,var(--line)) !important}
.u-border-bottom-8266188e{border-bottom:1px solid var(--surface-2,var(--surface-2)) !important}
.u-border-collapse-collapse{border-collapse:collapse !important}
.u-border-color-7a7be6cf{border-color:color-mix(in srgb,var(--violet) 40%,var(--line)) !important}
.u-border-color-danger{border-color:var(--danger) !important}
.u-border-color-e791500e{border-color:color-mix(in srgb,var(--danger) 40%,var(--line)) !important}
.u-border-color-ok{border-color:var(--ok) !important}
.u-border-color-warn{border-color:var(--warn) !important}
.u-border-inline-start-2px-solid-border{border-inline-start:2px solid var(--border) !important}
.u-border-inline-start-3px-solid-ok{border-inline-start:3px solid var(--ok) !important}
.u-border-inline-start-4px-solid-brand{border-inline-start:4px solid var(--brand) !important}
.u-border-inline-start-4px-solid-var-info-h2563eb{border-inline-start:4px solid var(--info,#2563eb) !important}
.u-border-inline-start-4px-solid-var-warn-orange{border-inline-start:4px solid var(--warn,orange) !important}
.u-border-right-3px-solid-brand{border-right:3px solid var(--brand) !important}
.u-border-right-3px-solid-danger{border-right:3px solid var(--danger) !important}
.u-border-right-3px-solid-var-brand-info{border-right:3px solid var(--brand,var(--info)) !important}
.u-border-right-3px-solid-var-danger-danger{border-right:3px solid var(--danger,var(--danger)) !important}
.u-border-right-3px-solid-var-info-info{border-right:3px solid var(--info,var(--info)) !important}
.u-border-right-3px-solid-var-ok-ok{border-right:3px solid var(--ok,var(--ok)) !important}
.u-border-right-3px-solid-var-warn-warn{border-right:3px solid var(--warn,var(--warn)) !important}
.u-border-right-3px-solid-warn{border-right:3px solid var(--warn) !important}
.u-border-right-4px-solid-var-accent-violet{border-right:4px solid var(--accent,var(--violet)) !important}
.u-border-right-4px-solid-warn{border-right:4px solid var(--warn) !important}
.u-border-top-1px-dashed-line{border-top:1px dashed var(--line) !important}
.u-border-top-1px-solid-border{border-top:1px solid var(--border) !important}
.u-border-top-1px-solid-line{border-top:1px solid var(--line) !important}
.u-border-width-2px{border-width:2px !important}
.u-br-0-0-r-md-r-md{border-radius:0 0 var(--r-md) var(--r-md) !important}
.u-br-10px{border-radius:10px !important}
.u-br-3px{border-radius:3px !important}
.u-br-4px{border-radius:4px !important}
.u-br-50pct{border-radius:50% !important}
.u-br-6px{border-radius:6px !important}
.u-br-8px{border-radius:8px !important}
.u-br-999px{border-radius:999px !important}
.u-br-99px{border-radius:99px !important}
.u-br-r-lg{border-radius:var(--r-lg) !important}
.u-br-r-sm{border-radius:var(--r-sm) !important}
.u-br-radius{border-radius:var(--radius) !important}
.u-br-var-r-sm-8px{border-radius:var(--r-sm,8px) !important}
.u-dir-ltr{direction:ltr !important}
.u-f-1{flex:1 !important}
.u-f-2{flex:2 !important}
.u-fd-column{flex-direction:column !important}
.u-filter-drop-shadow-0-2px-3px-rgba-0-0-0-p5{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) !important}
.u-flex-shrink-0{flex-shrink:0 !important}
.u-font-family-monospace{font-family:monospace !important}
.u-fs-11p5px{font-size:11.5px !important}
.u-fs-11px{font-size:11px !important}
.u-fs-12p5px{font-size:12.5px !important}
.u-fs-13px{font-size:13px !important}
.u-fs-18px{font-size:18px !important}
.u-fs-1p05em{font-size:1.05em !important}
.u-fs-1p05rem{font-size:1.05rem !important}
.u-fs-1p1em{font-size:1.1em !important}
.u-fs-1p1rem{font-size:1.1rem !important}
.u-fs-1p2rem{font-size:1.2rem !important}
.u-fs-1p3rem{font-size:1.3rem !important}
.u-fs-1p4rem{font-size:1.4rem !important}
.u-fs-1p6rem{font-size:1.6rem !important}
.u-fs-1rem{font-size:1rem !important}
.u-fs-20px{font-size:20px !important}
.u-fs-22px{font-size:22px !important}
.u-fs-2p2rem{font-size:2.2rem !important}
.u-fs-2p4rem{font-size:2.4rem !important}
.u-fs-9px{font-size:9px !important}
.u-fs-fs-sm{font-size:var(--fs-sm) !important}
.u-fs-inherit{font-size:inherit !important}
.u-fs-p65rem{font-size:.65rem !important}
.u-fs-p72rem{font-size:.72rem !important}
.u-fs-p74rem{font-size:.74rem !important}
.u-fs-p75rem{font-size:.75rem !important}
.u-fs-p78rem{font-size:.78rem !important}
.u-fs-p8rem{font-size:.8rem !important}
.u-fw-wrap{flex-wrap:wrap !important}
.u-fwt-400{font-weight:400 !important}
.u-fwt-600{font-weight:600 !important}
.u-fwt-700{font-weight:700 !important}
.u-fwt-800{font-weight:800 !important}
.u-fwt-bolder{font-weight:bolder !important}
.u-g-10px{gap:10px !important}
.u-g-12px{gap:12px !important}
.u-g-5px{gap:5px !important}
.u-g-6px{gap:6px !important}
.u-g-8px{gap:8px !important}
.u-g-p5rem{gap:.5rem !important}
.u-g-sp-1{gap:var(--sp-1) !important}
.u-g-sp-2{gap:var(--sp-2) !important}
.u-g-sp-3{gap:var(--sp-3) !important}
.u-g-sp-4{gap:var(--sp-4) !important}
.u-grid-column-1-1{grid-column:1/-1 !important}
.u-grid-template-columns-13d4ee23{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important}
.u-grid-template-columns-18f96b33{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important}
.u-grid-template-columns-1fr-1fr{grid-template-columns:1fr 1fr !important}
.u-grid-template-columns-1fr-2fr{grid-template-columns:1fr 2fr !important}
.u-grid-template-columns-1fr-2fr-1fr{grid-template-columns:1fr 2fr 1fr !important}
.u-grid-template-columns-280px-1fr{grid-template-columns:280px 1fr !important}
.u-grid-template-columns-2fr-1fr{grid-template-columns:2fr 1fr !important}
.u-grid-template-columns-300px-1fr{grid-template-columns:300px 1fr !important}
.u-grid-template-columns-7280136b{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important}
.u-grid-template-columns-94017357{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important}
.u-grid-template-columns-be9edb06{grid-template-columns:minmax(300px,.8fr) minmax(520px,1.5fr) !important}
.u-grid-template-columns-fbb06f81{grid-template-columns:minmax(320px,1fr) minmax(260px,.8fr) !important}
.u-grid-template-columns-repeat-3-1fr{grid-template-columns:repeat(3,1fr) !important}
.u-grid-template-columns-repeat-4-1fr{grid-template-columns:repeat(4,1fr) !important}
.u-inset-inline-0{inset-inline:0 !important}
.u-inset-inline-end-0{inset-inline-end:0 !important}
.u-inset-inline-start-50pct{inset-inline-start:50% !important}
.u-inset-inline-start-sp-3{inset-inline-start:var(--sp-3) !important}
.u-jc-center{justify-content:center !important}
.u-jc-flex-end{justify-content:flex-end !important}
.u-jc-space-between{justify-content:space-between !important}
.u-letter-spacing-1px{letter-spacing:1px !important}
.u-lh-1{line-height:1 !important}
.u-lh-1p1{line-height:1.1 !important}
.u-lh-1p2{line-height:1.2 !important}
.u-lh-1p4{line-height:1.4 !important}
.u-lh-1p7{line-height:1.7 !important}
.u-lh-1p8{line-height:1.8 !important}
.u-lh-1p9{line-height:1.9 !important}
.u-lh-inherit{line-height:inherit !important}
.u-m-0{margin:0 !important}
.u-m-0-0-10px{margin:0 0 10px !important}
.u-m-0-0-12px{margin:0 0 12px !important}
.u-m-0-0-sp-2{margin:0 0 var(--sp-2) !important}
.u-m-0-0-sp-3{margin:0 0 var(--sp-3) !important}
.u-m-0-2px-3px{margin:0 2px 3px !important}
.u-m-10px-0-0{margin:10px 0 0 !important}
.u-m-12px{margin:12px !important}
.u-m-14px-0-6px{margin:14px 0 6px !important}
.u-m-14px-0-8px{margin:14px 0 8px !important}
.u-m-16px-0-6px{margin:16px 0 6px !important}
.u-m-1px{margin:1px !important}
.u-m-2px{margin:2px !important}
.u-m-2px-0{margin:2px 0 !important}
.u-m-2px-0-0{margin:2px 0 0 !important}
.u-m-3px{margin:3px !important}
.u-m-4px-0{margin:4px 0 !important}
.u-m-4px-0-0-0{margin:4px 0 0 0 !important}
.u-m-4px-0-2px{margin:4px 0 2px !important}
.u-m-6px-0{margin:6px 0 !important}
.u-m-6px-0-0{margin:6px 0 0 !important}
.u-m-6px-0-8px{margin:6px 0 8px !important}
.u-m-6px-18px-0{margin:6px 18px 0 !important}
.u-m-8px-0{margin:8px 0 !important}
.u-m-8px-0-0{margin:8px 0 0 !important}
.u-m-8px-0-10px{margin:8px 0 10px !important}
.u-m-8px-0-2px{margin:8px 0 2px !important}
.u-m-auto{margin:auto !important}
.u-m-sp-1-0{margin:var(--sp-1) 0 !important}
.u-m-sp-2-0{margin:var(--sp-2) 0 !important}
.u-m-sp-2-0-0{margin:var(--sp-2) 0 0 !important}
.u-m-sp-2-18px-0{margin:var(--sp-2) 18px 0 !important}
.u-m-sp-3-0{margin:var(--sp-3) 0 !important}
.u-m-sp-3-0-0{margin:var(--sp-3) 0 0 !important}
.u-m-sp-3-0-sp-2{margin:var(--sp-3) 0 var(--sp-2) !important}
.u-m-sp-4-0{margin:var(--sp-4) 0 !important}
.u-m-sp-5-0-sp-3{margin:var(--sp-5) 0 var(--sp-3) !important}
.u-m-sp-6-0-sp-3{margin:var(--sp-6) 0 var(--sp-3) !important}
.u-maxh-120px{max-height:120px !important}
.u-maxh-200px{max-height:200px !important}
.u-maxh-320px{max-height:320px !important}
.u-maxh-340px{max-height:340px !important}
.u-maxh-380px{max-height:380px !important}
.u-maxh-460px{max-height:460px !important}
.u-maxh-64vh{max-height:64vh !important}
.u-maxh-65vh{max-height:65vh !important}
.u-maxh-72vh{max-height:72vh !important}
.u-maxh-74vh{max-height:74vh !important}
.u-maxw-100px{max-width:100px !important}
.u-maxw-110px{max-width:110px !important}
.u-maxw-120px{max-width:120px !important}
.u-maxw-140px{max-width:140px !important}
.u-maxw-150px{max-width:150px !important}
.u-maxw-160px{max-width:160px !important}
.u-maxw-180px{max-width:180px !important}
.u-maxw-200px{max-width:200px !important}
.u-maxw-220px{max-width:220px !important}
.u-maxw-240px{max-width:240px !important}
.u-maxw-260px{max-width:260px !important}
.u-maxw-280px{max-width:280px !important}
.u-maxw-320px{max-width:320px !important}
.u-maxw-340px{max-width:340px !important}
.u-maxw-360px{max-width:360px !important}
.u-maxw-480px{max-width:480px !important}
.u-maxw-520px{max-width:520px !important}
.u-maxw-560px{max-width:560px !important}
.u-maxw-600px{max-width:600px !important}
.u-maxw-640px{max-width:640px !important}
.u-maxw-680px{max-width:680px !important}
.u-maxw-720px{max-width:720px !important}
.u-maxw-78px{max-width:78px !important}
.u-maxw-80px{max-width:80px !important}
.u-maxw-900px{max-width:900px !important}
.u-maxw-90px{max-width:90px !important}
.u-mb-0{margin-bottom:0 !important}
.u-mb-10px{margin-bottom:10px !important}
.u-mb-12px{margin-bottom:12px !important}
.u-mb-14px{margin-bottom:14px !important}
.u-mb-2px{margin-bottom:2px !important}
.u-mb-3px{margin-bottom:3px !important}
.u-mb-4px{margin-bottom:4px !important}
.u-mb-6px{margin-bottom:6px !important}
.u-mb-8px{margin-bottom:8px !important}
.u-mb-sp-2{margin-bottom:var(--sp-2) !important}
.u-mb-sp-3{margin-bottom:var(--sp-3) !important}
.u-mb-sp-4{margin-bottom:var(--sp-4) !important}
.u-mb-sp-5{margin-bottom:var(--sp-5) !important}
.u-minh-60vh{min-height:60vh !important}
.u-minw-0{min-width:0 !important}
.u-minw-100px{min-width:100px !important}
.u-minw-110px{min-width:110px !important}
.u-minw-120px{min-width:120px !important}
.u-minw-130px{min-width:130px !important}
.u-minw-140px{min-width:140px !important}
.u-minw-150px{min-width:150px !important}
.u-minw-160px{min-width:160px !important}
.u-minw-170px{min-width:170px !important}
.u-minw-180px{min-width:180px !important}
.u-minw-200px{min-width:200px !important}
.u-minw-220px{min-width:220px !important}
.u-minw-240px{min-width:240px !important}
.u-minw-250px{min-width:250px !important}
.u-minw-26px{min-width:26px !important}
.u-minw-320px{min-width:320px !important}
.u-minw-48px{min-width:48px !important}
.u-minw-64px{min-width:64px !important}
.u-ms-4px{margin-inline-start:4px !important}
.u-ms-6px{margin-inline-start:6px !important}
.u-ms-8px{margin-inline-start:8px !important}
.u-ms-auto{margin-inline-start:auto !important}
.u-mt-0{margin-top:0 !important}
.u-mt-10px{margin-top:10px !important}
.u-mt-12px{margin-top:12px !important}
.u-mt-14px{margin-top:14px !important}
.u-mt-2px{margin-top:2px !important}
.u-mt-3px{margin-top:3px !important}
.u-mt-4px{margin-top:4px !important}
.u-mt-6px{margin-top:6px !important}
.u-mt-6px-32e6ad{margin-top:-6px !important}
.u-mt-8px{margin-top:8px !important}
.u-mt-tok-space-2{margin-top:var(--ds-space-2) !important}
.u-mt-sp-1{margin-top:var(--sp-1) !important}
.u-mt-sp-2{margin-top:var(--sp-2) !important}
.u-mt-sp-3{margin-top:var(--sp-3) !important}
.u-mt-sp-4{margin-top:var(--sp-4) !important}
.u-mt-sp-5{margin-top:var(--sp-5) !important}
.u-mt-sp-6{margin-top:var(--sp-6) !important}
.u-overflow-wrap-anywhere{overflow-wrap:anywhere !important}
.u-overflow-x-auto{overflow-x:auto !important}
.u-overflow-y-auto{overflow-y:auto !important}
.u-padding-inline-start-10px{padding-inline-start:10px !important}
.u-padding-inline-start-18px{padding-inline-start:18px !important}
.u-padding-inline-start-1p1em{padding-inline-start:1.1em !important}
.u-padding-inline-start-20px{padding-inline-start:20px !important}
.u-padding-inline-start-sp-5{padding-inline-start:var(--sp-5) !important}
.u-pb-8px{padding-bottom:8px !important}
.u-place-items-center{place-items:center !important}
.u-pt-8px{padding-top:8px !important}
.u-resize-none{resize:none !important}
.u-ta-center{text-align:center !important}
.u-ta-end{text-align:end !important}
.u-ta-left{text-align:left !important}
.u-ta-right{text-align:right !important}
.u-ta-start{text-align:start !important}
.u-text-decoration-none{text-decoration:none !important}
.u-text-overflow-ellipsis{text-overflow:ellipsis !important}
.u-user-select-all{user-select:all !important}
.u-word-break-break-all{word-break:break-all !important}
.u-word-break-break-word{word-break:break-word !important}
.u-ws-nowrap{white-space:nowrap !important}
.u-ws-pre-wrap{white-space:pre-wrap !important}

/* CSP wave 2: runtime-written props, no !important; :is(.v-x,#_) = specificity 1,0,0. See docs/security/CSP_STYLE_MIGRATION.md */
:is(.v-bg-danger,#_){background:var(--danger)}
:is(.v-bg-danger-tint,#_){background:var(--danger-tint)}
:is(.v-bg-he8eaed,#_){background:#e8eaed}
:is(.v-bg-line,#_){background:var(--line)}
:is(.v-bg-line-soft,#_){background:var(--line-soft)}
:is(.v-bg-linear-gradient-to-left-brand-tint-brand,#_){background:linear-gradient(to left, var(--brand-tint), var(--brand))}
:is(.v-bg-none,#_){background:none}
:is(.v-bg-ok,#_){background:var(--ok)}
:is(.v-bg-ok-tint,#_){background:var(--ok-tint)}
:is(.v-bg-surface,#_){background:var(--surface)}
:is(.v-bg-surface-2,#_){background:var(--surface-2)}
:is(.v-bg-surface-3,#_){background:var(--surface-3)}
:is(.v-bg-var-bg-2-rgba-127-127-127-p06,#_){background:var(--bg-2,rgba(127,127,127,.06))}
:is(.v-bg-var-danger-tint-danger-tint,#_){background:var(--danger-tint,var(--danger-tint))}
:is(.v-bg-var-danger-tint-transparent,#_){background:var(--danger-tint,transparent)}
:is(.v-bg-var-info-tint-surface-2,#_){background:var(--info-tint,var(--surface-2))}
:is(.v-bg-var-surface-2-surface-2,#_){background:var(--surface-2,var(--surface-2))}
:is(.v-bg-var-surface-hfff,#_){background:var(--surface,#fff)}
:is(.v-bg-var-warn-tint-warn-tint,#_){background:var(--warn-tint,var(--warn-tint))}
:is(.v-bg-warn,#_){background:var(--warn)}
:is(.v-bg-warn-tint,#_){background:var(--warn-tint)}
:is(.v-c-brand,#_){color:var(--brand)}
:is(.v-c-danger,#_){color:var(--danger)}
:is(.v-c-danger-strong,#_){color:var(--danger-strong)}
:is(.v-c-h333,#_){color:#333}
:is(.v-c-h555,#_){color:#555}
:is(.v-c-h6b7280,#_){color:#6b7280}
:is(.v-c-h777,#_){color:#777}
:is(.v-c-h991b1b,#_){color:#991b1b}
:is(.v-c-hb45309,#_){color:#b45309}
:is(.v-c-hfff,#_){color:#fff}
:is(.v-c-info,#_){color:var(--info)}
:is(.v-c-inherit,#_){color:inherit}
:is(.v-c-muted,#_){color:var(--muted)}
:is(.v-c-ok,#_){color:var(--ok)}
:is(.v-c-text-2,#_){color:var(--text-2)}
:is(.v-c-text-3,#_){color:var(--text-3)}
:is(.v-c-text-muted,#_){color:var(--text-muted)}
:is(.v-c-text-primary,#_){color:var(--text-primary)}
:is(.v-c-var-danger-danger,#_){color:var(--danger,var(--danger))}
:is(.v-c-var-danger-hc33,#_){color:var(--danger,#c33)}
:is(.v-c-var-warn-warn,#_){color:var(--warn,var(--warn))}
:is(.v-c-warn,#_){color:var(--warn)}
:is(.v-m-2px,#_){margin:2px}
:is(.v-p-0,#_){padding:0}
:is(.v-p-0-10px-10px,#_){padding:0 10px 10px}
:is(.v-p-10px,#_){padding:10px}
:is(.v-p-10px-14px,#_){padding:10px 14px}
:is(.v-p-10px-6px,#_){padding:10px 6px}
:is(.v-p-12px,#_){padding:12px}
:is(.v-p-12px-14px,#_){padding:12px 14px}
:is(.v-p-14px,#_){padding:14px}
:is(.v-p-14px-4px,#_){padding:14px 4px}
:is(.v-p-16px,#_){padding:16px}
:is(.v-p-20px,#_){padding:20px}
:is(.v-p-24px,#_){padding:24px}
:is(.v-p-2px-8px,#_){padding:2px 8px}
:is(.v-p-3px-0,#_){padding:3px 0}
:is(.v-p-4px,#_){padding:4px}
:is(.v-p-4px-0,#_){padding:4px 0}
:is(.v-p-4px-8px,#_){padding:4px 8px}
:is(.v-p-4px-sp-3,#_){padding:4px var(--sp-3)}
:is(.v-p-5px-0,#_){padding:5px 0}
:is(.v-p-5px-6px,#_){padding:5px 6px}
:is(.v-p-6px,#_){padding:6px}
:is(.v-p-6px-0,#_){padding:6px 0}
:is(.v-p-6px-10px,#_){padding:6px 10px}
:is(.v-p-6px-12px,#_){padding:6px 12px}
:is(.v-p-6px-8px,#_){padding:6px 8px}
:is(.v-p-7px-0,#_){padding:7px 0}
:is(.v-p-8px,#_){padding:8px}
:is(.v-p-8px-0,#_){padding:8px 0}
:is(.v-p-8px-10px,#_){padding:8px 10px}
:is(.v-p-8px-14px,#_){padding:8px 14px}
:is(.v-p-sp-2,#_){padding:var(--sp-2)}
:is(.v-p-sp-2-0,#_){padding:var(--sp-2) 0}
:is(.v-p-sp-3,#_){padding:var(--sp-3)}
:is(.v-p-sp-4,#_){padding:var(--sp-4)}
:is(.v-p-sp-4-0,#_){padding:var(--sp-4) 0}
:is(.v-p-sp-6,#_){padding:var(--sp-6)}
:is(.v-transform-transl-50pct-50pct,#_){transform:transl(-50%,-50%)}
:is(.v-hide,#_){display:none}
:is(.v-cur-default,#_){cursor:default}
:is(.v-cur-pointer,#_){cursor:pointer}
:is(.v-d-block,#_){display:block}
:is(.v-d-flex,#_){display:flex}
:is(.v-d-grid,#_){display:grid}
:is(.v-d-inline-block,#_){display:inline-block}
:is(.v-d-inline-flex,#_){display:inline-flex}
:is(.v-h-100pct,#_){height:100%}
:is(.v-h-10px,#_){height:10px}
:is(.v-h-130px,#_){height:130px}
:is(.v-h-16px,#_){height:16px}
:is(.v-h-180px,#_){height:180px}
:is(.v-h-18px,#_){height:18px}
:is(.v-h-240px,#_){height:240px}
:is(.v-h-260px,#_){height:260px}
:is(.v-h-480px,#_){height:480px}
:is(.v-h-520px,#_){height:520px}
:is(.v-h-52px,#_){height:52px}
:is(.v-h-62vh,#_){height:62vh}
:is(.v-h-66px,#_){height:66px}
:is(.v-h-66vh,#_){height:66vh}
:is(.v-h-6px,#_){height:6px}
:is(.v-h-72px,#_){height:72px}
:is(.v-h-7px,#_){height:7px}
:is(.v-h-84px,#_){height:84px}
:is(.v-h-8px,#_){height:8px}
:is(.v-h-96px,#_){height:96px}
:is(.v-h-9px,#_){height:9px}
:is(.v-h-sp-5,#_){height:var(--sp-5)}
:is(.v-object-fit-cover,#_){object-fit:cover}
:is(.v-op-p72,#_){opacity:.72}
:is(.v-op-p75,#_){opacity:.75}
:is(.v-ov-auto,#_){overflow:auto}
:is(.v-ov-hidden,#_){overflow:hidden}
:is(.v-ov-visible,#_){overflow:visible}
:is(.v-pos-absolute,#_){position:absolute}
:is(.v-pos-relative,#_){position:relative}
:is(.v-pos-sticky,#_){position:sticky}
:is(.v-top-0,#_){top:0}
:is(.v-top-45pct,#_){top:45%}
:is(.v-w-100pct,#_){width:100%}
:is(.v-w-110px,#_){width:110px}
:is(.v-w-120px,#_){width:120px}
:is(.v-w-130px,#_){width:130px}
:is(.v-w-140px,#_){width:140px}
:is(.v-w-150px,#_){width:150px}
:is(.v-w-160px,#_){width:160px}
:is(.v-w-16px,#_){width:16px}
:is(.v-w-18px,#_){width:18px}
:is(.v-w-200px,#_){width:200px}
:is(.v-w-26pct,#_){width:26%}
:is(.v-w-26px,#_){width:26px}
:is(.v-w-30px,#_){width:30px}
:is(.v-w-34px,#_){width:34px}
:is(.v-w-36px,#_){width:36px}
:is(.v-w-40pct,#_){width:40%}
:is(.v-w-40px,#_){width:40px}
:is(.v-w-42px,#_){width:42px}
:is(.v-w-45pct,#_){width:45%}
:is(.v-w-48px,#_){width:48px}
:is(.v-w-52px,#_){width:52px}
:is(.v-w-56px,#_){width:56px}
:is(.v-w-64px,#_){width:64px}
:is(.v-w-66px,#_){width:66px}
:is(.v-w-70px,#_){width:70px}
:is(.v-w-72px,#_){width:72px}
:is(.v-w-75px,#_){width:75px}
:is(.v-w-78px,#_){width:78px}
:is(.v-w-80px,#_){width:80px}
:is(.v-w-84px,#_){width:84px}
:is(.v-w-90px,#_){width:90px}
:is(.v-w-96px,#_){width:96px}
:is(.v-h-min-72vh-640px,#_){height:min(72vh,640px)}
:is(.v-top-88px,#_){top:88px}
:is(.v-w-105px,#_){width:105px}
:is(.v-w-10px,#_){width:10px}
:is(.v-w-280px,#_){width:280px}
:is(.v-w-85px,#_){width:85px}
:is(.v-w-95pct,#_){width:95%}
:is(.v-w-fit-content,#_){width:fit-content}
:is(.v-z-index-16,#_){z-index:16}