/* ───────── 设置面板 ───────── */
#panel{
  position:fixed;top:0;right:0;bottom:0;z-index:900;
  width:360px;max-width:100vw;
  padding:18px 18px 18px 0;
  display:none;
  transition:opacity .2s ease;
}
#panel.open{display:block}
#panel-inner{
  height:100%;
  display:flex;flex-flow:column nowrap;
  background:#fff;border-radius:8px;
  box-shadow:0 2px 24px rgba(0,0,0,.18);
  padding:0 0 0 26px;
  overflow:hidden;
}

#panel-head{
  height:58px;flex:0 0 58px;
  display:flex;align-items:center;justify-content:space-between;
  padding-right:16px;
  border-bottom:1px solid #ececec;
}
#panel-title{display:flex;align-items:center;gap:8px;min-width:0}
#panel-title-icon{width:18px;height:18px}
#panel-title-text{font-size:15px;color:#333;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#panel-head-right{display:flex;align-items:center;gap:10px}
#panel-eye{width:17px;height:17px;cursor:pointer;opacity:.55;transition:opacity .2s ease}
#panel-eye:hover{opacity:1}
#panel-close{
  width:18px;height:18px;cursor:pointer;opacity:.5;
  background:url(/assets/img/ui/close.svg) no-repeat center/contain;
  transition:opacity .2s ease;
}
#panel-close:hover{opacity:1}

.panel-view{
  flex:1;min-height:0;
  display:flex;flex-flow:column nowrap;
  padding:14px 16px 14px 0;
  overflow-y:auto;
  overflow-x:hidden;
}
.panel-view[hidden]{display:none}

/* 主菜单 */
#panel-menu{gap:2px}
#user-row{
  display:flex;align-items:center;gap:12px;
  padding:6px 0 16px;
  border-bottom:1px solid #f2f2f2;
  margin-bottom:8px;
}
.avatar{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:#eef1f6 url(/assets/img/ui/user.svg) no-repeat center/20px 20px;
}
.user-meta{display:flex;flex-flow:column nowrap;gap:2px;min-width:0}
#user-name{font-size:15px;color:#333}
#user-hint{font-size:12px;color:#9a9a9a}
.menu-btn{
  padding:11px 12px;border-radius:6px;
  font-size:14px;color:#444;cursor:pointer;
  transition:background-color .15s ease;
}
.menu-btn:hover{background:#f6f7f9}
#panel-foot{
  margin-top:auto;padding-top:14px;
  border-top:1px solid #f2f2f2;
  display:flex;gap:8px;flex-wrap:wrap;
}
.foot-btn{
  padding:7px 14px;border-radius:6px;
  font-size:13px;color:#666;cursor:pointer;
  background:#f4f5f7;
  transition:background-color .15s ease;
}
.foot-btn:hover{background:#eceef2}

/* 通用小按钮 */
.mini-btn{
  padding:6px 14px;border-radius:5px;
  font-size:13px;color:#555;background:#f2f3f5;
  cursor:pointer;user-select:none;
  transition:background-color .15s ease,color .15s ease;
}
.mini-btn:hover{background:#e9ebef}
.mini-btn.primary{background:#4b8ef7;color:#fff}
.mini-btn.primary:hover{background:#3b7ce4}
.mini-btn.ghost{background:transparent;border:1px solid #ddd}
.row-end{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

/* 视图切换标签 */
.view-tabs{
  display:flex;gap:6px;margin-bottom:14px;
  border-bottom:1px solid #f0f0f0;padding-bottom:10px;
}
.tab{
  padding:5px 14px;border-radius:100px;
  font-size:13px;color:#666;background:#f4f5f7;cursor:pointer;
  transition:all .15s ease;
}
.tab.active{background:#4b8ef7;color:#fff}

/* 壁纸网格 */
#bg-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.bg-cell{
  position:relative;
  padding-top:56.25%;   /* 16:9 */
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:#f0f0f0 center/cover no-repeat;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bg-cell:hover{transform:scale(1.02);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bg-cell.active::after{
  content:"";position:absolute;inset:0;
  border:2px solid #4b8ef7;border-radius:6px;
}
#bg-loading{padding:16px 0;text-align:center;font-size:13px;color:#999}

/* 网络图片 */
#bg-url input{
  width:100%;padding:10px 12px;border:1px solid #e2e4e8;border-radius:6px;
  font-size:13px;outline:none;
  transition:border-color .2s ease;
}
#bg-url input:focus{border-color:#4b8ef7}
.tip{font-size:12px;color:#9a9a9a;line-height:1.6;margin:10px 0 0}

/* UI 设置分组 */
.ui-group{margin-bottom:18px}
.ui-group-title{
  font-size:13px;color:#8a8a8a;font-weight:500;
  padding-bottom:8px;margin-bottom:10px;
  border-bottom:1px solid #f4f4f4;
}
#ui-presets{display:flex;gap:8px;flex-wrap:wrap}
.preset-btn{
  padding:8px 16px;border-radius:6px;
  font-size:13px;color:#555;background:#f4f5f7;
  cursor:pointer;transition:all .15s ease;
}
.preset-btn:hover{background:#e9ebef}
.preset-btn.active{background:#4b8ef7;color:#fff}

/* 滑块 */
.ui-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ui-label{font-size:13px;color:#555}
.ui-value{font-size:12px;color:#4b8ef7;min-width:46px;text-align:right}
.slider-track{
  position:relative;height:22px;margin-bottom:14px;
  display:flex;align-items:center;
}
.slider-line{
  position:absolute;left:0;top:50%;height:3px;width:0;
  margin-top:-1.5px;border-radius:2px;background:#4b8ef7;
}
.slider-rail{
  position:absolute;left:0;top:50%;height:3px;width:100%;
  margin-top:-1.5px;border-radius:2px;background:#eceef2;
}
.slider-knob{
  position:absolute;left:0;top:50%;
  width:16px;height:16px;margin-top:-8px;margin-left:-8px;
  border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  cursor:grab;transition:transform .12s ease;
}
.slider-knob:active{cursor:grabbing;transform:scale(1.12)}

/* 开关 */
.ui-switch-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;
  border-bottom:1px solid #f6f6f6;
}
.switch{
  position:relative;width:40px;height:22px;flex:0 0 40px;
  border-radius:100px;background:#dcdfe4;
  cursor:pointer;transition:background-color .2s ease;
}
.switch.on{background:#4b8ef7}
.switch::after{
  content:"";position:absolute;left:2px;top:2px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s ease;
}
.switch.on::after{transform:translateX(18px)}

/* ───────── 弹窗 ───────── */
.dialog{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:20px;
}
.dialog[hidden]{display:none}
.dlg-box{
  width:440px;max-width:100%;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  padding:22px 24px;
  animation:dlgIn .18s ease;
}
.dlg-box.narrow{width:360px}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.dlg-title{font-size:16px;color:#333;margin-bottom:18px}
.dlg-box label{
  display:block;margin-bottom:14px;
  font-size:13px;color:#777;
}
.dlg-box label input{
  display:block;width:100%;margin-top:6px;
  padding:9px 12px;border:1px solid #e2e4e8;border-radius:6px;
  font-size:14px;color:#333;outline:none;
  transition:border-color .2s ease;
}
.dlg-box label input:focus{border-color:#4b8ef7}
.icon-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.icon-row img{
  width:40px;height:40px;border-radius:6px;
  object-fit:contain;background:#f6f7f9;border:1px solid #eee;
}
.dlg-foot{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:20px;padding-top:16px;
  border-top:1px solid #f2f2f2;
}
.auth-switch{
  margin-top:14px;text-align:center;
  font-size:13px;color:#4b8ef7;cursor:pointer;
}
.auth-switch span:hover{text-decoration:underline}

/* 小屏 */
@media (max-width:760px){
  #panel{width:100%;padding:0}
  #panel-inner{border-radius:0;padding-left:18px}
}

/* 修正：flex 列布局下保证滑块与分组占满可用宽度 */
#ui-groups{width:100%;display:block}
.ui-group{width:100%;display:block;margin-bottom:18px}
.slider-track{position:relative;display:block;width:100%;height:22px;margin-bottom:14px}
.ui-row{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:6px}
.ui-switch-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 0;border-bottom:1px solid #f6f6f6}
/* 修正 2：panel-view 在 flex 列容器中必须显式约束宽高，否则塌陷为 0 */
.panel-view{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  display:flex;
  flex-flow:column nowrap;
  align-content:flex-start;
}
.panel-view[hidden]{display:none}
#ui-groups{width:100%;display:block;flex:0 0 auto}