.design-dialog {
    --design-navy: #0f172a;
    --design-blue: #2563eb;
    --design-border: #dbe5f2;
    box-sizing: border-box;
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
    inset: 0;
    margin: auto;
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid #d9e5f6;
    border-radius: 23px;
    color: var(--design-navy);
    background: #fff;
    box-shadow: 0 24px 80px #0f234548, 0 2px 8px #0f234512;
    overscroll-behavior: contain;
    font: 500 14px/1.45 Inter, system-ui, sans-serif;
}
.design-dialog-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); min-height: 0; }
.design-dialog-header, .design-dialog-footer { flex-shrink: 0; }
.design-dialog-content { min-height: 0; overflow-y: auto; }
.design-dialog *, .design-dialog *::before, .design-dialog *::after { box-sizing: border-box; }
.design-dialog [hidden] { display: none !important; }
.design-dialog::backdrop { background: #14244187; backdrop-filter: blur(5px); }
html:has(.design-dialog[open]) { overflow: hidden; }
.design-dialog-header, .design-dialog-footer { display: flex; align-items: center; gap: 12px; padding: 20px 26px; }
.design-dialog-header {
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--design-border);
    background: linear-gradient(115deg, #fff 40%, #eff9ff);
}
.design-dialog h2, .design-dialog h3, .design-dialog h4 { font-family: Inter, system-ui, sans-serif; }
.design-dialog-header h2 { margin: 3px 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.18; color: var(--design-navy); }
.design-dialog-header p:last-child { margin: 4px 0 0; color: #475569; }
.design-eyebrow { margin: 0; color: #1d4ed8; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.design-dialog-close, .design-button, .design-order-trigger {
    border: 1px solid #cbdcf6;
    border-radius: 10px;
    color: #1645a1;
    background: #fff;
    cursor: pointer;
    font: 700 13px/1.25 Inter, system-ui, sans-serif;
    text-decoration: none;
}
.design-dialog-close { width: 38px; height: 38px; flex: 0 0 38px; font-size: 23px; }
.design-dialog-content { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; padding: 22px 26px; }
.design-visual, .design-details {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--design-border);
    border-radius: 17px;
    background: linear-gradient(160deg, #fff 18%, #f5faff);
    box-shadow: 0 5px 18px #15375e0a;
}
.design-image-frame {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 145px;
    height: clamp(220px, 43dvh, 420px);
    overflow: hidden;
    border: 1px solid #e3edf8;
    border-radius: 11px;
    background: #fff;
}
.design-image-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.design-image-frame.is-zoomed { display: block; overflow: auto; }
.design-image-frame.is-zoomed img { position: static; width: 155%; height: auto; max-width: none; max-height: none; }
.design-image-frame p { margin: 0; padding: 16px; color: #475569; text-align: center; }
.design-live { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: contain; }
.design-live canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.design-live canvas:active { cursor: grabbing; }
.design-live-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.design-live-tools p { flex: 1 1 140px; margin: 0; color: #475569; font-size: 12px; }
.design-live-tools .design-button { min-height: 34px; }
.design-views .design-live-choice { align-content: center; min-height: 54px; }
.design-views { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.design-views:empty { display: none; }
.design-views button {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 91px;
    padding: 4px;
    background: #fff;
    color: #1645a1;
    border: 1px solid #cbdcf6;
    border-radius: 8px;
    cursor: pointer;
    font: 700 10px/1.2 Inter, system-ui, sans-serif;
}
.design-views button[aria-pressed="true"] { border-color: #2563eb; background: #eaf4ff; }
.design-views img { width: 68px; height: 40px; object-fit: contain; }
.design-details h3 { margin: 6px 0 12px; font-size: 21px; line-height: 1.2; color: var(--design-navy); overflow-wrap: anywhere; }
.design-details h4 { margin: 14px 0 5px; font-size: 13px; color: var(--design-navy); }
.design-details dl { margin: 0; }
.design-details dl div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #e6eef8; }
.design-details dt { flex: 0 0 auto; color: #475569; }
.design-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.design-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 9px 11px; border: 1px solid #b7ebf4; border-radius: 9px; background: #ecfeff; }
.design-total strong { font-size: 18px; color: #1645a1; }
.design-dialog-footer { justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--design-border); background: #fff; }
.design-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 13px; text-align: center; }
.design-primary { background: var(--design-blue); color: #fff; border-color: var(--design-blue); }
.design-zoom { min-height: 32px; margin-top: 8px; }
.design-order-trigger { min-height: 35px; padding: 6px 9px; white-space: normal; }
.design-dialog :focus-visible, .design-order-trigger:focus-visible { outline: 3px solid #06b6d4; outline-offset: 2px; }
.design-dialog button:disabled { opacity: .6; cursor: wait; }
.design-feedback { margin: 7px 0 0; color: #9a3412; }
.design-feedback:empty { display: none; }
@media (max-width: 650px) {
    .design-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
    .design-dialog-panel { max-height: calc(100dvh - 18px); }
    .design-dialog-header, .design-dialog-footer { padding: 12px; }
    .design-dialog-content { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
    .design-visual, .design-details { padding: 10px; }
    .design-image-frame { height: clamp(160px, 31dvh, 240px); }
    .design-dialog-footer { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .design-dialog-footer .design-primary { grid-column: 1 / -1; }
}
@media print {
    body:has(.design-dialog[open]) * { visibility: hidden; }
    body:has(.design-dialog[open]) .design-dialog, body:has(.design-dialog[open]) .design-dialog * { visibility: visible; }
    .design-dialog[open] { position: absolute; inset: 0 auto auto 0; width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; }
    .design-dialog-panel { max-height: none; }
    .design-dialog-content { overflow: visible; }
    .design-dialog[open]::backdrop { display: none; }
    .design-dialog .design-dialog-footer, .design-dialog .design-dialog-close, .design-dialog .design-views, .design-dialog .design-zoom { display: none; }
    .design-dialog .design-image-frame { height: 105mm; overflow: hidden; }
    .design-dialog .design-image-frame img { width: 100%; height: 100%; }
}