/* 青阳命理 - 高雅专业主题（含 10 套预制配色，JS 切换） */
/* 基础变量：默认「墨玉鎏金」》
*  通过 html[data-theme="xxx"] 切换整套配色
*/
:root {
  --bg: #eef0f3;
  --bg-soft: #e2e5ea;
  --card: #ffffff;
  --card-solid: #ffffff;
  --line: rgba(120,130,145,.18);
  --line-strong: rgba(120,130,145,.36);
  --ink: #1f2a44;
  --text: #33405c;
  --text-soft: #7b8598;
  --text-faint: #b2b9c6;
  --gold: #b08d4f;
  --gold-deep: #96742f;
  --gold-pale: #e7d8ba;
  --jade: #5b8f78;
  --jade-deep: #3f7f6d;
  --accent: #a24444;
  --accent-soft: rgba(162,68,68,.12);
  --shadow: 0 10px 34px rgba(50,60,80,.10);
  --radius: 16px;
  --radius-sm: 10px;
  --wx-gold: #b08d4f; --wx-wood: #5b8f78; --wx-water: #5b7f9e; --wx-fire: #c06a5a; --wx-earth: #a4875b;
}

/* ============ 20 高端纯色主题（纯色，无渐变） ============ */
html[data-theme="ink"]{
  --bg:#eef0f3; --bg-soft:#e2e5ea; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(60,74,110,.18); --line-strong:rgba(60,74,110,.38);
  --ink:#1f2a44; --text:#33405c; --text-soft:#7b8598; --text-faint:#b2b9c6;
  --gold:#b08d4f; --gold-deep:#96742f; --gold-pale:#e7d8ba;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a24444; --accent-soft:rgba(162,68,68,.12);
  --shadow:0 10px 34px rgba(50,60,80,.10); --wx-gold:#b08d4f; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="jade"]{
  --bg:#eaf3ef; --bg-soft:#dcebe3; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(63,127,109,.18); --line-strong:rgba(63,127,109,.38);
  --ink:#1f3f6d; --text:#2e4d5e; --text-soft:#6f8f86; --text-faint:#a4c0b8;
  --gold:#3f9f7d; --gold-deep:#2f8f6d; --gold-pale:#d0ece1;
  --jade:#3f8f6d; --jade-deep:#2f7f5d; --accent:#a06b52; --accent-soft:rgba(160,107,82,.10);
  --shadow:0 10px 34px rgba(52,90,80,.10); --wx-gold:#9c8a4f; --wx-wood:#3f9f7d; --wx-water:#567f9c; --wx-fire:#bf6c5b; --wx-earth:#9a885c;
}
html[data-theme="blue"]{
  --bg:#eaf1f9; --bg-soft:#dce8f4; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(51,85,138,.18); --line-strong:rgba(51,85,138,.38);
  --ink:#22305c; --text:#2e4266; --text-soft:#6f86a8; --text-faint:#a4bcd8;
  --gold:#33558a; --gold-deep:#2f4f7d; --gold-pale:#d3e0f2;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a15f63; --accent-soft:rgba(161,95,99,.10);
  --shadow:0 10px 34px rgba(50,80,120,.12); --wx-gold:#8aa3b8; --wx-wood:#5b8f78; --wx-water:#4f7da6; --wx-fire:#c0786c; --wx-earth:#a8936a;
}
html[data-theme="purple"]{
  --bg:#f1ecf7; --bg-soft:#e4daf0; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(107,79,138,.18); --line-strong:rgba(107,79,138,.38);
  --ink:#352c5c; --text:#453a66; --text-soft:#8f86aa; --text-faint:#c0b6d8;
  --gold:#6b4f8a; --gold-deep:#5f437a; --gold-pale:#e4daf0;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a15f63; --accent-soft:rgba(161,95,99,.10);
  --shadow:0 10px 34px rgba(98,76,120,.12); --wx-gold:#9c866a; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="wine"]{
  --bg:#f4ecee; --bg-soft:#e9dedf; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(125,59,74,.18); --line-strong:rgba(125,59,74,.40);
  --ink:#4a2b38; --text:#5c3a48; --text-soft:#9a7480; --text-faint:#c6a8b0;
  --gold:#8f4a5c; --gold-deep:#7d3b4a; --gold-pale:#e8d2d8;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#9d5244; --accent-soft:rgba(157,82,68,.10);
  --shadow:0 10px 34px rgba(110,60,70,.12); --wx-gold:#a86a61; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#b8634f; --wx-earth:#a4875b;
}
html[data-theme="gold"]{
  --bg:#f6f1e6; --bg-soft:#ece3d0; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(176,141,79,.20); --line-strong:rgba(176,141,79,.42);
  --ink:#4a3a22; --text:#5c4a2c; --text-soft:#a08c6a; --text-faint:#cbbd9a;
  --gold:#b08d4f; --gold-deep:#96742f; --gold-pale:#eadcb8;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#9d6a44; --accent-soft:rgba(157,106,68,.10);
  --shadow:0 10px 34px rgba(140,120,70,.10); --wx-gold:#b08d4f; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="silver"]{
  --bg:#f0f1f4; --bg-soft:#e3e5ea; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(143,155,179,.20); --line-strong:rgba(143,155,179,.42);
  --ink:#2f3a4c; --text:#3e4a5e; --text-soft:#8f97ab; --text-faint:#b9c0d0;
  --gold:#8f9bb3; --gold-deep:#7b8aa0; --gold-pale:#dde1eb;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a06b72; --accent-soft:rgba(160,107,114,.10);
  --shadow:0 10px 34px rgba(110,120,145,.10); --wx-gold:#9c9a6a; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="obsidian"]{
  --bg:#24262c; --bg-soft:#2a2e38; --card:#2e323c; --card-solid:#33384a;
  --line:rgba(200,205,215,.14); --line-strong:rgba(200,205,215,.28);
  --ink:#eef1f8; --text:#d5dae6; --text-soft:#9ca5b3; --text-faint:#6f7887;
  --gold:#c9a95d; --gold-deep:#ab9148; --gold-pale:#3a3f50;
  --jade:#7fae89; --jade-deep:#5c8a66; --accent:#cf7a6c; --accent-soft:rgba(207,122,108,.14);
  --shadow:0 12px 36px rgba(0,0,0,.42); --wx-gold:#c9a95d; --wx-wood:#7fae89; --wx-water:#7ba3c4; --wx-fire:#d7816f; --wx-earth:#b0975f;
}
html[data-theme="tea"]{
  --bg:#eef1e8; --bg-soft:#dfe5d7; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(74,90,63,.18); --line-strong:rgba(74,90,63,.38);
  --ink:#2f3d22; --text:#3e4d2e; --text-soft:#7f9272; --text-faint:#adc0a4;
  --gold:#5f7f4a; --gold-deep:#4a6a3a; --gold-pale:#dce8d2;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a2675f; --accent-soft:rgba(162,103,95,.10);
  --shadow:0 10px 34px rgba(60,90,50,.10); --wx-gold:#a0914f; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="scerlet"]{
  --bg:#f6eaec; --bg-soft:#e9d7da; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(138,47,47,.18); --line-strong:rgba(138,47,47,.40);
  --ink:#4a2222; --text:#5c3030; --text-soft:#9a6a6a; --text-faint:#c6a0a0;
  --gold:#8a2f2f; --gold-deep:#7a2020; --gold-pale:#ecd2d4;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a24444; --accent-soft:rgba(162,68,68,.12);
  --shadow:0 10px 34px rgba(110,40,40,.12); --wx-gold:#b06a5a; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c05a4f; --wx-earth:#a4875b;
}
html[data-theme="yan"]{
  --bg:#f8eef0; --bg-soft:#edd6da; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(176,79,106,.18); --line-strong:rgba(176,79,106,.40);
  --ink:#4a2e3f; --text:#5c3a4e; --text-soft:#9a7487; --text-faint:#c6a0b0;
  --gold:#b04f6a; --gold-deep:#9a3f58; --gold-pale:#ecd2dc;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a2565f; --accent-soft:rgba(162,86,95,.10);
  --shadow:0 10px 34px rgba(150,60,80,.12); --wx-gold:#c07a6a; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="lu"]{
  --bg:#ebf4f0; --bg-soft:#dbe9e2; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(47,143,106,.18); --line-strong:rgba(47,143,106,.38);
  --ink:#1f4d3c; --text:#2f5e4a; --text-soft:#6f9a87; --text-faint:#a0c3b2;
  --gold:#2f8f6a; --gold-deep:#2f7f5c; --gold-pale:#d2ece0;
  --jade:#5b9f7d; --jade-deep:#3f8f66; --accent:#a06b52; --accent-soft:rgba(160,107,82,.10);
  --shadow:0 10px 34px rgba(50,110,80,.12); --wx-gold:#a0914f; --wx-wood:#4a9f6e; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="dai"]{
  --bg:#eef3f0; --bg-soft:#e0e9e3; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(63,127,109,.18); --line-strong:rgba(63,127,109,.38);
  --ink:#1f3f3c; --text:#2f5250; --text-soft:#7b9a8c; --text-faint:#a4c0b8;
  --gold:#3f7f6d; --gold-deep:#2f6d5c; --gold-pale:#d2ece4;
  --jade:#5b9f7d; --jade-deep:#3f8f66; --accent:#a0675a; --accent-soft:rgba(160,103,90,.10);
  --shadow:0 10px 34px rgba(50,100,90,.12); --wx-gold:#a09a6f; --wx-wood:#5b9f7d; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="wu"]{
  --bg:#f4efe9; --bg-soft:#e5ded4; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(107,74,63,.20); --line-strong:rgba(107,74,63,.42);
  --ink:#3f2f22; --text:#4a3a2e; --text-soft:#9a8872; --text-faint:#c6b29a;
  --gold:#6b4a3f; --gold-deep:#5f3f33; --gold-pale:#e8dbd0;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a2675f; --accent-soft:rgba(162,103,95,.10);
  --shadow:0 10px 34px rgba(90,70,50,.12); --wx-gold:#a08a5f; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="ying"]{
  --bg:#fdeef2; --bg-soft:#f7dce5; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(224,138,160,.20); --line-strong:rgba(224,138,160,.42);
  --ink:#5c2e3f; --text:#6e3a4f; --text-soft:#b08897; --text-faint:#d8b4c0;
  --gold:#d98ba0; --gold-deep:#c06a80; --gold-pale:#f7dde4;
  --jade:#7aab8a; --jade-deep:#5f9473; --accent:#c96d84; --accent-soft:rgba(201,109,132,.12);
  --shadow:0 10px 34px rgba(190,90,120,.12); --wx-gold:#c98a72; --wx-wood:#7aab84; --wx-water:#7b9cc4; --wx-fire:#d97f6c; --wx-earth:#b39470;
}
html[data-theme="qing"]{
  --bg:#eaf3f9; --bg-soft:#dbe9f4; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(63,139,176,.18); --line-strong:rgba(63,139,176,.38);
  --ink:#1f3f4f; --text:#2e5a6e; --text-soft:#6f9ab0; --text-faint:#a4c4d8;
  --gold:#3f8bb0; --gold-deep:#2f7a9a; --gold-pale:#cfe4f0;
  --jade:#5b9f8a; --jade-deep:#3f8a6a; --accent:#a2675f; --accent-soft:rgba(162,103,95,.10);
  --shadow:0 10px 34px rgba(50,110,140,.12); --wx-gold:#8ab0b0; --wx-wood:#5b9f8a; --wx-water:#4f9dba; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="shuang"]{
  --bg:#f7f4ec; --bg-soft:#ede8d8; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(192,180,138,.20); --line-strong:rgba(192,180,138,.42);
  --ink:#4a3f2e; --text:#5c4f3a; --text-soft:#a0987f; --text-faint:#c9c0a4;
  --gold:#c0b48a; --gold-deep:#a89a6a; --gold-pale:#eae4d2;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a28a5f; --accent-soft:rgba(162,138,95,.10);
  --shadow:0 10px 34px rgba(140,130,90,.10); --wx-gold:#b0a05f; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="xia"]{
  --bg:#f4eef4; --bg-soft:#e8dce9; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(154,107,138,.18); --line-strong:rgba(154,107,138,.40);
  --ink:#4a2f4c; --text:#5c3a5e; --text-soft:#9a7f9b; --text-faint:#c6a4c6;
  --gold:#9a6b8a; --gold-deep:#875a7a; --gold-pale:#ecd4e4;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a2675f; --accent-soft:rgba(162,103,95,.10);
  --shadow:0 10px 34px rgba(130,80,120,.12); --wx-gold:#b08a6a; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="yue"]{
  --bg:#eef2f7; --bg-soft:#e1e7f0; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(95,127,158,.18); --line-strong:rgba(95,127,158,.38);
  --ink:#26384c; --text:#33465f; --text-soft:#7b93a2; --text-faint:#a9c1d0;
  --gold:#5f8baa; --gold-deep:#4a7a9a; --gold-pale:#d3e4ef;
  --jade:#5b9f8a; --jade-deep:#3f8a6a; --accent:#a2675f; --accent-soft:rgba(162,103,95,.10);
  --shadow:0 10px 34px rgba(55,90,120,.12); --wx-gold:#8aa3b0; --wx-wood:#5b9f8a; --wx-water:#4f9dba; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}
html[data-theme="xing"]{
  --bg:#e9edf7; --bg-soft:#d8def0; --card:#ffffff; --card-solid:#ffffff;
  --line:rgba(74,90,138,.18); --line-strong:rgba(74,90,138,.38);
  --ink:#2c335f; --text:#3a446e; --text-soft:#8f9ab5; --text-faint:#b8c2d8;
  --gold:#4a5a8a; --gold-deep:#3f4f7a; --gold-pale:#d8dff0;
  --jade:#5b8f78; --jade-deep:#3f7f6d; --accent:#a26b6b; --accent-soft:rgba(162,107,107,.10);
  --shadow:0 10px 34px rgba(60,75,130,.12); --wx-gold:#8a8ab0; --wx-wood:#5b8f78; --wx-water:#5b7f9e; --wx-fire:#c06a5a; --wx-earth:#a4875b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Serif SC", serif; background: var(--bg); color: var(--text); min-height: 100%; }
body {
  background: var(--bg);
  background-attachment: fixed;
  padding-bottom: 92px; -webkit-font-smoothing: antialiased;
  transition: background .5s, color .3s;
}
a { color: var(--gold-deep); text-decoration: none; }
.hidden { display: none !important; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* 滚动条 */
body::-webkit-scrollbar { width: 9px; }
body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }
body::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--card-solid);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--gold-deep);
  border: 1px solid var(--line-strong); border-radius: 12px;
  font-size: 21px; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.brand .site-name { font-size: 19px; font-weight: 700; letter-spacing: 2px; color: var(--ink); }
.brand .site-name small { display: block; font-size: 11px; color: var(--text-soft); letter-spacing: 1px; font-weight: 400; }
.top-actions { display: flex; align-items: center; gap: 10px; }

/* 主题切换 */
.theme-select { display: flex; align-items: center; gap: 7px; }
.theme-select .bi { color: var(--gold-deep); font-size: 16px; }
.theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 22px;
  background: var(--card-solid);
  color: var(--text); font-size: 13px; cursor: pointer; transition: all .2s;
}
.theme-btn:hover { border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-btn select { border: none; background: transparent; color: var(--text); font-size: 13px; outline: none; cursor: pointer; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; overflow-x: auto;
  background: var(--card-solid);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 65px; z-index: 50;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1; min-width: 92px; padding: 14px 8px;
  background: transparent; border: none;
  color: var(--text-soft); font-size: 14px; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap;
  position: relative; transition: color .2s;
}
.tab .bi { margin-right: 5px; font-size: 15px; vertical-align: -1px; }
.tab.active { color: var(--gold-deep); border-bottom-color: var(--gold-deep); font-weight: 700; }
.tab.active::after { content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 6px var(--gold-deep); }

/* ---------- Content / Cards ---------- */
.content { padding: 18px; max-width: 780px; margin: 0 auto; }
.panel { display: none; }
.panel.view.active { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow);
  position: relative;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 3px;
  background: var(--gold);
  opacity: .55; border-radius: 0 0 4px 4px;
}
.card-title {
  font-size: 16.5px; color: var(--ink); margin-bottom: 15px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; letter-spacing: .5px;
}
.card-title .bi { color: var(--gold-deep); margin-right: 7px; font-size: 18px; }
.card-title .tag { font-size: 12px; color: var(--jade-deep); background: var(--accent-soft); padding: 3px 11px; border-radius: 12px; border: 1px solid var(--line); }

/* 空态/提示 */
.empty { text-align: center; color: var(--text-soft); padding: 34px 12px; font-size: 14px; }
.empty .bi { display: block; font-size: 44px; color: var(--text-faint); margin-bottom: 10px; }
.empty-note { color: var(--text-soft); font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
.empty-note .bi { color: var(--gold-deep); margin-right: 4px; }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; color: var(--text); margin-bottom: 7px; font-weight: 600; }
.field label .bi { color: var(--gold-deep); margin-right: 4px; }
.field .hint { font-size: 11px; color: var(--text-soft); font-weight: 400; }
.field input, .field select, .select, .input-full {
  width: 100%; padding: 11px 13px;
  background: color-mix(in srgb, var(--card-solid) 72%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; outline: none;
  transition: border .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .select:focus, .input-full:focus {
  border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .input-full::placeholder { color: var(--text-faint); }
.seg { display: flex; background: color-mix(in srgb, var(--card-solid) 60%, transparent); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { flex: 1; padding: 10px; background: transparent; border: none; color: var(--text-soft); font-size: 14px; cursor: pointer; transition: all .2s; }
.seg-btn.active { background: var(--gold-deep); color: #fff; font-weight: 700; }

.btn-primary, .btn-secondary {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 14px;
  letter-spacing: 2px; transition: all .25s;
}
.btn-primary {
  background: var(--gold-deep);
  color: #fff; box-shadow: 0 5px 18px color-mix(in srgb, var(--gold-deep) 40%, transparent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--gold-deep) 50%, transparent); }
.btn-primary:disabled { opacity: .6; transform: none; }
.btn-secondary { background: color-mix(in srgb, var(--card-solid) 60%, transparent); color: var(--gold-deep); border: 1px solid var(--gold-deep); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-block { width: 100%; }
.btn-ghost {
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 20px;
  color: var(--text-soft); background: transparent; font-size: 13px; cursor: pointer;
  transition: all .25s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost .bi { font-size: 15px; }
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); background: var(--accent-soft); }
.form-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-inline input[type="number"] { width: 100%; padding: 10px; background: color-mix(in srgb, var(--card-solid) 70%, transparent); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); }

/* ---------- Hero ---------- */
.hero {
  display: flex; align-items: center; gap: 17px;
  background: color-mix(in srgb, var(--gold-pale) 32%, var(--card-solid));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 22px 20px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.hero::before { content: ""; position: absolute; top: -45%; right: -15%; width: 60%; height: 200%; background: color-mix(in srgb, var(--gold) 10%, transparent); transform: rotate(20deg); }
.hero-icon {
  width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--gold-deep);
  border: 1px solid var(--line-strong); border-radius: 14px;
  font-size: 30px; color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--gold-deep) 40%, transparent);
}
.hero-text h1 { font-size: 25px; font-weight: 800; letter-spacing: 4px; color: var(--ink); margin: 0; }
.hero-text p { font-size: 13px; color: var(--text-soft); margin-top: 6px; letter-spacing: 1px; }
.hero-deco { position: absolute; right: 20px; bottom: 13px; font-size: 12px; color: var(--gold-deep); opacity: .75; font-style: italic; }
@media (max-width: 480px) { .hero-deco { display: none; } .hero-text h1 { font-size: 20px; } }

/* ---------- 命盘展示 ---------- */
.bazi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 8px; }
.bazi-col {
  background: color-mix(in srgb, var(--card-solid) 65%, transparent);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 6px;
  text-align: center; position: relative; transition: all .2s;
}
.bazi-col:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bazi-col .col-head { font-size: 12px; color: var(--gold-deep); margin-bottom: 9px; font-weight: 700; }
.bazi-col .gz { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.bazi-col .ss { font-size: 12px; color: var(--gold-deep); margin-top: 4px; }
.bazi-col .hid { font-size: 11px; color: var(--text-soft); margin-top: 6px; line-height: 1.4; }
.bazi-col .nayin { font-size: 11px; color: var(--jade-deep); margin-top: 6px; }
.bazi-col.day { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-pale), 0 6px 18px color-mix(in srgb, var(--gold) 26%, transparent); }
.bazi-col.day .col-head { color: var(--gold-deep); }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; font-size: 12px; color: var(--text-soft); }
.meta-row span { background: color-mix(in srgb, var(--card-solid) 55%, transparent); padding: 5px 12px; border-radius: 14px; border: 1px solid var(--line); }
.meta-row span .bi { color: var(--jade-deep); margin-right: 3px; }

.summary-box {
  margin-top: 15px; background: color-mix(in srgb, var(--gold-pale) 32%, var(--card-solid));
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 15px;
  font-size: 13.5px; line-height: 1.9; color: var(--text);
}
.summary-box b { color: var(--gold-deep); }
.summary-box .kp-title { color: var(--gold-deep); font-weight: 700; margin-bottom: 4px; }
.summary-box .kp-title .bi { margin-right: 4px; }

/* 信息 chips */
.info-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.chip {
  flex: 1; min-width: 104px; text-align: center; padding: 12px 8px;
  background: var(--card-solid);
  border: 1px solid var(--line); border-radius: 12px; transition: all .2s;
}
.chip:hover { transform: translateY(-2px); border-color: var(--gold-deep); }
.chip .chip-num { font-size: 21px; font-weight: 800; color: var(--gold-deep); }
.chip .chip-label { font-size: 11px; color: var(--text-soft); margin-top: 4px; }

/* 综合解读 */
.interpret-sect { margin-bottom: 13px; }
.interpret-sect h4 { color: var(--gold-deep); font-size: 15px; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.interpret-sect h4 .bi { font-size: 16px; }
.interpret-sect p { color: var(--text); line-height: 1.85; }

/* 五行量化 */
.wx-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 13px; }
.wx-cell { text-align: center; font-size: 12px; color: var(--text-soft); }
.wx-bar { height: 66px; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--card-solid) 55%, transparent); border-radius: 8px; overflow: hidden; position: relative; }
.wx-fill { width: 100%; border-radius: 8px 8px 0 0; transition: height .6s ease; }
.wx-cell .num { font-size: 13px; color: var(--gold-deep); font-weight: 700; margin-top: 5px; }
.wx-cell .lbl { color: var(--text-soft); }

/* 神煞 tag */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 7px 13px; border-radius: 18px; font-size: 13px; background: color-mix(in srgb, var(--card-solid) 60%, transparent); border: 1px solid var(--line-strong); color: var(--text); }
.tag.good { border-color: var(--jade); color: var(--jade-deep); background: color-mix(in srgb, var(--jade) 12%, transparent); }
.tag.bad { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tag.neutral { border-color: var(--gold-deep); color: var(--gold-deep); }
.tag em { font-style: normal; font-size: 11px; opacity: .85; }

/* 大运 */
.dayun-list { display: flex; overflow-x: auto; gap: 9px; padding-bottom: 8px; scrollbar-width: thin; }
.dayun-item { min-width: 84px; background: color-mix(in srgb, var(--card-solid) 62%, transparent); border: 1px solid var(--line); border-radius: 11px; padding: 11px 8px; text-align: center; flex-shrink: 0; transition: all .2s; }
.dayun-item:hover { border-color: var(--gold-deep); transform: translateY(-3px); }
.dayun-item .gz { font-size: 19px; font-weight: 700; color: var(--gold-deep); }
.dayun-item .age { font-size: 11px; color: var(--text-soft); margin-top: 3px; }
.dayun-item .dy-tag { font-size: 11px; margin-top: 4px; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.dy-tag.good { color: var(--jade-deep); background: color-mix(in srgb, var(--jade) 15%, transparent); }
.dy-tag.bad { color: var(--accent); background: var(--accent-soft); }
.dy-tag.mid { color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* 流年 */
.liunian-box { margin-top: 15px; }
.liunian-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--gold-deep); padding-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
.liunian-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.liunian-item:last-child { border-bottom: none; }
.liunian-item .ly-gz { font-weight: 700; color: var(--gold-deep); min-width: 96px; }
.liunian-item .ly-desc { color: var(--text-soft); flex: 1; margin-left: 12px; }
.liunian-item .ly-tag { font-size: 11px; padding: 2px 9px; border-radius: 10px; }
.ly-tag.good { color: var(--jade-deep); border: 1px solid var(--jade); }
.ly-tag.bad { color: var(--accent); border: 1px solid var(--accent); }
.ly-tag.mid { color: var(--gold-deep); border: 1px solid var(--gold-deep); }

/* AI 结果 */
.cond-text { background: color-mix(in srgb, var(--card-solid) 55%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: 14px; line-height: 1.95; color: var(--text); word-break: break-word; }
.cond-text h1,.cond-text h2,.cond-text h3,.cond-text h4 { color: var(--gold-deep); font-size: 16px; margin: 13px 0 7px; }
.cond-text p { margin: 7px 0; }
.cond-text ul,.cond-text ol { margin: 7px 0 7px 20px; }
.cond-text li { margin: 4px 0; }
.cond-text strong { color: var(--gold-deep); }
.cond-text blockquote { border-left: 3px solid var(--gold); padding-left: 11px; color: var(--text-soft); margin: 9px 0; }

/* 历史 */
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 13px; border-bottom: 1px solid var(--line); gap: 8px; }
.history-item:last-child { border-bottom: none; }
.hi-main { font-size: 14px; }
.hi-main .bazi { color: var(--gold-deep); font-weight: 700; }
.hi-sub { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.hi-actions { display: flex; gap: 6px; flex-shrink: 0; }
.hi-actions button { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--card-solid) 62%, transparent); color: var(--text-soft); font-size: 12px; cursor: pointer; }
.hi-actions button:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* 关于 */
.about-text { font-size: 14px; line-height: 1.95; color: var(--text); }
.contact { margin-top: 15px; display: grid; gap: 10px; }
.contact .row { font-size: 14px; color: var(--text-soft); display: flex; align-items: center; gap: 8px; }
.contact .row .bi { color: var(--gold-deep); font-size: 17px; }
.contact b { color: var(--gold-deep); }

/* Footer */
.footer { text-align: center; padding: 22px 10px; color: var(--text-soft); font-size: 12px; letter-spacing: 1px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 12px 22px; border-radius: 22px; font-size: 13px; box-shadow: var(--shadow); opacity: 0; transition: all .3s; pointer-events: none; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 报告导出 */
.report-actions { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.report-actions .btn-ghost { flex: 1; padding: 9px; background: color-mix(in srgb, var(--card-solid) 60%, transparent); border: 1px solid var(--line); color: var(--text-soft); border-radius: 10px; font-size: 13px; cursor: pointer; text-align: center; transition: all .2s; }
.report-actions .btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); transform: translateY(-1px); }

/* 聊天 */
.chat-box { display: flex; gap: 8px; margin-top: 15px; }
.chat-box input { flex: 1; padding: 11px 13px; background: color-mix(in srgb, var(--card-solid) 62%, transparent); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); outline: none; }
.chat-box input:focus { border-color: var(--gold-deep); }
.chat-box button { padding: 11px 20px; background: var(--gold-deep); border: none; border-radius: 10px; color: #fff; font-weight: 700; cursor: pointer; }
.chat-history { margin-top: 10px; display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.chat-msg { font-size: 13px; line-height: 1.7; }
.chat-msg.user { color: var(--text); background: var(--accent-soft); padding: 9px 13px; border-radius: 10px; }
.chat-msg.ai { color: var(--text); }
.chat-msg.ai b { color: var(--gold-deep); }

/* 合婚 */
.hehun-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.hehun-person { background: color-mix(in srgb, var(--card-solid) 55%, transparent); border: 1px solid var(--line-strong); border-radius: 12px; padding: 15px; }
.hehun-person h3 { font-size: 14px; color: var(--gold-deep); margin-bottom: 11px; text-align: center; }
.hehun-person h3 .bi { margin-right: 5px; }
.hehun-person input,.hehun-person select { width: 100%; margin-bottom: 9px; padding: 10px; background: color-mix(in srgb, var(--card-solid) 70%, transparent); border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); }
.hehun-score { text-align: center; padding: 26px; position: relative; }
.hs-num { font-size: 62px; font-weight: 800; color: var(--gold-deep); line-height: 1; text-shadow: 0 0 20px color-mix(in srgb, var(--gold) 40%, transparent); }
.hs-lvl { font-size: 17px; color: var(--gold-deep); margin-top: 8px; font-weight: 700; }

/* 择日 */
.zeri-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 15px; }
.zeri-item { background: color-mix(in srgb, var(--card-solid) 58%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; font-size: 12px; text-align: center; transition: all .2s; }
.zeri-item:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.zeri-item.good { border-color: var(--jade); background: color-mix(in srgb, var(--jade) 13%, transparent); }
.zeri-item .zd { font-size: 17px; font-weight: 700; color: var(--gold-deep); }
.zeri-item .zl { font-size: 13px; margin-top: 4px; color: var(--text-soft); }
.zeri-item.good .zl { color: var(--jade-deep); }
.zeri-item .note { font-size: 11px; color: var(--text-soft); margin-top: 4px; }

/* 姓名 */
.xm-result { margin-top: 15px; }
.xm-chars { display: flex; gap: 10px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.xm-char { text-align: center; padding: 9px 15px; background: color-mix(in srgb, var(--card-solid) 62%, transparent); border: 1px solid var(--line); border-radius: 12px; }
.xm-char .ch { font-size: 36px; font-weight: 700; }
.xm-char .wx { font-size: 12px; color: var(--text-soft); margin-top: 4px; }

/* ---------- 物件(结缘) ---------- */
.product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 15px; }
.product-card { background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; transition: all .25s; display: flex; flex-direction: column; cursor: pointer; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-deep); }
.product-card .pc-img { height: 120px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold-pale) 30%, var(--card-solid)); color: var(--gold-deep); font-size: 46px; position: relative; }
.product-card .pc-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.product-card .pc-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.product-card .pc-wx { font-size: 11px; color: var(--jade-deep); background: color-mix(in srgb, var(--jade) 12%, transparent); display: inline-block; padding: 2px 8px; border-radius: 9px; margin-top: 5px; width: fit-content; }
.product-card .pc-desc { font-size: 12px; color: var(--text-soft); margin-top: 6px; line-height: 1.6; flex: 1; }
.product-card .pc-foot { margin-top: 9px; }
.product-card .pc-price-row { display: flex; align-items: baseline; gap: 6px; }
.product-card .pc-price { font-size: 16px; font-weight: 800; color: var(--accent); }
.product-card .pc-price .off { font-size: 16px; font-weight: 800; color: #e5484d; }
.product-card .pc-price .old { font-size: 12px; color: var(--text-faint); text-decoration: line-through; }
.product-card .pc-price small { font-size: 11px; color: var(--text-soft); }
.product-card .pc-btns { display: flex; gap: 6px; margin-top: 8px; }
.product-card .pc-btns .pc-detail, .product-card .pc-btns .pc-buy { flex: 1; }
.product-card .pc-buy { padding: 7px 10px; background: var(--gold-deep); border: none; color: #fff; border-radius: 8px; font-size: 12px; cursor: pointer; }
.product-card .pc-detail { padding: 7px 10px; background: transparent; border: 1px solid var(--line-strong); color: var(--text-soft); border-radius: 8px; font-size: 12px; cursor: pointer; }
.product-card .pc-detail:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
/* 商品详情弹层（功能11） */
.pd-detail { padding: 6px 4px 18px; }
.pd-detail .pd-close { position: absolute; top: 10px; right: 14px; font-size: 24px; background: none; border: none; color: var(--text-faint); cursor: pointer; line-height: 1; }
.pd-detail .pd-close:hover { color: var(--text); }
.pd-detail .pd-img { height: 150px; display: grid; place-items: center; background: color-mix(in srgb, var(--gold-pale) 30%, var(--card-solid)); color: var(--gold-deep); font-size: 62px; border-radius: 12px; margin-bottom: 16px; }
.pd-detail .pd-name { font-size: 20px; color: var(--ink); font-weight: 800; margin: 0 0 10px; }
.pd-detail .pd-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-detail .pd-price { font-size: 24px; font-weight: 800; color: var(--accent); margin-bottom: 12px; }
.pd-detail .pd-price small { font-size: 12px; color: var(--text-soft); }
.pd-detail .pd-desc { font-size: 14px; color: var(--text); line-height: 1.8; margin-bottom: 16px; }
.pd-detail .pd-link { font-size: 13px; color: var(--text-soft); margin-bottom: 16px; word-break: break-all; }
.pd-detail .pd-link a { color: var(--gold-deep); }
.product-filter { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pf-label { font-size: 12px; color: var(--text-soft); font-weight: 600; margin-right: 2px; flex: none; }
.product-filter button { padding: 6px 14px; border: 1px solid var(--line-strong); background: transparent; border-radius: 20px; font-size: 12px; color: var(--text-soft); cursor: pointer; transition: all .2s; }
.product-filter button.active { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); }

/* ---------- 女性专属 ---------- */
.female-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.feature-card { background: color-mix(in srgb, var(--card-solid) 58%, transparent); border: 1px solid var(--line); border-radius: 13px; padding: 15px; cursor: pointer; transition: all .25s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-deep); }
.feature-card .fc-icon { font-size: 26px; color: var(--gold-deep); margin-bottom: 8px; }
.feature-card .fc-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.feature-card .fc-desc { font-size: 12px; color: var(--text-soft); margin-top: 5px; line-height: 1.6; }

/* ---------- 个人档案 / 出生时辰 区分 ---------- */
.account-box { background: color-mix(in srgb, var(--gold-pale) 32%, transparent); border: 1px dashed var(--gold-deep); border-radius: 13px; padding: 14px; margin-bottom: 14px; }
.birth-box { background: color-mix(in srgb, var(--card-solid) 65%, transparent); border: 1px solid var(--line-strong); border-radius: 13px; padding: 14px; }
.account-head, .birth-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold-deep); margin-bottom: 12px; font-size: 14px; }
.account-head .hint, .birth-head .hint { font-size: 11px; color: var(--text-soft); font-weight: 400; margin-left: 5px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- 主题详情页 ---------- */
.topic-head { }
.topic-req { margin-top: 6px; }
.topic-result { margin-top: 16px; border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.topic-subtitle { color: var(--gold-deep); font-size: 16px; margin: 14px 0 8px; display: flex; align-items: center; gap: 6px; }
.topic-subtitle .bi { font-size: 17px; }
.topic-charts { display: grid; gap: 18px; margin-top: 8px; }
.topic-chart-block { }
.chart-label { font-size: 13px; color: var(--gold-deep); font-weight: 600; margin-bottom: 7px; }
.topic-recommend { margin-top: 10px; }
.topic-rec-head { font-size: 13px; color: var(--text-soft); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.topic-rec-head .bi { color: var(--jade-deep); }
.topic-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

/* ---------- 底部浮动导航 ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; background: var(--card-solid);
  border-top: 1px solid var(--line-strong);
  padding: 8px 0 calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; background: transparent; border: none; color: var(--text-soft); font-size: 11px; cursor: pointer; }
.bn-item .bi { font-size: 21px; }
.bn-item.active { color: var(--gold-deep); font-weight: 700; }
.bn-item.active .bi { transform: translateY(-2px); }

/* ---------- 顾客固定悬浮（常驻不消失，点击弹出客服卡片） ---------- */


/* ---------- 我的 ---------- */
.me-profile { text-align: center; padding: 20px; }
.me-avatar { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: var(--gold-deep); font-size: 36px; color: #fff; }
.me-name { font-size: 18px; font-weight: 700; color: var(--ink); }
.me-sub { font-size: 12px; color: var(--text-soft); margin: 6px 0 14px; }
.me-login { text-align: center; padding: 24px 10px; }
.me-login-icon { font-size: 52px; color: var(--gold-deep); margin-bottom: 12px; }
.me-login h3 { color: var(--ink); margin-bottom: 6px; }
.me-login-form { max-width: 300px; margin: 18px auto 0; text-align: left; }
.me-login-form .field { margin-bottom: 13px; }
.me-login-form .btn-primary { margin-top: 8px; }
.me-login-form .btn-ghost { margin-top: 14px; width: 100%; justify-content: center; }
.me-login-form .reg-form { margin-top: 6px; }
.me-login-form .reg-form .btn-primary { margin-top: 8px; }
.me-tabs { display: flex; gap: 8px; margin: 18px 0 14px; border-bottom: 1px solid var(--line); }
.me-tab { flex: 1; padding: 10px; background: transparent; border: none; color: var(--text-soft); font-size: 14px; border-bottom: 3px solid transparent; cursor: pointer; }
.me-tab.active { color: var(--gold-deep); border-bottom-color: var(--gold-deep); font-weight: 700; }
.me-content { }
.me-order, .me-record { border-bottom: 1px solid var(--line); padding: 13px 0; }
.me-order .mo-head { display: flex; justify-content: space-between; }
.me-order .mo-no { font-family: monospace; color: var(--text-soft); font-size: 12px; }
.me-order .mo-status { font-size: 12px; color: var(--accent); }
.me-order .mo-status.paid { color: var(--jade-deep); }
.me-order .mo-body { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.me-order .mo-sub { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.me-order .mo-ship { font-size: 12px; color: var(--gold-deep); margin-top: 4px; }
.me-record { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.me-profile-detail .row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }

/* ---------- 支付 ---------- */
.pay-modal { position: fixed; inset: 0; z-index: 120; display: none; }
.pay-modal.show { display: block; }
.pay-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.pay-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card-solid); border-radius: 22px 22px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; animation: fadeUp .3s ease; }
.pay-head { font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pay-head .bi { color: var(--gold-deep); font-size: 20px; }
.pay-prod { background: color-mix(in srgb, var(--gold-pale) 30%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.pp-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.pp-wx { font-size: 12px; color: var(--jade-deep); margin-top: 5px; }
.pp-price { font-size: 22px; font-weight: 800; color: var(--accent); margin-top: 8px; }
.pay-form .field { margin-bottom: 12px; }
.pay-form textarea { width: 100%; padding: 11px 13px; background: color-mix(in srgb, var(--card-solid) 72%, transparent); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; outline: none; resize: vertical; font-family: inherit; transition: border .2s, box-shadow .2s; }
.pay-form textarea:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.pay-form textarea::placeholder { color: var(--text-faint); }
.pay-success .ps-icon { width: 78px; height: 78px; margin: 6px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--jade); color: #fff; font-size: 44px; box-shadow: 0 8px 22px color-mix(in srgb, var(--jade) 45%, transparent); }
.pay-intermediate .pi-logo { width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 28px; }
.pay-auth { background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 11px; padding: 13px; margin-bottom: 12px; }
.pay-auth.hidden { display: none; }
.pay-methods { display: flex; gap: 10px; margin-bottom: 12px; }
.pay-method { flex: 1; padding: 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--text-soft); font-size: 14px; cursor: pointer; transition: all .2s; }
.pay-method.active { border-color: var(--gold-deep); color: var(--gold-deep); background: var(--accent-soft); font-weight: 700; }
.pay-ship-note { font-size: 12px; color: var(--gold-deep); text-align: center; margin-bottom: 12px; }

/* 图表 */
.chart { width: 100%; }
.chart-note { font-size: 12px; color: var(--text-soft); margin-top: 8px; text-align: center; }
.chart-empty { text-align: center; color: var(--text-soft); padding: 60px 16px; }
.chart-empty .bi { display: block; font-size: 52px; color: var(--text-faint); margin-bottom: 12px; }
.chart-empty p { font-size: 15px; margin-bottom: 10px; }
.chart-empty .tip { font-size: 13px; color: var(--text-soft); }

/* 加载 */
.loading { text-align: center; padding: 22px; color: var(--gold-deep); font-size: 14px; }
.spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--gold-deep); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 客服浮动（常驻右下角，点开卡片） */
.customer-bar { position: fixed; left: auto; right: 12px; bottom: 86px; z-index: 90; }
.cb-fab { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-deep); color: #fff; font-size: 23px; box-shadow: 0 8px 22px color-mix(in srgb, var(--gold-deep) 40%, transparent); border: 1px solid rgba(255,255,255,.25); cursor: pointer; transition: all .2s; margin-left: auto; }
.cb-fab:hover { transform: translateY(-2px); }
.cb-card { position: fixed; right: 12px; bottom: 150px; z-index: 91; width: 250px; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 16px 44px rgba(30,40,60,.22); padding: 14px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: all .22s; }
.cb-card.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cb-card h4 { font-size: 14px; color: var(--ink); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.cb-card h4 .bi { color: var(--gold-deep); }
.cb-item { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 9px; text-decoration: none; color: var(--text); transition: background .15s; }
.cb-item:hover { background: color-mix(in srgb, var(--gold-deep) 9%, transparent); }
.cb-item .bi { font-size: 18px; color: var(--gold-deep); flex: none; }
.cb-item .cb-ic { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cb-item .cb-ic b { font-size: 12px; color: var(--text-soft); font-weight: 600; }
.cb-item .cb-ic span { font-size: 13px; color: var(--text); word-break: break-all; }
.cb-item .cb-copy { font-size: 11px; color: var(--gold-deep); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 8px; flex: none; cursor: pointer; background: transparent; }
.cb-item .cb-copy:hover { background: var(--gold-deep); color: #fff; }
.cb-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-faint); font-size: 18px; cursor: pointer; }
.cb-close:hover { color: var(--text); }

/* 响应式 */
@media (max-width: 520px) {
  .form-grid, .hehun-form, .account-grid { grid-template-columns: 1fr; }
  .form-inline { grid-template-columns: 1fr; }
  .female-features { grid-template-columns: 1fr; }
  .bazi-col .gz { font-size: 24px; }
  .brand .site-name { font-size: 16px; }
  .theme-btn span { display: none; }
  .topic-recommend { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* 打印 */
@media print {
  .topbar,.tabs,.footer,.report-actions,.chat-box,.btn-primary,.btn-secondary,.customer-bar,.theme-btn,.bottom-nav,.pay-modal { display: none !important; }
  body { background: #fff; color: #000; background-attachment: initial; padding-bottom: 0; }
  .card { border: none; box-shadow: none; background: #fff; }
  .card::before { display: none; }
  .bazi-col { background: #f6f0e6; border-color: #ddd; }
  .summary-box { background: #faf3e6; border-color: #ccc; color: #000; }
  .cond-text { background: #fff; }
}