.zonepick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hps-rich-drop .zonepick { max-width: min(500px, calc(100vw - 32px)); padding: var(--space-1); }
.zonepick__tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-base); cursor: pointer; }
.zonepick__tile:hover { background: var(--surface-hover); }
.zonepick__tile--selected { box-shadow: inset 0 0 0 2px var(--accent-primary); background: var(--accent-subtle); }
.zonepick__grid { width: 86px; height: 56px; display: grid; gap: 3px; }
.zonepick__cell { background: var(--surface-zone-well); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 8px; color: var(--text-tertiary); }
.zonepick__tile--selected .zonepick__cell { background: var(--accent-muted); color: var(--accent-primary); }

.zonepick__id { font-size: 10px; color: var(--text-secondary); }
.zonepick__tile--selected .zonepick__id { color: var(--accent-primary); font-weight: var(--weight-semibold); }

.zonepick__hint { font-size: 9px; line-height: 1.2; color: var(--text-tertiary); text-align: center; max-width: 86px; }
.zonepick__tile:has(.zonepick__grid--canvas) .zonepick__id,
.zonepick__tile:has(.zonepick__grid--canvas) .zonepick__hint { padding: 0 var(--space-2) var(--space-2); }
.zonepick__tile--selected .zonepick__hint { color: var(--accent-primary); }

.zonepick__grid--reader { grid-template-columns: 1fr 2.4fr 1fr; }
.zonepick__grid--reader .zonepick__cell { grid-column: 2; }

.zonepick__tile:has(.zonepick__grid--canvas) { padding: 0; overflow: hidden; }
.zonepick__grid--canvas {
  gap: 0;
  grid-template-columns: 1fr;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.zonepick__grid--canvas .zonepick__cell { border-radius: 0; }

.zonepick__grid--mono { gap: 0; grid-template-columns: 1fr; padding: 4px; box-sizing: border-box; }
.zonepick__grid--mono-capped { gap: 0; grid-template-columns: 4fr 1fr; padding: 4px; box-sizing: border-box; }
.zonepick__grid--duo { grid-template-columns: 1fr 1fr; }
.zonepick__grid--lead-aside { grid-template-columns: 2fr 1fr; }
.zonepick__grid--stack-rail { grid-template-columns: 1fr 1.8fr; grid-template-rows: 1fr 1fr; }
.zonepick__grid--stack-rail .zonepick__cell:nth-child(1) { grid-column: 1; grid-row: 1; }
.zonepick__grid--stack-rail .zonepick__cell:nth-child(2) { grid-column: 1; grid-row: 2; }
.zonepick__grid--stack-rail .zonepick__cell:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.zonepick__grid--rail-stack { grid-template-columns: 1.8fr 1fr; grid-template-rows: 1fr 1fr; }
.zonepick__grid--rail-stack .zonepick__cell:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.zonepick__grid--rail-stack .zonepick__cell:nth-child(2) { grid-column: 2; grid-row: 1; }
.zonepick__grid--rail-stack .zonepick__cell:nth-child(3) { grid-column: 2; grid-row: 2; }
.zonepick__grid--thirds { grid-template-columns: repeat(3, 1fr); }
.zonepick__grid--header-split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.zonepick__grid--header-split .zonepick__cell:nth-child(1) { grid-column: 1 / -1; }
.zonepick__grid--split-footer { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.zonepick__grid--split-footer .zonepick__cell:nth-child(3) { grid-column: 1 / -1; }
.zonepick__grid--quad { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.zoneslot { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }

.zonecanvas { display: grid; gap: var(--space-2); width: 100%; height: 280px; background: var(--surface-page); border-radius: var(--radius-lg); padding: var(--space-3); }

.zonecanvas__zone { position: relative; min-width: 0; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); background: var(--surface-base); border: 1px solid var(--border-subtle); cursor: default; }
.zonecanvas__zone--empty { background: transparent; border: 1px dashed var(--border-default); box-shadow: none; }

.zonecanvas__zone[data-paint-style="well"] { background: var(--surface-zone-well); border-color: transparent; box-shadow: none; }
.zonecanvas__zone[data-paint-style="card"] { background: var(--surface-raised); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.zonecanvas__zone[data-paint-style="outline"] { background: transparent; border-color: var(--border-subtle); box-shadow: none; }
.zonecanvas__zone[data-paint-style="paper"] { background: var(--surface-raised); border-color: var(--border-subtle); box-shadow: none; }
.zonecanvas__zone[data-paint-style="none"] { background: var(--surface-base); border-color: var(--border-subtle); box-shadow: none; }
.zonecanvas__fill { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
.zonecanvas__fill .material-symbols-rounded { font-size: var(--text-lg); color: var(--accent-primary); }
.zonecanvas__zone--empty .zonecanvas__fill { color: var(--text-tertiary); font-weight: var(--weight-regular); }
.zonecanvas__zone--empty .zonecanvas__fill .material-symbols-rounded { color: var(--text-tertiary); }

.zc__pick { position: absolute; z-index: 2; border-color: transparent; box-shadow: var(--shadow-sm); height: 26px; padding: 0 4px 0 6px; max-width: calc(100% - var(--space-4)); }
.zc__pick--view { top: var(--space-2); left: var(--space-2); }
.zc__pick--bg { top: var(--space-2); right: var(--space-2); }
.zc__pick:hover { border-color: transparent; box-shadow: var(--shadow-md); }
.zc__pick.hps-trigger--open { border-color: var(--accent-primary); }
.zc__pick .hps-trigger__value { font-weight: var(--weight-medium); }

.zc__layout .hps-trigger { width: max-content; border-color: transparent; box-shadow: var(--shadow-sm); }

.zp__swatch { display: block; width: 34px; height: 22px; border-radius: 5px; padding: 0; flex-shrink: 0; background-color: var(--surface-page); }
.zp__swatch.shell__zone:not([class*="shell__zone--"]) { border: 1px dashed var(--border-default); }
.zp__bg-opt { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2); }
.zp__drop--views { max-height: 260px; overflow-y: auto; max-width: min(260px, calc(100vw - 48px)); }
.zp__drop--bg { min-width: 0; width: max-content; max-width: min(200px, calc(100vw - 48px)); }

.zonecanvas--reader { grid-template-columns: 1fr 2.4fr 1fr; }
.zonecanvas--reader .zonecanvas__zone:nth-child(1) { grid-column: 2; }

.zonecanvas--canvas { grid-template-columns: 1fr; padding: 0; gap: 0; }
.zonecanvas--canvas .zonecanvas__zone { border-radius: 0; }

.zonecanvas--mono { grid-template-columns: 1fr; }
.zonecanvas--mono-capped { grid-template-columns: 4fr 1fr; }
.zonecanvas--duo { grid-template-columns: 1fr 1fr; }
.zonecanvas--lead-aside { grid-template-columns: 2fr 1fr; }
.zonecanvas--stack-rail { grid-template-columns: 1fr 1.8fr; grid-template-rows: 1fr 1fr; }
.zonecanvas--stack-rail .zonecanvas__zone:nth-child(1) { grid-column: 1; grid-row: 1; }
.zonecanvas--stack-rail .zonecanvas__zone:nth-child(2) { grid-column: 1; grid-row: 2; }
.zonecanvas--stack-rail .zonecanvas__zone:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.zonecanvas--rail-stack { grid-template-columns: 1.8fr 1fr; grid-template-rows: 1fr 1fr; }
.zonecanvas--rail-stack .zonecanvas__zone:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.zonecanvas--rail-stack .zonecanvas__zone:nth-child(2) { grid-column: 2; grid-row: 1; }
.zonecanvas--rail-stack .zonecanvas__zone:nth-child(3) { grid-column: 2; grid-row: 2; }
.zonecanvas--thirds { grid-template-columns: repeat(3, 1fr); }
.zonecanvas--header-split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.zonecanvas--header-split .zonecanvas__zone:nth-child(1) { grid-column: 1 / -1; }
.zonecanvas--split-footer { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.zonecanvas--split-footer .zonecanvas__zone:nth-child(3) { grid-column: 1 / -1; }
.zonecanvas--quad { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.zoneorder { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); }
.zoneorder .material-symbols-rounded { font-size: 14px; }

@media (max-width: 767px) {
  .zonecanvas { height: 220px; padding: var(--space-2); gap: var(--space-1-5); }
  .zonecanvas__fill { flex-direction: column; text-align: center; font-size: var(--text-xs); }
  .zc__pick { padding: 0 2px 0 4px; height: 24px; }
  .zc__pick .hps-trigger__value { display: none; }
  .zp__drop--views { max-width: calc(100vw - 40px); }
}