:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --line: #d8deea;
    --text: #213043;
    --muted: #66758a;
    --primary: #2b5cff;
    --primary-dark: #1d47d4;
    --accent: #0f9d8a;
    --accent-dark: #0a7d6e;
    --success: #2e8b57;
    --danger: #d9534f;
    --warning: #ff8b2b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; backdrop-filter: blur(8px); z-index: 10; }
.site-brand { font-size: 20px; font-weight: 700; }
.site-nav a { text-decoration: none; color: var(--text); }
.site-main { padding: 24px; }
.page-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 10px 28px rgba(31,42,68,.06); }
.page-actions { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 20px; }
.form-grid, .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.form-group-full { grid-column: 1 / -1; }
.form-control { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.form-actions, .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none; cursor: pointer; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(31,42,68,.08); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-soft { background: #eef3ff; color: var(--primary); border-color: #c6d4ff; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.empty-state { padding: 24px; text-align: center; color: var(--muted); }
.alert-success, .alert-error { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; }
.alert-success { background: #effaf4; border: 1px solid #b6dfc8; color: #23653f; }
.alert-error { background: #fff0ef; border: 1px solid #f3b0ad; color: #a7332f; }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-success { color: #fff; background: var(--success); }
.badge-passive { color: #fff; background: var(--danger); }
.muted { color: var(--muted); }
.callout { padding: 16px; border-radius: 12px; background: #eef3ff; border: 1px solid #c5d3ff; }
.checkbox-row { display: flex; gap: 16px; align-items: center; }
.full-width { width: 100%; }
.mt-12 { margin-top: 12px; }
.vertical-actions { flex-direction: column; }

.designer-shell { display: flex; flex-direction: column; gap: 16px; }
.designer-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.designer-toolbar-title h1 { margin:0; font-size:26px; }
.designer-toolbar-stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.designer-mini-stat { padding:8px 12px; border-radius:999px; background:#f7f9fc; border:1px solid var(--line); color:var(--muted); font-size:12px; }
.designer-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.designer-panel { position: sticky; top: 88px; }
.designer-center { min-width: 0; }
.designer-canvas-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.designer-canvas-wrap { overflow: auto; padding: 12px; background: linear-gradient(180deg, #eef2f7, #e8edf5); border-radius: 16px; }
.designer-canvas {
    position: relative;
    width: 794px;
    height: 1123px;
    border: 1px solid #bfc9d8;
    background-color: #fff;
    background-image:
        linear-gradient(#eef2f7 1px, transparent 1px),
        linear-gradient(90deg, #eef2f7 1px, transparent 1px);
    background-size: 20px 20px;
}
.designer-canvas.no-grid { background-image:none; }
.field-library { display: flex; flex-direction: column; gap: 10px; max-height: 540px; overflow: auto; }
.field-card { width: 100%; text-align: left; border: 1px solid #dbe3f0; background: #f9fbff; border-radius: 14px; padding: 12px; cursor: pointer; transition: .18s ease; }
.field-card:hover, .field-card.active { border-color: #2b5cff; background: #eef3ff; box-shadow: 0 8px 20px rgba(43,92,255,.10); }
.field-card-title { display: block; font-weight: 700; color: #213043; margin-bottom: 4px; }
.field-card-meta { display: block; color: #66758a; font-size: 12px; }
.designer-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid #2b5cff;
    background: #f8faff;
    border-radius: 10px;
    cursor: move;
    overflow: hidden;
    user-select: none;
    white-space: pre-wrap;
    box-shadow: 0 8px 18px rgba(43,92,255,.08);
    transition: box-shadow .16s ease, transform .16s ease;
}
.designer-item-title { font-size: 10px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #66758a; }
.designer-item-value { font-size: 12px; color: #213043; line-height: 1.25; }
.designer-item.selected { border-color: #ff5b2e; box-shadow: 0 0 0 3px rgba(255,91,46,.16), 0 14px 24px rgba(31,42,68,.10); z-index: 20; }
.designer-item.just-added { animation: pulseAdd 1.4s ease; }
.designer-item-resize { position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; border-radius:6px 0 10px 0; background:linear-gradient(135deg, #ff8b2b, #ff5b2e); cursor:nwse-resize; box-shadow:0 4px 10px rgba(255,91,46,.26); }
.designer-guide { position:absolute; background:rgba(255,91,46,.45); pointer-events:none; }
.designer-guide-v { width:1px; top:0; bottom:0; }
.designer-guide-h { height:1px; left:0; right:0; }
.designer-error { background: #fff0ef; border-color: #f3b0ad; color: #a7332f; }
.designer-shortcut-list { margin:0; padding-left:18px; color:var(--muted); }
.designer-shortcut-list li { margin-bottom:4px; }

@keyframes pulseAdd {
    0% { transform: scale(.98); box-shadow: 0 0 0 0 rgba(43,92,255,.24); }
    40% { transform: scale(1.01); box-shadow: 0 0 0 8px rgba(43,92,255,.14); }
    100% { transform: scale(1); box-shadow: 0 8px 18px rgba(43,92,255,.08); }
}

@media (max-width: 1200px) {
    .designer-grid { grid-template-columns: 1fr; }
    .designer-panel { position: static; }
    .designer-toolbar { flex-direction:column; }
}


.designer-toolbar-groups { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.toolbar-group { display:flex; gap:8px; flex-wrap:wrap; }
.designer-mini-stat.is-active { background:#eef3ff; border-color:#c6d4ff; color:#1d47d4; }
.designer-item.multi-selected { border-color:#2b5cff; box-shadow:0 0 0 3px rgba(43,92,255,.14), 0 14px 24px rgba(31,42,68,.08); }
.designer-item.primary-selected { border-color:#ff5b2e; box-shadow:0 0 0 3px rgba(255,91,46,.16), 0 14px 24px rgba(31,42,68,.10); z-index:30; }
.designer-selection-banner { margin-top:10px; padding:10px 12px; background:#fff8ef; border:1px solid #ffd6b0; border-radius:12px; color:#925116; font-size:13px; }
@media (max-width: 1200px) {
    .designer-toolbar-groups { width:100%; }
}


/* Advanced designer pack */
.designer-shell-advanced { gap: 18px; }
.designer-toolbar-advanced { gap: 18px; }
.toolbar-pro-groups { justify-content: flex-end; }
.toolbar-group-main, .toolbar-group-zoom, .toolbar-group-nav { align-items: center; }
.toolbar-dropdown { position: relative; }
.toolbar-dropdown summary { list-style: none; }
.toolbar-dropdown summary::-webkit-details-marker { display: none; }
.toolbar-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 30px rgba(31,42,68,.12); display: grid; gap: 8px; z-index: 50; }
.toolbar-dropdown-action { width: 100%; justify-content: flex-start; }
.zoom-btn.is-active { background: #eef3ff; border-color: #c6d4ff; color: #1d47d4; }
.designer-grid-advanced { grid-template-columns: 290px minmax(0, 1fr) 360px; }
.designer-center-advanced { overflow: hidden; }
.designer-canvas-header-advanced { margin-bottom: 14px; }
.designer-canvas-header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.designer-stage-shell { overflow: auto; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #edf2f8, #e7edf5); }
.designer-ruler-top-wrap { display: flex; align-items: stretch; }
.designer-ruler-corner { width: 40px; min-width: 40px; border: 1px solid #d7dfec; border-right: none; background: linear-gradient(180deg, #f9fbff, #eef3fb); border-radius: 12px 0 0 0; }
.designer-ruler { position: relative; background: linear-gradient(180deg, #f9fbff, #eef3fb); border: 1px solid #d7dfec; }
.designer-ruler-horizontal { height: 40px; border-radius: 0 12px 0 0; }
.designer-ruler-vertical { width: 40px; min-width: 40px; border-top: none; border-radius: 0 0 0 12px; }
.designer-stage-row { display: flex; align-items: flex-start; }
.designer-stage-viewport { overflow: auto; flex: 1; padding: 0; border: 1px solid #d7dfec; border-left: none; background: rgba(255,255,255,.45); border-radius: 0 0 12px 0; }
.designer-stage-host { position: relative; margin: 0; }
.designer-canvas-pro { transform-origin: top left; border: 1px solid #bfc9d8; background-color: #fff; box-shadow: 0 18px 36px rgba(31,42,68,.10); overflow: hidden; }
.designer-ruler-tick { position: absolute; bottom: 0; width: 1px; height: 10px; background: #95a3ba; }
.designer-ruler-tick.major { height: 18px; background: #66758a; }
.designer-ruler-tick.vertical { left: auto; right: 0; width: 10px; height: 1px; }
.designer-ruler-tick.vertical.major { width: 18px; }
.designer-ruler-label { position: absolute; top: 2px; font-size: 10px; color: #66758a; }
.designer-ruler-label.vertical { left: 2px; transform-origin: left top; }
.designer-reference-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.designer-guide { position:absolute; background: rgba(255,91,46,.75); pointer-events:auto; z-index:3; }
.designer-guide-v { width: 1px; top: 0; bottom: 0; cursor: ew-resize; }
.designer-guide-h { height: 1px; left: 0; right: 0; cursor: ns-resize; }
.designer-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.designer-tab { border:1px solid var(--line); background:#f7f9fc; color:var(--muted); padding:8px 14px; border-radius:999px; cursor:pointer; }
.designer-tab.is-active { background:#eef3ff; border-color:#c6d4ff; color:#1d47d4; font-weight:600; }
.designer-tab-panel { display:none; }
.designer-tab-panel.is-active { display:block; }
.designer-checks-column { flex-direction: column; align-items: flex-start; gap: 8px; }
.form-control-color { padding: 4px; min-height: 42px; }
.reference-preview-box { padding: 14px; border: 1px dashed #cfd8e7; border-radius: 14px; background: #fafcff; }
.reference-preview-thumb { width: 100%; max-height: 180px; margin-bottom: 10px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius: 12px; border:1px solid #dbe3f0; background:#fff; }
.reference-preview-thumb img { max-width: 100%; max-height: 180px; object-fit: contain; }
.layers-list { display:grid; gap:10px; max-height: 580px; overflow:auto; }
.layer-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid #dbe3f0; border-radius:14px; background:#f9fbff; }
.layer-row.is-selected { border-color:#2b5cff; background:#eef3ff; }
.layer-main { flex:1; text-align:left; border:none; background:transparent; color:#213043; font-weight:600; cursor:pointer; }
.layer-actions { display:flex; gap:6px; }
.btn-xs { min-height: 34px; padding: 0 10px; font-size: 12px; border-radius: 10px; }
.designer-item { background: #ffffff; border-width: 2px; border-style: solid; box-shadow: 0 10px 24px rgba(43,92,255,.12); }
.designer-item-title { color: #5b6780; }
.designer-item-value { color: #1f2b3d; font-weight: 500; }
@media (max-width: 1400px) {
    .designer-grid-advanced { grid-template-columns: 1fr; }
    .designer-panel { position: static; }
}

/* Product table and ready reference pack */
.ready-reference-box { padding: 14px; border: 1px solid #dbe3f0; border-radius: 14px; background: #f9fbff; }
.table-designer-box { display: none; }
.table-column-list { display: grid; gap: 10px; }
.table-column-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(120px, 1.2fr) 80px 96px 58px; gap: 8px; align-items: center; padding: 10px; border: 1px solid #dbe3f0; border-radius: 14px; background: #f9fbff; }
.designer-item-table { padding: 0; justify-content: stretch; }
.designer-mini-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; background: #fff; }
.designer-mini-table th, .designer-mini-table td { border: 1px solid rgba(33,48,67,.22); padding: 5px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.designer-mini-table th { background: #eef3ff; color: #1d47d4; font-weight: 700; }
.designer-mini-table td { color: #66758a; }
@media (max-width: 900px) {
    .table-column-row { grid-template-columns: 1fr; }
}


/* Real output pack */
.designer-item-output { align-items: stretch; justify-content: center; }
.designer-output-title { font-size: 11px; font-weight: 800; color: #43526a; text-align: center; margin-bottom: 4px; }
.designer-mini-totals { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 11px; align-items: center; }
.designer-mini-totals span { color: #66758a; }
.designer-mini-totals strong { color: #213043; }
.designer-qr-mini { width: 54px; height: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-self: center; margin: 0 auto 4px; padding: 5px; border: 1px solid #213043; background: #fff; }
.designer-qr-mini span:nth-child(odd), .designer-qr-mini span:nth-child(4), .designer-qr-mini span:nth-child(8) { background:#213043; }
.designer-barcode-mini { width: 90%; height: 34px; margin: 0 auto 6px; background: repeating-linear-gradient(90deg,#213043 0 2px,transparent 2px 5px,#213043 5px 7px,transparent 7px 12px); }
.designer-signature-mini { height: 100%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; border-bottom: 1px solid #9aa7bb; color:#66758a; }
.designer-stamp-mini { width: min(92px, 100%); height: min(92px, 100%); margin:auto; display:flex; align-items:center; justify-content:center; border:2px dashed #9aa7bb; border-radius:999px; font-weight:800; letter-spacing:.12em; color:#66758a; }