.card-order-dialog {
  --order-card-width: clamp(64px, 9vw, 105px);
  width: min(860px, calc(100vw - 24px)); max-width: none;
  max-height: calc(100dvh - 24px); height: min(820px, calc(100dvh - 24px));
  box-sizing: border-box; padding: 16px; margin: auto;
  border: 1px solid #aaa9a3; border-radius: 10px; background: #fafaf7; color: #292a28;
  font: inherit; overflow: hidden; box-shadow: 0 18px 70px #0004;
}
.card-order-dialog[open] {display: flex; flex-direction: column; gap: 10px;}
.card-order-dialog::backdrop {background: #17191899;}
.card-order-dialog header, .card-order-dialog footer {display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none;}
.card-order-dialog h2 {font-size: 18px; margin: 0;}
.card-order-dialog h3 {font-size: 14px; margin: 0 0 4px;}
.card-order-dialog button {font: inherit; font-size: 13px; min-height: 34px;}
.card-order-hint, .card-order-status {margin: 0; font-size: 13px; line-height: 1.5;}
.card-order-hint {color: #62635e; flex: none;}
.card-order-lanes {display: grid; grid-auto-rows: minmax(0, 1fr); gap: 10px; min-height: 0; flex: 1;}
.card-order-section {display: flex; flex-direction: column; min-height: 0; min-width: 0;}
.card-order-row {display: flex; align-items: stretch; gap: 8px; padding: 6px; min-height: 0; flex: 1; overflow: auto hidden; border: 1px dashed #b0b0a8; background: #eeeeea; border-radius: 5px; overscroll-behavior: contain;}
.card-order-row.is-drop-target {background: #dedfd8; border: 2px solid #34362f; padding: 5px;}
.card-order-dialog .card-order-card {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: var(--order-card-width); flex: 0 0 var(--order-card-width); min-height: 0; padding: 3px; border: 2px solid transparent; border-radius: 4px; background: #fafaf7; color: inherit; touch-action: none; user-select: none; overflow: hidden;}
.card-order-card[aria-pressed=true] {border-color: #292a28 !important; background: #dedfd8 !important;}
.card-order-card.is-dragging {opacity: .35;}
.card-order-card[data-insert-before] {border-left: 4px solid #292a28 !important;}
.card-order-art {min-height: 0; max-width: 100%; flex: 1; aspect-ratio: 732 / 1027; display: flex; justify-content: center;}
.card-order-art .public-card-face {height: 100%; width: auto; aspect-ratio: 732 / 1027; max-width: 100%; flex: none; pointer-events: none;}
.card-order-art img {height: 100%; width: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none;}
.card-order-caption {font-size: 11px; line-height: 1.2; flex: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-order-empty {margin: auto; font-size: 13px; color: #76766e; pointer-events: none;}
.card-order-controls {display: flex; flex-wrap: wrap; gap: 6px; flex: none;}
.card-order-dialog footer .action-button {width: auto; min-width: 112px; margin: 0;}
.card-order-dialog .card-order-ghost {position: fixed; height: 100px; z-index: 10; pointer-events: none; opacity: .85; box-shadow: 0 4px 16px #0005;}
@media (max-width: 600px) {
  .card-order-dialog {padding: 10px; gap: 6px; width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px);}
  .card-order-lanes {gap: 6px;}
  .card-order-controls button {padding: 6px 8px;}
  .card-order-status {font-size: 12px;}
}
@media (max-height: 500px) {
  .card-order-dialog {padding: 8px; height: calc(100dvh - 8px); max-height: calc(100dvh - 8px); gap: 4px !important; --order-card-width: 104px;}
  .card-order-dialog h2 {font-size: 16px;}
  .card-order-dialog h3 {font-size: 12px; margin: 0;}
  .card-order-hint {font-size: 11px;}
  .card-order-lanes {gap: 3px;}
  .card-order-section {flex-direction: row; gap: 8px;}
  .card-order-section h3 {width: 72px; flex: none; align-self: center;}
  .card-order-dialog .card-order-card {flex-direction: row; gap: 3px;}
  .card-order-art {height: 100%; flex: none;}
  .card-order-caption {white-space: normal; font-size: 10px; flex: 1; min-width: 0;}
  .card-order-row {padding: 3px;}
  .card-order-controls button, .card-order-dialog footer button, .card-order-dialog header button {min-height: 28px; padding: 3px 8px;}
}