:root {
  --glass-bg: rgba(255,255,255,.15);
  --glass-bg-hover: rgba(255,255,255,.22);
  --glass-border: rgba(255,255,255,.18);
  --glass-highlight: rgba(255,255,255,.4);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 1px rgba(255,255,255,.4);
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 1px rgba(255,255,255,.5);
  --glass-shadow-hover: 0 12px 40px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.25), inset 0 1px 1px rgba(255,255,255,.5);
  --liquid-surface: linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.18) 45%,rgba(255,255,255,.08));
  --liquid-edge: linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 42%,rgba(255,255,255,.46));
  --liquid-shadow: 0 9px 26px rgba(31,35,42,.14), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.18);
  --spring: .42s cubic-bezier(.19,1,.22,1);
  --blur: blur(20px) saturate(180%) brightness(1.1);
  --blur-heavy: blur(28px) saturate(200%) brightness(1.15);
  --t: .35s cubic-bezier(.2,.1,.2,1);
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --r-full: 980px;
  --font-primary: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "MiSans", "HarmonyOS Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Menlo", "Monaco", "Consolas", monospace;
  --font: var(--font-primary);
  --text-primary: rgba(255,255,255,.88);
  --text-secondary: rgba(255,255,255,.55);
  --text-tertiary: rgba(255,255,255,.35);
  --accent: #5aa0f0;
  --accent-glass: rgba(100,170,255,.12);
  --spotlight-color: rgba(255,255,255,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text-primary);min-height:100vh;line-height:1.47;-webkit-font-smoothing:antialiased;background:#0a0b0f;display:flex;align-items:flex-start;justify-content:center;position:relative;overflow-x:hidden}
/* Ambient background layer */
.ambient-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-bg .orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;animation:orbFloat 12s ease-in-out infinite}
.ambient-bg .orb.o1{width:600px;height:600px;background:radial-gradient(circle,rgba(180,210,255,.28),transparent);top:-15%;left:-10%;animation-delay:0s;animation-duration:14s}
.ambient-bg .orb.o2{width:500px;height:500px;background:radial-gradient(circle,rgba(140,200,255,.22),transparent);bottom:-20%;right:-8%;animation-delay:-5s;animation-duration:16s}
.ambient-bg .orb.o3{width:400px;height:400px;background:radial-gradient(circle,rgba(200,220,255,.18),transparent);top:45%;left:55%;animation-delay:-9s;animation-duration:18s}
.ambient-bg .orb.o4{width:350px;height:350px;background:radial-gradient(circle,rgba(160,195,255,.15),transparent);top:60%;left:5%;animation-delay:-3s;animation-duration:20s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-25px,20px) scale(.94)}}
/* Subtle grain overlay */
.ambient-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Edge glow for Hero card */
.hero-edge-glow{position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--angle,0deg),rgba(255,255,255,.06),rgba(255,255,255,.18),rgba(255,255,255,.06),rgba(150,200,255,.25),rgba(255,255,255,.06));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:1;animation:edgeRotate 8s linear infinite}
@keyframes edgeRotate{0%{--angle:0deg}100%{--angle:360deg}}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
body.has-file{align-items:flex-start}
.toast-container{position:fixed;top:28px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:14px 26px;border-radius:var(--r-full);font-size:14px;font-weight:500;color:#fff;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);animation:toastIn .4s cubic-bezier(.2,.1,.2,1);text-align:center;white-space:nowrap;pointer-events:auto;box-shadow:var(--glass-shadow-lg)}
.toast.info{background:rgba(28,28,30,.72)}.toast.success{background:rgba(52,199,89,.78)}.toast.error{background:rgba(255,59,48,.78)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.app{max-width:1300px;margin:0 auto;padding:64px 20px 48px;position:relative;z-index:2;width:100%}
.hero{text-align:center;margin-bottom:64px;position:relative;padding:48px 32px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);box-shadow:0 24px 80px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 1px rgba(255,255,255,.1);animation:heroFloat 6s ease-in-out infinite;transform-style:preserve-3d;perspective:1000px}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.002)}}
.hero .brand-logo{font-size:14px;font-weight:600;letter-spacing:1.2px;color:rgba(255,255,255,.45);margin-bottom:24px;text-transform:uppercase;display:inline-block;padding:6px 14px;border-radius:var(--r-full);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
.hero .main-title{font-family:var(--font-primary);font-size:clamp(3.5rem,8vw,5.5rem);font-weight:800;letter-spacing:-0.02em;line-height:1;margin:0 0 8px;background:linear-gradient(135deg,#ffffff 0%,#a0c8ff 30%,#7ab8ff 60%,#ffffff 100%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:titleFlow 8s ease-in-out infinite;text-shadow:0 0 40px rgba(100,180,255,.2)}
@keyframes titleFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero .sub-title{font-family:var(--font-secondary);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;letter-spacing:-0.01em;line-height:1.2;color:rgba(255,255,255,.75);margin:0 0 12px;opacity:.9}
.hero .tagline{font-size:clamp(1rem,1.5vw,1.125rem);font-weight:400;letter-spacing:0.02em;line-height:1.4;color:rgba(255,255,255,.5);max-width:600px;margin:0 auto}
.upload-zone{position:relative;border-radius:24px;padding:56px 32px;text-align:center;cursor:pointer;transition:transform var(--spring),background-color var(--t),box-shadow var(--t),border-color var(--t);background:rgba(255,255,255,.06);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);margin-bottom:32px;box-shadow:0 8px 32px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 1px rgba(255,255,255,.08);z-index:1;overflow:hidden;will-change:transform}
.upload-zone::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.03),rgba(255,255,255,.06)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:2;transition:opacity var(--t)}
.upload-zone:hover,.upload-zone.drag-over{background:rgba(255,255,255,.1);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);box-shadow:0 16px 48px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.15),inset 0 1px 1px rgba(255,255,255,.15);transform:translateY(-3px)}
.upload-zone:hover::before{opacity:0}
.upload-zone::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--angle,0deg),rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0),rgba(100,180,255,.15),rgba(255,255,255,0));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:0;opacity:.5;transition:opacity .6s var(--spring);animation:edgeRotate 12s linear infinite}
.upload-zone:hover::after,.upload-zone.drag-over::after{opacity:.85}
.upload-zone .icon{width:56px;height:56px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(100,170,255,.15);color:#5aa0f0;font-size:24px;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:iconFloat 4s ease-in-out infinite;transition:transform .3s var(--spring),box-shadow .3s var(--spring);box-shadow:0 0 24px rgba(100,170,255,.15)}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.upload-zone:hover .icon{transform:scale(1.1);box-shadow:0 0 36px rgba(100,170,255,.3)}
.upload-zone .title{font-family:var(--font-primary);font-size:20px;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.85);pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.1)}
.upload-zone .hint{font-size:13px;color:rgba(255,255,255,.4);margin-top:6px;pointer-events:none;font-weight:400}
.upload-zone .mode-switch{display:flex;gap:8px;justify-content:center;margin-top:14px;pointer-events:auto}
.upload-zone .mode-btn{padding:9px 20px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);font-size:13px;font-weight:500;cursor:pointer;transition:transform var(--spring),background-color var(--t),border-color var(--t),box-shadow var(--t),color var(--t);font-family:var(--font);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.upload-zone .mode-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.2)}
.upload-zone .mode-btn.active{background:rgba(100,170,255,.18);border-color:rgba(100,170,255,.35);color:#7ab8ff;font-weight:600;box-shadow:0 0 16px rgba(100,170,255,.12)}

/* Main layout */
.main-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media(max-width:1100px){.main-layout{grid-template-columns:1fr;gap:20px}}
.main-layout.batch-mode{grid-template-columns:1fr}

/* Card */
.card{position:relative;background:rgba(255,255,255,.05);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r-lg);box-shadow:0 8px 32px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.06);overflow:hidden;transition:box-shadow var(--t),transform var(--t)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03),rgba(255,255,255,.06)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:2}
.spotlight{position:relative}.spotlight::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--spotlight-x,50%) var(--spotlight-y,50%),var(--spotlight-color),transparent 60%);pointer-events:none;z-index:3;opacity:var(--spotlight-opacity,0);transition:opacity .4s ease}
.card-hd{padding:16px 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px;letter-spacing:-.01em;position:relative}
.card-bd{padding:20px;position:relative}

/* Preview */
.preview-stack{display:flex;flex-direction:column;gap:16px}
.preview-box{background:rgba(18,18,20,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--r-md);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;min-height:100px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 16px rgba(0,0,0,.2);transition:width var(--spring),height var(--spring),background-color var(--t),box-shadow var(--t),filter var(--t);contain:layout paint}
.preview-box.has-canvas{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;min-height:0;align-items:flex-start;justify-content:flex-start;overflow:visible;contain:layout;transition:background-color var(--t),box-shadow var(--t),filter var(--t)}
.preview-box img{max-width:100%;max-height:480px;object-fit:contain;display:block}
.preview-box canvas{display:block;cursor:default;image-rendering:auto;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.preview-box canvas.has-wm{cursor:grab}.preview-box canvas.dragging{cursor:grabbing}
/* Boost interaction-layer GPU compositing during drag */
.preview-box canvas.dragging + canvas,
canvas.dragging{will-change:transform;transform:translateZ(0)}
/* Reduce backdrop-filter overhead on ancestor during drag */
.app.is-dragging .hero,
.app.is-dragging .card,
.app.is-dragging .cat-card,
.app.is-dragging .upload-zone{backdrop-filter:none;-webkit-backdrop-filter:none}
.app.is-dragging .hero{animation-play-state:paused}
.app.is-dragging .hero .main-title{animation-play-state:paused}
.app.is-dragging .upload-zone .icon{animation-play-state:paused}
.app.is-dragging .upload-zone::after{animation-play-state:paused}
.preview-box .empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.5);font-size:14px;text-align:center}
.drag-tip{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.15);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:#fff;font-size:11px;padding:5px 14px;border-radius:var(--r-full);pointer-events:none;opacity:0;transition:opacity .3s;box-shadow:var(--glass-shadow)}
.drag-tip.show{opacity:1}
/* Preview stack overrides (single mode) */
.preview-stack .card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:none}
.preview-stack .card::before{display:none}
.preview-stack .card-hd{border-bottom:none;padding-bottom:6px;color:rgba(255,255,255,.35);font-weight:500}
.preview-stack .card-bd{padding:0}


/* Category grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:16px}
.cat-card{background:rgba(255,255,255,.05);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r-md);box-shadow:0 8px 32px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.06);overflow:hidden;transition:transform var(--spring),box-shadow var(--t),background-color var(--t);cursor:default}
.cat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03),rgba(255,255,255,.06)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:2}
.cat-card{position:relative}
.cat-hd{padding:12px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}
.cat-hd .cat-count{font-size:11px;color:rgba(255,255,255,.4);font-weight:400}
.cat-bd{padding:10px 14px 14px}
.cat-thumbs{display:flex;flex-wrap:wrap;gap:6px;max-height:80px;overflow:hidden}
.cat-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform var(--spring),opacity var(--t),border-color var(--t),box-shadow var(--t);opacity:.7}
.cat-thumb:hover{opacity:1;border-color:rgba(0,122,255,.5)}
.cat-thumb.active{border-color:var(--accent);opacity:1;box-shadow:0 0 0 2px rgba(0,122,255,.25)}
.cat-thumb.done{border-color:rgba(52,199,89,.6);opacity:1}
.cat-setup-btn{display:block;width:100%;margin-top:8px;padding:7px 0;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);font-size:12px;font-weight:500;cursor:pointer;transition:transform var(--spring),background-color var(--t),border-color var(--t),box-shadow var(--t),color var(--t);font-family:var(--font);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cat-setup-btn:hover{background:rgba(100,170,255,.12);border-color:rgba(100,170,255,.3);color:#7ab8ff}
.cat-setup-btn.done{background:rgba(52,199,89,.08);border-color:rgba(52,199,89,.3);color:#34c759}

/* Params */
.param-sec{margin-bottom:16px}.param-sec:last-child{margin-bottom:0}
.param-label{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:6px;letter-spacing:-.01em}.param-label .muted{font-weight:400;color:rgba(255,255,255,.4);margin-left:4px}
.segmented{display:flex;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--r-sm);padding:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.segmented button{flex:1;padding:7px 0;border:none;background:transparent;font-size:12px;font-weight:500;color:var(--text-tertiary);border-radius:7px;cursor:pointer;transition:transform var(--spring),background-color var(--t),box-shadow var(--t),color var(--t);font-family:var(--font)}
.segmented button:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.15)}
.segmented button.active{background:rgba(255,255,255,.18);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:rgba(255,255,255,.9);box-shadow:0 8px 32px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.08);font-weight:600}
input[type="text"],input[type="number"],select{width:100%;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:13px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);outline:none;transition:all var(--t);font-family:var(--font);-webkit-appearance:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
input:focus,select:focus{border-color:#5aa0f0;background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(100,170,255,.1),inset 0 1px 0 rgba(255,255,255,.1)}
input[type="color"]{padding:3px 5px;height:34px;cursor:pointer}input[type="range"]{width:100%;accent-color:var(--accent)}
.row{display:flex;gap:10px}.row>*{flex:1}.inline-label{font-size:11px;color:var(--text-secondary);float:right;margin-top:2px}
.param-panel{overflow:hidden;transition:max-height .35s cubic-bezier(.25,.1,.25,1),opacity .3s ease;max-height:500px;opacity:1}
.param-panel.hidden{max-height:0;opacity:0;pointer-events:none;margin:0}

/* WM drop zone */
.wm-drop-zone{border:1px solid rgba(255,255,255,.15);border-radius:var(--r-sm);padding:16px 14px;text-align:center;cursor:pointer;transition:all var(--t);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.wm-drop-zone:hover,.wm-drop-zone.drag-over{border-color:rgba(0,122,255,.4);background:var(--accent-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 3px rgba(0,122,255,.08),inset 0 1px 0 rgba(255,255,255,.2)}
.wm-drop-zone .plus{font-size:24px;color:var(--text-tertiary);margin-bottom:4px;pointer-events:none}
.wm-drop-zone .txt{font-size:12px;color:var(--text-secondary);pointer-events:none}
.wm-drop-zone.has-image{border-color:rgba(0,122,255,.4);background:rgba(0,122,255,.08)}
.wm-drop-zone.has-image .plus{color:var(--accent)}.wm-drop-zone.has-image .txt{color:var(--accent);font-weight:500}
.wm-preview-thumb{max-width:100%;max-height:56px;border-radius:4px;margin-top:6px;display:none}.wm-preview-thumb.show{display:inline}

/* Pos grid */
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}
.pos-cell{aspect-ratio:1.4;border:1px solid rgba(255,255,255,.15);border-radius:6px;cursor:pointer;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform var(--spring),background-color var(--t),border-color var(--t),box-shadow var(--t),color var(--t);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-tertiary)}
.pos-cell:hover{border-color:rgba(0,122,255,.4);background:rgba(255,255,255,.15)}
.pos-cell.active{background:rgba(0,122,255,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border-color:rgba(0,122,255,.6);font-weight:600;box-shadow:0 4px 16px rgba(0,122,255,.25)}
.coord-row{display:flex;gap:8px;align-items:center}.coord-row input{width:68px;text-align:center}.coord-row .sep{color:var(--text-secondary);font-size:13px}
.custom-badge{display:none;font-size:11px;color:var(--accent);margin-bottom:6px;font-weight:600}.custom-badge.show{display:block}

/* Control panel header (single mode) */
.control-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:default}
.control-panel-header.draggable{cursor:grab}
.control-panel-header.dragging{cursor:grabbing}
.control-panel-header .drag-toggle-btn{background:none;border:none;color:#999;font-size:11px;font-weight:500;padding:5px 8px;cursor:pointer;transition:all var(--t);font-family:var(--font);display:inline-flex;align-items:center;gap:4px;box-shadow:none}
.control-panel-header .drag-toggle-btn:hover{color:#666;text-decoration:underline}
.control-panel-header .drag-toggle-btn.active{color:var(--accent);font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:11px 26px;font-size:14px;font-weight:600;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.28);cursor:pointer;transition:transform var(--spring),background-color var(--t),box-shadow var(--t),border-color var(--t),filter var(--t),color var(--t);font-family:var(--font);white-space:nowrap;position:relative;letter-spacing:0;overflow:hidden;text-shadow:0 1px 0 rgba(255,255,255,.16);isolation:isolate;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.62),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.1));opacity:0;pointer-events:none;z-index:0;transition:opacity var(--t)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:var(--liquid-edge) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:2}
.btn-primary{background:linear-gradient(145deg,rgba(100,170,255,.7),rgba(120,190,255,.5) 52%,rgba(80,150,240,.6));color:#fff;backdrop-filter:blur(22px) saturate(190%) brightness(1.08);-webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.08);box-shadow:0 10px 30px rgba(100,170,255,.26),inset 0 1px 1px rgba(255,255,255,.48),inset 0 -1px 0 rgba(50,100,180,.18)}
.btn-primary:hover{filter:saturate(1.08) brightness(1.04);box-shadow:0 15px 38px rgba(100,170,255,.3),inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 0 rgba(50,100,180,.14);transform:translate3d(0,-1px,0) scale(1.012)}
.btn-primary:active{transform:translate3d(0,0,0) scale(.985);box-shadow:0 5px 16px rgba(100,170,255,.18),inset 0 1px 0 rgba(255,255,255,.32)}
.btn-primary:disabled{background:rgba(180,180,190,.25);color:rgba(255,255,255,.45);cursor:not-allowed;box-shadow:none;transform:none}
.btn-primary:disabled::before,.btn-primary:disabled::after{display:none}
.btn-secondary{background:var(--liquid-surface);backdrop-filter:blur(22px) saturate(190%) brightness(1.08);-webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.08);color:var(--text-primary);box-shadow:var(--liquid-shadow)}
.btn-secondary:hover{background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.28) 48%,rgba(255,255,255,.14));box-shadow:0 14px 34px rgba(31,35,42,.18),inset 0 1px 1px rgba(255,255,255,.76),inset 0 -1px 0 rgba(255,255,255,.2);transform:translate3d(0,-1px,0) scale(1.012)}
.btn-secondary:active{transform:translate3d(0,0,0) scale(.985);box-shadow:0 4px 12px rgba(31,35,42,.12),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-sm{padding:7px 14px;font-size:12px;box-shadow:0 2px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-danger{background:rgba(255,59,48,.15);color:#ff3b30;border:1px solid rgba(255,59,48,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-danger:hover{background:rgba(255,59,48,.25);border-color:rgba(255,59,48,.5)}

/* Action bar */
.action-bar{margin-top:24px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.progress-wrap{width:100%;display:none;margin-bottom:14px}.progress-wrap.active{display:block}
.progress-outer{height:5px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.progress-inner{height:100%;background:linear-gradient(90deg,var(--accent),#5ac8fa);border-radius:99px;width:0%;transition:width .4s cubic-bezier(.2,.1,.2,1);box-shadow:0 0 12px rgba(0,122,255,.3)}
.progress-label{font-size:12px;color:var(--text-secondary);margin-top:6px;text-align:center}
.status-note{font-size:11px;color:var(--text-secondary);text-align:center;margin-top:6px}

/* Interaction layer optimization */
.interaction-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: auto;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: strict;
  will-change: transform;
  isolation: isolate;
}

/* 【五】拖拽时关闭 backdrop-filter 合成 */
.app.is-dragging .card,
.app.is-dragging .hero,
.app.is-dragging .upload-zone,
.app.is-dragging .cat-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Setup overlay */
.setup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.setup-overlay.show{opacity:1;pointer-events:auto}
.setup-panel{background:rgba(255,255,255,.18);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border-radius:var(--r-lg);box-shadow:var(--glass-shadow-lg);padding:24px;max-width:1100px;width:95%;max-height:90vh;overflow-y:auto;position:relative}
.setup-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.06),rgba(255,255,255,.12)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:2}
.setup-panel>*{position:relative;z-index:3}
.setup-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.setup-hd h3{font-size:18px;font-weight:600}
.setup-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media(max-width:900px){.setup-body{grid-template-columns:1fr}}
.setup-control-panel{position:sticky;top:0}
.setup-preview-card{min-width:0}
.close-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:var(--liquid-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-secondary);transition:transform var(--spring),background-color var(--t),border-color var(--t),box-shadow var(--t),color var(--t);box-shadow:var(--liquid-shadow);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
.close-btn:hover{background:rgba(255,59,48,.2);color:#ff3b30;border-color:rgba(255,59,48,.4)}
.drag-toggle-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2);color:rgba(60,60,67,.62);font-size:11px;font-weight:500;padding:6px 10px;cursor:pointer;transition:transform var(--spring),background-color var(--t),box-shadow var(--t),border-color var(--t),color var(--t);font-family:var(--font);display:inline-flex;align-items:center;gap:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45);border-radius:var(--r-sm);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%)}
.drag-toggle-btn:hover{color:var(--text-primary);background:rgba(255,255,255,.32);box-shadow:var(--liquid-shadow);transform:translate3d(0,-1px,0)}
.drag-toggle-btn.active{color:var(--accent);font-weight:600;background:rgba(0,122,255,.16);border-color:rgba(0,122,255,.25)}
.setup-panel.dragging-user{cursor:move!important}
.setup-panel.dragging-user .setup-body,.setup-panel.dragging-user .setup-hd button:not(.drag-toggle-btn){pointer-events:none}
.setup-panel.dragging-active{cursor:grabbing!important;transition:none!important}
.setup-panel.drag-enabled .drag-toggle-btn{cursor:grab}
.card.spotlight.dragging-user{cursor:move!important}
.card.spotlight.dragging-user .card-bd,.card.spotlight.dragging-user button:not(.drag-toggle-btn){pointer-events:none}
.card.spotlight.dragging-active{cursor:grabbing!important;transition:none!important;box-shadow:0 8px 40px rgba(0,0,0,.25)!important}

/* Template image in setup */
.template-img{max-width:100%;max-height:400px;object-fit:contain;display:block;margin:0 auto;border-radius:var(--r-sm)}

/* Batch info bar */
.batch-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;padding:16px 20px;background:rgba(100,170,255,.06);border-radius:var(--r-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(100,170,255,.1)}
.batch-info .info-text{font-size:13px;font-weight:500;color:#7ab8ff}
.batch-info .info-text.muted{color:rgba(255,255,255,.35);font-weight:400;font-size:12px}

/* Mouse tracking */
.mode-btn,.cat-setup-btn,.segmented button,.pos-cell,.close-btn,.drag-toggle-btn{position:relative;overflow:hidden;isolation:isolate}
.mode-btn::before,.cat-setup-btn::before,.segmented button::before,.pos-cell::before,.close-btn::before,.drag-toggle-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,32%),rgba(255,255,255,.5),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.24),transparent);opacity:0;pointer-events:none;z-index:0;transition:opacity var(--t)}
.mode-btn:hover,.cat-setup-btn:hover,.segmented button:hover,.pos-cell:hover,.close-btn:hover{transform:translate3d(0,-1px,0)}
.mode-btn:active,.cat-setup-btn:active,.segmented button:active,.pos-cell:active,.close-btn:active,.drag-toggle-btn:active{transform:translate3d(0,0,0) scale(.985)}
.btn:hover::before,.btn:active::before,.mode-btn:hover::before,.cat-setup-btn:hover::before,.segmented button:hover::before,.pos-cell:hover::before,.close-btn:hover::before,.drag-toggle-btn:hover::before,.mode-btn:active::before,.cat-setup-btn:active::before,.segmented button:active::before,.pos-cell:active::before,.close-btn:active::before,.drag-toggle-btn:active::before{opacity:.62}
.control-panel-header .drag-toggle-btn:hover{text-decoration:none;color:var(--text-primary)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--text-secondary)}
.empty-state .big-icon{font-size:40px;margin-bottom:12px;color:var(--text-tertiary)}
.empty-state .msg{font-size:14px}

/* Watermark badge on category header */
.cat-wm-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(100,170,255,.15);border-radius:40px;color:#7ab8ff;font-size:11px;font-weight:500;white-space:nowrap;margin-left:8px;line-height:1}
.cat-wm-badge img{width:18px;height:18px;border-radius:3px;flex-shrink:0}

/* ============ LSB INVISIBLE WATERMARK ============ */
.lsb-switch-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:8px}
.lsb-switch-info{display:flex;flex-direction:column;gap:2px}
.lsb-switch-info .lsb-title{font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}
.lsb-switch-info .lsb-subtitle{font-size:11px;color:var(--text-tertiary);font-weight:400}
.lsb-switch{position:relative;width:51px;height:31px;border-radius:31px;background:rgba(255,255,255,.12);cursor:pointer;transition:background .35s cubic-bezier(.2,.1,.2,1),box-shadow .35s cubic-bezier(.2,.1,.2,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.15);flex-shrink:0}
.lsb-switch.active{background:rgba(90,160,240,.55);box-shadow:inset 0 1px 3px rgba(0,0,0,.15),0 0 12px rgba(90,160,240,.25)}
.lsb-switch .lsb-knob{position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.04);transition:transform .35s cubic-bezier(.2,.1,.2,1),box-shadow .35s cubic-bezier(.2,.1,.2,1)}
.lsb-switch.active .lsb-knob{transform:translateX(20px);box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 1px rgba(90,160,240,.2),0 0 16px rgba(90,160,240,.15)}
.lsb-info-toast{position:fixed;top:100px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:var(--r-full);background:rgba(28,28,30,.85);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);color:rgba(255,255,255,.85);font-size:13px;font-weight:500;z-index:9999;pointer-events:none;animation:toastIn .4s cubic-bezier(.2,.1,.2,1);box-shadow:var(--glass-shadow-lg)}

/* Detect overlay modal */
.detect-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;animation:fadeIn .3s ease}
.detect-overlay.show{display:flex}
.detect-panel{width:520px;max-width:92vw;max-height:85vh;background:rgba(28,28,30,.75);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border-radius:var(--r-lg);box-shadow:var(--glass-shadow-lg),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;animation:slideUp .4s cubic-bezier(.19,1,.22,1)}
.detect-hd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.detect-hd h3{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}
.detect-body{padding:22px}
.detect-upload-zone{border:2px dashed rgba(255,255,255,.15);border-radius:var(--r-md);padding:48px 24px;text-align:center;cursor:pointer;transition:border-color var(--t),background var(--t),box-shadow var(--t);background:rgba(255,255,255,.03)}
.detect-upload-zone:hover{border-color:rgba(90,160,240,.4);background:rgba(90,160,240,.06);box-shadow:0 0 24px rgba(90,160,240,.1)}
.detect-upload-zone .icon-inner{width:48px;height:48px;border-radius:50%;background:rgba(90,160,240,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;color:rgba(90,160,240,.8)}
.detect-upload-zone .txt{font-size:13px;color:var(--text-secondary)}
.detect-result{border-radius:var(--r-md);background:rgba(255,255,255,.04);padding:18px;margin-top:16px;border:1px solid rgba(255,255,255,.06)}
.result-status{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.result-status.success{color:#34c759}
.result-status.fail{color:#ff3b30}
.result-info{font-size:13px;color:var(--text-secondary);display:flex;flex-direction:column;gap:4px}
.result-info .row{display:flex;gap:8px}
.result-info .label{color:var(--text-tertiary);min-width:60px}
.result-info .val{color:var(--text-primary);font-weight:500}
.detect-preview-box{position:relative;margin-top:14px;border-radius:var(--r-sm);overflow:hidden;background:rgba(0,0,0,.3);min-height:150px;display:flex;align-items:center;justify-content:center}
.detect-preview-box img{max-width:100%;max-height:320px;object-fit:contain;display:block}
.detect-preview-box .highlight-box{position:absolute;border:2px solid rgba(90,160,240,.8);border-radius:4px;pointer-events:none;box-shadow:0 0 20px rgba(90,160,240,.4),0 0 60px rgba(90,160,240,.15);animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 16px rgba(90,160,240,.3),0 0 40px rgba(90,160,240,.1)}50%{box-shadow:0 0 28px rgba(90,160,240,.5),0 0 70px rgba(90,160,240,.2)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes scanLine{0%{top:-2px}100%{top:100%}}
.scan-line{position:absolute;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(90,160,240,.6),transparent);animation:scanLine 2s ease-in-out infinite;pointer-events:none}
.lsb-preview-watermark{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;pointer-events:none;animation:fadeIn .5s ease}
.lsb-preview-watermark.show{display:flex}
.lsb-preview-watermark .wm-text{font-size:clamp(28px,8vw,72px);font-weight:700;color:rgba(255,255,255,.9);text-shadow:0 2px 16px rgba(0,0,0,.65),0 0 80px rgba(90,160,240,.3);letter-spacing:.06em;text-align:center;padding:40px;line-height:1.3;transform:rotate(-4deg);animation:wmReveal .6s cubic-bezier(.19,1,.22,1);max-width:90%;word-break:break-word}
.lsb-preview-watermark .wm-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(90,160,240,.88);color:#fff;font-size:12px;font-weight:600;padding:5px 16px;border-radius:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 16px rgba(0,0,0,.35);animation:slideDown .4s ease .2s both;white-space:nowrap}
@keyframes wmReveal{from{opacity:0;transform:rotate(-4deg) scale(.85)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}