:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ct: #1a1a18; --cs: #555550; --cx: #9b9b95;
  --bg1: #ffffff; --bg2: #f5f5f3;
  --bd2: #d6d6d2; --bd3: #e7e7e3;
  --rmd: 8px; --rlg: 12px;
  --bgs: #e1f5ee; --bds: #a7e3cd; --cts: #0f6e56;
  --acc: #1D9E75; --acd: #0F6E56;
}
html,body{background:#faf9f7;margin:0;padding:0;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-sans);}
.page-wrap{max-width:720px;margin:0 auto;padding:0 1.25rem 3rem;}
.app{padding:1.5rem 0;}
.lang-switcher{display:flex;justify-content:flex-end;gap:4px;margin-bottom:.75rem;}
.lang-flag{appearance:none;border:1.5px solid transparent;background:none;border-radius:var(--rmd);padding:4px 6px;line-height:0;display:flex;align-items:center;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s,background .15s;}
.lang-flag svg{display:block;border-radius:2px;}
.lang-flag:hover{opacity:.85;}
.lang-flag.active{opacity:1;border-color:var(--acc);background:rgba(29,158,117,.08);}
h2{font-size:18px;font-weight:500;color:var(--ct);margin-bottom:1.5rem;display:flex;align-items:center;gap:8px;}
.section{background:var(--bg1);border:.5px solid var(--bd3);border-radius:var(--rlg);padding:1.25rem;margin-bottom:1rem;}
.stitle{font-size:13px;font-weight:500;color:var(--cs);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field label{font-size:13px;color:var(--cs);display:block;margin-bottom:6px;}
.field input[type=number],.field select{width:100%;padding:8px 10px;font-size:14px;border:.5px solid var(--bd2);border-radius:var(--rmd);background:var(--bg2);color:var(--ct);font-family:var(--font-sans);}
.field input[type=number]:focus,.field select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(29,158,117,.12);}
.upload-area{border:1.5px dashed var(--bd2);border-radius:var(--rlg);padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative;}
.upload-area:hover,.upload-area.drag{border-color:var(--acc);background:rgba(29,158,117,.04);}
.upload-area input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-area .ico{display:block;margin:0 auto 8px;color:var(--cx);}
.upload-area p{font-size:14px;color:var(--cs);}
.upload-area .sub{font-size:12px;color:var(--cx);margin-top:4px;display:block;}
.trim-all-btn{margin-left:auto;font-size:12px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--acc);background:none;border:none;cursor:pointer;padding:2px 4px;font-family:var(--font-sans);}
.trim-all-btn:hover{color:var(--acd);text-decoration:underline;}
.img-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--bd3);border-radius:var(--rmd);margin-bottom:8px;}
.img-row[draggable]{cursor:grab;}
.img-row.dragging{opacity:.4;}
.img-drag-handle{display:flex;align-items:center;color:var(--cx);flex-shrink:0;}
.img-thumb{width:36px;height:36px;object-fit:cover;border-radius:6px;flex-shrink:0;border:.5px solid var(--bd2);background:#fff;}
.img-name{flex:1;min-width:0;font-size:13px;color:var(--ct);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.img-count{width:56px;padding:6px 8px;font-size:13px;text-align:center;border:.5px solid var(--bd2);border-radius:var(--rmd);background:#fff;color:var(--ct);font-family:var(--font-sans);flex-shrink:0;}
.img-count:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(29,158,117,.12);}
.img-trim{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border:.5px solid var(--bd2);border-radius:var(--rmd);background:#fff;color:var(--cx);cursor:pointer;transition:all .15s;}
.img-trim:hover{border-color:var(--acc);color:var(--cs);}
.img-trim.active{background:var(--acc);border-color:var(--acc);color:#fff;}
.img-trim:disabled{opacity:.5;cursor:not-allowed;}
.img-remove{font-size:13px;color:var(--cs);background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:4px;flex-shrink:0;font-family:var(--font-sans);}
.img-remove:hover{background:var(--bg1);color:#c0392b;}
.orient-group{display:flex;gap:8px;}
.orient-opt{flex:1;border:.5px solid var(--bd2);border-radius:var(--rmd);padding:10px;cursor:pointer;text-align:center;transition:all .2s;}
.orient-opt:hover{border-color:var(--acc);}
.orient-opt.active{border-color:var(--acc);background:rgba(29,158,117,.07);}
.orient-opt input{display:none;}
.orient-opt .icon{display:block;margin:0 auto 4px;color:var(--cs);}
.orient-opt.active .icon{color:var(--acd);}
.orient-opt span{font-size:12px;color:var(--cs);display:block;}
.orient-opt.active span{color:var(--acd);font-weight:500;}
.mode-tabs{display:flex;border:.5px solid var(--bd3);border-radius:var(--rmd);overflow:hidden;margin-bottom:1rem;}
.mode-tab{flex:1;padding:8px;font-size:13px;background:none;border:none;cursor:pointer;color:var(--cs);transition:all .2s;font-family:var(--font-sans);}
.mode-tab.active{background:var(--acc);color:#fff;font-weight:500;}
.panel{display:none;}
.panel.active{display:block;}
.sug-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.sug-card{border:.5px solid var(--bd3);border-radius:var(--rmd);padding:10px;cursor:pointer;transition:all .2s;text-align:center;}
.sug-card:hover{border-color:var(--acc);background:rgba(29,158,117,.05);}
.sug-card.selected{border-color:var(--acc);border-width:1.5px;background:rgba(29,158,117,.08);}
.sug-card .lyt{font-size:15px;font-weight:500;color:var(--ct);}
.sug-card .det{font-size:11px;color:var(--cx);margin-top:2px;}
.sug-card .badge{display:inline-block;font-size:10px;padding:2px 6px;border-radius:20px;margin-top:4px;background:#E1F5EE;color:var(--acd);}
.ratio-lock{display:inline-flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;font-size:13px;color:var(--cs);user-select:none;}
.ratio-lock[aria-disabled="true"]{cursor:not-allowed;opacity:.5;}
.ratio-lock-box{width:22px;height:22px;border:.5px solid var(--bd2);border-radius:5px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;color:var(--cx);}
.ratio-lock-box.active{background:var(--acc);border-color:var(--acc);color:#fff;}
.ratio-lock:hover .ratio-lock-box{border-color:var(--acc);}
.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;cursor:pointer;font-size:13px;color:var(--cs);user-select:none;}
.checkbox-toggle-box{width:22px;height:22px;border:.5px solid var(--bd2);border-radius:5px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;color:var(--cx);}
.checkbox-toggle-box.active{background:var(--acc);border-color:var(--acc);color:#fff;}
.checkbox-toggle:hover .checkbox-toggle-box{border-color:var(--acc);}
.info-note{font-size:12px;color:var(--cx);margin-top:10px;padding:8px 10px;background:var(--bg2);border-radius:var(--rmd);}
.preview-wrap{background:var(--bg2);border-radius:var(--rlg);padding:1rem;text-align:center;}
.preview-label{font-size:12px;color:var(--cx);margin-bottom:8px;}
#previewCanvas{border:.5px solid var(--bd2);background:white;display:block;margin:0 auto;max-width:100%;}
.preview-pager{align-items:center;justify-content:center;gap:12px;margin-top:10px;}
.preview-pager button{appearance:none;width:28px;height:28px;border:.5px solid var(--bd2);border-radius:var(--rmd);background:#fff;color:var(--cs);font-size:15px;line-height:1;cursor:pointer;font-family:var(--font-sans);}
.preview-pager button:hover:not(:disabled){border-color:var(--acc);color:var(--acd);}
.preview-pager button:disabled{opacity:.4;cursor:not-allowed;}
.preview-pager span{font-size:12px;color:var(--cs);min-width:48px;text-align:center;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.stat{background:var(--bg2);border-radius:var(--rmd);padding:10px;text-align:center;}
.stat .val{font-size:16px;font-weight:500;color:var(--ct);}
.stat .lbl{font-size:11px;color:var(--cx);margin-top:2px;}
.line-controls{display:flex;flex-direction:column;gap:12px;}
.line-row{display:flex;align-items:center;gap:10px;}
.line-row label{font-size:13px;color:var(--cs);width:80px;flex-shrink:0;}
.thickness-slider{flex:1;accent-color:var(--acc);}
.thickness-val{font-size:13px;color:var(--ct);width:32px;text-align:right;}
.style-picker{display:flex;gap:8px;flex:1;}
.style-opt{flex:1;border:.5px solid var(--bd2);border-radius:var(--rmd);padding:8px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s;background:var(--bg2);}
.style-opt:hover{border-color:var(--acc);}
.style-opt.active{border-color:var(--acc);border-width:1.5px;background:rgba(29,158,117,.08);}
.style-opt span{font-size:11px;color:var(--cx);}
.style-opt.active span{color:var(--acd);}
.style-preview{width:100%;height:28px;display:flex;align-items:center;justify-content:center;}
.style-preview svg{width:100%;height:28px;}
.btn-generate{-webkit-appearance:none;appearance:none;width:100%;padding:12px;font-size:15px;font-weight:500;background:var(--acc);color:#fff;border:none;border-radius:var(--rlg);cursor:pointer;transition:background .2s;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);line-height:1;}
.btn-generate:hover{background:var(--acd);}
.btn-generate:disabled{opacity:.5;cursor:not-allowed;}
.download-area{display:none;margin-top:1rem;background:var(--bgs);border:.5px solid var(--bds);border-radius:var(--rlg);padding:1rem 1.25rem;}
.download-area a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--acc);color:#fff;text-decoration:none;border-radius:var(--rmd);font-size:14px;font-weight:500;}
.download-area a:hover{background:var(--acd);}
.download-area p{font-size:13px;color:var(--cts);margin-bottom:10px;}