@font-face { font-family: Manrope; src: url('../assets/studio-fonts/Manrope-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('../assets/studio-fonts/Manrope-Bold.ttf'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: Alexandria; src: url('../assets/studio-fonts/Alexandria-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: Alexandria; src: url('../assets/studio-fonts/Alexandria-Bold.ttf'); font-weight: 700 800; font-display: swap; }
body { --gold: #98000a; --bg-page: #f7f5f2; background: var(--bg-page); }
[hidden] { display: none !important; }
.qs-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .8rem 1rem; background: white; border-bottom: 1px solid #d9d9d9; position: sticky; top: 0; z-index: 5; }
.qs-brand { display: flex; align-items: center; gap: .75rem; color: #98000a; font-weight: 800; text-decoration: none; }
.qs-brand img { width: 85px; height: 30px; object-fit: contain; }
.qs-buttons { display: flex; flex-wrap: wrap; gap: .4rem; margin-inline-start: auto; }
.qs-toolbar .stock-btn { padding: .45rem .65rem; font-size: .75rem; }
#qsReference, #qsSaveState { font-size: .75rem; overflow-wrap: anywhere; }
#qsMessage { padding: .6rem 1rem; margin: 0; overflow-wrap: anywhere; }
#qsMessage:empty { padding: 0; } #qsMessage[data-error=true] { background: #fff1f0; color: #98000a; }
.qs-workspace { display: grid; grid-template-columns: 235px minmax(250px,1fr) 280px; min-height: calc(100vh - 90px); }
.qs-panel { padding: 1rem; background: #fff; border-inline-end: 1px solid #d9d9d9; min-width: 0; max-height: calc(100vh - 80px); overflow-y: auto; }
.qs-panel h3 { font-size: .85rem; margin: 1rem 0 .7rem; color: #98000a; }
.qs-panel .stock-btn { margin: .2rem; padding: .5rem; font-size: .75rem; }
.qs-panel label, .qs-form label { display: grid; gap: .3rem; margin: .6rem 0; font-size: .75rem; }
.qs-panel input, .qs-panel select, .qs-panel textarea, .qs-form input, .qs-form select, .qs-form textarea { min-width: 0; width: 100%; padding: .55rem; border: 1px solid #d9d9d9; border-radius: 6px; font: inherit; background: white; }
.qs-panel input[type=checkbox], .qs-form input[type=checkbox] { width: auto; }
.qs-panel label:has(input[type=checkbox]) { display: flex; align-items: center; gap: .5rem; }
.qs-panel textarea { min-height: 110px; resize: vertical; }
.qs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.qs-workarea { min-width: 0; overflow: auto; padding: 1rem; background: #e9e6e1; }
.qs-view-controls { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1rem; font-size: .75rem; }
#qsStage { position: relative; margin: 0 auto; direction: ltr; }
#qsPage { position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden; box-shadow: 0 4px 20px #0002; background: white; }
#qsPage.grid { background-image: linear-gradient(#98000a10 1px,transparent 1px),linear-gradient(90deg,#98000a10 1px,transparent 1px); background-size: 5mm 5mm; }
.qs-page-border { position: absolute; inset: 6mm; border: .5mm solid #98000a; pointer-events: none; z-index: 2; }
.qs-element { position: absolute; border: 1px solid transparent; box-sizing: border-box; touch-action: none; cursor: move; white-space: pre-wrap; line-height: 1.35; padding: 1mm; overflow: hidden; user-select: none; }
.qs-element[data-type=image], .qs-element[data-type=logo], .qs-element[data-type=pdf], .qs-element[data-type=pricing] { padding: 0; }
.qs-element:not([data-type=text]):not([data-type=specs]) { white-space: normal; }
.qs-element:hover { outline: 1px dashed #98000a80; }
.qs-element.selected { outline: 2px solid #d71920; z-index: 1; }
.qs-element img { width: 100%; height: 100%; pointer-events: none; display: block; }
.qs-handle { position: absolute; bottom: 0; right: 0; width: 4mm; height: 4mm; background: #d71920; cursor: nwse-resize; }
.qs-element[data-locked=true] { cursor: default; }
.qs-thumb { display: flex; align-items: center; gap: .4rem; border: 1px solid #d9d9d9; border-radius: 6px; padding: .5rem; margin: .5rem 0; background: #fafafa; }
.qs-thumb.active { border-color: #98000a; background: #fff1f0; }
.qs-thumb button { flex: 1; text-align: start; background: none; border: none; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.qs-mini { width: 23px; height: 32px; background: white; border: 1px solid #aaa; flex-shrink: 0; position: relative; overflow: hidden; }
.qs-mini span { position: absolute; background: #98000a30; }
.qs-asset { border: 1px solid #d9d9d9; padding: .5rem; border-radius: 6px; margin: .5rem 0; overflow-wrap: anywhere; font-size: .7rem; }
.qs-asset img { width: 100%; height: 70px; object-fit: contain; }
.qs-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem; margin: 1rem 0; }
.qs-card { border: 1px solid #d9d9d9; border-radius: 12px; padding: 1.2rem; background: white; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.qs-card h3 { margin-bottom: .6rem; } .qs-card small { color: var(--text-muted); }
.qs-filter { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1rem 0; }
.qs-filter input { padding: .6rem; max-width: 100%; }
#qsDialog { border: 1px solid #d9d9d9; border-radius: 12px; width: min(1150px,96vw); max-height: 94vh; margin: auto; padding: 1.2rem; }
#qsDialog::backdrop { background: #10101080; }
.qs-dialog-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.qs-dialog-head h2 { font-size: 1.2rem; }
.qs-table-wrap { overflow-x: auto; }
.qs-pricing { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9pt; background: white; }
.qs-pricing td,.qs-pricing th { border: 1px solid #d9d9d9; padding: 1mm; overflow-wrap: anywhere; vertical-align: top; }
.qs-pricing th { background: #f7f5f2; text-align: start; }
.qs-pricing td:first-child,.qs-pricing th:first-child { width: 7%; text-align: center; }
.qs-pricing td:nth-child(2),.qs-pricing th:nth-child(2) { width: 38%; }
.qs-pricing td:nth-child(3),.qs-pricing th:nth-child(3) { width: 13%; }
.qs-pricing td:nth-child(4),.qs-pricing th:nth-child(4) { width: 15%; }
.qs-pricing td:nth-child(5),.qs-pricing th:nth-child(5) { width: 10%; }
.qs-pricing td:nth-child(6),.qs-pricing th:nth-child(6) { width: 17%; }
.qs-items { width: 100%; min-width: 1050px; border-collapse: collapse; table-layout: fixed; }
.qs-items td,.qs-items th { padding: .4rem; border-bottom: 1px solid #ddd; font-size: .75rem; text-align: start; vertical-align: top; }
.qs-items th { background: #f7f5f2; color: #98000a; }
.qs-items .qs-item-number { width: 38px; }
.qs-items .qs-item-description { width: 21%; }
.qs-items .qs-item-specs { width: 18%; }
.qs-items .qs-item-controls { width: 155px; }
.qs-items input,.qs-items textarea { width: 100%; min-width: 0; padding: .5rem; font: inherit; border: 1px solid #d9d9d9; border-radius: 6px; box-sizing: border-box; }
.qs-items input { height: 38px; }
.qs-items textarea { min-height: 110px; resize: vertical; }
.qs-items input[inputmode=decimal] { text-align: right; font-variant-numeric: tabular-nums; }
.qs-items .qs-item-index { text-align: center; padding-top: 1rem; }
.qs-items .qs-line-total { text-align: right; padding-top: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qs-row-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.qs-row-controls .stock-btn { padding: .4rem .25rem; margin: 0; font-size: .68rem; }
#qsPricingTotals { max-width: 520px; margin-inline-start: auto; margin-bottom: 1rem; }
.qs-total { padding: 1rem; text-align: end; color: #98000a; font-weight: 800; }
.qs-totals { width: 100%; margin-top: 2mm; border-collapse: collapse; table-layout: fixed; background: #98000a; color: #fff; font-size: 9pt; line-height: 1.35; }
.qs-totals th, .qs-totals td { height: 8mm; padding: 1mm; box-sizing: border-box; border-top: 1px solid #fff; vertical-align: middle; }
.qs-totals tr:first-child th, .qs-totals tr:first-child td { border-top: 0; }
.qs-totals th { width: 60%; text-align: start; font-weight: 700; }
.qs-totals td { width: 40%; text-align: right; font-weight: 700; white-space: nowrap; }
.qs-totals .qs-grand-total { background: #780008; }
.qs-preview { width: 100%; height: 72vh; border: 1px solid #ddd; }
.qs-note { font-size: .75rem; color: #5a5044; margin: .75rem 0; overflow-wrap: anywhere; }
.qs-form { max-width: 700px; }
:focus-visible { outline: 2px solid #d71920; outline-offset: 2px; }
@media (max-width:1000px) { .qs-workspace { grid-template-columns: 190px minmax(250px,1fr); } #qsProperties { grid-column: 1 / -1; max-height: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; } }
@media (max-width:650px) { .qs-workspace { display: flex; flex-direction: column; } .qs-panel { max-height: none; } #qsLeft { max-height: 300px; } #qsProperties { display: block; } .qs-toolbar { position: static; } .qs-workarea { min-height: 500px; } .qs-buttons { margin: 0; } .qs-dialog-head h2 { font-size: 1rem; } }