body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #1e1e1e; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
        
        .no-scrollbar::-webkit-scrollbar { width: 6px; }
        .no-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .no-scrollbar::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 10px; }
        
        input[type=number] { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
        input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=color] { cursor: pointer; border: none; padding: 0; }
        input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
        input[type=color]::-webkit-color-swatch { border: 1px solid #3e3e42; border-radius: 4px; }
        
        .canvas-container { width: 100%; height: 100%; cursor: grab; }
        .canvas-container:active { cursor: grabbing; }

        .glass-panel { background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); }
        
        /* 拖拽条的交互区域放大，防止拖拽时丢帧 */
        .resizer-hitbox { position: absolute; left: -5px; right: -5px; top: 0; bottom: 0; cursor: col-resize; z-index: 50; }

        body.light-mode, html.light-mode { background-color: #f4f7fb !important; color: #111827 !important; }
        body.light-mode [class*="bg-[#1e1e1e]"],
        body.light-mode [class*="bg-[#252526]"],
        body.light-mode [class*="bg-[#2d2d30]"],
        body.light-mode [class*="bg-[#333333]"] { background-color: #ffffff !important; }
        body.light-mode [class*="bg-[#3e3e42]"] { background-color: #e2e8f0 !important; }
        body.light-mode [class*="border-[#3e3e42]"] { border-color: #cbd5e1 !important; }
        body.light-mode [class*="border-[#4b5563]"] { border-color: #94a3b8 !important; }
        body.light-mode .text-gray-100,
        body.light-mode .text-gray-200,
        body.light-mode .text-gray-300,
        body.light-mode .text-gray-400,
        body.light-mode .text-gray-500,
        body.light-mode .text-gray-600,
        body.light-mode .text-white { color: #111827 !important; }
        body.light-mode [class*="text-[#4fc1ff]"] { color: #075985 !important; }
        body.light-mode [class*="text-[#10b981]"] { color: #047857 !important; }
        body.light-mode [class*="text-[#dcdcaa]"] { color: #854d0e !important; }
        body.light-mode [class*="text-[#ce9178]"] { color: #9a3412 !important; }
        body.light-mode [class*="text-[#b5cea8]"] { color: #166534 !important; }
        body.light-mode #tab-single[class*="bg-[#0e639c]"],
        body.light-mode #tab-multi[class*="bg-[#d97706]"],
        body.light-mode #tab-advanced[class*="bg-[#7c3aed]"],
        body.light-mode [class*="bg-[#0e639c]"][class*="text-white"],
        body.light-mode [class*="bg-[#d97706]"][class*="text-white"],
        body.light-mode [class*="bg-[#7c3aed]"][class*="text-white"],
        body.light-mode button[class*="bg-[#0e639c]"],
        body.light-mode button[class*="bg-[#d97706]"],
        body.light-mode button[class*="bg-[#7c3aed]"] { color: #ffffff !important; }
        body.light-mode button[class*="bg-[#3e3e42]"],
        body.light-mode button[class*="hover:bg-red"] { color: #111827 !important; }
        body.light-mode input,
        body.light-mode select,
        body.light-mode textarea {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #111827 !important;
        }
        body.light-mode input[readonly] { background-color: #f1f5f9 !important; color: #475569 !important; }
        body.light-mode .glass-panel { background: rgba(255, 255, 255, 0.94); border-color: rgba(148, 163, 184, 0.65); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }
        body.light-mode .no-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; }
        body.light-mode canvas { background-color: #ffffff !important; }

        .view-title-wrap { left: 16px; right: 16px; }
    

/* 上线发布信息栏 */
.release-footer { border-top: 1px solid #3e3e42; background: #202124; padding: 10px 12px; font-size: 11px; line-height: 1.55; color: #9ca3af; }
.release-footer a { color: #60a5fa; text-decoration: none; }
.release-footer a:hover { color: #93c5fd; text-decoration: underline; }
.release-footer .release-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.release-footer .release-action-btn { border: 1px solid #3e3e42; border-radius: 6px; background: #2d2d30; color: #e5e7eb; padding: 6px 8px; cursor: pointer; font-size: 12px; transition: background .15s ease, border-color .15s ease; }
.release-footer .release-action-btn:hover { background: #3e3e42; border-color: #64748b; }
.release-footer .privacy-note { color: #10b981; font-weight: 600; margin-top: 4px; }
.release-footer .autosave-note { color: #dcdcaa; margin-top: 4px; }
body.light-mode .release-footer { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
body.light-mode .release-footer .release-action-btn { background: #ffffff; border-color: #cbd5e1; color: #111827; }
body.light-mode .release-footer .release-action-btn:hover { background: #e2e8f0; }
body.light-mode .release-footer .privacy-note { color: #047857; }
body.light-mode .release-footer .autosave-note { color: #854d0e; }

/* Local Tailwind utility subset. Generated for this static release; no external Tailwind CDN required. */
*{box-sizing:border-box} body{display:flex}.hidden{display:none!important}.topbar-actions{gap:6px}.topbar-action{height:24px;min-width:42px;border:1px solid #4b5563;border-radius:4px;background:#3e3e42;color:#f3f4f6;padding:2px 7px;font-size:11px;font-weight:600;line-height:18px;white-space:nowrap;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 1px 2px rgba(0,0,0,.24);transition:background .15s ease,border-color .15s ease,color .15s ease}.topbar-action:hover{background:#4b5563;border-color:#64748b;color:#fff}.release-action-btn{border:1px solid #3e3e42;border-radius:6px;background:#3e3e42;color:#e5e7eb;padding:4px 8px;font-size:12px;cursor:pointer;transition:background .15s ease,color .15s ease}.release-action-btn:hover{background:#4b5563;color:#fff}header h1{max-width:170px;line-height:1.25}.feedback-modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.52);padding:18px}.feedback-modal-overlay.hidden{display:none!important}.feedback-modal{width:460px;max-width:calc(100vw - 36px);background:#252526;border:1px solid #4b5563;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.48);color:#e5e7eb;padding:18px 20px 16px;font-size:13px;line-height:1.65}.feedback-modal a{color:#7dd3fc;text-decoration:none;font-weight:700}.feedback-modal a:hover{text-decoration:underline}.feedback-modal-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:4px}.feedback-modal-author{color:#dcdcaa;font-weight:700;margin-bottom:10px}.feedback-modal-line{margin-top:8px;color:#d1d5db}.feedback-modal-actions{display:flex;justify-content:flex-end;margin-top:16px}.feedback-ok-btn{min-width:74px;height:28px;border:1px solid #0e639c;border-radius:4px;background:#0e639c;color:#fff;font-size:12px;font-weight:700;cursor:pointer}.feedback-ok-btn:hover{background:#1177bb}.release-footer{display:none!important}body:not(.light-mode) .text-gray-500,body:not(.light-mode) .text-gray-600{color:#aeb8c5!important}body:not(.light-mode) label,body:not(.light-mode) .text-gray-400{color:#b8c0cc}body:not(.light-mode) input,body:not(.light-mode) select,body:not(.light-mode) textarea{background-color:#1e1e1e!important;border-color:#3e3e42!important;color:#e5e7eb!important;caret-color:#fff}body:not(.light-mode) input[readonly]{color:#aeb8c5!important}body:not(.light-mode) input::placeholder,body:not(.light-mode) textarea::placeholder{color:#8b95a3!important}body:not(.light-mode) option{background-color:#1e1e1e;color:#e5e7eb}body:not(.light-mode) input[type="number"],body:not(.light-mode) input[type="text"]{-webkit-text-fill-color:#e5e7eb}body.light-mode .feedback-modal{background:#fff;border-color:#cbd5e1;color:#111827;box-shadow:0 24px 70px rgba(15,23,42,.22)}body.light-mode .feedback-modal-title{color:#111827}body.light-mode .feedback-modal-author{color:#854d0e}body.light-mode .feedback-modal-line{color:#334155}body.light-mode .topbar-action{background:#e2e8f0;color:#111827;border-color:#cbd5e1;box-shadow:none}body.light-mode .topbar-action:hover{background:#cbd5e1}
@keyframes tw-spin{to{transform:rotate(360deg)}}
.flex{display:flex}
.text-gray-200{color:#e5e7eb}
.w-\[420px\]{width:420px}
.h-full{height:100%}
.bg-\[\#252526\]{background-color:#252526}
.border-r{border-right-width:1px;border-right-style:solid}
.border-\[\#3e3e42\]{border-color:#3e3e42}
.flex-col{flex-direction:column}
.z-50{z-index:50}
.shrink-0{flex-shrink:0}
.h-14{height:3.5rem}
.bg-\[\#333333\]{background-color:#333333}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.px-4{padding-left:1rem;padding-right:1rem}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.z-10{z-index:10}
.w-5{width:1.25rem}
.h-5{height:1.25rem}
.text-blue-400{color:#60a5fa}
.mr-2{margin-right:0.5rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.font-semibold{font-weight:600}
.tracking-wide{letter-spacing:.025em}
.text-white{color:#fff}
.gap-2{gap:0.5rem}
.text-xs{font-size:.75rem;line-height:1rem}
.bg-\[\#3e3e42\]{background-color:#3e3e42}
.hover\:bg-\[\#4b5563\]:hover{background-color:#4b5563}
.hover\:text-white:hover{color:#fff}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.rounded{border-radius:.25rem}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s}
.hover\:bg-red-600:hover{background-color:#dc2626}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.bg-\[\#1e1e1e\]{background-color:#1e1e1e}
.flex-1{flex:1 1 0%}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.font-bold{font-weight:700}
.bg-\[\#0e639c\]{background-color:#0e639c}
.text-gray-400{color:#9ca3af}
.p-4{padding:1rem}
.bg-\[\#2d2d30\]{background-color:#2d2d30}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.mb-3{margin-bottom:0.75rem}
.uppercase{text-transform:uppercase}
.tracking-wider{letter-spacing:.05em}
.w-4{width:1rem}
.h-4{height:1rem}
.mr-1{margin-right:0.25rem}
.text-\[\#4b5563\]{color:#4b5563}
.w-full{width:100%}
.border{border-width:1px;border-style:solid}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.focus\:border-\[\#4b5563\]:focus{border-color:#4b5563}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.grid{display:grid}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.block{display:block}
.text-\[10px\]{font-size:10px}
.text-gray-500{color:#6b7280}
.mb-1{margin-bottom:0.25rem}
.overflow-y-auto{overflow-y:auto}
.relative{position:relative}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}
.justify-center{justify-content:center}
.rounded-sm{border-radius:.125rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:0.75rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt-2{padding-top:0.5rem}
.border-t{border-top-width:1px;border-top-style:solid}
.bg-\[\#d97706\]{background-color:#d97706}
.pt-3{padding-top:0.75rem}
.pb-1{padding-bottom:0.25rem}
.text-\[11px\]{font-size:11px}
.whitespace-nowrap{white-space:nowrap}
.w-16{width:4rem}
.ml-1{margin-left:0.25rem}
.border-\[\#d97706\]{border-color:#d97706}
.p-2\.5{padding:0.625rem}
.shadow-\[0_0_8px_rgba\(217\,119\,6\,0\.15\)\]{box-shadow:0 0 8px rgba(217,119,6,0.15)}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}
.text-\[\#d97706\]{color:#d97706}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-\[\#dcdcaa\]{color:#dcdcaa}
.text-\[\#10b981\]{color:#10b981}
.font-normal{font-weight:400}
.p-2{padding:0.5rem}
.text-base{font-size:1rem;line-height:1.5rem}
.border-\[\#0e639c\]{border-color:#0e639c}
.shadow-\[0_0_10px_rgba\(14\,99\,156\,0\.2\)\]{box-shadow:0 0 10px rgba(14,99,156,0.2)}
.text-\[\#4fc1ff\]{color:#4fc1ff}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.mb-4{margin-bottom:1rem}
.p-3{padding:0.75rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.cursor-pointer{cursor:pointer}
.select-none{user-select:none}
.text-gray-300{color:#d1d5db}
.accent-\[\#0e639c\]{accent-color:#0e639c}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.hidden{display:none!important}
.pb-72{padding-bottom:18rem}
.sticky{position:sticky}
.top-0{top:0}
.z-30{z-index:30}
.-mx-4{margin-left:-1rem;margin-right:-1rem}
.-mt-4{margin-top:-1rem}
.bg-\[\#10b981\]{background-color:#10b981}
.hover\:bg-\[\#1177bb\]:hover{background-color:#1177bb}
.fixed{position:fixed}
.bottom-0{bottom:0}
.left-0{left:0}
.shadow-\[0_-10px_20px_rgba\(0\,0\,0\,0\.5\)\]{box-shadow:0 -10px 20px rgba(0,0,0,0.5)}
.z-20{z-index:20}
.hover\:bg-\[\#f59e0b\]:hover{background-color:#f59e0b}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.mt-3{margin-top:0.75rem}
.mb-2{margin-bottom:0.5rem}
.text-right{text-align:right}
.my-1{margin-top:0.25rem;margin-bottom:0.25rem}
.text-red-400{color:#f87171}
.pb-48{padding-bottom:12rem}
.bg-\[\#7c3aed\]{background-color:#7c3aed}
.hover\:bg-\[\#059669\]:hover{background-color:#059669}
.accent-\[\#7c3aed\]{accent-color:#7c3aed}
.hover\:bg-\[\#8b5cf6\]:hover{background-color:#8b5cf6}
.min-w-0{min-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:0.25rem}
.gap-x-3{column-gap:0.75rem}
.gap-y-1{row-gap:0.25rem}
.leading-relaxed{line-height:1.625}
.flex-row{flex-direction:row}
.overflow-hidden{overflow:hidden}
.absolute{position:absolute}
.top-4{top:1rem}
.justify-start{justify-content:flex-start}
.pointer-events-none{pointer-events:none}
.transition-all{transition-property:all;transition-duration:.15s}
.max-w-full{max-width:100%}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.bottom-6{bottom:1.5rem}
.left-6{left:1.5rem}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.mb-1\.5{margin-bottom:0.375rem}
.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}
.gap-x-2{column-gap:0.5rem}
.text-gray-100{color:#f3f4f6}
.text-\[\#ce9178\]{color:#ce9178}
.text-\[\#b5cea8\]{color:#b5cea8}
.inset-0{inset:0}
.w-1\.5{width:0.375rem}
.hover\:w-2:hover{width:.5rem}
.hover\:bg-\[\#0e639c\]:hover{background-color:#0e639c}
.z-40{z-index:40}
.h-10{height:2.5rem}
.w-\[2px\]{width:2px}
.bg-\[\#666666\]{background-color:#666666}
.group:hover .group-hover\:bg-white{background-color:#fff}
.rounded-full{border-radius:9999px}
.w-px{width:1px}
.mx-3{margin-left:0.75rem;margin-right:0.75rem}
.font-medium{font-weight:500}
.transform{transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0))}
.rotate-180{--tw-rotate:180deg;transform:rotate(180deg)}
.transition-transform{transition-property:transform;transition-duration:.15s}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-1\.5{gap:0.375rem}
.text-\[9px\]{font-size:9px}
.mb-0\.5{margin-bottom:0.125rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.text-\[8px\]{font-size:8px}
.text-gray-600{color:#4b5563}
.mt-0\.5{margin-top:0.125rem}
.leading-tight{line-height:1.25}
.items-start{align-items:flex-start}
.w-3{width:0.75rem}
.h-3{height:0.75rem}
.bg-transparent{background-color:transparent}
.border-transparent{border-color:transparent}
.hover\:border-\[\#4b5563\]:hover{border-color:#4b5563}
.focus\:border-\[\#4fc1ff\]:focus{border-color:#4fc1ff}
.focus\:text-white:focus{color:#fff}
.w-36{width:9rem}
.pb-0\.5{padding-bottom:0.125rem}
.ml-2{margin-left:0.5rem}
.hover\:bg-\[\#d97706\]:hover{background-color:#d97706}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.hover\:text-red-400:hover{color:#f87171}
.hover\:bg-\[\#7c3aed\]:hover{background-color:#7c3aed}
.animate-spin{animation:tw-spin 1s linear infinite}
.opacity-25{opacity:.25}
.opacity-75{opacity:.75}
.bg-\[\#252526\]\/90{background-color:rgba(37,37,38,.9)}
.backdrop-blur{backdrop-filter:blur(8px)}
.-translate-x-1\/2{--tw-translate-x:-50%}
.-translate-y-full{--tw-translate-y:-100%}
.text-center{text-align:center}

/* Dark-mode form readability fix for dynamically generated product cards. */
html:not(.light-mode) #multi-product-list input,
html:not(.light-mode) #multi-product-list select,
html:not(.light-mode) #multi-product-list textarea,
html:not(.light-mode) #advanced-product-list input,
html:not(.light-mode) #advanced-product-list select,
html:not(.light-mode) #advanced-product-list textarea,
body:not(.light-mode) #multi-product-list input,
body:not(.light-mode) #multi-product-list select,
body:not(.light-mode) #multi-product-list textarea,
body:not(.light-mode) #advanced-product-list input,
body:not(.light-mode) #advanced-product-list select,
body:not(.light-mode) #advanced-product-list textarea{
  color:#e5e7eb!important;
  -webkit-text-fill-color:#e5e7eb!important;
  background-color:#1e1e1e!important;
  border-color:#3e3e42!important;
  caret-color:#ffffff!important;
}
html:not(.light-mode) #multi-product-list input[type="number"],
html:not(.light-mode) #advanced-product-list input[type="number"],
body:not(.light-mode) #multi-product-list input[type="number"],
body:not(.light-mode) #advanced-product-list input[type="number"]{
  color:#e5e7eb!important;
  -webkit-text-fill-color:#e5e7eb!important;
}

/* Product-list action buttons: softer shape, smaller delete target, readable light mode. */
button[onclick="toggleAllMultiProducts()"],
button[onclick="addMultiProduct()"],
button[onclick="toggleAllAdvancedProducts()"],
button[onclick="addAdvancedProduct()"]{
  border-radius:7px!important;
  min-height:30px;
  line-height:18px;
}
button[onclick^="clearMultiProduct("],
button[onclick^="clearAdvancedProduct("]{
  border-radius:5px!important;
  border:1px solid #4b5563!important;
  background:#3e3e42!important;
  color:#e5e7eb!important;
  font-weight:600;
  line-height:16px;
}
body.light-mode button[onclick^="clearMultiProduct("],
body.light-mode button[onclick^="clearAdvancedProduct("],
html.light-mode button[onclick^="clearMultiProduct("],
html.light-mode button[onclick^="clearAdvancedProduct("]{
  background:#e2e8f0!important;
  border-color:#cbd5e1!important;
  color:#334155!important;
}
button[onclick^="removeMultiProduct("],
button[onclick^="removeAdvancedProduct("]{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #4b5563!important;
  border-radius:5px!important;
  background:#2d2d30!important;
  color:#cbd5e1!important;
}
button[onclick^="removeMultiProduct("] svg,
button[onclick^="removeAdvancedProduct("] svg{
  width:11px!important;
  height:11px!important;
  stroke-width:3!important;
}
button[onclick^="removeMultiProduct("]:hover,
button[onclick^="removeAdvancedProduct("]:hover{
  border-color:#ef4444!important;
  color:#ef4444!important;
  background:#3a2525!important;
}
body.light-mode button[onclick^="removeMultiProduct("],
body.light-mode button[onclick^="removeAdvancedProduct("],
html.light-mode button[onclick^="removeMultiProduct("],
html.light-mode button[onclick^="removeAdvancedProduct("]{
  background:#f8fafc!important;
  border-color:#94a3b8!important;
  color:#334155!important;
}
body.light-mode button[onclick^="removeMultiProduct("]:hover,
body.light-mode button[onclick^="removeAdvancedProduct("]:hover,
html.light-mode button[onclick^="removeMultiProduct("]:hover,
html.light-mode button[onclick^="removeAdvancedProduct("]:hover{
  background:#fee2e2!important;
  border-color:#ef4444!important;
  color:#b91c1c!important;
}
#multi-product-list button[onclick^="clearMultiProduct("],
#advanced-product-list button[onclick^="clearAdvancedProduct("]{
  background:#3e3e42!important;
  border-color:#4b5563!important;
  color:#e5e7eb!important;
}
body.light-mode #multi-product-list button[onclick^="clearMultiProduct("],
body.light-mode #advanced-product-list button[onclick^="clearAdvancedProduct("],
html.light-mode #multi-product-list button[onclick^="clearMultiProduct("],
html.light-mode #advanced-product-list button[onclick^="clearAdvancedProduct("]{
  background:#e2e8f0!important;
  border-color:#cbd5e1!important;
  color:#334155!important;
}
#mode-multi button[onclick="toggleAllMultiProducts()"],
#mode-advanced button[onclick="toggleAllAdvancedProducts()"]{
  border:1px solid #4b5563!important;
  background:#3e3e42!important;
  color:#e5e7eb!important;
}
#mode-multi button[onclick="addMultiProduct()"],
#mode-advanced button[onclick="addAdvancedProduct()"]{
  border:1px solid #0e639c!important;
}
body.light-mode #mode-multi button[onclick="toggleAllMultiProducts()"],
body.light-mode #mode-advanced button[onclick="toggleAllAdvancedProducts()"],
html.light-mode #mode-multi button[onclick="toggleAllMultiProducts()"],
html.light-mode #mode-advanced button[onclick="toggleAllAdvancedProducts()"]{
  background:#e2e8f0!important;
  border-color:#cbd5e1!important;
  color:#334155!important;
}