.widget-workspace:not([data-focus="true"]) {
  --workspace-columns: 4;
  --workspace-row-height: clamp(156px, 10vw, 184px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--workspace-row-height);
  grid-auto-flow: dense;
  align-items: stretch;
}
.widget-workspace[data-density="compact"]:not([data-focus="true"]) {
  --workspace-row-height: clamp(132px, 8.5vw, 158px);
}

.widget-workspace:not([data-focus="true"]) > .dvs-widget {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.widget-workspace:not([data-focus="true"]) > .dvs-widget > .widget-shell__body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size$="x1"] { grid-row: span 1; }
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size$="x2"] { grid-row: span 2; }
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size$="x3"] { grid-row: span 3; }
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size^="1x"] { grid-column: span 1; }
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size^="2x"] { grid-column: span 2; }
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size^="3x"] { grid-column: span 3; }
.widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size^="4x"] { grid-column: span 4; }

.layout-launcher { gap: var(--space-4); }
.layout-launcher__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-4);
  border: 1px solid var(--dvs-line);
  border-radius: var(--radius-sm);
  background: var(--dvs-surface-raised);
}
.layout-launcher__title {
  max-width: 30ch;
  margin-top: 5px;
  font-size: clamp(20px, 5cqi, 30px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 630;
}

.widget-workspace[data-layout-editing="true"] {
  padding-bottom: max(150px, calc(118px + env(safe-area-inset-bottom)));
}
.widget-workspace[data-layout-editing="true"] > .dvs-widget[data-layout-editable="true"] {
  overflow: visible;
  border-color: color-mix(in srgb, var(--dvs-accent) 28%, var(--dvs-line));
  box-shadow: 0 8px 28px color-mix(in srgb, #000 10%, transparent);
  animation: layout-edit-wiggle 920ms ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
.widget-workspace[data-layout-editing="true"] > .dvs-widget:nth-of-type(2n) { animation-delay: -310ms; }
.widget-workspace[data-layout-editing="true"] > .dvs-widget:nth-of-type(3n) { animation-delay: -570ms; }
.widget-workspace[data-layout-editing="true"] > .dvs-widget.is-layout-dragging,
.widget-workspace[data-layout-editing="true"] > .dvs-widget.is-layout-resizing {
  animation: none;
  z-index: 15;
  box-shadow: 0 18px 48px color-mix(in srgb, #000 20%, transparent);
}
.widget-workspace[data-layout-editing="true"] > .dvs-widget.is-layout-dragging { opacity: .88; }

@keyframes layout-edit-wiggle {
  from { transform: rotate(-.16deg) translateY(0); }
  to { transform: rotate(.16deg) translateY(-1px); }
}

.layout-edit-chrome {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dvs-accent) 26%, transparent);
}
.layout-edit-chrome__top {
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  display: flex;
  gap: 6px;
  align-items: center;
  pointer-events: none;
}
.layout-drag-handle,
.layout-edit-hide,
.layout-resize-handle {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--dvs-accent) 38%, var(--dvs-line));
  background: color-mix(in srgb, var(--dvs-surface-raised) 94%, transparent);
  color: var(--dvs-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, #000 14%, transparent);
  backdrop-filter: blur(10px);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.layout-drag-handle {
  width: 42px;
  height: 34px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}
.layout-drag-handle:active { cursor: grabbing; }
.layout-edit-hide {
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--dvs-danger);
  cursor: pointer;
  font-size: 19px;
}
.layout-edit-size {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dvs-surface-raised) 92%, transparent);
  border: 1px solid var(--dvs-line-strong);
  color: var(--dvs-ink);
  font: 700 11px/1 var(--font-mono);
  pointer-events: none;
}
.layout-resize-handle {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: nwse-resize;
  font-size: 20px;
}

.layout-edit-toolbar {
  position: fixed;
  z-index: calc(var(--z-dialog) - 1);
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px var(--space-4);
  align-items: center;
  padding: 12px;
  border: 1px solid var(--dvs-line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--dvs-surface-raised) 92%, transparent);
  box-shadow: 0 20px 70px color-mix(in srgb, #000 24%, transparent);
  backdrop-filter: blur(18px);
}
.layout-edit-toolbar__copy { min-width: 0; display: grid; gap: 2px; }
.layout-edit-toolbar__copy strong { font-size: var(--text-md); }
.layout-edit-toolbar__copy span { color: var(--dvs-ink-soft); font-size: var(--text-xs); }
.layout-edit-toolbar__actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.layout-edit-toolbar__restore {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--dvs-line);
  color: var(--dvs-ink-soft);
  font-size: var(--text-xs);
}
.layout-edit-toolbar__restore .ui-button { min-height: 32px; padding-inline: 10px; }

@media (max-width: 1180px) and (min-width: 761px) {
  .widget-workspace:not([data-focus="true"]) {
    --workspace-columns: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size^="4x"],
  .widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size^="3x"] { grid-column: span 3; }
}

@media (max-width: 760px) {
  .widget-workspace:not([data-focus="true"]) {
    --workspace-columns: 1;
    --workspace-row-height: 156px;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: var(--workspace-row-height);
  }
  .widget-workspace:not([data-focus="true"]) > .dvs-widget[data-size] { grid-column: span 1; min-height: 0; }
  .layout-launcher__hero { grid-template-columns: 1fr; align-items: stretch; }
  .layout-launcher__hero .ui-button { width: 100%; }
  .layout-edit-toolbar {
    grid-template-columns: 1fr;
    max-height: min(48dvh, 420px);
    overflow: auto;
  }
  .layout-edit-toolbar__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .layout-edit-toolbar__actions .ui-button:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .widget-workspace[data-layout-editing="true"] > .dvs-widget[data-layout-editable="true"] { animation: none !important; }
}