/* Mist (#edf1f0): page; Ink (#21332e): text; Pine (#235e50): single action accent. */
:root{--bg:#edf1f0;--surface:#fbfcfb;--ink:#21332e;--muted:#64756e;--accent:#235e50;--accent-hover:#194b3e;--tint:#e6efea;--line:rgba(31,61,49,.12);--radius:12px;--danger:#a33f35;font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}body::before{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button,a,input,textarea,select{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent)}button{transition:background .15s,border-color .15s,color .15s}button:disabled{opacity:.45;cursor:not-allowed}button svg,svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}h1,h2,h3,p{margin:0}h2{font-size:15px;font-weight:650}a{color:var(--accent)}[hidden]{display:none!important}.icons{position:absolute;width:0;height:0;overflow:hidden}.skip{position:fixed;top:8px;left:16px;z-index:30;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--surface)}.skip:focus{width:auto;height:auto;clip-path:none;padding:12px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;max-width:1920px;margin:auto;padding:0 40px;border-bottom:1px solid var(--line);background:rgba(251,252,251,.7)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:23px;font-weight:750;letter-spacing:2px}.brand-sub{font-size:9px;display:block;letter-spacing:1.2px;font-weight:600;color:var(--muted);margin-top:2px}.topbar nav{display:flex;gap:25px;align-items:center}.privacy{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.button{min-height:40px;border:1px solid var(--line);background:var(--surface);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;font-weight:550;white-space:nowrap}.button:hover:not(:disabled){background:var(--tint);border-color:rgba(35,94,80,.35)}.button.primary{background:var(--accent);border-color:var(--accent);color:#f4f8f5}.button.primary:hover:not(:disabled){background:var(--accent-hover)}.button.quiet{background:transparent}.button.compact{font-size:12px;min-height:34px;padding:7px 10px}.text-button{border:0;padding:5px 0;min-height:32px;background:transparent;color:var(--accent);font-size:12px;white-space:nowrap}.text-button:hover:not(:disabled){text-decoration:underline}.intro{display:flex;justify-content:space-between;align-items:center;padding:31px 40px 26px;max-width:1920px;margin:auto}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:1.5px;margin-bottom:11px}h1{font-size:28px;font-weight:750;letter-spacing:-1px;display:flex;align-items:center;gap:12px;line-height:1.2}.version{font-size:10px;letter-spacing:0;font-weight:500;color:var(--accent);background:var(--tint);padding:5px 7px;border:1px solid var(--line);border-radius:4px}.intro p{color:var(--muted);font-size:12px;margin-top:10px}.workflow{display:flex;align-items:center;gap:14px;margin-right:5px}.step{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.step b{font-weight:500}.step:first-letter{font-weight:700}.step.active{color:var(--accent)}.workflow i{width:36px;border-top:1px solid var(--line)}.studio{display:grid;grid-template-columns:248px minmax(360px,1fr) 302px;align-items:start;gap:18px;padding:0 40px;max-width:1920px;margin:0 auto}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 3px 8px rgba(34,63,51,.018)}.panel-heading{height:60px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.panel-heading h2{display:flex;align-items:center;gap:8px}.count{font-size:11px;background:var(--tint);color:var(--accent);padding:3px 7px;border-radius:4px;font-variant-numeric:tabular-nums}.library{position:sticky;top:16px}.import-actions{padding:16px;display:grid;gap:9px}.import-actions .button{width:100%}.selection-row{display:flex;align-items:center;justify-content:space-between;padding:5px 16px 9px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.selection-row label{display:flex;align-items:center;gap:5px}.selection-row input{margin:0}input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;flex:none}.photo-list{height:430px;overflow-y:auto;overscroll-behavior:contain;padding:8px}.library-empty{text-align:center;padding:100px 5px;color:var(--muted);font-size:12px}.library-empty>svg{width:30px;height:30px;opacity:.5;margin-bottom:15px}.library-empty span{font-size:10px;display:block;margin-top:7px;opacity:.8}.photo-row{display:flex;align-items:center;gap:9px;padding:9px 7px;margin-bottom:4px;border-radius:7px;border:1px solid transparent;cursor:pointer}.photo-row.active{background:var(--tint);border-color:rgba(35,94,80,.2)}.photo-row:hover{background:#eff4f0}.photo-row img{width:45px;height:45px;border-radius:4px;object-fit:cover;background:var(--bg)}.photo-details{min-width:0;flex:1}.photo-details strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:550}.photo-details small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.photo-error{color:var(--danger)!important}.library-foot{border-top:1px solid var(--line);padding:13px 16px;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:6px}.library-foot span:last-child{font-size:9px;letter-spacing:.3px}.preview-toolbar{height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:8px}.preview-toolbar>div{display:flex;align-items:center;gap:8px;min-width:0}.preview-toolbar h2{white-space:nowrap}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}#previewInfo{font-size:10px;color:var(--muted);margin-left:6px}.stage{height:415px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#e5ebe7;background-image:linear-gradient(45deg,rgba(52,89,70,.025) 25%,transparent 25%),linear-gradient(-45deg,rgba(52,89,70,.025) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(52,89,70,.025) 75%),linear-gradient(-45deg,transparent 75%,rgba(52,89,70,.025) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.empty-stage{text-align:center}.empty-art{position:relative;display:flex;align-items:center;justify-content:center;width:82px;height:70px;margin:0 auto 27px;background:#f1f5f2;border:1px solid rgba(35,94,80,.13);border-radius:10px;transform:rotate(-7deg);box-shadow:7px 7px 0 rgba(130,155,140,.13)}.empty-art>svg{width:35px;height:35px;color:#729586}.empty-art>span{position:absolute;bottom:-8px;right:-9px;background:var(--accent);width:29px;height:29px;border:3px solid #e5ebe7;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f1f7f3;transform:rotate(7deg)}.empty-art span svg{width:15px;height:15px}.empty-stage h3{font-size:19px;letter-spacing:-.5px;font-weight:600}.empty-stage p{font-size:12px;color:var(--muted);margin-top:10px}.empty-stage>.button{margin-top:23px;padding-inline:20px}.empty-stage>.text-button{display:block;margin:8px auto 0}.empty-note{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:26px;font-size:10px;color:var(--muted)}.empty-note svg{width:13px;height:13px}.canvas-wrap{position:relative;max-width:calc(100% - 48px);max-height:calc(100% - 40px);display:flex;align-items:center;justify-content:center}.canvas-wrap canvas{display:block;max-width:100%;max-height:375px;object-fit:contain;box-shadow:0 8px 24px rgba(29,59,45,.15);touch-action:none;cursor:crosshair}.canvas-label{position:absolute;bottom:10px;left:10px;font-size:10px;padding:5px 8px;background:rgba(20,34,28,.8);color:#f0f5f2;border-radius:4px;pointer-events:none}.drop-overlay{display:none;position:absolute;inset:8px;z-index:3;background:rgba(232,242,236,.96);border:2px dashed var(--accent);border-radius:8px;align-items:center;justify-content:center;font-size:18px;color:var(--accent)}.stage.drag-over .drop-overlay{display:flex}.stage-message{position:absolute;bottom:10px;left:10px;right:10px;background:#fcf3ef;color:var(--danger);padding:12px;font-size:12px;border-radius:5px}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px;min-height:39px}.preview-footer span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-footer span:last-child{white-space:nowrap}.export-panel{padding:20px}.export-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.export-heading p{font-size:11px;color:var(--muted);margin-top:6px}.export-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--tint);color:var(--accent)}.export-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.export-options label,.custom-position label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:7px;min-width:0}input:not([type=checkbox]):not([type=range]),textarea,select{color:var(--ink);background:#f6f8f6;border:1px solid var(--line);border-radius:5px;max-width:100%;width:100%;padding:9px 10px;min-height:36px;font-size:12px}input::placeholder,textarea::placeholder{color:#77867e}textarea{resize:vertical;line-height:1.65}input[type=color]{padding:4px 5px!important;height:36px;cursor:pointer}.advanced-export{margin-top:14px}.advanced-export summary,.effects summary{font-size:11px;color:var(--muted);cursor:pointer;padding:5px 0}.advanced-export[open] summary{margin-bottom:12px}.advanced-export .check-label{margin-top:13px}.destination{background:#f1f5f2;border:1px solid var(--line);border-radius:7px;margin-top:17px;padding:11px;display:flex;align-items:center;gap:9px}.destination>svg{color:var(--accent)}.destination>div{flex:1;min-width:0}.destination strong{display:block;font-size:11px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.destination span{display:block;font-size:9px;color:var(--muted);margin-top:5px;line-height:1.5}.export-buttons{display:flex;align-items:center;gap:9px;margin-top:15px;flex-wrap:wrap}.export-buttons>.button{flex:1;font-size:12px}.export-buttons>.text-button{padding:5px;font-size:11px}.progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:14px}progress{display:block;width:100%;height:7px;accent-color:var(--accent);margin-top:5px}.export-result{background:var(--tint);color:var(--accent);padding:12px;border-radius:5px;font-size:11px;line-height:1.7;margin-top:14px;white-space:pre-line;overflow-wrap:anywhere}.export-result.error{background:#fbede9;color:var(--danger)}.settings-body{padding:17px}.segmented{display:flex;background:#eef2ef;border:1px solid var(--line);padding:3px;border-radius:6px;gap:3px}.segmented button{flex:1;background:transparent;border:0;border-radius:4px;padding:8px 5px;font-size:12px;white-space:nowrap}.segmented button.active{background:var(--surface);box-shadow:0 1px 4px rgba(35,70,54,.08);color:var(--accent);font-weight:650}.segmented.small{padding:2px}.segmented.small button{font-size:11px;padding:5px 10px}.field{display:block;font-size:11px;color:var(--ink);margin-top:17px}.field>input:not([type=range]),.field>select,.field>textarea{margin-top:8px}.hint{font-size:10px;color:var(--muted);line-height:1.7;margin-top:8px}.token{font-size:9px;padding:3px 4px;margin:2px;border:1px solid var(--line);border-radius:3px;background:#f0f4f1;color:var(--accent)}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check-label{display:flex;gap:7px;align-items:center;font-size:11px;margin-top:13px;line-height:1.5}.check-label input{margin:0}.divider{border-top:1px solid var(--line);margin:20px 0}.setting-row{display:flex;justify-content:space-between;align-items:center;font-size:11px}.range-field{position:relative;margin-top:22px}output{float:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}.range-field input{display:block;margin:13px 0 0;width:100%;accent-color:var(--accent);height:4px;cursor:pointer}.position-layout{display:flex;gap:16px;align-items:center;margin-top:10px}.position-grid{display:grid;grid-template-columns:repeat(3,29px);gap:4px;background:#eef3ef;border:1px solid var(--line);padding:6px;border-radius:7px}.position-grid button{border:0;border-radius:4px;background:#f8faf8;height:25px;color:#788c80;font-size:17px}.position-grid button.active{background:var(--accent);color:#eef5f1}.position-layout p{font-size:10px;margin-bottom:7px}.position-layout span{font-size:9px;color:var(--muted);line-height:1.8}.custom-position{margin-top:13px}.custom-position label{font-size:10px}.custom-position input{min-height:30px!important;padding:6px 8px!important}.effects{margin-top:18px;border-top:1px solid var(--line);padding-top:11px}.effects .field{margin-top:12px}.preset-head{display:flex;justify-content:space-between;align-items:center}.preset-head .field{margin:0}.preset-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.preset-list button,.saved-preset button:first-child{background:#f3f6f3;border:1px solid var(--line);border-radius:4px;font-size:10px;color:var(--muted);padding:7px 8px}.preset-list button:hover{color:var(--accent);border-color:var(--accent)}.saved-preset{display:flex;gap:5px;margin-top:7px}.saved-preset button:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}.saved-preset button:last-child{border:0;background:transparent;color:var(--muted);padding-inline:7px}.preset-tools{display:flex;gap:18px;margin-top:8px}.preset-tools .text-button{font-size:10px}.logo-picker{width:100%;display:flex;flex-direction:column;align-items:center;padding:22px 10px;gap:10px;background:#f3f7f3;border:1px dashed rgba(35,94,80,.35);border-radius:6px;margin-top:17px}.logo-picker svg{width:25px;height:25px;color:var(--accent)}.logo-picker small{font-size:9px;color:var(--muted)}.page-footer{display:flex;align-items:center;justify-content:space-between;max-width:1920px;padding:20px 40px 28px;margin:auto;color:var(--muted);font-size:10px}.page-footer>span{display:flex;align-items:center;gap:6px}.page-footer svg{width:13px;height:13px}.page-footer .text-button{color:var(--muted);font-size:10px}dialog{border:1px solid var(--line);border-radius:14px;padding:25px;max-width:540px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);box-shadow:0 15px 70px rgba(30,54,42,.2)}dialog::backdrop{background:rgba(23,42,33,.35)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{font-size:20px;letter-spacing:-.5px}.icon-button{border:0;background:transparent;display:flex;align-items:center;justify-content:center;width:34px;height:34px}.help-steps{padding-left:23px;margin:0}.help-steps li{padding:0 0 17px 7px;font-size:13px}.help-steps li p{color:var(--muted);font-size:12px;line-height:1.8;margin-top:5px}dialog>.button{margin-top:20px}dialog>p{font-size:12px;line-height:1.8;margin-top:15px}dialog>p.hint{font-size:11px}#toast{position:fixed;z-index:25;bottom:26px;left:50%;transform:translateX(-50%);background:#253f33;color:#f0f6f2;box-shadow:0 6px 25px rgba(35,65,48,.2);font-size:12px;padding:13px 20px;border-radius:8px;max-width:calc(100% - 32px);white-space:pre-line;line-height:1.6}#toast.error{background:#813c31}#settingsForm:has(fieldset:disabled){opacity:.6}body.busy .settings{opacity:.7;pointer-events:none}body.busy .import-actions{pointer-events:none;opacity:.6}
@media(min-width:1650px){.studio{grid-template-columns:275px minmax(500px,1fr) 325px;gap:22px}.stage{height:500px}.canvas-wrap canvas{max-height:460px}.photo-list{height:515px}.settings-body{padding:20px}.library-empty{padding-top:135px}.intro{padding-block:36px 30px}}
@media(max-width:1200px){.studio{grid-template-columns:205px minmax(320px,1fr) 265px;gap:12px;padding-inline:22px}.topbar,.intro,.page-footer{padding-inline:22px}.settings-body{padding:14px}.workflow{gap:8px}.workflow i{width:20px}.preview-toolbar{padding-inline:12px}#previewInfo{display:none}.export-panel{padding:16px}.export-options{gap:7px}.export-buttons>.text-button{width:100%}.position-layout{gap:9px}.photo-row{gap:5px;padding-inline:4px}.photo-row img{width:35px;height:40px}.import-actions{padding:12px}.panel-heading{padding-inline:14px}.export-options select{padding:8px 5px;font-size:11px}.intro h1{font-size:25px}}
@media(max-width:1000px){.studio{grid-template-columns:185px minmax(0,1fr)}.settings{grid-column:1/-1}.settings-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;padding:20px}.settings-body>.segmented{grid-column:1/-1;max-width:300px}.settings-body>.divider{display:none}.settings-body>#textOptions{grid-column:1/2;grid-row:2/6}.settings-body>#logoOptions{grid-column:1/2;grid-row:2/6}.settings-body>.setting-row{grid-column:2/3;margin-top:18px}.settings-body>#positionOptions{grid-column:3;grid-row:2/6}.settings-body>.effects{grid-column:1}.settings-body>.preset-head{grid-column:2;margin-top:18px}.settings-body>.preset-list{grid-column:3;margin-top:18px;align-items:center}.saved-presets,.preset-tools{grid-column:2/4}.workflow{display:none}.photo-list{height:410px}.library{position:static}.stage{height:395px}.canvas-wrap canvas{max-height:355px}}
@media(max-width:650px){.topbar{height:66px;padding-inline:16px}.brand{font-size:21px;gap:9px}.brand-sub{font-size:8px}.privacy{display:none}.topbar nav{gap:0}.topbar .quiet{font-size:11px;min-height:34px}.intro{padding:24px 16px 21px}h1{font-size:24px!important}.eyebrow{font-size:10px;letter-spacing:.8px}.intro p{font-size:11px}.studio{display:flex;flex-direction:column;padding:0 12px;gap:12px}.panel{width:100%}.library .panel-heading{height:47px}.import-actions{display:flex;padding:12px;gap:10px}.import-actions .button{min-height:40px;font-size:12px}.selection-row{padding-bottom:7px}.photo-list{height:140px;display:flex;gap:5px;align-items:flex-start;overflow-x:auto;overflow-y:hidden}.photo-row{min-width:150px;max-width:175px;flex-wrap:wrap;padding:6px;height:113px;position:relative;gap:4px}.photo-row>input{position:absolute;top:8px;left:8px}.photo-row img{width:100%;height:59px;object-fit:cover}.photo-details strong{font-size:10px}.photo-details small{font-size:9px;margin-top:3px}.library-empty{padding:18px 10px;width:100%;text-align:center}.library-empty>svg{width:23px;height:23px;margin-bottom:5px}.library-empty span{display:none}.library-foot{padding:9px 13px;flex-direction:row;justify-content:space-between;font-size:9px}.library-foot span:last-child{font-size:8px}.preview-toolbar{height:52px}.stage{height:330px}.canvas-wrap{max-width:calc(100% - 28px)}.canvas-wrap canvas{max-height:290px}.empty-stage h3{font-size:17px}.empty-stage p{font-size:11px}.empty-art{margin-bottom:22px;width:65px;height:58px}.empty-note{margin-top:17px}.empty-stage>.button{margin-top:18px}.export-panel{padding:17px 14px}.export-options{gap:8px}.export-options label{font-size:10px}.destination{padding:9px;gap:7px}.destination span{font-size:9px}.destination .button{font-size:10px;padding:6px 7px}.export-buttons>.button{font-size:11px;padding:10px}.preview-footer{font-size:9px;padding-inline:12px}.settings-body{display:block;padding:18px}.settings-body>.segmented{max-width:none}.settings-body>.divider{display:block}.settings-body>.setting-row{margin-top:20px}.settings-body>.preset-list{margin-top:10px}.position-grid{grid-template-columns:repeat(3,44px)}.position-grid button{height:34px}.position-layout{gap:20px}.position-layout p{font-size:12px}.position-layout span{font-size:11px}.range-field input{height:6px}.field{font-size:12px}.field input,.field select{min-height:40px!important}.effects summary,.advanced-export summary{min-height:32px;font-size:12px}.check-label{font-size:12px;min-height:26px}.segmented button{min-height:38px}.text-button{min-height:36px}.position-grid button{min-height:34px}.page-footer{padding:15px 18px 25px;gap:10px;align-items:flex-start;flex-direction:column}.empty-stage>.text-button{min-height:30px}.preset-list button{padding:10px;font-size:11px}.settings-body>.preset-head{margin-top:0}.preset-tools .text-button{font-size:11px}.token{min-height:28px}.destination>svg{display:none}.export-heading p{font-size:10px}.preview-footer span:last-child{font-size:8px}.preview-toolbar .button{min-height:34px}.topbar .quiet{min-height:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}