:root{--green: #2E5E4E;--ink: #0C1B2A;--media-red: #A31D38;--highlight: #C1FF72;--blue: #2563EB;--acc: #10B981;--stamp-red: #B5302A;--green-hover: #285345;--ink-card: #12283C;--ink-line: #1E3A52;--bg: #FFFFFF;--bg-alt: #F6F6F5;--card: #FFFFFF;--line: #E6E6E3;--line2: #D4D4CF;--fg: #1E1F1A;--fg2: #6B6A60;--fg3: #A5A498;--amber: #C77A0A;--amberd: #FBF3E4;--red: #DC4444;--redd: #FBEAEA;--blued: #E8F0FB;--accd: #EDF5F1;--sans: "Futura", "TaipeiSans", "PingFang SC", "Microsoft YaHei", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--fs-ui: 14px;--fs-small: 12px;--fs-body: 16px;--fs-lead: 20px;--fs-h3: 24px;--lh-ui: 1.5;--lh-cjk: 1.7;--r: 2px;--shadow: 0 2px 10px rgba(30, 32, 26, .06);--shadow-lg: 0 8px 30px rgba(30, 32, 26, .1);--ease: cubic-bezier(.16, 1, .3, 1);--spring: cubic-bezier(.22, 1.08, .32, 1);--dur-fast: .12s;--dur-base: .24s;--dur-slow: .36s;--dur-page: .6s;--sp-1: 4px;--sp-2: 8px;--sp-3: 16px;--sp-4: 24px;--sp-5: 32px;--sp-6: 48px;--icon-stroke: 1.75px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--sans);font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--fg);background:#fff;overflow:hidden;-webkit-font-smoothing:antialiased}svg.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}.shell{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--card);display:grid;grid-template-rows:56px 1fr 32px;overflow:hidden}.topbar{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-3);background:var(--card);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{width:26px;height:26px;flex:none;background:var(--green);border-radius:var(--r);display:grid;place-items:center;color:#fff}.brand-name{font-weight:700;font-size:var(--fs-ui);letter-spacing:.01em;white-space:nowrap}.brand-sub{font-size:var(--fs-small);color:var(--fg3);white-space:nowrap}.topbar-center{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--sp-2)}.topbar-right{display:flex;align-items:center;gap:var(--sp-2)}.seg{display:inline-flex;background:var(--bg-alt);border-radius:var(--r);padding:2px;position:relative}.seg button{height:30px;padding:0 14px;border:0;background:transparent;font:inherit;font-size:var(--fs-small);color:var(--fg2);border-radius:var(--r);cursor:pointer;position:relative;z-index:1;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);display:inline-flex;align-items:center;gap:6px}.seg button.on{color:var(--fg);font-weight:600;background:var(--card);box-shadow:var(--shadow)}.seg button:not(.on):not(:disabled):hover{background:#ececea;color:var(--fg)}.seg button:disabled{color:var(--fg3);cursor:not-allowed}.btn{height:38px;padding:0 18px;border:0;border-radius:var(--r);font-family:var(--sans);font-size:var(--fs-ui);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;line-height:1;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.btn--primary{background:var(--green);color:#fff}.btn--primary:hover:not(:disabled){background:var(--green-hover)}.btn--primary:active:not(:disabled){transform:translateY(1px)}.btn--secondary{background:var(--card);color:var(--green);border:1px solid var(--green)}.btn--secondary:hover:not(:disabled){background:#f0f0ee}.btn--ghost{background:var(--bg-alt);color:var(--fg2)}.btn--ghost:hover:not(:disabled){color:var(--fg);background:#e9e9e6}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--sm{height:30px;padding:0 12px;font-size:var(--fs-small)}.btn--block{width:100%;height:44px}.main{display:grid;grid-template-columns:300px 1fr 330px;min-height:0}.side{background:var(--card);min-height:0;display:flex;flex-direction:column;overflow-y:auto}.side-sec{padding:var(--sp-3) var(--sp-3) var(--sp-4)}.sec-title{font-size:var(--fs-small);font-weight:700;letter-spacing:.12em;color:var(--fg3);text-transform:uppercase;margin-bottom:var(--sp-3);display:flex;align-items:center;justify-content:space-between}.side-foot{margin-top:auto;padding:var(--sp-3);background:var(--card);position:sticky;bottom:0}.steps{list-style:none}.step{display:flex;gap:12px;position:relative;padding-bottom:18px}.step:last-child{padding-bottom:0}.step[data-step="1"]{--sc: var(--blue)}.step[data-step="2"]{--sc: var(--amber)}.step[data-step="3"]{--sc: var(--acc)}.step[data-step="4"]{--sc: var(--green)}.step:before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:1px;background:var(--line);transition:background var(--dur-slow) var(--ease)}.step.done:before{background:var(--sc)}.step:last-child:before{display:none}.step-dot{width:23px;height:23px;flex:none;border-radius:50%;border:1px solid var(--line2);background:var(--card);display:grid;place-items:center;position:relative;font-family:var(--mono);font-size:10px;color:var(--fg3);transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}.step.done .step-dot{background:var(--sc);border-color:var(--sc);color:#fff}.step.active .step-dot{border-color:var(--sc);color:var(--sc)}.step-t{font-weight:600;font-size:var(--fs-ui);transition:color var(--dur-base) var(--ease)}.step.active .step-t{color:var(--sc)}.step-d{font-size:var(--fs-small);color:var(--fg2);margin-top:2px}.field{margin-bottom:var(--sp-4)}.field:last-child{margin-bottom:0}.field-label{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-small);font-weight:600;color:var(--fg2);margin-bottom:var(--sp-2)}.field-label .val{font-family:var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}.field-hint{font-size:var(--fs-small);color:var(--fg3);margin-top:6px}.switch-row{display:flex;align-items:center;gap:10px;cursor:pointer}.toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:var(--fg3, #999);border-radius:22px;transition:background .2s}.toggle-slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle-slider{background:var(--green)}.toggle input:checked+.toggle-slider:before{transform:translate(18px)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--green) var(--fill, 60%),var(--line) var(--fill, 60%));border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-6px;background:var(--card);border:2px solid var(--green);border-radius:50%;transition:transform var(--dur-fast) var(--ease)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.range-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--fg3);margin-top:2px}.stepper{display:flex;gap:2px}.stepper button{width:40px;height:38px;border:0;background:#ececea;border-radius:var(--r);color:var(--fg2);cursor:pointer;display:grid;place-items:center;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.var-settings{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-top:8px;background:var(--panel, #F7F7F5);border-radius:var(--r)}.var-label{font-size:var(--fs-small);color:var(--fg2);font-weight:600}.var-color{font-size:var(--fs-small);color:var(--fg3)}.var-settings .level-btns{gap:4px}.var-settings .level-btn{height:30px;padding:0 10px}.var-settings .btn{height:32px;padding:0 14px}.var-row{display:flex;align-items:center;gap:10px;margin-top:8px}.var-row .btn{margin-left:auto}.pal-section{margin-top:12px}.pal-section .var-label{display:block;margin-bottom:8px}.pal-rows{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;padding-right:4px}.pal-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;cursor:pointer;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.pal-row:hover{border-color:var(--fg3)}.pal-row.active{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}.pal-head{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:30px}.pal-count{font-size:12px;font-weight:700;color:var(--fg2)}.pal-count-label{font-size:9px;color:var(--fg3)}.pal-swatches{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}.pal-swatches i{width:20px;height:20px;border-radius:3px;box-shadow:inset 0 0 0 1px #00000014}.revec-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#ffffffb8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.revec-spinner{width:52px;height:52px;border:5px solid var(--green, #2f6f4f);border-top-color:transparent;border-radius:50%;animation:revec-spin .9s linear infinite}.revec-text{font-size:var(--fs-body, 14px);color:var(--fg2, #555);font-weight:500}@keyframes revec-spin{to{transform:rotate(360deg)}}.bottom-extract{border-top:1px solid var(--line);padding:var(--sp-3) var(--sp-4);background:var(--card)}.bottom-sec-title{font-size:var(--fs-small);font-weight:600;color:var(--fg2);margin-bottom:var(--sp-2)}.bottom-extract-body{display:flex;flex-direction:row;gap:var(--sp-3);align-items:flex-start}.bottom-extract .color-report-img{max-height:320px}.bottom-extract .pal-list{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}.stepper button:hover:not(:disabled){background:#e2e2df;color:var(--fg)}.stepper button:disabled{opacity:.4;cursor:not-allowed}.stepper .num{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--mono);font-size:var(--fs-body);font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-alt);border-radius:var(--r)}.stepper .num small{font-family:var(--sans);font-size:var(--fs-small);color:var(--fg3);font-weight:400}.size-row{display:flex;align-items:center;gap:var(--sp-2)}.size-input{position:relative;flex:1}.size-input input{width:100%;height:38px;padding:0 32px 0 12px;border:0;border-radius:var(--r);font:inherit;font-family:var(--mono);font-size:var(--fs-ui);color:var(--fg);background:var(--bg-alt);transition:box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.size-input input:hover:not(:disabled){background:#ececea}.size-input input:focus{outline:none;background:var(--card);box-shadow:0 0 0 2px var(--green)}.size-input input:disabled{opacity:.5}.size-input span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:var(--fs-small);color:var(--fg3)}.size-x{color:var(--fg3);font-size:var(--fs-small)}.level-btns{display:flex;gap:6px}.level-btn{height:30px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg2);font-size:var(--fs-small);font-family:inherit;cursor:pointer;transition:all var(--dur-fast) var(--ease)}.level-btn.active{background:var(--green);color:#fff;border-color:var(--green)}.colour-input{width:70px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-family:var(--mono);font-size:var(--fs-ui);color:var(--fg);background:var(--card)}.colour-input:focus{outline:none;box-shadow:0 0 0 2px var(--green)}.control-hint{font-size:var(--fs-small);color:var(--fg3)}.stage-wrap{position:relative;min-width:0;min-height:0;background:var(--card);overflow:hidden}.stage{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:auto;padding:var(--sp-5)}.checker{background-image:linear-gradient(45deg,#E8E8E6 25%,transparent 25%,transparent 75%,#E8E8E6 75%),linear-gradient(45deg,#E8E8E6 25%,transparent 25%,transparent 75%,#E8E8E6 75%);background-color:#fafafa;background-size:16px 16px;background-position:0 0,8px 8px}.canvas-box{position:relative;border-radius:var(--r);box-shadow:var(--shadow-lg);background:#fff;max-width:100%}.zoom-preview{display:flex;flex-direction:column;gap:6px;align-items:center}.zoom-toolbar{display:inline-flex;align-items:center;gap:4px;background:var(--bg-alt);border-radius:var(--r);padding:3px}.zoom-btn{width:28px;height:24px;border:0;background:transparent;border-radius:var(--r);cursor:pointer;color:var(--fg2);font:inherit;font-size:var(--fs-small);transition:all var(--dur-fast) var(--ease)}.zoom-btn:hover{background:#e4e4e1;color:var(--fg)}.zoom-pct{min-width:46px;text-align:center;font-family:var(--mono);font-size:var(--fs-small);color:var(--fg2);font-variant-numeric:tabular-nums}.zoom-viewport{position:relative;overflow:hidden;max-width:100%}.zoom-stage{transform-origin:center}.zoom-stage img{display:block;max-width:100%;height:auto;border-radius:var(--r)}.preview-loading{display:grid;place-items:center;min-height:200px;color:var(--fg2);gap:10px;font-size:var(--fs-small)}.spinner{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}.variant-toggle{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}.variant-label{font-size:var(--fs-small);font-weight:600;color:var(--fg2)}.variant-btns{display:flex;gap:6px}.variant-btn{height:28px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg2);font-size:var(--fs-small);font-family:inherit;cursor:pointer;transition:all var(--dur-fast) var(--ease)}.variant-btn.active{background:var(--green);color:#fff;border-color:var(--green)}.dropzone{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;background:var(--card);cursor:pointer;transition:background var(--dur-base) var(--ease)}.dropzone:hover{background:var(--bg-alt)}.dropzone.drag{background:var(--accd)}.dz-card{text-align:center;max-width:380px;padding:var(--sp-4)}.dz-icon{width:72px;height:72px;margin:0 auto var(--sp-4);border:1.5px dashed var(--line2);border-radius:var(--r);display:grid;place-items:center;color:var(--green);background:var(--card);transition:all var(--dur-base) var(--ease)}.dz-icon svg{width:28px;height:28px}.dz-title{font-size:var(--fs-lead);font-weight:700;margin-bottom:var(--sp-2)}.dz-sub{color:var(--fg2);font-size:var(--fs-ui);line-height:var(--lh-cjk)}.dz-sub b{color:var(--green);font-weight:600}.dz-formats{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--fg3);font-family:var(--mono)}.dz-file-chip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:8px 16px;box-shadow:var(--shadow);color:var(--green);max-width:320px}.dz-file-chip .ic{width:14px;height:14px}.dz-file-name{font-weight:600;font-size:var(--fs-small);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dz-file-hint{font-size:var(--fs-small);color:var(--fg3);white-space:nowrap}.badge{font-family:var(--mono);font-size:10px;font-weight:700;background:var(--green);color:#fff;min-width:18px;height:16px;padding:0 5px;border-radius:var(--r);display:inline-grid;place-items:center}.preview-panel{display:flex;flex-direction:row;gap:var(--sp-3);padding:var(--sp-3);align-items:flex-start;justify-content:center}.preview-box{position:relative;flex:1;min-width:0;display:flex;justify-content:center}.preview-box+.preview-box{margin-top:0}.preview-box .zoom-preview{width:100%}.preview-box .zoom-viewport{max-width:100%;max-height:480px}.preview-box .zoom-stage{display:flex;justify-content:center;align-items:center}.preview-box .zoom-stage img{max-width:100%;max-height:480px;width:auto;height:auto}.preview-label{position:absolute;top:10px;left:10px;z-index:6;font-size:10px;font-weight:700;letter-spacing:.08em;background:#0c1b2ab8;color:#fff;padding:3px 8px;border-radius:var(--r);pointer-events:none}.preview-label.r{left:auto;right:10px}.preview-img-wrap{line-height:0;position:relative}.preview-pdf-hint{padding:var(--sp-4);text-align:center;color:var(--fg2);font-size:var(--fs-small);line-height:var(--lh-cjk)}.preview-empty{padding:var(--sp-6);text-align:center;color:var(--fg3);font-size:var(--fs-small)}.processing{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:none;place-items:center;background:#fff9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.processing.show{display:grid}.proc-card{width:300px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:var(--sp-4)}.proc-spinner{width:40px;height:40px;margin:0 auto var(--sp-3);border:4px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:proc-spin .9s linear infinite}@keyframes proc-spin{to{transform:rotate(360deg)}}.proc-stage{font-size:var(--fs-body);font-weight:600;color:var(--fg);margin-bottom:var(--sp-3);text-align:center}.proc-pct{font-size:var(--fs-small);color:var(--fg3);margin-top:6px;font-variant-numeric:tabular-nums;text-align:right}.proc-steps{list-style:none;margin-bottom:var(--sp-3)}.proc-steps li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:var(--fs-ui);color:var(--fg3);opacity:.45;transition:opacity var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}.proc-steps li.run,.proc-steps li.ok{opacity:1;color:var(--fg)}.ps-dot{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--line2);position:relative}li.run .ps-dot{border-color:var(--amber);border-right-color:transparent;animation:spin .7s linear infinite}li.ok .ps-dot{background:var(--green);border-color:var(--green)}li.ok .ps-dot:after{content:"";position:absolute;left:5px;top:2.5px;width:3px;height:7px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}@keyframes spin{to{transform:rotate(360deg)}}.proc-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.proc-bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .5s ease}.stats-card{background:var(--bg-alt);border-radius:var(--r);padding:var(--sp-3);margin-top:var(--sp-3)}.stats-title{font-size:var(--fs-small);font-weight:700;color:var(--fg2);margin-bottom:var(--sp-2)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}.stat-item{text-align:center}.stat-value{font-family:var(--mono);font-size:var(--fs-body);font-weight:600;font-variant-numeric:tabular-nums}.stat-label{font-size:10px;color:var(--fg3);margin-top:2px}.action-btns{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}.action-btn{flex:1;height:38px;border:1px solid var(--green);border-radius:var(--r);background:var(--card);color:var(--green);font:inherit;font-weight:600;cursor:pointer;transition:all var(--dur-fast) var(--ease)}.action-btn:hover:not(:disabled){background:#f0f0ee}.action-btn:disabled{opacity:.45;cursor:not-allowed}.pal-empty{background:var(--bg-alt);border-radius:var(--r);padding:var(--sp-5) var(--sp-3);text-align:center;color:var(--fg3);font-size:var(--fs-small);line-height:var(--lh-cjk)}.pal-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}.pal-item{display:flex;align-items:center;gap:10px;border-radius:var(--r);padding:8px 10px;background:var(--bg-alt);cursor:pointer;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.pal-item:hover{background:#ececea;transform:translate(2px)}.pal-sw{width:34px;height:34px;flex:none;border-radius:var(--r);border:1px solid rgba(0,0,0,.08)}.pal-info{flex:1;min-width:0}.pal-name{font-size:var(--fs-small);font-weight:700;display:flex;justify-content:space-between}.pal-name .pct{font-family:var(--mono);font-weight:400;color:var(--amber);font-variant-numeric:tabular-nums}.pal-hex{font-family:var(--mono);font-size:var(--fs-small);color:var(--fg2)}.pal-bar{height:2px;background:var(--line);border-radius:2px;margin-top:5px;overflow:hidden}.pal-bar i{display:block;height:100%;background:var(--green)}.fmt-row{display:flex;gap:var(--sp-2)}.fmt{flex:1;height:40px;border:0;border-radius:var(--r);background:var(--bg-alt);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--mono);font-size:var(--fs-small);font-weight:700;color:var(--fg2);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.fmt small{font-family:var(--sans);font-size:9px;font-weight:400;color:var(--fg3)}.fmt:hover:not(.on){background:#ececea;color:var(--fg)}.fmt.on{background:var(--blued);color:var(--blue)}.fmt.on small{color:var(--blue);opacity:.7}.color-report{margin-top:var(--sp-3)}.color-report-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}.color-report-title{font-size:var(--fs-small);font-weight:700;color:var(--fg2)}.color-report-actions{display:flex;gap:var(--sp-2)}.color-report-toggle,.color-report-dl{border:0;background:var(--bg-alt);color:var(--fg2);font:inherit;font-size:var(--fs-small);padding:5px 10px;border-radius:var(--r);cursor:pointer;transition:all var(--dur-fast) var(--ease)}.color-report-toggle:hover,.color-report-dl:hover{color:var(--fg);background:#ececea}.color-report-img{width:100%;border-radius:var(--r);margin-bottom:var(--sp-2)}.color-row{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:var(--fs-small);border-radius:var(--r);background:var(--bg-alt);margin-bottom:var(--sp-1)}.color-swatch{width:22px;height:22px;flex:none;border-radius:var(--r);border:1px solid rgba(0,0,0,.08)}.color-pantone{font-weight:600;flex:1}.color-hex{font-family:var(--mono);color:var(--fg2)}.color-ratio{font-family:var(--mono);color:var(--amber)}.batch-layout{padding:var(--sp-5);height:100%;overflow-y:auto}.batch-zone{border:2px dashed var(--line2);border-radius:var(--r);padding:var(--sp-5);text-align:center;cursor:pointer;transition:all var(--dur-base) var(--ease);background:var(--card)}.batch-zone:hover,.batch-zone.drag{border-color:var(--green);background:var(--accd)}.batch-progress{margin-top:var(--sp-4)}.batch-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:var(--sp-2)}.batch-bar i{display:block;height:100%;background:var(--green);transition:width var(--dur-base) var(--ease)}.batch-export-btn{margin-top:var(--sp-4);height:44px;width:100%;border:0;border-radius:var(--r);background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background var(--dur-fast) var(--ease)}.batch-export-btn:hover:not(:disabled){background:var(--green-hover)}.batch-export-btn:disabled{opacity:.45;cursor:not-allowed}.statusbar{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-3);background:var(--bg-alt);font-size:10px;color:var(--fg2);white-space:nowrap;overflow:hidden}.statusbar .st{display:inline-flex;align-items:center;gap:5px}.statusbar .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.st-dot{width:6px;height:6px;border-radius:50%;background:var(--fg3)}.st-dot.ok{background:var(--acc)}.st-dot.busy{background:var(--amber)}.statusbar .spacer{flex:1}.login-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--bg-alt)}.login-card{width:340px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:var(--sp-5)}.login-logo{width:40px;height:40px;margin:0 auto var(--sp-3)}.login-logo img{width:100%;height:100%;object-fit:contain}.login-title{font-size:var(--fs-h3);font-weight:700;text-align:center;margin-bottom:var(--sp-1)}.login-sub{text-align:center;color:var(--fg2);font-size:var(--fs-small);margin-bottom:var(--sp-4)}.login-input{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:var(--fs-ui);color:var(--fg);background:var(--card);margin-bottom:var(--sp-2);transition:box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.login-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px var(--green)}.login-btn{width:100%;height:40px;border:0;border-radius:var(--r);background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer;margin-top:var(--sp-2);transition:background var(--dur-fast) var(--ease)}.login-btn:hover:not(:disabled){background:var(--green-hover)}.login-btn:disabled{opacity:.45;cursor:not-allowed}.login-error{color:var(--red);font-size:var(--fs-small);margin-top:var(--sp-2)}.batch-panel{display:flex;flex-direction:column;gap:var(--sp-3)}.batch-dropzone{border:2px dashed var(--line2);border-radius:var(--r);padding:var(--sp-5);text-align:center;cursor:pointer;transition:all var(--dur-base) var(--ease);background:var(--card)}.batch-dropzone:hover{border-color:var(--green);background:var(--accd)}.batch-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}.batch-filename{font-size:var(--fs-small)}.batch-status{font-size:var(--fs-small);color:var(--fg2)}.batch-error{color:var(--red);font-size:var(--fs-small)}.batch-progress{margin-top:var(--sp-2)}.batch-summary{font-size:var(--fs-small);color:var(--fg2)}.batch-export{width:100%;height:40px;border:0;border-radius:var(--r);background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer}.progress-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}.progress-fill{display:block;height:100%;background:var(--green);transition:width var(--dur-base) var(--ease)}.progress-text{font-size:var(--fs-small);color:var(--fg2);margin-top:var(--sp-1)}.controls-panel{margin-bottom:var(--sp-4)}.controls-title{font-size:var(--fs-small);font-weight:700;color:var(--fg2);margin-bottom:var(--sp-2)}.control-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}.control-label{font-size:var(--fs-small);font-weight:600;color:var(--fg2);min-width:64px}.real-size-title{font-size:var(--fs-small);font-weight:700;color:var(--fg2);margin-bottom:var(--sp-2)}.real-size-row{display:flex;gap:var(--sp-2)}.real-size-field{display:flex;align-items:center;gap:4px}.real-size-field input{width:90px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-family:var(--mono);font-size:var(--fs-small)}.process-btn{width:100%;height:44px;border:0;border-radius:var(--r);background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background var(--dur-fast) var(--ease)}.process-btn:hover:not(:disabled){background:var(--green-hover)}.process-btn:disabled{opacity:.45;cursor:not-allowed}.batch-zip-btn{margin-top:8px;background:transparent;color:var(--green);border:1px solid var(--green)}.batch-zip-btn:hover:not(:disabled){background:#2f6f4f14}.toast{position:fixed;left:50%;bottom:46px;transform:translate(-50%) translateY(16px);background:var(--ink);color:#d4e0da;font-size:var(--fs-small);padding:9px 16px;border-radius:var(--r);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;z-index:10000;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--spring)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;border:3px solid var(--card)}::-webkit-scrollbar-track{background:transparent}.preview-error{margin-top:var(--sp-3);padding:var(--sp-3);background:var(--redd);color:var(--red);border-radius:var(--r);font-size:var(--fs-ui)}.preview-waiting{color:var(--fg3);font-size:var(--fs-ui)}.history-wrap{grid-column:1 / -1;min-height:0;overflow:hidden}.history-panel{height:100%;overflow-y:auto;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}.history-head{display:flex;align-items:center;justify-content:space-between}.history-title{font-size:var(--fs-lead);font-weight:700}.history-empty{padding:var(--sp-6);text-align:center;color:var(--fg3);font-size:var(--fs-small);display:flex;flex-direction:column;align-items:center;gap:12px}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3)}.hist-card{display:flex;flex-direction:column;gap:10px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;cursor:pointer;transition:all var(--dur-fast) var(--ease);font:inherit;color:inherit}.hist-card:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-1px)}.hist-thumb{width:100%;aspect-ratio:4 / 3;background:var(--bg-alt);border-radius:var(--r);overflow:hidden;display:grid;place-items:center}.hist-thumb img{width:100%;height:100%;object-fit:contain}.hist-thumb-empty{width:100%;height:100%}.hist-info{display:flex;flex-direction:column;gap:4px;min-width:0}.hist-name{font-weight:600;font-size:var(--fs-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hist-meta{font-size:10px;color:var(--fg3);font-family:var(--mono);font-variant-numeric:tabular-nums}.hist-badges{display:flex;flex-wrap:wrap;gap:4px}.hist-badge{font-size:10px;font-weight:600;color:var(--fg2);background:var(--bg-alt);border-radius:999px;padding:2px 8px}.history-detail{height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3)}.history-detail-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}.history-detail-title{font-weight:700;font-size:var(--fs-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.history-detail-meta{font-size:var(--fs-small);color:var(--fg3);font-family:var(--mono)}.history-detail-body{display:grid;grid-template-columns:1fr 330px;gap:var(--sp-3);align-items:start}.history-detail-side{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}@media(max-width:1100px){.history-detail-body{grid-template-columns:1fr}}.extra-prompt-input{width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--mono);font-size:var(--fs-small);line-height:1.6;color:var(--fg);background:var(--bg-alt);resize:vertical;transition:box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.extra-prompt-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px var(--green);background:var(--card)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}