:root{
  --bg-1: #040617;
  --bg-2: #071022;
  --panel: rgba(20,26,40,0.6);
  --glass: rgba(255,255,255,0.04);
  --border: rgba(120,150,255,0.08);
  --txt: #e8f6ff;
  --muted: #7f93a8;
  --accent-a: #40f0ff;   /* 青蓝 */
  --accent-b: #b46bff;   /* 紫粉 */
  --danger: #ff5f73;
  --ok: #16d89a;
  --card: rgba(255,255,255,0.02);
}
*{box-sizing:border-box}

/* 基本背景与光效 */
html, body{
  min-height:100%;
  margin:0;
  background: radial-gradient(800px 600px at 15% 10%, rgba(20,40,80,0.55), transparent),
              radial-gradient(700px 500px at 90% 80%, rgba(80,30,100,0.45), transparent),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  color:var(--txt);
  font:14px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  z-index:0;
}

/* 轻微网格 / 纹理 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(transparent 1px, rgba(255,255,255,0.008) 1px),
                    linear-gradient(90deg, transparent 1px, rgba(255,255,255,0.008) 1px);
  background-size: 40px 40px;
  opacity:0.9;
  mix-blend-mode: overlay;
  filter: blur(8px);
}

/* 顶部 */
.site-header{
  position:sticky; top:0; z-index:5;
  background: linear-gradient(180deg, rgba(6,10,18,0.85), rgba(6,10,18,0.55));
  backdrop-filter: blur(8px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.site-header h1{margin:0;padding:16px 24px;font-size: 1.5rem;font-weight:700;text-align:center;letter-spacing:0.6px;color:var(--txt)}

/* 页面容器 */
.page{max-width:1300px;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;color:var(--txt)}
.search-wrap{flex:1}
.search-wrap input{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--txt); outline:none;
  box-shadow: 0 6px 20px rgba(6,10,18,0.6) inset;
}

/* 抽屉/折叠行为（保留原有） */
.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:20;background:rgba(6,8,12,0.96);backdrop-filter:blur(6px);
  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, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius:12px; overflow:hidden; position:relative;
  transition: transform .16s ease, box-shadow .18s ease;
  padding:0;
}
.card:hover{transform:translateY(-6px); box-shadow: 0 14px 40px rgba(20,30,60,0.6);}

/* 设备卡 */
.device-card{cursor:grab}
.device-card:active{cursor:grabbing; transform:scale(.99)}

/* 设备缩略图 */
.device-thumb{aspect-ratio:1.4/1; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0)); display:flex; align-items:center; justify-content:center; overflow:hidden}
.device-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.device-meta{padding:10px 12px;background:linear-gradient(180deg, rgba(6,10,18,0.4), rgba(6,10,18,0.2))}
.device-meta h5{margin:0 0 6px 0;font-size:13px;color:var(--txt)}
.device-meta .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg, rgba(64,240,255,0.08), rgba(180,107,255,0.07));color:var(--accent-a);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, rgba(40,50,70,0.6), rgba(10,12,20,0.6));
  border:1px solid rgba(255,255,255,0.02);
  color:var(--txt);
  box-shadow: 0 8px 30px rgba(64,240,255,0.06) inset, 0 10px 40px rgba(180,107,255,0.06);
}

/* Dropzone */
.dropzone{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
  border:1px dashed rgba(255,255,255,0.04);
  border-radius:16px; 
  min-height:300px; 
  width:100%;
  max-width:900px;
  overflow:hidden;
}
.dropzone.dragover{border-color:rgba(64,240,255,0.6)}

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

/* 左侧图片区域 */
.device-image-section{
  flex:0 0 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(8,12,20,0.6), rgba(12,18,30,0.45));
  border-right:1px solid rgba(255,255,255,0.02);
  position:relative; /* 让频响按钮定位 */
  padding:12px;
}
.device-image-section img.zone-bg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* 频响按钮 (文字) */
.freq-btn{
  position:absolute;
  top:10px;
  right:10px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  border:none;
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  box-shadow: 0 6px 20px rgba(64,240,255,0.12);
}
.freq-btn:active{transform:translateY(1px)}

/* 右侧控制区 */
.device-controls-section{
  flex:1;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background: linear-gradient(180deg, rgba(10,14,24,0.2), rgba(6,10,18,0.05));
}

/* 移除按钮 */
.remove-btn{
  align-self:flex-end;
  background:transparent;
  border:1px solid rgba(255,95,115,0.12);
  color:var(--danger);
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  font-size:13px;
}

/* 音频控制组 */
.audio-control-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.02);
}

.audio-info{display:flex;align-items:center}
.audio-name{font-weight:700;color:var(--accent-a);font-size:14px}

.audio-controls{display:flex;gap:8px}
.play-btn, .video-btn{
  background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--txt);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:13px;flex:1;
}
.play-btn:hover, .video-btn:hover{box-shadow:0 8px 20px rgba(0,0,0,0.4)}
.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,0.04);border-radius:999px;cursor:pointer;overflow:hidden}
.seek .fill{position:absolute;height:100%;left:0;top:0;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));width:0%;transition:width .1s}
.seek .thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#fff;left:0%;transition:left .08s}
.time{min-width:52px;color:var(--muted);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;font-size:14px}

/* 参数浮层（仍保留样式） */
.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,0.7);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.03);
  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}

/* 频响覆盖层（填充整个 dropzone） */
.freq-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(2,6,12,0.85), rgba(2,6,12,0.9));
  padding:10px; /* 添加内边距，给关闭按钮留空间 */
}
.freq-overlay img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.freq-overlay .close-freq{
  position:absolute;
  top:10px;
  right:10px;
  background: rgba(255,255,255,0.06);
  color:#fff;
  border:none;
  font-size:18px;
  border-radius:50%;
  width:36px;height:36px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
  z-index:1; /* 确保按钮在图片上方 */
}
.freq-overlay .close-freq:hover{background:rgba(255,255,255,0.12)}


/* 弹窗 / 模态 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-body{position:relative;background:#071022;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.7);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:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--txt);border-radius:10px;padding:6px 10px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent-a),var(--accent-b));border-color:transparent;color:#04101a}

/* 管理后台（保留原样式风格但调整色调） */
.admin{position:fixed;inset:0;background:rgba(6,8,12,.9);backdrop-filter:blur(8px);z-index:60;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 rgba(255,255,255,0.03);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 rgba(255,255,255,0.03);
  border-radius:10px;padding:12px;margin-bottom:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
}
.audio-group h5, .video-group h5{margin:0 0 8px 0;color:var(--accent-a)}
#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-radius:10px;padding:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02)}
.admin-item img{width:100px;height:72px;object-fit:cover;border-radius:8px}
.admin-item .meta h5{margin:0}
.admin-item .meta .small{color:var(--muted)}
.admin-item .ops{display:flex;gap:6px}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg, rgba(6,10,18,0.9), rgba(6,10,18,0.95));border:1px solid rgba(255,255,255,0.03);padding:10px 14px;border-radius:10px;color:var(--txt);z-index:80}
.toast.hidden{display:none}

/* 手机端适配 */
@media (max-width: 768px){
  .device-container{flex-direction:column}
  .device-image-section{flex:0 0 140px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.02)}
  .device-controls-section{padding:12px}
  .audio-control-group{padding:8px}
  .pk{width:56px;height:56px}
  .grid{grid-template-columns: repeat(2,1fr)}
}

/* 页脚 */
.site-footer{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,0.02);padding:24px;background:linear-gradient(180deg, rgba(3,6,12,0.2), rgba(3,6,12,0.45))}
.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 rgba(255,255,255,0.02);background:rgba(255,255,255,0.01)}
.small{color:var(--muted);font-size:12px}
@media (max-width:768px){.footer-inner{grid-template-columns:1fr}}
/* 频响模态框样式 */
.freq-modal-body {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 12, 0.95);
  border: none;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
}

.freq-modal-body img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}