:root{
  --bg:#0a0f16; --panel:#0f1620; --muted:#7c8a9a; --txt:#e8eef6; --acc:#3ec5ff; --acc2:#a76bff; --ok:#16c67a; --warn:#ffcc00; --err:#ff5f73;
  --card:#121a24; --glass:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.08);
}
*{box-sizing:border-box}

/* 背景：深色渐变 + 动效 + 半透明Logo（强制生效） */
html, body{
  min-height:100%;
  background:#0a0f16 !important;
}
body{
  margin:0; color:var(--txt);
  font:14px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;

  background:
    radial-gradient(1200px 800px at 20% -10%, #132137, transparent),
    radial-gradient(1000px 700px at 120% 20%, #1a1030, transparent),
    linear-gradient(135deg, #0b1018, #0c1420 40%, #0a0f18) !important;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover, cover, 200% 200%;
  animation: bgShift 20s ease-in-out infinite;
  position:relative;
  z-index:0;
}
@keyframes bgShift{
  0%{background-position: center, center, 0% 0%}
  50%{background-position: center, center, 100% 50%}
  100%{background-position: center, center, 0% 100%}
}
/* 辉光动效层 */
body::before{
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(500px 500px at 20% 30%, rgba(62,197,255,.12), transparent),
    radial-gradient(650px 650px at 80% 70%, rgba(167,107,255,.12), transparent);
  filter: blur(30px);
  animation: floatGlow 16s ease-in-out infinite alternate;
}
@keyframes floatGlow{
  0%{transform: translateY(-10px)}
  100%{transform: translateY(10px)}
}
/* 背景Logo（50%透明） */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: url("images/造音工坊.png") no-repeat center 18% / 420px auto;
  opacity:.5;
}

/* 顶部与页面容器 */
.site-header{position:sticky;top:0;z-index:3;background:linear-gradient(180deg,rgba(11,15,20,.9),rgba(11,15,20,.4));backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.site-header h1{margin:0;padding:16px 24px;font-weight:700;letter-spacing:.2px;text-align:center}

.page{max-width:1400px;margin:0 auto;padding:24px;position:relative;z-index:1}

/* 设备库 */
.library{margin-bottom:28px}
.library-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.library-head h2{margin:0}
.search-wrap{flex:1}
.search-wrap input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--txt);outline:none}

/* 折叠/抽屉行为 */
.library .library-body{max-height:420px; overflow:auto; transition:max-height .28s ease, padding .28s ease}
.library.collapsed .library-body{max-height:0; padding:0; overflow:hidden}
.library.drawer-open{
  position:fixed; inset:0; z-index:5;
  background:rgba(11,15,20,.96); backdrop-filter:blur(8px);
  padding:20px; display:flex; flex-direction:column;
}
.library.drawer-open .library-head{position:sticky; top:0; background:transparent; z-index:1; margin-bottom:8px}
.library.drawer-open .library-body{max-height:unset; flex:1; overflow:auto}
.library.drawer-open #closeDrawer{display:inline-block !important}
.library.drawer-open #toggleLibrary{display:none}

/* 库网格与卡片 */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:6px 2px}
@media (max-width:1280px){.grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{
  background:linear-gradient(180deg,var(--glass),transparent);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative;
  transition:transform .18s ease, box-shadow .18s ease
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.device-card{cursor:grab}
.device-card:active{cursor:grabbing; transform:scale(.98)}

/* 设备库图片自适应（完整显示） */
.device-thumb{aspect-ratio:1.4/1; background:#0c1219; display:flex; align-items:center; justify-content:center; overflow:hidden}
.device-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#0c1219}
.device-meta{padding:10px 12px}
.device-meta h5{margin:0 0 6px 0;font-size:13px}
.device-meta .tag{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(62,197,255,.15);color:#8ddcff;font-size:12px}

/* 对比区 - 改为永远竖直排列 */
.compare-container{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
  margin-bottom:14px;
}
.pk{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:1px;
  background:linear-gradient(180deg,#1f2b40,#1b1f2b);border:1px solid var(--border);box-shadow:0 0 30px rgba(62,197,255,.2) inset, 0 0 18px rgba(167,107,255,.35);
  color:#cfeaff; text-shadow:0 3px 10px rgba(62,197,255,.35), 0 -1px 0 rgba(255,255,255,.2);
  animation:glow 3s ease-in-out infinite;
}
@keyframes glow{
  0%{box-shadow:0 0 16px rgba(62,197,255,.2),0 0 8px rgba(167,107,255,.25)}
  50%{box-shadow:0 0 36px rgba(62,197,255,.4),0 0 22px rgba(167,107,255,.45)}
  100%{box-shadow:0 0 16px rgba(62,197,255,.2),0 0 8px rgba(167,107,255,.25)}
}

.dropzone{
  position:relative;
  background:linear-gradient(180deg,var(--glass),transparent);
  border:1px dashed rgba(255,255,255,.15);
  border-radius:16px; 
  min-height:400px; /* 高度增加到400px */
  width:100%;
  max-width:800px;
  overflow:hidden;
}
.dropzone.dragover{border-color:var(--acc)}

/* 新的设备容器布局 */
.device-container{
  display:flex;
  height:100%;
  width:100%;
}

.device-image-section{
  flex:0 0 250px; /* 宽度增加到250px */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0c1219;
  border-right:1px solid var(--border);
}

.device-image-section img.zone-bg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.device-controls-section{
  flex:1;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.remove-btn{
  align-self:flex-end;
  background:rgba(255,95,115,.2);
  border:1px solid rgba(255,95,115,.3);
  color:#ff5f73;
  border-radius:8px;
  padding:4px 12px;
  cursor:pointer;
  font-size:12px;
}

.remove-btn:hover{
  background:rgba(255,95,115,.3);
}

.audio-control-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

.audio-info{
  display:flex;
  align-items:center;
}

.audio-name{
  font-weight:600;
  color:var(--acc);
  font-size:14px;
}

.audio-controls{
  display:flex;
  gap:8px;
}

.play-btn, .video-btn{
  background:#1a2330;
  border:1px solid var(--border);
  color:#dfe8f2;
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  font-size:12px;
  flex:1;
}

.play-btn:hover, .video-btn:hover{
  background:#243041;
}

.video-btn{
  background:linear-gradient(90deg,#2b9eff22,#7a5cff22);
}

.seek-container{
  display:flex;
  align-items:center;
  gap:8px;
}

.seek{
  position:relative;
  flex:1;
  height:10px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  cursor:pointer;
  overflow:hidden;
}
.seek .fill{
  position:absolute;
  height:100%;
  left:0;
  top:0;
  background:linear-gradient(90deg,#2b9eff,#7a5cff);
  width:0%;
  transition:width 0.1s ease;
}
.seek .thumb{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  left:0%;
  transition:left 0.1s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.time{
  min-width:52px;
  color:#b8c6d6;
  font-variant-numeric:tabular-nums;
  font-size:12px;
}

/* 空状态提示 */
.dz-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);z-index:1}

/* 参数浮层：满铺容器，内容居中，自适应字号（保持居中） */
.params-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px; overflow:auto; text-align:center;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  border:1px solid var(--border);
  border-radius:12px;

  font-size:clamp(12px, 1.6vw, 18px);
  line-height:1.6; color:#dfe8f2;

  pointer-events:none;
}
.params-overlay .item{
  margin:6px 0;
  word-break:break-word;
}

/* 提示与弹窗/后台通用 */
.hint{color:#8da0b4}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10}
.modal.hidden{display:none}
.modal-body{position:relative;background:#0b0f14;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:10px}
.modal video{width:70vw;max-width:1000px;max-height:70vh;background:black;border-radius:10px}
.modal-close{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:none;background:#1f2b40;color:#fff;cursor:pointer}

.btn{background:#1a2330;border:1px solid var(--border);color:#dfe8f2;border-radius:10px;padding:6px 10px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#2b9eff,#7a5cff);border-color:transparent}

.admin{position:fixed;inset:0;background:rgba(11,15,20,.9);backdrop-filter:blur(8px);z-index:30;overflow:auto}
.admin.hidden{display:none}
.admin-inner{max-width:1200px;margin:40px auto;padding:20px}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:6px;border:1px solid var(--border);padding:6px 10px;border-radius:10px}
.admin-grid{display:grid;grid-template-columns:360px 1fr;gap:14px}
@media(max-width:1024px){.admin-grid{grid-template-columns:1fr}}
.admin .card{padding:14px}
.admin label{display:grid;gap:6px;margin-bottom:10px}

/* 后台音频视频分组样式 */
.audio-group, .video-group{
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
  background:rgba(255,255,255,.02);
}
.audio-group h5, .video-group h5{
  margin:0 0 8px 0;
  color:var(--acc);
}

.params .param-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#paramList .param-item{display:flex;gap:6px;margin-bottom:6px}
#paramList .param-item input{flex:1}
.form-actions{display:flex;gap:8px}
.admin-list{display:grid;gap:8px;max-height:640px;overflow:auto}
.admin-item{display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px;background:linear-gradient(180deg,var(--glass),transparent)}
.admin-item img{width:100px;height:72px;object-fit:cover;border-radius:8px}
.admin-item .meta h5{margin:0}
.admin-item .meta .small{color:#8fa0b3}
.admin-item .ops{display:flex;gap:6px}

/* 提示 */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a2330;border:1px solid var(--border);padding:10px 14px;border-radius:10px;color:#dfe8f2;z-index:40}
.toast.hidden{display:none}

/* 手机端悬浮按钮 */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:6;
  background:linear-gradient(90deg,#2b9eff,#7a5cff); color:#fff;
  border:none; border-radius:999px; padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:pointer
}
.fab.hidden{display:none}

/* 小屏优化 */
@media (max-width: 768px){
  .device-container{
    flex-direction:column;
  }
  .device-image-section{
    flex:0 0 120px;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .device-controls-section{
    padding:12px;
  }
  .audio-control-group{
    gap:6px;
    padding:6px;
  }
  .pk{width:56px;height:56px}
}

/* 页脚 */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(11,15,20,.4),rgba(11,15,20,.7));padding:24px}
.footer-inner{max-width:1200px;margin:
auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.footer-inner h3{margin:0 0 10px 0}
.qr{display:flex;align-items:center;gap:14px}
.qr img{width:120px;height:120px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:#0c1219}
.small{color:#8da0b4;font-size:12px}
@media (max-width:768px){.footer-inner{grid-template-columns:1fr}}