.app-shell { min-height: 100vh; min-height: 100dvh; }
.app-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: color-mix(in srgb, var(--dvs-bg) 92%, transparent);
  border-bottom: 1px solid var(--dvs-line);
  backdrop-filter: blur(14px);
}
.app-brand { min-height: var(--touch-min); display: inline-flex; align-items: baseline; gap: 10px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.app-brand__mark { font-size: 18px; font-weight: 780; letter-spacing: -.04em; }
.app-brand__meta { color: var(--dvs-ink-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.app-system-status { color: var(--dvs-ink-soft); font-size: var(--text-xs); white-space: nowrap; }

.widget-workspace {
  width: min(100%, var(--workspace-max));
  margin: 0 auto;
  padding: clamp(12px, 2vw, 28px) max(clamp(12px, 2vw, 28px), env(safe-area-inset-right)) calc(clamp(20px, 4vw, 52px) + env(safe-area-inset-bottom)) max(clamp(12px, 2vw, 28px), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(10px, 1.25vw, 18px);
  align-items: stretch;
}
.widget-workspace[data-focus="true"] { display: block; max-width: 1540px; }
.widget-workspace__empty { grid-column: 1 / -1; min-height: 40vh; display: grid; place-items: center; color: var(--dvs-ink-soft); }

.widget-workspace[data-density="compact"] {
  padding: clamp(8px, 1.25vw, 18px) max(clamp(8px, 1.25vw, 18px), env(safe-area-inset-right)) calc(clamp(14px, 2.5vw, 30px) + env(safe-area-inset-bottom)) max(clamp(8px, 1.25vw, 18px), env(safe-area-inset-left));
  grid-auto-rows: minmax(122px, auto);
  gap: clamp(7px, .8vw, 11px);
}
.widget-workspace[data-density="compact"] > .dvs-widget > .widget-shell__header { min-height: 48px; padding: var(--space-2) var(--space-3); }
.widget-workspace[data-density="compact"] > .dvs-widget > .widget-shell__body { padding: var(--space-3); }
.widget-workspace[data-density="compact"] > .dvs-widget > .widget-shell__footer { padding: var(--space-2) var(--space-3); }

.dvs-widget {
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--dvs-surface);
  border: 1px solid var(--dvs-line);
  border-radius: var(--radius-md);
  overflow: clip;
}
.dvs-widget[data-size="1x1"] { grid-column: span 3; }
.dvs-widget[data-size="2x1"] { grid-column: span 6; }
.dvs-widget[data-size="1x2"] { grid-column: span 4; grid-row: span 2; }
.dvs-widget[data-size="2x2"] { grid-column: span 8; grid-row: span 2; }
.dvs-widget[data-size="full"], .dvs-widget[data-size="focus"] { width: 100%; min-height: calc(100dvh - var(--header-h) - 56px); }
.dvs-widget[data-state="warning"] { border-color: color-mix(in srgb, var(--dvs-warning) 40%, var(--dvs-line)); }
.dvs-widget[data-state="error"] { border-color: color-mix(in srgb, var(--dvs-danger) 48%, var(--dvs-line)); }
.dvs-widget[data-state="loading"] { opacity: .76; }

.widget-shell__header { min-height: 56px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--dvs-line); }
.widget-shell__identity { min-width: 0; flex: 1; }
.widget-shell__eyebrow { color: var(--dvs-ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.widget-shell__title { margin-top: 2px; font-size: var(--text-lg); font-weight: 620; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-shell__actions { display: flex; gap: var(--space-2); align-items: center; }
.widget-shell__body { min-height: 0; flex: 1; padding: var(--space-4); }
.widget-shell__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--dvs-line); }

.ui-button {
  min-height: var(--touch-min); border: 1px solid var(--dvs-line-strong); background: transparent; color: var(--dvs-ink);
  border-radius: var(--radius-sm); padding: 0 14px; cursor: pointer; font-weight: 580;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.ui-button:hover { background: var(--dvs-surface-strong); }
.ui-button:active { transform: translateY(1px); }
.ui-button--primary { background: var(--dvs-accent); border-color: var(--dvs-accent); color: var(--dvs-accent-ink); }
.ui-button--quiet { border-color: transparent; color: var(--dvs-ink-soft); }
.ui-button--danger { color: var(--dvs-danger); }
.ui-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }

.ui-field { display: grid; gap: 6px; min-width: 0; }
.ui-label { color: var(--dvs-ink-soft); font-size: var(--text-xs); }
.ui-input, .ui-select, .ui-textarea {
  width: 100%; min-height: var(--touch-min); border: 1px solid var(--dvs-line); border-radius: var(--radius-sm); background: var(--dvs-surface-raised); padding: 9px 11px;
}
.ui-textarea { min-height: 112px; resize: vertical; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--dvs-ink-faint); }

.ui-stack { display: grid; gap: var(--space-3); }
.ui-inline { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.ui-meta { color: var(--dvs-ink-soft); font-size: var(--text-sm); }
.ui-kicker { color: var(--dvs-ink-faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ui-value { font-size: clamp(22px, 8cqi, 34px); letter-spacing: -.04em; font-weight: 570; }
.ui-note { padding: 10px 12px; background: var(--dvs-surface-strong); border-left: 2px solid var(--dvs-line-strong); color: var(--dvs-ink-soft); font-size: var(--text-sm); }
.ui-note[data-kind="warning"] { border-left-color: var(--dvs-warning); }
.ui-note[data-kind="danger"] { border-left-color: var(--dvs-danger); }

.ui-list { min-width: 0; display: grid; border-top: 1px solid var(--dvs-line); }
.ui-row { min-width: 0; min-height: 50px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--dvs-line); }
.ui-row__main { min-width: 0; }
.ui-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.ui-row__meta { margin-top: 3px; color: var(--dvs-ink-soft); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row__actions { display: flex; gap: 6px; }
.ui-icon-button { width: var(--touch-min); height: var(--touch-min); border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--dvs-ink-soft); }
.ui-icon-button:hover { background: var(--dvs-surface-strong); color: var(--dvs-ink); }

.widget-hero { display: grid; gap: var(--space-3); align-content: space-between; height: 100%; }
.widget-hero__copy { max-width: 54ch; color: var(--dvs-ink-soft); line-height: 1.48; }
.order-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--dvs-line); border: 1px solid var(--dvs-line); }
.order-summary__metric { background: var(--dvs-surface); padding: var(--space-3); }
.order-summary__label { color: var(--dvs-ink-soft); font-size: var(--text-xs); }
.order-summary__value { margin-top: 4px; font-size: 26px; letter-spacing: -.04em; }

.catalog-browser { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.5fr); gap: var(--space-4); min-height: 330px; }
.catalog-browser__rail, .catalog-browser__content { min-width: 0; }
.catalog-browser__rail { display: grid; align-content: start; gap: 4px; border-right: 1px solid var(--dvs-line); padding-right: var(--space-3); }
.catalog-nav { min-height: 42px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; padding: 8px 10px; cursor: pointer; }
.catalog-nav:hover, .catalog-nav[aria-current="true"] { background: var(--dvs-surface-strong); }
.catalog-nav[aria-current="true"] { font-weight: 620; }

.search-results { display: grid; max-height: min(56vh, 540px); overflow: auto; overscroll-behavior: contain; }
.search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--dvs-line); }
.search-result__kind { color: var(--dvs-ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

.position-composer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(18px, 3vw, 44px); align-items: start; }
.position-composer__identity { display: grid; gap: var(--space-4); }
.position-composer__title { font-size: var(--text-xl); line-height: 1.04; letter-spacing: -.05em; font-weight: 560; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.option-button { min-height: 48px; text-align: left; border: 1px solid var(--dvs-line); background: transparent; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; }
.option-button:hover, .option-button[aria-pressed="true"] { background: var(--dvs-surface-strong); border-color: var(--dvs-line-strong); }
.option-button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--dvs-ink); }

.focus-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-min); border: 0; background: transparent; color: var(--dvs-ink-soft); padding: 0; cursor: pointer; }
.focus-back:hover { color: var(--dvs-ink); }

@container (max-width: 520px) {
  .widget-shell__header { align-items: flex-start; }
  .widget-shell__title { white-space: normal; }
  .ui-split { grid-template-columns: 1fr; }
  .order-summary { grid-template-columns: 1fr 1fr; }
  .catalog-browser { grid-template-columns: 1fr; }
  .catalog-browser__rail { border-right: 0; border-bottom: 1px solid var(--dvs-line); padding: 0 0 var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 760px) {
  .position-composer { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .dvs-widget[data-size="1x1"] { grid-column: span 4; }
  .dvs-widget[data-size="2x1"] { grid-column: span 8; }
  .dvs-widget[data-size="1x2"] { grid-column: span 6; }
  .dvs-widget[data-size="2x2"] { grid-column: span 12; }
}

@media (max-width: 760px) {
  .app-brand__meta { display: none; }
  .widget-workspace { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dvs-widget[data-size] { grid-column: 1; grid-row: auto; min-height: 150px; }
  .widget-workspace[data-density="compact"] .dvs-widget[data-size] { min-height: 128px; }
  .dvs-widget[data-size="focus"], .dvs-widget[data-size="full"] { min-height: calc(100dvh - var(--header-h) - 24px); }
  .widget-shell__body { padding: var(--space-3); }
}