.pi-generator-tool { --pi-document-accent: #6338b8; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--line, #dfe4eb); border-radius: 18px; margin-top: 36px; padding: 24px; }
.pi-generator-tool > h2 { margin: 0 0 6px; }.pi-generator-tool > p { color: var(--wp--preset--color--muted, #6f7c91); margin: 0 0 22px; }
.pi-generator-shell { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }.pi-generator-form { margin: 0; min-width: 0; }
.pi-generator-document-tabs { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); margin: 0 0 22px; }.pi-generator-document-tabs button { background: #f5f6fa; border: 1px solid #e1e5ed; border-radius: 10px; color: #607087; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; line-height: 1.35; min-height: 56px; padding: 6px; }.pi-generator-document-tabs button span { display: block; font-size: 13px; }.pi-generator-document-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--pi-document-accent) 10%, #fff); border-color: var(--pi-document-accent); color: var(--pi-document-accent); }
.pi-generator-section { border: 0; margin: 0 0 22px; padding: 0; }.pi-generator-section legend { color: var(--wp--preset--color--ink, #0b1f3a); font-size: 15px; font-weight: 800; margin-bottom: 12px; padding: 0; }.pi-generator-section-title { align-items: center; display: flex; justify-content: space-between; }.pi-generator-add-line { background: transparent; border: 1px solid var(--pi-document-accent); border-radius: 8px; color: var(--pi-document-accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; min-height: 34px; padding: 0 10px; }
.pi-generator-help { color: var(--wp--preset--color--muted, #6f7c91); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }.pi-generator-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pi-generator-field { color: var(--wp--preset--color--muted, #6f7c91); display: flex; flex-direction: column; font-size: 12px; font-weight: 700; gap: 6px; letter-spacing: .02em; }.pi-generator-field.is-wide { grid-column: 1 / -1; }
.pi-generator-field input,.pi-generator-field select,.pi-generator-field textarea,.pi-generator-products input { background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--line, #dfe4eb); border-radius: 10px; box-sizing: border-box; color: var(--wp--preset--color--ink, #0b1f3a); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; min-height: 44px; padding: 10px 12px; width: 100%; }.pi-generator-field textarea { min-height: 78px; resize: vertical; }.pi-generator-field input:focus,.pi-generator-field select:focus,.pi-generator-field textarea:focus,.pi-generator-products input:focus { border-color: var(--pi-document-accent); outline: 2px solid color-mix(in srgb, var(--pi-document-accent) 18%, transparent); }
.pi-generator-products-scroll { border: 1px solid var(--wp--preset--color--line, #dfe4eb); border-radius: 12px; overflow-x: auto; }.pi-generator-products { border-collapse: collapse; min-width: 790px; width: 100%; }.pi-generator-products th { background: #f5f7fa; color: #607087; font-size: 11px; letter-spacing: .02em; padding: 10px 7px; text-align: left; white-space: nowrap; }.pi-generator-products td { border-top: 1px solid #e6eaf0; padding: 6px; vertical-align: top; }.pi-generator-products th:first-child,.pi-generator-products td:first-child { min-width: 176px; }.pi-generator-products th:nth-child(2),.pi-generator-products td:nth-child(2) { min-width: 118px; }.pi-generator-products input { border-radius: 7px; font-size: 12px; min-height: 36px; padding: 7px; }.pi-generator-remove-line { background: #fff0ed; border: 0; border-radius: 7px; color: #c25342; cursor: pointer; font-size: 18px; font-weight: 700; height: 36px; width: 34px; }.packing-column { display: none; }.is-packing .packing-column { display: table-cell; }.is-packing .price-column { display: none; }
.pi-generator-optional { border-top: 1px solid var(--wp--preset--color--line, #dfe4eb); margin: 4px 0 22px; padding-top: 16px; }.pi-generator-optional-title { color: var(--wp--preset--color--ink, #0b1f3a); font-size: 14px; font-weight: 800; margin: 0 0 16px; }
.pi-generator-summary { background: var(--wp--preset--color--canvas, #f5f7fa); border-radius: 12px; margin: 0 0 16px; padding: 14px 16px; }.pi-generator-summary p { align-items: center; display: flex; justify-content: space-between; margin: 0 0 7px; }.pi-generator-summary p:last-child { border-top: 1px solid var(--wp--preset--color--line, #dfe4eb); font-size: 16px; font-weight: 800; margin: 10px 0 0; padding-top: 10px; }.pi-generator-summary .packing-total { display: none; }.is-packing .pi-generator-summary .goods-total,.is-packing .pi-generator-summary .shipping-total,.is-packing .pi-generator-summary .grand-total { display: none; }.is-packing .pi-generator-summary .packing-total { display: flex; }
.pi-generator-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }.pi-generator-download,.pi-generator-reset { border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 800; min-height: 44px; padding: 0 17px; }.pi-generator-download { background: var(--pi-document-accent); color: #fff; }.pi-generator-download:disabled { cursor: wait; opacity: .55; }.pi-generator-reset { background: #f2eefb; color: var(--pi-document-accent); }.pi-generator-status { color: var(--wp--preset--color--muted, #6f7c91); flex-basis: 100%; font-size: 13px; margin: 0; min-height: 20px; }.pi-generator-status.is-error { color: #b64932; }.pi-generator-status.is-success { color: #17834f; font-weight: 700; }
.pi-generator-form { position: relative; z-index: 1; }.pi-generator-preview-wrap { align-self: start; margin-top: -14px; position: sticky; top: 8px; z-index: 0; }.pi-generator-preview-label { align-items: center; display: flex; font-size: 12px; font-weight: 800; justify-content: space-between; margin: 0 0 8px; }.pi-generator-preview-label span { color: var(--wp--preset--color--muted, #6f7c91); font-weight: 500; }.pi-generator-preview { background: #fff; border: 1px solid var(--wp--preset--color--line, #dfe4eb); box-shadow: 0 18px 42px rgba(11, 31, 58, .12); display: block; height: auto; width: 100%; }.pi-generator-note { color: var(--wp--preset--color--muted, #6f7c91); font-size: 12px; line-height: 1.6; margin: 12px 0 0; }
@media (max-width: 980px) { .pi-generator-shell { grid-template-columns: 1fr; }.pi-generator-preview-wrap { margin-top: 0; position: static; z-index: auto; }.pi-generator-preview { max-width: 520px; } }
@media (max-width: 560px) { .pi-generator-tool { margin-top: 24px; padding: 18px; }.pi-generator-grid { grid-template-columns: 1fr; }.pi-generator-field.is-wide { grid-column: auto; }.pi-generator-document-tabs { grid-template-columns: repeat(2, 1fr); }.pi-generator-actions button { flex: 1; } }