/* ===== 基础 ===== */
:root{
  --black:#010305;
  --panel:rgba(2,8,13,0.94);
  --panel-blue:rgba(0,48,80,0.78);
  --panel-blue-strong:rgba(0,77,124,0.92);
  --line:rgba(91,184,239,0.32);
  --line-strong:rgba(104,203,255,0.7);
  --blue:#249ee4;
  --cyan:#7ed0ff;
  --ice:#e7f6ff;
  --text:#dbeaf2;
  --muted:#7892a2;
  --dim:#3c5665;
  --danger:#ff6d68;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
button{border-radius:0}
body{
  font-family:"Microsoft YaHei UI","Noto Sans SC","Segoe UI",Arial,sans-serif;
  background:#03111b;
  color:var(--text);
  display:flex;
  flex-direction:column;
  isolation:isolate;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* ===== 低亮度像素与扫描纹理 ===== */
.scanlines{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.28;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(103,199,255,0.025) 3px 4px),
    radial-gradient(circle,rgba(186,226,248,0.16) 0 0.6px,transparent 0.8px);
  background-size:100% 4px,4px 4px;
}

/* ===== 顶部标题与功能标签 ===== */
.topbar{
  position:relative;
  z-index:5;
  min-height:84px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:10px 18px 8px;
  background:linear-gradient(180deg,rgba(1,3,5,0.99),rgba(1,5,8,0.94));
  border-bottom:1px solid rgba(126,208,255,0.24);
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:min(430px,36vw);
  height:2px;
  background:linear-gradient(90deg,var(--ice),var(--blue) 52%,transparent);
  box-shadow:0 0 8px rgba(36,158,228,0.55);
}
.topbar-title{
  display:flex;
  align-items:flex-end;
  gap:10px;
  min-width:0;
  animation:ui-enter-left 380ms cubic-bezier(0.2,0.8,0.2,1) both;
}
.logo-diamond{
  width:9px;
  height:9px;
  margin-bottom:6px;
  border:1px solid var(--ice);
  transform:rotate(45deg);
  box-shadow:0 0 6px rgba(126,208,255,0.6);
}
.title-stack{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.title-kicker{
  color:var(--muted);
  font:9px/1.2 "Consolas",monospace;
}
.title-stack [data-i18n="title"]{
  max-width:min(620px,55vw);
  overflow:hidden;
  color:#fff;
  font-family:"Bahnschrift Light","Segoe UI Light","Arial Narrow",sans-serif;
  font-size:31px;
  font-stretch:expanded;
  font-weight:300;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  text-overflow:ellipsis;
  -webkit-text-stroke:0;
  text-shadow:none;
}
.title-cn{
  max-width:min(620px,55vw);
  overflow:hidden;
  color:rgba(126,208,255,0.72);
  font:500 11px/1.25 "Microsoft YaHei UI","Noto Sans SC","Segoe UI",sans-serif;
  letter-spacing:0.08em;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topbar-actions{
  display:flex;
  align-items:flex-end;
  gap:2px;
  animation:ui-enter-up 360ms cubic-bezier(0.2,0.8,0.2,1) 70ms both;
}
.btn{
  position:relative;
  overflow:hidden;
  min-width:78px;
  min-height:34px;
  padding:7px 13px;
  background:rgba(1,7,11,0.88);
  color:var(--text);
  border:0;
  border-bottom:2px solid var(--dim);
  font:500 11px/1 inherit;
  cursor:pointer;
  transform:translateY(0) scale(1);
  transform-origin:center bottom;
  transition:
    transform 160ms cubic-bezier(0.2,0.8,0.2,1),
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}
.btn:hover:not(:disabled),.btn:focus-visible:not(:disabled){
  color:var(--ice);
  background:linear-gradient(180deg,rgba(15,79,116,0.88),rgba(0,38,65,0.92));
  border-bottom-color:var(--cyan);
  box-shadow:inset 0 0 12px rgba(73,181,244,0.18);
  text-shadow:0 0 1px #fff,0 0 5px rgba(126,208,255,0.54);
  outline:none;
}
.btn-primary{
  color:var(--ice);
  background:linear-gradient(180deg,rgba(20,103,151,0.94),rgba(0,49,82,0.96));
  border-bottom-color:var(--cyan);
  box-shadow:inset 0 0 15px rgba(107,208,255,0.14),0 0 8px rgba(36,158,228,0.2);
}
#btnUpload,#btnDownload{
  min-width:92px;
  background-color:rgba(0,24,40,0.18);
  background-image:
    linear-gradient(180deg,rgba(20,103,151,0.94),rgba(0,49,82,0.96)),
    radial-gradient(circle,rgba(126,208,255,0.3) 0 0.6px,transparent 0.8px),
    linear-gradient(180deg,rgba(20,103,151,0.2),rgba(0,49,82,0.08));
  background-position:center bottom,0 0,0 0;
  background-repeat:no-repeat,repeat,no-repeat;
  background-size:100% 0%,3px 3px,100% 100%;
  border:1px solid rgba(126,208,255,0.48);
  box-shadow:inset 0 0 15px rgba(107,208,255,0.08),0 0 7px rgba(36,158,228,0.1);
  transition:
    transform 160ms cubic-bezier(0.2,0.8,0.2,1),
    color 150ms ease,
    background-size 260ms cubic-bezier(0.2,0.8,0.2,1),
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}
#btnUpload:hover:not(:disabled),#btnUpload:focus-visible:not(:disabled),
#btnDownload:hover:not(:disabled),#btnDownload:focus-visible:not(:disabled){
  background-color:rgba(0,24,40,0.18);
  background-image:
    linear-gradient(180deg,rgba(20,103,151,0.94),rgba(0,49,82,0.96)),
    radial-gradient(circle,rgba(126,208,255,0.3) 0 0.6px,transparent 0.8px),
    linear-gradient(180deg,rgba(20,103,151,0.2),rgba(0,49,82,0.08));
  background-position:center bottom,0 0,0 0;
  background-repeat:no-repeat,repeat,no-repeat;
  background-size:100% 100%,3px 3px,100% 100%;
  border-color:var(--cyan);
  box-shadow:inset 0 0 15px rgba(107,208,255,0.14),0 0 8px rgba(36,158,228,0.2);
}
.btn:active{
  transform:translateY(1px) scale(0.975);
  transition-duration:60ms;
}
.btn:disabled{
  opacity:0.28;
  cursor:not-allowed;
  color:var(--muted);
  text-shadow:none;
}
.btn.is-busy{cursor:progress;color:var(--cyan)}
.btn.is-busy:disabled{opacity:0.78;cursor:progress}
.btn.is-busy::after{
  content:"";
  position:absolute;
  left:-45%;
  bottom:0;
  width:45%;
  height:2px;
  display:none;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.btn.is-done{animation:button-done 320ms ease-out}

/* ===== 主体布局 ===== */
.main{
  position:relative;
  z-index:1;
  display:flex;
  flex:1;
  min-height:0;
}

/* ===== 左侧素材区 ===== */
.sticker-panel{
  --ambient-opacity:0.075;
  width:360px;
  flex-shrink:0;
  min-height:0;
  position:relative;
  isolation:isolate;
  padding:10px 8px 9px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:
    linear-gradient(90deg,rgba(4,19,29,0.96),rgba(1,7,11,0.94)),
    var(--black);
  border-right:1px solid rgba(64,164,222,0.48);
  box-shadow:5px 0 18px rgba(0,0,0,0.52);
  animation:ui-enter-left 420ms cubic-bezier(0.2,0.8,0.2,1) 80ms both;
}
.ambient-mark{
  width:min(84%,300px);
  height:min(44%,220px);
  position:absolute;
  z-index:0;
  left:50%;
  top:65%;
  object-fit:contain;
  opacity:0;
  filter:saturate(0) brightness(1.2);
  transform:translate(-50%,-50%);
  pointer-events:none;
  user-select:none;
  transition:opacity 300ms ease;
}
.ambient-mark.is-visible{opacity:var(--ambient-opacity)}
.panel-heading,.category-tabs,.sticker-grid,.photo-adjust-slot{
  position:relative;
  z-index:1;
}
.panel-heading{
  min-height:50px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 6px;
  align-items:center;
  gap:9px;
  padding:6px 8px;
  background:
    linear-gradient(180deg,rgba(0,79,119,0.78),rgba(0,38,63,0.86));
  border:1px solid rgba(84,191,246,0.5);
  border-left:2px solid var(--cyan);
  box-shadow:inset 0 0 20px rgba(63,182,245,0.08);
}
.panel-index{
  color:var(--cyan);
  font:400 23px/1 "Consolas",monospace;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 7px rgba(66,181,247,0.7);
}
.panel-kicker{
  color:rgba(191,224,241,0.55);
  font:9px/1.25 "Consolas",monospace;
}
.panel-label{
  color:var(--ice);
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  text-shadow:0 0 1px rgba(255,255,255,0.88),0 0 5px rgba(93,197,255,0.42);
}
.panel-signal{
  width:4px;
  height:26px;
  justify-self:end;
  background:var(--cyan);
  box-shadow:0 0 9px rgba(84,192,250,0.8);
}
.category-tabs{
  display:flex;
  gap:2px;
  overflow-x:auto;
  border-bottom:1px solid rgba(79,169,221,0.28);
}
.category-tab{
  min-width:48px;
  min-height:30px;
  flex:1;
  padding:5px 7px;
  background:rgba(1,7,11,0.84);
  color:var(--muted);
  border:0;
  border-bottom:2px solid transparent;
  font:500 10px/1 inherit;
  cursor:pointer;
  transform:translateY(0) scale(1);
  transform-origin:center bottom;
  transition:
    transform 150ms cubic-bezier(0.2,0.8,0.2,1),
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}
.category-tab.active{
  color:var(--ice);
  background:linear-gradient(180deg,rgba(25,101,143,0.75),rgba(0,45,74,0.82));
  border-bottom-color:var(--ice);
  box-shadow:inset 0 0 12px rgba(75,183,241,0.16);
  text-shadow:0 0 1px #fff,0 0 5px rgba(126,208,255,0.58);
}
.category-tab:hover:not(.active):not(:disabled),.category-tab:focus-visible:not(.active):not(:disabled){
  color:var(--ice);
  border-bottom-color:var(--blue);
  outline:none;
}
.category-tab:disabled{
  opacity:0.28;
  cursor:not-allowed;
  color:var(--muted);
  text-shadow:none;
}
.category-tab.active{animation:category-settle 220ms cubic-bezier(0.2,0.8,0.2,1) backwards}
.category-tab:active{
  transform:translateY(1px) scale(0.98);
  transition-duration:60ms;
}
.sticker-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:105px;
  gap:3px;
  flex:1;
  align-content:start;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#176f9b #02070a;
  padding-top:3px;
  padding-bottom:2px;
  scroll-padding-top:3px;
  transition:opacity 180ms ease;
}
.sticker-grid::-webkit-scrollbar{width:7px;height:7px}
.sticker-grid::-webkit-scrollbar-track{background:#02070a}
.sticker-grid::-webkit-scrollbar-thumb{
  background:#176f9b;
  border:1px solid #02070a;
}
.sticker-grid::-webkit-scrollbar-thumb:hover{background:#238fbd}
.sticker-grid::-webkit-scrollbar-corner{background:#02070a}
.sticker-thumb{
  min-width:0;
  height:105px;
  padding:9px 7px 23px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(145deg,rgba(5,22,32,0.96),rgba(0,50,82,0.86));
  color:var(--text);
  border:1px solid rgba(64,155,207,0.45);
  font-family:inherit;
  cursor:pointer;
  transform:translateY(0) scale(1);
  transform-origin:center;
  transition:
    transform 200ms cubic-bezier(0.2,0.8,0.2,1),
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
  animation:item-enter 300ms cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.sticker-thumb.is-loading{
  border-color:rgba(126,208,255,0.82);
  cursor:progress;
}
.sticker-thumb:nth-child(2){animation-delay:35ms}
.sticker-thumb:nth-child(3){animation-delay:70ms}
.sticker-thumb:nth-child(4){animation-delay:105ms}
.sticker-thumb:nth-child(5){animation-delay:140ms}
.sticker-thumb:nth-child(6){animation-delay:175ms}
.sticker-thumb:nth-child(7){animation-delay:210ms}
.sticker-thumb:nth-child(8){animation-delay:245ms}
.sticker-thumb:nth-child(n+9){animation-delay:245ms}
.sticker-grid.is-settled .sticker-thumb{animation:none}
.sticker-thumb::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
  height:1px;
  background:rgba(104,203,255,0.27);
}
.sticker-thumb::after{
  content:"";
  position:absolute;
  top:4px;
  right:5px;
  width:8px;
  height:8px;
  border-top:1px solid rgba(185,229,252,0.65);
  border-right:1px solid rgba(185,229,252,0.65);
}
.sticker-thumb:hover:not(:disabled),.sticker-thumb:focus-visible:not(:disabled){
  background:linear-gradient(145deg,rgba(5,38,57,0.98),rgba(0,75,120,0.94));
  border-color:var(--cyan);
  box-shadow:inset 0 0 16px rgba(61,181,245,0.18),0 0 7px rgba(36,158,228,0.18);
  outline:none;
}
.sticker-thumb:disabled{
  opacity:0.3;
  cursor:not-allowed;
  filter:saturate(0.45);
}
.sticker-thumb.selected-asset{
  background:linear-gradient(145deg,rgba(5,38,57,0.98),rgba(0,75,120,0.94));
  border-color:var(--cyan);
  box-shadow:inset 0 0 16px rgba(61,181,245,0.18),0 0 7px rgba(36,158,228,0.18);
}
.sticker-grid.is-disabled{opacity:0.52}
.sticker-thumb:active{
  transform:translateY(0) scale(0.985);
  transition-duration:70ms;
}
.sticker-thumb img{max-width:100%;max-height:68px;object-fit:contain;opacity:0;transition:opacity 180ms ease}
.sticker-thumb img.is-loaded{opacity:1}
.sticker-thumb.asset-missing{border-style:dashed}
.no-frame-thumb{background:rgba(1,9,15,0.88)}
.no-frame-mark{
  color:var(--muted);
  font:300 30px/1 "Segoe UI Light",Arial,sans-serif;
}
.thumb-name{
  position:absolute;
  left:7px;
  right:7px;
  bottom:6px;
  color:rgba(217,239,251,0.78);
  font:500 9px/1 "Microsoft YaHei UI","Noto Sans SC","Segoe UI",sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.photo-adjust-slot{flex:none;width:100%}
.photo-adjust-button{
  width:100%;
  min-height:32px;
  padding:7px 10px;
  position:relative;
  overflow:hidden;
  color:var(--muted);
  background-color:rgba(0,24,40,0.18);
  background-image:
    linear-gradient(90deg,rgba(20,103,151,0.94),rgba(0,49,82,0.96)),
    radial-gradient(circle,rgba(126,208,255,0.3) 0 0.6px,transparent 0.8px),
    linear-gradient(90deg,rgba(20,103,151,0.2),rgba(0,49,82,0.08));
  background-position:left center,0 0,0 0;
  background-repeat:no-repeat,repeat,no-repeat;
  background-size:0% 100%,3px 3px,100% 100%;
  border:1px solid rgba(126,208,255,0.38);
  border-left:2px solid rgba(126,208,255,0.62);
  box-shadow:inset 0 0 15px rgba(107,208,255,0.06),0 0 7px rgba(36,158,228,0.08);
  font:500 10px/1.35 inherit;
  text-align:left;
  cursor:pointer;
  transform:scale(1);
  transform-origin:left center;
  transition:
    transform 160ms cubic-bezier(0.2,0.8,0.2,1),
    color 150ms ease,
    background-size 260ms cubic-bezier(0.2,0.8,0.2,1),
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}
.photo-adjust-button:hover:not(:disabled),.photo-adjust-button:focus-visible:not(:disabled),
.photo-adjust-button.active{
  color:var(--ice);
  background-size:100% 100%,3px 3px,100% 100%;
  border-color:var(--cyan);
  box-shadow:inset 0 0 15px rgba(107,208,255,0.14),0 0 8px rgba(36,158,228,0.2);
  text-shadow:0 0 1px #fff,0 0 5px rgba(126,208,255,0.54);
  outline:none;
}
.photo-adjust-button:active:not(:disabled){
  transform:scale(0.99);
  transition-duration:60ms;
}
.photo-adjust-button:disabled{
  opacity:0.28;
  color:var(--muted);
  cursor:not-allowed;
  text-shadow:none;
}

/* ===== 画布区域 ===== */
.canvas-container{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#03101a;
}
.canvas-stage{
  width:100%;
  flex:1;
  min-height:0;
  position:relative;
  z-index:5;
  container-type:size;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(34,120,160,0.30),rgba(8,43,61,0.18) 56%,transparent 78%),
    repeating-linear-gradient(180deg,rgba(126,208,255,0.04) 0,rgba(126,208,255,0.04) 1px,transparent 1px,transparent 4px),
    linear-gradient(rgba(73,163,213,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(73,163,213,0.04) 1px,transparent 1px),
    linear-gradient(160deg,#0a2434 0%,#061824 46%,#020d16 100%);
  background-size:auto,auto 4px,44px 44px,44px 44px,auto;
  background-repeat:no-repeat,repeat,repeat,repeat,no-repeat;
}
.canvas-stage canvas{
  position:relative;
  z-index:1;
  width:92%;
  width:min(92cqw,152.8889cqh);
  height:auto;
  aspect-ratio:16/9;
  background:#02070b;
  border:1px solid rgba(166,226,255,0.72);
  outline:1px solid rgba(80,190,245,0.4);
  outline-offset:5px;
  box-shadow:0 22px 80px rgba(0,0,0,0.68),0 0 0 1px rgba(1,8,12,0.62),0 0 70px rgba(26,119,170,0.30);
  touch-action:none;
  animation:canvas-materialize 440ms cubic-bezier(0.2,0.8,0.2,1) 120ms both;
}
.canvas-corner-tl,.canvas-corner-tr,.canvas-corner-bl,.canvas-corner-br{
  position:absolute;
  z-index:2;
  width:20px;
  height:20px;
  pointer-events:none;
}
.canvas-corner-tl{
  top:calc(var(--canvas-top-gap,7%) - 4px);left:calc(var(--canvas-left-gap,4%) - 4px);
  border-top:1px solid var(--ice);border-left:1px solid var(--ice);
}
.canvas-corner-tr{
  top:calc(var(--canvas-top-gap,7%) - 4px);right:calc(var(--canvas-right-gap,4%) - 4px);
  border-top:1px solid rgba(190,229,248,0.55);border-right:1px solid rgba(190,229,248,0.55);
}
.canvas-corner-bl{
  bottom:calc(var(--canvas-bottom-gap,7%) - 4px);left:calc(var(--canvas-left-gap,4%) - 4px);
  border-bottom:1px solid rgba(190,229,248,0.55);border-left:1px solid rgba(190,229,248,0.55);
}
.canvas-corner-br{
  bottom:calc(var(--canvas-bottom-gap,7%) - 4px);right:calc(var(--canvas-right-gap,4%) - 4px);
  border-bottom:1px solid var(--ice);border-right:1px solid var(--ice);
}
.canvas-meta{
  position:absolute;
  z-index:2;
  top:10px;
  left:16px;
  display:flex;
  gap:16px;
  color:var(--muted);
  font:10px/1 "Consolas",monospace;
  font-variant-numeric:tabular-nums;
  animation:ui-fade-in 280ms ease-out 180ms both;
}
.canvas-meta span:first-child{
  color:var(--ice);
  text-shadow:0 0 5px rgba(88,194,252,0.55);
}
.canvas-mode{
  position:absolute;
  z-index:2;
  top:10px;
  right:16px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font:10px/1 "Consolas",monospace;
  font-variant-numeric:tabular-nums;
  animation:ui-fade-in 280ms ease-out 220ms both;
}
.mode-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 9px rgba(71,184,247,0.9);
}
.canvas-control-row{
  --dock-h:92px;
  position:relative;
  z-index:6;
  width:100%;
  height:var(--dock-h);
  min-height:var(--dock-h);
  flex:none;
  display:flex;
  justify-content:center;
  background:linear-gradient(180deg,rgba(1,7,11,0.94),rgba(0,15,25,0.99));
  border-top:1px solid rgba(99,190,240,0.28);
  box-shadow:0 -10px 30px rgba(0,0,0,0.42);
}
.param-dock{
  width:min(100%,820px);
  height:100%;
  display:flex;
  flex-direction:column;
}
.dock-rail{
  height:34px;
  flex:none;
  display:flex;
  align-items:stretch;
  padding:0 12px;
  border-bottom:1px solid rgba(99,190,240,0.14);
}
.rail-group{display:flex;align-items:center;gap:1px}
.rail-right{justify-content:flex-end;min-width:252px}
.rail-sep{width:1px;height:15px;align-self:center;background:rgba(126,208,255,0.18);margin:0 12px}
.rail-modes{display:flex;align-items:stretch;gap:2px;margin:0 auto}
.dock-ico{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.rail-action{
  height:34px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  position:relative;
  background:none;
  border:0;
  font-family:inherit;
  color:var(--ice);
  opacity:0.82;
  font-size:9px;
  letter-spacing:0.1em;
  transition:opacity 160ms ease,color 160ms ease,transform 120ms cubic-bezier(0.2,0.8,0.2,1);
}
.rail-action .dock-ico{transition:transform 160ms cubic-bezier(0.2,0.8,0.2,1)}
.rail-action .rail-label{color:var(--muted);font-size:9px;letter-spacing:0.12em;white-space:nowrap;transition:color 160ms ease}
.rail-action:hover:not(:disabled),.rail-action:focus-visible:not(:disabled){opacity:1}
.rail-action:hover:not(:disabled) .dock-ico{transform:translateY(-1px)}
.rail-action:hover:not(:disabled) .rail-label{color:var(--ice)}
.rail-action:active:not(:disabled){transform:translateY(1px)}
.rail-action:focus-visible{outline:1px solid var(--cyan);outline-offset:-2px}
.rail-action::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:0;
  height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  opacity:0;
  transition:transform 160ms cubic-bezier(0.2,0.8,0.2,1),opacity 160ms ease;
}
.rail-action:hover:not(:disabled)::after,.rail-action:focus-visible:not(:disabled)::after{
  transform:scaleX(1);
  opacity:0.7;
}
.rail-action:disabled{opacity:0.22;cursor:not-allowed}
.rail-action.danger{color:#ffaaa6}
.rail-action.danger:hover:not(:disabled),.rail-action.danger:focus-visible:not(:disabled){
  color:#fff;
}
.rail-action.danger:hover:not(:disabled)::after,.rail-action.danger:focus-visible:not(:disabled)::after{background:#ff6d68}
.rail-action.on{opacity:1}
.rail-action.on .rail-label{color:var(--ice)}
.rail-action.on::after{
  height:2px;
  transform:scaleX(1);
  opacity:1;
  box-shadow:0 0 9px rgba(126,208,255,0.4);
}
.rail-mode{
  min-width:94px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0 10px;
  position:relative;
  background:none;
  border:0;
  font-family:inherit;
  color:var(--muted);
  font-size:10px;
  letter-spacing:0.1em;
  transition:color 160ms ease,opacity 160ms ease,transform 120ms cubic-bezier(0.2,0.8,0.2,1);
}
.mode-ico{
  width:22px;
  height:22px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  transition:transform 160ms cubic-bezier(0.2,0.8,0.2,1),filter 160ms ease;
}
.rail-mode:hover:not(:disabled){color:var(--ice)}
.rail-mode:hover:not(:disabled) .mode-ico{transform:translateY(-1px)}
.rail-mode:active:not(:disabled){transform:translateY(1px)}
.rail-mode:focus-visible{outline:1px solid var(--cyan);outline-offset:-2px}
.rail-mode::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,rgba(126,208,255,0),var(--ice) 18%,var(--ice) 82%,rgba(126,208,255,0));
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform 180ms cubic-bezier(0.2,0.8,0.2,1),opacity 180ms ease;
  box-shadow:0 0 12px rgba(126,208,255,0.42);
}
.rail-mode:hover:not(:disabled)::after{transform:scaleX(0.55);opacity:0.7}
.rail-mode.active{color:var(--ice);text-shadow:0 0 8px rgba(126,208,255,0.24)}
.rail-mode.active::after{transform:scaleX(1);opacity:1}
.rail-mode.active .mode-ico{filter:drop-shadow(0 0 4px rgba(126,208,255,0.34))}
.rail-mode:disabled{opacity:0.24;cursor:not-allowed}
.dock-panel{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 14px;
  position:relative;
}
.dock-info{
  width:150px;
  flex:none;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:0;
  padding-right:14px;
  border-right:1px solid rgba(126,208,255,0.14);
  text-align:left;
}
.dock-name{
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ice);
  font-size:11px;
  font-weight:500;
}
.dock-body{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dock-transform{width:430px;max-width:100%;display:flex;flex-direction:column;justify-content:center;gap:2px}
.dock-brightness{width:430px;max-width:100%;display:flex;flex-direction:column;justify-content:center}
.param-row{
  display:grid;
  grid-template-columns:44px 250px 54px;
  align-items:center;
  gap:12px;
  height:24px;
  padding:0 8px;
  position:relative;
  transition:background 160ms ease,box-shadow 160ms ease;
}
.param-label{color:var(--muted);font-size:10px;letter-spacing:0.14em;white-space:nowrap;transition:color 160ms ease}
.param-value{color:var(--ice);font:10px/1 "Consolas",monospace;text-align:right;font-variant-numeric:tabular-nums;transition:color 160ms ease,text-shadow 160ms ease}
.param-row:hover{
  background:linear-gradient(90deg,rgba(20,105,151,0.18),rgba(4,34,52,0.03));
}
.param-row.is-active,.param-row:focus-within{
  background:linear-gradient(90deg,rgba(23,118,168,0.55) 0%,rgba(15,80,115,0.32) 52%,rgba(5,44,66,0.08) 100%);
  box-shadow:inset 0 1px rgba(126,208,255,0.28),inset 0 -1px rgba(126,208,255,0.22),0 0 18px rgba(18,95,140,0.12);
}
.param-row.is-active .param-label,.param-row:focus-within .param-label{color:var(--ice);text-shadow:0 0 8px rgba(126,208,255,0.25)}
.param-row.is-active .param-value,.param-row:focus-within .param-value{text-shadow:0 0 8px rgba(126,208,255,0.35)}
.param-slider{
  position:relative;
  height:18px;
  margin:0 4px;
  cursor:ew-resize;
  touch-action:none;
}
.param-slider:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}
.param-track{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(126,208,255,0.28);transform:translateY(-0.5px);transition:background 160ms ease}
.param-fill{position:absolute;left:0;top:50%;height:1px;background:rgba(231,246,255,0.82);transform:translateY(-0.5px)}
.param-slider:hover .param-track,.param-row.is-active .param-track{background:rgba(126,208,255,0.46)}
.param-handle{
  position:absolute;
  top:50%;
  width:3px;
  height:13px;
  background:var(--ice);
  transform:translate(-50%,-50%);
  box-shadow:0 0 7px rgba(126,208,255,0.75);
  transition:height 140ms cubic-bezier(0.2,0.8,0.2,1),box-shadow 160ms ease;
}
.param-slider:hover .param-handle,.param-row.is-active .param-handle{height:17px;box-shadow:0 0 12px rgba(126,208,255,0.95)}
.param-slider:active .param-handle{height:19px}
.dock-color{width:100%;display:flex;flex-direction:column;gap:3px;justify-content:center}
.color-head{
  display:grid;
  grid-template-columns:44px 22px auto 22px 1fr;
  align-items:center;
  gap:8px;
  height:24px;
  padding:0 8px;
}
.color-step{
  width:22px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  font-family:inherit;
  color:var(--ice);
  font:15px/1 Arial,sans-serif;
  opacity:0.8;
  transition:opacity 140ms ease,transform 140ms cubic-bezier(0.2,0.8,0.2,1);
}
.color-step:hover,.color-step:focus-visible{
  opacity:1;
  outline:none;
  transform:scale(1.1);
}
.color-step:active{transform:scale(0.94)}
.color-current{display:flex;align-items:center;gap:8px;min-width:0}
.color-swatch{
  width:13px;
  height:13px;
  flex:none;
  background:var(--sticker-color,#fff);
  border:1px solid rgba(231,246,255,0.85);
  box-shadow:0 0 7px color-mix(in srgb,var(--sticker-color,#fff) 50%,transparent);
}
.color-name{color:var(--ice);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.color-hint{justify-self:end;color:var(--dim);font:9px/1 "Consolas",monospace;white-space:nowrap}
.color-strip{
  display:grid;
  grid-template-columns:repeat(24,minmax(0,1fr));
  gap:2px;
  height:17px;
  padding:0 8px;
}
.color-cell{
  position:relative;
  min-width:0;
  height:17px;
  padding:0;
  border:1px solid rgba(255,255,255,0.12);
  background:var(--option-color,#fff);
  cursor:pointer;
  transition:transform 120ms cubic-bezier(0.2,0.8,0.2,1),border-color 120ms ease,box-shadow 140ms ease;
}
.color-cell:hover{
  border-color:rgba(255,255,255,0.7);
  transform:translateY(-1px);
  box-shadow:0 0 8px rgba(231,246,255,0.24);
  z-index:1;
}
.color-cell:active{transform:scale(0.94)}
.color-cell:focus-visible{outline:1px solid var(--cyan);outline-offset:1px}
.color-cell[aria-selected="true"]{outline:1px solid #fff;outline-offset:1px;box-shadow:0 0 10px rgba(255,255,255,0.35)}
.color-cell[aria-selected="true"]::before,.color-cell[aria-selected="true"]::after{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  border-color:#fff;
  border-style:solid;
  top:-3px;
}
.color-cell[aria-selected="true"]::before{left:-3px;border-width:1px 0 0 1px}
.color-cell[aria-selected="true"]::after{right:-3px;border-width:1px 1px 0 0}
.dock-hint{
  width:100%;
  color:var(--muted);
  font-size:10px;
  letter-spacing:0.08em;
  text-align:center;
}
.dock-transform[hidden],.dock-color[hidden],.dock-brightness[hidden],.dock-hint[hidden],.dock-info[hidden],.rail-mode[hidden],.rail-action[hidden]{display:none!important}
@keyframes dock-page-in{
  from{opacity:0;transform:translateY(2px)}
  to{opacity:1;transform:translateY(0)}
}
.dock-transform:not([hidden]),.dock-color:not([hidden]),.dock-brightness:not([hidden]),.dock-hint:not([hidden]){
  animation:dock-page-in 140ms ease-out both;
}

.quality-indicator,.history-notice{
  color:var(--muted);
  font:9px/1.2 "Consolas",monospace;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.quality-indicator{
  flex:none;
  min-width:0;
  text-align:right;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(0.2,0.8,0.2,1),
    color 160ms ease,
    display 160ms allow-discrete;
  transition-behavior:allow-discrete;
}
.quality-indicator[hidden]{display:none;opacity:0;transform:translateY(3px)}
@starting-style{
  .quality-indicator:not([hidden]){opacity:0;transform:translateY(3px)}
}
.quality-indicator[data-quality="fair"]{color:var(--ice)}
.quality-indicator[data-quality="low"]{color:#ffaaa6}
.history-notice{
  min-width:0;
  max-width:100%;
  justify-self:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding-left:7px;
  border-left:2px solid var(--cyan);
  color:var(--ice);
  text-align:center;
  opacity:1;
  transition:opacity 180ms ease;
}
.history-notice.is-leaving{opacity:0}
.history-notice.is-entering{animation:notice-enter 160ms cubic-bezier(0.2,0.8,0.2,1) both}
.status-cluster{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}

/* ===== 底部手柄提示栏 ===== */
.bottombar{
  position:relative;
  z-index:5;
  min-height:34px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:14px;
  padding:6px 16px;
  background:linear-gradient(180deg,rgba(1,4,6,0.96),rgba(0,15,25,0.98));
  border-top:1px solid rgba(99,190,240,0.28);
  color:rgba(188,219,235,0.62);
  font:10px/1.2 "Consolas",monospace;
  font-variant-numeric:tabular-nums;
  animation:ui-enter-up 340ms cubic-bezier(0.2,0.8,0.2,1) 160ms both;
}
.terminal-id{
  color:var(--cyan);
  text-shadow:0 0 1px rgba(255,255,255,0.8),0 0 5px rgba(78,184,241,0.46);
}
.mode-status{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
}
.status-text{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ice);
  text-align:right;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 1px rgba(255,255,255,0.86),0 0 5px rgba(78,184,241,0.55);
  transition:opacity 140ms ease,transform 140ms ease;
}
.status-text.is-swapping{
  opacity:0;
  transform:translateY(2px);
  transition-duration:90ms;
}
.legalbar{
  position:relative;
  z-index:5;
  flex:none;
  padding:5px 16px 6px;
  background:#020b12;
  border-top:1px solid rgba(99,190,240,0.12);
  color:rgba(164,195,211,0.5);
  font-size:8px;
  line-height:1.35;
  text-align:center;
  animation:ui-fade-in 300ms ease-out 240ms both;
}

/* 底部状态栏与撤销提示已移除，仅保留最下方版权说明 */
.bottombar{display:none}

@media (hover:hover){
  .btn:hover:not(:disabled){transform:translateY(-1px) scale(1)}
  .category-tab:hover:not(:disabled){transform:translateY(-1px) scale(1)}
  .sticker-thumb:hover:not(:disabled){transform:translateY(-2px) scale(1)}
}

@keyframes ui-enter-left{
  from{opacity:0;transform:translateX(-7px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes ui-enter-up{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes ui-fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes canvas-materialize{
  from{opacity:0;transform:scale(0.995)}
  to{opacity:1;transform:scale(1)}
}
@keyframes item-enter{
  from{opacity:0;transform:translateY(5px) scale(0.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes category-settle{
  from{transform:scaleX(0.985);opacity:0.82}
  to{transform:scaleX(1);opacity:1}
}
@keyframes notice-enter{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes button-busy{
  from{transform:translateX(0)}
  to{transform:translateX(320%)}
}
@keyframes button-done{
  0%{box-shadow:0 0 0 0 rgba(126,208,255,0.5)}
  100%{box-shadow:0 0 0 8px rgba(126,208,255,0)}
}
@keyframes mode-dot-pulse{
  0%,100%{opacity:0.55;box-shadow:0 0 4px rgba(71,184,247,0.5)}
  50%{opacity:1;box-shadow:0 0 11px rgba(71,184,247,0.95)}
}
@keyframes terminal-cursor{
  0%{opacity:1}
  50%{opacity:0}
  100%{opacity:1}
}
@keyframes stage-scan{
  from{transform:translateY(-1px)}
  to{transform:translateY(100cqh)}
}

/* 环境动效：仅在用户未要求减少动态时启用 */
@media (prefers-reduced-motion:no-preference){
  .mode-dot{animation:mode-dot-pulse 3.4s ease-in-out infinite}
  .terminal-id::after{
    content:"";
    display:inline-block;
    width:5px;
    height:9px;
    margin-left:6px;
    vertical-align:-1px;
    background:var(--cyan);
    box-shadow:0 0 6px rgba(84,192,250,0.7);
    animation:terminal-cursor 1.5s step-end infinite;
  }
  .canvas-stage::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(126,208,255,0.22),transparent);
    animation:stage-scan 7.5s linear infinite;
  }
  .btn.is-busy::after{
    display:block;
    animation:button-busy 900ms linear infinite;
  }
}

@media (max-width:1000px) and (min-width:761px){
  .canvas-control-row{--dock-h:108px}
  .param-dock{width:100%}
  .dock-rail{padding:0 6px}
  .rail-action{padding:0 5px;gap:0}
  .rail-action .rail-label{display:none}
  .rail-right{min-width:123px}
  .rail-mode{min-width:76px;padding:0 6px;gap:5px}
  .rail-sep{margin:0 6px}
  .dock-panel{flex-direction:column;justify-content:center;gap:1px;padding:3px 12px}
  .dock-info{
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 8px 2px;
    border-right:0;
  }
  .dock-body{width:100%}
  .dock-transform,.dock-brightness{width:100%}
  .param-row{grid-template-columns:44px minmax(0,1fr) 54px}
  .dock-color{width:100%}
  .color-hint{display:none}
  .color-strip{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,17px);height:auto}
}

@media (max-width:760px){
  html{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }
  body{
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    overflow:visible;
  }
  .topbar{
    min-height:102px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:9px 10px 7px;
  }
  .topbar-title{width:100%}
  .title-stack [data-i18n="title"]{max-width:calc(100vw - 70px);font-size:20px}
  .title-cn{max-width:calc(100vw - 70px);font-size:10px}
  .topbar-actions{width:100%;justify-content:flex-end}
  .btn{min-width:68px;min-height:29px;padding:6px 8px;font-size:10px}
  .main{flex:none;flex-direction:column;overflow:visible}
  .sticker-panel{
    --ambient-opacity:0.06;
    width:100%;
    max-height:245px;
    padding:7px 8px;
    border-right:0;
    border-bottom:1px solid rgba(64,164,222,0.48);
  }
  .ambient-mark{
    width:min(76%,300px);
    height:min(58%,180px);
    top:56%;
  }
  .panel-heading{display:none}
  .category-tabs{flex-wrap:nowrap}
  .category-tab{min-width:56px;flex:none}
  .sticker-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding:3px;
    scroll-padding:3px;
  }
  .sticker-thumb{width:135px;min-width:135px;height:104px}
  .canvas-container{flex:none;min-height:0;overflow:visible}
  .canvas-stage{flex:none;min-height:0;aspect-ratio:16/9}
  .canvas-stage canvas{
    width:94%;
    width:min(94cqw,142.2222cqh);
  }
  .canvas-corner-tl,.canvas-corner-tr,.canvas-corner-bl,.canvas-corner-br{display:none}
  .canvas-meta{left:10px}
  .canvas-mode{right:10px}
  .canvas-control-row{
    --dock-h:112px;
    display:flex;
    justify-content:center;
    padding:0;
    overflow:visible;
    scroll-margin-block:12px;
  }
  .param-dock{width:100%}
  .dock-rail{height:40px;padding:0 4px}
  .rail-action{height:40px;padding:0 5px;gap:0}
  .rail-action .rail-label{display:none}
  .rail-right{min-width:120px}
  .rail-mode{min-width:58px;height:40px;padding:0 5px;gap:5px;font-size:10px}
  .rail-sep{margin:0 3px;height:14px}
  .dock-panel{flex-direction:column;justify-content:center;gap:1px;padding:3px 6px}
  .dock-info{
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:0 6px 1px;
    border-right:0;
  }
  .dock-coords{font-size:8px}
  .dock-body{width:100%}
  .dock-transform,.dock-brightness{width:100%}
  .param-row{grid-template-columns:40px minmax(0,1fr) 48px;height:23px;gap:8px;padding:0 6px}
  .dock-color{width:100%}
  .color-head{grid-template-columns:36px 20px auto 20px 1fr;gap:6px;padding:0 6px;height:24px}
  .color-hint{display:none}
  .color-strip{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,17px);height:auto;padding:0 6px}
  .dock-hint{font-size:9px;padding:0 8px}
  .bottombar{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:6px 10px;
  }
  .terminal-id{display:none}
  .mode-status{min-width:0}
  .legalbar{
    padding:6px 10px calc(6px + env(safe-area-inset-bottom));
    font-size:8px;
    line-height:1.4;
  }
}

@media (max-width:460px){
  .logo-diamond,.title-kicker{display:none}
  .title-stack [data-i18n="title"]{max-width:100%;font-size:18px}
  .title-cn{max-width:100%;font-size:9px;letter-spacing:0.04em}
  .canvas-control-row{overflow:visible}
  .dock-rail{padding:0 2px}
  .rail-action{padding:0 3px}
  .rail-mode{min-width:54px;padding:0 4px;gap:4px}
  .rail-sep{margin:0 2px}
  .quality-indicator{display:none}
  .bottombar{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:0.01ms!important;
  }
  .btn,.category-tab,.photo-adjust-button,.sticker-thumb,.canvas-stage canvas{
    transform:none!important;
  }
  .param-dock,.dock-transform,.dock-color,.dock-brightness,.dock-hint{transform:none!important}
  .rail-action,.rail-mode,.color-step,.color-cell{transform:none!important}
  .mode-ico,.dock-ico{transform:none!important}
}