/* Surety 2.2.3 layout and component consistency layer — UI/UX improvements 251–450 */
:root {
  --ux220-gutter:clamp(16px,2.6vw,46px);
  --ux220-section:clamp(24px,3vw,44px);
  --ux220-card-gap:clamp(12px,1.6vw,22px);
  --ux220-reading:72ch;
  --ux220-form:1080px;
  --ux220-wide:1920px;
  --ux220-radius-sm:9px;
  --ux220-radius-md:14px;
  --ux220-radius-lg:20px;
  --ux220-radius-xl:28px;
  --ux220-control:46px;
  --ux220-touch:44px;
  --ux220-shadow-low:0 1px 2px rgba(12,18,32,.04),0 9px 28px rgba(12,18,32,.055);
  --ux220-shadow-mid:0 20px 56px rgba(12,18,32,.13);
  --ux220-shadow-high:0 32px 110px rgba(12,18,32,.22);
  --ux220-trust:#177a5b;
  --ux220-provisional:#9a6814;
  --ux220-disputed:#b23442;
  --ux220-revoked:#7d2635;
  --ux220-evidence:#2764b7;
  --ux220-ownership:#7452bd;
  --ux220-payment:#0b7f8d;
  --ux220-security:#2c538f;
  --ux220-duration-fast:110ms;
  --ux220-duration:170ms;
  --ux220-duration-slow:240ms;
}

/* 251–270: visual identity and typography */
html { text-rendering:optimizeLegibility; }
body.ux220-ready { font-feature-settings:"kern" 1,"liga" 1,"calt" 1; }
body.ux220-ready :where(h1,h2,h3,h4) { color:var(--text-strong); }
body.ux220-ready h1 { max-width:22ch; }
body.ux220-ready .page-template-reading :where(p,li,blockquote) { max-width:var(--ux220-reading); font-size:clamp(.98rem,.2vw + .94rem,1.08rem); line-height:1.74; }
body.ux220-ready :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) p { max-width:68ch; color:var(--muted); }
body.ux220-ready :where(.metric-value,.billing-amount,.market-price,[data-numeric],td[data-type="number"]) { font-variant-numeric:tabular-nums lining-nums; }
body.ux220-ready :where(code,.hash,.fingerprint,[data-machine-value]) { overflow-wrap:anywhere; }
body.ux220-ready .ux220-machine-value { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 7px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); font-family:var(--font-mono); font-size:.78rem; }
body.ux220-ready .ux220-copy { width:30px; min-width:30px; height:30px; padding:0; display:inline-grid; place-items:center; border-radius:8px; color:var(--muted); background:transparent; }
body.ux220-ready .ux220-copy:hover { color:var(--primary); background:var(--primary-soft); }
body.ux220-ready .surety-seal { --seal-color:var(--primary); display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:4px 10px 4px 5px; border:1px solid color-mix(in srgb,var(--seal-color) 32%,var(--line)); border-radius:999px; color:var(--seal-color); background:color-mix(in srgb,var(--seal-color) 8%,var(--surface)); font-size:.72rem; font-weight:800; line-height:1; }
body.ux220-ready .surety-seal::before { content:""; width:20px; height:20px; border:2px solid currentColor; border-radius:50%; background:radial-gradient(circle,currentColor 0 2px,transparent 3px),conic-gradient(from 45deg,transparent 0 22%,currentColor 23% 27%,transparent 28% 47%,currentColor 48% 52%,transparent 53% 72%,currentColor 73% 77%,transparent 78%); opacity:.84; }
body.ux220-ready .surety-seal[data-state="verified"] { --seal-color:var(--ux220-trust); }
body.ux220-ready .surety-seal[data-state="provisional"] { --seal-color:var(--ux220-provisional); }
body.ux220-ready .surety-seal[data-state="disputed"] { --seal-color:var(--ux220-disputed); }
body.ux220-ready .surety-seal[data-state="revoked"] { --seal-color:var(--ux220-revoked); }
body.ux220-ready .ux220-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; color:var(--muted); font-size:.78rem; }
body.ux220-ready .ux220-meta-row > span { display:inline-flex; align-items:center; gap:6px; }
body.ux220-ready :where(button,a,input,select,textarea) { transition:border-color var(--ux220-duration-fast) ease,background-color var(--ux220-duration-fast) ease,color var(--ux220-duration-fast) ease,box-shadow var(--ux220-duration-fast) ease,transform var(--ux220-duration-fast) ease,opacity var(--ux220-duration-fast) ease; }

/* 271–300: shell, page grid, headers and local navigation */
body.ux220-ready { --page-gutter:var(--ux220-gutter); }
body.ux220-ready .main,
body.ux220-ready .admin-main,
body.ux220-ready .case-main,
body.ux220-ready .panel-workspace { min-width:0; }
body.ux220-ready .page { width:100%; max-width:var(--ux220-wide); margin-inline:auto; }
body.ux220-ready .page.page-template-reading { max-width:calc(var(--ux220-reading) + 2 * var(--ux220-gutter)); }
body.ux220-ready .page.page-template-form { max-width:calc(var(--ux220-form) + 2 * var(--ux220-gutter)); }
body.ux220-ready[data-layout="public"] .page.page-template-wide,
body.ux220-ready[data-layout="public"] .main > .page.page-template-wide { max-width:none; }
body.ux220-ready .ux220-content-lane { width:min(100%,var(--ux220-form)); margin-inline:auto; }
body.ux220-ready .ux220-grid-12 { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--ux220-card-gap); }
body.ux220-ready .ux220-grid-12 > * { grid-column:span 4; min-width:0; }
body.ux220-ready .ux220-grid-12 > .wide { grid-column:span 8; }
body.ux220-ready .ux220-grid-12 > .full { grid-column:1/-1; }
body.ux220-ready :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) { position:relative; overflow:hidden; padding:clamp(22px,3.2vw,44px); border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line)); border-radius:var(--ux220-radius-xl); background:
  radial-gradient(circle at 95% 0,color-mix(in srgb,var(--primary) 14%,transparent),transparent 34%),
  linear-gradient(145deg,var(--surface-raised),color-mix(in srgb,var(--surface) 88%,var(--primary-soft))); box-shadow:var(--ux220-shadow-low); }
body.ux220-ready :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading)::after { content:""; position:absolute; right:-60px; bottom:-90px; width:220px; height:220px; border:1px solid color-mix(in srgb,var(--primary) 15%,transparent); border-radius:50%; box-shadow:0 0 0 32px color-mix(in srgb,var(--primary) 4%,transparent),0 0 0 64px color-mix(in srgb,var(--primary) 3%,transparent); pointer-events:none; }
body.ux220-ready :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) > * { position:relative; z-index:1; }
body.ux220-ready .page-actions,
body.ux220-ready .heading-actions { align-items:center; gap:9px; }
body.ux220-ready .ux220-action-overflow { position:relative; }
body.ux220-ready .ux220-action-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:90; min-width:220px; padding:7px; display:grid; gap:3px; border:1px solid var(--line); border-radius:13px; background:var(--surface-raised); box-shadow:var(--ux220-shadow-mid); }
body.ux220-ready .ux220-action-menu[hidden] { display:none!important; }
body.ux220-ready .ux220-action-menu > * { width:100%; min-height:40px; padding:8px 10px; justify-content:flex-start; border-radius:9px; text-align:left; }
body.ux220-ready .context-nav,
body.ux220-ready .ux-sticky-subnav { scrollbar-width:none; scroll-snap-type:x proximity; }
body.ux220-ready .context-nav > *,
body.ux220-ready .ux-sticky-subnav > * { scroll-snap-align:start; }
body.ux220-ready .ux220-scroll-edge { position:relative; }
body.ux220-ready .ux220-scroll-edge::after { content:""; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--surface)); opacity:0; transition:opacity var(--ux220-duration-fast); }
body.ux220-ready .ux220-scroll-edge[data-overflow="true"]::after { opacity:.9; }
body.ux220-ready .sidebar .nav-label { min-height:34px; margin-top:10px; padding-inline:8px; }
body.ux220-ready .topbar { min-height:var(--topbar-h); }
body.ux220-ready .topbar-context { min-width:0; }
body.ux220-ready .topbar-context strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.ux220-ready .ux220-delegated-banner { position:sticky; top:0; z-index:190; padding:8px var(--ux220-gutter); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; background:#7145aa; font-size:.78rem; font-weight:750; }

/* 301–330: dashboards, configuration and cards */
body.ux220-ready :where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.billing-overview) { align-items:stretch; gap:var(--ux220-card-gap)!important; }
body.ux220-ready :where(.metric-card,.stat-card,.admin-metric,.billing-summary-card) { min-width:0; min-height:142px; padding:clamp(16px,1.8vw,24px)!important; display:flex; flex-direction:column; justify-content:space-between; border-radius:var(--ux220-radius-lg)!important; }
body.ux220-ready :where(.metric-card,.stat-card,.admin-metric,.billing-summary-card) strong:first-of-type { letter-spacing:-.035em; }
body.ux220-ready [data-metric-severity="critical"] { border-color:color-mix(in srgb,var(--red) 34%,var(--line))!important; background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--red-soft) 58%,var(--surface)))!important; }
body.ux220-ready [data-metric-severity="warning"] { border-color:color-mix(in srgb,var(--amber) 32%,var(--line))!important; background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--amber-soft) 54%,var(--surface)))!important; }
body.ux220-ready .ux220-attention-rail { margin-block:var(--ux220-section); padding:clamp(16px,2vw,24px); border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line)); border-radius:var(--ux220-radius-lg); background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--amber-soft) 38%,var(--surface))); box-shadow:var(--ux220-shadow-low); }
body.ux220-ready .ux220-attention-rail__head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
body.ux220-ready .ux220-attention-rail__items { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:10px; }
body.ux220-ready .ux220-attention-item { min-height:76px; padding:12px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
body.ux220-ready .ux220-attention-item > i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--amber); background:var(--amber-soft); }
body.ux220-ready .ux220-attention-item span { min-width:0; display:grid; }
body.ux220-ready .ux220-attention-item small { color:var(--muted); }
body.ux220-ready :is(.ux220-dashboard-editing,.ux-dashboard-editing,[data-dashboard-edit="true"]) [data-dashboard-card] { outline:2px dashed color-mix(in srgb,var(--primary) 38%,var(--line)); outline-offset:3px; cursor:grab; }
body.ux220-ready :is(.ux220-dashboard-editing,.ux-dashboard-editing,[data-dashboard-edit="true"]) [data-dashboard-card]:active { cursor:grabbing; }
body.ux220-ready .ux220-dashboard-placeholder { min-height:120px; border:2px dashed color-mix(in srgb,var(--primary) 35%,var(--line)); border-radius:var(--ux220-radius-lg); background:var(--primary-soft); }
body.ux220-ready :where(.panel,.card,.admin-section,.case-card,.market-card,.billing-plan-card,.billing-usage-card) { border-radius:var(--ux220-radius-lg); }
body.ux220-ready .ux220-card-clickable { position:relative; }
body.ux220-ready .ux220-card-clickable:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 26%,var(--line))!important; box-shadow:var(--ux220-shadow-mid)!important; }
body.ux220-ready .ux220-card-clickable:focus-within { box-shadow:var(--focus-ring),var(--ux220-shadow-low)!important; }
body.ux220-ready .ux220-card-selected { border-color:var(--primary)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent),var(--ux220-shadow-low)!important; }

/* 331–370: operational tables, filtering, rows and mobile records */
body.ux220-ready .table-scroll,
body.ux220-ready .admin-table-wrap { position:relative; overflow:auto; overscroll-behavior-inline:contain; scrollbar-gutter:stable; border:1px solid var(--line); border-radius:var(--ux220-radius-lg); background:var(--surface); }
body.ux220-ready .table-scroll[data-scrollable="true"]::after,
body.ux220-ready .admin-table-wrap[data-scrollable="true"]::after { content:"Scroll horizontally for more"; position:sticky; left:50%; bottom:8px; z-index:15; width:max-content; margin-left:auto; padding:4px 8px; display:block; border-radius:999px; color:var(--muted); background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:var(--ux220-shadow-low); font-size:.66rem; pointer-events:none; }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) { width:100%; border-collapse:separate; border-spacing:0; }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) th { position:sticky; top:0; z-index:8; height:46px; padding:10px 13px; border-bottom:1px solid var(--line); color:var(--muted); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(14px); font-size:.7rem; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) td { min-height:50px; padding:12px 13px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) tbody tr:last-child td { border-bottom:0; }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) tbody tr:hover td { background:color-mix(in srgb,var(--primary-soft) 28%,var(--surface)); }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) tbody tr:focus-within td { background:color-mix(in srgb,var(--primary-soft) 54%,var(--surface)); }
body.ux220-ready :where(.admin-table,.asset-table,.billing-table,.responsive-admin-table,table[data-modern-table="true"]) tr.is-selected td { background:var(--surface-selected)!important; }
body.ux220-ready tr.ux220-recently-updated td { animation:ux220-row-update 1.9s ease-out; }
@keyframes ux220-row-update { 0% { background:color-mix(in srgb,var(--primary-soft) 86%,var(--surface)); } 100% { background:transparent; } }
body.ux220-ready .ux220-sticky-identity { position:sticky!important; left:0; z-index:7; background:var(--surface)!important; box-shadow:8px 0 12px -12px rgba(10,20,35,.45); }
body.ux220-ready th.ux220-sticky-identity { z-index:12; }
body.ux220-ready .ux220-sticky-actions { position:sticky!important; right:0; z-index:7; background:var(--surface)!important; box-shadow:-8px 0 12px -12px rgba(10,20,35,.45); }
body.ux220-ready th.ux220-sticky-actions { z-index:12; }
body.ux220-ready .ux220-column-resizer { position:absolute; top:0; right:-4px; bottom:0; width:9px; cursor:col-resize; touch-action:none; }
body.ux220-ready .ux220-column-resizer::after { content:""; position:absolute; top:8px; right:4px; bottom:8px; width:1px; background:transparent; }
body.ux220-ready .ux220-column-resizer:hover::after,
body.ux220-ready .ux220-column-resizer.is-resizing::after { background:var(--primary); }
body.ux220-ready th.ux220-resizable { position:relative; }
body.ux220-ready.ux220-column-resizing { cursor:col-resize; user-select:none; }
body.ux220-ready .table-tools,
body.ux220-ready .filter-toolbar,
body.ux220-ready .ux220-table-toolbar { gap:9px; border-radius:var(--ux220-radius-md); }
body.ux220-ready .ux220-filter-chips { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
body.ux220-ready .ux220-filter-chip { min-height:32px; padding:4px 8px 4px 10px; display:inline-flex; align-items:center; gap:7px; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)); border-radius:999px; color:var(--primary); background:var(--primary-soft); font-size:.72rem; font-weight:720; }
body.ux220-ready .ux220-filter-chip button { width:22px; height:22px; padding:0; display:grid; place-items:center; border-radius:50%; color:inherit; background:transparent; }
body.ux220-ready .ux220-table-summary { min-height:44px; padding:9px 13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; border-top:1px solid var(--line); color:var(--muted); background:var(--surface-soft); font-size:.74rem; }
body.ux220-ready .ux220-table-summary strong { color:var(--text-strong); font-variant-numeric:tabular-nums; }
body.ux220-ready .ux220-bulk-bar { position:sticky; bottom:12px; z-index:35; width:max-content; max-width:calc(100% - 24px); margin:12px auto; padding:8px 10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:var(--ux220-shadow-mid); backdrop-filter:blur(18px); }
body.ux220-ready .ux220-row-detail__content { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
body.ux220-ready .ux220-row-detail__content > div { padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
body.ux220-ready .ux220-row-detail__content span { display:block; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }

/* 371–400: forms, validation and guided workflows */
body.ux220-ready form { scroll-margin-top:calc(var(--topbar-h,72px) + 20px); }
body.ux220-ready :where(.auth-form,.register-form,.case-form,.market-form,.pricing-form) { width:100%; }
body.ux220-ready :where(.auth-form,.register-form,.case-form,.market-form,.pricing-form) label { min-width:0; }
body.ux220-ready .ux220-field-row { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
body.ux220-ready .ux220-field-row > label { grid-column:span 6; }
body.ux220-ready .ux220-field-row > label[data-field-size="short"] { grid-column:span 3; }
body.ux220-ready .ux220-field-row > label[data-field-size="medium"] { grid-column:span 4; }
body.ux220-ready .ux220-field-row > label[data-field-size="wide"] { grid-column:span 8; }
body.ux220-ready .ux220-field-row > label[data-field-size="full"] { grid-column:1/-1; }
body.ux220-ready input:not([type="checkbox"]):not([type="radio"]),
body.ux220-ready select,
body.ux220-ready textarea { min-height:var(--ux220-control); }
body.ux220-ready :where(input,select,textarea)::placeholder { color:color-mix(in srgb,var(--muted) 72%,transparent); }
body.ux220-ready .ux220-field-help { margin-top:6px; display:block; color:var(--muted); font-size:.72rem; font-weight:480; line-height:1.45; }
body.ux220-ready .ux220-field-status { min-height:19px; margin-top:5px; display:flex; align-items:center; gap:6px; font-size:.72rem; }
body.ux220-ready .ux220-field-status.is-valid { color:var(--green); }
body.ux220-ready .ux220-field-status.is-warning { color:var(--amber); }
body.ux220-ready .ux220-field-status.is-error { color:var(--red); }
body.ux220-ready .ux220-password-meter { margin-top:7px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
body.ux220-ready .ux220-password-meter span { height:4px; border-radius:999px; background:var(--line); }
body.ux220-ready .ux220-password-meter[data-score="1"] span:nth-child(-n+1),
body.ux220-ready .ux220-password-meter[data-score="2"] span:nth-child(-n+2),
body.ux220-ready .ux220-password-meter[data-score="3"] span:nth-child(-n+3),
body.ux220-ready .ux220-password-meter[data-score="4"] span:nth-child(-n+4) { background:var(--primary); }
body.ux220-ready .ux220-error-summary { border-radius:var(--ux220-radius-md); }
body.ux220-ready .ux220-error-summary li + li { margin-top:4px; }
body.ux220-ready :where(.legal-check,.toggle-label) { min-height:var(--ux220-touch); padding:8px 10px; border-radius:10px; }
body.ux220-ready :where(.legal-check,.toggle-label):hover { background:var(--surface-soft); }
body.ux220-ready :where(input[type="checkbox"],input[type="radio"]) { width:18px; height:18px; accent-color:var(--primary); }
body.ux220-ready .ux220-form-progress { height:5px; overflow:hidden; border-radius:999px; background:var(--surface-soft); }
body.ux220-ready .ux220-form-progress > span { display:block; width:var(--progress,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--surety-cyan-500)); transition:width var(--ux220-duration-slow) ease; }
body.ux220-ready .ux220-unsaved-indicator { min-height:30px; padding:4px 9px; display:inline-flex; align-items:center; gap:7px; border-radius:999px; color:var(--amber); background:var(--amber-soft); font-size:.7rem; font-weight:750; }
body.ux220-ready :where(.form-stepper,.workflow-progress,.case-progress) { position:relative; }
body.ux220-ready .form-stepper::before { content:""; position:absolute; top:34px; left:7%; right:7%; height:2px; background:var(--line); z-index:0; }
body.ux220-ready .form-stepper > * { position:relative; z-index:1; }
body.ux220-ready .ux220-workflow-summary { position:sticky; top:calc(var(--topbar-h,72px) + 16px); align-self:start; padding:18px; border:1px solid var(--line); border-radius:var(--ux220-radius-lg); background:var(--surface-raised); box-shadow:var(--ux220-shadow-low); }
body.ux220-ready .ux220-review-change { padding:11px 13px; display:grid; grid-template-columns:minmax(120px,.45fr) minmax(0,1.55fr); gap:12px; border-bottom:1px solid var(--line-soft); }
body.ux220-ready .ux220-review-change:last-child { border-bottom:0; }
body.ux220-ready .ux220-review-change > span { color:var(--muted); font-size:.75rem; font-weight:760; }
body.ux220-ready .ux220-completion-card { padding:clamp(22px,3vw,38px); display:grid; gap:16px; border:1px solid color-mix(in srgb,var(--green) 26%,var(--line)); border-radius:var(--ux220-radius-xl); background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--green-soft) 52%,var(--surface))); box-shadow:var(--ux220-shadow-mid); }

/* 401–410: overlays, drawers, popovers and action safety */
body.ux220-overlay-open { overflow:hidden; }
body.ux220-ready :where(.modal,.market-modal-card,.dialog-card,.ux-confirm,.ux-drawer) { scrollbar-gutter:stable; }
body.ux220-ready :where(.modal,.market-modal-card,.dialog-card,.ux-confirm) { width:min(var(--ux220-dialog-width,720px),calc(100vw - 28px)); max-height:min(90dvh,920px); overflow:auto; }
body.ux220-ready :where(.modal,.market-modal-card,.dialog-card,.ux-confirm) > :where(header,.modal-header):first-child { position:sticky; top:0; z-index:8; margin:calc(clamp(20px,3vw,32px) * -1) calc(clamp(20px,3vw,32px) * -1) 18px; padding:16px clamp(20px,3vw,32px); background:color-mix(in srgb,var(--surface-raised) 95%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
body.ux220-ready :where(.modal,.market-modal-card,.dialog-card,.ux-confirm) > :where(.modal-actions,footer):last-child { position:sticky; bottom:0; z-index:8; margin:18px calc(clamp(20px,3vw,32px) * -1) calc(clamp(20px,3vw,32px) * -1); padding:14px clamp(20px,3vw,32px); background:color-mix(in srgb,var(--surface-raised) 95%,transparent); border-top:1px solid var(--line); backdrop-filter:blur(18px); }
body.ux220-ready .ux220-drawer { position:fixed; inset:0 0 0 auto; z-index:520; width:min(var(--ux220-drawer-width,620px),100vw); display:grid; grid-template-rows:auto minmax(0,1fr) auto; border-left:1px solid var(--line); background:var(--surface-raised); box-shadow:var(--ux220-shadow-high); transform:translateX(101%); transition:transform var(--ux220-duration-slow) ease; }
body.ux220-ready .ux220-drawer.is-open { transform:translateX(0); }
body.ux220-ready .ux220-drawer > header,
body.ux220-ready .ux220-drawer > footer { padding:16px 20px; border-color:var(--line); }
body.ux220-ready .ux220-drawer > header { border-bottom:1px solid var(--line); }
body.ux220-ready .ux220-drawer > footer { border-top:1px solid var(--line); }
body.ux220-ready .ux220-drawer__body { min-height:0; padding:20px; overflow:auto; }
body.ux220-ready .ux220-drawer-backdrop { position:fixed; inset:0; z-index:510; background:rgba(8,12,22,.56); backdrop-filter:blur(5px); }
body.ux220-ready .ux220-danger-zone { padding:16px; border:1px solid color-mix(in srgb,var(--red) 32%,var(--line)); border-radius:var(--ux220-radius-lg); background:color-mix(in srgb,var(--red-soft) 46%,var(--surface)); }

/* 411–430: validator, evidence, administration and operations */
body.ux220-ready .case-layout,
body.ux220-ready .validator-layout,
body.ux220-ready .validator-workspace { align-items:start; }
body.ux220-ready .validator-case-list { max-height:calc(100dvh - var(--topbar-h,72px) - 54px); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
body.ux220-ready .validator-case-list > :where(a,article) { border-left:4px solid transparent; }
body.ux220-ready .validator-case-list > :where(a,article)[data-priority="high"],
body.ux220-ready .validator-case-list > :where(a,article):has(.danger,.critical,.overdue) { border-left-color:var(--red); }
body.ux220-ready .case-heading { top:calc(var(--topbar-h,72px) + 10px); }
body.ux220-ready .ux220-evidence-toolbar { position:sticky; top:0; z-index:15; padding:9px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(16px); }
body.ux220-ready .ux220-evidence-toolbar button { min-width:var(--ux220-touch); min-height:var(--ux220-touch); }
body.ux220-ready .evidence-list :where(article,a).is-active { border-color:var(--primary); background:var(--surface-selected); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent); }
body.ux220-ready .evidence-preview,
body.ux220-ready .document-preview { min-height:clamp(420px,65dvh,900px); background:var(--surface-sunken); }
body.ux220-ready .check-workspace,
body.ux220-ready .validator-checks { display:grid; gap:10px; }
body.ux220-ready .ux220-note-visibility { min-height:28px; padding:4px 8px; display:inline-flex; align-items:center; gap:6px; border-radius:999px; font-size:.68rem; font-weight:780; }
body.ux220-ready .ux220-note-visibility[data-visibility="internal"] { color:var(--ux220-security); background:var(--blue-soft); }
body.ux220-ready .ux220-note-visibility[data-visibility="external"] { color:var(--ux220-trust); background:var(--green-soft); }
body.ux220-ready .admin-main .admin-section { scroll-margin-top:calc(var(--topbar-h,72px) + 22px); }
body.ux220-ready .admin-section[data-severity="critical"],
body.ux220-ready .admin-section.danger-zone { border-color:color-mix(in srgb,var(--red) 34%,var(--line))!important; }
body.ux220-ready .ux220-environment-pill { min-height:28px; padding:4px 9px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-soft); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
body.ux220-ready .ux220-health-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:10px; }
body.ux220-ready .ux220-health-item { padding:13px; display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
body.ux220-ready .ux220-health-item > i { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }

/* 431–450: marketplace, billing and account settings */
body.ux220-ready :where(.market-grid,.marketplace-grid,.market-listing-grid) { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); }
body.ux220-ready .market-card { min-width:0; }
body.ux220-ready .market-card :where(img,picture,.asset-visual) { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--surface-sunken); }
body.ux220-ready .market-card :where(h2,h3) { min-height:2.55em; }
body.ux220-ready .ux220-listing-state { position:absolute; top:12px; left:12px; z-index:4; min-height:29px; padding:5px 9px; display:inline-flex; align-items:center; gap:6px; border-radius:999px; color:#fff; background:rgba(12,18,32,.82); backdrop-filter:blur(8px); font-size:.68rem; font-weight:800; }
body.ux220-ready .market-card { position:relative; }
body.ux220-ready .market-detail-grid > aside { max-height:calc(100dvh - var(--topbar-h,72px) - 28px); overflow:auto; scrollbar-gutter:stable; }
body.ux220-ready .ux220-price-stack { display:grid; gap:4px; }
body.ux220-ready .ux220-price-stack strong { font-size:clamp(1.45rem,2vw,2rem); letter-spacing:-.04em; }
body.ux220-ready .market-filter-bar { padding:12px; }
body.ux220-ready .ux220-mobile-filter-trigger { display:none; }
body.ux220-ready .billing-plan-card,
body.ux220-ready .billing-usage-card,
body.ux220-ready .billing-summary-card { min-width:0; }
body.ux220-ready .billing-plan-card.current::before { box-shadow:var(--ux220-shadow-low); }
body.ux220-ready .ux220-billing-state { padding:14px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
body.ux220-ready .ux220-billing-state[data-state="failed"] { border-color:color-mix(in srgb,var(--red) 32%,var(--line)); background:var(--red-soft); }
body.ux220-ready .ux220-billing-state > i { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--primary); background:var(--primary-soft); }
body.ux220-ready :where(.settings-nav,.account-settings-nav) a { min-height:42px; padding:9px 11px; border-radius:10px; }
body.ux220-ready :where(.settings-nav,.account-settings-nav) a.active { color:var(--primary); background:var(--primary-soft); font-weight:760; }
body.ux220-ready .usage-meter,
body.ux220-ready .progress-meter { min-height:9px; }
body.ux220-ready .ux220-plan-timeline { position:relative; padding-left:24px; display:grid; gap:14px; }
body.ux220-ready .ux220-plan-timeline::before { content:""; position:absolute; top:6px; bottom:6px; left:7px; width:2px; background:var(--line); }
body.ux220-ready .ux220-plan-timeline > * { position:relative; }
body.ux220-ready .ux220-plan-timeline > *::before { content:""; position:absolute; left:-21px; top:5px; width:10px; height:10px; border:2px solid var(--surface); border-radius:50%; background:var(--primary); box-shadow:0 0 0 2px var(--primary); }

/* Authentication and onboarding refinements */
body.ux220-ready.auth-body,
body.ux220-ready.auth-page { min-height:100dvh; background:
  radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 34%),
  radial-gradient(circle at 88% 86%,color-mix(in srgb,var(--surety-cyan-500) 12%,transparent),transparent 32%),var(--bg); }
body.ux220-ready .auth-shell { width:min(100%,520px); padding:clamp(18px,4vw,42px); }
body.ux220-ready .auth-card { border-radius:var(--ux220-radius-xl); box-shadow:var(--ux220-shadow-high); }
body.ux220-ready .auth-card h1 { font-size:clamp(1.9rem,5vw,2.7rem); }
body.ux220-ready .auth-links { align-items:center; }
body.ux220-ready .ux220-password-requirements { margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; list-style:none; color:var(--muted); font-size:.7rem; }
body.ux220-ready .ux220-password-requirements li { display:flex; align-items:center; gap:6px; }
body.ux220-ready .ux220-password-requirements li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
body.ux220-ready .ux220-password-requirements li.is-met { color:var(--green); }
body.ux220-ready .ux220-password-requirements li.is-met::before { background:var(--green); }
body.ux220-ready .ux220-auth-context { margin:12px 0; padding:12px; display:grid; gap:5px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }

/* Loading, errors, notifications and collaboration */
body.ux220-ready .ux220-local-loading { position:relative; pointer-events:none; }
body.ux220-ready .ux220-local-loading::after { content:""; position:absolute; inset:0; z-index:20; border-radius:inherit; background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--surface) 72%,transparent) 45%,transparent 65%); background-size:220% 100%; animation:ux220-shimmer 1.15s linear infinite; }
@keyframes ux220-shimmer { to { background-position:-220% 0; } }
body.ux220-ready .ux220-request-reference { display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface-soft); font-family:var(--font-mono); font-size:.68rem; }
body.ux220-ready .ux220-partial-success { border-color:color-mix(in srgb,var(--amber) 30%,var(--line)); background:var(--amber-soft); }
body.ux220-ready :where(.notification-list,.activity-list,.timeline-list) > * { scroll-margin-top:100px; }
body.ux220-ready .ux220-notification-group { margin:18px 0 8px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.7rem; font-weight:820; letter-spacing:.06em; text-transform:uppercase; }
body.ux220-ready .ux220-notification-group::after { content:""; height:1px; flex:1; background:var(--line); }
body.ux220-ready [data-comment-visibility="private"],
body.ux220-ready .comment.private { border-left:3px solid var(--ux220-security); background:color-mix(in srgb,var(--blue-soft) 34%,var(--surface)); }
body.ux220-ready [data-comment-visibility="external"],
body.ux220-ready .comment.external { border-left:3px solid var(--ux220-trust); background:color-mix(in srgb,var(--green-soft) 30%,var(--surface)); }

/* Accessibility preferences and interaction resilience */
body.ux220-ready :focus-visible { scroll-margin:110px 18px; }
body.ux220-ready :where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent); outline-offset:2px; }
body.ux220-ready .ux220-visually-hidden,
body.ux220-ready .visually-hidden:not(select) { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
body.ux220-ready [data-icon-only="true"] { min-width:var(--ux220-touch); min-height:var(--ux220-touch); }
body.ux220-ready .ux220-live-region { position:fixed; left:-9999px; width:1px; height:1px; overflow:hidden; }
:root[data-contrast="high"] body.ux220-ready :where(.panel,.card,.admin-section,.case-card,.market-card,.table-scroll,.admin-table-wrap,input,select,textarea) { border-color:var(--text)!important; }
:root[data-contrast="high"] body.ux220-ready :where(.muted,small,.section-label,.eyebrow) { color:var(--text)!important; }

/* Responsive layout */
@media (max-width:1180px) {
  body.ux220-ready .ux220-grid-12 > * { grid-column:span 6; }
  body.ux220-ready .ux220-grid-12 > .wide { grid-column:1/-1; }
  body.ux220-ready .market-detail-grid { grid-template-columns:minmax(0,1fr)!important; }
  body.ux220-ready .market-detail-grid > aside { position:relative; top:auto; max-height:none; overflow:visible; }
  body.ux220-ready .ux220-workflow-summary { position:relative; top:auto; }
}
@media (max-width:900px) {
  body.ux220-ready :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) { min-height:0; border-radius:var(--ux220-radius-lg); }
  body.ux220-ready .ux220-field-row > label,
  body.ux220-ready .ux220-field-row > label[data-field-size] { grid-column:span 6; }
  body.ux220-ready .ux220-mobile-filter-trigger { display:inline-flex; }
  body.ux220-ready .market-filter-bar[data-mobile-collapsed="true"] > :not(.ux220-mobile-filter-trigger) { display:none!important; }
  body.ux220-ready .settings-nav,
  body.ux220-ready .account-settings-nav { position:relative; top:auto; display:flex; overflow:auto; }
}
@media (max-width:760px) {
  :root { --ux220-gutter:14px; --ux220-section:24px; --ux220-card-gap:12px; }
  body.ux220-ready .ux220-grid-12 > *,
  body.ux220-ready .ux220-grid-12 > .wide { grid-column:1/-1; }
  body.ux220-ready h1 { font-size:clamp(1.72rem,8vw,2.35rem); }
  body.ux220-ready .page-actions,
  body.ux220-ready .heading-actions { width:100%; }
  body.ux220-ready .page-actions > .primary-button,
  body.ux220-ready .heading-actions > .primary-button { flex:1 1 auto; }
  body.ux220-ready .ux220-field-row { grid-template-columns:1fr; }
  body.ux220-ready .ux220-field-row > label,
  body.ux220-ready .ux220-field-row > label[data-field-size] { grid-column:1; }
  body.ux220-ready .form-grid.two,
  body.ux220-ready .form-grid.three { grid-template-columns:1fr; }
  body.ux220-ready .form-stepper { grid-template-columns:1fr; }
  body.ux220-ready .form-stepper::before { display:none; }
  body.ux220-ready .ux220-password-requirements { grid-template-columns:1fr; }
  body.ux220-ready .ux220-drawer { width:100vw; }
  body.ux220-ready .ux220-bulk-bar { width:calc(100% - 20px); justify-content:center; }
  body.ux220-ready .ux220-sticky-actions,
  body.ux220-ready .ux220-sticky-identity { position:static!important; box-shadow:none; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] table,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] table { display:block; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] thead,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] thead { display:none; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] tbody,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] tbody { padding:10px; display:grid; gap:10px; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] tr,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] tr { padding:13px; display:grid; gap:8px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] td,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] td { min-height:0; padding:0!important; display:grid; grid-template-columns:minmax(92px,.45fr) minmax(0,1fr); gap:9px; border:0!important; background:transparent!important; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] td::before,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] td::before { content:attr(data-label); color:var(--muted); font-size:.68rem; font-weight:820; letter-spacing:.04em; text-transform:uppercase; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] td:first-child,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] td:first-child { padding-bottom:8px!important; display:block; border-bottom:1px solid var(--line)!important; font-size:1rem; font-weight:780; }
  body.ux220-ready .table-scroll[data-mobile-cards="true"] td:first-child::before,
  body.ux220-ready .admin-table-wrap[data-mobile-cards="true"] td:first-child::before { display:none; }
  body.ux220-ready :where(.modal,.market-modal-card,.dialog-card,.ux-confirm) { width:100vw; max-width:none; min-height:100dvh; max-height:100dvh; border-radius:0; }
}
@media (max-width:520px) {
  body.ux220-ready :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) { padding:18px; }
  body.ux220-ready .ux220-review-change { grid-template-columns:1fr; gap:4px; }
  body.ux220-ready .ux220-attention-item,
  body.ux220-ready .ux220-billing-state { grid-template-columns:34px minmax(0,1fr); }
  body.ux220-ready .ux220-attention-item > :last-child,
  body.ux220-ready .ux220-billing-state > :last-child { grid-column:2; }
}
@media (prefers-reduced-motion:reduce) {
  body.ux220-ready *,body.ux220-ready *::before,body.ux220-ready *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
@media print {
  body.ux220-ready { background:#fff!important; color:#111!important; }
  body.ux220-ready :where(.sidebar,.topbar,.context-nav,.page-actions,.heading-actions,.icon-button,.ux220-copy,.ux220-bulk-bar) { display:none!important; }
  body.ux220-ready :where(.main,.admin-main,.case-main,.panel-workspace,.page) { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
  body.ux220-ready :where(.panel,.card,.admin-section,.case-card,.market-card) { break-inside:avoid; box-shadow:none!important; }
  body.ux220-ready a { color:inherit!important; text-decoration:none!important; }
}


/* 2.2 navigation and interaction foundation */
body.ux220-ready .sidebar { isolation:isolate; }
body.ux220-ready .sidebar .primary-nav { display:grid; align-content:start; gap:3px; padding:4px 2px 18px; overflow:visible; }
body.ux220-ready .sidebar .nav-label { min-height:auto; margin:15px 8px 5px; padding:10px 4px 5px; display:block; border-top:1px solid var(--line-soft); color:var(--muted-2); font-size:.64rem; font-weight:850; line-height:1.2; letter-spacing:.09em; text-transform:uppercase; pointer-events:none; }
body.ux220-ready .sidebar .nav-label:first-child { margin-top:4px; padding-top:5px; border-top:0; }
body.ux220-ready .sidebar .nav-link { position:relative; min-height:44px; padding:0 11px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid transparent; border-radius:11px; color:var(--muted); background:transparent; line-height:1.25; }
body.ux220-ready .sidebar .nav-link > i:first-child { width:24px; height:24px; display:grid; place-items:center; flex:0 0 24px; color:var(--muted-2); font-size:.92rem; }
body.ux220-ready .sidebar .nav-link:hover { color:var(--text-strong); border-color:var(--line-soft); background:var(--surface-soft); }
body.ux220-ready .sidebar .nav-link:hover > i:first-child { color:var(--primary); }
body.ux220-ready .sidebar .nav-link.active { color:var(--primary); border-color:color-mix(in srgb,var(--primary) 22%,var(--line)); background:var(--primary-soft); box-shadow:none; }
body.ux220-ready .sidebar .nav-link.active::before { content:""; position:absolute; left:-3px; top:10px; bottom:10px; width:3px; border-radius:999px; background:var(--primary); }
body.ux220-ready .sidebar .nav-link.active > i:first-child { color:var(--primary); }
body.ux220-ready .sidebar .nav-active-dot { display:none; }
body.sidebar-collapsed.ux220-ready .sidebar .primary-nav { gap:7px; padding-inline:0; }
body.sidebar-collapsed.ux220-ready .sidebar .nav-link { width:46px; min-height:46px; margin-inline:auto; padding:0; display:grid; grid-template-columns:1fr; place-items:center; }
body.sidebar-collapsed.ux220-ready .sidebar .nav-link > i:first-child { width:22px; height:22px; font-size:1rem; }
body.sidebar-collapsed.ux220-ready .sidebar .nav-link.active::before { left:3px; top:12px; bottom:12px; }
body.ux220-ready :where(.fa,.fa-solid,.fas) { flex-shrink:0; }
body.ux220-ready :where(.icon-button,.mobile-menu,.sidebar-collapse-button) > :where(.fa,.fa-solid,.fas) { margin:0; line-height:1; }
body.ux220-ready :where(.primary-button,.secondary-button,.danger-button,.text-button) > :where(.fa,.fa-solid,.fas):first-child { width:1.1em; text-align:center; }
body.ux220-ready :where(.primary-button,.secondary-button,.danger-button,.text-button) > :where(.fa,.fa-solid,.fas):last-child:not(:first-child) { margin-left:.15em; }
@media (max-width:980px) {
  body.ux220-ready .sidebar .primary-nav { padding-bottom:26px; }
  body.ux220-ready .sidebar .nav-label { margin-top:12px; }
}

body.ux220-ready .sidebar .primary-nav { flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
body.ux220-ready .sidebar .nav-link::before { height:auto; }
body.ux220-ready .sidebar-bottom { flex:0 0 auto; }

body.sidebar-collapsed.ux220-ready .sidebar .mode-switch { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin-inline:0; padding:3px; }
body.sidebar-collapsed.ux220-ready .sidebar .mode-switch a { width:auto; min-width:0; min-height:34px; padding:0; display:flex!important; }
body.sidebar-collapsed.ux220-ready .sidebar .mode-switch a > span { display:none!important; }
body.sidebar-collapsed.ux220-ready .sidebar .mode-switch a > i { margin:0; font-size:.88rem; }

/* 2.2 grid, spacing and responsive-shell foundation */
:root {
  --layout-gap-xs: 8px;
  --layout-gap-sm: 12px;
  --layout-gap-md: 18px;
  --layout-gap-lg: 24px;
  --layout-gap-xl: clamp(28px, 3vw, 44px);
  --layout-panel-pad: clamp(18px, 1.75vw, 28px);
  --layout-page-gutter: clamp(16px, 2.6vw, 48px);
}

body.ux220-ready :where(.main,.admin-main,.case-main,.panel-workspace) { min-width:0; }
body.ux220-ready :where(.page,.server-page) { min-width:0; padding-inline:var(--layout-page-gutter); }
body.ux220-ready :where(.page,.server-page) > * { min-width:0; }

/* Keep top-level sections on one vertical rhythm without stacking legacy margins. */
body.ux220-ready :where(.page,.server-page) > :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) { margin-block:0 var(--layout-gap-lg); }
body.ux220-ready :where(.page,.server-page) > :where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.billing-overview,.settings-grid,.workspace-overview-grid,.experience-layout,.panel,.admin-section,.billing-plan-grid,.billing-api-grid,.asset-grid,.organization-grid,.developer-grid,.answer-grid,.glossary-grid) { margin-block:0 var(--layout-gap-lg); }
body.ux220-ready :where(.page,.server-page) > :last-child { margin-bottom:0; }

/* Shared grid behavior: no zero-width phantom tracks and no stretched empty columns. */
body.ux220-ready :where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis,.billing-summary-grid,.billing-usage-grid,.billing-api-metrics,.health-metrics,.action-metrics,.revenue-placement-grid) {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--layout-gap-md)!important;
  align-items:stretch;
}
body.ux220-ready :where(.settings-grid,.workspace-overview-grid,.security-boundary-grid,.certificate-workspace-grid,.platform-two-column) {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:var(--layout-gap-lg)!important;
  align-items:start;
}
body.ux220-ready :where(.asset-grid,.organization-grid,.developer-grid,.answer-grid,.glossary-grid,.market-grid,.transaction-card-grid,.revenue-placement-grid) {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--layout-gap-md)!important;
  align-items:stretch;
}
body.ux220-ready .billing-plan-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:var(--layout-gap-md)!important;
  align-items:stretch;
}
body.ux220-ready .billing-api-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--layout-gap-md)!important;
  align-items:stretch;
}
body.ux220-ready :where(.form-grid.two,.ux220-field-row) { gap:var(--layout-gap-md); }
body.ux220-ready .form-grid.three { gap:var(--layout-gap-md); }
body.ux220-ready :where(.panel-header,.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) { column-gap:var(--layout-gap-lg); row-gap:var(--layout-gap-md); }
body.ux220-ready :where(.panel-actions,.page-actions,.heading-actions,.record-actions,.modal-actions) { gap:var(--layout-gap-sm); }

/* Panels that are peers should size from their own content unless comparison requires equal height. */
body.ux220-ready :where(.settings-grid,.workspace-overview-grid,.security-boundary-grid,.certificate-workspace-grid) > * { align-self:start; width:100%; min-width:0; }
body.ux220-ready :where(.billing-plan-grid,.billing-usage-grid,.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics) > * { width:100%; min-width:0; }

/* Prevent nested containers from multiplying the outer page gutter. */
body.ux220-ready :where(.page,.server-page) > :where(.panel,.admin-section,.case-card) > :where(.panel,.admin-section,.case-card):only-child { margin-inline:0; }
body.ux220-ready :where(.panel,.admin-section,.case-card,.market-card,.billing-plan-card,.billing-usage-card) { min-width:0; }
body.ux220-ready :where(.panel-header,.billing-section-head) > :first-child { min-width:0; }
body.ux220-ready :where(.panel-header,.billing-section-head) > :first-child > :where(h2,h3,p) { overflow-wrap:anywhere; }

/* One shell breakpoint: if the sidebar is off canvas, content never keeps its desktop offset. */
@media (max-width:1180px) {
  :root { --sidebar-w:0px!important; }
  body.sidebar-collapsed { --sidebar-w:0px!important; }
  body.ux220-ready :where(.main,.admin-main,.case-main,.panel-workspace) { width:100%!important; max-width:none; margin-left:0!important; }
  body.ux220-ready .topbar { left:0!important; }
  body.ux220-ready .sidebar { width:min(280px,86vw)!important; transform:translateX(-102%); }
  body.ux220-ready.sidebar-open .sidebar { transform:translateX(0); }
  body.ux220-ready .mobile-menu { display:grid; }
  body.ux220-ready .sidebar-collapse-button, body.ux220-ready .sidebar-resize-handle { display:none; }
}

@media (max-width:900px) {
  :root { --layout-page-gutter:clamp(14px,3vw,24px); --layout-gap-lg:20px; --layout-gap-md:14px; }
  body.ux220-ready :where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis,.billing-summary-grid,.billing-usage-grid,.billing-api-metrics,.health-metrics,.action-metrics) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.ux220-ready :where(.billing-plan-grid,.billing-api-grid,.asset-grid,.organization-grid,.developer-grid,.answer-grid,.glossary-grid,.market-grid,.transaction-card-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px) {
  :root { --layout-page-gutter:14px; --layout-gap-sm:10px; --layout-gap-md:12px; --layout-gap-lg:18px; --layout-panel-pad:16px; }
  body.ux220-ready :where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis,.billing-summary-grid,.billing-usage-grid,.billing-api-metrics,.health-metrics,.action-metrics,.billing-plan-grid,.billing-api-grid,.asset-grid,.organization-grid,.developer-grid,.answer-grid,.glossary-grid,.market-grid,.transaction-card-grid,.settings-grid,.workspace-overview-grid,.security-boundary-grid,.certificate-workspace-grid,.platform-two-column) {
    grid-template-columns:minmax(0,1fr);
  }
  body.ux220-ready :where(.page,.server-page) > :where(.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading,.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.billing-overview,.settings-grid,.workspace-overview-grid,.experience-layout,.panel,.admin-section,.billing-plan-grid,.billing-api-grid,.asset-grid,.organization-grid,.developer-grid,.answer-grid,.glossary-grid) { margin-bottom:var(--layout-gap-lg); }
  body.ux220-ready :where(.page-actions,.heading-actions,.panel-actions,.modal-actions) { width:100%; }
  body.ux220-ready :where(.page-actions,.heading-actions) > :where(a,button,form) { flex:1 1 100%; min-width:0; }
  body.ux220-ready :where(.page-actions,.heading-actions) > form > button { width:100%; }
}

/* Column layouts must not retain desktop flex-basis values. */
@media (max-width:760px) {
  body.ux220-ready :where(.panel-header,.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) > div:first-child {
    width:100%;
    flex:0 1 auto!important;
  }
  body.ux220-ready :where(.panel-header,.page-heading,.workspace-hero,.panel-hero,.admin-heading,.case-heading) > :where(.page-actions,.heading-actions,.panel-actions,.primary-button,.secondary-button,.icon-button,select) {
    align-self:stretch;
    margin-left:0;
  }
  body.ux220-ready .panel-header > :where(.icon-button,.panel-count,.trust-badge,.status-badge) { align-self:flex-start; }
}

/* 2.2 navigation, transition, and responsive interaction foundation */

/* Page-level blocking loaders are intentionally retired. Async actions retain local
   button, skeleton, and section progress without obscuring the application shell. */
.page-loader,
.surety-boot-loader,
[data-page-loader],
[data-app-loading] { display:none!important; }
body.page-loading,
body.app-booting { cursor:auto; overflow-x:hidden; }

/* Newly rendered content enters without a blocking interstitial. */
.ux-element-entrance > * {
  opacity:0;
  transform:translateY(8px);
}
.ux-element-entrance.ux-element-entrance-ready > * {
  opacity:1;
  transform:none;
  transition:opacity .32s ease,transform .32s ease;
}
.ux-element-entrance.ux-element-entrance-ready > :nth-child(2) { transition-delay:35ms; }
.ux-element-entrance.ux-element-entrance-ready > :nth-child(3) { transition-delay:70ms; }
.ux-element-entrance.ux-element-entrance-ready > :nth-child(4) { transition-delay:105ms; }
.ux-element-entrance.ux-element-entrance-ready > :nth-child(n+5) { transition-delay:130ms; }
#app.app-content-enter :where(.page,.admin-main,.case-main,.panel-workspace) > * {
  opacity:0;
  transform:translateY(8px);
}
#app.app-content-enter.app-content-ready :where(.page,.admin-main,.case-main,.panel-workspace) > * {
  opacity:1;
  transform:none;
  transition:opacity .32s ease,transform .32s ease;
}

/* Scroll-edge decoration must not replace sticky positioning. Public context
   navigation follows the page flow so it never overlays verification shortcuts. */
body.ux220-ready .ux220-scroll-edge:not(.context-nav) { position:relative; }
body.ux220-ready .context-nav.ux220-scroll-edge { position:sticky; }
body[data-layout="public"].ux220-ready .context-nav {
  position:relative;
  top:auto;
  z-index:2;
  margin:calc(var(--layout-gap-sm) * -1) 0 var(--layout-gap-md);
}
body[data-layout="public"].ux220-ready .context-nav + .verification-shortcuts {
  margin-top:0;
}

/* Fixed action tools are centered within the usable canvas, not the full viewport
   plus an additional sidebar width. */
body.ux220-ready .sticky-action-bar,
body.ux220-ready .bulk-action-bar {
  left:calc((100vw + var(--sidebar-w)) / 2);
  width:max-content;
  max-width:min(900px,calc(100vw - var(--sidebar-w) - 32px));
}

.sidebar-mobile-close { display:none; }

@media (max-width:1180px) {
  body.sidebar-open { overflow:hidden; }
  body.ux220-ready .sidebar {
    width:min(340px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px);
    height:100dvh;
    padding:14px 12px max(14px,env(safe-area-inset-bottom));
    overflow:hidden;
    border-radius:0 18px 18px 0;
  }
  body.ux220-ready .sidebar .brand {
    min-height:46px;
    padding-right:48px;
  }
  body.ux220-ready .sidebar .mode-switch {
    flex:0 0 auto;
    margin:12px 0;
  }
  body.ux220-ready .sidebar .primary-nav {
    min-height:0;
    flex:1 1 auto;
    gap:4px;
    padding:2px 2px 12px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  body.ux220-ready .sidebar .sidebar-bottom {
    flex:0 0 auto;
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid var(--line);
  }
  body.sidebar-collapsed.ux220-ready .sidebar {
    padding-inline:12px;
  }
  body.sidebar-collapsed.ux220-ready .sidebar .brand {
    justify-content:flex-start;
    padding-left:8px;
  }
  body.sidebar-collapsed.ux220-ready .sidebar :where(.brand-word,.nav-label,.nav-link > span:not(.nav-count):not(.nav-active-dot),.profile-chip > span:nth-child(2),.system-card) {
    display:initial!important;
  }
  body.sidebar-collapsed.ux220-ready .sidebar .mode-switch a > span { display:inline!important; }
  body.sidebar-collapsed.ux220-ready .sidebar .nav-link {
    width:100%;
    min-height:46px;
    margin:0;
    padding:0 12px;
    display:flex;
    grid-template-columns:none;
    justify-content:flex-start;
    place-items:initial;
    gap:12px;
  }
  body.sidebar-collapsed.ux220-ready .sidebar .nav-link > i:first-child {
    width:20px;
    height:auto;
    font-size:1rem;
  }
  body.sidebar-collapsed.ux220-ready .sidebar .nav-count {
    position:static;
    margin-left:auto;
  }
  body.ux220-ready .sidebar .nav-label {
    padding:12px 12px 5px;
    font-size:.68rem;
  }
  body.ux220-ready .sidebar .nav-link {
    min-height:46px;
    border-radius:11px;
    font-size:.86rem;
  }
  body.ux220-ready .sidebar-mobile-close {
    position:absolute;
    top:16px;
    right:14px;
    z-index:10;
    display:grid;
  }
  body.ux220-ready .sidebar-backdrop {
    display:block;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  body.ux220-ready.sidebar-open .sidebar-backdrop {
    opacity:1;
    pointer-events:auto;
  }
  body.ux220-ready .sticky-action-bar,
  body.ux220-ready .bulk-action-bar {
    left:50%;
    width:auto;
    max-width:calc(100vw - 24px);
  }
}

@media (max-width:620px) {
  body.ux220-ready .sidebar {
    width:min(360px,calc(100vw - 12px))!important;
    max-width:calc(100vw - 12px);
    border-radius:0 16px 16px 0;
  }
  body.ux220-ready .sidebar .profile-chip {
    min-height:52px;
  }
  body.ux220-ready .sticky-action-bar {
    right:10px;
    left:10px;
    width:auto;
    max-width:none;
    transform:translateY(16px);
    justify-content:flex-start;
  }
  body.ux220-ready .sticky-action-bar.visible { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  .ux-element-entrance > *,
  .ux-element-entrance.ux-element-entrance-ready > *,
  #app.app-content-enter :where(.page,.admin-main,.case-main,.panel-workspace) > *,
  #app.app-content-enter.app-content-ready :where(.page,.admin-main,.case-main,.panel-workspace) > * {
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (max-width:1180px) {
  body.sidebar-collapsed.ux220-ready .sidebar .brand-word { display:grid!important; }
  body.sidebar-collapsed.ux220-ready .sidebar .nav-label { display:block!important; }
  body.sidebar-collapsed.ux220-ready .sidebar .nav-link > span:not(.nav-count):not(.nav-active-dot) { display:inline!important; }
  body.sidebar-collapsed.ux220-ready .sidebar .profile-chip > span:nth-child(2) { display:grid!important; }
  body.sidebar-collapsed.ux220-ready .sidebar .system-card { display:block!important; }
}


/* 2.2.3 layout and component consistency corrections */

/* Sidebar width and shell offsets share the same supported range. This prevents
   the top bar from separating from a fully expanded navigation sidebar. */
:root { --sidebar-w:276px; }
body.ux220-ready .sidebar { width:clamp(var(--sidebar-min,236px),var(--sidebar-w),var(--sidebar-max,380px)); }
body.ux220-ready .topbar { left:clamp(var(--sidebar-min,236px),var(--sidebar-w),var(--sidebar-max,380px)); }
body.ux220-ready .main { margin-left:clamp(var(--sidebar-min,236px),var(--sidebar-w),var(--sidebar-max,380px)); }

/* Account settings navigation belongs to the document flow. It may scroll
   horizontally but must never cover API keys, integrations, or section content. */
body.ux220-ready .account-settings-nav {
  position:relative!important;
  top:auto!important;
  z-index:3;
  width:100%;
  max-width:100%;
  margin:0 0 var(--layout-gap-md,20px);
  padding:6px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
  box-shadow:none;
}
body.ux220-ready .account-settings-nav > a { flex:0 0 auto; scroll-snap-align:start; }

/* Table search uses one visual control. The nested native input cannot draw a
   second background, border, inset shadow, or platform search decoration. */
body.ux220-ready .table-search {
  min-height:44px;
  height:auto;
  padding:0 13px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:none;
}
body.ux220-ready .table-search input[type="search"] {
  width:100%;
  min-width:0;
  min-height:42px!important;
  height:42px;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  appearance:none;
  -webkit-appearance:none;
}
body.ux220-ready .table-search input[type="search"]::-webkit-search-decoration,
body.ux220-ready .table-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }

/* Footer aligns with the page content gutters inside the main canvas instead of
   using an unrelated fixed maximum width. */
body.ux220-ready .main > .site-footer {
  width:calc(100% - (2 * var(--ux-gutter,clamp(18px,2.6vw,48px))));
  max-width:none;
  margin:32px var(--ux-gutter,clamp(18px,2.6vw,48px)) 0;
  padding:24px 0 30px;
}

/* Asset lifecycle: readable responsive stage cards, clear completion state, and
   no cramped eight-column rail. */
body.ux220-ready .asset-lifecycle-strip {
  margin:var(--layout-gap-md,20px) 0;
  padding:clamp(18px,2vw,26px);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary-soft) 24%,var(--surface)));
  box-shadow:var(--shadow-1);
}
body.ux220-ready .asset-lifecycle-strip .panel-header { min-height:auto; margin:0 0 18px; padding:0; border:0; }
body.ux220-ready .asset-lifecycle-track {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  overflow:visible;
  padding:0;
}
body.ux220-ready .asset-lifecycle-track > a {
  min-width:0;
  min-height:92px;
  padding:14px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:3px 11px;
  align-content:center;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--muted);
  background:var(--surface);
  box-shadow:none;
}
body.ux220-ready .asset-lifecycle-track > a:hover:not([aria-disabled="true"]) { border-color:color-mix(in srgb,var(--primary) 34%,var(--line)); transform:translateY(-1px); }
body.ux220-ready .asset-lifecycle-track > a > span { grid-row:1/3; width:38px; height:38px; border-radius:12px; background:var(--surface-soft); color:var(--muted); }
body.ux220-ready .asset-lifecycle-track > a.complete > span { color:var(--success); background:color-mix(in srgb,var(--success) 12%,var(--surface)); }
body.ux220-ready .asset-lifecycle-track small { color:var(--muted-2); font-size:.68rem; font-weight:820; letter-spacing:.07em; text-transform:uppercase; }
body.ux220-ready .asset-lifecycle-track strong { margin:0; color:var(--text-strong); font-size:.86rem; line-height:1.35; }
body.ux220-ready .asset-lifecycle-track i { display:none; }
body.ux220-ready .asset-lifecycle-track > a[aria-disabled="true"] { opacity:.68; }

/* Prioritized actions use a coherent decision list instead of tiny table-like
   rows. The panel itself is not treated as one giant clickable card. */
body.ux220-ready .prioritized-actions {
  padding:16px;
  display:grid;
  gap:9px;
  border-radius:18px;
  cursor:default;
}
body.ux220-ready .prioritized-actions.ux220-card-clickable { cursor:default; }
body.ux220-ready .prioritized-actions > .section-label { padding:2px 2px 6px; }
body.ux220-ready .prioritized-actions > :is(a,button) {
  width:100%;
  min-height:72px;
  margin:0;
  padding:12px 13px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:center;
  gap:11px;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--text);
  background:var(--surface-soft);
  text-align:left;
  box-shadow:none;
}
body.ux220-ready .prioritized-actions > :is(a,button):hover { border-color:color-mix(in srgb,var(--primary) 34%,var(--line)); background:var(--surface); transform:translateY(-1px); }
body.ux220-ready .prioritized-actions > :is(.primary-record-action,.primary-button) { color:#fff; border-color:var(--primary); background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 78%,var(--blue))); box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 22%,transparent); }
body.ux220-ready .prioritized-actions > :is(a,button) > i:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
body.ux220-ready .prioritized-actions > :is(.primary-record-action,.primary-button) > i:first-child { color:#fff; background:rgba(255,255,255,.15); }
body.ux220-ready .prioritized-actions > :is(a,button) > i:last-child { justify-self:end; color:var(--muted-2); }
body.ux220-ready .prioritized-actions > :is(.primary-record-action,.primary-button) > i:last-child { color:rgba(255,255,255,.82); }
body.ux220-ready .prioritized-actions span { min-width:0; display:grid; gap:3px; }
body.ux220-ready .prioritized-actions strong { font-size:.86rem; line-height:1.25; }
body.ux220-ready .prioritized-actions small { color:var(--muted); font-size:.74rem; line-height:1.45; }
body.ux220-ready .prioritized-actions :is(.primary-record-action,.primary-button) strong,
body.ux220-ready .prioritized-actions :is(.primary-record-action,.primary-button) small { color:#fff; }
body.ux220-ready .prioritized-actions :is(.primary-record-action,.primary-button) small { opacity:.82; }

/* Marketplace hero and filtering prioritize readability and scanability. */
body.ux220-ready .market-hero { gap:clamp(22px,3vw,42px); padding:clamp(28px,4vw,52px); background:linear-gradient(132deg,#11182c 0%,#28245f 54%,#5148c7 100%); }
body.ux220-ready .market-hero > div { align-self:center; }
body.ux220-ready .market-hero p { max-width:66ch; color:#f0f2ff; font-size:clamp(.98rem,1.15vw,1.1rem); line-height:1.72; text-shadow:0 1px 1px rgba(0,0,0,.22); }
body.ux220-ready .market-hero .eyebrow { color:#dcd9ff; }
body.ux220-ready .market-hero aside { padding:22px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); }
body.ux220-ready .market-filter-bar {
  position:relative;
  top:auto;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  align-items:end;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-1);
  backdrop-filter:none;
}
body.ux220-ready .market-filter-bar > label:nth-of-type(1) { grid-column:span 4; }
body.ux220-ready .market-filter-bar > label:nth-of-type(2),
body.ux220-ready .market-filter-bar > label:nth-of-type(3) { grid-column:span 2; }
body.ux220-ready .market-filter-bar > label:nth-of-type(4),
body.ux220-ready .market-filter-bar > label:nth-of-type(5) { grid-column:span 1; }
body.ux220-ready .market-filter-bar > button { grid-column:span 2; min-width:0; }
body.ux220-ready .market-filter-bar label { gap:7px; color:var(--muted); font-size:.72rem; }
body.ux220-ready .market-filter-bar :is(input,select) { min-height:44px; }

/* Search syntax examples are useful controls, not low-detail code pills. */
body.ux220-ready .search-syntax { display:grid; grid-template-columns:auto repeat(5,minmax(125px,1fr)); gap:8px; align-items:stretch; }
body.ux220-ready .search-syntax-label { align-self:center; padding-right:4px; color:var(--muted-2); font-size:.68rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
body.ux220-ready .search-syntax > button {
  min-width:0;
  min-height:52px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--text);
  background:var(--surface-soft);
  text-align:left;
  cursor:pointer;
}
body.ux220-ready .search-syntax > button:hover { border-color:color-mix(in srgb,var(--primary) 36%,var(--line)); background:var(--surface); }
body.ux220-ready .search-syntax > button > i { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:var(--primary); background:var(--primary-soft); }
body.ux220-ready .search-syntax > button > span { min-width:0; display:grid; }
body.ux220-ready .search-syntax code { padding:0; border:0; background:transparent; color:var(--text-strong); font-size:.72rem; font-weight:760; white-space:nowrap; }
body.ux220-ready .search-syntax small { color:var(--muted); font-size:.65rem; }

/* Collaboration tabs match the shared tab language and stay in normal flow. */
body.ux220-ready .collaboration-tabs,
body.ux220-ready .collaboration-tabs.ux-sticky-subnav {
  position:relative!important;
  top:auto!important;
  z-index:2;
  min-height:52px;
  margin:0 0 18px;
  padding:5px;
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
  box-shadow:none;
  backdrop-filter:none;
}
body.ux220-ready .collaboration-tabs button { flex:0 0 auto; min-height:40px; padding:0 14px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:.82rem; font-weight:760; white-space:nowrap; }
body.ux220-ready .collaboration-tabs button:hover { color:var(--text-strong); background:var(--surface); }
body.ux220-ready .collaboration-tabs button.active { color:var(--primary); border:0; background:var(--surface); box-shadow:var(--shadow-sm); }

/* Audit investigation form: labelled fields, balanced grid, and a deliberate
   action area. */
body.ux220-ready .audit-filter-form {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  align-items:end;
  padding:16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-soft);
}
body.ux220-ready .audit-filter-form > label { min-width:0; display:grid; gap:6px; grid-column:span 2; color:var(--muted); font-size:.72rem; font-weight:760; }
body.ux220-ready .audit-filter-form > .audit-filter-scope { grid-column:span 3; }
body.ux220-ready .audit-filter-form > label:nth-of-type(4) { grid-column:span 3; }
body.ux220-ready .audit-filter-form :is(input,select) { width:100%; min-width:0; min-height:44px; }
body.ux220-ready .audit-filter-actions { grid-column:span 3; display:grid; grid-template-columns:auto minmax(120px,1fr); gap:8px; }

/* All in-content navigation remains reachable on phones. Rows scroll horizontally
   rather than clipping, wrapping into multiple lines, or hiding later options. */
@media (max-width:1180px) {
  body.ux220-ready .topbar { left:0; }
  body.ux220-ready .main { margin-left:0; }
}
@media (max-width:1100px) {
  body.ux220-ready .market-filter-bar > label:nth-of-type(1) { grid-column:span 6; }
  body.ux220-ready .market-filter-bar > label:nth-of-type(2),
  body.ux220-ready .market-filter-bar > label:nth-of-type(3) { grid-column:span 3; }
  body.ux220-ready .market-filter-bar > label:nth-of-type(4),
  body.ux220-ready .market-filter-bar > label:nth-of-type(5) { grid-column:span 3; }
  body.ux220-ready .market-filter-bar > button { grid-column:span 6; }
  body.ux220-ready .search-syntax { grid-template-columns:repeat(3,minmax(140px,1fr)); }
  body.ux220-ready .search-syntax-label { grid-column:1/-1; }
  body.ux220-ready .audit-filter-form > label,
  body.ux220-ready .audit-filter-form > .audit-filter-scope,
  body.ux220-ready .audit-filter-form > label:nth-of-type(4) { grid-column:span 4; }
  body.ux220-ready .audit-filter-actions { grid-column:span 4; }
}
@media (max-width:760px) {
  body.ux220-ready :where(.context-nav,.panel-tabs,.settings-tabs,.account-settings-nav,.explorer-tabs,.market-tabs,.collaboration-tabs,.breadcrumbs,.ux-breadcrumbs,[data-page-tabs]) {
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap!important;
    align-items:center;
    gap:4px;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  body.ux220-ready :where(.context-nav,.panel-tabs,.settings-tabs,.account-settings-nav,.explorer-tabs,.market-tabs,.collaboration-tabs,[data-page-tabs]) > * { flex:0 0 auto!important; scroll-snap-align:start; white-space:nowrap; }
  body.ux220-ready .main > .site-footer { width:calc(100% - 28px); margin-inline:14px; }
  body.ux220-ready .asset-lifecycle-track { grid-template-columns:1fr; }
  body.ux220-ready .market-filter-bar { grid-template-columns:1fr; gap:12px; padding:14px; }
  body.ux220-ready .market-filter-bar > :is(label,button) { grid-column:1!important; }
  body.ux220-ready .search-syntax { display:flex; overflow-x:auto; padding-bottom:3px; scroll-snap-type:x proximity; }
  body.ux220-ready .search-syntax-label { flex:0 0 auto; align-self:center; }
  body.ux220-ready .search-syntax > button { flex:0 0 160px; scroll-snap-align:start; }
  body.ux220-ready .audit-filter-form { grid-template-columns:1fr; padding:14px; }
  body.ux220-ready .audit-filter-form > :is(label,.audit-filter-scope,.audit-filter-actions),
  body.ux220-ready .audit-filter-form > label:nth-of-type(4) { grid-column:1!important; }
  body.ux220-ready .prioritized-actions > :is(a,button) { min-height:68px; }
}
@media (max-width:520px) {
  body.ux220-ready .audit-filter-actions { grid-template-columns:1fr; }
  body.ux220-ready .market-hero { padding:24px 18px; }
}

/* Final 2.2.3 cascade normalization for legacy important marketplace rules. */
body.ux220-ready .market-hero {
  background:linear-gradient(132deg,#11182c 0%,#28245f 54%,#5148c7 100%)!important;
  color:#fff!important;
}
body.ux220-ready .market-hero h1,
body.ux220-ready .market-hero aside strong { color:#fff!important; }
body.ux220-ready .market-hero p { color:#f0f2ff!important; }
body.ux220-ready .market-hero aside {
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.24)!important;
}
body.ux220-ready .market-hero aside span { color:#f0f2ff!important; border-color:rgba(255,255,255,.16)!important; }
body.ux220-ready .market-filter-bar {
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:14px!important;
}
body.ux220-ready .audit-filter-form > label { grid-column:span 3; }
body.ux220-ready .audit-filter-form > .audit-filter-scope,
body.ux220-ready .audit-filter-form > label:nth-of-type(4) { grid-column:span 3; }
body.ux220-ready .audit-filter-actions { grid-column:span 6; }
@media (max-width:1100px) {
  body.ux220-ready .market-filter-bar { grid-template-columns:repeat(6,minmax(0,1fr))!important; }
  body.ux220-ready .market-filter-bar > label:nth-of-type(1) { grid-column:span 6; }
  body.ux220-ready .market-filter-bar > label:nth-of-type(2),
  body.ux220-ready .market-filter-bar > label:nth-of-type(3),
  body.ux220-ready .market-filter-bar > label:nth-of-type(4),
  body.ux220-ready .market-filter-bar > label:nth-of-type(5) { grid-column:span 3; }
  body.ux220-ready .market-filter-bar > button { grid-column:span 6; }
  body.ux220-ready .audit-filter-form > label,
  body.ux220-ready .audit-filter-form > .audit-filter-scope,
  body.ux220-ready .audit-filter-form > label:nth-of-type(4) { grid-column:span 4; }
  body.ux220-ready .audit-filter-actions { grid-column:span 8; }
}
@media (max-width:760px) {
  body.ux220-ready .market-filter-bar { grid-template-columns:1fr!important; }
  body.ux220-ready .search-syntax { flex-wrap:nowrap!important; }
  body.ux220-ready .main > .site-footer { width:calc(100% - 28px); margin-inline:14px; }
}