/* ========== 全局重置 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow-x:hidden;overflow-y:auto}
body{
  font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
  background:#F8F5EE;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

/* ========== 右上图标按钮（两页共用） ========== */
.top-right img{width:30px;height:30px;cursor:pointer;padding:4px}

/* ========== Toast 提示 ========== */
.toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:16px 32px;border-radius:14px;font-size:18px;font-weight:800;
  z-index:200;pointer-events:none;transition:opacity .3s;
}
.toast.success{background:#48BB78;color:#fff}
.toast.error{background:#E53E3E;color:#fff}

/* ========== 充值确认弹窗 ========== */
.confirm-overlay{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.7);z-index:400;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.confirm-overlay.show{opacity:1;pointer-events:auto}
.confirm-dialog{
  width:78vw;max-width:300px;background:#fff;
  border-radius:18px;padding:24px 20px 20px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.3);
}
.confirm-dialog .cfm-title{font-size:18px;font-weight:800;color:#333;margin-bottom:8px}
.confirm-dialog .cfm-desc{font-size:14px;color:#888;margin-bottom:18px}
.confirm-dialog .cfm-desc b{color:#E53E3E;font-size:16px}
.confirm-dialog .cfm-btns{display:flex;gap:12px}
.confirm-dialog .cfm-btn{
  flex:1;padding:10px 0;border-radius:14px;font-size:15px;font-weight:700;
  cursor:pointer;border:none;transition:transform 0.15s;
}
.confirm-dialog .cfm-btn:active{transform:scale(0.95)}
.confirm-dialog .cfm-btn.cancel{background:#E8E2F0;color:#695982}
.confirm-dialog .cfm-btn.ok{background:linear-gradient(180deg,#FFD700,#F5A623);color:#fff}

/* ========== 充值成功弹窗 ========== */
.success-sheet{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.7);z-index:450;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.success-sheet.show{opacity:1;pointer-events:auto}
.success-card{
  width:72vw;max-width:280px;background:#fff;
  border-radius:20px;padding:28px 20px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.3);
  transform:scale(0.8);transition:transform 0.35s;
}
.success-sheet.show .success-card{transform:scale(1)}
.success-card .s-icon{font-size:48px;margin-bottom:10px}
.success-card .s-title{font-size:20px;font-weight:800;color:#48BB78;margin-bottom:4px}
.success-card .s-coin{font-size:14px;color:#888;margin-top:6px}
.success-card .s-coin b{color:#D4A017;font-size:18px}

/* ========== 金币不足弹窗 ========== */
.coin-short-overlay{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.7);z-index:500;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.coin-short-overlay.show{opacity:1;pointer-events:auto}
.coin-short-dialog{
  width:78vw;max-width:300px;background:#fff;
  border-radius:18px;padding:24px 20px 20px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.3);
}
.coin-short-dialog .cs-icon{font-size:40px;margin-bottom:8px}
.coin-short-dialog .cs-title{font-size:18px;font-weight:800;color:#E53E3E;margin-bottom:6px}
.coin-short-dialog .cs-desc{font-size:14px;color:#888;margin-bottom:18px;line-height:1.5}
.coin-short-dialog .cs-desc b{color:#E53E3E}
.coin-short-dialog .cs-btns{display:flex;gap:12px}
.coin-short-dialog .cs-btn{
  flex:1;padding:10px 0;border-radius:14px;font-size:15px;font-weight:700;
  cursor:pointer;border:none;transition:transform 0.15s;
}
.coin-short-dialog .cs-btn:active{transform:scale(0.95)}
.coin-short-dialog .cs-btn.recharge{background:linear-gradient(180deg,#FFD700,#F5A623);color:#fff}
.coin-short-dialog .cs-btn.cancel{background:#E8E2F0;color:#695982}

/* ========== 遮罩层 ========== */
.overlay{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.65);z-index:300;opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.overlay.show{opacity:1;pointer-events:auto}

/* ========== 设置弹窗容器 ========== */
.settings-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);
  width:82vw;max-width:380px;z-index:301;
  background:#fff9f6;border-radius:22px;padding:28px 22px 22px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
}
.settings-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-title{text-align:center;font-size:28px;color:#695982;font-weight:400;margin-bottom:14px}
.modal-divider{height:1px;background:#d3cddb;margin:0 0 20px}
.modal-close{
  position:absolute;top:24px;right:24px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#777;cursor:pointer;border-radius:50%;
  padding:6px;transition:opacity .2s;
}
.modal-close:hover{opacity:.6}

/* ========== 弹窗配置行 ========== */
.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px}
.setting-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.setting-left span{font-size:22px;color:#555;font-weight:400}

/* ========== 滑块控件 ========== */
.slider-track{width:140px;height:8px;background:#d2e7ff;border-radius:4px;position:relative;cursor:pointer}
.slider-fill{height:100%;background:#3693ff;border-radius:4px;transition:width .1s}
.slider-thumb{
  position:absolute;top:-10px;width:28px;height:28px;
  border-radius:50%;background:#3693ff;
  transform:translateX(-50%);cursor:pointer;
  box-shadow:0 2px 6px rgba(54,147,255,.4);transition:left .1s;
}

/* ========== 开关 Toggle ========== */
.toggle{width:52px;height:26px;border-radius:13px;background:#3693ff;position:relative;cursor:pointer;transition:background .2s}
.toggle.off{background:#c5d9f0}
.toggle .toggle-dot{
  position:absolute;top:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.toggle.on .toggle-dot{left:28px}
.toggle.off .toggle-dot{left:2px}

/* ========== 语言选择 ========== */
.lang-select{
  padding:6px 10px;font-size:16px;border-radius:10px;
  border:1.5px solid #d3cddb;background:#fff;
  color:#555;outline:none;cursor:pointer;
  max-width:180px;appearance:auto;
  flex-shrink:0;
}

/* ========== 弹窗底部按钮 ========== */
.modal-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 0;border-radius:16px;
  background:linear-gradient(180deg,#53b1ff,#2779f0);
  cursor:pointer;transition:transform .15s;
  margin-bottom:12px;color:#fff;font-size:20px;font-weight:800;
}
.modal-btn:last-child{margin-bottom:0}
.modal-btn:active{transform:scale(.97)}
.modal-btn img{width:26px;height:26px}

/* ========== 小屏幕适配 ========== */
@media (max-width: 400px) {
  .settings-modal {
    width: 90vw;
    padding: 24px 16px 18px;
  }
  .setting-row {
    gap: 8px;
  }
  .setting-left span {
    font-size: 16px;
  }
  .lang-select {
    max-width: 130px;
    font-size: 13px;
    padding: 4px 6px;
  }
  .slider-track {
    width: 110px;
  }
  .toggle {
    width: 46px;
    height: 24px;
  }
  .toggle .toggle-dot {
    width: 20px;
    height: 20px;
  }
  .toggle.on .toggle-dot {
    left: 24px;
  }
}