/* Bootstrap 5.3 lo phần nền tảng (form, nút, accordion có chuyển động, sáng tối, trợ năng); dưới đây là bố cục và vài thành phần riêng */
:root,[data-bs-theme]{--bs-body-font-family:'UK Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--bs-body-font-size:.875rem;
  --display:'UK Brico',system-ui,sans-serif;--mono:'UK Mono',ui-monospace,Menlo,Consolas,monospace;--brand:#D7263D;--stage:#ECE8E1;--panel:#FFFFFF;--page:#F6F4F0}
[data-bs-theme=dark]{--stage:#0E0C0D;--panel:#1A1A1D;--page:#121214;--brand:#FF6B6B}
body{margin:0;background:var(--page)}
.app{display:grid;grid-template-columns:40% 60%;min-height:100vh;min-height:100dvh}
.panel{height:100vh;height:100dvh;overflow-y:auto;position:sticky;top:0;padding:20px 22px 40px;padding-left:max(22px,env(safe-area-inset-left,0px));border-right:1px solid var(--bs-border-color);background:var(--panel);scrollbar-gutter:stable}
.panel header h1{font-family:var(--display);font-weight:800;font-stretch:80%;font-size:1.7rem;line-height:1;margin:0 0 4px;text-transform:uppercase;letter-spacing:-.01em}
.panel header p{margin:0 0 14px;color:var(--bs-secondary-color)}
/* accordion */
.accordion{--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-radius:.6rem;--bs-accordion-inner-border-radius:calc(.6rem - 1px);
  --bs-accordion-btn-padding-y:.8rem;--bs-accordion-btn-padding-x:1rem;--bs-accordion-btn-bg:var(--bs-secondary-bg);--bs-accordion-btn-color:var(--bs-emphasis-color);
  --bs-accordion-active-bg:var(--bs-emphasis-color);--bs-accordion-active-color:var(--bs-body-bg);--bs-accordion-btn-focus-box-shadow:0 0 0 .25rem rgba(215,38,61,.3);
  --bs-accordion-body-padding-x:1rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-bg:var(--panel);display:flex;flex-direction:column;gap:8px}
.accordion-item{border:1px solid var(--bs-border-color)!important;border-radius:var(--bs-accordion-border-radius)!important;overflow:hidden}
.accordion-button{font-size:.98rem;font-weight:600;transition:background-color .2s ease,color .2s ease}
.accordion-button:hover{filter:brightness(.96)}
[data-bs-theme=dark] .accordion-button:hover{filter:brightness(1.15)}
.accordion-button::after{background-image:none!important;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") center/contain no-repeat}
.collapsing{transition:height .32s cubic-bezier(.22,.8,.24,1)}
@media (prefers-reduced-motion:reduce){.collapsing,.accordion-button,.accordion-button::after{transition:none!important}}
.sec-body{display:flex;flex-direction:column;gap:14px}
/* trường nhập */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>.form-label,.field>label{margin:0;font-size:.82rem;font-weight:600;color:var(--bs-secondary-color)}
.field>label span{font-weight:500;color:var(--bs-emphasis-color);font-variant-numeric:tabular-nums}
.form-text{margin:0;font-size:.8rem;line-height:1.4}
.form-check{margin:0;min-height:0}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus,.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(215,38,61,.22)}
.form-range::-webkit-slider-thumb{background:var(--bs-emphasis-color)}
.form-range::-moz-range-thumb{background:var(--bs-emphasis-color)}
.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--bs-body-bg),0 0 0 .25rem rgba(215,38,61,.3)}
.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px var(--bs-body-bg),0 0 0 .25rem rgba(215,38,61,.3)}
input.hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f36,#fc3,#6c3,#3cf,#93f,#f36)}
input.hue::-moz-range-track{background:linear-gradient(90deg,#f36,#fc3,#6c3,#3cf,#93f,#f36)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-s{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.grp{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px dashed var(--bs-border-color)}
.gh{font-size:.88rem;font-weight:600;color:var(--bs-emphasis-color)}
.inline{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.note{font-size:.8rem;color:var(--bs-secondary-color);background:var(--bs-tertiary-bg);border-radius:var(--bs-border-radius);padding:8px 10px}
.perNote{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--bs-secondary-color);background:var(--bs-tertiary-bg);border-radius:var(--bs-border-radius);padding:6px 6px 6px 10px}
.perNote b{color:var(--bs-emphasis-color);font-weight:600}
/* chip chọn */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{appearance:none;display:inline-flex;align-items:center;padding:.36rem .66rem;font:500 .84rem/1.2 var(--bs-body-font-family);color:var(--bs-body-color);background:transparent;
  border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.chip:hover{background:var(--bs-tertiary-bg);border-color:var(--bs-secondary-color)}
.chip:focus-visible,.sw:focus-visible,.upload:focus-within{outline:0;box-shadow:0 0 0 .2rem rgba(215,38,61,.35)}
.chip[aria-pressed="true"]{background:var(--bs-emphasis-color);border-color:var(--bs-emphasis-color);color:var(--bs-body-bg)}
.chip[disabled]{opacity:.4;cursor:not-allowed}
.chip .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.cpick{flex:1 0 100%;display:flex;gap:8px;align-items:center;margin-top:4px}
.cpick .form-control-color{width:44px;height:32px;padding:2px;flex:0 0 auto}
.cpick .form-control{width:120px;flex:0 0 auto;font-family:var(--mono);text-transform:uppercase}
/* bảng màu */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{appearance:none;padding:0;border:0;border-radius:10px;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--bs-secondary-color);font:500 .74rem/1.2 var(--bs-body-font-family)}
.sw canvas{width:60px;height:42px;border-radius:8px;display:block}
.sw[aria-pressed="true"]{color:var(--bs-emphasis-color)}
.sw[aria-pressed="true"] canvas{outline:2px solid var(--bs-emphasis-color);outline-offset:2px}
/* ảnh tải lên, kéo thả */
.files{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.files:empty{display:none}
.thumb{position:relative;width:48px;height:48px;border-radius:8px;background:var(--bs-tertiary-bg) center/contain no-repeat;border:1px solid var(--bs-border-color)}
.thumb button{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:0;padding:0;background:var(--bs-emphasis-color);color:var(--bs-body-bg);font:700 12px/20px var(--bs-body-font-family);cursor:pointer}
.upload{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--bs-border-color);border-radius:var(--bs-border-radius);padding:.7rem .9rem;cursor:pointer;font-size:.86rem;font-weight:500;color:var(--bs-secondary-color);text-align:center;transition:border-color .15s,background-color .15s}
.upload:hover,.upload.over{border-color:var(--brand);color:var(--bs-emphasis-color);background:var(--bs-tertiary-bg)}
.upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload small{font-weight:400;opacity:.8}
/* khung xem trước */
.stage{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:20px 24px;padding-right:max(24px,env(safe-area-inset-right,0px));min-width:0}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.meta-bar{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;color:var(--bs-secondary-color);font-size:.82rem}
.meta-bar .size{font-family:var(--mono);font-variant-numeric:tabular-nums}
.canvas-box{flex:1 1 auto;min-height:0;background:var(--stage);border-radius:12px;padding:20px;display:flex;align-items:center;justify-content:center}
.canvas-box canvas{display:block;max-width:100%;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);box-shadow:0 18px 50px rgba(0,0,0,.18);border-radius:3px;touch-action:none}
.canvas-box canvas.grab{cursor:grab}
.canvas-box canvas.grabbing{cursor:grabbing}
.canvas-box.over{outline:2px dashed var(--brand);outline-offset:-8px}
.stage-tip{font-size:.8rem;color:var(--bs-secondary-color);margin:-4px 0 0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.status{font-size:.82rem;color:var(--bs-secondary-color);min-height:1.4em}
.status.err{color:var(--bs-danger)}
.btn-brand{--bs-btn-color:#fff;--bs-btn-bg:#C62828;--bs-btn-border-color:#C62828;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#A61F1F;--bs-btn-hover-border-color:#A61F1F;--bs-btn-active-bg:#8E1A1A;--bs-btn-active-border-color:#8E1A1A;--bs-btn-focus-shadow-rgb:198,40,40;--bs-btn-disabled-bg:#C62828;--bs-btn-disabled-border-color:#C62828}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .panel{height:auto;position:static;overflow:visible;border-right:0;padding:16px}
  .stage{position:static;height:auto;order:-1;padding:16px}
  .canvas-box{padding:12px}
  .canvas-box canvas{max-height:60vh}
}