:root{--ink:#1d2c40;--muted:#69778b;--line:#dce3ed;--lime:#d6f56a;--navy:#172b46;--paper:#fff;--bg:#eef2f7}*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}button:hover{box-shadow:0 3px 12px #14294015;transform:translateY(-1px)}button:disabled{opacity:.5;cursor:wait;transform:none}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #80a7ed;outline-offset:3px}header{background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px max(24px,calc((100vw - 1500px)/2));border-bottom:4px solid var(--lime)}.brand{font-size:11px;font-weight:750;letter-spacing:2px;color:var(--lime)}h1{font-size:25px;letter-spacing:-.6px;margin:4px 0}header p{color:#b5c3d6;margin:0;font-size:13px}header button{background:#ffffff0e;color:white;border:1px solid #ffffff35;border-radius:10px;padding:11px 16px}.steps{max-width:1500px;margin:20px auto 14px;display:flex;gap:10px;padding:0 24px;flex-wrap:wrap}.steps span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.steps b{display:grid;place-items:center;width:25px;height:25px;background:white;border:1px solid var(--line);border-radius:50%;color:var(--ink)}.steps i{color:#a1acba;font-style:normal;margin:0 7px}#status{max-width:1452px;margin:0 auto 18px;padding:13px 18px;background:#e4ebf5;border:1px solid #d2ddeb;border-radius:10px;white-space:pre-wrap;color:#294365;font-size:13px}main{max-width:1500px;margin:auto;padding:0 24px 32px;display:grid;grid-template-columns:350px minmax(0,1fr);gap:22px;align-items:start}.controls{display:flex;flex-direction:column;gap:14px;min-width:0}.card{background:white;border:1px solid var(--line);border-radius:14px;padding:19px;box-shadow:0 5px 20px #162c4604}.card h2,.result-title{font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:9px}.stepno{font-size:11px;width:23px;height:23px;display:inline-grid;place-items:center;border-radius:7px;background:#eef3e3;color:#4a6211}.hint{color:var(--muted);font-size:12px;margin:8px 0 0}.upload-zone{display:block!important;border:1.5px dashed #b6c6d9;border-radius:10px;padding:16px;background:#f8fafc;cursor:pointer}.upload-zone strong{display:block;font-size:14px}.upload-zone span{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.upload-zone input{font-size:12px!important;background:white;margin-top:12px!important}label{display:block;font-size:12px;color:#526075;font-weight:550}label+label{margin-top:12px}input:not([type=checkbox]),select{display:block;width:100%;margin-top:6px;padding:10px 11px;border:1px solid #ccd6e2;border-radius:8px;background:#fff;color:var(--ink);min-width:0}input[type=color]{height:42px;padding:5px}input[type=checkbox]{width:16px;height:16px;accent-color:#2757a6;vertical-align:-3px;margin-right:7px}select{font-size:12px}button{border:1px solid #cbd6e3;border-radius:8px;background:#fff;color:#294363;padding:10px 13px;font-weight:600;font-size:12px}.full{width:100%}.certrow{display:flex;gap:8px;margin-bottom:10px}.certrow button{width:100%}#certificateSummary{font-size:12px;color:#63738a;white-space:pre-wrap;margin-top:10px;overflow-wrap:anywhere}.checkline{font-size:14px;color:var(--ink)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.field-grid label{margin:0;background:#f6f8fb;padding:9px 8px;border-radius:7px;font-size:12px}.row{display:flex;gap:12px;margin-top:12px}.row>*{flex:1;min-width:0}.row label{margin:0}details{margin-top:14px;border-top:1px solid #e8edf3;padding-top:12px}summary{cursor:pointer;color:#416185;font-size:12px;font-weight:650;margin-bottom:12px}.template-select{margin:12px 0}details button{margin-top:12px}.actions{display:grid;gap:10px}.primary{background:var(--lime);border-color:#c0de59;color:#233314;padding:14px;font-size:15px;font-weight:750}.secondary{background:#eef3f9}.text-button{background:transparent;border:0;color:#8c5860;font-weight:500}.viewer{min-width:0;border:1px solid var(--line);background:#e3e9f0;border-radius:14px;overflow:hidden;position:sticky;top:16px}.viewer-head{background:white;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.viewer-head h2{margin:0;font-size:14px}.viewer-head p{font-size:11px;color:var(--muted);margin:3px 0 0}nav{display:flex;align-items:center;gap:10px;white-space:nowrap}nav button{padding:6px 11px}#pageInfo{font-size:12px;color:var(--muted)}.viewport{padding:25px;max-height:calc(100vh - 260px);min-height:450px;overflow:auto}.viewer-foot{background:#f7f9fc;padding:12px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}#paper{position:relative;margin:auto;width:max-content;max-width:100%;background:white;box-shadow:0 5px 22px #1a2d4b23}canvas{display:block;max-width:100%;height:auto}#stampBox{position:absolute;border:1px solid;cursor:move;overflow:hidden;touch-action:none;padding:8px;background:#ffffff40}#stampText{white-space:pre-wrap;overflow-wrap:anywhere}#handle{position:absolute;right:0;bottom:0;width:16px;height:16px;background:#3977cd;border:2px solid white;cursor:se-resize;touch-action:none}#resultPanel{border:2px solid #a3c951;background:#f7fce9;scroll-margin-top:20px}#resultPanel[hidden]{display:none}#resultPanel h2{color:#365312;margin-bottom:5px}#resultPanel p{font-size:12px;color:#5f7146;margin:0 0 14px}#downloads{display:flex;flex-direction:column;gap:9px}#downloads button{width:100%;text-align:left;padding:13px}.download-all{background:var(--navy);color:white;border-color:var(--navy);font-size:14px}.download-file{background:white;border-color:#c7d5af}.notice{max-width:1452px;margin:0 auto 24px;font-size:12px;color:#7b6848;padding:12px 16px;border:1px solid #e7dfd0;border-radius:10px;background:#faf7f1}footer{text-align:center;font-size:12px;color:var(--muted);padding:0 24px 24px}@media(min-width:1550px){#status,.notice{max-width:1452px}}@media(max-width:1000px){main{grid-template-columns:310px minmax(0,1fr);gap:14px;padding:0 16px 24px}.viewport{padding:12px}.viewer-head{align-items:flex-start;flex-direction:column}#status,.notice{margin-left:16px;margin-right:16px}.viewer-foot{align-items:flex-start;flex-direction:column}}@media(max-width:760px){header{padding:18px;align-items:flex-start}h1{font-size:20px}header button{font-size:11px;padding:9px}header p{font-size:11px}.steps{padding:0 16px;gap:6px}.steps span{font-size:11px}.steps i{margin:0 2px}main{display:flex;flex-direction:column}.controls,.viewer{width:100%}.viewer{position:static}.viewport{max-height:75vh;min-height:280px}.viewer-head{flex-direction:row;align-items:center}.card{padding:16px}}


/* UI v3: guided accordion and stamp designs */
.controls>.card:not(#resultPanel){padding:0;overflow:hidden}.step-toggle{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:17px 18px;border:0;border-radius:0;background:white;color:#263950;font-size:14px}.step-toggle:hover{transform:none;box-shadow:none;background:#f7fafc}.step-toggle>span:nth-child(2){flex:1}.step-chevron{font-size:20px;line-height:1;color:#8191a6;transition:transform .2s}.step-open .step-chevron{transform:rotate(180deg)}.step-open>.step-toggle{background:#f7faef;border-bottom:1px solid #e2e9d6}.step-body{padding:18px}.step-body[hidden]{display:none!important}.step-body>.secondary.full{margin-top:15px}.actions .step-body{display:grid;gap:10px}.actions .step-body[hidden]{display:none}.status-error{background:#fff0f0!important;border:1px solid #e7a6aa!important;border-left:5px solid #cb3445!important;color:#a51c2d!important;font-weight:650!important;box-shadow:0 3px 14px #b9213610}.stamp-design-panel{border-top:1px solid #e4eaf1;margin-top:16px;padding-top:14px}.logo-picker{margin-top:14px}#logoInfo{font-size:12px;color:#58708c;overflow-wrap:anywhere;margin:8px 0}#removeLogo{font-size:11px;padding:6px 10px}#stampLogo{position:absolute;left:3%;top:15%;width:19%;height:70%;object-fit:contain}.with-logo #stampText{margin-left:25%}#stampBox[data-design=rounded]{border-radius:12px}#stampBox[data-design=accent]{border:0!important;border-left:5px solid currentColor!important;background:#f2f6fbba}#stampBox[data-design=minimal]{border:0!important;background:transparent}#certificate{font-size:12px}.step-body #certificateSummary{margin-bottom:14px}


/* UI v3.2 */
.zoom-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;background:#f8fafc;border-bottom:1px solid var(--line);flex-wrap:wrap}.zoom-bar button{padding:6px 10px;font-size:12px}.zoom-bar span{min-width:48px;text-align:center;font-size:12px;color:var(--muted)}.viewport{max-height:none!important;min-height:0!important;overflow:auto!important}#paper{max-width:none!important;width:max-content}#canvas{max-width:none!important;height:auto}.viewer{min-width:0}#paper canvas{display:block}.viewer-head{padding-top:12px;padding-bottom:12px}