:root {
    --page-background: #171717;
    --panel-background: #242424;
    --panel-border: #414141;
    --text-color: #f4f4f4;
    --muted-text: #bdbdbd;
    --accent-color: #c9a227;
    --accent-hover: #e4bc3e;
    --field-background: #111111;
    --preview-color: #ff0000;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    padding: 28px 16px 60px;
    background: var(--page-background);
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
}
.order-page { width: min(1180px, 100%); margin: 0 auto; }
.page-heading { margin: 0 0 24px; text-align: center; color: var(--accent-color); }
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr); gap: 28px; align-items: start; }
.panel { padding: 22px; background: var(--panel-background); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,0.28); }
.panel h2, .panel h3 { margin-top: 0; color: var(--accent-color); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full-width { grid-column: 1 / -1; }
label { font-weight: 700; }
.field-note { margin: 0; color: var(--muted-text); font-size: 0.85rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; padding: 11px 12px; color: var(--text-color); background: var(--field-background); border: 1px solid #555555; border-radius: 8px; }
input[type="color"] { min-height: 48px; padding: 5px; cursor: pointer; }
textarea { min-height: 110px; resize: vertical; }
.section-divider { grid-column: 1 / -1; height: 1px; margin: 4px 0; background: #444444; border: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
button { padding: 12px 18px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.primary-button { color: #111111; background: var(--accent-color); }
.primary-button:hover { background: var(--accent-hover); }
.secondary-button { color: #ffffff; background: #444444; }
.secondary-button:hover { background: #595959; }
button:disabled { cursor: wait; opacity: 0.65; }
.preview-panel { position: sticky; top: 20px; overflow: hidden; }
.preview-panel.is-stopped { position: static; top: auto; }
.preview-instructions { margin: -4px 0 20px; color: var(--muted-text); line-height: 1.45; }
.preview-window { display: flex; justify-content: center; min-height: 390px; margin-bottom: 18px; padding: 115px 0 40px; overflow: hidden; perspective: 1000px; }
.preview-scale { position: relative; width: 360px; height: 180px; }
#previewEnvelope { position: relative; width: 600px; height: 300px; transform: scale(0.6); transform-origin: top left; transform-style: preserve-3d; }
.preview-envelope-block { background: var(--preview-color); border: 2px solid rgba(255,255,255,0.22); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.48); }
#previewBase { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 32px; background: #2a2a2a; }
#previewMessage { width: 100%; color: var(--accent-color); font-size: 28px; font-weight: 700; line-height: 1.25; text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
#previewTopFlapWrap { position: absolute; inset: 0; z-index: 10; transform: translateZ(20px); transform-style: preserve-3d; }
#previewTopFlap { position: absolute; inset: 0; transform: rotateX(0deg); transform-origin: top center; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
#previewTopFlap.open { transform: rotateX(180deg); }
.preview-flap-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.preview-flap-face.front { z-index: 2; transform: rotateX(0deg); }
.preview-flap-face.back { transform: rotateX(180deg); }
.preview-logo { max-width: 75%; max-height: 75%; object-fit: contain; }
.preview-product-image { max-width: 85%; max-height: 85%; object-fit: contain; }
#previewBottomFlapWrap { position: absolute; bottom: 0; left: 0; z-index: 15; width: 100%; height: 33.33%; transform: translateZ(30px); transform-style: preserve-3d; }
#previewBottomFlap { position: absolute; inset: 0; transform: rotateX(0deg); transform-origin: bottom center; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 0 8px 8px; }
#previewBottomFlap.open { transform: rotateX(-180deg); }
.preview-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.preview-status { min-height: 22px; margin: 14px 0 0; color: var(--muted-text); font-size: 0.9rem; text-align: center; }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } .preview-panel { position: static; } }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } .field.full-width, .section-divider { grid-column: auto; } .preview-window { min-height: 290px; padding-top: 85px; } .preview-scale { width: 300px; height: 150px; } #previewEnvelope { transform: scale(0.5); } }