:root { --paper:#fff9fa; --soft-pink:#fde8ed; --iron-pink:#f3c5cd; --rose:#e99ba9; --text:#5a5354; --muted:#a69fa1; --mint:#d5e8d4; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--text); font:400 13px/1.55 "PingFang SC","Microsoft YaHei","Source Han Sans CN",Arial,sans-serif; background:radial-gradient(circle at 15px 15px,#fff 0 3px,transparent 3.5px) 0 0/30px 30px,linear-gradient(135deg,#fffdfd,#fff8fa); touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* Text editing still needs selection inside form fields */
input, select, textarea { -webkit-user-select:text; user-select:text; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.preview-section { flex:1 1 0; min-height:0; padding:22px 40px 14px; padding:22px clamp(18px,4vw,64px) 14px; display:flex; flex-direction:column; }
.title-row { max-width:1440px; width:100%; margin:0 auto 10px; display:flex; justify-content:space-between; align-items:center; gap:24px; }.eyebrow { margin:0 0 1px; color:var(--rose); font:500 10px/1.2 Arial,sans-serif; letter-spacing:.16em; }.title-row h1 { margin:0; font-weight:400; font-size:20px; letter-spacing:.06em; }.header-actions{display:flex;align-items:center;gap:8px}.controls-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;max-width:1440px;width:100%;margin:0 auto;padding:10px 0 0}
.controls-actions .reset-button{margin-right:auto}.header-format{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;white-space:nowrap}.header-format select{height:32px;padding:0 5px}.header-export{padding:8px 14px;white-space:nowrap}
.iron-frame { position:relative; flex:1; min-height:300px; width:100%; max-width:1300px; margin:auto; padding:20px; border:1px solid var(--iron-pink); border-radius:26px; background:rgba(255,255,255,.48); box-shadow:0 12px 32px rgba(243,197,205,.16),inset 0 0 0 6px rgba(253,232,237,.48); transition:filter .3s ease; }.iron-frame:hover { filter:drop-shadow(0 0 5px #fde8ed); }
.iron-corner { position:absolute; width:82px; height:82px; fill:none; stroke:var(--iron-pink); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }.corner-tl{left:-4px;top:-4px}.corner-tr{right:-4px;top:-4px;transform:scaleX(-1)}.corner-bl{left:-4px;bottom:-4px;transform:scaleY(-1)}.corner-br{right:-4px;bottom:-4px;transform:scale(-1)}
.canvas-stage { position:relative; width:100%; height:100%; min-height:260px; overflow:hidden; display:grid; place-items:center; border-radius:17px; padding:18px; background:radial-gradient(circle at 12px 12px,rgba(243,197,205,.25) 0 2px,transparent 2.6px) 0 0/24px 24px,linear-gradient(180deg,rgba(255,255,255,.9),rgba(253,232,237,.7)); }.canvas-stage::before { content:""; position:absolute; inset:7px; pointer-events:none; border:1px solid rgba(255,255,255,.9); border-radius:12px; }.canvas-stage canvas { position:relative; display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; touch-action:none; cursor:grab; background:conic-gradient(#fff 25%,#f7f4f5 0 50%,#fff 0 75%,#f7f4f5 0) 0/16px 16px; box-shadow:0 10px 22px rgba(90,83,84,.12); animation:canvas-in .22s ease both; }.canvas-stage canvas.is-dragging{cursor:grabbing}.canvas-badge,.drag-hint { position:absolute; z-index:1; padding:3px 9px; border-radius:99px; color:var(--muted); background:rgba(255,255,255,.82); font-size:11px; box-shadow:0 2px 8px rgba(90,83,84,.06); }.canvas-badge { right:17px; bottom:15px; }.drag-hint{left:17px;top:15px;pointer-events:none;opacity:.88}
.controls-section { flex:0 1 auto; max-height:38vh; min-height:242px; padding:0 clamp(16px,4vw,64px) 6px; overflow:hidden; position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(253,232,237,.84),rgba(255,249,250,.98)); border-top:1px solid rgba(243,197,205,.5); }.lace-divider { position:absolute; top:-6px; left:0; right:0; height:13px; background:radial-gradient(circle at 7px -1px,transparent 6px,#fff 6.7px 8px,transparent 8.5px) 0 0/15px 13px repeat-x; opacity:.88; pointer-events:none; }
[hidden]{display:none!important}
.controls-scroller { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; flex:1 1 auto; min-height:0; padding:12px 2px 4px; scrollbar-color:var(--iron-pink) transparent; }.controls-scroller::-webkit-scrollbar{height:7px}.controls-scroller::-webkit-scrollbar-thumb{background:var(--iron-pink);border-radius:20px}
.tab-pane{display:flex;gap:12px;flex-wrap:nowrap;align-items:flex-start;flex:0 0 auto}
.page-tabs{display:flex;gap:6px;padding:6px 0 0;flex:0 0 auto}
.page-tab{flex:1;min-height:30px;border:1px solid var(--iron-pink);border-radius:9px;background:#fff;color:var(--rose);font-size:11px;letter-spacing:.1em;transition:.2s}
.page-tab.is-active{background:var(--rose);border-color:var(--rose);color:#fff}
.sticker-bar{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0 0;flex:0 0 auto}
.sb-action{padding:5px 12px;border:1px solid var(--iron-pink);border-radius:99px;background:#fff;color:var(--rose);font-size:11px;white-space:nowrap;transition:.2s}
.sb-action:hover{background:var(--soft-pink);border-color:var(--rose)}
.sticker-card{flex:0 0 260px;padding-top:9px}
.sticker-card legend{padding:0 4px;color:var(--rose);font-size:14px;font-weight:400}
.sticker-list{display:flex;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:auto;padding:4px 0}
.sticker-item{position:relative;width:62px;height:62px;display:grid;place-items:center;border:1px solid var(--iron-pink);border-radius:10px;background:#fff;overflow:hidden;cursor:pointer;transition:.2s;padding:3px}
.sticker-item:hover{border-color:var(--rose)}
.sticker-item.is-selected{border-color:var(--rose);box-shadow:0 0 0 3px rgba(233,155,169,.18)}
.sticker-item img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;pointer-events:none}
.sticker-item .si-del{position:absolute;top:1px;right:1px;width:17px;height:17px;border:0;border-radius:50%;background:rgba(90,83,84,.55);color:#fff;font-size:9px;line-height:17px;padding:0;text-align:center}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin-top:0;max-height:196px;overflow-y:auto;padding:2px 0;scrollbar-color:var(--iron-pink) transparent}
.gst-item{position:relative;height:58px;display:grid;place-items:center;padding:4px;border:1px solid var(--iron-pink);border-radius:10px;background:#fff;cursor:pointer;transition:.2s;overflow:hidden}.gst-item img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;pointer-events:none}.gst-add{cursor:pointer}.gst-add .upload-plus{width:26px;height:26px;font-size:21px}.gst-add:hover{background:var(--soft-pink);border-color:var(--rose)}
.gst-item:hover{background:var(--soft-pink);border-color:var(--rose)}

.sb-main{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;width:100%}
.sb-extra{display:flex;align-items:center;gap:8px;width:100%;padding:0 4px}
.sb-extra input[type="range"]{flex:1;min-width:0;height:22px;accent-color:var(--rose)}
.sb-extra-val{flex:0 0 36px;text-align:right;color:var(--rose);font-size:10px}
.sb-sub{padding:3px 10px;font-size:10.5px;background:var(--soft-pink);border-color:transparent}
.sb-action.is-on{background:var(--rose);border-color:var(--rose);color:#fff}
.sticker-note{margin:8px 0 0;color:var(--rose);font-size:11px;letter-spacing:.05em;text-align:center}
.canvas-tools{position:absolute;z-index:3;left:12px;bottom:12px;display:flex;gap:7px}
.tool-button{width:36px;height:36px;border-radius:50%;border:1px solid var(--iron-pink);background:rgba(255,255,255,.94);color:var(--rose);font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(90,83,84,.12);transition:.2s;padding:0}
.tool-button:hover:enabled{border-color:var(--rose);transform:translateY(-1px)}
.tool-button:disabled{opacity:.32}
.tool-button.is-active{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 4px 12px rgba(233,155,169,.35)}
.sticker-box{position:absolute;z-index:6;border:1.7px solid #fff;border-radius:3px;box-shadow:0 0 0 1px rgba(233,155,169,.6),0 8px 20px rgba(90,83,84,.2);pointer-events:none}
.sb-btn{position:absolute;width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:var(--rose);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;pointer-events:auto;box-shadow:0 2px 10px rgba(90,83,84,.3);padding:0;line-height:1}
.sb-del{left:0;top:0;transform:translate(-50%,-50%)}
.sb-flip{left:0;bottom:0;transform:translate(-50%,50%);font-size:15px}
.sb-rot{right:0;bottom:0;transform:translate(50%,50%);background:#fff;color:var(--rose);font-size:15px}
.bg-upload{margin-top:9px}
.color-section.is-locked .color-picker,.color-section.is-locked .color-tip,.color-section.is-locked .transparent-toggle{opacity:.38;pointer-events:none;filter:saturate(.65)}
.canvas-stage canvas.is-erasing{cursor:crosshair}
.sb-btn{touch-action:none}
.share-note{padding:8px 14px;font-size:12px;color:var(--rose);border-color:var(--iron-pink);background:#fff;white-space:nowrap}
.control-card { position:relative; flex:0 0 212px; min-width:0; margin:0; padding:14px 13px 12px; border:1px solid rgba(243,197,205,.8); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(243,197,205,.15); }.control-card::after{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--soft-pink),transparent)} legend { padding:0 4px; color:var(--rose); font-size:14px; font-weight:400; }.rose-dot{font-size:10px;margin-right:3px;color:var(--rose)} label{display:block;color:var(--muted);font-size:11px}.split-inputs{display:flex;gap:7px}.split-inputs label{flex:1;min-width:0;display:flex;align-items:center;gap:4px}.split-inputs input{flex:1;min-width:0}.dpi-field{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:6px;margin-top:8px}.dpi-field span{display:flex;align-items:center;gap:5px}.dpi-field .dpi-left{font-size:11px;color:var(--muted);white-space:nowrap}.dpi-field input{width:58px;text-align:center}.dpi-field .check-row{margin-top:0;margin-left:auto;flex:0 0 auto}.check-row{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--text)}.check-row input{accent-color:var(--rose);width:14px;height:14px}.check-row span{font-size:12px}
input[type="number"],select { height:30px; min-width:0; padding:0 7px; border:1px solid var(--iron-pink); border-radius:8px; outline:none; color:var(--text); background:#fff; transition:border .2s,box-shadow .2s; }input[type="number"]:focus,select:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(233,155,169,.13)}em{font-style:normal;color:var(--muted);font-size:10px}.color-card{flex-basis:252px}.color-columns{display:flex;gap:12px}.color-columns>.color-section{flex:1;min-width:0}.color-columns>.color-section+.color-section{padding-left:12px;border-left:1px solid var(--soft-pink)}.color-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2px 6px;margin-bottom:5px;color:var(--muted);font-size:11px}.transparent-toggle{display:flex;align-items:center;gap:4px;font-size:10px}.transparent-toggle input{accent-color:var(--rose);margin:0}.color-row{display:flex;gap:8px;align-items:center}.color-picker{appearance:none;width:30px;height:30px;border:2px solid var(--iron-pink);padding:0;border-radius:50%;background:#fff;overflow:hidden;cursor:pointer;flex:0 0 auto;transition:transform .15s}.color-picker:hover{transform:scale(1.08)}.color-section.is-transparent .color-picker{opacity:.38;filter:saturate(.65)}.color-tip{color:var(--muted);font-size:10px}.swap-row{display:flex;justify-content:center;margin-top:10px}.swap-button{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px dashed var(--iron-pink);border-radius:99px;background:#fff;color:var(--rose);font-size:11px;transition:.2s;cursor:pointer}.swap-button:hover{background:var(--soft-pink);border-style:solid}.swap-icon{font-size:14px;line-height:1}.share-note{color:var(--rose);border-color:var(--iron-pink);background:#fff;white-space:nowrap}
.cp-pop{position:fixed;z-index:50;width:236px;padding:12px;border:1px solid var(--iron-pink);border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(90,83,84,.18);display:none}.cp-pop.show{display:block}
.cp-sv{position:relative;height:130px;border-radius:10px;overflow:hidden;cursor:crosshair;background:hsl(0,100%,50%);touch-action:none}.cp-sv::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff,transparent)}.cp-sv::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000,transparent)}
.cp-cursor{position:absolute;z-index:1;width:15px;height:15px;border:2.5px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}
.cp-mid{display:flex;align-items:center;gap:8px;margin:10px 0 9px}
.cp-preview{width:28px;height:28px;flex:0 0 28px;border-radius:50%;border:2px solid var(--iron-pink)}
.cp-hex{flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid var(--iron-pink);border-radius:8px;font-size:16px;color:var(--text);outline:none;text-transform:uppercase;background:#fff}
.cp-hex:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(233,155,169,.13)}
.cp-hue{position:relative;height:14px;border-radius:99px;cursor:pointer;touch-action:none;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-hue-cursor{position:absolute;top:50%;width:18px;height:18px;border:3px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}.pattern-card{flex-basis:232px}.pattern-card>label:not(.upload-area){display:grid;grid-gap:3px}.pattern-select-field{margin-bottom:9px}.field-label{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}.pattern-select-btn{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:2px 10px 2px 5px;border:1px solid var(--iron-pink);border-radius:10px;background:#fff;color:var(--text);font-family:inherit;font-size:12px;cursor:pointer;transition:border .2s,box-shadow .2s}.pattern-select-btn:hover{border-color:var(--rose)}.pattern-select-btn[aria-expanded="true"]{border-color:var(--rose);box-shadow:0 0 0 3px rgba(233,155,169,.13)}.ps-icon{width:26px;height:26px;flex:0 0 26px;border-radius:7px;background:#fff7f9;border:1px solid var(--soft-pink)}.ps-name{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ps-arrow{color:var(--rose);font-size:10px}.pattern-select-popup{position:fixed;z-index:60;max-height:322px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--iron-pink);border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(90,83,84,.18);scrollbar-color:var(--iron-pink) transparent;-webkit-overflow-scrolling:touch}.ps-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border:0;border-radius:9px;background:none;color:var(--text);font-family:inherit;font-size:12px;cursor:pointer;text-align:left}.ps-item:hover{background:var(--soft-pink)}.ps-item.is-selected{background:rgba(233,155,169,.16);color:var(--rose)}.upload-area{display:flex;align-items:center;gap:7px;margin-top:9px;padding:7px 8px;border:2px dashed var(--iron-pink);border-radius:11px;background:#fff9fa;transition:.2s;cursor:pointer}.upload-area:hover,.upload-area.dragging{background:var(--soft-pink)}.upload-area input{display:none}.upload-plus{display:grid;place-items:center;flex:0 0 20px;height:20px;border-radius:50%;background:var(--rose);color:white;font-size:17px;line-height:1;font-weight:300}.upload-area span:last-child{line-height:1.2}.text-button{margin:7px 0 0;padding:0;border:0;background:none;color:var(--rose);font-size:11px;text-decoration:underline}.range-card{flex-basis:270px}.range-field{margin-bottom:8px}.range-field>span{display:flex;align-items:center;gap:6px;margin-top:2px}.range-field input[type="range"]{flex:1;width:100%;accent-color:var(--rose);height:4px}.range-field input[type="number"]{width:48px;text-align:center}.helper-text{margin:9px 0 0;color:var(--muted);font-size:10px}.compact-card{flex-basis:248px}.button{border:0;border-radius:99px;padding:8px 16px;transition:transform .3s ease,box-shadow .3s ease;background:white;color:var(--rose);border:1px solid var(--iron-pink)}.button:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(233,155,169,.22)}.primary{position:relative;background:var(--rose);color:#fff;border-color:var(--rose);box-shadow:0 4px 10px rgba(233,155,169,.3)}.secondary{font-size:12px}.petal-loader{display:none;width:14px;height:14px;margin-right:6px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:spin .65s linear infinite}.is-exporting .petal-loader{display:inline-block}.toast{position:fixed;left:50%;bottom:20px;z-index:3;transform:translate(-50%,20px);max-width:calc(100% - 32px);padding:9px 15px;border:1px solid var(--iron-pink);border-radius:99px;background:#fff9fa;color:var(--text);box-shadow:0 8px 22px rgba(90,83,84,.14);opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes canvas-in{from{opacity:.6;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:720px){
html,body{height:100%;overflow:hidden}
.app-shell{height:100vh;height:100dvh;height:100%;min-height:0;overflow:hidden}
/* flex 弹性分配：预览区吃掉剩余空间，参数区按内容自适应可收缩——不依赖 vh，老内核浏览器工具栏不再遮挡页签 */
.preview-section{flex:0 0 auto;min-height:0;height:70%;padding:14px 12px 8px}
.title-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:10px}
.eyebrow{display:none}
.title-row h1{font-size:16px;white-space:nowrap}
.controls-actions{gap:5px;flex-wrap:nowrap;padding:8px 0 0}
.header-format{font-size:0}
.header-format select{font-size:11px;height:28px}
.header-export,.reset-button{flex:0 0 auto;min-height:28px;padding:4px 10px;font-size:11px}
.controls-section{flex:1 1 auto;min-height:0;max-height:none;overflow:hidden;padding:0 12px 6px}
.controls-scroller{overflow-x:hidden;overflow-y:auto;display:block;padding:10px 1px 6px;-webkit-overflow-scrolling:touch}
.tab-pane{flex-wrap:wrap}
.page-tab{min-height:28px}
.control-card{flex:1 1 100%}
.sticker-card{flex:1 1 100%}

input[type="number"],select{font-size:16px;height:30px}
.check-row input{width:18px;height:18px}
.transparent-toggle{font-size:12px}
input[type="range"]{height:26px}
.range-field input[type="number"]{width:56px}
.iron-frame{min-height:0;padding:12px}
.canvas-stage{min-height:0;padding:12px}
.iron-corner{width:56px;height:56px}
}
/* 添加到主屏幕（standalone PWA）时没有浏览器工具栏，才需要给刘海/手势条留安全边距；普通浏览器模式不预留 */
@media (display-mode:standalone){
.preview-section{padding-top:max(14px,calc(env(safe-area-inset-top,0px) + 8px))}
.page-tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px)}
}
/* Chrome 61 baseline: flex gap unsupported — fall back to item margins.
   app.js adds .no-flex-gap on <html> after a layout behavior test. */
.no-flex-gap .title-row>*+*{margin-left:24px}
.no-flex-gap .controls-actions>*+*{margin-left:8px}
.no-flex-gap .swap-button>*+*{margin-left:6px}
.no-flex-gap .header-format>*+*{margin-left:5px}
.no-flex-gap .split-inputs>*+*{margin-left:7px}
.no-flex-gap .split-inputs label>*+*{margin-left:4px}
.no-flex-gap .dpi-field span>*+*{margin-left:5px}
.no-flex-gap .check-row>*+*{margin-left:7px}
.no-flex-gap .transparent-toggle>*+*{margin-left:4px}
.no-flex-gap .color-row>*+*{margin-left:8px}
.no-flex-gap .cp-mid>*+*{margin-left:8px}
.no-flex-gap .upload-area>*+*{margin-left:7px}
.no-flex-gap .range-field>span>*+*{margin-left:6px}
.no-flex-gap .controls-scroller>*+*{margin-left:12px}
.no-flex-gap .sticker-grid>*+*{margin-left:8px}
.no-flex-gap .sticker-list>*+*{margin-left:8px}
.no-flex-gap .sb-main>*+*{margin-left:6px}
.no-flex-gap .sb-extra>*+*{margin-left:8px}
@media (max-width:720px){
.no-flex-gap .title-row>*{margin-top:4px}
.no-flex-gap .title-row>*+*{margin-left:8px}
.no-flex-gap .controls-actions>*+*{margin-left:5px}
.no-flex-gap .controls-scroller>*+*{margin-left:0}
.no-flex-gap .controls-scroller>.control-card{margin-bottom:12px}
}