:root{color:#1f2433;background:#f6f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button{min-height:40px;border:1px solid #c9cfdd;border-radius:8px;background:#fff;color:#1f2433;cursor:pointer}button:hover:not(:disabled){border-color:#3657d6}button:disabled{cursor:not-allowed;opacity:.55}.app{display:grid;grid-template-columns:minmax(280px,360px) minmax(360px,1fr) minmax(280px,360px);gap:16px;min-height:100vh;padding:16px}.app-header,.app-footer{grid-column:1 / -1}.app-header{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #d9deea;border-radius:8px;background:#fff;padding:14px 16px;box-shadow:0 12px 34px #1f243312}.language-control{width:min(220px,100%)}.toolbar,.workspace,.output{min-width:0}.cache-panel{display:grid;grid-column:1 / -1;gap:10px;border:1px solid #aebcff;border-radius:8px;background:#eef2ff;color:#213a8f;padding:12px 14px}.update-panel{display:flex;grid-column:1 / -1;align-items:center;justify-content:space-between;gap:12px;border:1px solid #b8c3e6;border-radius:8px;background:#fff;color:#1f2433;padding:12px 14px}.update-panel div{display:grid;gap:4px}.update-panel strong{font-size:14px}.update-panel span{color:#61697a;font-size:13px}.update-panel button{border-color:#2f4bc1;background:#3657d6;color:#fff;font-weight:800;padding:0 14px}.cache-panel div:first-child{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}.cache-panel strong{font-size:14px}.cache-panel span{font-size:13px;line-height:1.45}.cache-panel.is-error{border-color:#e0a091;background:#fff0ec;color:#783421}.cache-progress{height:8px;overflow:hidden;border-radius:999px;background:#3657d624}.cache-progress span{display:block;height:100%;min-width:4px;border-radius:inherit;background:#3657d6;transition:width .18s ease}.toolbar,.output{display:flex;flex-direction:column;gap:16px;border:1px solid #d9deea;border-radius:8px;background:#fff;padding:16px}.brand{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}.brand-logo{display:block;width:56px;height:56px;border-radius:8px;box-shadow:0 8px 22px #1f24331f}h1,h2,p{margin:0}h1{font-size:22px;line-height:1.2}h2{font-size:18px;line-height:1.2}p,.label,label span,.metrics,.result-meta{color:#61697a;font-size:13px}.file-button{display:grid;min-height:48px;place-items:center;border:1px dashed #3657d6;border-radius:8px;background:#eef2ff;color:#213a8f;font-weight:700;cursor:pointer}.file-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.control-group{display:grid;gap:8px}.segmented{display:grid;grid-auto-flow:column;gap:6px}.segmented button{min-width:0;padding:0 8px;white-space:nowrap}.segmented .active{border-color:#2f4bc1;background:#3657d6;color:#fff;font-weight:700}.background-mode{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:initial}.swatches{display:grid;grid-template-columns:repeat(4,40px) minmax(88px,1fr);gap:8px;align-items:end}.swatches>button{width:40px;height:40px;min-height:40px;border:2px solid #c9cfdd;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff8c}.swatches>button.selected{border-color:#1f2433;outline:2px solid #3657d6;outline-offset:2px}.custom-color{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}.custom-color input{min-height:40px;padding:4px}.cleanup{gap:10px}.grid-2,.grid-3{display:grid;gap:10px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}label{display:grid;gap:6px}input,select{min-width:0;min-height:40px;width:100%;border:1px solid #c9cfdd;border-radius:8px;background:#fff;color:#1f2433;padding:8px 10px}input[type=range]{padding:0}.zoom{gap:10px}.metrics{display:grid;grid-template-columns:1fr;gap:6px;border-top:1px solid #e1e6f2;padding-top:12px}.workspace{display:grid;min-height:calc(100vh - 162px);place-items:center;border:1px solid #d9deea;border-radius:8px;background:linear-gradient(45deg,#e7ebf5 25%,transparent 25%),linear-gradient(-45deg,#e7ebf5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7ebf5 75%),linear-gradient(-45deg,transparent 75%,#e7ebf5 75%);background-color:#f9fbff;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;padding:20px}.cropper-shell{display:grid;width:min(100%,680px);place-items:center}.crop-frame{position:relative;width:min(100%,calc((100vh - 72px) * var(--crop-aspect, .714)));max-height:calc(100vh - 72px);overflow:hidden;border:2px solid #1f2433;border-radius:8px;background:#fff;box-shadow:0 18px 44px #1f243324;touch-action:none;user-select:none}.crop-frame.is-ready{cursor:grab}.crop-frame.is-ready:active{cursor:grabbing}.crop-image{position:absolute;top:50%;left:50%;max-width:none;transform-origin:center;user-select:none;-webkit-user-drag:none}.rule{position:absolute;pointer-events:none;background:#ffffff73}.rule-v{inset:0 33.333%;border-right:1px solid rgb(31 36 51 / 35%);border-left:1px solid rgb(31 36 51 / 35%);background:transparent}.rule-h{inset:33.333% 0;border-top:1px solid rgb(31 36 51 / 35%);border-bottom:1px solid rgb(31 36 51 / 35%);background:transparent}.empty-state{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:24px;text-align:center}.empty-state strong{font-size:22px}.empty-state span{color:#61697a;font-size:14px}.output-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.primary,.download{border-color:#2f4bc1;background:#3657d6;color:#fff;font-weight:800}.notice{border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.45}.notice.warning{border:1px solid #e1b64b;background:#fff7df;color:#684b00}.notice.error{border:1px solid #e0a091;background:#fff0ec;color:#783421}.notice.info{border:1px solid #aebcff;background:#eef2ff;color:#213a8f}.preview-card{display:grid;min-height:280px;place-items:center;gap:12px;border:1px solid #d9deea;border-radius:8px;background:#fff;padding:14px}.preview-card img{max-width:100%;max-height:52vh;border:1px solid #d9deea;object-fit:contain}.preview-empty{max-width:220px;color:#61697a;font-size:14px;text-align:center}.result-meta{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center}.download{width:100%}.app-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;color:#61697a;font-size:13px;padding:4px 8px 2px}@media(max-width:1120px){.app{grid-template-columns:minmax(280px,340px) minmax(0,1fr)}.output{grid-column:1 / -1}.preview-card{min-height:220px}}@media(max-width:760px){.app{grid-template-columns:1fr;padding:10px}.app-header{align-items:stretch;flex-direction:column}.language-control{width:100%}.workspace{min-height:52vh;padding:12px}.crop-frame{max-height:50vh}.grid-3{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(4,40px) minmax(80px,1fr)}.output-head,.update-panel{align-items:stretch;flex-direction:column}}