:root{
  --bg:#060812;--panel:rgba(14,19,34,.74);--line:rgba(255,255,255,.11);
  --text:#f7f9ff;--muted:#97a2b6;--accent:#6e7cff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body{
  background:
    radial-gradient(900px 600px at 10% -15%,rgba(55,93,255,.18),transparent 60%),
    radial-gradient(800px 500px at 100% 0,rgba(174,70,255,.14),transparent 58%),
    #060812;
}
button,input,select{font:inherit}
.app{max-width:1320px;margin:auto;padding:12px 12px 26px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.brand h1{margin:0 0 3px;font-size:19px;font-weight:850}
.brand p{margin:0;color:var(--muted);font-size:10px}
.actions{display:flex;gap:7px}
.btn{border:1px solid var(--line);border-radius:12px;padding:8px 11px;color:#fff;background:rgba(255,255,255,.045);cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#5578ff,#8c55f6);box-shadow:0 9px 24px rgba(88,82,250,.22)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:11px}
.stage{
  position:relative;height:calc(100vh - 100px);min-height:560px;border:1px solid var(--line);
  border-radius:24px;overflow:hidden;background:#03050a;box-shadow:0 24px 80px rgba(0,0,0,.34)
}
canvas{display:block;width:100%;height:100%}
.overlay{position:absolute;inset:0;pointer-events:none;padding:13px;display:flex;justify-content:space-between;align-items:flex-start}
.tag{background:rgba(4,7,14,.42);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:8px 10px}
.tag b{display:block;font-size:12px}.tag span{display:block;color:#a6b0c2;font-size:9px;margin-top:2px}
.side{
  height:calc(100vh - 100px);min-height:560px;overflow:auto;padding:11px;border:1px solid var(--line);
  border-radius:24px;background:var(--panel);backdrop-filter:blur(18px)
}
.side::-webkit-scrollbar{width:5px}.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px}
.sec{border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.032);border-radius:17px;padding:10px;margin-bottom:10px}
.sec:last-child{margin-bottom:0}
.sec h3{font-size:11px;margin:0 0 8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mode{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:11px;padding:8px;color:#dfe5f1;text-align:left;cursor:pointer;min-height:51px}
.mode b{display:block;font-size:10px}.mode span{font-size:8.5px;color:#8f9aaf}
.mode.active{background:linear-gradient(135deg,rgba(78,103,219,.56),rgba(126,72,204,.5));border-color:rgba(145,160,255,.4)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin:8px 0}
.label{font-size:9.5px;color:#bac2d3}.value{font-size:9.5px}
input[type=range]{width:100%;accent-color:#7a79ff}
select{width:100%;background:rgba(7,10,19,.88);color:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 9px;font-size:10px}
.toggle{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#d6dceb}
.toggle input{width:16px;height:16px;accent-color:#7b7cff}
.color-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.color-item{display:flex;flex-direction:column;gap:4px;font-size:8px;color:#929db0}
input[type=color]{width:100%;height:30px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:transparent}
.note{font-size:8.5px;line-height:1.5;color:#8792a7;margin:7px 0 0}
.theater .top,.theater .side{display:none}
.theater .app{padding:0;max-width:none;height:100%}
.theater .layout{display:block;height:100%}
.theater .stage{height:100vh;min-height:100vh;border:0;border-radius:0}
@media(max-width:900px){
  .app{padding:8px}.layout{grid-template-columns:1fr}.stage{height:55vh;min-height:390px;border-radius:20px}.side{height:auto;min-height:0;border-radius:20px}
}

.source-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.source-btn{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#dfe5f1;border-radius:10px;padding:8px 5px;
  font-size:9px;cursor:pointer
}
.source-btn.active{
  background:linear-gradient(135deg,rgba(77,105,225,.72),rgba(135,77,222,.68));
  border-color:rgba(152,166,255,.45);color:#fff
}
.source-status{font-size:9px;color:#8e99ad;margin-top:8px}
.source-status strong{color:#eef2ff;font-weight:700}
.local-player-wrap audio{width:100%;height:34px;margin-top:8px}
.mobile-stick-label{display:none}

@media(max-width:900px){
  html,body{height:auto;min-height:100%}
  body{overflow-x:hidden}
  .app{padding:0 8px 24px}
  .top{
    padding:8px 2px 7px;margin:0;
    background:rgba(6,8,18,.96)
  }
  .brand h1{font-size:15px}
  .brand p{font-size:8.5px}
  .layout{display:block}
  .stage{
    position:sticky;
    top:0;
    z-index:40;
    width:calc(100% + 16px);
    margin-left:-8px;
    height:39vh;
    min-height:250px;
    max-height:360px;
    border-radius:0 0 20px 20px;
    border-left:0;border-right:0;border-top:0;
    box-shadow:0 16px 34px rgba(0,0,0,.42)
  }
  .overlay{padding:9px}
  .tag{padding:6px 8px;border-radius:10px}
  .tag b{font-size:10px}.tag span{font-size:8px}
  .side{
    height:auto;min-height:0;overflow:visible;
    border:0;border-radius:0;background:transparent;
    backdrop-filter:none;padding:8px 0 0;
    position:relative;z-index:10
  }
  .sec{
    border-radius:16px;
    background:rgba(14,19,34,.88);
    backdrop-filter:blur(16px);
    margin-bottom:8px
  }
  #modeGrid.grid{
    display:flex;
    gap:7px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:3px;
    scrollbar-width:none
  }
  #modeGrid.grid::-webkit-scrollbar{display:none}
  #modeGrid .mode{
    flex:0 0 42%;
    min-width:128px;
    scroll-snap-align:start
  }
  .source-grid{grid-template-columns:repeat(4,1fr)}
  .source-btn{font-size:8.5px;padding:8px 3px}
  .color-row{grid-template-columns:repeat(4,1fr)}
}

.range-ends{display:flex;justify-content:space-between;margin-top:3px;font-size:8px;color:#6f7b90}
.basic-color-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:10px}
.basic-color-row .peak-color-wrap{display:flex;align-items:center;gap:8px;color:#bac2d3;font-size:9.5px}
.basic-color-row input[type=color]{width:54px;height:32px}
details.advanced{padding:0;overflow:hidden}
details.advanced>summary{list-style:none;cursor:pointer;padding:11px 12px;font-size:11px;font-weight:750;color:#e8ecf7;display:flex;align-items:center;justify-content:space-between}
details.advanced>summary::-webkit-details-marker{display:none}
details.advanced>summary::after{content:"展开";font-size:8.5px;font-weight:500;color:#8e99ad}
details.advanced[open]>summary::after{content:"收起"}
details.advanced .advanced-body{padding:0 10px 10px;border-top:1px solid rgba(255,255,255,.055)}
.advanced-group{padding-top:9px}
.advanced-group+.advanced-group{margin-top:6px;border-top:1px solid rgba(255,255,255,.05)}
.advanced-title{font-size:9px;color:#8792a7;margin-bottom:5px}

/* ===== 颜色系统：预设 / DIY / 方向 / 循环滚动 ===== */
.color-presets{display:flex;gap:7px;overflow-x:auto;padding:1px 0 6px;scroll-snap-type:x proximity;scrollbar-width:none}
.color-presets::-webkit-scrollbar{display:none}
.color-preset{flex:0 0 92px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.025);border-radius:12px;padding:6px;color:#dfe5f1;cursor:pointer;text-align:left;transition:.18s ease}
.color-preset.active{border-color:rgba(142,157,255,.68);box-shadow:0 0 0 1px rgba(104,120,255,.18),0 8px 24px rgba(55,66,170,.15);background:rgba(99,106,219,.12)}
.color-preset-preview{height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.12);margin-bottom:5px}
.color-preset b{display:block;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.color-preset small{display:block;font-size:7.5px;color:#758198;margin-top:2px}
.color-actions{display:flex;gap:6px;margin:2px 0 9px}
.mini-btn,.seg-btn{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#cbd3e4;border-radius:9px;padding:7px 9px;font-size:8.8px;cursor:pointer}
.mini-btn:hover,.seg-btn:hover{background:rgba(255,255,255,.06)}
.seg-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.seg-btn.active{background:linear-gradient(135deg,rgba(77,105,225,.62),rgba(135,77,222,.58));border-color:rgba(152,166,255,.42);color:#fff}
.color-line{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:center;margin:8px 0}
.color-line-label{font-size:9px;color:#aeb8ca}
.diy-panel{display:none;margin-top:8px;padding:9px;border-radius:12px;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.055)}
.diy-panel.open{display:block}
.diy-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px}
.diy-head b{font-size:9px}.diy-head span{font-size:7.5px;color:#788399}
.diy-stops{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
.diy-stop{width:50px;position:relative}
.diy-stop input[type=color]{width:50px;height:36px;border-radius:10px}
.diy-stop button{position:absolute;right:-4px;top:-5px;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:#262d40;color:#aeb8ca;font-size:10px;line-height:16px;cursor:pointer}
.diy-stop:first-child button{display:none}
.diy-footer{display:flex;gap:6px;flex-wrap:wrap}
.scroll-speed-wrap{display:none;margin-top:4px}
.scroll-speed-wrap.show{display:block}
.color-divider{height:1px;background:rgba(255,255,255,.055);margin:10px 0}
.color-hint{font-size:8px;color:#788399;line-height:1.45;margin-top:6px}
.peak-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.peak-row .peak-color-wrap{display:flex;align-items:center;gap:7px;color:#aeb8ca;font-size:9px}
.peak-row input[type=color]{width:52px;height:31px}
@media(max-width:900px){
  .color-preset{flex-basis:86px}
  .color-line{grid-template-columns:66px 1fr}
  .diy-stop,.diy-stop input[type=color]{width:46px}
}

/* 默认隐藏：仅在保存了自定义配色时由 JS 显示 */
#deleteCustomScheme{display:none}


/* ===== v0.2 主题库 / 效果库 ===== */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.section-head h3{margin:0}
.link-btn{border:0;background:transparent;color:#9fb0ff;font-size:8.8px;cursor:pointer;padding:4px 0}
.link-btn:hover{color:#cbd4ff}
.mini-tip{margin:5px 0 0;font-size:7.8px;line-height:1.45;color:#68758c}

.mode-strip{
  display:flex!important;grid-template-columns:none!important;gap:7px;overflow-x:auto;
  scroll-snap-type:x proximity;padding-bottom:5px;scrollbar-width:thin;
  scrollbar-color:rgba(133,143,255,.55) rgba(255,255,255,.04)
}
.mode-strip::-webkit-scrollbar{height:4px}
.mode-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:10px}
.mode-strip::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#6677ff,#a35cff);border-radius:10px}
.mode-strip .mode{flex:0 0 132px;min-width:132px;scroll-snap-align:start;position:relative;padding:9px 8px 8px 8px}
.mode-index,.theme-index{
  display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:16px;
  padding:0 6px;border-radius:999px;color:#fff;font-size:7.4px;font-weight:850;
  letter-spacing:.4px;box-shadow:0 4px 12px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16)
}
.mode-index{margin-bottom:6px}
.theme-index{position:absolute;left:6px;top:6px;z-index:2;height:15px;min-width:24px;font-size:7px}
.mode.active{box-shadow:0 0 0 1px rgba(126,145,255,.18),0 10px 30px rgba(77,83,180,.16)}

.color-preset{position:relative;padding-top:6px}
.color-preset-preview{position:relative;overflow:hidden}
.color-preset .theme-index{top:7px;left:7px}
.color-preset-preview::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 36%,transparent 68%,rgba(255,255,255,.08));
  pointer-events:none
}
.primary-mini{background:linear-gradient(135deg,rgba(86,110,255,.78),rgba(151,76,235,.74));border-color:rgba(160,171,255,.38);color:#fff}
.diy-name-label{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;color:#aeb8ca;font-size:8.8px;margin:7px 0 4px}
.text-input{
  width:100%;border:1px solid rgba(255,255,255,.09);background:rgba(4,7,14,.72);
  color:#eef2ff;border-radius:9px;padding:7px 8px;font-size:8.8px;outline:none
}
.text-input:focus{border-color:rgba(124,139,255,.58);box-shadow:0 0 0 2px rgba(108,120,255,.12)}

/* 弹窗主题库 / 频谱库 */
.library-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px}
.library-modal.open{display:flex}
.library-backdrop{position:absolute;inset:0;background:rgba(1,3,9,.76);backdrop-filter:blur(8px)}
.library-dialog{
  position:relative;z-index:1;width:min(900px,96vw);max-height:min(82vh,760px);overflow:hidden;
  border:1px solid rgba(255,255,255,.10);border-radius:22px;
  background:linear-gradient(180deg,rgba(17,22,39,.98),rgba(8,11,22,.98));
  box-shadow:0 28px 100px rgba(0,0,0,.52);display:flex;flex-direction:column
}
.library-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid rgba(255,255,255,.07)}
.library-head>div{display:flex;flex-direction:column;gap:3px}
.library-head b{font-size:13px}.library-head span{font-size:8.5px;color:#8390a7}
.modal-close{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#dfe6f5;font-size:18px;cursor:pointer}
.library-grid{overflow:auto;padding:12px;display:grid;gap:9px;scrollbar-width:thin;scrollbar-color:rgba(128,139,255,.5) rgba(255,255,255,.04)}
.theme-library-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.mode-library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.library-theme,.library-mode{
  position:relative;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.028);
  border-radius:14px;padding:8px;color:#dfe6f5;cursor:pointer;text-align:left;transition:.18s ease
}
.library-theme:hover,.library-mode:hover{transform:translateY(-1px);background:rgba(255,255,255,.05);border-color:rgba(142,157,255,.28)}
.library-theme.active,.library-mode.active{border-color:rgba(147,160,255,.62);box-shadow:0 0 0 1px rgba(113,126,255,.16),0 9px 24px rgba(58,66,168,.14)}
.library-theme-preview{height:44px;border-radius:9px;border:1px solid rgba(255,255,255,.10);margin-bottom:7px;position:relative;overflow:hidden}
.library-theme b,.library-mode b{display:block;font-size:9px}
.library-theme small,.library-mode small{display:block;font-size:7.7px;color:#7e899e;margin-top:3px;line-height:1.35}
.library-theme .theme-index,.library-mode .mode-index{position:absolute;left:12px;top:12px;margin:0}
body.modal-open{overflow:hidden}

@media(max-width:900px){
  .mode-strip .mode{flex-basis:42%;min-width:128px}
  .library-modal{padding:8px}
  .library-dialog{width:100%;max-height:88vh;border-radius:18px}
  .theme-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .library-head{padding:12px}
}

.mode small{display:block;font-size:8px;color:#8f9aaf;line-height:1.35;margin-top:2px}

/* ===== v0.3 序号角标 / 主题横滑条 / 悬浮预览 ===== */
/* 经典频谱序号：白底，贴合卡片右上角，仅保留左、下边框 */
.mode-strip .mode,
.library-mode{position:relative}
.mode-index{
  position:absolute!important;
  top:-1px!important;
  right:-1px!important;
  left:auto!important;
  margin:0!important;
  min-width:27px;
  height:19px;
  padding:0 6px;
  border:0!important;
  border-left:1px solid rgba(23,28,42,.22)!important;
  border-bottom:1px solid rgba(23,28,42,.22)!important;
  border-radius:0 11px 0 8px!important;
  background:#fff!important;
  color:#151a26!important;
  box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
  font-size:7.4px;
  font-weight:900;
  letter-spacing:.35px;
  z-index:4
}
.mode-strip .mode b,
.library-mode b{padding-right:24px}
.library-mode .mode-index{top:-1px!important;right:-1px!important;left:auto!important}

/* 配色主题库：保留触控左右滑动，同时显示细横向滚动条 */
.color-presets{
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(133,143,255,.58) rgba(255,255,255,.04)
}
.color-presets::-webkit-scrollbar{display:block;height:4px}
.color-presets::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:10px}
.color-presets::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#6677ff,#a35cff);border-radius:10px}

/* “全部效果”内鼠标悬停的动态小预览 */
.mode-hover-preview{
  position:fixed;
  z-index:180;
  width:242px;
  padding:7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:rgba(7,10,19,.96);
  box-shadow:0 18px 54px rgba(0,0,0,.48),0 0 0 1px rgba(118,135,255,.08);
  backdrop-filter:blur(18px);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(5px) scale(.98);
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease
}
.mode-hover-preview.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mode-hover-preview canvas{
  display:block;width:100%;height:132px;border-radius:10px;
  background:#03050a;border:1px solid rgba(255,255,255,.07)
}
.mode-hover-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 3px 2px}
.mode-hover-caption b{font-size:9px;color:#f5f7ff}
.mode-hover-caption span{font-size:7.5px;color:#77839a}
@media(max-width:900px),(hover:none){.mode-hover-preview{display:none!important}}


/* ===== v0.4 收藏夹 ===== */
.section-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.favorite-library-btn{
  display:inline-flex;align-items:center;gap:5px;
  color:#c6ceff
}
.favorite-library-btn span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
  color:#f4f6ff;font-size:7px;font-weight:800
}
.favorite-library-btn.has-favorites span{
  background:linear-gradient(135deg,rgba(255,112,158,.24),rgba(127,102,255,.30));
  border-color:rgba(255,155,190,.22)
}

.library-theme,.library-mode{overflow:hidden}
.card-favorite-btn{
  position:absolute;
  right:-1px;
  bottom:-1px;
  z-index:7;
  width:30px;
  height:25px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  border-radius:9px 0 13px 0;
  background:rgba(9,13,24,.84);
  color:rgba(255,255,255,.46);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease
}
.card-favorite-btn:hover{
  color:#fff;
  background:rgba(40,46,72,.94);
  box-shadow:-5px -5px 18px rgba(88,84,255,.08)
}
.card-favorite-btn.active{
  color:#ff7daa;
  background:linear-gradient(135deg,rgba(255,91,145,.17),rgba(115,87,255,.24));
  text-shadow:0 0 10px rgba(255,89,148,.46)
}
.card-favorite-btn:active{transform:scale(.92)}
.library-theme b,.library-theme small,
.library-mode b,.library-mode small{padding-right:24px}

.library-empty{
  grid-column:1/-1;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px dashed rgba(255,255,255,.09);
  border-radius:16px;
  color:#7f8aa0;
  background:rgba(255,255,255,.018);
  text-align:center
}
.library-empty .empty-icon{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  font-size:19px;color:#9ca7ba
}
.library-empty b{font-size:10px;color:#c7cfdf}
.library-empty span{font-size:8px;line-height:1.5}

@media(max-width:900px){
  .section-actions{gap:7px}
  .favorite-library-btn{font-size:8.3px}
  .card-favorite-btn{width:29px;height:24px}
}


/* ===== v0.5 频谱卡片质感 / 音源 / 投屏 ===== */
.cast-btn{
  background:linear-gradient(135deg,rgba(70,105,255,.34),rgba(151,73,229,.28));
  border-color:rgba(139,155,255,.24);box-shadow:0 8px 24px rgba(80,76,220,.10)
}
.compact-head{margin-bottom:7px}
.source-mini-badge{
  display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:999px;
  border:1px solid rgba(91,225,193,.16);background:rgba(55,213,178,.07);
  color:#79e8ce;font-size:7.2px;white-space:nowrap
}
.mic-device-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:8px;margin-top:8px}
.mic-device-row label{font-size:8.2px;color:#8995aa}
.device-select{
  min-width:0;width:100%;height:31px;padding:0 9px;border-radius:10px;
  border:1px solid rgba(255,255,255,.08);background:rgba(5,8,16,.70);color:#dfe6f5;
  font-size:8.5px;outline:none
}
.device-select:focus{border-color:rgba(125,142,255,.48);box-shadow:0 0 0 2px rgba(101,113,255,.09)}
.receiver-tag{display:none;align-items:center;color:#b9c7ff;font-size:9px}

/* 频谱效果卡片：保持克制的玻璃底 + 轻量频谱纹理，不再像普通按钮 */
.mode-strip .mode,.library-mode{
  --mode-a:#6677ff;--mode-b:#a35cff;
  isolation:isolate;overflow:hidden;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--mode-a) 9%,transparent),color-mix(in srgb,var(--mode-b) 5%,transparent) 58%,rgba(255,255,255,.018)),
    rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 7px 20px rgba(0,0,0,.10)
}
.mode-strip .mode::before,.library-mode::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.48;
  background:
    radial-gradient(120px 52px at 18% 8%,color-mix(in srgb,var(--mode-a) 18%,transparent),transparent 72%),
    linear-gradient(180deg,transparent 52%,rgba(0,0,0,.16) 100%)
}
.mode-strip .mode::after,.library-mode::after{
  content:"";position:absolute;left:8px;right:8px;bottom:7px;height:18px;z-index:0;pointer-events:none;opacity:.18;
  background:
    linear-gradient(90deg,transparent 0 3%,var(--mode-a) 3% 7%,transparent 7% 11%,var(--mode-b) 11% 17%,transparent 17% 21%,var(--mode-a) 21% 24%,transparent 24% 29%,var(--mode-b) 29% 36%,transparent 36% 40%,var(--mode-a) 40% 46%,transparent 46% 51%,var(--mode-b) 51% 54%,transparent 54% 60%,var(--mode-a) 60% 69%,transparent 69% 73%,var(--mode-b) 73% 80%,transparent 80% 86%,var(--mode-a) 86% 90%,transparent 90% 100%);
  clip-path:polygon(0 75%,4% 50%,8% 70%,13% 18%,18% 68%,23% 38%,28% 74%,34% 26%,40% 60%,46% 12%,52% 68%,58% 32%,64% 78%,70% 22%,76% 57%,82% 35%,88% 72%,94% 44%,100% 70%,100% 100%,0 100%)
}
.mode-strip .mode>b,.mode-strip .mode>small,.library-mode>b,.library-mode>small{position:relative;z-index:2}
.mode-strip .mode:hover,.library-mode:hover{
  border-color:color-mix(in srgb,var(--mode-a) 30%,rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.16),0 0 24px color-mix(in srgb,var(--mode-a) 7%,transparent)
}
.mode-strip .mode.active,.library-mode.active{
  border-color:color-mix(in srgb,var(--mode-a) 48%,rgba(255,255,255,.12));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mode-a) 18%,transparent),0 12px 34px rgba(50,55,150,.15)
}

.cast-dialog{width:min(720px,96vw)}
.cast-content{padding:14px;overflow:auto}
.cast-status-card{
  display:flex;align-items:center;gap:10px;padding:10px 11px;margin-bottom:11px;border-radius:14px;
  border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025)
}
.cast-status-dot{width:9px;height:9px;border-radius:50%;background:#6f7890;box-shadow:0 0 0 5px rgba(111,120,144,.08);flex:0 0 auto}
.cast-status-card.connected .cast-status-dot{background:#57e5b9;box-shadow:0 0 0 5px rgba(87,229,185,.10),0 0 16px rgba(87,229,185,.22)}
.cast-status-card.error .cast-status-dot{background:#ff798f;box-shadow:0 0 0 5px rgba(255,121,143,.08)}
.cast-status-card>div:last-child{display:flex;flex-direction:column;gap:2px}
.cast-status-card b{font-size:9.5px}.cast-status-card span{font-size:7.8px;color:#7f8ba1;line-height:1.45}
.cast-option-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cast-option{
  position:relative;min-height:116px;padding:13px;text-align:left;cursor:pointer;border-radius:16px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#eef2ff;transition:.18s ease
}
.cast-option:hover{transform:translateY(-1px);border-color:rgba(132,150,255,.25);background:rgba(255,255,255,.04)}
.cast-option:disabled{opacity:.42;cursor:not-allowed;transform:none}
.primary-cast{background:linear-gradient(145deg,rgba(68,104,255,.13),rgba(145,75,232,.08));border-color:rgba(133,150,255,.15)}
.cast-option-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-bottom:15px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);font-size:15px}
.cast-option b{display:block;font-size:10px;margin-bottom:5px}.cast-option small{display:block;font-size:7.7px;line-height:1.5;color:#7f8aa0}
.cast-help{margin-top:11px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.055)}
.cast-help>b{font-size:9px}.cast-help p{font-size:7.7px;line-height:1.58;color:#8995aa;margin:7px 0 0}.cast-help strong{color:#b9c4d9;font-weight:700}
.tv-receiver .top,.tv-receiver .side{display:none!important}
.tv-receiver .app{max-width:none;height:100%;padding:0!important}
.tv-receiver .layout{display:block;height:100%}
.tv-receiver .stage{width:100vw!important;height:100vh!important;min-height:100vh!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;position:fixed!important;inset:0!important}
.tv-receiver .receiver-tag{display:flex}
.tv-receiver .overlay{padding:16px}
.tv-receiver .overlay .tag:first-child{background:rgba(4,7,14,.22);opacity:.72}

@media(max-width:900px){
  .top .actions{gap:5px}.top .actions .btn{padding:7px 9px;font-size:8.5px}
  .cast-option-grid{grid-template-columns:1fr}
  .cast-option{min-height:96px}
  .mic-device-row{grid-template-columns:52px 1fr}
}


.cast-option.is-busy{
  position:relative;
  opacity:.78;
  cursor:progress;
}
.cast-option.is-busy .cast-option-icon{
  animation:castPulse 1.05s ease-in-out infinite;
}
@keyframes castPulse{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(1.08);opacity:1}
}


.mirror-main-btn{
  width:100%;
  margin-top:12px;
}
.mirror-guide{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}
.mirror-guide-title{
  font-size:11px;
  font-weight:800;
  color:#eef2ff;
  margin-bottom:9px;
}
.mirror-guide-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.mirror-guide-card{
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.mirror-guide-card b{
  display:block;
  font-size:10px;
  margin-bottom:5px;
}
.mirror-guide-card span{
  display:block;
  color:#96a2b8;
  font-size:9px;
  line-height:1.5;
}
.mirror-mode .stage{
  height:100vh !important;
  min-height:100vh !important;
  width:100vw !important;
  border-radius:0 !important;
}
.mirror-mode .overlay{
  display:none !important;
}
@media(max-width:900px){
  .mirror-guide-grid{grid-template-columns:1fr}
}


/* ===== 专用电视投屏模式 ===== */
body.mirror-mode{
  overflow:hidden !important;
  background:#000 !important;
}
.mirror-mode .app{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  padding:0 !important;
}
.mirror-mode .layout{
  width:100vw !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#000;
}
.mirror-mode .stage{
  position:relative !important;
  top:auto !important;
  width:min(100vw,177.7777778vh) !important;
  height:min(100vh,56.25vw) !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  aspect-ratio:16 / 9 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:0 0 90px rgba(73,92,255,.12) !important;
}
.mirror-mode .stage canvas{
  width:100% !important;
  height:100% !important;
}
.mirror-mode .overlay{
  display:none !important;
}

.tv-cast-ready,
.tv-orientation-hint,
.tv-quick-controls{
  display:none;
}
.tv-cast-ready.show{
  display:flex;
  position:fixed;
  inset:0;
  z-index:10050;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.54);
  backdrop-filter:blur(14px);
}
.tv-cast-ready-card{
  width:min(390px,92vw);
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(20,26,45,.96),rgba(6,9,18,.96));
  box-shadow:0 26px 80px rgba(0,0,0,.48);
  text-align:center;
}
.tv-ready-icon{
  width:46px;height:46px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:15px;
  background:linear-gradient(135deg,#5c7cff,#9a56ff);
  font-size:22px;box-shadow:0 12px 32px rgba(100,91,255,.28);
}
.tv-cast-ready-card>b{display:block;font-size:18px;margin-bottom:8px}
.tv-cast-ready-card p{
  margin:0;color:#d7ddec;font-size:12px;line-height:1.85;
}
.tv-ready-device{
  margin:13px 0;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  text-align:left;
}
.tv-ready-device b{display:block;font-size:11px;margin-bottom:4px}
.tv-ready-device span{display:block;color:#96a3b9;font-size:10px;line-height:1.55}
.tv-ready-ok{
  width:100%;border:0;border-radius:13px;padding:11px 14px;
  color:#fff;font-weight:800;
  background:linear-gradient(135deg,#5d78ff,#9159f3);
}

.tv-orientation-hint.show{
  display:flex;
  position:fixed;
  left:50%;top:16px;transform:translateX(-50%);
  z-index:10040;
  align-items:center;gap:8px;
  padding:9px 12px;border-radius:999px;
  background:rgba(4,7,14,.78);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}
.tv-orientation-hint span{font-size:16px}
.tv-orientation-hint b{font-size:10px}
.tv-orientation-hint small{font-size:8.5px;color:#8f9bb1}

.tv-quick-controls.show{
  display:block;
  position:fixed;
  left:50%;bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:10030;
  width:min(780px,94vw);
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(8,12,23,.82);
  backdrop-filter:blur(20px);
  box-shadow:0 20px 70px rgba(0,0,0,.42);
  animation:tvQuickIn .18s ease-out;
}
@keyframes tvQuickIn{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.tv-quick-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px
}
.tv-quick-head b{display:block;font-size:11px}
.tv-quick-head span{display:block;font-size:8px;color:#8793a9;margin-top:2px}
.tv-quick-head button,
.tv-quick-actions button{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.055);
  color:#eef2ff;border-radius:10px;padding:7px 10px;font-size:9px
}
.tv-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr 1.15fr;
  gap:8px;
}
.tv-quick-field,
.tv-quick-slider{
  min-width:0;padding:8px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
}
.tv-quick-field>span{
  display:block;font-size:8px;color:#909cb1;margin-bottom:5px
}
.tv-quick-field select{
  padding:7px 8px;border-radius:9px;font-size:9px
}
.tv-quick-slider>div{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:5px
}
.tv-quick-slider span{font-size:8px;color:#909cb1}
.tv-quick-slider b{font-size:9px}
.tv-quick-slider input{margin:0}
.tv-quick-actions{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px
}
.tv-quick-actions span{font-size:8px;color:#7f8ca3}
#tvExitMode{color:#ffb6c2}

@media(max-width:700px){
  .tv-quick-grid{grid-template-columns:1fr 1fr}
  .tv-quick-controls.show{padding:10px}
  .tv-quick-actions span{display:none}
}
@media(orientation:portrait) and (max-width:900px){
  .mirror-mode .stage{
    width:100vw !important;
    height:56.25vw !important;
  }
}

/* ===== 6位投屏码 + WebSocket 试验 ===== */
.code-cast-entry{margin-top:8px}
.code-cast-dialog{width:min(520px,94vw)}
.code-cast-status{
  display:flex;align-items:center;gap:10px;
  padding:12px;border-radius:15px;margin-bottom:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)
}
.code-cast-status i,.tv-pair-state i{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#8b96aa;
  box-shadow:0 0 0 6px rgba(139,150,170,.09)
}
.code-cast-status.connected i,.tv-pair-state.connected i{background:#45f0b0;box-shadow:0 0 0 6px rgba(69,240,176,.10)}
.code-cast-status.error i,.tv-pair-state.error i{background:#ff687f;box-shadow:0 0 0 6px rgba(255,104,127,.10)}
.code-cast-status.busy i{background:#7782ff;animation:castPulse 1s ease-in-out infinite}
.code-cast-status b{display:block;font-size:11px}
.code-cast-status span{display:block;color:#8f9bb0;font-size:9px;margin-top:3px}
.code-input-wrap{display:grid;grid-template-columns:1fr auto;gap:8px}
#castCodeInput{
  min-width:0;padding:13px 14px;border-radius:13px;
  background:#080c16;color:#fff;border:1px solid rgba(255,255,255,.12);
  font-size:24px;font-weight:900;letter-spacing:.28em;text-align:center
}
#connectCodeCastBtn,#saveWsUrlBtn{
  border:0;border-radius:13px;padding:0 16px;color:#fff;font-weight:800;
  background:linear-gradient(135deg,#5b78ff,#9458f2)
}
.ws-advanced{margin-top:12px;padding:10px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.ws-advanced summary{cursor:pointer;font-size:9px;color:#aab4c7}
.ws-advanced label{display:block;font-size:8px;color:#8793aa;margin:9px 0 5px}
.ws-advanced input{width:100%;padding:9px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#070a12;color:#fff}
.ws-advanced #saveWsUrlBtn{width:100%;height:35px;margin-top:7px}
.ws-advanced p{font-size:8px;color:#727f96;line-height:1.5}

.tv-pair-overlay{
  display:none;position:fixed;inset:0;z-index:12000;
  align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 45%,rgba(78,86,220,.16),rgba(2,4,10,.88) 58%,#02040a)
}
.tv-pair-overlay.show{display:flex}
.tv-pair-overlay.paired{
  opacity:0;pointer-events:none;transition:opacity .6s ease
}
.tv-pair-card{
  width:min(620px,86vw);text-align:center;padding:34px 30px;border-radius:28px;
  background:rgba(10,14,27,.84);border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(22px);box-shadow:0 35px 120px rgba(0,0,0,.52)
}
.tv-pair-brand{font-size:14px;font-weight:850;color:#f5f7ff;margin-bottom:20px}
.tv-pair-label{font-size:11px;color:#8f9bb1;margin-bottom:8px}
.tv-pair-code{
  font-size:clamp(48px,10vw,94px);line-height:1;font-weight:950;letter-spacing:.12em;
  color:#fff;text-shadow:0 0 38px rgba(105,106,255,.25);margin-left:.12em
}
.tv-pair-note{font-size:10px;color:#8490a6;margin-top:16px}
.tv-pair-state{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font-size:9px;color:#b9c1d0
}
.ws-tv-receiver .top,.ws-tv-receiver .side{display:none!important}
.ws-tv-receiver .app{padding:0!important;max-width:none!important}
.ws-tv-receiver .layout{display:block!important}
.ws-tv-receiver .stage{height:100vh!important;min-height:100vh!important;width:100vw!important;border:0!important;border-radius:0!important}
@media(max-width:700px){
  .code-input-wrap{grid-template-columns:1fr}
  #connectCodeCastBtn{height:44px}
}


/* ===== TV Receiver full-screen hard fix v0.8.1 ===== */
html.ws-tv-root,
html.ws-tv-root body{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#02040a !important;
}

body.ws-tv-receiver{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#02040a !important;
}

.ws-tv-receiver .top,
.ws-tv-receiver .side,
.ws-tv-receiver .brand,
.ws-tv-receiver .actions{
  display:none !important;
}

.ws-tv-receiver .app,
.ws-tv-receiver .layout{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  overflow:hidden !important;
}

.ws-tv-receiver .stage{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  background:#02040a !important;
}

.ws-tv-receiver .stage canvas,
.ws-tv-receiver #cv{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.ws-tv-receiver .overlay{
  display:none !important;
}

.ws-tv-receiver .tv-pair-overlay{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  margin:0 !important;
}


/* ===== v0.9 UI / Mobile / mode cards ===== */
.source-action-btn{
  border-color:rgba(123,137,255,.22);
  background:rgba(86,96,170,.11);
}
.strip-step-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:7px;
}
.strip-step-btn{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#d8dfed;
  border-radius:9px;
  padding:7px 12px;
  font-size:9px;
  cursor:pointer;
}
.strip-step-btn:active{transform:translateY(1px)}

/* 频谱卡片：低饱和度纯色背景，不再使用杂乱渐变纹理 */
.mode-strip .mode,.library-mode{
  background:var(--mode-bg,#1b2636) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 7px 20px rgba(0,0,0,.10) !important;
}
.mode-strip .mode::before,.library-mode::before,
.mode-strip .mode::after,.library-mode::after{
  display:none !important;
  content:none !important;
}
.mode-strip .mode:hover,.library-mode:hover{
  border-color:rgba(255,255,255,.16) !important;
  filter:brightness(1.06);
}
.mode-strip .mode.active,.library-mode.active{
  border-color:rgba(154,170,255,.52) !important;
  box-shadow:0 0 0 1px rgba(126,143,255,.13),0 10px 28px rgba(0,0,0,.16) !important;
}

/* 横向库完整渲染，用户可一直滑到最后一个 */
.mode-strip,.color-presets{
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}

/* DIY 默认收起 */
.diy-panel{display:none}
.diy-panel.open{display:block}

@media(max-width:900px){
  .brand h1{font-size:17px}
  .brand p{font-size:10px;line-height:1.4}
  .sec{padding:12px}
  .sec h3,.section-head h3{font-size:13px}
  .label,.value,.basic-color-row .peak-color-wrap{font-size:11px}
  .row{margin:10px 0 6px}
  .range-ends{font-size:9px}
  .note{font-size:10px;line-height:1.62}
  .mini-tip,.color-hint{font-size:9.5px;line-height:1.5}
  .source-status{font-size:10px}
  .source-btn{font-size:10px;padding:10px 4px;min-height:39px}
  .source-mini-badge{font-size:9px}
  .mic-device-row label{font-size:10px}
  .device-select{font-size:10px;height:36px}
  .mode-strip .mode{flex:0 0 45%;min-width:142px;padding:11px 10px 10px}
  .mode-strip .mode b{font-size:10.5px}
  .mode-strip .mode small{font-size:9px;line-height:1.35}
  .color-preset{flex-basis:104px;padding:7px}
  .color-preset b{font-size:9.5px}
  .color-preset small{font-size:8.5px}
  .color-line-label{font-size:10px}
  .mini-btn,.seg-btn,.link-btn{font-size:9.5px}
  .strip-step-btn{font-size:10px;padding:8px 14px}
  .metric small{font-size:9px}.metric strong{font-size:12px}
}

@media(max-width:520px){
  .source-grid{grid-template-columns:repeat(2,1fr)}
}


/* ===== v1.0 常亮 / VIP / 手机投屏白色版 ===== */
/* 配色主题库全部列表：标题与副标题更清楚 */
.library-theme b{font-size:11px!important;line-height:1.3;font-weight:800}
.library-theme small{font-size:9px!important;line-height:1.5;margin-top:4px!important}
@media(max-width:900px){
  .library-theme b{font-size:12px!important}
  .library-theme small{font-size:10px!important}
  .library-theme-preview{height:54px}
}

.vip-library-entry{
  width:100%;display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:11px 12px;
  border-radius:14px;border:1px solid rgba(216,184,110,.18);
  background:linear-gradient(135deg,rgba(86,72,42,.22),rgba(72,60,105,.18));color:#eef2ff;text-align:left;cursor:pointer
}
.vip-crown,.vip-head-badge,.vip-mini-badge{
  display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  background:linear-gradient(135deg,#f0d48a,#c8a45d);color:#332713;font-weight:950;letter-spacing:.4px
}
.vip-crown{width:38px;height:26px;font-size:9px;flex:0 0 auto}
.vip-entry-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.vip-entry-copy b{font-size:10px}.vip-entry-copy small{font-size:8px;color:#9ca6b9}
.vip-entry-arrow{font-size:22px;color:#cdbb8a}
.vip-spectrum-dialog{width:min(920px,96vw)}
.vip-library-head{background:linear-gradient(90deg,rgba(229,196,111,.055),transparent)}
.vip-head-badge{padding:2px 6px;font-size:8px;margin-right:5px}
.vip-spectrum-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;overflow:auto}
.vip-spectrum-card{
  position:relative;min-height:128px;border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:13px 10px 10px;
  background:var(--vip-tone,#283247);color:#f2f4fb;text-align:left;overflow:hidden;cursor:pointer
}
.vip-spectrum-card::after{content:"";position:absolute;inset:auto -25% -45% 25%;height:85%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%);pointer-events:none}
.vip-mini-badge{position:absolute;right:8px;top:8px;padding:3px 6px;font-size:7px}
.vip-preview-bars{height:45px;display:flex;align-items:flex-end;gap:4px;margin:20px 0 9px;opacity:.75}
.vip-preview-bars i{display:block;flex:1;min-width:3px;border-radius:4px 4px 1px 1px;background:rgba(255,255,255,.65)}
.vip-preview-bars i:nth-child(1){height:35%}.vip-preview-bars i:nth-child(2){height:70%}.vip-preview-bars i:nth-child(3){height:48%}.vip-preview-bars i:nth-child(4){height:92%}.vip-preview-bars i:nth-child(5){height:60%}.vip-preview-bars i:nth-child(6){height:78%}
.vip-spectrum-card b{display:block;font-size:11px;position:relative;z-index:1}.vip-spectrum-card small{display:block;font-size:8.5px;color:rgba(255,255,255,.66);margin-top:4px;position:relative;z-index:1}.vip-spectrum-card em{position:absolute;left:9px;top:8px;font-style:normal;font-size:7px;color:rgba(255,255,255,.48)}
.vip-spectrum-foot{padding:10px 14px 13px;border-top:1px solid rgba(255,255,255,.06);font-size:9px;color:#8f9bb0}
@media(max-width:900px){.vip-spectrum-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vip-entry-copy b{font-size:11px}.vip-entry-copy small{font-size:9px}}

/* 手机端投屏弹窗：白色、简洁、清晰 */
.cast-mobile-intro{padding:12px 14px 4px}.cast-mobile-intro b{display:block;font-size:13px}.cast-mobile-intro span{display:block;font-size:9px;color:#687385;margin-top:3px}
@media(max-width:900px){
  #castModal .library-backdrop,#codeCastModal .library-backdrop{background:rgba(14,18,28,.36);backdrop-filter:blur(6px)}
  #castModal .library-dialog,#codeCastModal .library-dialog{
    background:#fff!important;color:#182033!important;border-color:rgba(18,30,52,.08)!important;
    box-shadow:0 22px 70px rgba(20,28,44,.22)!important;max-height:90dvh!important
  }
  #castModal .library-head,#codeCastModal .library-head{border-bottom-color:#edf0f5!important;padding:14px 15px!important}
  #castModal .library-head b,#codeCastModal .library-head b{color:#151c2b!important;font-size:16px!important}
  #castModal .library-head span,#codeCastModal .library-head span{color:#758095!important;font-size:10px!important}
  #castModal .mini-btn,#codeCastModal .mini-btn{background:#f4f6f9!important;border-color:#e5e9f0!important;color:#343d4e!important;font-size:10px!important}
  #castModal .cast-mobile-intro b{font-size:14px;color:#171e2c}
  #castModal .cast-mobile-intro span{font-size:10px;color:#707b8d}
  #castModal .cast-option{
    min-height:0!important;margin:8px 14px!important;padding:14px!important;border-radius:15px!important;
    background:#f7f8fb!important;border:1px solid #e7eaf0!important;color:#171e2d!important;box-shadow:none!important
  }
  #castModal .cast-option.primary-cast{background:#f2f3ff!important;border-color:#dcdefc!important}
  #castModal .cast-option-icon{background:#fff!important;color:#4654b5!important;border-color:#e0e4ef!important;box-shadow:0 5px 14px rgba(54,67,105,.08)!important}
  #castModal .cast-option b{font-size:14px!important;color:#171e2d!important}
  #castModal .cast-option small{font-size:10px!important;color:#697488!important;line-height:1.55!important}
  #castModal .mirror-guide{margin:10px 14px 14px!important;padding:12px!important;background:#fafbfc!important;border-color:#e9ecf1!important}
  #castModal .mirror-guide-title{color:#1c2432!important;font-size:11px!important}
  #castModal .mirror-guide-grid{gap:7px!important}
  #castModal .mirror-guide-card{background:#fff!important;border-color:#e8ebf0!important;padding:10px!important}
  #castModal .mirror-guide-card b{color:#202837!important;font-size:10px!important}
  #castModal .mirror-guide-card span{color:#707b8c!important;font-size:9.5px!important}
  #castModal .mirror-guide .note{color:#818a99!important;font-size:9.5px!important}
  #codeCastModal .code-cast-status{background:#f7f8fa!important;border-color:#e7eaf0!important}
  #codeCastModal .code-cast-status b{color:#1a2230!important;font-size:12px!important}
  #codeCastModal .code-cast-status span{color:#737e90!important;font-size:9.5px!important}
  #codeCastModal #castCodeInput{background:#fff!important;color:#161d2a!important;border-color:#dfe4eb!important}
  #codeCastModal .ws-advanced{background:#fafbfc!important;border-color:#e8ebef!important;color:#394354!important}
  #codeCastModal .ws-advanced summary,#codeCastModal .ws-advanced label,#codeCastModal .ws-advanced p{color:#737e8f!important}
  #codeCastModal .ws-advanced input{background:#fff!important;color:#19202d!important;border-color:#e0e4ea!important}
}


/* ===== v1.1 水花 Peak / VIP 爆款效果 ===== */
.vip-mode-library-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.vip-library-mode{
  position:relative;
  min-height:92px;
  background:var(--mode-bg,#1d2736)!important;
  border-color:rgba(255,255,255,.09)!important;
  overflow:hidden;
}
.vip-library-mode .vip-mode-badge{
  position:absolute;
  right:8px;
  bottom:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:20px;
  padding:0 7px;
  border-radius:6px;
  background:#d8bd79;
  color:#302611;
  font-size:7px;
  font-weight:950;
  letter-spacing:.5px;
}
.vip-library-mode .mode-index{
  background:#fff!important;
  color:#242b38!important;
}
.vip-library-mode>b{
  padding-right:34px;
}
.vip-spectrum-foot{
  padding:10px 14px 13px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:9px;
  color:#8f9bb0;
}
@media(max-width:900px){
  .vip-mode-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vip-library-mode>b{font-size:12px!important}
  .vip-library-mode>small{font-size:10px!important;line-height:1.45}
}

/* ===== v1.2 VIP独立模块 ===== */
.vip-sec{border-color:rgba(217,188,112,.16)}
.vip-sec .section-head h3::after{
  content:"VIP";display:inline-flex;margin-left:7px;padding:2px 6px;border-radius:5px;
  background:#d9bc70;color:#2b2313;font-size:7px;font-weight:950;vertical-align:middle
}
.vip-mode-strip .vip-mode,.vip-mode-library-grid .vip-library-mode{position:relative}
.vip-mode-badge{
  position:absolute;right:7px;bottom:7px;min-width:28px;height:18px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  background:#d9bc70;color:#2d2514;font-size:7px;font-weight:950;letter-spacing:.4px
}
.vip-mode-strip .vip-mode{background:var(--mode-bg,#202a38)!important}
.vip-mode-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.vip-library-mode>b{padding-right:34px}
@media(max-width:900px){
  .vip-mode-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vip-mode-strip .vip-mode{flex:0 0 45%;min-width:142px}
  .vip-mode-strip .vip-mode b{font-size:10.5px}
  .vip-mode-strip .vip-mode small{font-size:9px}
}


/* v1.3：旧的配色库 VIP 入口已废弃 */
.vip-library-entry{display:none!important;}


/* ===== v1.4 边缘铺满 / 统一倒影 ===== */
.color-dir-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.reflection-toggle{
  margin-left:auto;
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  white-space:nowrap;
}
.stage canvas,
#cv{
  width:100%!important;
  height:100%!important;
}
.theater .stage,
.tv-receiver .stage,
.ws-tv-receiver .stage,
.mirror-mode .stage{
  left:0!important;
  right:0!important;
  bottom:0!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:900px){
  .reflection-toggle{
    margin-left:0;
    font-size:10px;
  }
}


/* ===== v1.5 配色切换 / 顶部落点 ===== */
.theme-step-actions{
  margin-top:7px;
}
#themeCountLabel{
  font:inherit;
}


/* ===== v1.6 VIP 落点特效 ===== */
.vip-peak-fx-panel{
  display:none;
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(217,188,112,.14);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.vip-peak-fx-panel.show{display:block}
.vip-fx-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.vip-fx-title b{font-size:10px}
.vip-fx-title span{font-size:8px;color:#8591a7}
.vip-fx-shapes{flex-wrap:wrap}
.vip-fx-shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vip-fx-shapes .seg-btn{min-width:0;width:100%;padding-left:6px;padding-right:6px}
.vip-peak-fx-panel .seg-row{flex-wrap:wrap}
.vip-fx-color-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  font-size:9px;
  color:#9aa5b9;
}
.vip-fx-color-row.hide{display:none}
.vip-fx-multi-row{display:none}
.vip-fx-multi-row.show{display:flex}
.vip-fx-color-row input[type="color"]{
  width:34px;
  height:28px;
  padding:2px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
#peakOn:disabled{
  opacity:.72;
  cursor:not-allowed;
}
@media(max-width:900px){
  .vip-fx-title{display:block}
  .vip-fx-title span{display:block;margin-top:3px}
  .vip-fx-shapes .seg-btn{font-size:9px}
}

@media(max-width:520px){
  .vip-fx-shapes{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .vip-fx-shapes .seg-btn{font-size:9px;padding-left:3px;padding-right:3px}
}


/* ===== v1.7 VIP落点效果改为公共控制 ===== */
.vip-peak-fx-panel{
  display:block;
}
.vip-peak-fx-panel.show{
  display:block;
}


/* ===== v1.9 VIP落点＝环境粒子 ===== */
.vip-fx-title span{
  white-space:nowrap;
}
@media(max-width:900px){
  .vip-fx-title span{white-space:normal}
}


/* ===== v1.10 VIP落点连续上浮 ===== */
.vip-fx-speed-row{
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) 42px;
  align-items:center;
  gap:10px;
  margin:10px 0;
}
.vip-fx-speed-row input[type="range"]{
  width:100%;
  min-width:0;
}
.vip-fx-speed-value{
  text-align:right;
  font-size:9px;
  color:#cbd4e5;
  font-variant-numeric:tabular-nums;
}
@media(max-width:900px){
  .vip-fx-speed-row{
    grid-template-columns:90px minmax(100px,1fr) 40px;
    gap:7px;
  }
}

/* ===== v1.15 VIP切换按钮 ===== */
.vip-step-actions{margin-top:8px;margin-bottom:10px;}


/* v1.15.1 投屏弹窗轻量化 */
.cast-dialog-frost{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.55)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
.cast-option-wrap{padding:14px 14px 6px}
.cast-bottom-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:0 14px 14px}
.cast-helper-btn,.cast-close-btn{min-height:38px;padding:9px 14px;border-radius:12px!important}
.cast-helper-btn{background:rgba(255,255,255,.78)!important;border-color:rgba(205,212,226,.95)!important;color:#253046!important}
.cast-close-btn{background:rgba(245,247,251,.92)!important;border-color:rgba(214,220,231,.98)!important;color:#2d3748!important}
.mirror-guide-dialog{width:min(620px,94vw)}
.mirror-guide-pop-head{display:flex;flex-direction:column;gap:4px;padding:16px 16px 4px}
.mirror-guide-pop-head b{font-size:16px;color:#162031}
.mirror-guide-pop-head span{font-size:10px;color:#6c778b}
.mirror-guide-grid-pop{padding:10px 16px 0}
.mirror-guide-note{margin:8px 16px 6px;color:#768195;font-size:10px;line-height:1.7}
.tutorial-actions{padding-top:8px}
@media(max-width:900px){
  #castModal .library-dialog.cast-dialog-frost,#mirrorGuideModal .library-dialog.cast-dialog-frost{background:rgba(255,255,255,.80)!important}
  #castModal .cast-option-wrap{padding:14px 14px 6px!important}
  #castModal .cast-bottom-actions,#mirrorGuideModal .cast-bottom-actions{padding:2px 14px 14px!important}
  #castModal .cast-helper-btn,#castModal .cast-close-btn,#mirrorGuideModal .cast-close-btn{font-size:11px!important;min-height:42px!important}
  #castModal .cast-option{background:rgba(255,255,255,.62)!important;border:1px solid rgba(221,226,236,.95)!important}
  #castModal .cast-option.primary-cast{background:rgba(243,244,255,.78)!important;border-color:rgba(214,218,252,.98)!important}
  #mirrorGuideModal .mirror-guide-grid-pop{grid-template-columns:1fr!important;gap:8px!important}
  #mirrorGuideModal .mirror-guide-card{background:rgba(255,255,255,.72)!important;border-color:#e6eaf0!important}
}


/* ===== v1.15.2 投屏弹窗恢复原深色背景 ===== */
#castModal .library-dialog.cast-dialog-frost,
#mirrorGuideModal .library-dialog.cast-dialog-frost{
  background:linear-gradient(180deg,rgba(17,22,39,.98),rgba(8,11,22,.98))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 28px 100px rgba(0,0,0,.52)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  color:#eef2ff!important;
}
#castModal .cast-option{
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:#eef2ff!important;
}
#castModal .cast-option.primary-cast{
  background:linear-gradient(135deg,rgba(104,116,255,.10),rgba(104,72,210,.08))!important;
  border-color:rgba(125,133,255,.28)!important;
}
#castModal .cast-option-icon{
  background:rgba(255,255,255,.045)!important;
  color:#eef2ff!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:none!important;
}
#castModal .cast-option b,
#mirrorGuideModal .mirror-guide-pop-head b,
#mirrorGuideModal .mirror-guide-card b{
  color:#eef2ff!important;
}
#castModal .cast-option small,
#mirrorGuideModal .mirror-guide-pop-head span,
#mirrorGuideModal .mirror-guide-card span,
#mirrorGuideModal .mirror-guide-note{
  color:#8f9bb0!important;
}
#castModal .cast-helper-btn,
#castModal .cast-close-btn,
#mirrorGuideModal .cast-close-btn{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.09)!important;
  color:#cbd3e4!important;
}
#mirrorGuideModal .mirror-guide-card{
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(255,255,255,.08)!important;
}
@media(max-width:900px){
  #castModal .library-dialog.cast-dialog-frost,
  #mirrorGuideModal .library-dialog.cast-dialog-frost{
    background:linear-gradient(180deg,rgba(17,22,39,.98),rgba(8,11,22,.98))!important;
    color:#eef2ff!important;
  }
  #castModal .cast-option,
  #castModal .cast-option.primary-cast{
    background:rgba(255,255,255,.03)!important;
    border-color:rgba(255,255,255,.09)!important;
  }
}


/* ===== v1.16 落点效果迁移到经典频谱 ===== */
.classic-peak-fx-panel{
  display:block!important;
  margin-top:11px;
  border-color:rgba(124,137,190,.18);
  background:rgba(255,255,255,.022);
}
.classic-peak-fx-panel .vip-fx-title{align-items:center}
.classic-fx-memory-note{
  margin:-2px 0 8px;
  font-size:8.5px;
  color:#7f8aa0;
}
@media(max-width:900px){
  .classic-fx-memory-note{font-size:9.5px}
}


/* ===== v1.16.1 两套落点独立开关 ===== */
.vip-fx-toggle-group{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.vip-fx-toggle-group .toggle{white-space:nowrap}
@media(max-width:900px){
  .vip-fx-title{align-items:flex-start!important}
  .vip-fx-toggle-group{gap:7px;justify-content:flex-start}
  .vip-fx-toggle-group .toggle{font-size:10px}
}
/* Admin entry point intentionally shares the existing glassmorphism visual language. */
.admin-entry{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid rgba(142,173,255,.22);border-radius:11px;background:rgba(15,23,54,.52);color:#a8dcff;text-decoration:none;font-size:12px;white-space:nowrap;transition:.2s}.admin-entry:hover{border-color:rgba(103,199,255,.65);box-shadow:0 0 22px rgba(70,170,255,.18);transform:translateY(-1px)}


/* v1.17 双团能量山丘 */
.dual-blob-color-panel{display:none;margin:10px 0 12px;padding:12px;border:1px solid rgba(124,114,255,.18);border-radius:14px;background:rgba(255,255,255,.028)}
.dual-blob-color-panel.show{display:block}
.dual-blob-color-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dual-blob-color-head b{font-size:11px;color:#edf1ff}
.dual-blob-color-head span{font-size:9px;color:#8f9ab0}
.dual-blob-color-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dual-blob-color-inputs label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);color:#b9c3d8;font-size:10px}
.dual-blob-color-inputs input[type="color"]{width:44px;height:32px;padding:2px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:#111827}
.color-sec.dual-blob-hidden,.classic-peak-fx-panel.dual-blob-hidden{display:none!important}
@media(max-width:900px){.dual-blob-color-head{display:block}.dual-blob-color-head span{display:block;margin-top:4px}.dual-blob-color-inputs{grid-template-columns:1fr 1fr}.dual-blob-color-inputs label{font-size:11px}}


/* v1.17.1 双团波团修复 */
#dualBlobColorPanel[hidden]{display:none!important}
#dualBlobColorPanel.show{display:block}
.dual-blob-color-inputs input[type="color"]{width:46px!important;min-width:46px!important;max-width:46px!important;height:32px!important;flex:0 0 46px!important;padding:2px!important}
.dual-blob-color-inputs label{min-width:0}

/* ===== v1.17.2 落点 / 形态严格互斥 + 按模式收起无关控制 ===== */
.vip-fx-shape-row,
#vipFxFadeSpeedRow,
.vip-fx-color-mode-row{display:none}
.vip-fx-shape-row.show,
#vipFxFadeSpeedRow.show,
.vip-fx-color-mode-row.show{display:block}