.ex-wrap { max-width: 1000px; margin: 0 auto; }
.ex-back { margin: 0 0 22px; }

.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.ex-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ex-card:hover, .ex-card:focus-visible { border-color: var(--violet); box-shadow: var(--shadow-md); outline: none; }
.ex-card h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 12px 6px 0; }
.ex-card p { margin: 0 6px; color: var(--ink-muted); font-size: 14.5px; }
.ex-open { margin: 8px 6px 0; color: var(--violet); font-weight: 600; font-size: 14px; }

.ex-card-link { display: contents; }
.ex-card-actions { display: flex; align-items: center; gap: 8px; margin: 14px 6px 0; padding-top: 14px; border-top: 1px solid var(--border); }
.ex-dl, .ex-share {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; font: 500 13px var(--font-body);
  color: var(--ink-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
}
.ex-dl:hover, .ex-share:hover { border-color: var(--violet); color: var(--violet); }
.ex-dl ox-icon, .ex-share ox-icon { width: 15px; height: 15px; flex: none; }
.ex-dlcount { color: var(--ink-faint); font-weight: 400; }
.ex-dlcount::before { content: "\2022"; margin-inline-end: 7px; }
.ex-share { margin-inline-start: auto; }

.ex-thumb { display: grid; grid-template-columns: 52px 1fr; height: 150px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ex-thumb-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; border-inline-end: 1px solid var(--border); color: var(--violet); }
.ex-thumb ox-icon { width: 18px; height: 18px; }
.ex-thumb-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; align-content: start; }
.ex-thumb-body span { height: 34px; border-radius: 6px; background: var(--violet-tint); }
.ex-thumb-body i { grid-column: 1 / -1; height: 14px; border-radius: 4px; background: var(--border); }

/* Every ox-icon inside an examples demo sits in a flex row with gap already
   set; make the icon itself a plain block of a fixed size so it never
   inherits inline-text line-height/baseline quirks that push it off-center
   or too close to the label next to it. */
.ex-app ox-icon, .ex-card-in ox-icon, .ex-corner ox-icon, .ex-metric ox-icon {
  display: block; width: 18px; height: 18px; flex: none;
}

/* ---- full-page app shell (dashboard.html) ---- */
body.ex-fullscreen { background: var(--bg-subtle); }
.ex-fab {
  position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--ink);
  box-shadow: var(--shadow-md);
}
.ex-fab:hover { border-color: var(--violet); color: var(--violet); }
.ex-corner {
  position: fixed; top: 18px; inset-inline-end: 22px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
}
.ex-app--full { min-height: 100vh; border: 0; border-radius: 0; }

/* ---- app layout ---- */
.ex-page { max-width: 1320px; margin: 0 auto; }
.ex-app { display: grid; grid-template-columns: 232px 1fr; min-height: 70vh; color: var(--ink); font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.ex-side { display: flex; flex-direction: column; gap: 2px; padding: 22px 14px; background: var(--bg-subtle); border-inline-end: 1px solid var(--border); }
.ex-side b { font-family: var(--font-display); font-size: 18px; padding: 0 10px 20px; display: block; }
.ex-nav { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border-radius: var(--radius-sm); color: var(--ink-muted); }
.ex-nav.is-on { background: var(--violet-tint); color: var(--violet-strong); font-weight: 600; }
.ex-main { padding: 30px 36px 44px; min-width: 0; }
.ex-pagetitle { font-family: var(--font-display); font-size: 25px; margin: 0 0 22px; }

.ex-iconbtn { border: 1px solid var(--border); background: var(--bg-card); color: var(--ink-muted); width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.ex-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--violet); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; }

/* ---- metric cards: icon pinned top-end, vertically centered against the
   label on its own baseline, never crowding the number below it ---- */
.ex-metrics { display: grid; gap: 16px; margin-bottom: 24px; }
.ex-metrics--3 { grid-template-columns: repeat(3, 1fr); }
.ex-metric { padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.ex-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-muted); font-size: 13px; }
.ex-metric-icon { display: flex; align-items: center; color: var(--violet); }
.ex-metric strong { display: block; font-family: var(--font-display); font-size: 25px; margin: 10px 0 4px; }
.ex-metric em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 12.5px; font-weight: 600; }
.ex-metric em.up { color: #157a44; }
.ex-metric em.down { color: #b4232c; }
[data-theme="dark"] .ex-metric em.up { color: #4ade80; }
[data-theme="dark"] .ex-metric em.down { color: #f87171; }

.ex-card-in { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.ex-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ex-tools h3 { margin: 0; font-family: var(--font-display); font-size: 15px; }
.ex-tools span { display: flex; gap: 8px; }
.ex-chip { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--ink-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ex-chip.is-primary { background: var(--violet); color: #fff; border-color: var(--violet); }

.ex-scroll { overflow-x: auto; }
.ex-app table { width: 100%; border-collapse: collapse; }
.ex-app th, .ex-app td { padding: 12px 18px; text-align: start; white-space: nowrap; vertical-align: middle; }
.ex-app th { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
.ex-app tbody tr { border-top: 1px solid var(--border); }

.ex-person { display: flex; align-items: center; gap: 10px; }
.ex-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--violet-tint); color: var(--violet-strong); font-size: 11px; font-weight: 700; flex: none; }

.ex-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--violet-tint); color: var(--violet-strong); }
.ex-pill.pending { background: var(--bg-subtle); color: var(--ink-muted); border: 1px solid var(--border); }
.ex-pill.refunded { background: var(--bg-subtle); color: var(--ink-faint); border: 1px solid var(--border); }
.ex-pill ox-icon { width: 13px; height: 13px; }

.ex-acts { text-align: end; }
.ex-acts { display: table-cell; }
.ex-acts > button + button { margin-inline-start: 2px; }
.ex-acts button { border: 0; background: transparent; color: var(--ink-muted); padding: 6px; border-radius: 6px; display: inline-flex; align-items: center; }
.ex-acts button:hover { background: var(--bg-subtle); color: var(--violet); }

@media (max-width: 860px) {
  .ex-app { grid-template-columns: 1fr; border: none; border-radius: 0; }
  .ex-side { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .ex-side b { display: none; }
  .ex-nav span { display: none; }
  .ex-metrics--3 { grid-template-columns: 1fr 1fr; }
  .ex-main { padding: 70px 16px 24px; }
  .ex-corner { top: 14px; inset-inline-end: 14px; }
}

/* Dashboard toolbar: fixed in the body flow, with search anchored left. */
.ex-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: -30px -36px 22px; padding: 12px 36px; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.ex-search { flex: 0 1 320px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-faint); }
.ex-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.ex-search:focus-within { border-color: var(--violet); outline: 2px solid var(--violet-tint); outline-offset: 2px; }
@media (max-width: 860px) { .ex-bar { margin: -70px -16px 22px; padding: 12px 16px; } .ex-search { flex-basis: min(320px, 100%); } }

/* Dashboard icon alignment and value hierarchy. */
.ex-value-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 10px 0 4px; }
.ex-value-line strong { margin: 0; }
.ex-value-line em { flex: 0 0 auto; }
.ex-pill, .ex-chip { line-height: 1.2; }
.ex-pill ox-icon, .ex-chip ox-icon { display: inline-block; vertical-align: middle; margin: 0; }
.ex-iconbtn { padding: 0; line-height: 0; }
.ex-iconbtn ox-icon { display: block; width: 18px; height: 18px; margin: auto; }
.ex-thumb { position: relative; }
.ex-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* B fixes: compact controls keep their icon on the same visual baseline as text. */
.ex-card-actions .ex-dl, .ex-card-actions .ex-share { align-items: center; justify-content: center; line-height: 1; }
.ex-card-actions .ex-dl ox-icon, .ex-card-actions .ex-share ox-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; }
.ex-tools > span { display: flex; align-items: center; gap: 8px; }
.ex-tools > span > .ex-chip { align-items: center; justify-content: center; line-height: 1; }
.ex-chip ox-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; }
.ex-pill { align-items: center; line-height: 1.1; }
.ex-pill > ox-icon { display: inline-flex; width: 13px; height: 13px; flex: 0 0 13px; align-items: center; justify-content: center; }
.ex-pill > span { display: inline; line-height: 1.1; }
.ex-side-brand { display: flex; align-items: center; min-height: 28px; padding: 0 10px 20px; }
.ex-side-brand .logo-light, .ex-side-brand .logo-dark { width: auto; height: 20px; max-width: 150px; object-fit: contain; }
.ex-nav--context { cursor: default; }
.ex-nav--context:hover { color: var(--ink-muted); }
@media (max-width: 860px) { .ex-side-brand { display: none; } }

/* Shared demo footer and branding. */
.ex-side-brand { gap: 8px; }
.ex-side-brand .ex-side-mark, .ex-demo-footer-brand .ex-side-mark { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }
.ex-demo-footer { margin-top: 0; padding: 22px 36px; border-top: 1px solid var(--border); background: var(--bg-card); color: var(--ink-muted); font-size: 13px; }
.ex-demo-footer-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.ex-demo-footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.ex-demo-footer-inner > span { flex: 1; }
.ex-demo-footer a { color: var(--violet); }
.ex-pagelead { margin: -12px 0 24px; color: var(--ink-muted); }
.ex-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ex-product-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.ex-product-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: var(--violet-tint); color: var(--violet); }
.ex-product-icon ox-icon { width: 20px; height: 20px; }
.ex-product-card h2 { margin: 16px 0 6px; font-family: var(--font-display); font-size: 17px; }
.ex-product-card p { min-height: 42px; margin: 0 0 16px; color: var(--ink-muted); line-height: 1.5; }
.ex-product-card strong { color: var(--violet-strong); }
.ex-iconbtn { display: grid; place-items: center; padding: 0; line-height: 0; overflow: hidden; }
.ex-iconbtn ox-icon { display: block; width: 16px; height: 16px; margin: 0; }
@media (max-width: 860px) { .ex-product-grid { grid-template-columns: 1fr; } .ex-demo-footer-inner { align-items: flex-start; flex-direction: column; gap: 8px; } }