/* 后台通用样式（导航、变量、按钮、表单、弹窗基础） */
:root {
  --bg: #0e1016;
  --bg-rgb: 14, 16, 22;
  --panel: #141823;
  --panel-2: #171a25;
  --panel-3: #1c2030;
  --border: #232838;
  --border-2: #2c3145;
  --border-3: #343a52;
  --text: #e8eaf0;
  --text-2: #d4d8e6;
  --muted: #7c829a;
  --muted-2: #9aa0b5;
  --primary: #4a7dff;
  --primary-h: #3a6cf0;
  --primary-soft: rgba(74, 125, 255, .14);
  --danger: #ff7a7a;
  --danger-soft: rgba(255, 122, 122, .12);
  --ok: #7fe6b0;
  --ok-soft: rgba(127, 230, 176, .12);
  --warn: #ffd166;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);

  /* 统一字体栈：中文/日文/韩文字体**必须排在 emoji 字体之前**。
     原因：昵称里常混入 emoji（🌈）与稀有组合符（如藏文 ོ U+0F7C）。
     若 emoji 字体排在前，Chrome 的字体回退可能把整段（含普通汉字「微」）
     切到 emoji 字体上，而 emoji 字体没有汉字 → 汉字变成「豆腐块」□。
     顺序：系统 UI 字体 → 中文 → 日文 → 韩文 → emoji（兜底）。 */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
             "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
             "Yu Gothic UI", "Yu Gothic", "Meiryo", "MS Gothic",
             "Malgun Gothic",
             "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
             sans-serif;
  /* 藏文等稀有文种：能装的机器就用真字形；没装的机器也不能把相邻汉字带坏 */
  --font-tibetan: "Microsoft Himalaya", "Jomolhari", "Noto Sans Tibetan", "Kailasa", var(--font-ui);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* 含 emoji / 稀有组合符等「外来字符」的文本块统一走这条栈，避免字体回退串味。
   任何可能显示用户昵称、店铺名、微信名的单元格都建议带上这个类。 */
.uc-text { font-family: var(--font-ui); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-h); }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--primary-h); }
.btn:active { transform: translateY(1px); }

/* 禁用按钮：灰色背景、灰色文字、not-allowed 光标、去掉 hover 变化 */
.btn:disabled,
.btn[disabled] {
  background: #2a2d35 !important;
  color: #6e7382 !important;
  border-color: #3a3f4a !important;
  cursor: not-allowed !important;
  opacity: 0.75;
  pointer-events: auto;          /* 让浏览器仍能响应 hover 显示 cursor:not-allowed */
  box-shadow: none !important;
  transform: none !important;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: #2a2d35 !important;
  color: #6e7382 !important;
}

.btn.ghost {
  background: var(--panel-3);
  color: var(--muted-2);
  border: 1px solid var(--border-2);
}
.btn.ghost:hover { background: #232838; color: #fff; }
.btn.ghost:disabled,
.btn.ghost[disabled] {
  background: #23263a !important;
  color: #5e6373 !important;
  border-color: #32364a !important;
}

.btn.danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(255, 122, 122, .3);
}
.btn.danger:hover { background: rgba(255, 122, 122, .2); }

.btn.push {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid rgba(127, 230, 176, .35);
}
.btn.push:hover { background: rgba(127, 230, 176, .18); }

.btn.sm { padding: 7px 13px; font-size: 13px; }
.btn.lg { padding: 12px 20px; font-size: 15px; }

/* 表单控件 */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: #0f121b;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
input:focus,
textarea:focus,
select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(74, 125, 255, .12); }

/* 下拉菜单统一外观：去掉浏览器默认箭头，使用浅色自定义箭头，与输入框风格一致 */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239aa0b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
select:hover { border-color: var(--border-3); }
select::-ms-expand { display: none; }

label { display: block; font-size: 13px; color: #aab0c5; margin: 10px 0 6px; }

/* 卡片 */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .15s ease, transform .12s ease;
}
.card:hover { border-color: #2e3550; }

/* 弹窗基础 */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(var(--bg-rgb), .6);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 14px;
  overflow: auto;
  z-index: 200;
}
.mask.open { display: flex; }

/* 图片放大灯箱（tasks/reviews 共用）：高度距浏览器顶部/底部各 70px，宽度自适应；z-index 最高，确保盖过所有弹窗 */
#lightbox { align-items: center; padding: 70px 14px; z-index: 999; }
#lightbox img { max-height: calc(100vh - 140px); max-width: calc(100vw - 28px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }

.modal {
  width: min(760px, 100%);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  padding: 20px;
  max-height: calc(100vh - 60px);
  overflow: auto;
  box-shadow: var(--shadow);
}
/* item4 第 2 轮：弹窗宽度从 920px 加宽到 1080px，配合 .dt-no 专属样式（订单号白底卡片）
   确保 18 位长订单号（如 6928909801361538997 / 5127638904689090014）单行显示 */
#submitMask .modal, #reviewMask .modal { width: min(1080px, calc(100vw - 24px)); }
/* 订单号专属样式 — 等宽字体 + 不换行（已去掉外层背景框） */
.dt-row .dt-v.dt-no {
  font-family:'SF Mono',Menlo,Consolas,'Courier New',monospace;
  letter-spacing:.5px;
  white-space:nowrap;
  word-break:keep-all;
}
/* 弹窗滚动条美化 */
.modal::-webkit-scrollbar { width: 8px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: #2c3145; border-radius: 4px; }
.modal::-webkit-scrollbar-thumb:hover { background: #3a4160; }
.modal { scrollbar-width: thin; scrollbar-color: #2c3145 transparent; }
.modal h2 {
  font-size: 16px;
  margin: 0 0 14px;
  color: #eef0f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.modal .x {
  cursor: pointer;
  color: var(--muted-2);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.modal .x:hover { background: #222634; color: #fff; }

/* 标签 */
.tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: #9fc0ff;
}
.tag.date { background: rgba(201, 168, 255, .14); color: #c9a8ff; }

/* 空状态 */
.empty {
  color: var(--muted);
  text-align: center;
  padding: 48px 20px;
  font-size: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

/* 现代开关 */
.switch {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 0;
  cursor: pointer;
}
.switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 23px;
  border-radius: 999px;
  background: #2a2f42;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
  flex: 0 0 auto;
  margin: 0;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #cfd4e6;
  transition: transform .15s ease;
}
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(19px); background: #fff; }
.switch label { margin: 0; cursor: pointer; font-size: 14px; color: #cfd4e6; }

/* 七牛云设置等弹窗通用元素（原 reviews.php 内联，已全局化以支持顶部导航入口） */
.hint { font-size:12px; color:var(--muted); margin:0 0 16px; line-height:1.6; }
.msg { font-size:13px; margin-left:12px; }
.form-foot { display:flex; align-items:center; margin-top:18px; }
.opt-select { width:100%; cursor:pointer; }

/* 通用布局 */
.wrap { max-width: 1600px; margin: 0 auto; padding: 20px 24px 64px; }

@media (max-width: 560px) {
  .wrap { padding: 16px 14px 64px; }
}

/* 修改密码弹窗 */
.pwd-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.pwd-tip {
  margin-top: 10px;
  font-size: 13px;
  min-height: 20px;
}