/* Surety 2.1 unified interface and experience layer */
:root {
  --ux-canvas: 100%;
  --ux-reading: 940px;
  --ux-form: 1120px;
  --ux-record: 1380px;
  --ux-dashboard: 1760px;
  --ux-gutter: clamp(18px, 2.6vw, 48px);
  --ux-section-gap: clamp(22px, 3vw, 38px);
  --ux-card-gap: clamp(12px, 1.5vw, 20px);
  --ux-control-h: 44px;
  --ux-control-h-sm: 38px;
  --ux-control-h-lg: 50px;
  --ux-surface-page: var(--bg);
  --ux-surface-section: color-mix(in srgb, var(--surface) 86%, var(--bg));
  --ux-surface-card: var(--surface);
  --ux-surface-raised: var(--surface-raised);
  --ux-surface-selected: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
  --ux-border-subtle: color-mix(in srgb, var(--line) 78%, transparent);
  --ux-border-emphasis: color-mix(in srgb, var(--line-strong) 90%, var(--line));
  --ux-shadow-1: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.045);
  --ux-shadow-2: 0 18px 52px rgba(17,24,39,.105);
  --ux-shadow-3: 0 30px 90px rgba(17,24,39,.17);
  --ux-radius-control: 11px;
  --ux-radius-card: 17px;
  --ux-radius-section: 24px;
  --ux-radius-overlay: 22px;
  --ux-duration-fast: 130ms;
  --ux-duration: 210ms;
  --ux-duration-slow: 320ms;
  --ux-focus: 0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--primary) 42%, transparent);
  --ux-success: var(--green);
  --ux-warning: var(--amber);
  --ux-danger: var(--red);
  --ux-info: var(--blue);
}

:root[data-theme="dark"] {
  --ux-surface-section: color-mix(in srgb, var(--surface-soft) 58%, var(--bg));
  --ux-border-subtle: color-mix(in srgb, var(--line) 92%, transparent);
  --ux-shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.15);
  --ux-shadow-2: 0 20px 64px rgba(0,0,0,.38);
  --ux-shadow-3: 0 34px 100px rgba(0,0,0,.56);
}

html { text-size-adjust:100%; }
html[data-contrast="high"] { --line: color-mix(in srgb, currentColor 35%, transparent); --line-strong: color-mix(in srgb, currentColor 55%, transparent); }
html[data-font-scale="large"] { font-size:112.5%; }
html[data-font-scale="xlarge"] { font-size:125%; }
body { font-size:15px; line-height:1.58; background:var(--ux-surface-page); }
body[data-density="compact"] { --ux-section-gap:20px; --ux-card-gap:10px; --ux-control-h:40px; --ux-control-h-sm:34px; }
body[data-density="comfortable"] { --ux-section-gap:clamp(26px,3.3vw,44px); --ux-card-gap:clamp(15px,1.8vw,24px); }

:where(h1,h2,h3,h4,h5,h6) { text-wrap:balance; }
:where(p,li,dd,figcaption) { text-wrap:pretty; }
:where(.metric-card,.billing-plan-card,.admin-metric-grid,.workspace-stats,.market-metrics) strong { font-variant-numeric:tabular-nums; }
:where(.money,.amount,.price,[data-money],td[data-type="number"],.billing-table td) { font-variant-numeric:tabular-nums; }

:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:0!important; box-shadow:var(--ux-focus)!important; }
:where(button,.primary-button,.secondary-button,.icon-button,.row-menu,input,select,textarea) { border-radius:var(--ux-radius-control); }
:where(.primary-button,.secondary-button,button[type="submit"]):not(.small):not(.compact) { min-height:var(--ux-control-h); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) { min-height:var(--ux-control-h); }
textarea { min-height:118px; resize:vertical; }
::placeholder { color:color-mix(in srgb,var(--muted) 76%,transparent); opacity:1; }

/* Application shell */
.sidebar { width:clamp(252px,var(--sidebar-w),340px); border-right-color:var(--ux-border-subtle); background:color-mix(in srgb,var(--surface) 97%,var(--bg)); }
.sidebar::after { content:""; position:absolute; inset:0 0 0 auto; width:1px; background:linear-gradient(transparent,color-mix(in srgb,var(--primary) 20%,var(--line)) 16%,var(--line) 50%,transparent); pointer-events:none; }
.brand { min-height:52px; }
.brand-mark { box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 22px color-mix(in srgb,var(--primary) 20%,transparent); }
.primary-nav { padding-right:2px; scrollbar-gutter:stable; }
.nav-label { margin-top:8px; color:var(--muted-2); }
.nav-link { min-height:45px; border:1px solid transparent; }
.nav-link:hover { border-color:var(--ux-border-subtle); }
.nav-link.active { border-color:color-mix(in srgb,var(--primary) 20%,transparent); box-shadow:inset 3px 0 0 var(--primary); }
.topbar { height:var(--topbar-h); border-bottom-color:var(--ux-border-subtle); background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:0 1px 0 rgba(255,255,255,.35); }
.global-search { max-width:760px; min-width:260px; border-color:var(--ux-border-subtle); background:color-mix(in srgb,var(--surface-soft) 82%,transparent); }
.global-search:focus-within { border-color:color-mix(in srgb,var(--primary) 42%,var(--line)); background:var(--surface); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent); }
.topbar-actions { flex:0 0 auto; }
.main { min-width:0; }
.page { width:100%; max-width:var(--ux-dashboard); padding:clamp(24px,3vw,42px) var(--ux-gutter) clamp(70px,8vw,112px); }
.main > .page.page-template-wide { max-width:none; }
.main > .page.page-template-reading { max-width:var(--ux-reading); }
.main > .page.page-template-form { max-width:var(--ux-form); }
.main > .page.page-template-record { max-width:var(--ux-record); }

/* Header and local navigation */
:where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading,.server-heading) {
  margin-bottom:var(--ux-section-gap);
  padding:clamp(24px,3vw,44px);
  align-items:center;
  border-radius:var(--ux-radius-section);
  border-color:color-mix(in srgb,var(--primary) 15%,var(--line));
  background:
    radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 30%),
    linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 54%,var(--surface)) 0%,var(--surface) 58%,color-mix(in srgb,var(--blue-soft) 28%,var(--surface)) 100%);
  box-shadow:var(--ux-shadow-1);
}
:where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading) > div:first-child { min-width:0; max-width:880px; }
:where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading) h1 { margin:.35rem 0 .7rem; font-size:clamp(2rem,3vw,3.25rem); line-height:1.04; }
:where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading) p { max-width:780px; font-size:clamp(.94rem,1.1vw,1.04rem); line-height:1.65; }
.page-actions,.heading-actions { align-items:center; }
.page-actions[data-overflow-ready="true"] { flex-wrap:nowrap; }
.ux-action-overflow { position:relative; }
.ux-action-overflow-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:180; width:min(300px,calc(100vw - 32px)); padding:8px; display:grid; gap:4px; border:1px solid var(--line); border-radius:14px; background:var(--surface-raised); box-shadow:var(--ux-shadow-3); }
.ux-action-overflow-menu > :is(a,button,form) { width:100%; }
.ux-action-overflow-menu > a,.ux-action-overflow-menu > button,.ux-action-overflow-menu > form button { min-height:42px; padding:0 12px; justify-content:flex-start; border-radius:9px; border:0; background:transparent; color:var(--text); box-shadow:none; }
.ux-action-overflow-menu > :is(a,button):hover,.ux-action-overflow-menu > form button:hover { background:var(--surface-soft); }

:where(.panel-tabs,.settings-tabs,.local-nav,.secondary-nav,[role="tablist"]) { scrollbar-width:none; }
:where(.panel-tabs,.settings-tabs,.local-nav,.secondary-nav,[role="tablist"])::-webkit-scrollbar { display:none; }
.ux-sticky-subnav { position:sticky; top:calc(var(--topbar-h) + 8px); z-index:28; margin-inline:-4px; padding:7px; border:1px solid color-mix(in srgb,var(--line) 84%,transparent); border-radius:14px; background:color-mix(in srgb,var(--surface) 90%,transparent); box-shadow:var(--ux-shadow-1); backdrop-filter:blur(18px); }

/* Sections, cards, dashboard */
:where(.panel,.admin-section,.case-card,.priority-card,.fact-card,.market-card,.billing-plan-card,.relationship-card,.metric-card) { border-color:var(--ux-border-subtle); border-radius:var(--ux-radius-card); box-shadow:var(--ux-shadow-1); }
:where(.panel,.admin-section,.case-card,.priority-card,.fact-card,.market-card,.billing-plan-card,.relationship-card,.metric-card):hover { border-color:color-mix(in srgb,var(--primary) 17%,var(--line)); }
.panel-header { min-height:78px; padding:18px 20px; border-bottom-color:var(--ux-border-subtle); }
.panel-header h2 { font-size:clamp(1rem,1.25vw,1.2rem); }
.panel-header p { max-width:720px; font-size:.82rem; line-height:1.55; }
:where(.workspace-grid,.dashboard-grid,.admin-grid,.market-grid,.billing-grid,.validator-grid) { gap:var(--ux-card-gap); }
:where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis) { gap:var(--ux-card-gap); margin-bottom:var(--ux-section-gap); }
:where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics) > article { min-height:138px; position:relative; overflow:hidden; }
:where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics) > article::after { content:""; position:absolute; width:84px; height:84px; right:-36px; bottom:-42px; border-radius:50%; background:color-mix(in srgb,var(--primary) 7%,transparent); }
.ux-attention-rail { border-left:4px solid var(--amber)!important; }
.ux-attention-rail.is-critical { border-left-color:var(--red)!important; }
.ux-dashboard-editing [data-dashboard-card] { outline:2px dashed color-mix(in srgb,var(--primary) 40%,transparent); outline-offset:3px; cursor:grab; }
.ux-dashboard-editing [data-dashboard-card]:active { cursor:grabbing; }
.ux-dashboard-edit-bar { position:sticky; top:calc(var(--topbar-h) + 10px); z-index:29; margin:0 0 16px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:var(--ux-shadow-2); backdrop-filter:blur(18px); }

/* Tables and dense records */
.table-scroll { position:relative; border-radius:0 0 var(--ux-radius-card) var(--ux-radius-card); scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent; }
.table-scroll[data-scrollable="true"]::after { content:"Scroll to inspect more →"; position:sticky; left:100%; bottom:8px; display:inline-flex; margin:8px; padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--muted); font-size:.68rem; box-shadow:var(--ux-shadow-1); pointer-events:none; opacity:.9; }
table { width:100%; border-collapse:separate; border-spacing:0; }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) thead th { position:sticky; top:0; z-index:4; height:48px; padding:0 14px; border-bottom:1px solid var(--line-strong); background:color-mix(in srgb,var(--surface) 94%,var(--surface-soft)); color:var(--muted); font-size:.72rem; letter-spacing:.025em; text-transform:none; box-shadow:0 1px 0 rgba(255,255,255,.2); }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) tbody td { min-height:58px; padding:13px 14px; vertical-align:middle; border-bottom:1px solid var(--ux-border-subtle); }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) tbody tr { transition:background var(--ux-duration-fast) ease,box-shadow var(--ux-duration-fast) ease; }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) tbody tr:hover { background:color-mix(in srgb,var(--primary-soft) 28%,transparent); }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) tbody tr:focus-within { background:color-mix(in srgb,var(--primary-soft) 46%,transparent); box-shadow:inset 3px 0 0 var(--primary); }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) tbody tr[aria-selected="true"],
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) tbody tr.is-selected { background:var(--ux-surface-selected); box-shadow:inset 3px 0 0 var(--primary); }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) th:first-child,
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) td:first-child { position:sticky; left:0; z-index:3; background:inherit; }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) thead th:first-child { z-index:6; background:color-mix(in srgb,var(--surface) 94%,var(--surface-soft)); }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) th:last-child,
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) td:last-child { position:sticky; right:0; z-index:3; background:inherit; }
:where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) thead th:last-child { z-index:6; background:color-mix(in srgb,var(--surface) 94%,var(--surface-soft)); }
.table-filter-toolbar,.ux-table-toolbar { min-height:58px; padding:10px 12px; display:flex; flex-wrap:wrap; align-items:center; gap:9px; border-bottom:1px solid var(--ux-border-subtle); background:color-mix(in srgb,var(--surface-soft) 66%,var(--surface)); }
.ux-filter-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ux-filter-chip { min-height:30px; padding:0 9px; display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line)); border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:.72rem; font-weight:700; }
.ux-bulk-toolbar { position:sticky; bottom:18px; z-index:35; width:max-content; max-width:calc(100% - 24px); margin:14px auto; padding:8px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--surface) 93%,transparent); box-shadow:var(--ux-shadow-3); backdrop-filter:blur(18px); }
.ux-row-detail > td { position:static!important; padding:0!important; background:var(--surface-soft)!important; }
.ux-row-detail__content { padding:18px 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.ux-row-detail__content div { min-width:0; }
.ux-row-detail__content span { display:block; color:var(--muted); font-size:.7rem; }
.ux-row-detail__content strong { display:block; margin-top:3px; overflow-wrap:anywhere; }

/* Forms */
:where(.auth-form,.register-form,.case-form,.market-form,.pricing-form,.settings-form,form[data-ux-form="true"]) { gap:18px; }
:where(.auth-form,.register-form,.case-form,.market-form,.pricing-form,.settings-form,form[data-ux-form="true"]) > label,
.ux-field { min-width:0; display:grid; align-content:start; gap:7px; color:var(--text-strong); font-size:.79rem; font-weight:720; }
.ux-field[data-width="short"] { max-width:220px; }
.ux-field[data-width="medium"] { max-width:460px; }
.ux-field[data-width="wide"] { max-width:760px; }
.form-grid { gap:16px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-section,.ux-form-section { padding:clamp(18px,2vw,26px); border:1px solid var(--ux-border-subtle); border-radius:var(--ux-radius-card); background:var(--ux-surface-card); }
.form-section + .form-section,.ux-form-section + .ux-form-section { margin-top:18px; }
.form-section > :first-child,.ux-form-section > :first-child { margin-top:0; }
.form-actions,.modal-actions,.form-step-controls { position:relative; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }
.form-actions.is-sticky,.modal-actions.is-sticky { position:sticky; bottom:12px; z-index:22; margin:22px -6px -6px; padding:10px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:var(--ux-shadow-2); backdrop-filter:blur(18px); }
.ux-error-summary { margin:0 0 18px; padding:15px 17px; border:1px solid color-mix(in srgb,var(--red) 35%,var(--line)); border-left:4px solid var(--red); border-radius:13px; background:var(--red-soft); }
.ux-error-summary strong { display:block; margin-bottom:7px; }
.ux-error-summary ul { margin:0; padding-left:20px; }
.ux-error-summary a { color:var(--red); font-weight:700; text-decoration:underline; }
.ux-field-invalid { border-color:var(--red)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)!important; }
.ux-submit-pending { pointer-events:none; opacity:.78; }
.ux-submit-pending::before { content:""; width:14px; height:14px; flex:0 0 14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ux-spin .72s linear infinite; }
@keyframes ux-spin { to { transform:rotate(360deg); } }

/* Uploads */
.ux-upload-zone { position:relative; min-height:142px; padding:22px; display:grid; place-items:center; gap:8px; border:1.5px dashed color-mix(in srgb,var(--primary) 34%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--primary-soft) 22%,var(--surface)); text-align:center; cursor:pointer; }
.ux-upload-zone:hover,.ux-upload-zone.is-dragover { border-color:var(--primary); background:color-mix(in srgb,var(--primary-soft) 58%,var(--surface)); }
.ux-upload-zone input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.ux-upload-zone i { font-size:1.4rem; color:var(--primary); }
.ux-upload-files { width:100%; display:grid; gap:7px; }
.ux-upload-file { padding:8px 10px; display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-align:left; }

/* Steppers and workflow */
.form-stepper { margin:0 0 22px; padding:8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:7px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); }
.form-stepper li button { width:100%; min-height:52px; padding:7px 9px; display:flex; align-items:center; gap:9px; border-radius:11px; background:transparent; text-align:left; }
.form-stepper li button span { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--muted); font-size:.75rem; font-weight:800; }
.form-stepper li.active button { background:var(--surface); box-shadow:var(--ux-shadow-1); }
.form-stepper li.active button span { border-color:var(--primary); background:var(--primary); color:#fff; }
.form-stepper li.complete button span { border-color:var(--green); background:var(--green-soft); color:var(--green); }
:where(.case-progress,.settlement-steps,.workflow-progress,.server-timeline) { position:relative; }
:where(.case-progress,.settlement-steps,.workflow-progress) > * { position:relative; }
:where(.case-progress,.settlement-steps,.workflow-progress) > *.is-blocked { opacity:.7; }
:where(.case-progress,.settlement-steps,.workflow-progress) > *.is-blocked::after { content:"Blocked"; margin-left:auto; padding:3px 7px; border-radius:999px; background:var(--red-soft); color:var(--red); font-size:.65rem; font-weight:800; }

/* Overlays */
:where(.modal,.ux-drawer,.dialog-card,.bottom-sheet) { border-radius:var(--ux-radius-overlay); border:1px solid var(--ux-border-emphasis); background:var(--surface-raised); box-shadow:var(--ux-shadow-3); }
:where(.modal-backdrop,.ux-drawer-backdrop,.dialog-backdrop) { background:rgba(8,12,24,.54); backdrop-filter:blur(5px); }
:where(.modal,.ux-drawer,.dialog-card) > header { min-height:72px; padding:16px 20px; border-bottom:1px solid var(--ux-border-subtle); }
:where(.modal,.ux-drawer,.dialog-card) > footer { padding:14px 20px; border-top:1px solid var(--ux-border-subtle); background:var(--surface-soft); }
.ux-bottom-sheet { position:fixed; inset:auto 0 0; z-index:220; max-height:min(78vh,760px); padding:18px; overflow:auto; border-radius:22px 22px 0 0; border:1px solid var(--line); background:var(--surface-raised); box-shadow:0 -28px 90px rgba(0,0,0,.28); transform:translateY(105%); transition:transform var(--ux-duration-slow) ease; }
.ux-bottom-sheet.is-open { transform:translateY(0); }

/* Validator */
.validator-layout,.case-layout,.validator-workspace { gap:var(--ux-card-gap); }
.validator-case-list { min-width:290px; }
.validator-case-list article,.workspace-case-list article { border-left:3px solid transparent; }
.validator-case-list article:hover,.workspace-case-list article:hover { border-left-color:var(--primary); }
.validator-case-list article[data-risk="High"],.workspace-case-list article[data-risk="High"] { border-left-color:var(--red); }
.case-heading { position:sticky; top:calc(var(--topbar-h) + 10px); z-index:26; }
.case-status { align-self:flex-start; }
.case-main { min-width:0; }
.validator-checks > * { scroll-margin-top:calc(var(--topbar-h) + 110px); }
.check-evidence-picker { max-height:520px; overflow:auto; scrollbar-gutter:stable; }
.evidence-preview,.document-preview,.shared-integrity { border-radius:var(--ux-radius-card); }

/* Administration */
.admin-main .admin-section { margin-bottom:var(--ux-section-gap); }
.admin-action-cards { gap:var(--ux-card-gap); }
.admin-action-cards > * { min-height:150px; }
.admin-body::before { content:attr(data-environment-label); position:fixed; right:16px; bottom:14px; z-index:80; padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--muted); font-size:.67rem; font-weight:800; pointer-events:none; }
.admin-section.danger-zone { border-color:color-mix(in srgb,var(--red) 34%,var(--line)); background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--red-soft) 34%,var(--surface))); }

/* Marketplace */
.market-grid,.marketplace-grid,.market-listing-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:var(--ux-card-gap); }
.market-card { overflow:hidden; display:flex; flex-direction:column; }
.market-card .asset-visual,.market-card img,.market-card picture { aspect-ratio:4/3; object-fit:cover; }
.market-card h2,.market-card h3 { min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.market-card .record-actions,.market-card .page-actions { margin-top:auto; }
.market-detail-grid { grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); gap:clamp(18px,2.5vw,36px); }
.market-detail-grid > aside { position:sticky; top:calc(var(--topbar-h) + 16px); align-self:start; }
.market-filter-bar { position:sticky; top:calc(var(--topbar-h) + 8px); z-index:25; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:var(--ux-shadow-1); backdrop-filter:blur(18px); }
.market-card [class*="price"],.market-detail-grid [class*="price"] { font-variant-numeric:tabular-nums; }
.settlement-step { border-left:3px solid var(--line); }
.settlement-step.complete { border-left-color:var(--green); }
.settlement-step.blocked,.settlement-step.overdue { border-left-color:var(--red); }

/* Billing and settings */
.settings-layout,.billing-layout { gap:var(--ux-card-gap); }
.settings-nav,.account-settings-nav { position:sticky; top:calc(var(--topbar-h) + 14px); align-self:start; }
.billing-plan-card { position:relative; overflow:hidden; }
.billing-plan-card.current { border-color:color-mix(in srgb,var(--primary) 40%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent),var(--ux-shadow-1); }
.billing-plan-card.current::before { content:"Current plan"; position:absolute; top:12px; right:12px; padding:4px 8px; border-radius:999px; background:var(--primary); color:#fff; font-size:.65rem; font-weight:800; }
.billing-status.failed,.billing-status.past-due { border-color:color-mix(in srgb,var(--red) 34%,var(--line)); background:var(--red-soft); }
.usage-meter,.progress-meter { overflow:hidden; border-radius:999px; background:var(--surface-soft); }
.usage-meter > span,.progress-meter > span { display:block; min-height:8px; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--blue)); }

/* Public pages */
body[data-layout="public"] .main > .page.page-template-wide { width:100%; max-width:none; }
body[data-layout="public"] .main > .page.page-template-reading { width:min(var(--ux-reading),calc(100% - 2 * var(--ux-gutter))); }
body[data-layout="public"] .server-page > section + section { margin-top:var(--ux-section-gap); }
body[data-layout="public"] :where(.answer-grid,.methodology-grid,.glossary-grid,.directory-grid,.featured-record-grid) { gap:var(--ux-card-gap); }
body[data-layout="public"] :where(.server-record,.fact-card,.answer-card,.relationship-card) { border-radius:var(--ux-radius-card); border-color:var(--ux-border-subtle); box-shadow:var(--ux-shadow-1); }

/* Completion and state */
.ux-completion-state { position:relative; overflow:hidden; padding:clamp(22px,3vw,38px); border:1px solid color-mix(in srgb,var(--green) 28%,var(--line)); border-radius:var(--ux-radius-section); background:linear-gradient(135deg,color-mix(in srgb,var(--green-soft) 60%,var(--surface)),var(--surface)); }
.ux-completion-state::after { content:""; position:absolute; width:170px; height:170px; right:-64px; top:-84px; border-radius:50%; background:color-mix(in srgb,var(--green) 10%,transparent); }
.ux-completion-state h2,.ux-completion-state h3 { color:var(--green); }
.status-badge,.trust-badge { min-height:27px; padding:0 9px; display:inline-flex; align-items:center; gap:5px; border-radius:999px; font-weight:760; }
.status-badge::before,.trust-badge::before { content:""; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor; }

/* Preferences */
.ux-accessibility-controls { display:grid; gap:10px; }
.ux-segmented-control { padding:3px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); }
.ux-segmented-control button { min-height:34px; border-radius:8px; background:transparent; color:var(--muted); }
.ux-segmented-control button[aria-pressed="true"] { background:var(--surface); color:var(--primary); box-shadow:var(--ux-shadow-1); }

/* Responsive */
@media (max-width:1180px) {
  .workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .market-detail-grid { grid-template-columns:1fr; }
  .market-detail-grid > aside { position:static; }
  .form-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:980px) {
  :root { --ux-gutter:clamp(16px,4vw,28px); }
  .page { padding-top:24px; }
  :where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading) { align-items:flex-start; }
  .global-search { min-width:0; }
  .ux-sticky-subnav,.market-filter-bar { top:8px; }
  .case-heading { position:relative; top:auto; }
  :where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) th:first-child,
  :where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) td:first-child,
  :where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) th:last-child,
  :where(.admin-table,.asset-table,.billing-table,table[data-operational="true"]) td:last-child { position:static; }
}

@media (max-width:760px) {
  body { font-size:14px; }
  .page { padding:18px 14px 86px; }
  :where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading,.server-heading) { margin-bottom:18px; padding:22px 18px; border-radius:20px; flex-direction:column; align-items:stretch; gap:18px; }
  :where(.workspace-hero,.panel-hero,.admin-heading,.case-heading,.page-heading) h1 { font-size:clamp(1.72rem,9vw,2.45rem); }
  .page-actions,.heading-actions { width:100%; justify-content:stretch; }
  .page-actions > :is(a,button,form),.heading-actions > :is(a,button,form) { flex:1 1 auto; }
  .page-actions > form > button,.heading-actions > form > button { width:100%; }
  .workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis { grid-template-columns:1fr 1fr; gap:10px; }
  :where(.workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics) > article { min-height:116px; padding:15px; }
  .form-grid.two,.form-grid.three { grid-template-columns:1fr; }
  .ux-field[data-width] { max-width:none; }
  .panel-header { min-height:0; padding:16px; align-items:flex-start; flex-wrap:wrap; }
  .panel-header > :is(.panel-actions,.page-actions,.panel-count,.text-link,.icon-button,.primary-button,.secondary-button,select,.trust-badge,.status-badge) { margin-left:0; }
  .ux-action-overflow { margin-left:auto; }
  .form-stepper { grid-template-columns:1fr; }
  .form-stepper li:not(.active):not(.complete) { display:none; }
  .table-scroll[data-mobile-cards="true"] { overflow:visible; }
  .table-scroll[data-mobile-cards="true"] table { display:block; }
  .table-scroll[data-mobile-cards="true"] thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .table-scroll[data-mobile-cards="true"] tbody,.table-scroll[data-mobile-cards="true"] tr,.table-scroll[data-mobile-cards="true"] td { display:block; width:100%; }
  .table-scroll[data-mobile-cards="true"] tbody { display:grid; gap:11px; }
  .table-scroll[data-mobile-cards="true"] tr { padding:15px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--ux-shadow-1); }
  .table-scroll[data-mobile-cards="true"] td { min-height:0!important; padding:8px 0!important; display:grid!important; grid-template-columns:minmax(92px,34%) 1fr; gap:10px; border:0!important; position:static!important; background:transparent!important; overflow-wrap:anywhere; }
  .table-scroll[data-mobile-cards="true"] td::before { content:attr(data-label); color:var(--muted); font-size:.7rem; font-weight:760; }
  .table-scroll[data-mobile-cards="true"] td:first-child { padding-top:0!important; font-size:1rem; }
  .table-scroll[data-mobile-cards="true"] td:first-child::before { display:none; }
  .table-scroll[data-mobile-cards="true"] td:last-child { padding-bottom:0!important; display:flex!important; flex-wrap:wrap; justify-content:flex-end; }
  .table-scroll[data-mobile-cards="true"] td:last-child::before { display:none; }
  .market-grid,.marketplace-grid,.market-listing-grid { grid-template-columns:1fr; }
  .market-card .asset-visual,.market-card img,.market-card picture { aspect-ratio:16/10; }
  .settings-nav,.account-settings-nav { position:static; }
  .ux-dashboard-edit-bar { top:8px; }
  .ux-bottom-sheet { display:block; }
}

@media (max-width:520px) {
  .workspace-stats,.admin-metric-grid,.validator-metrics,.market-metrics,.organization-summary,.organization-kpis { grid-template-columns:1fr; }
  .primary-button,.secondary-button { white-space:normal; text-align:center; }
  .ux-bulk-toolbar { width:calc(100% - 20px); justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}
.status-badge[data-tone="danger"],.trust-badge[data-tone="danger"],.billing-status[data-tone="danger"],.case-status[data-tone="danger"] { color:var(--red); background:var(--red-soft); border-color:color-mix(in srgb,var(--red) 26%,var(--line)); }
.status-badge[data-tone="warning"],.trust-badge[data-tone="warning"],.billing-status[data-tone="warning"],.case-status[data-tone="warning"] { color:var(--amber); background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 26%,var(--line)); }
.status-badge[data-tone="success"],.trust-badge[data-tone="success"],.billing-status[data-tone="success"],.case-status[data-tone="success"] { color:var(--green); background:var(--green-soft); border-color:color-mix(in srgb,var(--green) 26%,var(--line)); }
.status-badge[data-tone="neutral"],.trust-badge[data-tone="neutral"],.billing-status[data-tone="neutral"],.case-status[data-tone="neutral"] { color:var(--muted); background:var(--surface-soft); border-color:var(--line); }
.ux-card-order { position:absolute; top:8px; right:8px; z-index:3; display:none; gap:5px; }
.ux-dashboard-editing .ux-card-order { display:flex; }
.ux-dashboard-edit-bar > span { display:grid; gap:2px; }
.ux-dashboard-edit-bar small { color:var(--muted); }
/* Refinements for the existing design-system interactions */
.file-drop-zone { border-color:color-mix(in srgb,var(--primary) 34%,var(--line)); background:color-mix(in srgb,var(--primary-soft) 22%,var(--surface)); }
.file-drop-zone:hover,.file-drop-zone.dragover { border-color:var(--primary); background:color-mix(in srgb,var(--primary-soft) 58%,var(--surface)); }
.file-preview-item { border-radius:11px; border-color:var(--ux-border-subtle); }
.form-error-summary { border-left:4px solid var(--red); border-radius:13px; background:var(--red-soft); }
.dashboard-layout-controls { margin-bottom:14px; padding:8px; border:1px solid var(--ux-border-subtle); border-radius:13px; background:var(--surface-soft); }
.dashboard-layout-controls button { min-height:38px; border-radius:9px; }
.dashboard-restore { margin:-4px 0 16px; padding:10px; border:1px dashed var(--line); border-radius:13px; background:var(--surface-soft); }
.bulk-action-bar { border-radius:15px; border-color:color-mix(in srgb,var(--primary) 28%,var(--line)); background:color-mix(in srgb,var(--surface) 93%,transparent); box-shadow:var(--ux-shadow-3); backdrop-filter:blur(18px); }
.filter-chip-row { gap:6px; }
.filter-chip { min-height:30px; border-radius:999px; border-color:color-mix(in srgb,var(--primary) 18%,var(--line)); background:var(--primary-soft); }
.table-row-detail > td { background:var(--surface-soft)!important; }
.table-row-toggle { border-radius:8px; }
.record-preview-popover { border-radius:var(--ux-radius-overlay); box-shadow:var(--ux-shadow-3); }
form[data-design-form="true"] label[data-field-width="short"] { max-width:220px; }
form[data-design-form="true"] label[data-field-width="medium"] { max-width:460px; }
form[data-design-form="true"] label[data-field-width="wide"] { max-width:760px; }
[data-dashboard-card][data-card-size="wide"] { grid-column:span 2; }
.dashboard-card-resize { position:absolute; top:8px; right:46px; z-index:4; display:none; }
[data-dashboard-edit="true"] .dashboard-card-resize,.ux-dashboard-editing .dashboard-card-resize { display:grid; }
@media (max-width:760px) {
  [data-dashboard-card][data-card-size="wide"] { grid-column:span 1; }
  .ux-action-overflow-menu { position:fixed; inset:auto 0 0; width:auto; max-height:72vh; padding:14px; overflow:auto; border-radius:22px 22px 0 0; box-shadow:0 -30px 90px rgba(0,0,0,.32); }
}