:root{--bg:#f4f6fb;--surface:#fff;--ink:#212941;--muted:#858b9d;--purple:#6651e5;--purple2:#7d6cf1;--line:#e7eaf2;--shade:#f5f6fa;--good:#187956;--bad:#b74840}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 3% 0%,#e8eeff 0,transparent 29%),var(--bg);color:var(--ink);font:14px/1.45 Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #aa98ff;outline-offset:2px}[hidden]{display:none!important}.topbar{min-height:72px;padding:12px clamp(16px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#ffffffd4;border-bottom:1px solid #e8eaf3}.identity{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.identity-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#8370f2,#4f37d1);box-shadow:0 6px 12px #7160ed2c}.identity strong{display:block;font-size:21px;letter-spacing:-.7px;line-height:1.14}.identity small{display:block;color:var(--muted);font-size:11px;margin-top:3px;letter-spacing:.5px}.top-tools{display:flex;gap:6px}.ghost{background:transparent;color:#6f7388;border:0;border-radius:9px;padding:11px 13px;font-size:12px}.ghost:hover{background:#eeedff;color:var(--purple)}.layout{max-width:1600px;margin:0 auto;padding:16px clamp(14px,2.6vw,38px) 32px;display:grid;grid-template-columns:minmax(300px,348px) minmax(540px,1fr);gap:16px;align-items:start}.controls,.result-card,.cross-card{background:var(--surface);border:1px solid #e8ebf2;border-radius:18px;box-shadow:0 6px 24px #1e22400a}.controls{padding:16px 20px 22px;max-height:calc(100vh - 108px);overflow:auto;scrollbar-width:thin}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#f2f3f9;border-radius:12px;padding:5px;margin:0 0 15px}.mode-switch button{background:transparent;color:#6c7087;border:0;border-radius:9px;font-size:12px;font-weight:650;padding:12px 6px;white-space:nowrap}.mode-switch button.selected{color:#fff;background:linear-gradient(105deg,#735ee9,#5840e2);box-shadow:0 4px 12px #745cee33}.control-body{display:block}.control-section{padding:13px 0 18px;border-bottom:1px solid var(--line)}.control-section:last-child{border-bottom:0}.section-title{font-weight:730;font-size:12px;display:block;margin-bottom:11px;color:#293250}.title-icon{color:var(--purple);font-weight:900;margin-right:5px}.field{display:block;color:#69748b;font-size:11px;margin-top:10px}.field label{display:block;margin-bottom:6px}.field output{float:right;font-variant-numeric:tabular-nums;color:#69748b}.control-section textarea,.control-section input[type=text],.control-section select,.cross-config input{display:block;resize:vertical;width:100%;border:1px solid #e0e4ef;border-radius:9px;padding:10px 12px;background:#fbfcff;color:#26314a;outline:0}.control-section textarea:focus,.control-section input[type=text]:focus,.cross-config input:focus,.control-section select:focus{border-color:#a99cf8;background:white}.control-section textarea{min-height:58px;line-height:1.6}.image-choice{display:flex;align-items:center;gap:10px}.image-choice img{width:64px;height:64px;object-fit:cover;border-radius:11px;border:1px solid #e7eaf1}.file-button{flex:1;display:grid;place-items:center;min-height:48px;border:1px solid #e0e4ef;border-radius:9px;color:#364064;background:#fff;cursor:pointer;font-size:12px;font-weight:620}.file-button:hover{background:#f5f2ff;border-color:#b5a9ff}.square-button{height:42px;min-width:36px;border:1px solid #e0e4ef;border-radius:9px;background:#fff;color:#6b7289;font-size:19px}.collapse{border-top:0;margin-top:12px}.collapse summary{font-size:11px;color:#767f96;cursor:pointer;user-select:none;padding:3px 0}.collapse[open] summary{margin-bottom:12px;color:var(--purple)}.two-slider label{display:block;font-size:11px;color:#69748b;margin:12px 0}.two-slider output{float:right}input[type=range]{width:100%;height:15px;accent-color:var(--purple);cursor:pointer;display:block;margin:9px 0 0}#art-crop-canvas{display:block;max-width:256px;width:100%;height:auto;border:1px solid #e9e9f0;border-radius:9px;touch-action:none;cursor:grab;user-select:none}#art-crop-canvas.dragging{cursor:grabbing}.crop-zoom{display:flex;align-items:center;gap:7px;margin:0 0 12px}.crop-zoom>span{font-size:11px;color:#69748b;white-space:nowrap}.crop-zoom input{min-width:48px;flex:1;margin:0}.crop-zoom button{height:29px;min-width:29px;border:1px solid #e0e4ef;background:#fff;border-radius:7px;color:#5648ad;font-weight:700;font-size:16px}.crop-zoom output{min-width:42px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:#596078}.crop-hint{margin:8px 0 0;font-size:10px;color:#8790a4}.theme-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.theme-chip{border:1px solid #e5e7ed;background:#fff;padding:3px;border-radius:9px;overflow:hidden}.theme-chip img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:5px}.theme-chip.active{outline:2px solid var(--purple)}.choice-grid{display:flex;gap:7px;flex-wrap:wrap}.shape-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:48px;min-height:48px;flex:1;background:#fff;border:1px solid #e1e4ef;border-radius:9px;color:#243149}.shape-choice svg{height:24px;width:24px}.shape-choice span{font-size:9px;color:#9aa1b3}.shape-choice[aria-pressed=true]{border:2px solid var(--purple);background:#f5f3ff;color:var(--purple)}
.mini-note{font-size:11px;color:#788096;margin:2px 0 10px}.hidden-ranges{display:none}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.preset-card{border:1px solid #e1e4ef;background:#fff;border-radius:10px;padding:9px 10px;text-align:left}.preset-card strong{display:block;font-size:11px;color:#2b3551}.preset-card span{display:block;font-size:10px;color:#8b93a6;margin-top:2px}.preset-swatch{display:flex;gap:4px;margin-top:8px}.preset-swatch i{display:block;flex:1;height:18px;border-radius:6px}.position-pad{display:block;width:100%;max-width:220px;height:auto;border:1px solid #e9e9f0;border-radius:10px;background:#f7f8fc;touch-action:none}.sub-actions{display:flex;gap:8px;margin-top:10px}.sub-actions .soft-button{margin-top:0}.result-title p:empty{display:none}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:#9ca3b3;margin-top:3px}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.color-grid label{font-size:10px;color:#788096}.color-grid input[type=color]{width:100%;display:block;cursor:pointer;margin-top:4px;height:36px;padding:3px;border:1px solid #e0e4ee;border-radius:9px;background:#fff}.compact{margin:12px 0}.soft-button{border:1px solid #dfdaff;background:#f1efff;color:#6451e1;border-radius:9px;padding:11px 14px;font-size:12px;font-weight:630;width:100%;margin-top:10px}.soft-button:hover{background:#e5e0ff}.segmented{display:flex;border-radius:10px;gap:4px;background:#f0f1f8;padding:4px;max-width:100%}.segmented button{flex:1;font-size:11px;padding:9px 7px;border:none;background:transparent;border-radius:8px;color:#7e8497;white-space:nowrap}.segmented button.active{color:#fff;background:var(--purple);box-shadow:0 2px 10px #6551e34a}.text-fields{margin-top:10px}.results{display:flex;flex-direction:column;gap:15px;min-width:0}.result-card{padding:20px clamp(15px,2vw,26px) 15px}.result-head,.cross-header{display:flex;align-items:center;justify-content:space-between;gap:14px}.result-title{display:flex;align-items:center;gap:12px;min-width:0}.result-symbol{display:grid;place-items:center;font-size:20px;font-weight:700;width:32px;height:32px;color:var(--purple)}.result-title h1,.result-title h2{font-size:17px;margin:0;color:#5340ce;font-weight:740}.result-title p{font-size:11px;color:#979eae;margin:4px 0 0}.download-actions{display:flex;gap:7px;align-items:center}.download-actions select{font-size:11px;padding:10px 5px;border:1px solid #e3e6f0;border-radius:8px;background:#fff;color:#485069;cursor:pointer}.download-button{background:linear-gradient(100deg,#765dec,#553dde);color:#fff;border:0;border-radius:9px;box-shadow:0 7px 18px #6251dc3d;font-size:12px;font-weight:690;padding:13px 16px;white-space:nowrap}.download-button:hover:not(:disabled){filter:brightness(1.06)}.preview-stage{position:relative;display:grid;place-items:center;min-height:min(62vh,650px);padding:14px;background:white;border-radius:13px;overflow:hidden}.preview-stage img{display:block;width:min(100%,min(60vh,580px));max-height:min(62vh,580px);height:auto;object-fit:contain;image-rendering:auto}.preview-stage #classic-preview{width:min(100%,min(60vh,580px));aspect-ratio:1;display:grid;place-items:center}.preview-stage #classic-preview svg{display:block;width:100%;height:100%;max-height:580px}.busy-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#ffffffd1;backdrop-filter:blur(3px)}.loader{width:32px;height:32px;border:3px solid #dedaff;border-top-color:#6c58e7;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:34px;margin-top:3px}.message{font-size:11px;color:#8a91a3;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message.ok{color:var(--good)}.message.fail{color:var(--bad)}.zoom-tools{display:flex;gap:6px;margin-left:auto}.pill{border:1px solid #e4e6ef;color:#788097;background:#fff;border-radius:12px;padding:7px 12px;font-size:10px}.cross-card{padding:17px 20px 20px}.short{width:225px}.cross-content{display:grid;grid-template-columns:minmax(190px,1fr) minmax(170px,.82fr);gap:16px;align-items:center;margin-top:14px}.cross-qr{width:min(100%,340px);height:auto;aspect-ratio:1;margin:auto}.cross-qr svg{width:100%;height:100%;display:block}.cross-config{background:#fafbff;border:1px solid #e8eaf2;border-radius:12px;padding:13px}.cross-config .field{margin-top:0;margin-bottom:11px}.cross-config .soft-button{margin-top:0}.top-tools .ghost{font-weight:600}@media(min-width:1400px){.layout{grid-template-columns:370px minmax(600px,1fr)}.controls{padding-left:24px;padding-right:24px}}@media(max-width:1100px){.layout{grid-template-columns:minmax(274px,315px) minmax(360px,1fr)}.result-head{align-items:flex-start;flex-wrap:wrap}.download-actions{margin-left:44px}.preview-stage{min-height:480px}.cross-content{grid-template-columns:1fr 1fr}}@media(max-width:760px){.topbar{min-height:68px;padding:12px 16px}.identity strong{font-size:19px}.top-tools .ghost{padding:7px 7px;font-size:11px}.layout{display:flex;flex-direction:column;padding:12px;gap:12px}.controls{max-height:none;width:100%}.results{width:100%;order:-1}.result-card{padding:13px}.result-head{align-items:flex-start}.download-actions{margin:0;width:100%}.download-actions select{max-width:80px}.download-button{flex:1}.preview-stage{min-height:0;padding:7px}.preview-stage img,.preview-stage #classic-preview{width:min(100%,520px);max-height:none}.cross-card{padding:12px}.cross-content{grid-template-columns:1fr}.cross-qr{max-width:240px}.cross-config{width:100%}.controls{order:2}.result-title p{display:none}}@media(max-width:400px){.identity small{display:none}.top-tools{gap:0}.top-tools .ghost{font-size:10px}.download-button{padding-left:9px;padding-right:9px}}

.preview-stage.zoomed{display:block;overflow:auto;max-height:620px;min-height:440px}.preview-stage.zoomed>img{height:1024px;width:1024px;max-width:none;max-height:none;margin:auto}.preview-stage.zoomed #classic-preview{width:1000px;height:1000px;max-width:none;max-height:none;margin:auto}.preview-stage.zoomed #classic-preview svg{max-height:none}


.check-row{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:10px;font-size:13px;color:#5d6177}
.check-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.check-row input{accent-color:var(--accent)}

.art-text-panel{display:grid;gap:11px}
.art-text-panel .segmented{width:100%}
.art-text-switch{display:flex;align-items:center;gap:8px;font-size:12px;color:#3d4564;font-weight:600;cursor:pointer}
.art-text-switch input{accent-color:#6651e5}
.art-text-tools{display:flex;align-items:center;gap:10px}
.art-text-tools label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#69748b;font-size:11px;flex:1}
.art-text-tools input[type=color]{width:48px;height:34px;padding:3px;background:#fff;border-radius:8px;border:1px solid #e0e4ee}
#art-text-value{width:100%;min-height:66px;resize:vertical;border:1px solid #e0e4ef;border-radius:9px;padding:10px 12px;background:#fbfcff;color:#26314a}
#art-text-canvas{display:block;width:100%;max-width:256px;height:auto;aspect-ratio:1;border-radius:10px;border:1px solid #e0e4ef;touch-action:none;cursor:grab}
#art-text-center{width:auto;margin:0;min-width:86px}
#art-text-options[hidden]{display:none}
.art-image-rotate{margin-top:10px;font-size:11px;color:#69748b}
.art-image-rotate label{display:flex;align-items:center;justify-content:space-between}
.art-image-rotate input{width:100%}

.template-categories{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px}
.template-categories button{border:1px solid #e4e6ef;border-radius:8px;background:#fff;padding:7px 10px;font-size:11px;color:#5a6480}
.template-categories button.active{background:#6651e5;color:#fff;border-color:#6651e5}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:510px;overflow:auto}
.preset-card{padding:7px;background:#fff;border:1px solid #e1e4ef;border-radius:11px;cursor:pointer;overflow:hidden}
.preset-card.selected{outline:2px solid #6651e5}
.preset-card .preset-preview{display:block;width:100%;aspect-ratio:1;background:#fff;overflow:hidden;border-radius:7px}
.preset-card .preset-preview svg{width:100%;height:100%;display:block}
.preset-card strong{display:block;text-align:center;font-size:11px;margin:6px 0 2px;color:#26354e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#classic-logo-canvas{cursor:grab;touch-action:none}
#classic-text-canvas{cursor:grab;touch-action:none}
#classic-color-locks input{accent-color:#6651e5}

.text-style-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 8px}.text-style-chip{border:1px solid #dfe3ef;border-radius:12px;background:#fff;color:#38425f;font-size:11px;font-weight:700;padding:10px 6px;line-height:1.2;cursor:pointer;box-shadow:0 1px 2px #1e224008}.text-style-chip.active{border-color:#7a66f2;box-shadow:0 0 0 2px #8e7cff2e;color:#563fe1}.dual-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 4px}.dual-color-grid label{font-size:11px;color:#69748b;display:grid;gap:6px}.dual-color-grid input[type=color]{width:100%;height:36px;border:1px solid #dfe3ef;border-radius:10px;background:#fff;padding:3px}.mode-note{font-size:11px;color:#7a8197;margin-top:6px}

.text-style-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 8px}
.text-style-chip{display:flex;align-items:center;justify-content:center;min-width:0;min-height:33px;padding:5px 2px;border:1px solid rgba(31,45,76,.12);border-radius:8px;line-height:1;font-family:Arial,"Noto Sans TC",sans-serif;font-size:13px;font-weight:800;letter-spacing:-.03em;box-shadow:none;transition:transform .12s ease,border-color .12s ease}
.text-style-chip:hover{transform:translateY(-1px);box-shadow:0 2px 7px #1b25402b}
.text-style-chip.active{border-color:#6750e8;outline:2px solid #7562ea;outline-offset:1px;box-shadow:0 1px 7px #6651e52a}
#art-text-style-presets{margin-top:10px}
#art-text-options .dual-color-grid{margin:10px 0}
#art-text-center{max-width:165px}
#classic-paint-section .sub-actions{flex-wrap:wrap}#classic-paint-section .soft-button{flex:1;min-width:75px;padding:8px 4px;font-size:11px}#classic-preview.paint-active svg{cursor:crosshair;touch-action:none}#classic-paint-section .color-grid{align-items:center}

.rotation-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;color:#69748b;font-size:11px}
.rotation-value{display:flex;align-items:center;gap:4px;color:#69748b}
.rotation-value input{width:70px;min-height:32px;border:1px solid #dce0eb;border-radius:8px;padding:5px 7px;background:#fff;color:#26314a;font-variant-numeric:tabular-nums;text-align:right}
.rotation-value input:focus{outline:2px solid #a99cf8;outline-offset:0}
.rotation-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.rotation-actions .soft-button{width:auto;flex:1;min-width:86px;margin-top:0;padding:9px 7px}
#art-text-options .rotation-heading{margin-top:8px}
.brand-hint{font-size:10px;color:#8790a4;margin:7px 0 0}

.paint-board-list{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 8px}
.paint-board-item{border:1px solid #e0e4ef;border-radius:9px;background:#fff;color:#48516d;padding:7px 10px;font-size:11px;font-weight:650;min-width:68px}
.paint-board-item.active{border-color:#6e53e8;background:#f2efff;color:#5438cc;box-shadow:inset 0 0 0 1px #6e53e8}
.paint-board-item.invisible{opacity:.55}
.paint-board-actions{display:flex;gap:6px;margin:8px 0 10px}
.paint-board-actions button{margin:0;min-width:0;flex:1;padding:9px 4px}
.paint-board-visibility{display:flex;align-items:center;gap:6px;font-size:11px;color:#69748b;margin:7px 0 4px}

.rotation-heading>label:first-child{font-size:12px;font-weight:650;color:#41506c}
.rotation-value{gap:7px;white-space:nowrap;color:#38435e;font-size:16px;font-weight:700}
.rotation-value input{width:82px;min-height:39px;padding:7px 8px;font-size:15px;font-weight:650;color:#27334f}
.rotation-degree{display:inline-flex;align-items:center;justify-content:center;min-width:18px;font-size:19px;font-weight:800;line-height:1;color:#394360}
.art-text-size-field{margin:10px 0 3px;font-size:12px;font-weight:600;color:#4b5976}
.art-text-size-field output{font-size:13px;font-weight:700;color:#5b45cb}
.art-text-size-field input{margin-top:7px}
.paint-board-name{display:grid;gap:5px;margin:10px 0 8px;font-size:11px;color:#64708d;font-weight:600}
.paint-board-name input{width:100%;height:36px;padding:8px 10px;border:1px solid #dce0ef;border-radius:9px;background:#fff;color:#29344f;font-size:13px;font-weight:600}
.paint-board-name input:focus{outline:2px solid #a99cf8;outline-offset:0;border-color:#7865ea}
.paint-board-item{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-scan-reminder{margin:9px 0 5px;font-size:11px;line-height:1.5;color:#957035}.text-fields #classic-text-main{min-height:72px;resize:vertical;white-space:pre-wrap;line-height:1.45}

.config-accordion{padding:0;border-bottom:1px solid var(--line)}
.config-accordion>.section-title{display:flex;align-items:center;gap:3px;min-height:48px;margin:0;padding:14px 0;list-style:none;cursor:pointer;user-select:none}
.config-accordion>.section-title::-webkit-details-marker{display:none}
.config-accordion>.section-title::after{content:"";display:block;width:8px;height:8px;margin-left:auto;margin-right:4px;border-right:2px solid #9a98b0;border-bottom:2px solid #9a98b0;transform:rotate(45deg);transition:transform .16s ease,border-color .16s ease}
.config-accordion[open]>.section-title::after{transform:rotate(225deg);border-color:var(--purple)}
.config-accordion>.section-title:hover{color:var(--purple)}
.config-accordion>.section-title:focus-visible{outline:2px solid #a99cf8;outline-offset:-2px;border-radius:6px}
.config-accordion>.section-content{padding:0 0 17px}
@media(min-width:761px){
 .topbar{height:72px}
 .layout{height:calc(100vh - 72px);height:calc(100dvh - 72px);min-height:520px;align-items:stretch}
 .controls,.results{height:100%;min-height:0}
 .controls{max-height:none;overscroll-behavior:contain}
 .result-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
 .result-head,.result-foot{flex:0 0 auto}
 .preview-stage{flex:1 1 auto;min-height:0}
}
@media(max-width:760px){
 .layout{height:auto;min-height:0}
 .controls,.results,.result-card{height:auto;min-height:0}
 .controls{overflow:visible}
 .preview-stage{flex:none;height:auto;min-height:0}
}