@import "https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap";:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#070b14;font-family:Lexend,Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}html{font-size:18px}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button,input,select{min-height:44px}:focus-visible{outline-offset:3px;outline:4px solid #67e8f9}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}:root{--bg:#070b14;--panel:#0d1422;--panel-2:#121c2d;--panel-3:#172338;--border:#33445f;--border-strong:#547092;--text:#f8fafc;--muted:#b7c5d8;--cyan:#22d3ee;--cyan-dark:#083344;--cyan-text:#07131b;--danger:#fda4af}.app-shell{background:radial-gradient(circle at 50% 0%, #13233d 0, var(--bg) 38%);min-height:100vh}.skip-link{z-index:20;color:#111827;background:#fff;border-radius:8px;padding:14px 20px;font-weight:700;position:fixed;top:-100px;left:20px}.skip-link:focus{top:16px}.topbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:10;background:#070b14eb;justify-content:space-between;align-items:center;gap:20px;min-height:78px;padding:10px 24px;display:flex;position:sticky;top:0}.brand,.privacy-badge,.file-info,.section-heading,.label-row{align-items:center;display:flex}.brand{gap:14px}.brand-mark{width:50px;height:50px;color:var(--cyan);background:var(--cyan-dark);border:1px solid #0e7490;border-radius:13px;place-items:center;display:grid}.brand-mark svg{width:28px;height:28px}.brand strong,.brand span{display:block}.brand strong{color:var(--text);letter-spacing:-.5px;font-size:21px}.brand span{color:var(--muted);margin-top:2px;font-size:18px}.privacy-badge{color:#d9f99d;gap:9px;font-weight:600}.privacy-badge svg{color:#a3e635}.primary-button{background:var(--cyan);color:var(--cyan-text);border:0;border-radius:10px;justify-content:center;align-items:center;gap:9px;padding:13px 20px;font-weight:700;transition:background-color .2s;display:inline-flex}.primary-button:hover{background:#67e8f9}.primary-button:active,button:active{transform:translateY(1px)}.primary-button svg{width:22px}.secondary-button{min-width:110px;color:var(--text);background:var(--panel-2);border:1px solid var(--border-strong);border-radius:10px;padding:11px 18px;font-weight:700}.secondary-button:hover{background:var(--panel-3);border-color:var(--cyan)}.workspace{grid-template-columns:310px minmax(400px,1fr) 350px;min-height:calc(100vh - 78px);display:grid}.sidebar{background:#0d1422f0;padding:26px 20px}.left-panel{border-right:1px solid var(--border);flex-direction:column;gap:30px;display:flex}.right-panel{border-left:1px solid var(--border);flex-direction:column;justify-content:space-between;gap:36px;display:flex}.section-heading{justify-content:space-between;margin-bottom:22px}.section-heading h2,.export-settings h2{color:var(--text);margin:3px 0 0;font-size:24px}.section-heading>svg{color:var(--cyan)}.eyebrow{color:var(--cyan);font-size:18px;font-weight:600}.image-library{border-bottom:1px solid var(--border);padding-bottom:26px}.library-heading{margin-bottom:14px}.library-heading h2{align-items:center;gap:8px;display:flex}.count-badge{color:#cffafe;background:var(--cyan-dark);text-align:center;border-radius:999px;min-width:30px;padding:2px 8px;font-size:18px}.add-image{color:var(--cyan);background:var(--cyan-dark);border-color:#0e7490}.image-list{gap:9px;max-height:270px;padding:2px;display:grid;overflow-y:auto}.image-item{border:1px solid var(--border);background:0 0;border-radius:10px;grid-template-columns:1fr auto;align-items:center;display:grid;position:relative;overflow:hidden}.image-item:hover{border-color:var(--border-strong);background:var(--panel-3)}.image-item.active{border-color:var(--cyan);background:var(--cyan-dark)}.image-select{min-width:0;color:var(--text);text-align:left;background:0 0;border:0;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;padding:8px;display:grid}.image-select img{object-fit:cover;background:#020617;border-radius:6px;width:54px;height:46px}.image-select span,.image-select strong,.image-select small{min-width:0;display:block}.image-select strong{text-overflow:ellipsis;white-space:nowrap;font-size:18px;overflow:hidden}.image-select small{color:var(--muted);margin-top:3px;font-size:18px}.image-close{width:44px;color:var(--muted);background:0 0;border:0;place-items:center;padding:0;display:grid}.image-close:hover{color:var(--danger);background:#fda4af1a}.image-close svg{width:20px}.library-empty{width:100%;color:var(--muted);border:1px dashed var(--border-strong);background:0 0;border-radius:10px;justify-content:center;align-items:center;gap:9px;padding:20px 12px;display:flex}.library-empty:hover{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dark)}.preset-list{gap:10px;display:grid}.preset{width:100%;color:var(--text);border:1px solid var(--border);text-align:left;background:0 0;border-radius:11px;justify-content:space-between;align-items:center;padding:13px;transition:background-color .2s,border-color .2s;display:flex}.preset:hover{background:var(--panel-3);border-color:var(--border-strong)}.preset.active{background:var(--cyan-dark);border-color:var(--cyan)}.preset strong,.preset small{display:block}.preset strong{font-size:18px}.preset small{color:var(--muted);margin-top:4px;font-size:18px}.ratio{color:#cffafe;background:#164e63;border-radius:6px;flex:none;margin-left:8px;padding:4px 8px;font-size:18px}.tip-card{background:var(--cyan-dark);border:1px solid #0e7490;border-radius:12px;gap:12px;padding:16px;display:flex}.tip-card svg{color:var(--cyan);flex:none}.tip-card strong{color:#ecfeff}.tip-card p{color:#cffafe;margin:6px 0 0;line-height:1.55}.canvas-area{grid-template-rows:auto 1fr auto;min-width:0;display:grid}.canvas-toolbar{border-bottom:1px solid var(--border);background:#0d1422b8;justify-content:space-between;align-items:center;min-height:76px;padding:14px 22px;display:flex}.canvas-actions{align-items:center;gap:9px;display:flex}.add-more-button{justify-content:center;align-items:center;gap:8px;display:flex}.add-more-button svg{width:21px}.file-info{gap:12px}.file-info strong,.file-info span{display:block}.file-info span{color:var(--muted);margin-top:2px}.status-dot{background:var(--cyan);border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 6px #22d3ee21}.icon-button{width:48px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:9px;place-items:center;display:grid}.icon-button.danger{color:var(--danger)}.canvas-stage{background-image:linear-gradient(45deg,#0b1220 25%,#0000 25%),linear-gradient(-45deg,#0b1220 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#0b1220 75%),linear-gradient(-45deg,#0000 75%,#0b1220 75%);background-position:0 0,0 15px,15px -15px,-15px 0;background-size:30px 30px;place-items:center;min-height:510px;padding:38px;display:grid;overflow:hidden}.crop-board{border:2px solid var(--cyan);background:var(--panel-2);width:min(100%,720px);max-height:min(66vh,720px);transition:border-color .2s;position:relative;overflow:hidden;box-shadow:0 25px 80px #00000073,0 0 0 7px #22d3ee1a}.crop-board.dragging{border-color:#bef264}.crop-board.pannable{cursor:grab;touch-action:none}.crop-board.panning{cursor:grabbing;border-color:#67e8f9;box-shadow:0 25px 80px #00000073,0 0 0 9px #22d3ee2e}.preview-image{object-fit:cover;transform-origin:50%;-webkit-user-select:none;user-select:none;width:100%;height:100%;transition:transform .18s;position:absolute;top:50%;left:50%}.crop-board.panning .preview-image{transition:none}.crop-grid{pointer-events:none;position:absolute;inset:0}.crop-grid span{background:#fff9;position:absolute}.crop-grid span:first-child,.crop-grid span:nth-child(2){width:1px;height:100%;top:0;left:33.333%}.crop-grid span:nth-child(2){left:66.666%}.crop-grid span:nth-child(3),.crop-grid span:nth-child(4){width:100%;height:1px;top:33.333%;left:0}.crop-grid span:nth-child(4){top:66.666%}.size-pill{color:#fff;background:#030712e0;border-radius:7px;padding:7px 10px;font-size:18px;position:absolute;bottom:14px;left:14px}.canvas-stage.crop-mode{padding:22px}.free-crop-shell{grid-template-rows:auto 1fr auto;place-items:center;gap:16px;width:100%;height:100%;min-height:470px;display:grid}.crop-instruction{color:#cffafe;background:var(--cyan-dark);border:1px solid #0e7490;border-radius:9px;align-items:center;gap:9px;padding:9px 14px;display:flex}.crop-instruction svg{width:22px}.free-crop-surface{touch-action:none;-webkit-user-select:none;user-select:none;background:#020617;width:min(100%,760px);max-width:100%;max-height:62vh;position:relative;overflow:hidden;box-shadow:0 24px 70px #00000080}.free-crop-surface>img{object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.crop-shade{z-index:1;pointer-events:none;background:#020617b8;position:absolute}.shade-top{inset:0 0 auto}.shade-left{left:0}.shade-right{right:0}.shade-bottom{inset:auto 0 0}.free-crop-box{z-index:2;border:2px solid var(--cyan);cursor:move;touch-action:none;position:absolute}.free-crop-box:after{content:"";pointer-events:none;position:absolute;inset:-2px;box-shadow:inset 0 0 0 1px #ffffffb3}.crop-size{z-index:4;white-space:nowrap;color:#fff;pointer-events:none;background:#030712e0;border-radius:7px;padding:6px 9px;font-size:18px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.crop-handle{z-index:5;background:var(--cyan);touch-action:none;border:3px solid #fff;border-radius:50%;width:28px;height:28px;min-height:28px;padding:0;position:absolute;box-shadow:0 2px 8px #000000a6}.handle-nw{cursor:nwse-resize;top:0;left:0;transform:translate(-50%,-50%)}.handle-n{cursor:ns-resize;top:0;left:50%;transform:translate(-50%,-50%)}.handle-ne{cursor:nesw-resize;top:0;right:0;transform:translate(50%,-50%)}.handle-e{cursor:ew-resize;top:50%;right:0;transform:translate(50%,-50%)}.handle-se{cursor:nwse-resize;bottom:0;right:0;transform:translate(50%,50%)}.handle-s{cursor:ns-resize;bottom:0;left:50%;transform:translate(-50%,50%)}.handle-sw{cursor:nesw-resize;bottom:0;left:0;transform:translate(-50%,50%)}.handle-w{cursor:ew-resize;top:50%;left:0;transform:translate(-50%,-50%)}.crop-actions{justify-content:center;gap:12px;display:flex}.upload-prompt{width:100%;color:var(--text);background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:13px;display:flex;position:absolute;inset:0}.upload-prompt:hover{background:#22d3ee0d}.upload-prompt strong{font-size:25px}.upload-prompt>span{color:var(--muted)}.upload-prompt .upload-icon{width:72px;height:72px;color:var(--cyan);background:var(--cyan-dark);border:1px solid #0e7490;border-radius:20px;place-items:center;display:grid}.upload-icon svg{width:36px;height:36px}.upload-prompt .upload-action{color:var(--cyan-text);background:var(--cyan);border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-weight:700;display:flex}.bottom-toolbar{border-top:1px solid var(--border);background:#0d1422db;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:74px;padding:11px 20px;display:flex}.bottom-toolbar button{color:var(--text);background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:9px 11px;display:flex}.bottom-toolbar button:hover,.bottom-toolbar button.selected{background:var(--panel-3);border-color:var(--border-strong)}.bottom-toolbar button:disabled{cursor:not-allowed;color:#718096;opacity:.65}.bottom-toolbar svg{width:21px}.form-group{border-bottom:1px solid var(--border);padding:18px 0}.label-row{justify-content:space-between;gap:12px}label,.label-row label,.form-label{color:var(--text);font-weight:600}.lock-button{border:1px solid var(--border);width:44px;color:var(--muted);background:var(--panel-2);border-radius:8px;padding:0}.lock-button.active{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dark)}.lock-button svg{width:19px}.dimension-row{grid-template-columns:1fr auto 1fr;align-items:end;gap:7px;margin-top:12px;display:grid}.dimension-row>svg{width:19px;color:var(--muted);margin-bottom:12px}.dimension-row div{position:relative}.dimension-row label{color:var(--muted);margin-bottom:5px;font-size:18px;font-weight:400;display:block}.dimension-row input{border:1px solid var(--border);width:100%;color:var(--text);background:var(--panel-2);border-radius:8px;padding:9px 34px 9px 10px}.dimension-row small{color:var(--muted);font-size:18px;position:absolute;bottom:12px;right:9px}.range-group output{color:#cffafe;background:var(--cyan-dark);text-align:center;border-radius:6px;min-width:56px;padding:4px 8px}input[type=range]{width:100%;min-height:44px;accent-color:var(--cyan)}.export-settings{gap:13px;display:grid}.select-wrap{position:relative}.select-wrap select{appearance:none;width:100%;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px 45px 10px 12px}.select-wrap svg{pointer-events:none;color:var(--muted);position:absolute;top:12px;right:12px}.full-button{width:100%;margin-top:8px}.visually-hidden{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed}.toast{z-index:30;color:#f0fdf4;background:#14532d;border:1px solid #4ade80;border-radius:10px;align-items:center;gap:10px;max-width:min(500px,100vw - 48px);padding:12px 12px 12px 16px;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 18px 50px #00000073}.toast>svg{color:#86efac}.toast button{color:#fff;background:0 0;border:0;place-items:center;width:44px;padding:0;display:grid}.toast button svg{width:20px}@media (width<=1200px){.workspace{grid-template-columns:280px minmax(400px,1fr)}.right-panel{border-left:0;border-top:1px solid var(--border);grid-column:1/-1;grid-template-columns:1fr 1fr;display:grid}}@media (width<=820px){.topbar{flex-wrap:wrap;position:static}.privacy-badge{order:3;width:100%}.workspace{flex-direction:column;display:flex}.left-panel{border-right:0;border-bottom:1px solid var(--border)}.preset-list{grid-template-columns:repeat(2,1fr)}.image-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.tip-card{display:none}.canvas-stage{min-height:430px;padding:25px}.free-crop-shell{min-height:410px}.free-crop-surface{max-height:54vh}.right-panel{display:flex}}@media (width<=560px){.topbar{padding:12px 15px}.brand span,.privacy-badge{font-size:18px}.top-export{width:100%}.preset-list{grid-template-columns:1fr}.image-list{grid-template-columns:1fr;max-height:280px}.sidebar{padding:22px 15px}.canvas-toolbar{align-items:flex-start;gap:12px;padding:12px 15px}.canvas-actions{flex-direction:column-reverse;align-items:flex-end}.add-more-button{min-width:0;padding-inline:12px}.canvas-stage{min-height:340px;padding:18px}.canvas-stage.crop-mode{padding:14px 8px}.free-crop-shell{min-height:380px}.crop-instruction{text-align:center;justify-content:center;width:calc(100% - 12px)}.crop-handle{width:32px;height:32px;min-height:32px}.bottom-toolbar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.bottom-toolbar button{flex:none}.upload-prompt strong{font-size:21px}}.app-footer{z-index:5;pointer-events:none;position:fixed;bottom:10px;right:14px}.signature{color:var(--muted);letter-spacing:.3px;opacity:.35;font-size:18px;font-weight:500;transition:opacity .2s}.app-footer:hover .signature{opacity:.85}@media (width<=820px){.app-footer{text-align:center;padding:14px;position:static}}