/* GEO Overseas Brand Diagnosis — light theme, purple primary */
:root {
  --primary: #7C5CFC;
  --primary-dark: #6A4DF4;
  --primary-light: #EFECFE;
  --bg: #F4F3FC;
  --card: #FFFFFF;
  --text: #23233B;
  --text-2: #6B6B85;
  --text-3: #9C9CB4;
  --border: #ECEAF6;
  --green: #22B573;
  --red: #E5484D;
  --orange: #F59E0B;
  --blue: #3B82F6;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(35, 35, 90, .06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans", "Noto Sans Thai", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; outline: none; }
a { color: var(--primary); text-decoration: none; }

/* ---------- top bar ---------- */
.topbar {
  height: 52px; background: var(--card); display: flex; align-items: center;
  padding: 0 20px; gap: 18px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.logo-badge {
  background: linear-gradient(135deg, #7C5CFC, #9F7BFF); color: #fff; font-weight: 800;
  border-radius: 8px; padding: 4px 9px; font-size: 13px; letter-spacing: .5px;
}
.topbar .app-name { font-weight: 700; font-size: 15px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.top-item { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 13px; cursor: pointer; }
.top-item:hover { color: var(--primary); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.role-tag { background: #FFF3E0; color: #E8890C; font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.lang-select {
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 13px;
  color: var(--text-2); background: var(--card);
}

/* ---------- layout ---------- */
.layout { display: flex; min-height: calc(100vh - 52px); }
.sidebar {
  width: 220px; background: var(--card); border-right: 1px solid var(--border);
  padding: 16px 12px; flex-shrink: 0;
}
.main { flex: 1; padding: 28px 36px; min-width: 0; }

.btn {
  border: none; border-radius: 9px; padding: 9px 16px; font-size: 13.5px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary {
  background: linear-gradient(135deg, #7C5CFC, #9F7BFF); color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(124, 92, 252, .3);
}
.btn-primary:hover { color: #fff; filter: brightness(1.05); }
.btn-ghost-danger { color: var(--red); background: none; border: none; font-size: 12.5px; padding: 4px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }

/* ---------- sidebar (home) ---------- */
.btn-new {
  width: 100%; padding: 11px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #7C5CFC, #9F7BFF); color: #fff; font-size: 14px;
  box-shadow: 0 4px 12px rgba(124, 92, 252, .3);
}
.date-row { display: flex; align-items: center; gap: 8px; margin: 14px 2px; color: var(--text-3); font-size: 12.5px; }
.search-box { position: relative; margin-bottom: 18px; }
.search-box input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px 8px 30px; font-size: 13px;
}
.search-box::before { content: "🔍"; position: absolute; left: 9px; top: 7px; font-size: 12px; opacity: .5; }
.history-title { font-size: 13px; color: var(--text-2); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.history-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .15s;
}
.history-item:hover { box-shadow: var(--shadow); border-color: var(--primary-light); }
.history-item .h-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.history-item .h-meta { color: var(--text-3); font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; }
.history-item .h-del { margin-left: auto; opacity: .35; font-size: 12px; cursor: pointer; }
.history-item:hover .h-del { opacity: 1; }
.history-item .h-del:hover { color: var(--red); }
.side-icon {
  width: 20px; height: 20px; border-radius: 6px; background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

/* ---------- home main ---------- */
.home-title { text-align: center; font-size: 22px; font-weight: 700; margin: 26px 0 8px; }
.home-sub { text-align: right; color: var(--primary); font-size: 13px; margin-bottom: 14px; }
.diag-card {
  background: var(--card); border-radius: 16px; padding: 22px 26px 26px; max-width: 860px; margin: 0 auto;
  box-shadow: var(--shadow);
}
.brand-input-row { display: flex; gap: 10px; align-items: center; }
.brand-search-status {
  background: #F1EDFE; color: var(--primary-dark); border-radius: 9px;
  padding: 10px 16px; margin-top: 14px; text-align: center; font-size: 13px;
}
.brand-search-status.fail { background: #FDECEC; color: var(--red); }
.brand-input {
  flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; font-size: 14px;
  background: #FAFAFE;
}
.brand-input:focus { border-color: var(--primary); }
/* 品牌探测进行中：输入框灰置不可编辑 */
.brand-input.is-busy {
  background: #F0F0F6; color: var(--text-3, #9C9CB4);
  cursor: not-allowed; border-color: var(--border);
}
.send-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none; font-size: 17px;
  background: linear-gradient(135deg, #7C5CFC, #9F7BFF); color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.send-btn:disabled { cursor: not-allowed; }
/* 箭头按钮加载态：三个跳动圆点 */
.ldots { display: inline-flex; gap: 3px; align-items: center; }
.ldots i {
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  animation: ldots 1.1s infinite ease-in-out;
}
.ldots i:nth-child(2) { animation-delay: .16s; }
.ldots i:nth-child(3) { animation-delay: .32s; }
@keyframes ldots {
  0%, 80%, 100% { opacity: .3; transform: scale(.75); }
  40% { opacity: 1; transform: scale(1); }
}
.platform-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; justify-content: center; }
.platform-tile {
  width: 92px; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  background: var(--card); transition: all .15s; user-select: none;
}
.platform-tile:hover { border-color: var(--primary-light); }
.platform-tile.active { border-color: var(--primary); background: #F8F6FF; }
.p-avatar {
  width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px; margin-bottom: 2px;
}
.p-name { font-weight: 600; font-size: 12.5px; }
.p-devices { display: flex; flex-direction: column; gap: 1px; }
.p-devices label { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 3px; cursor: pointer; }
.mode-row { display: flex; justify-content: center; gap: 22px; margin-top: 20px; font-size: 13px; color: var(--text-2); }
.mode-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.mode-row input { accent-color: var(--primary); }
.start-hint { text-align: center; color: var(--text-3); font-size: 12.5px; margin-top: 16px; }
.platform-status-note { text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
.live-dot { color: var(--green); }
.sim-dot { color: var(--orange); }

/* ---------- config page ---------- */
.cfg-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.cfg-section { margin-bottom: 22px; }
.cfg-section-title { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.cfg-section-hint { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.cfg-card { background: var(--card); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.form-item label { font-size: 12.5px; color: var(--text-2); display: block; margin-bottom: 5px; }
.form-item .fi-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.text-input, .area-input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.area-input { min-height: 64px; resize: vertical; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; background: var(--primary-light); color: var(--primary-dark);
  border-radius: 6px; padding: 3px 8px; font-size: 12px; margin: 2px 4px 2px 0;
}
.tag .x { cursor: pointer; opacity: .6; }
.tag .x:hover { opacity: 1; }
.mini-link { color: var(--primary); font-size: 12px; cursor: pointer; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-table th { text-align: left; color: var(--text-3); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cfg-table td { padding: 9px 10px; border-bottom: 1px solid #F4F3FB; vertical-align: middle; }
.cfg-table tr:hover td { background: #FAFAFE; }
.user-cell { display: flex; align-items: center; gap: 8px; }
.user-cell .avatar { flex-shrink: 0; }
.user-cell .user-name { line-height: 1.3; white-space: nowrap; }
.qcat-row {
  background: #F7F6FE; border-radius: 9px; padding: 8px 14px; margin: 10px 0 4px;
  font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 10px;
}
.qcat-row b { color: var(--primary-dark); }
.q-input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; width: 100%; }
.type-select { border: 1px solid var(--border); border-radius: 7px; padding: 5px 6px; font-size: 12.5px; color: var(--text-2); }
.vol-input { border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; width: 74px; text-align: right; }
.cfg-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }
.link-btn { color: var(--primary); background: none; border: none; font-size: 12.5px; }

/* ---------- progress page ---------- */
.pg-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pg-header h2 { font-size: 18px; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { background: var(--card); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); }
.stat-card .sc-val { font-size: 24px; font-weight: 800; }
.stat-card .sc-val small { font-size: 14px; font-weight: 600; }
.stat-card .sc-label { color: var(--text-3); font-size: 12px; margin-top: 3px; }
.pg-qcard { background: var(--card); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.pg-qitem { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; flex-wrap: wrap; }
.q-badge { background: var(--primary-light); color: var(--primary-dark); border-radius: 5px; font-size: 11px; padding: 1px 7px; }
.vol-badge { background: #FFF3E0; color: #E8890C; border-radius: 5px; font-size: 11px; padding: 1px 7px; }
.type-badge { border: 1px solid var(--border); color: var(--text-3); border-radius: 5px; font-size: 11px; padding: 1px 7px; }
.plat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.plat-card { background: var(--card); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.plat-card .pc-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.pc-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); padding: 3px 0; }
.pc-row b { color: var(--text); }
.progress-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progress-bar > div { height: 100%; background: linear-gradient(90deg, #7C5CFC, #9F7BFF); border-radius: 3px; transition: width .4s; }

/* ---------- report ---------- */
.report-topbar {
  height: 50px; background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 18px; gap: 14px; font-size: 13px;
}
.report-topbar .rt-title { font-weight: 600; color: var(--text-2); }
.report-layout { display: flex; }
.report-nav {
  width: 190px; background: var(--card); border-right: 1px solid var(--border); padding: 18px 10px;
  flex-shrink: 0; align-self: flex-start; position: sticky; top: 50px; max-height: calc(100vh - 50px); overflow: auto;
}
.rn-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  color: var(--text-2); font-size: 13px; margin-bottom: 2px;
}
.rn-item:hover { background: #F7F6FE; }
.rn-item.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.report-body { flex: 1; padding: 22px 30px 60px; min-width: 0; }
.rp-section { background: var(--card); border-radius: 14px; padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow); }
.rp-sec-title {
  font-size: 16px; font-weight: 700; border-left: 4px solid var(--primary); padding-left: 10px; margin-bottom: 6px;
}
.rp-sec-desc { color: var(--text-3); font-size: 12px; margin-bottom: 14px; }
.rp-sub-title { font-size: 13.5px; font-weight: 700; margin: 16px 0 8px; color: var(--text); }
.meta-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.meta-item { font-size: 13px; margin-bottom: 10px; }
.meta-item .mi-label { color: var(--text-3); font-size: 12px; }
.meta-score-card { background: #FAFAFE; border-radius: 10px; padding: 12px 16px; }
.meta-score-card .msc-val { font-size: 26px; font-weight: 800; color: var(--primary); }
.meta-score-card .msc-val small { color: var(--text-3); font-size: 12px; font-weight: 400; }
.kw-chip { background: var(--primary-light); color: var(--primary-dark); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; display: inline-block; margin: 3px 6px 3px 0; }
.q-chip { border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; color: var(--text-2); display: inline-block; margin: 3px 6px 3px 0; }
.five-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.five-stats .fs-item { text-align: center; background: #FAFAFE; border-radius: 10px; padding: 12px 6px; }
.five-stats .fs-ico { font-size: 16px; }
.five-stats .fs-val { font-size: 20px; font-weight: 800; margin: 3px 0; }
.five-stats .fs-val small { font-size: 12px; color: var(--text-3); font-weight: 400; }
.five-stats .fs-label { font-size: 11.5px; color: var(--text-3); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.panel-green { background: #F0FAF4; border-radius: 10px; padding: 14px 16px; }
.panel-red { background: #FDF1F1; border-radius: 10px; padding: 14px 16px; }
.panel-title-g { color: var(--green); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.panel-title-r { color: var(--red); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.panel-empty { text-align: center; color: var(--text-3); font-size: 12.5px; padding: 18px 0; }
.summary-box { background: #FAFAFE; border-radius: 10px; padding: 13px 16px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.summary-box b { color: var(--primary-dark); }
.rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-table th { text-align: left; color: var(--text-3); font-weight: 500; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rep-table td { padding: 9px 10px; border-bottom: 1px solid #F4F3FB; white-space: nowrap; }
.rep-table tr.hl td { background: #F8F6FF; }
.bar-track { display: inline-block; width: 110px; height: 8px; background: #EFEDF9; border-radius: 5px; vertical-align: middle; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #6C4CF1, #A88FFF); border-radius: 5px; min-width: 4px; transition: width .4s ease; }
.pill { border-radius: 20px; font-size: 11px; padding: 2px 9px; }
.pill-official { background: #EDE9FE; color: #6D4AD6; }
.pill-qa { background: #E5F8EC; color: #1E9E5A; }
.pill-industry { background: #EEF0F5; color: #6B6B85; }
.pill-media { background: #FDE7EF; color: #D6336C; }
.pill-wiki { background: #E3F2FD; color: #1976D2; }
.pill-gov { background: #FDEBE0; color: #D2691E; }
.pill-wiki2 { background: #E0F7FA; color: #00838F; }
.heat-cell {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
  font-size: 11px; min-width: 42px; height: 26px; padding: 0 4px;
}
.heat-table td, .heat-table th { text-align: center; }
.heat-table td:first-child, .heat-table th:first-child { text-align: left; color: var(--text-2); font-size: 12.5px; }
.advice-card { border: 1px solid var(--border); border-radius: 11px; padding: 13px 16px; margin-bottom: 11px; display: flex; gap: 20px; }
.advice-left { flex: 1; }
.advice-right { width: 46%; border-left: 1px dashed var(--border); padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.advice-cat { font-size: 11px; border-radius: 4px; padding: 1px 8px; margin-bottom: 6px; display: inline-block; }
.cat-content { background: #FDE7EF; color: #D6336C; }
.cat-platform { background: #EDE9FE; color: #6D4AD6; }
.cat-question { background: #FFF3E0; color: #E8890C; }
.cat-cycle { background: #E5F8EC; color: #1E9E5A; }
.advice-t { font-weight: 700; font-size: 13.5px; }
.advice-d { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.6; }
.action-pill { background: var(--primary); color: #fff; border-radius: 5px; font-size: 11px; padding: 2px 9px; margin-bottom: 6px; display: inline-block; }
.donut-wrap { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); margin: 3px 0; }
.legend-sq { width: 10px; height: 10px; border-radius: 3px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.empty-cell { text-align: center; color: var(--text-3); padding: 22px 0; font-size: 12.5px; }
.empty-ico { font-size: 22px; display: block; margin-bottom: 6px; }

/* ---------- auth pages ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F4F3FC 0%, #EDEBFA 55%, #E7E4FB 100%);
  position: relative;
}
.auth-lang { position: absolute; top: 18px; right: 22px; }
.auth-card {
  width: 400px; max-width: 92vw; background: var(--card); border-radius: 18px;
  padding: 32px 34px 28px; box-shadow: 0 12px 40px rgba(35, 35, 90, .10);
}
.auth-logo { text-align: center; margin-bottom: 10px; }
.auth-logo .logo-badge { font-size: 17px; padding: 7px 14px; border-radius: 10px; }
.auth-title { text-align: center; color: var(--text-3); font-size: 12.5px; margin-bottom: 20px; }
.auth-h2 { text-align: center; font-size: 19px; margin-bottom: 20px; }
.auth-field { margin-bottom: 13px; }
.auth-field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; }
.auth-btn { width: 100%; padding: 11px; font-size: 14px; margin-top: 6px; }
.auth-err { color: var(--red); font-size: 12.5px; min-height: 18px; text-align: center; }
.auth-switch { text-align: center; font-size: 12.5px; color: var(--text-3); margin-top: 16px; }
.auth-demo {
  text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 14px;
  background: #FAFAFE; border-radius: 8px; padding: 7px 10px;
}

.ig-result {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ig-result.ig-ok { background: #E9F9F0; color: #0F7B48; border: 1px solid #B7E4CB; }
.ig-result.ig-fail { background: #FFF4F4; color: #B02034; border: 1px solid #F5C6C6; }
.ig-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }

/* modal */
.modal-mask { position: fixed; inset: 0; background: rgba(20, 20, 45, .35); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--card); border-radius: 14px; padding: 22px 26px; width: 420px; max-width: 92vw; }
.modal h3 { margin-bottom: 14px; font-size: 16px; }
.modal .m-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* toast */
.toast {
  position: fixed; top: 66px; left: 50%; transform: translateX(-50%);
  background: rgba(30,30,60,.88); color: #fff; border-radius: 9px; padding: 9px 18px; font-size: 13px; z-index: 200;
}

/* print / PDF */
@media print {
  .topbar, .report-topbar, .report-nav, .no-print, .sidebar { display: none !important; }
  body { background: #fff; }
  .report-body { padding: 0; }
  .rp-section { box-shadow: none; border: 1px solid #eee; page-break-inside: avoid; }
}

/* 官网来源 dropdown panel (品牌诊断配置页) */
.site-src { position: relative; display: inline-block; font-size: 12px; color: var(--text-2, #666); }
.site-src summary { cursor: pointer; list-style: none; white-space: nowrap; color: var(--primary); font-weight: 500; }
.site-src summary::-webkit-details-marker { display: none; }
.site-src-panel {
  position: absolute; right: 0; top: 26px; z-index: 30; width: 230px;
  background: #fff; border: 1px solid var(--line, #ECEAFB); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(60, 40, 160, .12); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.5;
  color: var(--text-2, #555); text-align: left; word-break: break-all;
}

/* ---------- credits ---------- */
.credit-chip { gap: 7px !important; background: var(--primary-light); border-radius: 999px; padding: 3px 10px; }
.credit-chip b { color: var(--primary-dark); font-size: 13.5px; }
.credit-chip:hover { background: #E4DEFD; color: var(--primary-dark); }
.credit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; margin-left: 2px; }
.credit-checkin { padding: 2px 8px !important; font-size: 11.5px !important; border-radius: 999px !important; }
.credit-cost-hint { color: var(--text-3); font-size: 12.5px; }
.credit-low {
  position: fixed; left: 50%; top: 96px; transform: translateX(-50%); z-index: 999;
  width: min(420px, calc(100vw - 40px));
  background: #fff; border: 1px solid #F4C7C9; border-left: 4px solid var(--red);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(60, 40, 160, .16); padding: 14px 16px;
}
.credit-low .cl-title { font-weight: 700; font-size: 14px; color: var(--red); margin-bottom: 6px; }
.credit-low .cl-msg { color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.credit-low .cl-actions { display: flex; gap: 8px; margin-top: 12px; }

/* CSS-drawn coin icon (replaces U+1FA99 emoji that shows as tofu on Win10) */
.coin-ico {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -2px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD26E, #F0A62B);
  color: #8A5A00; font-weight: 800; font-family: Arial, sans-serif;
  line-height: 1; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 1px 2px rgba(60, 40, 160, .18);
  flex: none;
}

/* ---------- buy credits modal (wechat QR) ---------- */
.modal-buy { width: 660px; max-width: 94vw; padding: 20px 24px; border-radius: 16px; }
.buy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.buy-head-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.buy-title { font-size: 16.5px; }
.buy-plan { color: var(--text-3); font-size: 12.5px; }
.buy-plan b { color: var(--text-2); }
.buy-limited { font-size: 11px; }
.buy-remain { color: var(--text-3); font-size: 12.5px; }
.buy-remain b { color: var(--primary-dark); }
.buy-close { margin-left: auto; cursor: pointer; color: var(--text-3); font-size: 16px; padding: 2px 6px; border-radius: 6px; }
.buy-close:hover { color: var(--text); background: var(--bg); }
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pack-card {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 10px;
  text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s; background: var(--card);
}
.pack-card:hover { border-color: var(--text-3); }
.pack-card.sel { border-color: var(--text); box-shadow: 0 2px 10px rgba(35, 35, 90, .08); }
.pk-credits { font-size: 21px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pk-yuan { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.pk-tag { color: var(--text-3); font-size: 12px; margin-top: 6px; }
.buy-note { color: var(--text-3); font-size: 12px; margin: 12px 2px 10px; }
.buy-panel {
  display: flex; gap: 14px; align-items: stretch;
  border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #FAFAFE;
}
.buy-qr-box { width: 190px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.buy-qr-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.buy-qr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.buy-qr-grid i { width: 12px; height: 12px; border-radius: 2px; background: var(--border); display: block; }
.buy-qr-hint { color: var(--text-2); font-size: 12px; text-align: center; }
.btn-dark { background: var(--text); color: #fff; border: none; }
.btn-dark:hover { background: #000; color: #fff; }
.buy-qr-img { width: 150px; height: 150px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.buy-qr-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 30px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.buy-qr-amt { font-size: 18px; font-weight: 800; }
.buy-back { color: var(--text-3); font-size: 12px; }
.buy-detail { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.bd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.bd-label { color: var(--text-2); }
.bd-val { font-weight: 700; }
.bd-sub { color: var(--text-3); font-weight: 400; font-size: 12px; }
.bd-total { border-top: 1px dashed var(--border); padding-top: 10px; }
.bd-price { font-size: 22px; font-weight: 800; }
.qty-stepper { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 8px; padding: 3px 6px; }
.qty-btn {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: #fff;
  cursor: pointer; font-size: 14px; color: var(--text-2); line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.qty-btn:hover { border-color: var(--text-3); color: var(--text); }
.qty-val { min-width: 26px; text-align: center; font-weight: 700; }

/* admin wechat QR upload */
.adm-qr-box {
  width: 120px; height: 120px; border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff;
}
.adm-qr-box img { width: 100%; height: 100%; object-fit: contain; }
.adm-qr-empty { color: var(--text-3); font-size: 11.5px; text-align: center; padding: 8px; }

/* ---------- wechat pay native ---------- */
.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  display: inline-block; animation: spin .8s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.buy-waiting { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; }
.buy-manual-tip { color: var(--red); font-size: 12px; text-align: center; }
.chx { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }