.menu-scale .menu{
  --brand:49,62,224; --accent:80,200,255; --panel:32,32,42; --line:42,44,58;
  --field:18,18,24; --title:255,255,255; --desc:120,124,150;
  width:1440px;height:1100px;display:flex;overflow:hidden;border-radius:14px;
  background:rgba(8,8,12,.97);box-shadow:0 32px 90px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
  color:#fff;font-family:'Microsoft YaHei','微软雅黑','Segoe UI',system-ui,sans-serif;font-size:14px;
  user-select:none;-webkit-font-smoothing:antialiased;transform-origin:top left;
  transform:scale(.1);transition:transform .28s ease;
}
.menu-scale{position:relative;overflow:hidden;margin:40px auto;width:144px;height:110px;max-width:100%;box-sizing:border-box}
.menu-scale .menu input, .menu-scale .menu select, .menu-scale .menu button, .menu-scale .menu textarea{font-family:inherit}
.menu-scale .menu > div{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  background:rgba(14,15,20,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.menu-scale .menu aside{width:70px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgb(13,13,17);border-right:1px solid rgb(var(--line));padding:12px 0;}
.menu-scale .menu aside .logo{width:34px;height:2px;border-radius:2px;margin:38px 0 4px;background:rgb(var(--line));}
.menu-scale .menu aside .rail{display:flex;flex-direction:column;align-items:center;gap:2px}
.menu-scale .menu aside button{position:relative;width:54px;height:54px;border:0;border-radius:10px;background:transparent;
  color:rgb(78,80,99);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .18s,background .18s;}
.menu-scale .menu aside button i{font-size:19px;line-height:1}
.menu-scale .menu aside button:hover{color:rgb(210,210,225);background:rgba(var(--accent),.06);}
.menu-scale .menu aside button[aria-selected="true"]{color:#fff;background:rgba(var(--accent),.08);}
.menu-scale .menu aside button[aria-selected="true"]::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 2px 2px 0;background:rgb(var(--accent));}
.menu-scale .menu nav{height:40px;flex-shrink:0;display:flex;align-items:flex-start;gap:2px;padding:0 12px;
  background:rgba(20,22,32,.72);border-bottom:1px solid rgba(var(--line),.8);position:relative;z-index:1;flex-wrap:nowrap;overflow:hidden;}
.menu-scale .menu nav button{position:relative;margin-top:8.5px;padding:5px 14px;border:0;border-radius:8px;background:transparent;
  color:rgb(78,80,99);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s;}
.menu-scale .menu nav button:hover{color:rgb(200,200,210);background:rgba(var(--accent),.06);}
.menu-scale .menu nav button[aria-selected="true"]{color:#fff;background:rgba(var(--accent),.1);}
.menu-scale .menu nav button[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0.5px;height:2px;
  background:rgb(var(--accent));border-radius:2px;}
.menu-scale .menu .body{flex:1;overflow-y:auto;position:relative;z-index:1}
.menu-scale .menu .body::-webkit-scrollbar{width:5px}
.menu-scale .menu .body::-webkit-scrollbar-thumb{background:rgb(45,48,65);border-radius:3px}
.menu-scale .menu .body > section{padding:12px;display:flex;flex-direction:column;gap:8px;margin:0;background:none;border:0}
.menu-scale .menu [hidden]{display:none !important}
.menu-scale .menu .body > section > div:has(> section){display:flex;gap:8px;align-items:flex-start}
.menu-scale .menu .body > section > div > section{display:block;flex:1;min-width:0;margin:0;padding:0;background:none;border:0}
.menu-scale .menu .body > section > div > section > * + *{margin-top:8px}
.menu-scale .menu article{display:block;background:rgba(var(--panel),.47);border:1px solid rgba(var(--line),.7);border-radius:10px;overflow:hidden;margin:0;padding:0;}
.menu-scale .menu article > h3{margin:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:rgba(22,22,30,.6);border-bottom:1px solid rgba(var(--line),.7);
  font-size:14px;font-weight:500;color:rgb(215,220,230);letter-spacing:.01em;}
.menu-scale .menu article > h3 i{color:rgb(var(--brand));font-size:13px;width:16px;text-align:center;flex-shrink:0}
.menu-scale .menu article > div{display:flex;align-items:center;gap:10px;padding:6px 12px;min-height:42px;cursor:default;}
.menu-scale .menu article > div > span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.menu-scale .menu article > div b{font-weight:400;font-size:15px;color:rgb(var(--title));line-height:1.15}
.menu-scale .menu article > div small{font-size:12px;font-weight:700;color:rgb(var(--desc));line-height:1.25}
.menu-scale .menu :focus{outline:none}
.menu-scale .menu input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;box-sizing:border-box;
  width:24px;height:24px;border-radius:6px;cursor:pointer;background:rgb(13,14,19);border:1px solid rgb(28,30,40);
  position:relative;transition:background .15s,border-color .15s;}
.menu-scale .menu input[type=checkbox]:checked{border-color:transparent}
.menu-scale .menu input[type=checkbox]::before{content:"";position:absolute;inset:0;border-radius:6px;background:rgba(40,50,180,.9);
  opacity:0;transform:scale(.35);transition:opacity .15s,transform .18s ease-out;}
.menu-scale .menu input[type=checkbox]:checked::before{opacity:1;transform:scale(1)}
.menu-scale .menu .cbwrap{position:relative;display:inline-flex;flex:0 0 24px;width:24px;height:24px}
.menu-scale .menu .tick{position:absolute;inset:0;width:24px;height:24px;pointer-events:none;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.menu-scale .menu .tick path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .22s ease}
.menu-scale .menu input[type=checkbox]:checked + .tick path{stroke-dashoffset:0}
.menu-scale .menu .clr{position:relative;display:inline-flex;flex:0 0 22px;width:22px;height:22px;cursor:pointer}
.menu-scale .menu .clr i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none;color:inherit;
  filter:drop-shadow(-1px -1px 0 rgba(0,0,0,.7)) drop-shadow(1px -1px 0 rgba(0,0,0,.7)) drop-shadow(-1px 1px 0 rgba(0,0,0,.7)) drop-shadow(1px 1px 0 rgba(0,0,0,.7));}
#cpopup{position:fixed;z-index:99998;display:none;width:222px;padding:10px;border-radius:8px;
  background:rgb(22,23,30);border:1px solid rgba(42,44,58,.9);box-shadow:0 8px 32px rgba(0,0,0,.85);
  font-family:'Microsoft YaHei','微软雅黑','Segoe UI',system-ui,sans-serif;}
#cp-sv-wrap{position:relative;width:180px;height:180px;border-radius:4px;overflow:hidden;cursor:crosshair;flex-shrink:0}
#cp-sv-canvas{position:absolute;inset:0;width:100%;height:100%}
#cp-sv-cursor{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.cp-row{display:flex;align-items:stretch;gap:8px;margin-top:8px}
#cp-hue-wrap{position:relative;width:14px;border-radius:3px;overflow:hidden;cursor:pointer;flex-shrink:0}
#cp-hue-canvas{width:100%;height:100%;display:block}
#cp-hue-cursor{position:absolute;left:-2px;right:-2px;height:4px;background:#fff;border-radius:2px;transform:translateY(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
#cp-alpha-wrap{flex:1;position:relative;height:14px;border-radius:3px;overflow:hidden;cursor:pointer}
#cp-alpha-canvas{width:100%;height:100%;display:block}
#cp-alpha-cursor{position:absolute;top:-2px;bottom:-2px;width:4px;background:#fff;border-radius:2px;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.cp-hex-row{display:flex;align-items:center;gap:6px;margin-top:8px}
#cp-preview{width:26px;height:26px;border-radius:4px;flex-shrink:0;border:1px solid rgba(55,58,70,.9)}
#cp-hex{flex:1;background:rgb(18,18,24);border:1px solid rgb(42,44,58);border-radius:4px;color:rgb(195,198,212);font-size:12px;font-family:inherit;padding:0 8px;height:26px;outline:none;letter-spacing:.04em;box-sizing:border-box}
#cp-hex:focus{border-color:rgb(49,62,224)}
.cp-swatches{display:flex;gap:6px;margin-top:8px}
.cp-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;flex-shrink:0;border:1.5px solid rgba(55,58,70,.7);transition:transform .1s}
.cp-swatch:hover{transform:scale(1.15);border-color:rgb(80,200,255)}
.menu-scale .menu input[type=range]{appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;width:160px;height:16px;background:transparent;cursor:pointer;}
.menu-scale .menu input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,rgb(var(--brand)) 0 calc(var(--p,50%)),rgb(40,43,56) calc(var(--p,50%)) 100%);}
.menu-scale .menu input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgb(40,43,56)}
.menu-scale .menu input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:rgb(var(--brand))}
.menu-scale .menu input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(var(--accent),.15),0 1px 3px rgba(0,0,0,.5);transition:transform .1s;}
.menu-scale .menu input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(var(--accent),.15)}
.menu-scale .menu input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}
.menu-scale .menu input[type=range]:active::-webkit-slider-thumb{transform:scale(1.35)}
.menu-scale .menu input[type=range]:active::-moz-range-thumb{transform:scale(1.35)}
.menu-scale .menu article > div output{box-sizing:border-box;flex-shrink:0;width:66px;height:26px;border-radius:5px;padding:0 8px;gap:3px;background:rgb(var(--field));border:0;
  display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:#fff;font-variant-numeric:tabular-nums;transition:color .1s;}
.menu-scale .menu input[type=range]:active ~ output,
.menu-scale .menu article > div output:focus-within{color:rgb(var(--brand))}
.menu-scale .menu article > div output input{flex:1 1 auto !important;min-width:0;width:auto !important;height:auto !important;box-sizing:border-box;
  background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;cursor:text;
  display:block !important;opacity:1 !important;visibility:visible !important;
  color:inherit !important;-webkit-text-fill-color:currentColor !important;font:inherit;font-variant-numeric:tabular-nums;text-align:right;-moz-appearance:textfield;}
.menu-scale .menu article > div output input::-webkit-outer-spin-button,
.menu-scale .menu article > div output input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.menu-scale .menu article > div output input:focus{box-shadow:none;outline:none;border:0}
.menu-scale .menu input[type=number]{-moz-appearance:textfield;appearance:textfield}
.menu-scale .menu input[type=number]::-webkit-inner-spin-button,
.menu-scale .menu input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.menu-scale .menu article > div output i{font-style:normal;flex-shrink:0;opacity:.8}
.menu-scale .menu select{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex-shrink:0;width:236px;height:26px;padding:0 26px 0 10px;cursor:pointer;   
  background:rgb(var(--field));border:1px solid rgb(var(--line));border-radius:5px;color:rgb(160,164,185);font:inherit;font-size:12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234e5063' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;transition:border-color .12s,color .12s;}
.menu-scale .menu select:hover{border-color:rgb(var(--brand));color:#fff}
.menu-scale .menu select:focus{border-color:rgb(var(--brand));color:#fff}
.menu-scale .menu select option{background:rgb(16,17,24);color:#fff}
.menu-scale .menu .multi{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.menu-scale .menu .multi-all,.menu-scale .menu .multi-none{width:26px;min-width:0;height:26px;box-sizing:border-box;flex-shrink:0;border-radius:5px;
  border:1px solid rgb(var(--line));background:rgb(var(--field));color:rgb(160,164,185);font:inherit;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .12s,color .12s}
.menu-scale .menu .multi-all:hover,.menu-scale .menu .multi-none:hover{border-color:rgb(var(--brand));color:#fff}
.menu-scale .menu .multi-box{box-sizing:border-box;width:172px;height:26px;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 10px;   
  background:rgb(var(--field));border:1px solid rgb(var(--line));border-radius:5px;cursor:pointer;
  color:rgb(160,164,185);font-size:12px;transition:border-color .12s,color .12s}
.menu-scale .menu .multi-box:hover,.menu-scale .menu .multi-box.open{border-color:rgb(var(--brand));color:#fff}
.menu-scale .menu .multi-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-scale .menu .multi-box i{font-size:10px;color:rgb(120,124,150);transition:transform .15s}
.menu-scale .menu .multi-box.open i{transform:rotate(180deg)}
.multi-pop.multi-pop{position:fixed;z-index:99999;min-width:160px;max-height:240px;overflow-y:auto;display:none;padding:4px;
  background:rgb(16,17,24);border:1px solid rgba(42,44,58,.9);border-radius:6px;box-shadow:0 6px 28px rgba(0,0,0,.75);
  font-family:'Microsoft YaHei','微软雅黑','Segoe UI',system-ui,sans-serif;}
.multi-pop.multi-pop.open{display:block}
.multi-pop.multi-pop::-webkit-scrollbar{width:5px}
.multi-pop.multi-pop::-webkit-scrollbar-thumb{background:rgb(45,48,65);border-radius:3px}
.multi-pop.multi-pop .mp-item{padding:4px 10px;border-radius:4px;font-size:11px;color:rgb(160,164,185);cursor:pointer;white-space:nowrap}
.multi-pop.multi-pop .mp-item:hover{background:rgb(26,28,36);color:#fff}
.multi-pop.multi-pop .mp-item.on{background:rgb(44,47,58);color:#fff}
.menu-scale .menu article > div button{flex-shrink:0;height:26px;padding:0 12px;min-width:90px;border:0;border-radius:5px;cursor:pointer;
  background:rgb(var(--field));color:rgb(160,164,185);font:inherit;font-size:12px;transition:background .12s,color .12s;}
.menu-scale .menu article > div button:hover{background:rgb(28,29,40);color:rgb(var(--brand))}
.menu-scale .menu article > div button.listening{color:rgb(var(--brand));animation:hkpulse .8s infinite}
@keyframes hkpulse{0%,100%{background:rgb(var(--field))}50%{background:rgba(var(--brand),.28)}}
.menu-scale .menu input[type=text]{flex-shrink:0;width:234px;height:26px;box-sizing:border-box;background:rgb(var(--field));border:1px solid rgb(var(--line));
  border-radius:5px;color:#fff;font:inherit;font-size:12px;padding:0 10px;transition:border-color .12s;}
.menu-scale .menu input[type=text]:hover,.menu-scale .menu input[type=text]:focus{border-color:rgb(var(--brand))}
.menu-scale .menu header{display:flex;align-items:center;background:none;border:0;margin:0;padding:0}
.menu-scale .menu header > span{flex:1;font-size:14px;color:#fff}
.menu-scale .menu header select{width:160px}
.menu-scale .menu .struct-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.menu-scale .menu .sc{background:rgba(var(--panel),.5);border:1px solid rgba(var(--line),.7);border-radius:8px;padding:12px 6px 10px;
  text-align:center;cursor:pointer;transition:border-color .12s}
.menu-scale .menu .sc:hover{border-color:rgba(var(--accent),.45)}
.menu-scale .menu .sc-icon{width:34px;height:34px;margin:0 auto 6px;border:1px solid rgba(var(--line),.9);border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:rgb(90,96,120);font-size:15px}
.menu-scale .menu .sc-name{font-size:11px;color:rgb(150,154,175);line-height:1.3}
.menu-scale .menu .cfg-wrap{display:flex;flex-direction:column;gap:10px;height:100%}
.menu-scale .menu .cfg-list{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}
.menu-scale .menu .cfg-row{display:flex;align-items:center;gap:10px;background:rgb(var(--field));border:1px solid rgb(var(--line));
  border-radius:8px;padding:0 12px;height:54px;cursor:pointer;transition:border-color .12s}
.menu-scale .menu .cfg-row:hover{border-color:rgba(var(--brand),.5)}
.menu-scale .menu .cfg-row.cfg-sel{border-color:rgb(var(--brand));background:rgba(var(--brand),.08)}
.menu-scale .menu .cfg-row-name{flex:1;font-size:15px;color:rgb(230,232,240)}
.menu-scale .menu .cfg-row-btns{display:flex;gap:6px;flex-shrink:0}
.menu-scale .menu .cfg-rb{height:28px;padding:0 12px;border-radius:6px;border:0;background:rgb(30,32,42);color:rgb(180,182,200);
  font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.menu-scale .menu .cfg-rb:hover{background:rgb(38,40,54);color:rgb(200,205,255)}
.menu-scale .menu .cfg-rb.cfg-del-btn{color:rgb(200,90,90)}
.menu-scale .menu .cfg-rb.cfg-del-btn:hover{background:rgba(200,60,60,.15);color:rgb(230,110,110)}
.menu-scale .menu .cfg-bottom{display:flex;gap:8px;align-items:center;flex-shrink:0}
.menu-scale .menu .cfg-name-inp{flex:1;height:32px;box-sizing:border-box;background:rgb(var(--field));border:1px solid rgb(var(--line));
  border-radius:6px;color:rgb(230,232,240);font:inherit;font-size:13px;padding:0 12px;transition:border-color .12s}
.menu-scale .menu .cfg-name-inp:hover,.menu-scale .menu .cfg-name-inp:focus{border-color:rgb(var(--brand))}
.menu-scale .menu .cfg-action-btn{height:32px;padding:0 18px;border-radius:6px;border:0;background:rgb(30,32,42);color:rgb(200,205,255);
  font:inherit;font-size:13px;cursor:pointer;transition:background .12s}
.menu-scale .menu .cfg-action-btn:hover{background:rgba(var(--brand),.28)}
.menu-scale .menu .w-row{display:flex;align-items:center;gap:10px;padding:9px 12px;min-height:52px}
.menu-scale .menu .w-lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menu-scale .menu .w-row .w-title{font-size:15px;color:#fff}
.menu-scale .menu .w-row .w-desc{font-size:12px;color:rgb(var(--desc))}