*, *::before, *::after { box-sizing: border-box; }
  

#editorAreaCapture{
  display:none;
  position: fixed;
  left: var(--sideW);
  top: var(--barH);
  right: 0;
  bottom: 0;
  z-index: 50;
  background: transparent;
}
body.sidebar-collapsed #editorAreaCapture{ left: 0; }

#renderLayer{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 45;
  pointer-events: none;
}
#renderLayer .noteBox{
  position: absolute;
  height: 14px;
  border-radius: 6px;
  border: 1px solid rgba(20,70,160,0.95);
  background: rgba(59,130,246,1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
  overflow: hidden;
  display: flex;
  align-items: center;
}
#renderLayer .noteBox.resizing{ box-shadow: 0 0 0 2px rgba(255,255,255,0.65); }
#renderLayer .noteBox .noteLabel{
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1;
  padding: 0 6px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 1px rgba(0,0,0,0.55);
  white-space: nowrap;
  pointer-events: none;
}

#renderLayer .noteBox.sel{
  border-color: rgba(34,211,238,0.95);
  
}
#renderLayer .noteBox.warnY{
  
  box-shadow: 0 0 0 2px rgba(250,204,21,0.95) inset;
  border-color: rgba(250,204,21,0.95);
}
#renderLayer .noteBox.warnR{
  
  box-shadow: 0 0 0 2px rgba(239,68,68,0.95) inset;
  border-color: rgba(239,68,68,0.95);
}
#renderLayer .hint{
  display:none;
  position:absolute;
  left: 10px;
  top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.75);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

#context-menu{
  position: fixed;
  z-index: 2147483646;
  min-width: 210px;
  background: rgba(10,14,24,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 8px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  user-select: none;
}
#context-menu .ctx-item{
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(120,180,255,.12), 0 12px 35px rgba(0,0,0,.35);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 6px;
}
#context-menu .ctx-item:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
#context-menu .ctx-sep{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 8px 2px;
}

#keyboard-container{ position: relative; }
#kb-float{
  position:absolute;
  left:8px;
  top:8px;
  padding:2px 6px;
  border-radius:6px;
  background: rgba(0,0,0,0.65);
  color:#fff;
  font: 12px/1.2 Arial, sans-serif;
  z-index: 50;
  pointer-events:none;
  display:none;
}

  
  html, body { background:#111; }
  #editor-shell { background:#111; }
  #editor-area { background:#111; }

  
  #editor-area { padding-top: 24px; box-sizing: border-box; }
  #keyboard-container { padding-top: 24px; box-sizing: border-box; }

.noteBox.sel{
  outline: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25), 0 0 12px rgba(34,211,238,0.65);
}

body.p1-no-select, body.p1-no-select *{ user-select:none !important; }

#renderLayer .noteBox.p2-dragging{
  transform: none !important;
  will-change: auto;
}

#p2-ghost-layer{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index: 999999; 
}
#p2-ghost-layer .p2-ghost{
  position:absolute;
  border-radius: 6px;
  box-sizing:border-box;
  opacity: 0.95;
  transform: translate(var(--p2dx,0px), var(--p2dy,0px));
  will-change: transform;
}
#renderLayer .noteBox.p2-hidden-during-drag{
  opacity: 0 !important;
}

body.p2-dragging #renderLayer .noteBox{ opacity:0 !important; }
#p2-ghost-layer{
  position:absolute;
  pointer-events:none;
  z-index: 2147483645;
}
#p2-ghost-layer .p2-ghost{
  position:absolute;
  border-radius: 6px;
  box-sizing:border-box;
  opacity: 0.98;
  transform: translate(var(--p2dx,0px), var(--p2dy,0px));
  will-change: transform;
}

body.p2-dragging #renderLayer .noteBox{ opacity:1 !important; }

#p2-hide-style{ }

#p2-ghost-layer .p2-ghost.sel{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 0px;
}

#p2-ghost-layer .p2-ghost, 
#p2-ghost-layer .p2-ghost *{
  color: #fff !important;
}
#p2-ghost-layer .p2-ghost{
  display:flex;
  align-items:center;
}
#p2-ghost-layer .p2-ghost .noteName,
#p2-ghost-layer .p2-ghost [class*="noteName"],
#p2-ghost-layer .p2-ghost [data-role="noteName"]{
  position:absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events:none;
}

#p2-ghost-layer .p2-ghost *{ color:#fff !important; }
#p2-ghost-layer .p2-ghost{ position:absolute; }
#p2-ghost-layer .p2-ghost .noteName{ 
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  white-space:nowrap; pointer-events:none; z-index:2;
}

#p2-ghost-layer .p2-ghost .noteName ~ *{ display:none !important; }
#p2-ghost-layer .p2-ghost span, 
#p2-ghost-layer .p2-ghost div{ 
  
}
#p2-ghost-layer .p2-ghost span:not(.noteName),
#p2-ghost-layer .p2-ghost div:not(.noteName){
  
}
#p2-ghost-layer .p2-ghost span:not(.noteName),
#p2-ghost-layer .p2-ghost div:not(.noteName){
  color: transparent !important;
  text-shadow: none !important;
}

#p2-ghost-layer .p2-ghost .label,
#p2-ghost-layer .p2-ghost .note-label,
#p2-ghost-layer .p2-ghost .pitchLabel,
#p2-ghost-layer .p2-ghost [data-role="label"],
#p2-ghost-layer .p2-ghost [data-role="pitch"],
#p2-ghost-layer .p2-ghost [data-role="noteLabel"]{
  display:none !important;
}

:root{
  --hm-card:rgba(18,24,40,.78);
  --hm-card2:rgba(12,16,28,.72);
  --hm-stroke:rgba(120,180,255,.26);
  --hm-stroke2:rgba(120,180,255,.48);
  --hm-text:#eaf2ff;
  --hm-muted:rgba(234,242,255,.72);
  --hm-accent:#55d6ff;
  --hm-accent2:#8b5cff;
}

#historyModalOverlay{
  position:fixed;
  inset:0 !important;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2147483647;
  left:0 !important;
  top:0 !important;
  width:100vw;
  height:100vh;
  pointer-events:auto;
  isolation:isolate;
}

#lyricsEditorOverlay{
  position:fixed;
  inset:0 !important;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2147483647;
  left:0 !important;
  top:0 !important;
  width:100vw;
  height:100vh;
  pointer-events:auto;
  isolation:isolate;
}
#lyricsEditor{
  position:relative;
  isolation:isolate;
  width:min(900px, 94vw);
  height:min(560px, 86vh);
  background: linear-gradient(180deg, rgba(10,14,26,.94), rgba(6,8,16,.92));
  border:1px solid var(--hm-stroke2);
  border-radius:20px;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 55px rgba(85,214,255,.14);
  display:flex;
  overflow:hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
  color: var(--hm-text);
}
#lyricsEditor::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(85,214,255,.10), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(139,92,255,.10), transparent 42%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
  opacity:.55;
  pointer-events:none;
  mix-blend-mode: screen;
}
#lyricsEditorClose{
  position:absolute;
  right:14px;
  top:12px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(120,180,255,.35);
  background: rgba(10,14,26,.55);
  color: rgba(234,242,255,.92);
  font-size:20px;
  cursor:pointer;
  z-index:3;
}
#lyricsEditorClose:hover{ border-color: rgba(120,180,255,.65); }
.lyEditorSidebar{
  width:220px;
  padding:18px 14px;
  background: rgba(14,18,32,.55);
  border-right:1px solid rgba(120,180,255,.22);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:2;
}
.lySideBtn{
  width:100%;
  text-align:left;
  padding:16px 14px;
  border-radius:14px;
  border:1px solid rgba(120,180,255,.22);
  background: rgba(18,24,40,.44);
  color: rgba(234,242,255,.92);
  font-size:18px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: inset 0 0 0 1px rgba(120,180,255,.08);
}
.lySideBtn:hover{
  border-color: rgba(120,180,255,.45);
}
.lySideBtn.active{
  border-color: rgba(85,214,255,.55);
  background: rgba(28,42,70,.55);
}

.lySideBtn .hmIcon{ opacity:.9; }
.lyEditorMain{
  flex:1;
  padding:22px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:2;
}
.lyTitle{
  font-size:22px;
  letter-spacing:.5px;
  margin-top:2px;
}
.lyDesc{
  color: var(--hm-muted);
  font-size:14px;
  line-height:1.5;
}
#lyLyricsInput, #lyAnalyzeOutput{
  flex:1;
  width:100%;
  resize:none;
  border-radius:16px;
  border:1px solid rgba(120,180,255,.22);
  background: rgba(18,24,40,.45);
  color: rgba(234,242,255,.95);
  padding:14px 14px;
  font-size:16px;
  outline:none;
}
#lyLyricsInput:focus{
  border-color: rgba(85,214,255,.55);
  box-shadow: 0 0 0 3px rgba(85,214,255,.12);
}
.lyFooter{
  display:flex;
  align-items:center;
  gap:12px;
}
#lyApplyBtn{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(85,214,255,.50);
  background: linear-gradient(180deg, rgba(85,214,255,.20), rgba(139,92,255,.14));
  color: rgba(234,242,255,.95);
  font-weight:600;
  cursor:pointer;
}
#lyApplyBtn:hover{ border-color: rgba(85,214,255,.75); }
#lyStat{
  color: rgba(234,242,255,.78);
  font-size:14px;
}

.lyTitleRow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:2px;
  padding-right:52px; 
}
.lyTitleRow .lyTitle{
  margin-top:0;
  flex:1;
}
.lySyllableToggleBtn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(120,180,255,.35);
  background:rgba(18,24,40,.55);
  color:rgba(234,242,255,.75);
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .18s, background .18s, color .18s;
  flex-shrink:0;
}
.lySyllableToggleBtn:hover{
  border-color:rgba(85,214,255,.55);
  color:rgba(234,242,255,.95);
}
.lySyllableToggleBtn.active{
  border-color:rgba(85,214,255,.75);
  background:rgba(85,214,255,.18);
  color:rgba(85,214,255,1);
  font-weight:600;
}
.lySyllableToggleBtn .lyToggleIcon{ font-size:15px; }

#lySyllableHint{
  display:none;
  font-size:12px;
  color:rgba(85,214,255,.75);
  margin-top:-6px;
}
#lySyllableHint.visible{ display:block; }

#historyModal{
  position:relative;
  isolation:isolate;
  width:min(1040px, 94vw);
  height:min(680px, 88vh);
  background: linear-gradient(180deg, rgba(10,14,26,.94), rgba(6,8,16,.92));
  border:1px solid var(--hm-stroke2);
  border-radius:20px;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 55px rgba(85,214,255,.14);
  display:flex;
  overflow:hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
  color: var(--hm-text);
}

#historyModal::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(85,214,255,.10), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(139,92,255,.10), transparent 42%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  opacity:.55;
  pointer-events:none;
  mix-blend-mode: screen;
}

#historyModal::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(85,214,255,.65), rgba(139,92,255,.55), transparent);
  opacity:.9;
}

#historyModal .hmHeader{
  left:18px;
  right:12px;
  justify-content:space-between;

  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:3;
}

#historyModal .hmTitle{
  font-weight:800;
  letter-spacing:.8px;
  font-size:14px;
  color: rgba(234,242,255,.92);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(120,180,255,.22);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 22px rgba(85,214,255,.10);
}

#historyModal .hmClose{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  font-size:18px;
  line-height:34px;
  color: var(--hm-text);
}
#historyModal .hmClose:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(85,214,255,.35);
  box-shadow: 0 0 18px rgba(85,214,255,.18);
}

#historyModal .hmBody{
  flex:1;
  display:flex;
  position:relative;
}

#historyModal .hmSidebar{
  width:140px;
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background: linear-gradient(180deg, rgba(18,24,40,.72), rgba(10,14,26,.72));
  border-right:1px solid rgba(255,255,255,.06);
}

#historyModal .hmTabBtn{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(120,180,255,.26);
  background: rgba(255,255,255,.035);
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  color: var(--hm-muted);
  display:flex;
  align-items:center;
  gap:10px;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#historyModal .hmTabBtn .hmIcon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background: rgba(85,214,255,.10);
  border:1px solid rgba(85,214,255,.22);
  box-shadow: 0 0 18px rgba(85,214,255,.08);
  font-size:14px;
}
#historyModal .hmTabBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(85,214,255,.35);
  box-shadow: 0 0 22px rgba(85,214,255,.12);
  color: var(--hm-text);
}
#historyModal .hmTabBtn.active{
  background: linear-gradient(180deg, rgba(85,214,255,.16), rgba(139,92,255,.10));
  border-color: rgba(85,214,255,.55);
  color: var(--hm-text);
  box-shadow: 0 0 0 1px rgba(85,214,255,.18) inset, 0 0 30px rgba(85,214,255,.18);
}
#historyModal .hmTabBtn.active .hmIcon{
  background: rgba(85,214,255,.18);
  border-color: rgba(85,214,255,.55);
  box-shadow: 0 0 26px rgba(85,214,255,.18);
}

#historyModal .hmMain{
  flex:1;
  padding:22px;
  overflow:hidden;
  box-sizing:border-box;
  height:100%;
  background: radial-gradient(900px 520px at 30% 20%, rgba(85,214,255,.10), transparent 60%), radial-gradient(900px 520px at 70% 70%, rgba(139,92,255,.10), transparent 60%);
}

#historyModal .hmPanel{
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  box-sizing:border-box;
  background: linear-gradient(180deg, var(--hm-card), var(--hm-card2));
  box-shadow: 0 0 0 1px rgba(0,0,0,.28) inset, 0 16px 60px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
}

#historyModal .hmRow{
  display:flex;
  gap:22px;
  align-items:stretch;
  flex:1;
  min-height:0;
  height:100%;
}

#historyModal .hmPieWrap{
  width:440px;
  min-width:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#historyModal .hmLegend{
  flex:1 1 auto;
  width:auto;
  padding-top:14px;
  font-size:18px;
  line-height:1.85;
  color: var(--hm-text);
  max-width: 620px;
  
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:visible;
}

#historyModal .hmLegendItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:10px;
  width: fit-content;
  white-space: nowrap;
}

#historyModal .hmSwatch{
  width:14px;
  height:14px;
  border-radius:4px;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 8px rgba(255,255,255,.08);
}

#historyModal .hmLegendRight{
  margin-left:auto;
  font-variant-numeric: tabular-nums;
  color: var(--hm-muted);
  white-space: nowrap;
}

#historyModal .hmDots{
  margin-top:10px;
  font-size:26px;
  letter-spacing:8px;
  opacity:.55;
  color: var(--hm-muted);
}

#historyModal .hmReplayGrid{
  display:grid;
  grid-template-columns: 74px 1fr;
  grid-template-rows: auto auto auto;
  gap:18px 14px;
  height:100%;
}

#historyModal .hmTrackLabel{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size:13px;
  letter-spacing:.6px;
  color: var(--hm-muted);
  align-self:start;
  justify-self:start;
  padding:10px 8px;
  border-radius:12px;
  border:1px solid rgba(120,180,255,.18);
  background: rgba(255,255,255,.03);
}

#historyModal .hmTrackBox{
  border:1px solid rgba(120,180,255,.22);
  border-radius:20px;
  background: rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
  transition: border-color .25s, box-shadow .25s;
}

#historyModal .hmTrackBox.hmActive{
  border:2px solid rgba(85,214,255,.85);
  box-shadow: 0 0 18px rgba(85,214,255,.35), inset 0 0 12px rgba(85,214,255,.08);
}
#historyModal .hmTrackLabel.hmActive{
  color: rgba(85,214,255,1);
  font-weight:700;
}
#historyModal .hmTrackBox::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 240px at 20% 20%, rgba(85,214,255,.10), transparent 60%);
  pointer-events:none;
}

#historyModal .hmSliderRow{
  grid-column: 1 / span 2;
  display:flex;
  align-items:center;
  gap:14px;
  padding:2px 6px 0 6px;
}

#historyModal .hmSliderRow .hmSlider{
  flex: 1 1 auto;
  width: 100%;
  min-width: 240px;
}
#historyModal .hmSliderRow{
  width: 100%;
}

#historyModal input[type="range"].hmSlider{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  outline:none;
}
#historyModal input[type="range"].hmSlider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(85,214,255,1), rgba(139,92,255,1));
  box-shadow: 0 0 20px rgba(85,214,255,.25);
  border:1px solid rgba(255,255,255,.18);
}
#historyModal input[type="range"].hmSlider::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(85,214,255,1), rgba(139,92,255,1));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 20px rgba(85,214,255,.25);
}

#historyModal .hmTip{
  font-size:13px;
  color: var(--hm-muted);
  margin-top:10px;
  opacity:.9;
}

.hmPie{
  width:360px;height:360px;border-radius:50%;
  background: conic-gradient(#3b82f6 0deg 120deg, #64748b 120deg 220deg, #22c55e 220deg 360deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10), 0 20px 60px rgba(0,0,0,0.35);
  position: relative;
}
.hmPie::after{
  content:"";
  position:absolute; inset:16px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 55%, rgba(0,0,0,0.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.hmLegend{
  width: 320px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top: 8px;
}
.hmLegendItem{
  display:grid;
  grid-template-columns: 14px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.hmReplayMeta{
  grid-column: 2 / 3;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-all;
}

#historyModal .hmPieWrap{
  flex-direction:column;
}
#historyModal .hmTip.hmTipUnder{
  width:360px;
  max-width:420px;
  text-align:center;
  font-size:15px;
  line-height:1.5;
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

#historyModal .hmSliderRow{
  display:flex;
  align-items:center;
  gap:12px;
}
#historyModal .hmPlayBtn{
  min-width:92px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(240,248,255,0.92);
  cursor:pointer;
  font-weight:600;
  letter-spacing:.2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
#historyModal .hmPlayBtn:hover{
  background: rgba(255,255,255,0.06);
}
#hmModalClose{
  position:absolute; top:14px; right:16px;
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(130,190,255,.25);
  background:rgba(10,20,40,.35);
  color:rgba(220,240,255,.95);
  font-size:26px; line-height:38px;
  cursor:pointer; z-index:9999;
  backdrop-filter: blur(8px);
}
#hmModalClose:hover{ background:rgba(30,70,120,.35); }

.noteBox.resizeHot::after{content:'';position:absolute;right:0;top:0;bottom:0;width:10px;background:rgba(255,255,255,0.18);border-top-right-radius:8px;border-bottom-right-radius:8px;}
.noteBox.resizing{outline:2px solid rgba(255,255,0,0.85);}

#uiSidebar .sideContent{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;           
  overflow:hidden;        
}

#uiSidebar .sidebar-module.melody-source{
  flex: 1 1 auto;
  min-height: 0;
}

#melodyCandidates{ flex: 1 1 auto; min-height:0; }
#melodyCandidates[style*="display:block"]{ display:flex !important; flex-direction:column; }
#melodyCandidates[style*="display: block"]{ display:flex !important; flex-direction:column; }

.melody-candidates .mc-head{ flex: 0 0 auto; }
.melody-candidates .mc-hint{ flex: 0 0 auto; }

.melody-candidates .mc-list{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;     
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px;
  padding-bottom: 12px;            
}

.melody-candidates .mc-item{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
.melody-candidates .mc-item:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.melody-candidates .mc-item.active{
  border-color: rgba(255, 212, 80, .98);
  box-shadow: 0 0 0 2px rgba(255, 212, 80, .30);
}

.melody-candidates .mc-thumb canvas,
.melody-candidates .mc-thumb img,
.melody-candidates .mc-thumb svg{
  filter: brightness(1.25) contrast(1.15);
  opacity: .95;
}

.appAuthTabs{
  display:flex;
  gap:12px;
  align-items:center;
  margin: 18px 0 14px;
}
.appAuthTab{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  user-select:none;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.appAuthTab:hover{ background: rgba(255,255,255,0.09); }
.appAuthTab.isActive{
  border-color: rgba(56,156,255,0.55);
  background: rgba(56,156,255,0.18);
  color: rgba(255,255,255,0.96);
}
.appAuthPanels{ display:block; }
.appAuthPanel{ display:none; }
.appAuthPanel.isActive{ display:block; }
.appAuthPanel .appFormCard{
  max-width: 1020px;
}
#uiAuthPanelLogin .appFormCard{
  max-width: 560px;
}

.letron-google-btn{
  display:flex; align-items:center; justify-content:center;
  gap:12px; width:100%; padding:11px 20px;
  background:#fff; color:#3c4043;
  border:1px solid #dadce0; border-radius:10px;
  font-size:15px; font-weight:600; cursor:pointer;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  transition:background .15s, box-shadow .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.letron-google-btn:hover{
  background:#f8f9fa;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.letron-google-btn:disabled{
  opacity:.6; cursor:not-allowed;
}
.letron-google-btn span{
  flex:1; text-align:center;
}

.letron-divider{
  display:flex; align-items:center;
  gap:12px; margin:16px 0; color:rgba(255,255,255,.45);
  font-size:13px;
}
.letron-divider::before,.letron-divider::after{
  content:''; flex:1; height:1px;
  background:rgba(255,255,255,.15);
}

#uiGoogleLoginMsg, #uiGoogleRegMsg{
  margin-top:8px; font-size:13px; min-height:20px;
}

.marketingPackShell{ display:flex; flex-direction:column; gap:18px; }
.marketingPackHero{
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  padding:22px 24px; border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 320px at 0% 0%, rgba(29,95,212,.16), transparent 56%),
    radial-gradient(560px 220px at 100% 0%, rgba(232,144,39,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 42px rgba(0,0,0,.18);
}
.marketingPackHeroLeft{ display:flex; gap:18px; align-items:flex-start; min-width:0; }
.marketingPackHeroIcon{
  width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10); font-size:28px; flex:0 0 auto;
}
.marketingPackHero h2{ margin:0 0 10px; font-size:28px; font-weight:900; }
.marketingPackHero p{ margin:0; font-size:15px; line-height:1.9; color:rgba(240,244,255,.92); }
.marketingPackHeroRight{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:0 0 auto; }
.marketingPackPill, .marketingPackMetaPill, .marketingPackMiniPill{
  display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:rgba(255,255,255,.95); font-weight:800;
}
.marketingPackPill{ border-color:rgba(232,144,39,.35); background:rgba(232,144,39,.10); color:rgba(255,236,214,.98); }
.marketingPackMetaRow, .marketingPackMiniRow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.marketingPackPage{ display:none; animation:agentCardIn .22s ease both; }
.marketingPackPage.is-active{ display:block; }
.marketingPackGrid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:18px; }
.marketingPackStack{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.marketingPackCard{
  border:1px solid rgba(255,255,255,.10); border-radius:24px; padding:24px;
  background:
    radial-gradient(760px 220px at 0% 0%, rgba(29,95,212,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 46px rgba(0,0,0,.16);
}
.marketingPackCard h3{ margin:0; font-size:24px; font-weight:900; }
.marketingPackSectionHead{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.marketingPackStep{
  display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; margin-bottom:8px;
  background:rgba(255,168,76,.12); border:1px solid rgba(255,168,76,.26); color:rgba(255,231,206,.96);
  font-size:12px; font-weight:900; letter-spacing:.4px;
}
.marketingPackSub{ margin:0; font-size:14px; line-height:1.9; color:rgba(220,228,242,.84); }
.marketingPackFields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.marketingPackFieldFull{ grid-column:1 / -1; }
.marketingPackLabel{ display:block; margin-bottom:8px; font-size:13px; font-weight:800; color:rgba(230,236,248,.92); }
.marketingPackInput, .marketingPackTextarea, .marketingPackSelect{
  width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  color:#fff; padding:14px 16px; font-size:15px; outline:none; box-sizing:border-box;
}
.marketingPackTextarea{ min-height:124px; resize:vertical; }
.marketingPackInput:focus, .marketingPackTextarea:focus, .marketingPackSelect:focus{
  border-color:rgba(255,168,76,.40); box-shadow:0 0 0 3px rgba(255,168,76,.10);
}
.marketingPackAudio{ margin-top:18px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:16px; }
.marketingPackAudioHead{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.marketingPackSmallBtn, .marketingPackBackBtn, .marketingPackNextBtn{
  min-height:44px; padding:0 16px; border-radius:16px; font-weight:900; cursor:pointer; transition:.18s ease;
}
.marketingPackSmallBtn{
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:rgba(255,255,255,.94);
}
.marketingPackSmallBtn:hover{ background:rgba(255,255,255,.08); }
.marketingPackNextBtn{
  border:1px solid rgba(232,144,39,.42); background:linear-gradient(180deg, rgba(255,168,76,.94), rgba(255,133,51,.86));
  color:#1c0d04; box-shadow:0 14px 30px rgba(255,133,51,.18);
}
.marketingPackBackBtn{
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:rgba(255,255,255,.95);
}
.marketingPackNextBtn:hover, .marketingPackBackBtn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.marketingPackInlineBtn{ white-space:nowrap; }
.marketingPackWave{
  height:88px; margin-top:14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 12px);
  opacity:.9;
}
.agentPlatformTab{
  padding:14px 24px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  color:#e8eef8; font-size:18px; font-weight:900; cursor:pointer; transition:.18s ease;
}
.agentPlatformTab.is-active{ border-color:rgba(232,144,39,.55); background:linear-gradient(180deg, rgba(232,144,39,.24), rgba(232,144,39,.10)); color:#fff; }
.marketingPackSection{ margin-top:18px; }
.marketingPackSection h4{ margin:0 0 10px; font-size:17px; font-weight:900; }
.marketingPackHint{ margin-top:8px; font-size:13px; line-height:1.8; color:rgba(215,223,238,.72); }
.marketingPackActionRow, .marketingPackNavRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.marketingPackStatusGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.marketingPackStatus{
  display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:56px;
  padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
}
.marketingPackStatus b{ font-size:13px; color:rgba(220,228,242,.9); }
.marketingPackStatus span{ font-weight:800; color:#fff; text-align:right; }
.marketingPackAccent{ color:rgba(255,211,164,.98) !important; }
.marketingPackHeroAction{ display:none; }
.marketingPackHeroAction.is-active{ display:inline-flex; }
@media (max-width: 1080px){
  .marketingPackGrid{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .marketingPackHero, .marketingPackSectionHead{ flex-direction:column; align-items:flex-start; }
  .marketingPackHeroRight{ width:100%; align-items:flex-start; }
  .marketingPackFields, .marketingPackStatusGrid{ grid-template-columns:1fr; }
  .marketingPackInlineBtn{ width:100%; justify-content:center; }
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

  
.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

  #ctxMenu{
background: linear-gradient(180deg, #0E2A47 0%, #0B1F36 100%);
border: 1px solid rgba(64, 130, 255, 0.25);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(64, 130, 255, 0.15);

position: fixed;
    z-index: 999999;
    min-width: 180px;

    color: #fff;

    border-radius: 10px;

    padding: 6px;
    display: none;
    user-select: none;
    -webkit-user-select: none;
    font-size: 14px;
    line-height: 1.25;
}
  #ctxMenu .ctxItem{
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  #ctxMenu .ctxItem:hover{
    background: rgba(255,255,255,0.10);
  }
  #ctxMenu .ctxSep{
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 6px 4px;
  }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

.is-selected{
  outline: 2px solid #6CB6FF !important;
  outline-offset: -2px;
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

#sidebar, #leftPanel, .sidebar, .leftPanel { position: relative; z-index: 10; }
#melodySidebarList, #ccMelodyList {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 220px);
  padding: 8px 6px 10px 6px;
  margin-top: 6px;
}
.melodyCard, .ccMelodyCard {
  width: 100% !important;
  box-sizing: border-box !important;
}
.melodyThumb, canvas.melodyThumb {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

#sidebar .sbBtnRow, #sidebar .btnRow, #sidebar .sidebarBtns { position: relative; z-index: 11; }
#melodySidebarList { position: relative; z-index: 10; }

.melodyCard, .ccMelodyCard{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.melodyCard.isSelected, .ccMelodyCard.isSelected{
  border-color: rgba(255, 215, 0, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25) inset !important;
}
.melodyThumbWrap, .thumbWrap{
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.melodyThumb, canvas.melodyThumb{
  filter: brightness(1.25) contrast(1.15) !important;
}
.ccThumbErr, .thumbErr, .melodyThumbErr{
  color: rgba(255,255,255,0.90) !important;
  background: rgba(0,0,0,0.30) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

#uiSidebar .sideList{
  padding: 8px;
}

.melody-candidates .mc-head{
  margin-bottom: 6px;
}
.melody-candidates .mc-title{
  font-size: 12px;
  font-weight: 700;
  opacity: .92;
}
.melody-candidates .mc-meta{
  font-size: 10px;
  line-height: 1.1;
  opacity: .55;
  max-width: 78px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.melody-candidates .mc-list{
  gap: 6px;
}

.melody-candidates .mc-item{
  padding: 8px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.miniGrid{
  height: 96px;
  border-radius: 10px;
}
.miniGrid canvas,
.miniGrid img,
.melody-candidates .mc-thumb canvas,
.melody-candidates .mc-thumb img,
.melody-candidates .mc-thumb svg{
  filter: brightness(1.15) contrast(1.25);
  opacity: .95;
  image-rendering: pixelated;
}

.melody-candidates .mc-item.active{
  box-shadow: 0 0 0 2px rgba(255, 212, 80, .28);
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

.melody-candidates .mc-head,
.melody-candidates .mc-hint,
.melody-candidates .mc-title,
.melody-candidates .mc-meta{
  display:none !important;
}

.melody-candidates .mc-item{
  display:flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
}

.melody-candidates .mc-num{
  width: auto !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: .92 !important;
}

.melody-candidates .mc-top,
.melody-candidates .mc-title2,
.melody-candidates .mc-tags2{
  display:none !important;
}

.melody-candidates .mc-thumb{
  width: 100% !important;
  height: 96px !important;
  border-radius: 10px !important;
}

.melody-candidates .mc-thumb{
  filter: brightness(1.15) contrast(1.25) !important;
  image-rendering: pixelated;
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

.melody-candidates .mc-item{
  background: rgba(255,255,255,.06) !important;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

.melody-candidates .mc-item:hover{
  background: rgba(255,255,255,.10) !important;
}

.melody-candidates .mc-item.is-active,
.melody-candidates .mc-item.active,
.melody-candidates .mc-item.selected{
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 2px rgba(255,200,0,.12), 0 8px 20px rgba(0,0,0,.35) !important;
}

.melody-candidates .mc-num{
  color: rgba(255,255,255,.78) !important;
  font-weight: 800 !important;
}
.melody-candidates .mc-item:hover .mc-num,
.melody-candidates .mc-item.is-active .mc-num,
.melody-candidates .mc-item.active .mc-num,
.melody-candidates .mc-item.selected .mc-num{
  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

.melody-candidates .mc-thumb{
  filter: brightness(1.05) contrast(1.15) !important;
}
.melody-candidates .mc-item:hover .mc-thumb,
.melody-candidates .mc-item.is-active .mc-thumb,
.melody-candidates .mc-item.active .mc-thumb,
.melody-candidates .mc-item.selected .mc-thumb{
  filter: brightness(1.12) contrast(1.25) !important;
}

.melody-candidates .mc-item{
  opacity: 1 !important;
  filter: none !important;
}

#appModalBack{
  position:fixed !important;
  left:0; top:0; width:100vw; height:100vh;
  display:none;
  z-index:2147483647 !important;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  pointer-events:auto;
  
  justify-content:center;
  align-items:center;
}
#appModal{
  position:relative;
  left:auto;
  top:auto;
  z-index:2147483647;
  width: 1120px;
  max-width: calc(100vw - 80px);
  height: 640px;
  max-height: calc(100vh - 80px);

  background: linear-gradient(180deg, rgba(15,27,43,0.98), rgba(11,22,35,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 22px 80px rgba(0,0,0,0.55);
  overflow:hidden;

  color:#e7eefb;
  display:flex;
  flex-direction:column;
}
#appModal *{ pointer-events:auto; }

#appModalHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
}
#appModalTitle{
  font-weight:900;
  letter-spacing:.2px;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
#appModalIcon{
  width:22px; height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
}
#appModalHeaderRight{ margin-left:auto; display:flex; align-items:center; gap:10px; }
#appModalClose{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
  cursor:pointer;
}
#appModalClose:hover{ filter:brightness(1.06); }
#appModalClose:active{ transform: translateY(1px); }

#appModalBody{
  flex:1;
  display:flex;
  min-height:0;
}
#appModalNav{
  width:260px;
  padding:18px;
  border-right:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
  overflow:auto;
}
.appModalTab{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:rgba(231,238,251,0.92);
  font-weight:800;
  cursor:pointer;
  margin-bottom:10px;
  text-align:left;
}
.appModalTab:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}
.appModalTab.active{
  background:rgba(64,160,255,0.22);
  border-color:rgba(64,160,255,0.40);
}
.appModalTab.featureDisabled,
.actionBtn.featureDisabled,
.squareBtn.featureDisabled{
  opacity:0.48;
  filter:grayscale(0.82);
  cursor:not-allowed;
}
.appModalTab.featureDisabled:hover,
.actionBtn.featureDisabled:hover,
.squareBtn.featureDisabled:hover{
  filter:grayscale(0.82);
}
.comingSoonTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.72);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
}
.placeholderCardMuted{
  border:1px dashed rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.025);
  border-radius:16px;
  padding:18px;
  margin-top:16px;
  color:rgba(231,238,251,0.86);
}
.placeholderList{
  margin:10px 0 0;
  padding-left:18px;
  line-height:1.9;
  opacity:0.9;
}
#appModalContent{
  position:relative;
  z-index:1;
  pointer-events:auto;
  flex:1;
  padding:34px 36px;
  min-width:0;
  overflow:auto;
}

#appModal.marketing-agent-open #appModalContent{
  overflow:hidden; 
}
#appModal.marketing-agent-open #appModalContent::after{
  content: attr(data-wip-text);
  position:absolute;
  inset:0;
  z-index:9999;
  pointer-events:all;
  cursor:default;
  background:rgba(8,10,20,0.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
  color:rgba(180,210,255,0.65);
  letter-spacing:0.06em;
  border-radius:inherit;
}
.appModalH2{
  font-size:26px;
  font-weight:900;
  margin:0 0 14px;
}
.appModalP{
  font-size:18px;
  line-height:1.85;
  opacity:0.95;
}

.appModalDivider{ height:1px; background:rgba(255,255,255,0.10); margin:22px 0; }
.appFormTwoCol{ display:grid; grid-template-columns: 1.35fr 0.85fr; gap:18px; margin-top:18px; }
@media (max-width: 980px){ .appFormTwoCol{ grid-template-columns: 1fr; } }

.appFormGrid.onecol{ grid-template-columns: 1fr; }

.appFormCard{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  border-radius:16px;
  padding:18px 18px 16px;
}
.appFormTitle{ font-weight:900; font-size:18px; margin:0 0 6px; }
.appFormHint{ font-size:13px; opacity:0.86; line-height:1.6; margin:0 0 14px; }
.req{ color:rgba(255,120,120,0.95); margin-left:4px; font-weight:900; }

.appFormGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 14px; }
@media (max-width: 980px){ .appFormGrid{ grid-template-columns: 1fr; } }

.appField label{ display:block; font-size:12px; opacity:0.9; margin:0 0 6px; font-weight:800; }
.appInput{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.22);
  color:#e7eefb;
  padding:0 12px;
  outline:none;
}
.appInput:focus{
  border-color: rgba(64,160,255,0.55);
  box-shadow: 0 0 0 3px rgba(64,160,255,0.18);
}
.appInput[disabled]{ opacity:0.55; cursor:not-allowed; }

.appRowBetween{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.appCheck{ display:flex; align-items:flex-start; gap:10px; font-size:12px; opacity:0.92; line-height:1.5; }
.appCheck input{ margin-top:2px; }
.appCheck a{ color: rgba(120,190,255,0.95); text-decoration:none; }
.appCheck a:hover{ text-decoration:underline; }

.appBtnPrimary, .appBtnGhost{
  height:40px;
  border-radius:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,0.14);
  cursor:pointer;
  padding:0 14px;
  white-space:nowrap;
}
.appBtnPrimary{
  border-color:rgba(64,160,255,0.55);
  background:rgba(64,160,255,0.82);
  color:#071018;
}
.appBtnGhost{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
}
.appBtnPrimary[disabled], .appBtnGhost[disabled]{ opacity:0.55; cursor:not-allowed; }

.appMsg{
  margin-top:12px;
  font-size:12px;
  line-height:1.55;
  opacity:0.95;
  min-height: 18px;
}
.appMsg.ok{ color: rgba(120,255,190,0.92); }
.appMsg.warn{ color: rgba(255,200,120,0.95); }
.appMsg.err{ color: rgba(255,120,120,0.95); }

.appVerifyRow{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.appVerifyRow .appInput{ flex:1; }

.appModalPanel{ display:none; }
.appModalPanel.active{ display:block; }

#appModalFooter{
  position:relative;
  z-index:5;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:18px 20px;
  border-top:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
}
 #appModalCancel, #appModalOk{
  position:relative;
  z-index:6;
  pointer-events:auto;
  min-width:120px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
  font-weight:900;
  cursor:pointer;
}
#appModalCancel:hover{ filter:brightness(1.04); }
#appModalOk{
  border-color:rgba(64,160,255,0.55);
  background:rgba(64,160,255,0.82);
  color:#071018;
}
#appModalOk:hover{ filter:brightness(1.05); }

.marketingBtn{
  border-color: rgba(255,168,76,0.42);
  background: linear-gradient(180deg, rgba(255,168,76,0.14), rgba(255,255,255,0.04));
}
.marketingBtn:hover{
  border-color: rgba(255,184,102,0.68);
  background: linear-gradient(180deg, rgba(255,168,76,0.22), rgba(255,255,255,0.06));
  box-shadow: 0 10px 28px rgba(255,168,76,0.16);
}
#appModal.marketing-agent-open{
  box-shadow: 0 24px 88px rgba(0,0,0,0.58), 0 0 42px rgba(255,168,76,0.16);
}
#appModal.marketing-agent-open #appModalHeader{
  background: linear-gradient(180deg, rgba(255,168,76,0.12), rgba(255,255,255,0.02));
}
#appModal.marketing-agent-open #appModalNav{
  background: linear-gradient(180deg, rgba(54,36,16,0.34), rgba(0,0,0,0.16));
}
#appModal.marketing-agent-open .appModalTab.active{
  background: linear-gradient(180deg, rgba(255,168,76,0.22), rgba(255,255,255,0.06));
  border-color: rgba(255,168,76,0.44);
  box-shadow: 0 0 0 1px rgba(255,168,76,0.16) inset, 0 0 18px rgba(255,168,76,0.10);
}
#appModal.marketing-agent-open .appModalTab:hover{
  border-color: rgba(255,168,76,0.28);
}
.agentHero{
  border:1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(255,168,76,0.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow: inset 0 0 0 1px rgba(255,168,76,0.06);
}
.agentHeroTitle{
  display:flex; align-items:center; gap:10px;
  font-size:24px; font-weight:900; margin:0 0 8px;
}
.agentHeroBadge{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 12px; border-radius:999px;
  background: rgba(255,168,76,0.16);
  border:1px solid rgba(255,168,76,0.26);
  color: rgba(255,230,204,0.96);
  font-size:12px; font-weight:800; letter-spacing:.2px;
}
.agentHeroSub{
  font-size:14px; line-height:1.75; opacity:.9; margin:0;
}
.agentGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  margin-top:16px;
}
@media (max-width: 1080px){
  .agentGrid{ grid-template-columns:1fr; }
}
.agentPanel{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius:18px;
  padding:18px;
}
.agentPanelTitle{
  margin:0 0 12px;
  font-size:18px; font-weight:900;
}
.agentFieldRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}
@media (max-width: 820px){
  .agentFieldRow{ grid-template-columns:1fr; }
}
.agentPillRow{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.agentPill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:0 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size:12px; font-weight:800; color: rgba(255,255,255,0.9);
}
.agentPrimaryBtn{
  min-height:44px; padding:0 16px;
  border-radius:14px; border:1px solid rgba(255,168,76,0.42);
  background: linear-gradient(180deg, rgba(255,168,76,0.92), rgba(255,133,51,0.84));
  color:#1c0d04; font-weight:900; cursor:pointer;
  box-shadow: 0 14px 30px rgba(255,133,51,0.18);
}
.agentPrimaryBtn:hover{ filter:brightness(1.04); transform: translateY(-1px); }
.agentGhostBtn{
  min-height:40px; padding:0 14px;
  border-radius:12px; border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.94);
  font-weight:800; cursor:pointer;
}
.agentGhostBtn:hover{ background: rgba(255,255,255,0.08); }
.agentResultWrap{
  margin-top:16px;
  display:grid; grid-template-columns:1fr; gap:14px;
}
.agentCard{
  position:relative;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(760px 180px at 0% 0%, rgba(255,168,76,0.09), transparent 52%);
  border-radius:18px;
  padding:16px;
  overflow:hidden;
  box-shadow: 0 14px 42px rgba(0,0,0,0.18);
  animation: agentCardIn .24s ease both;
}
.agentCard::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.05) 22%, transparent 44%);
  transform: translateX(-100%);
  pointer-events:none;
}
.agentCard:hover::after{
  animation: agentShine 1.15s ease;
}
.agentCardHead{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  margin-bottom:12px;
}
.agentCardTitle{
  margin:0; font-size:18px; font-weight:900;
}
.agentCardTag{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 10px; border-radius:999px;
  background: rgba(255,168,76,0.14);
  border:1px solid rgba(255,168,76,0.24);
  color: rgba(255,230,204,0.96);
  font-size:12px; font-weight:800;
}
.agentCardBody{
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.76;
  font-size:14px;
  color: rgba(240,244,255,0.96);
  min-height:120px;
}
.agentCardActions{
  display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;
}
.agentLoading{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  margin-top:14px;
}
.agentLoadingDot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,168,76,0.92);
  box-shadow: 0 0 0 0 rgba(255,168,76,0.34);
  animation: agentPulse 1.2s ease infinite;
}
.agentSubtle{
  color: rgba(255,255,255,0.72);
  font-size:13px; line-height:1.7;
}
@keyframes agentPulse{
  0%{ transform:scale(0.9); box-shadow:0 0 0 0 rgba(255,168,76,0.30);}
  70%{ transform:scale(1); box-shadow:0 0 0 12px rgba(255,168,76,0);}
  100%{ transform:scale(0.9); box-shadow:0 0 0 0 rgba(255,168,76,0);}
}
@keyframes agentCardIn{
  from{ opacity:0; transform: translateY(8px) scale(.992);}
  to{ opacity:1; transform: translateY(0) scale(1);}
}
@keyframes agentShine{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(120%); }
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

#msModal .msTrackCard{ transition: all .12s ease; }
#msModal .msTrackCard:hover{ transform: translateY(-1px); border-color: rgba(90,140,255,.45); background: rgba(255,255,255,.05); }
#msModal .msTrackCard.active{ border: 2px solid rgba(90,140,255,.95); background: rgba(50,100,190,.22); box-shadow: 0 0 0 2px rgba(90,140,255,.18); }
#msModal .msTrackTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#msModal .msTrackTitleWrap{ display:flex; align-items:center; gap:10px; }
#msModal .msTrackCheck{ width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#fff; background: rgba(90,140,255,.95); box-shadow: 0 0 12px rgba(90,140,255,.35); flex:0 0 auto; }
#msModal .msTrackCheck.empty{ background: rgba(255,255,255,.08); color: transparent; box-shadow:none; }
#msModal .msTrackMeta{ display:flex; gap:16px; margin-top:10px; opacity:.92; }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

:root{
  --ui-primary-orange:#E89027;
  --ui-primary-orange-hover:#F5A94A;
  --ui-play-green:#6CFF4A;
  --ui-play-green-hover:#85FF66;
  --ui-active-blue:#4DA3FF;
  --ui-active-blue-hover:#6CB6FF;
  --ui-neutral:#2A2A2A;
  --ui-neutral-hover:#3A3A3A;
  --ui-neutral-border:#4A4A4A;
  --ui-text:#FFFFFF;
  --ui-text-dim:#D8D8D8;
}

#uiSidebar .sidebar-module .module-primary{
  background: var(--ui-primary-orange) !important;
  border-color: rgba(232,144,39,0.95) !important;
  color: var(--ui-text) !important;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
#uiSidebar .sidebar-module .module-primary:hover{
  background: var(--ui-primary-orange-hover) !important;
  box-shadow: 0 0 0 2px rgba(232,144,39,0.18), 0 8px 22px rgba(0,0,0,0.24) !important;
  transform: translateY(-1px) scale(1.02);
}
#uiSidebar .sidebar-module .module-primary:active{
  background: var(--ui-primary-orange) !important;
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.28) !important;
}

#uiSidebar .sidebar-module .module-setting{
  background: #E6E6E6 !important;
  border-color: var(--ui-neutral-border) !important;
  color: #222 !important;
}

#masterBar .actionBtn{
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
#masterBar .actionBtn:hover{
  transform: translateY(-1px);
}
#masterBar .actionBtn.outline,
#masterBar .actionBtn.gray{
  background: var(--ui-neutral) !important;
  border-color: var(--ui-neutral-border) !important;
  color: var(--ui-text-dim) !important;
}
#masterBar .actionBtn.outline:hover,
#masterBar .actionBtn.gray:hover{
  background: var(--ui-neutral-hover) !important;
  border-color: rgba(255,255,255,0.24) !important;
  color: var(--ui-text) !important;
}

#historyBtnV2{
  background: var(--ui-active-blue) !important;
  border-color: var(--ui-active-blue) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 8px 22px rgba(77,163,255,0.20);
}
#historyBtnV2:hover{
  background: var(--ui-active-blue-hover) !important;
  border-color: var(--ui-active-blue-hover) !important;
}

#auditBtnV2.actionBtn.gray,
#auditBtnV2.actionBtn.outline{
  background: var(--ui-neutral) !important;
  border-color: var(--ui-neutral-border) !important;
  color: var(--ui-text-dim) !important;
}
#auditBtnV2.actionBtn.cyan{
  background: var(--ui-active-blue) !important;
  border-color: var(--ui-active-blue) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 8px 22px rgba(77,163,255,0.18);
}

#analyzeBtnV2,
#exportBtnV2,
#importBtnV2{
  background: var(--ui-neutral) !important;
  border-color: var(--ui-neutral-border) !important;
  color: var(--ui-text) !important;
}
#analyzeBtnV2:hover,
#exportBtnV2:hover,
#importBtnV2:hover{
  background: var(--ui-neutral-hover) !important;
  border-color: rgba(255,255,255,0.24) !important;
}

#trackSwitchV2{
  background: var(--ui-neutral) !important;
  border-color: var(--ui-neutral-border) !important;
  color: var(--ui-text) !important;
}
#trackSwitchV2:hover{
  background: var(--ui-neutral-hover) !important;
}

#masterBar .btn.play{
  background: var(--ui-play-green) !important;
  border-color: var(--ui-play-green) !important;
  color: #101010 !important;
  box-shadow: 0 8px 20px rgba(108,255,74,0.18);
}
#masterBar .btn.play:hover{
  background: var(--ui-play-green-hover) !important;
  border-color: var(--ui-play-green-hover) !important;
}

#masterBar .btn,
#masterBar .squareBtn{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
#masterBar .btn:hover,
#masterBar .squareBtn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

#msModal .msMarketCard .msMarketActions{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
}
#msModal .msMarketCard .msMarketActions .msMarketBtn{
  flex:1 1 0;
  min-width:0;
  padding:0 10px;
  white-space:nowrap;
}

.toolbar, #toolbar, .topbar, #topbar, .header, #header { display:none !important; }
#v2Topbar, #materialsPanel { display:none !important; }

:root{ --sideW:160px; --barH:112px; }

#main-container{
  position: fixed;
  left: var(--sideW);
  top: var(--barH);
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 1px solid #444;
  border-left: 0;
  border-top: 0;
  background: #121212;
  overflow: hidden;
}
#keyboard-container,
#editor-area{overflow: auto; position: relative; overflow:hidden; }
#keyboard-container{ overflow: hidden; overflow-x:hidden; overflow-y:hidden; position:relative; }
#editor-area{
  overflow: auto;
  position: relative;
}

#uiSidebar .sideContent{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#uiSidebar .sidebar-module{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
#uiSidebar .sidebar-module button{
  width: 100%;
  height: 56px;
  border-radius: 0px;              
  border: 1px solid #3a3a3a;       
  background: #e0e0e0;             
  color: #2b2b2b;
  font-weight: 800;
  font-size: 18px;                 
  line-height: 1;                  
  cursor: pointer;

  
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 0;
  letter-spacing: 0.2px;

  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease;
}

#uiSidebar .sidebar-module button .ico{
  width: 20px;                     
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  transform: translateY(-0.5px);
}

#uiSidebar .sidebar-module button .txt{
  white-space: nowrap;             
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px);   
}

body.lang-en #uiSidebar .sidebar-module button,
body.lang-ja #uiSidebar .sidebar-module button,
body.lang-ko #uiSidebar .sidebar-module button,
body.lang-de #uiSidebar .sidebar-module button,
body.lang-es #uiSidebar .sidebar-module button {
  font-size: 14px;
}

body.lang-en #masterBar .actionBtn,
body.lang-de #masterBar .actionBtn,
body.lang-es #masterBar .actionBtn {
  font-size: 12px;
  padding: 0 10px;
}

#uiSidebar,
#uiSidebar .sideContent,
#uiSidebar .sidebar-module,
#uiSidebar .sidebar-module button{
  position: relative;
  z-index: 1 !important;
}

#uiSidebar .sidebar-module button:hover{
  filter: brightness(1.03);
}
#uiSidebar .sidebar-module button:active{
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.18);
}
#uiSidebar .sidebar-module button:focus-visible{
  outline: 2px solid #00f0ff;      
  outline-offset: 2px;
}

#uiSidebar .sidebar-module button.is-loading{
  position: relative;
  pointer-events: none;
  opacity: 0.92;
}
#uiSidebar .sidebar-module button.is-loading .ico{
  animation: genSpin 0.9s linear infinite;
}
#uiSidebar .sidebar-module button:disabled{
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(10%);
}
@keyframes genSpin{
  from{ transform: translateY(-0.5px) rotate(0deg); }
  to{ transform: translateY(-0.5px) rotate(360deg); }
}
#uiSidebar .sidebar-module button:hover{
  box-shadow: 0 0 0 2px rgba(244,255,0,0.18); 
}
#uiSidebar .sidebar-module button:active{
  transform: translateY(1px);
}

#uiSidebar .sidebar-module .module-setting{
  background: #e0e0e0;             
  border-color: #3a3a3a;           
  color: #2b2b2b;                  
}
#uiSidebar .sidebar-module .module-setting:hover{
  border-color: #2b2b2b;
}

#uiSidebar .sidebar-module .module-primary{
  background: #ccff00;             
  border-color: #3a3a3a;           
  color: #2b2b2b;                  
}
#uiSidebar .sidebar-module .module-primary.is-import{
  background: #a100ff;             
  border-color: #3a3a3a;
  color: #ffffff;
}
#uiSidebar .sidebar-module .module-primary:hover{
  background: #f4ff00;             
}
#uiSidebar .sidebar-module .module-primary.is-import:hover{
  background: #b733ff;
}
#uiSidebar .sidebar-module .module-primary:active{
  background: #ccff00;
  box-shadow: inset 0 0 0 2px rgba(43,43,43,0.25);
}
#uiSidebar .sidebar-module .ico{
  font-size: 18px;
  line-height: 1;
}

#uiSidebar .sidebar-module .module-primary .txt{
  white-space: nowrap;
  font-size: 14px;
}
#uiSidebar .sidebar-module .txt{
  font-size: 15px;
  white-space: nowrap;
}

#uiSidebar .sidebar-module .module-primary[data-cmd="gen.start"] .ico,
#uiSidebar .sidebar-module .module-primary[data-cmd="gen.start"] .txt{
  position: relative;
  left: -3px;
}

#uiSidebar .sidebar-module.corehost-phase2{ display:none !important; }
#melodySidebarList{ display:none !important; }
#uiSidebar{
  position: fixed; left: 0; top: var(--barH); bottom: 0;
  width: var(--sideW);
  background: rgba(35,35,35,0.98);
  border-right: 1px solid rgba(255,255,255,0.08);
  z-index: 2147483646;
  display: flex; flex-direction: column;  overflow: hidden;
}

#uiSidebar .sideBtn{
  width: 100%; height: 44px;
  margin: 10px 0 0 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff; font-weight: 800;
  cursor: pointer;
}
#uiSidebar .sideBtn.primary{
  background: rgba(170, 210, 40, 0.85);
  border-color: rgba(170, 210, 40, 0.95);
  color: #101010;
}
#uiSidebar .sideList{
  flex: 1; padding: 12px; overflow: auto;
}
#uiSidebar .card{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  padding: 10px; margin-bottom: 10px;
}
#uiSidebar .cardTitle{
  color: rgba(255,255,255,0.85);
  font-weight: 800; margin-bottom: 6px;
}
#uiSidebar .miniGrid{
  height: 74px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}

#masterBar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--barH);
  z-index: 40;
  background: linear-gradient(180deg, rgba(55,55,55,0.98), rgba(46,46,46,0.98));
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
}

#masterBar .barRow{
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
#masterBar #topInfoBar{
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#masterBar .barLeft, #masterBar .barCenter, #masterBar .barRight{
  display:flex; align-items:center; gap:10px;
}
#masterBar .barLeft{ flex: 0 0 auto; }
#masterBar .barCenter{ flex: 1 1 auto; min-width: 120px; }
#masterBar .barRight{ flex: 0 0 auto; margin-left:auto; }
#masterBar .btnGroup{ display:flex; align-items:center; gap:8px; }
#masterBar .pill{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
}
#masterBar .inputLike{ min-width: 64px; }
#masterBar .miniBtn, #masterBar .squareBtn{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor: pointer;
  padding: 0 10px;
}
#masterBar .squareBtn{ width: 44px; padding: 0; }
#masterBar .squareBtn.warn{
  background: rgba(255,170,0,0.70);
  border-color: rgba(255,170,0,0.90);
  color: #101010;
}
#masterBar .squareBtn.snapActive{
  background: rgba(255,140,30,0.85);
  border-color: rgba(255,140,30,0.95);
  color: #101010;
}
#masterBar .squareBtn.snapActive:hover{
  background: rgba(255,160,50,0.95);
  border-color: rgba(255,160,50,1);
  color: #101010;
}
#masterBar .playBtn{
  background: rgba(170,210,40,0.85);
  border-color: rgba(170,210,40,0.95);
  color: #101010;
}

#masterBar .playBtn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
}
#masterBar .playBtn.isPlaying{
  background: rgba(255,45,125,0.88);
  border-color: rgba(255,45,125,0.95);
  color: #101010;
}
#masterBar .playBtn.isPlaying:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
}

#masterBar .squareBtn.undoRedo{
  color: rgba(255,140,0,0.96);
}
#masterBar .squareBtn.undoRedo:hover{
  background: rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.94);
  color: rgba(255,140,0,1);
}
#masterBar .squareBtn.undoRedo:active{
  transform: translateY(1px);
  background: rgba(255,255,255,0.70);
  border-color: rgba(255,255,255,0.90);
}
#masterBar .squareBtn.undoRedo:disabled{
  opacity: 0.35;
  cursor: default;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
  transform: none;
}

#masterBar .actionBtn{
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor: pointer;
}
#masterBar .actionBtn.outline{
  background: rgba(255,255,255,0.03);
}
#masterBar .actionBtn.cyan{
  background: rgba(90,190,220,0.85);
  border-color: rgba(90,190,220,0.95);
  color: #101010;
}
#masterBar .actionBtn.gray{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
}
#masterBar .metaLine{
  color: rgba(255,255,255,0.82);
  font-weight: 700;
  font-size: 14px;
}
#masterBar .muted{ color: rgba(255,255,255,0.65); font-weight: 700; }
#masterBar .strong{ color: rgba(255,255,255,0.92); font-weight: 900; }
#masterBar .rightMeta{ gap: 14px; }
#masterBar .field{ display:flex; align-items:center; gap:8px; }
#masterBar .group{
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
#masterBar .btn{
  height: 38px; min-width: 38px; padding: 0 12px;
  border-radius: 0px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff; font-weight: 800;
  cursor: pointer; user-select: none;
}
#masterBar .btn.icon{ padding: 0 10px; }
#masterBar .btn.play{ background: rgba(170,210,40,0.85); border-color: rgba(170,210,40,0.95); color:#111; }
#masterBar .btn.warn{ background: rgba(255,180,40,0.85); border-color: rgba(255,180,40,0.95); color:#111; }
#masterBar .btn.blue{ background: rgba(90,170,255,0.85); border-color: rgba(90,170,255,0.95); }
#masterBar .label{ color: rgba(255,255,255,0.85); font-weight: 800; margin-left: 6px; }
#masterBar input, #masterBar select{
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 0 8px;
  font-weight: 800;
}
#masterBar .stretch{ flex: 1; }

body{
  margin: 0 !important;
  padding-left: var(--sideW) !important;
  padding-top: calc(var(--barH) + 14px) !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed{
  padding-left: 0 !important;
}
body.sidebar-collapsed #uiSidebar{
  transform: translateX(calc(-1 * var(--sideW)));
}
body.sidebar-collapsed #toast{
  left: 16px;
}
body.sidebar-collapsed #main-container{
  left: 0 !important;
}
#uiSidebar{
  transition: transform .18s ease, opacity .18s ease;
  will-change: transform, opacity;
  overflow: hidden;
  backface-visibility: hidden;
}
body.sidebar-collapsed #uiSidebar{
  pointer-events: none;
  opacity: 0;
}
body:not(.sidebar-collapsed) #uiSidebar{
  pointer-events: auto;
  opacity: 1;
}

#toast{
  position: fixed;
  left: calc(var(--sideW) + 16px);
  top: calc(var(--barH) + 10px);
  padding: 10px 14px;
  background: rgba(0,0,0,0.70);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #fff;
  z-index: 2147483647;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  font-size: 14px;
  font-weight: 800;
}

#generator-sidebar{ display:none !important; width:0 !important; }
#materials-wrapper, #materials-list{ display:none !important; }

#uiSidebar .sideList{ display:block; }

#main-container{ display:flex; }
#keyboard-container{ width: 120px; flex-shrink:0; overflow-x:hidden; overflow-y:hidden; border-right:1px solid #333; background:#222; position:relative; }
#keyboardCanvas{ display:block; width: 100%; height: 100%; }

#keyboard-container{ padding-top:24px; box-sizing:border-box; }
#keyboardCanvas{ position:absolute; left:0; right:0; top:24px; bottom:0; width:100%; height:calc(100% - 24px); }
#kb-float{ top:30px !important; }

#editor-area{ flex: 1; background:#121212; }

#ruler-container{ position:sticky; left:0; right:0; top:0; height:24px; background:#1a1a1a; z-index:80; }
#rulerCanvas{ position:absolute; left:0; right:0; top:0; height:24px; width:100%; display:block; }
#pianoRoll{ position:absolute; left:0; right:0; top:24px; bottom:0; width:100%; height:calc(100% - 24px); }
#overlayWorld{ position:absolute; left:0; right:0; top:24px; bottom:0; pointer-events:none; overflow:hidden; }
#overlayPlayhead{ position:absolute; top:24px; bottom:0; width:2px; background: rgba(255,0,0,0.7); }

#topInfoBar .btnGroup{ display:none !important; }

.melody-candidates{
  padding: 10px;
  border-radius: 14px;
  background: rgba(15,22,35,.55);
  border: 1px solid rgba(255,255,255,.08);
}
.melody-candidates .mc-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:8px;
}
.melody-candidates .mc-title{ font-weight:700; font-size:13px; opacity:.95; }
.melody-candidates .mc-meta{ font-size:11px; opacity:.65; text-align:right; }
.melody-candidates .mc-list{ display:flex; flex-direction:column; gap:8px; }
.melody-candidates .mc-item{
  cursor:pointer;
  padding:10px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.melody-candidates .mc-item:hover{ background: rgba(90,160,255,.10); border-color: rgba(90,160,255,.22); }
.melody-candidates .mc-item.active{ background: rgba(90,160,255,.18); border-color: rgba(90,160,255,.35); }
.melody-candidates .mc-item .row1{ display:flex; justify-content:space-between; gap:8px; }
.melody-candidates .mc-item .name{ font-weight:700; font-size:12px; }
.melody-candidates .mc-item .tags{ font-size:11px; opacity:.72; white-space:nowrap; }
.melody-candidates .mc-item .preview{
  margin-top:6px; font-size:11px; opacity:.75; line-height:1.3;
  max-height:2.6em; overflow:hidden;
}
.melody-candidates .mc-hint{ margin-top:8px; font-size:11px; opacity:.55; }

.melody-candidates .mc-list{
  max-height: 420px;
  overflow: auto;
  padding-right: 6px;
}
.melody-candidates .mc-list::-webkit-scrollbar{ width: 10px; }
.melody-candidates .mc-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 10px;
}
.melody-candidates .mc-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 10px;
}
.melody-candidates .mc-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.melody-candidates .mc-item.active{
  border-color: rgba(255, 212, 80, .95);
  box-shadow: 0 0 0 2px rgba(255, 212, 80, .35) inset;
  background: rgba(255, 212, 80, .08);
}
.melody-candidates .mc-num{
  width: 34px;
  font-weight: 900;
  font-size: 12px;
  opacity: .92;
  padding-top: 2px;
}
.melody-candidates .mc-body{ flex:1; min-width:0; }
.melody-candidates .mc-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  margin-bottom: 6px;
}
.melody-candidates .mc-title2{
  font-weight:800; font-size:12px;
}
.melody-candidates .mc-tags2{
  font-size:11px; opacity:.68; white-space:nowrap;
}
.melody-candidates .mc-thumb{
  width: 112px;
  height: 70px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  overflow:hidden;
}
.melody-candidates .mc-hintline{
  font-size: 11px;
  opacity: .65;
}

#msModalBack{
  position: fixed;
  inset: 0;
  
  z-index: 2147483647;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;

  
  width: 100vw;
  height: 100vh;
  pointer-events: auto;
  display: none;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
#msModal{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(1200px, calc(100vw - 40px));
  height: min(620px, calc(100vh - 40px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(14,18,28,0.92);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
#msModal .msTop{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#msModal .msTitle{
  display:flex; align-items:center; gap:10px;
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: 0.5px;
}
#msModal .msClose{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  cursor:pointer;
}
#msModal .msClose:hover{ background: rgba(255,255,255,0.10); }

#msModal .msBody{
  flex:1;
  display:flex;
  min-height: 0;
}
#msModal .msLeft{
  width: 170px;
  border-right: 1px solid rgba(255,255,255,0.10);
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
#msModal .msTab{
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
#msModal .msTab.active{
  background: rgba(56,189,248,0.22);
  border-color: rgba(56,189,248,0.45);
  color: rgba(255,255,255,0.95);
}
#msModal .msRight{
  flex:1;
  padding: 18px 20px;
  overflow:auto;
}
#msModal .msSectionTitle{
  color: rgba(255,255,255,0.85);
  font-weight: 900;
  margin-bottom: 10px;
}
#msModal .msRow{
  display:flex;
  gap: 14px;
  align-items:center;
  margin: 12px 0;
  flex-wrap: wrap;
}
#msModal label.msLabel{
  width: 150px;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
}
#msModal select, #msModal input[type="text"], #msModal input[type="number"]{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  padding: 0 12px;
  outline:none;
}

#msModal input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width: 720px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  outline:none;
  position: relative;
  z-index: 2;
}
#msModal input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(85,214,255,1), rgba(59,130,246,1));
  border: 1px solid rgba(255,255,255,0.18);
}
#msModal input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(85,214,255,1), rgba(59,130,246,1));
  border: 1px solid rgba(255,255,255,0.18);
}
#msModal .msRange{
  display:flex; gap: 10px; align-items:center;
}
#msModal .msPill{
  height: 44px;
  border-radius: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor:pointer;
}
#msModal .msPill.active{
  background: rgba(59,130,246,0.28);
  border-color: rgba(59,130,246,0.55);
}
#msModal input[type="range"]{ width: min(520px, 90%); }
#msModal .msHint{
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 700;
}

#msModal .msRadioRow{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
#msModal .msRadio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: rgba(255,255,255,0.88);
  font-weight: 800;
}
#msModal .msInput{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  padding: 0 12px;
  outline:none;
}
#msModal .msAuthorList{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#msModal .msAuthorBtn{
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  cursor:pointer;
}
#msModal .msAuthorBtn.active{
  background: rgba(59,130,246,0.28);
  border-color: rgba(59,130,246,0.55);
}
#msModal .msMarketShell{
  margin-top: 18px;
  display:grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items:start;
}
#msModal .msMarketSidebar,
#msModal .msMarketContent{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  padding: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
#msModal .msMarketSidebar .msSectionTitle,
#msModal .msMarketContent .msSectionTitle{
  margin-bottom: 12px;
}
#msModal .msMarketQuickMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 14px;
}
#msModal .msMarketTag{
  display:inline-flex;
  align-items:center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.84);
  font-size: 12px;
  font-weight: 800;
}
#msModal .msMarketStats{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 14px;
}
#msModal .msMarketStats .msHint{
  font-size: 13px;
}
#msModal .msMarketGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
#msModal .msMarketCard{
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(680px 180px at 0% 0%, rgba(59,130,246,0.10), transparent 58%);
  border-radius: 16px;
  padding: 16px;
}
#msModal .msMarketCardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
#msModal .msMarketTitle{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.94);
  margin:0;
}
#msModal .msMarketSub{
  margin-top: 4px;
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 700;
}
#msModal .msMarketPrice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 58px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(59,130,246,0.18);
  border: 1px solid rgba(59,130,246,0.32);
  color: rgba(255,255,255,0.94);
  font-weight: 900;
}
#msModal .msMarketWave{
  height: 68px;
  border-radius: 12px;
  margin: 12px 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 10px);
  position:relative;
  overflow:hidden;
}
#msModal .msMarketWave::after{
  content:'';
  position:absolute;
  inset:12px 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(85,214,255,0.22) 12%, rgba(59,130,246,0.35) 38%, rgba(85,214,255,0.20) 72%, transparent 100%);
  clip-path: polygon(0 60%, 8% 50%, 16% 58%, 24% 40%, 32% 62%, 40% 34%, 48% 64%, 56% 42%, 64% 56%, 72% 28%, 80% 64%, 88% 44%, 96% 58%, 100% 52%, 100% 100%, 0 100%);
}
#msModal .msMarketMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 12px;
}
#msModal .msMarketMeta .msMarketTag{
  background: rgba(255,255,255,0.04);
}
#msModal .msMarketActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#msModal .msMarketBtn{
  height: 40px;
  min-width: 94px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor:pointer;
}
#msModal .msMarketBtn.primary{
  background: rgba(59,130,246,0.75);
  border-color: rgba(59,130,246,0.85);
}
#msModal .msMarketBtn:hover{
  background: rgba(255,255,255,0.10);
}
#msModal .msMarketBtn.primary:hover{
  background: rgba(59,130,246,0.85);
}
#msModal .msMarketPrice.free{
  background: rgba(34,197,94,0.16);
  border-color: rgba(34,197,94,0.32);
}
#msModal .msMarketTag.msMarketTrustTag{
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.22);
  color: rgba(214,233,255,0.96);
}
#msModal .msMarketBtn.secondary{
  background: rgba(255,255,255,0.07);
  border-color: rgba(59,130,246,0.18);
}
#msModal .msMarketBtn.secondary:hover{
  background: rgba(59,130,246,0.12);
}
#msModal .msHistoryOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4,10,22,0.72);
  backdrop-filter: blur(8px);
  z-index: 2147483646;
}
#msModal .msHistoryOverlay.show{
  display: flex;
}
#msModal .msHistoryModal{
  width: min(980px, calc(100vw - 80px));
  max-height: calc(100vh - 90px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(17,25,42,0.98), rgba(11,18,32,0.98)),
    radial-gradient(980px 240px at 0% 0%, rgba(59,130,246,0.10), transparent 55%);
  box-shadow: 0 32px 90px rgba(0,0,0,0.42);
  padding: 22px;
  position: relative;
}
#msModal .msHistoryClose{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 24px;
  cursor: pointer;
}
#msModal .msHistoryHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-right: 56px;
}
#msModal .msHistoryPrice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 64px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(59,130,246,0.18);
  border: 1px solid rgba(59,130,246,0.30);
  font-weight: 900;
}
#msModal .msHistoryTopMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
#msModal .msHistoryBody{
  display:grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
}
#msModal .msHistoryCol{
  display:flex;
  flex-direction:column;
  gap:16px;
}
#msModal .msHistoryColWide{
  min-width: 0;
}
#msModal .msHistoryCard{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 16px;
}
#msModal .msHistoryCardTitle{
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 12px;
}
#msModal .msHistorySummaryList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#msModal .msHistorySummaryItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
#msModal .msHistorySummaryItem span{
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 700;
}
#msModal .msHistorySummaryItem strong{
  color: rgba(255,255,255,0.94);
  text-align: right;
  font-size: 13px;
}
#msModal .msHistoryTimeline{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#msModal .msHistoryStep{
  display:grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items:center;
}
#msModal .msHistoryStepTime{
  color: rgba(85,214,255,0.95);
  font-size: 12px;
  font-weight: 900;
}
#msModal .msHistoryStepText{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
#msModal .msHistoryReplay{
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 12px);
  padding: 18px 16px;
  overflow: hidden;
}
#msModal .msHistoryReplayBar{
  height: 78px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(85,214,255,0.12) 0%, rgba(59,130,246,0.26) 22%, rgba(85,214,255,0.16) 44%, rgba(59,130,246,0.32) 66%, rgba(85,214,255,0.10) 100%);
  clip-path: polygon(0 58%, 8% 44%, 16% 60%, 24% 34%, 32% 66%, 40% 30%, 48% 62%, 56% 40%, 64% 54%, 72% 26%, 80% 64%, 88% 38%, 96% 56%, 100% 48%, 100% 100%, 0 100%);
}
#msModal .msHistoryReplayTrack{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top: 12px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
}
#msModal .msHistoryActionRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
@media (max-width: 980px){
  #msModal .msHistoryBody{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px){
  #msModal .msHistoryModal{
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 18px;
  }
  #msModal .msHistoryReplayTrack{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1200px){
  #msModal .msMarketShell{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  #msModal .msMarketGrid{ grid-template-columns: 1fr; }
}

#msModal .msFooter{
  height: 70px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
  padding: 0 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
#msModal .msBtn{
  height: 44px;
  min-width: 92px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor:pointer;
}
#msModal .msBtn.primary{
  background: rgba(59,130,246,0.75);
  border-color: rgba(59,130,246,0.85);
}
#msModal .msBtn:hover{ background: rgba(255,255,255,0.10); }
#msModal .msBtn.primary:hover{ background: rgba(59,130,246,0.85); }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

  
  #editor-area{
    scrollbar-width: none;          
    -ms-overflow-style: none;       
  }
  #editor-area::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }

  
  #editor-shell{
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: transparent;
  }

  
  #railBottom{
    position: absolute;
    left: 0;
    bottom: 0;
    right: var(--railW, 34px);
    height: var(--railH, 34px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 60;
    box-sizing: border-box;
    pointer-events: auto;
  }
  #railRight{
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--railH, 34px);
    width: var(--railW, 34px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 6px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 60;
    box-sizing: border-box;
    pointer-events: auto;
  }

  
  .railRow80{ flex: 0 0 80%; min-width: 240px; }
  .railRow20{ flex: 0 0 20%; min-width: 180px; display:flex; align-items:center; justify-content:flex-end; gap: 8px; }
  .railCol80{ flex: 0 0 80%; min-height: 160px; display:flex; align-items:stretch; justify-content:center; }
  .railCol20{ flex: 0 0 20%; min-height: 120px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap: 8px; }

  
  .hTrack{
    position: relative;
    width: 100%;
    height: 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
    cursor: pointer;
  }
  .hThumb{
    position: absolute;
    top: 1px;
    height: 5px;
    border-radius: 8px;
    background: rgba(255,255,255,0.35);
    cursor: grab;
  }
  .hThumb:active{ cursor: grabbing; }

  .vTrack{
    position: relative;
    width: 7px;
    height: 100%;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
    cursor: pointer;
  }
  .vThumb{
    position: absolute;
    left: 1px;
    width: 5px;
    border-radius: 8px;
    background: rgba(255,255,255,0.35);
    cursor: grab;
  }
  .vThumb:active{ cursor: grabbing; }

  
  .zBtn{
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    user-select: none;
    cursor: pointer;
  }
  .zBtn:hover{ background: rgba(0,0,0,0.65); }

  .zTrackX{
    position: relative;
    width: 120px;
    height: 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    cursor: pointer;
  }
  .zKnobX{
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.35);
    cursor: grab;
  }
  .zKnobX:active{ cursor: grabbing; }

  .zTrackY{
    position: relative;
    width: 7px;
    height: 120px;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    cursor: pointer;
  }
  .zKnobY{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.35);
    cursor: grab;
  }
  .zKnobY:active{ cursor: grabbing; }

  
  #railBottom, #railRight { pointer-events: auto; }

  
  #zoomBars, #xZoomBar, #yZoomBar{ display:none !important; }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

  #dbgSuiteMask{position:fixed;inset:0;background:rgba(0,0,0,0);display:none;z-index:2147483647;}
  #dbgSuite{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1100px,95vw);height:min(720px,92vh);z-index:2147483647;isolation:isolate;opacity:1;filter:none;
    background:#151515;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.6);
    display:flex;flex-direction:column;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans TC',sans-serif;z-index:2147483647;}
  #dbgSuite header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
  #dbgSuite header .title{font-weight:700;letter-spacing:.5px}
  #dbgSuite header .spacer{flex:1}
  .dbgBtn{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eaeaea;cursor:pointer}
  .dbgBtn:hover{background:rgba(255,255,255,.10)}
  .dbgBtn.primary{background:rgba(64,170,200,.22);border-color:rgba(64,170,200,.45)}
  .dbgBtn.danger{background:rgba(240,80,80,.18);border-color:rgba(240,80,80,.35)}
  #dbgSuite main{flex:1;display:grid;grid-template-columns: 1.2fr .9fr;gap:10px;padding:10px;min-height:0}
  .dbgCard{border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.20);min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .dbgCard h3{margin:0;padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;opacity:.92}
  .dbgCard .content{padding:10px;overflow:auto;flex:1;min-height:0}
  .dbgRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .dbgLabel{font-size:12px;opacity:.8}
  .dbgSelect,.dbgInput{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:#eee;padding:6px 8px}
  .dbgTable{width:100%;border-collapse:collapse;font-size:12px}
  .dbgTable th,.dbgTable td{border-bottom:1px solid rgba(255,255,255,.08);padding:6px 6px;text-align:left;white-space:nowrap}
  .dbgTable tr:hover{background:rgba(255,255,255,.05)}
  .dbgMono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-word}
  .dbgCard, #dbgSuite{color:#f2f2f2;}
  .dbgMono{color:#f4f6f8 !important; opacity:1 !important; text-shadow:0 1px 0 rgba(0,0,0,0.35);} 
  .dbgTable th,.dbgTable td{color:#f2f2f2;}
  .dbgTable thead th{color:#ffffff;}
  .dbgInput::placeholder{color:rgba(255,255,255,0.55);} 
  #dbgSuite{background:#1b1e24; border-color:rgba(255,255,255,0.18);} 
  .dbgCard{background:rgba(255,255,255,0.03);} 
  .dbgCard .content{background:rgba(0,0,0,0.18);} 

  
  body.debug-mode #dbgSuiteMask{z-index:2147483647 !important;}
  body.debug-mode #dbgSuite{z-index:2147483647 !important; opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;}
  body.debug-mode{filter:none !important; backdrop-filter:none !important;}
  
  body.debug-mode .overlay,
  body.debug-mode .modal-backdrop,
  body.debug-mode .modalMask,
  body.debug-mode .sidebar-mask,
  body.debug-mode .sidebarOverlay,
  body.debug-mode .dim-layer,
  body.debug-mode .mask,
  body.debug-mode [data-overlay],
  body.debug-mode [data-backdrop]{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

#msModal .msFileCard{border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.03);border-radius:16px;padding:16px;margin-top:14px;}
#msModal .msValueBox{min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.22);font-weight:800;color:rgba(231,238,251,0.96);}
#msModal .msValueBox.muted{color:rgba(231,238,251,0.74);font-weight:700;}
#msModal .msActionRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;}
#msModal .msNoteWarn{font-size:13px;line-height:1.7;color:rgba(255,220,140,0.96);margin-top:12px;font-weight:800;}
#msModal .msSubtle{font-size:13px;line-height:1.7;color:rgba(231,238,251,0.80);margin-top:10px;}
#msModal .msTrackList{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
#msModal .msTrackCard{width:100%;text-align:left;padding:14px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:rgba(231,238,251,0.96);cursor:pointer;}
#msModal .msTrackCard:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);}
#msModal .msTrackCard.active{background:rgba(59,130,246,0.20);border-color:rgba(59,130,246,0.45);box-shadow:0 0 0 2px rgba(59,130,246,0.20) inset;}
#msModal .msTrackCard.disabled{opacity:0.46;filter:grayscale(0.84);cursor:not-allowed;}
#msModal .msTrackTop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;}
#msModal .msTrackMeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:rgba(231,238,251,0.82);}
#msModal .msTrackMeta b{color:rgba(255,255,255,0.98);}
#msModal .msChip{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);font-size:12px;font-weight:900;color:rgba(255,255,255,0.84);}
#msModal .msLoadBtn[disabled]{opacity:0.50;cursor:not-allowed;filter:grayscale(0.75);}
#msModal .msTwoCol{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#msModal .msSelectWrap{position:relative;width:100%;}
#msModal .msSelect{width:100%;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.22);color:#e7eefb;padding:0 12px;outline:none;font-weight:700;}
#msModal .msSelect:focus{border-color:rgba(64,160,255,0.55);box-shadow:0 0 0 3px rgba(64,160,255,0.18);}
#msModal .msCol{min-width:0;}
@media (max-width: 980px){#msModal .msTwoCol{grid-template-columns:1fr;}}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

  body.stress-mode #stressSuiteMask{z-index:2147483646 !important;}
  body.stress-mode #stressSuite{z-index:2147483646 !important;}
  #stressSuiteMask{
    position:fixed; inset:0;
    display:none;
    background:rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
  }
  #stressSuite{
    position:absolute;
    inset:24px;
    border-radius:16px;
    background:rgba(24,28,36,.96);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 80px rgba(0,0,0,.55);
    color:#e8eef7;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  #stressSuite header{
    display:flex; align-items:center; gap:10px;
    padding:14px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  #stressSuite .title{font-size:20px; font-weight:700; letter-spacing:.3px;}
  #stressSuite .spacer{flex:1;}
  #stressSuite .btn{
    appearance:none; border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06); color:#e8eef7;
    padding:8px 12px; border-radius:12px; cursor:pointer;
    font-weight:600;
  }
  #stressSuite .btn.primary{background:rgba(56,189,248,.18); border-color:rgba(56,189,248,.35);}
  #stressSuite .btn.danger{background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.35);}
  #stressSuite main{flex:1; display:grid; grid-template-columns: 1.2fr .8fr; gap:12px; padding:12px; overflow:auto;}
  #stressSuite .card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px; padding:12px;
  }
  #stressSuite .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  #stressSuite label{opacity:.85; font-size:13px;}
  #stressSuite select, #stressSuite input{
    background:rgba(0,0,0,.22);
    color:#e8eef7;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    padding:8px 10px;
    outline:none;
  }
  #stressSuite .mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
    font-size:12px; line-height:1.35;
    white-space:pre-wrap;
    word-break:break-word;
  }
  #stressLog{
    max-height:420px; overflow:auto;
    padding:10px;
    background:rgba(0,0,0,.28);
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
  }
  #stressHint{opacity:.85;}

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

#ltMemLibBack{
  position:fixed;inset:0;display:none;z-index:200000010;
  background:rgba(0,0,0,.55);
  pointer-events:none;
}
#ltMemLibModal{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(620px,92vw);
  max-height:82vh;
  background:rgba(18,24,34,.99);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 24px 72px rgba(0,0,0,.55);
  color:#e7eefb;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#ltMemLibHeader{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  flex-shrink:0;
}
#ltMemLibTitle{font-size:15px;font-weight:900;flex:1;}
#ltMemLibCount{font-size:12px;color:rgba(231,238,251,.55);margin-left:auto;}
#ltMemLibBody{
  flex:1;overflow-y:auto;
  padding:10px 14px;
  display:flex;flex-direction:column;gap:6px;
  min-height:80px;
}
#ltMemLibBody::-webkit-scrollbar{width:4px;}
#ltMemLibBody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}
.ltMLItem{
  display:block;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:11px 13px;
  transition:background .12s, border-color .12s;
}
.ltMLItem:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.ltMLItem.deleted{opacity:.35;pointer-events:none;}
.ltMLItemInfo{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ltMLItemTitle{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ltMLItemMeta{font-size:11px;color:rgba(231,238,251,.52);white-space:nowrap;}
.ltMLItemWeight{
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;
  color:rgba(231,238,251,.80);
  flex-shrink:0;
}
.ltMLWeightVal{
  min-width:28px;text-align:center;
  font-size:13px;font-weight:900;
  color:#fbbf24;
}
.ltMLActions{
  display:flex;align-items:center;gap:5px;
  flex-shrink:0;
}
.ltMLBtn{
  height:28px;padding:0 9px;
  border-radius:7px;
  border:0.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:rgba(231,238,251,.88);
  font-size:11px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .1s,border-color .1s;
}
.ltMLBtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.30);}
.ltMLBtn.play{border-color:rgba(99,202,247,.4);color:#63caf7;}
.ltMLBtn.play:hover{background:rgba(99,202,247,.12);}
.ltMLBtn.del{border-color:rgba(248,113,113,.35);color:#f87171;}
.ltMLBtn.del:hover{background:rgba(248,113,113,.12);}
.ltMLBtn.wup{border-color:rgba(74,222,128,.35);color:#4ade80;}
.ltMLBtn.wup:hover{background:rgba(74,222,128,.10);}
.ltMLBtn.wdn{border-color:rgba(251,191,36,.35);color:#fbbf24;}
.ltMLBtn.wdn:hover{background:rgba(251,191,36,.10);}
#ltMemLibEmpty{
  text-align:center;padding:28px 0;
  font-size:13px;color:rgba(231,238,251,.40);
}
#ltMemLibFooter{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 16px 12px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.08);
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.ltMemLibFootNote{font-size:11px;color:rgba(231,238,251,.40);line-height:1.4;}
.ltMemLibFootBtns{display:flex;gap:8px;align-items:center;justify-content:flex-end;}
.ltMLFootBtn{
  height:34px;padding:0 14px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#e7eefb;font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.ltMLFootBtn:hover{background:rgba(255,255,255,.13);}
.ltMLFootBtn.primary{
  background:rgba(64,160,255,.90);
  border-color:rgba(64,160,255,.50);
  color:#071018;
}
.ltMLFootBtn.primary:hover{filter:brightness(1.06);}

  #dawAlertBack{ position:fixed; inset:0; display:none; z-index:200000000; background:rgba(0,0,0,.45); }
  #dawAlert{
    position:absolute; left:50%; top:22%;
    transform:translateX(-50%);
    width:min(520px,86vw);
    background:rgba(22,28,38,.98);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
    color:#fff;
    overflow:hidden;
  }
  #dawAlertHeader{
    display:flex; align-items:center; gap:10px;
    padding:14px 16px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  }
  #dawAlertTitle{ font-weight:900; letter-spacing:.2px; }
  #dawAlertBody{ padding:14px 16px 16px 16px; }
  #dawAlertMsg{
    white-space:pre-wrap; word-break:break-word;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    padding:12px 12px;
    line-height:1.45;
    font-size:14px;
    color:rgba(255,255,255,.92);
  }
  #dawAlertFooter{
    display:flex; justify-content:flex-end; gap:10px;
    padding:12px 16px 14px 16px;
    border-top:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.06);
  }
  #dawAlertOk{
    min-width:92px; height:36px; padding:0 14px; font-weight:900;
    padding:9px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(64,160,255,.92);
    color:#071018;
    font-weight:900;
    cursor:pointer;
  }
  #dawAlertOk:hover{ filter:brightness(1.04); }

  #dawAlertX{ display:none !important; }

  
  #dawConfirmBack{ position:fixed; inset:0; display:none; z-index:200000000; background:rgba(0,0,0,.45); }
  #dawConfirm{
    position:absolute; left:50%; top:22%;
    transform:translateX(-50%);
    width:min(520px,86vw);
    background:rgba(22,28,38,.98);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
    color:#fff;
    overflow:hidden;
  }
  #dawConfirmHeader{
    display:flex; align-items:center; gap:10px;
    padding:14px 16px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  }
  #dawConfirmTitle{ font-weight:900; letter-spacing:.2px; }
  #dawConfirmBody{ padding:14px 16px 16px 16px; }
  #dawConfirmMsg{
    white-space:pre-wrap; word-break:break-word;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    padding:12px 12px;
    line-height:1.45;
    font-size:14px;
    color:rgba(255,255,255,.92);
  }
  #dawConfirmFooter{
    display:flex; justify-content:flex-end; gap:10px;
    padding:12px 16px 14px 16px;
    border-top:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.06);
  }
  #dawConfirmCancel{
    min-width:92px; height:36px; padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.92);
    font-weight:900;
    cursor:pointer;
  }
  #dawConfirmCancel:hover{ filter:brightness(1.04); }
  #dawConfirmOk{
    min-width:92px; height:36px; padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(64,160,255,.92);
    color:#071018;
    font-weight:900;
    cursor:pointer;
  }
  #dawConfirmOk:hover{ filter:brightness(1.04); }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

.ltr-plans-wrap{
  max-width:1100px; margin:0 auto; padding:4px 0 16px;
  font-family:system-ui,-apple-system,'Segoe UI','PingFang TC',sans-serif;
}
.ltr-plans-title{
  font-size:1.45rem; font-weight:900; color:#eaf2ff; text-align:center;
  margin-bottom:4px; letter-spacing:-.3px;
}
.ltr-plans-sub{
  text-align:center; color:rgba(234,242,255,.55); font-size:.92rem; margin-bottom:20px;
}
.ltr-plans-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media(max-width:720px){ .ltr-plans-grid{ grid-template-columns:1fr; } }

.ltr-plan-card{
  border-radius:20px; padding:22px 20px 20px;
  border:1px solid rgba(120,180,255,.22);
  background:linear-gradient(160deg,rgba(18,24,40,.82),rgba(10,14,26,.78));
  display:flex; flex-direction:column; gap:4px;
  position:relative; transition:border-color .2s, box-shadow .2s;
}
.ltr-plan-card:hover{ border-color:rgba(85,214,255,.5); box-shadow:0 0 24px rgba(85,214,255,.12); }
.ltr-plan-card.ltr-popular{
  border-color:rgba(85,214,255,.7);
  box-shadow:0 0 32px rgba(85,214,255,.18);
}
.ltr-popular-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,#55d6ff,#8b5cff);
  color:#fff; font-size:.75rem; font-weight:800;
  padding:3px 14px; border-radius:20px; white-space:nowrap; letter-spacing:.5px;
}
.ltr-plan-name{
  font-size:1.1rem; font-weight:800; color:#eaf2ff; margin-bottom:2px;
}
.ltr-plan-price{
  font-size:2rem; font-weight:900; color:#55d6ff; line-height:1.1;
}
.ltr-plan-price span{ font-size:.95rem; font-weight:600; color:rgba(234,242,255,.6); }
.ltr-plan-orig{
  font-size:.85rem; color:rgba(234,242,255,.4);
  text-decoration:line-through; margin-left:4px;
}
.ltr-plan-discount{
  display:inline-block; background:rgba(255,214,6,.18); color:#FFD306;
  font-size:.75rem; font-weight:700; padding:2px 8px; border-radius:8px;
  margin-bottom:6px;
}
.ltr-plan-divider{
  border:none; border-top:1px solid rgba(255,255,255,.08); margin:10px 0;
}
.ltr-plan-features{ list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:7px; }
.ltr-plan-features li{
  font-size:.88rem; color:rgba(234,242,255,.8);
  display:flex; align-items:flex-start; gap:8px;
}
.ltr-plan-features li::before{ content:'✓'; color:#55d6ff; font-weight:800; flex-shrink:0; }
.ltr-plan-features li.ltr-no::before{ content:'✗'; color:rgba(255,255,255,.25); }
.ltr-plan-features li.ltr-no{ color:rgba(234,242,255,.3); }

.ltr-plan-btn{
  margin-top:auto; padding:11px 0; border-radius:12px; font-size:.95rem;
  font-weight:700; cursor:pointer; border:none; letter-spacing:.3px;
  transition:opacity .2s; width:100%;
}
.ltr-plan-btn:hover{ opacity:.85; }
.ltr-plan-btn:disabled{ opacity:.45; cursor:not-allowed; }
.ltr-plan-btn.ltr-btn-primary{
  background:linear-gradient(135deg,#55d6ff,#8b5cff); color:#fff;
}
.ltr-plan-btn.ltr-btn-outline{
  background:transparent; color:#55d6ff;
  border:1.5px solid rgba(85,214,255,.5);
}
.ltr-plan-btn.ltr-btn-current{
  background:rgba(255,255,255,.07); color:rgba(234,242,255,.55);
  border:1px solid rgba(255,255,255,.1); cursor:default;
}

.ltr-status-bar{
  margin-top:18px; padding:12px 16px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.85rem; color:rgba(234,242,255,.7);
}
.ltr-status-chip{
  background:rgba(85,214,255,.12); color:#55d6ff;
  padding:3px 10px; border-radius:20px; font-weight:700; font-size:.82rem;
}
.ltr-sub-msg{
  margin-top:10px; font-size:.84rem; min-height:20px;
  color:rgba(234,242,255,.55); text-align:center;
}

.ltr-gate-row{
  margin-top:12px; padding:10px 14px; border-radius:12px;
  background:rgba(255,165,0,.05); border:1px dashed rgba(255,165,0,.2);
  display:none; 
}
.ltr-gate-row-title{
  font-size:.72rem; color:rgba(255,165,0,.65); letter-spacing:.06em;
  margin-bottom:8px; font-weight:600;
}
.ltr-gate-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:6px;
}
.ltr-gate-badge{
  display:flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:8px;
  font-size:.75rem; font-weight:500;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition: background .2s, border-color .2s;
}
.ltr-gate-badge.ok{
  background:rgba(25,212,123,.1); border-color:rgba(25,212,123,.3);
  color:#19d47b;
}
.ltr-gate-badge.blocked{
  background:rgba(255,177,59,.08); border-color:rgba(255,177,59,.25);
  color:#ffb13b;
}
.ltr-gate-badge .gi{ font-size:.9rem; line-height:1; flex-shrink:0; }
.ltr-gate-badge .gl{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ltr-gate-badge .gr{ font-size:.68rem; opacity:.7; flex-shrink:0; }

.ltr-dev-console{
  margin-top:16px; padding:12px 14px; border-radius:12px;
  background:rgba(255,214,6,.04); border:1px dashed rgba(255,214,6,.2);
  font-size:.8rem; color:rgba(255,214,6,.7);
}
.ltr-dev-console summary{ cursor:pointer; font-weight:700; }

.marketingAIGenBox{
  margin-top:18px; padding:18px; border-radius:18px;
  border:1px solid rgba(232,144,39,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.marketingAIGenHead{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.marketingAIGenHead h4{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.marketingAIGenBadge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(232,144,39,.14); border:1px solid rgba(232,144,39,.24);
  color:rgba(255,224,189,.98); font-size:12px; font-weight:800; letter-spacing:.2px;
}
.marketingAIGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.marketingAIColumn{
  padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
}
.marketingAIColumnTitle{ margin:0 0 10px; font-size:15px; font-weight:900; color:#fff; }
.marketingAIOptions{ display:flex; flex-direction:column; gap:10px; }
.marketingAIOption{
  width:100%; text-align:left; padding:12px 12px 10px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.10); background:rgba(9,18,36,.56); color:#eef4ff;
  transition:.18s ease;
}
.marketingAIOption:hover{ transform:translateY(-1px); border-color:rgba(232,144,39,.28); background:rgba(255,255,255,.06); }
.marketingAIOption.is-selected{ border-color:rgba(232,144,39,.55); box-shadow:0 0 0 1px rgba(232,144,39,.18) inset; }
.marketingAIOptionTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.marketingAIOptionLabel{ font-size:12px; font-weight:900; color:rgba(255,211,164,.95); }
.marketingAIOptionMeta{ font-size:11px; color:rgba(215,223,238,.72); }
.marketingAIOptionText{ font-size:14px; line-height:1.7; color:#fff; }
.marketingAIHintBar{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.marketingAIHintPill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:rgba(220,228,242,.92); font-size:12px; font-weight:700;
}
.marketingAIEmpty{
  padding:12px 14px; border-radius:14px; border:1px dashed rgba(255,255,255,.12);
  color:rgba(215,223,238,.72); font-size:13px; line-height:1.7;
}
@media (max-width: 1080px){ .marketingAIGrid{ grid-template-columns:1fr; } }

  .mvGuideShell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:start;margin-top:14px;}
  .mvGuideMain,.mvGuideSide,.mvGuideResultPanel{border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));box-shadow:0 18px 40px rgba(0,0,0,.22);padding:20px;}
  .mvGuideMain{min-height:540px;}
  .mvGuideHeaderRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
  .mvGuideQuestionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;}
  .mvGuideQuestionCard{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(9,20,42,.92), rgba(9,20,42,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
  .mvGuideQuestionCard.is-full{grid-column:1 / -1;}
  .mvGuideQuestionCard .agentLabel{font-size:14px;margin-bottom:10px;color:#f5f7ff;}
  .mvGuideQuestionCard .agentInput{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);min-height:48px;}
  .mvGuideQuestionCard textarea.agentInput{min-height:124px;padding-top:14px;}
  .mvGuideHintBox{margin-top:14px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg, rgba(232,144,39,.12), rgba(232,144,39,.04));border:1px solid rgba(232,144,39,.24);color:#fff;}
  .mvGuideHintBox b{font-weight:800;}
  .mvGuideActionRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
  .mvGuideStepPanel .agentCard{background:transparent;border:none;box-shadow:none;padding:0;}
  .mvGuideStepPanel .agentCardHead{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);}
  .mvGuideStepPanel .agentCardBody{padding:0;}
  .mvGuideOptionGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
  .mvGuideCompactBox{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(10,21,45,.85), rgba(10,21,45,.55));}
  .mvGuideCompactBox h4{margin:0 0 8px;font-size:15px;}
  .mvGuideResultPanel{grid-column:1 / -1;padding:22px;}
  .mvGuideResultPanel .agentPanelTitle{margin-bottom:8px;}
  .mvGuideStickySide{position:sticky;top:18px;}
  .mvGuideStepPanel{min-height:420px;}
  .mvGuideFooterNav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px;}
  @media (max-width: 1080px){.mvGuideShell{grid-template-columns:1fr;}.mvGuideStickySide{position:static;}.mvGuideQuestionGrid{grid-template-columns:1fr;}.mvGuideQuestionCard.is-full{grid-column:auto;}}

#letronAnalysisToolbar{
  position:fixed; right:18px; top:118px; z-index:2147483647; display:none;
  flex-direction:column; gap:10px; padding:10px; border-radius:18px;
  background:rgba(10,18,34,.92); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 42px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(10px); pointer-events:auto; isolation:isolate;
}
#letronAnalysisToolbar.is-open{ display:flex; }
#letronAnalysisDragHandle{
  height:18px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.70); font-size:12px; letter-spacing:2px; cursor:move; user-select:none;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
#letronAnalysisDragHandle:hover{ background:rgba(255,255,255,.07); color:#fff; }
.letronAnaToolBtn{
  width:52px; height:52px; border-radius:16px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:#fff; font-weight:900; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:11px; transition:.15s ease;
}
.letronAnaToolBtn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); }
.letronAnaToolBtn.is-active{
  background:linear-gradient(180deg, rgba(77,163,255,.30), rgba(77,163,255,.12));
  border-color:rgba(77,163,255,.55); box-shadow:0 0 18px rgba(77,163,255,.16);
}

.letronAnaToolBtn[data-tool="generate"]{
  border-color:rgba(167,139,250,.35); background:rgba(167,139,250,.08);
}
.letronAnaToolBtn[data-tool="generate"]:hover{
  background:rgba(167,139,250,.16); border-color:rgba(167,139,250,.6);
}
.letronAnaToolBtn[data-tool="generate"].is-active{
  background:linear-gradient(180deg,rgba(167,139,250,.35),rgba(167,139,250,.15));
  border-color:rgba(167,139,250,.75); box-shadow:0 0 18px rgba(167,139,250,.22);
}
#letronAnalysisPanel{
  position:fixed; right:88px; top:110px; width:380px; max-width:calc(100vw - 120px);
  max-height:calc(100vh - 140px); z-index:2147483646; display:none; overflow:hidden;
  border-radius:22px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(12,20,38,.96), rgba(8,14,28,.96));
  box-shadow:0 26px 64px rgba(0,0,0,.42);
  color:#eef4ff; backdrop-filter:blur(12px); pointer-events:auto; isolation:isolate;
}
#letronAnalysisPanel.is-open{ display:flex; flex-direction:column; }
#letronAnalysisPanelHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px 12px; border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:nowrap;
}
#letronAnalysisPanelHeader[data-gen-mode]{
  flex-wrap:wrap; align-items:center; padding:14px 18px 10px;
}
#letronAnalysisPanelHeader[data-gen-mode] #letronAnalysisPanelSub{
  flex-basis:100%; margin-top:0; padding-bottom:2px;
}
#letronAnalysisPanelTitle{ margin:0; font-size:20px; font-weight:900; }
#letronAnalysisPanelSub{ margin:6px 0 0; font-size:12px; line-height:1.6; color:rgba(231,238,251,.72); }
#letronAnalysisPanelClose{
  width:36px; height:36px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff; cursor:pointer; flex:0 0 auto;
}
#letronAnalysisPanelBody{ padding:16px 18px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
#letronAnalysisPanelFooter{
  display:flex; gap:10px; padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.08);
}
.letronAnaBtn{
  min-height:40px; padding:0 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:#eef4ff; cursor:pointer; font-weight:800;
}
.letronAnaBtn:hover{ background:rgba(255,255,255,.08); }
.letronAnaBtn.primary{
  background:linear-gradient(180deg, rgba(255,168,76,.92), rgba(255,133,51,.86));
  border-color:rgba(255,168,76,.45); color:#1c0d04;
}
.letronAnaBtn[disabled]{ opacity:.45; cursor:not-allowed; }
.letronAnaHint{ font-size:12px; line-height:1.7; color:rgba(231,238,251,.68); }
.letronAnaCard{
  border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px 14px;
  background:rgba(255,255,255,.04);
}
.letronAnaCard.is-active{
  border-color:rgba(77,163,255,.55); box-shadow:0 0 0 1px rgba(77,163,255,.18) inset;
  background:rgba(77,163,255,.10);
}
.letronAnaCardTop{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.letronAnaCardTitle{ font-size:15px; font-weight:900; }
.letronAnaScore{ font-size:11px; color:rgba(255,211,164,.98); font-weight:800; white-space:nowrap; }
.letronAnaMeta{ margin-top:8px; font-size:12px; color:rgba(231,238,251,.72); line-height:1.65; }
.letronAnaActionRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.letronAnaChip{
  display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05);
  font-size:11px; font-weight:800; color:rgba(255,255,255,.84);
}
.letronAnaOptionRow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.letronAnaOption{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(231,238,251,.78); }
#letronAnalysisPreviewLayer{
  position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:2147481000;
}
.letronGhostNote{
  position:absolute; border-radius:6px; border:1px dashed rgba(255,255,255,.95);
  background:rgba(255,168,76,.28); box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;
  display:flex; align-items:center; overflow:hidden;
}
.letronGhostNote .label{
  font-size:10px; padding:0 6px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.55);
}
#renderLayer .noteBox.letronPatternExact{ box-shadow:0 0 0 2px rgba(34,211,238,.96) inset !important; border-color:rgba(34,211,238,.96) !important; }
#renderLayer .noteBox.letronPatternTransposed{ box-shadow:0 0 0 2px rgba(251,191,36,.96) inset !important; border-color:rgba(251,191,36,.96) !important; }
#renderLayer .noteBox.letronPatternRhythm{ box-shadow:0 0 0 2px rgba(168,85,247,.96) inset !important; border-color:rgba(168,85,247,.96) !important; }
#renderLayer .noteBox.letronLyricPreview{ box-shadow:0 0 0 2px rgba(236,72,153,.95) inset !important; }
#renderLayer .noteBox .letronLyricBadge{
  position:absolute; right:4px; top:1px; min-height:14px; padding:0 4px; border-radius:999px;
  background:rgba(236,72,153,.92); color:#fff; font-size:9px; line-height:14px; font-weight:900;
}

#letronAnalysisToolbar,#letronAnalysisPanel{display:none !important;}
#ltAnaMiniToolbar{
  position:fixed; right:18px; top:180px; z-index:2147483200; display:none;
  flex-direction:column; align-items:center; gap:8px; padding:8px 6px 10px;
  width:58px; border-radius:22px;
  background:linear-gradient(180deg, rgba(11,22,44,.96), rgba(10,18,34,.92));
  border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 40px rgba(0,0,0,.34);
  backdrop-filter:blur(12px); user-select:none; touch-action:none;
}
#ltAnaMiniToolbar.is-open{display:flex;}
#ltAnaGenerateBtn{ border-color:rgba(167,139,250,.4); color:rgba(167,139,250,.95); }
#ltAnaGenerateBtn:hover{ background:rgba(167,139,250,.15); border-color:rgba(167,139,250,.7); }
#ltAnaGenerateBtn.is-active{ background:rgba(167,139,250,.28); border-color:rgba(167,139,250,.85); color:#c4b5fd; }
#ltAnaMiniGrip{
  width:28px; height:14px; border-radius:999px; cursor:grab; opacity:.82;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 2px, transparent 2px) center/7px 7px repeat-x;
}
#ltAnaMiniToolbar.dragging #ltAnaMiniGrip{cursor:grabbing; opacity:1;}
.ltAnaIconBtn{
  width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:#eef4ff; cursor:pointer; font-size:18px; font-weight:900;
  display:flex; align-items:center; justify-content:center; transition:.15s ease;
}
.ltAnaIconBtn:hover{background:rgba(255,255,255,.08); transform:translateY(-1px);}
.ltAnaIconBtn.is-active{background:linear-gradient(180deg, rgba(77,163,255,.28), rgba(77,163,255,.12)); border-color:rgba(77,163,255,.55); box-shadow:0 0 14px rgba(77,163,255,.18);}
#ltAnaMiniPanel{
  position:fixed; right:88px; top:180px; z-index:2147483199; display:none; min-width:280px; max-width:300px;
  max-height:min(72vh, 560px); overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(12,20,38,.96), rgba(8,14,28,.96)); color:#eef4ff; box-shadow:0 26px 64px rgba(0,0,0,.42);
}
#ltAnaMiniPanel.is-open{display:flex; flex-direction:column;}
#ltAnaMiniPanelHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 18px 12px; border-bottom:1px solid rgba(255,255,255,.08);}
#ltAnaMiniPanelTitle{margin:0; font-size:18px; font-weight:900;}
#ltAnaMiniPanelSub{margin:6px 0 0; font-size:12px; line-height:1.6; color:rgba(231,238,251,.72);}
#ltAnaMiniPanelClose{width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; cursor:pointer;}
#ltAnaMiniPanelBody{padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:12px;}
#ltAnaMiniPanelFooter{display:flex; gap:10px; padding:14px 16px 16px; border-top:1px solid rgba(255,255,255,.08);}
.ltAnaMiniBtn{min-height:38px; padding:0 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#eef4ff; cursor:pointer; font-weight:800;}
.ltAnaMiniBtn.primary{background:linear-gradient(180deg, rgba(255,168,76,.92), rgba(255,133,51,.86)); border-color:rgba(255,168,76,.45); color:#1c0d04;}
.ltAnaMiniBtn[disabled]{opacity:.45; cursor:not-allowed;}
.ltAnaMiniHint{font-size:12px; line-height:1.7; color:rgba(231,238,251,.68);}
.ltAnaMiniCard{border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px 14px; background:rgba(255,255,255,.04);}
.ltAnaMiniCard.is-active{border-color:rgba(77,163,255,.55); box-shadow:0 0 0 1px rgba(77,163,255,.18) inset; background:rgba(77,163,255,.10);}
.ltAnaMiniCardTitle{font-size:15px; font-weight:900;}
.ltAnaMiniMeta{margin-top:8px; font-size:12px; color:rgba(231,238,251,.72); line-height:1.65;}
.ltAnaMiniChips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.ltAnaMiniChip{display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); font-size:11px; font-weight:800; color:rgba(255,255,255,.84);}
#ltAnaMiniPreviewLayer{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:2147481001;}
.ltAnaMiniGhost{position:absolute; border-radius:6px; border:1px dashed rgba(255,255,255,.95); background:rgba(255,168,76,.28); box-shadow:0 0 0 1px rgba(0,0,0,.18) inset; display:flex; align-items:center; overflow:hidden;}
.noteBox.patternNavFocus{outline:2px solid rgba(90,180,255,.95); box-shadow:0 0 0 2px rgba(90,180,255,.18), 0 0 18px rgba(90,180,255,.28);}
.ltAnaMiniPos{margin-top:8px; font-size:13px; font-weight:800; color:rgba(255,255,255,.82);}
.ltAnaMiniGhost .label{font-size:10px; padding:0 6px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.55);}

#letronAnalysisToolbar,
#letronAnalysisPanel,
#ltAnaMiniToolbar,
#ltAnaMiniPanel,
#ltGenModalBack{
  z-index:2147483647 !important;
  pointer-events:auto !important;
  isolation:isolate !important;
}
#ltAnaMiniToolbar *,
#ltAnaMiniPanel *,
#letronAnalysisToolbar *,
#letronAnalysisPanel *,
#ltGenModalBack *{
  pointer-events:auto !important;
}

body.letronAnalysisFreezeEditor #renderLayer,
body.letronAnalysisFreezeEditor #p2-ghost-layer,
body.letronAnalysisFreezeEditor #overlayPlayhead,
body.letronAnalysisFreezeEditor #editorAreaCapture,
body.letronAnalysisFreezeEditor canvas,
body.letronAnalysisFreezeEditor .noteBox,
body.letronAnalysisFreezeEditor #keyboard-container{
  pointer-events:none !important;
}

#ltSkillBack{position:fixed;inset:0;display:none;z-index:2147483647;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
#ltSkillModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,92vw);height:min(620px,86vh);background:linear-gradient(180deg, rgba(15,27,43,0.98), rgba(11,22,35,0.98));border:1px solid rgba(255,255,255,0.12);border-radius:18px;box-shadow:0 22px 80px rgba(0,0,0,0.55);overflow:hidden;color:#e7eefb;display:flex;flex-direction:column}
#ltSkillHeader{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.08);background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));}
#ltSkillTitle{font-weight:900;font-size:18px;display:flex;align-items:center;gap:10px}
#ltSkillClose{margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.92);cursor:pointer}
#ltSkillBody{flex:1;display:flex;min-height:0}
#ltSkillNav{width:310px;padding:18px;border-right:1px solid rgba(255,255,255,0.10);background:rgba(0,0,0,0.16);overflow:auto}
#ltSkillList{display:flex;flex-direction:column;gap:10px}
.ltSkillItem{padding:14px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);cursor:pointer}
.ltSkillItem:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14)}
.ltSkillItem.active{background:rgba(64,160,255,0.20);border-color:rgba(64,160,255,0.42);box-shadow:0 0 0 1px rgba(64,160,255,0.18) inset}
.ltSkillItemTitle{font-weight:900;font-size:15px;color:#fff;display:flex;align-items:center;gap:8px}
.ltSkillPill{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:800;color:rgba(255,255,255,.92)}
.ltSkillPill.active{background:rgba(64,160,255,.28);color:#fff}
.ltSkillItemMeta{margin-top:8px;font-size:12px;line-height:1.65;color:rgba(231,238,251,.76)}
#ltSkillMain{flex:1;padding:24px;overflow:auto}
#ltSkillMain h3{margin:0 0 8px;font-size:24px;font-weight:900}
.ltSkillSub{font-size:14px;line-height:1.8;color:rgba(231,238,251,.82)}
.ltSkillStatGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.ltSkillStat{padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.ltSkillStat b{display:block;font-size:12px;color:rgba(231,238,251,.74);margin-bottom:6px}
.ltSkillStat span{font-size:18px;font-weight:900;color:#fff}
.ltSkillBtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ltSkillBtn{min-height:42px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-weight:900;cursor:pointer}
.ltSkillBtn:hover{filter:brightness(1.05)}
.ltSkillBtn.primary{border-color:rgba(64,160,255,.55);background:rgba(64,160,255,.82);color:#071018}
.ltSkillBtn.warn{border-color:rgba(248,113,113,.35);color:#f87171}
.ltSkillBtn.clear{border-color:rgba(251,191,36,.35);color:#fbbf24}
#ltSkillFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-top:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.10)}
#ltSkillFootLeft{font-size:13px;color:rgba(231,238,251,.72)}
#ltSkillQuickBack{position:fixed;inset:0;display:none;z-index:2147483647;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
#ltSkillQuick{position:absolute;left:50%;top:26%;transform:translateX(-50%);width:min(440px,90vw);background:rgba(18,24,34,.99);border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 24px 72px rgba(0,0,0,.65);color:#fff;overflow:hidden}
#ltSkillQuickHead{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.10);font-size:17px;font-weight:900;letter-spacing:.01em;color:#e7eefb}
#ltSkillQuickBody{padding:16px 16px;display:flex;flex-direction:column;gap:10px;max-height:min(52vh,420px);overflow:auto}
.ltSkillQuickItem{position:relative;padding:16px 52px 16px 18px;border-radius:14px;border:2px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);cursor:pointer;font-weight:800;font-size:15px;color:rgba(231,238,251,.80);text-align:left;transition:background .12s,border-color .12s,color .12s;display:block;width:100%;box-sizing:border-box}
.ltSkillQuickItem:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff}
.ltSkillQuickItem::after{content:'';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:transparent;transition:all .12s}
.ltSkillQuickItem.selected{background:rgba(40,140,255,.20)!important;border-color:rgba(64,160,255,.80)!important;color:#fff!important;box-shadow:0 0 0 3px rgba(64,160,255,.15)}
.ltSkillQuickItem.selected::after{background:#40a0ff;border-color:#40a0ff;box-shadow:inset 0 0 0 4px rgba(18,24,34,.92)}
#ltSkillQuickFoot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;gap:8px;align-items:center}
#ltSkillQuickFoot #ltSkillQuickConfirm:not([disabled]){opacity:1!important;cursor:pointer!important}
#ltSkillQuickConfirm[disabled]{opacity:0.35!important;cursor:not-allowed!important}
#ltSkillNewName{width:100%;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:#e7eefb;padding:0 12px;outline:none}