/* ============================================================
   故十三 · 外观系统（网页与 App 共用）
   · 4 套皮肤：淡紫（默认）/ 果冻绿 / 护眼纸感 / 夜间
   · 4 档字号：小 92% / 标准 100% / 大 112% / 超大 124%（整站等比缩放）
   · 12 种聊天气泡：b1 ~ b12（照站长给的参考图完整移植）
   设置存 localStorage['gushisan_appearance']；气泡样式另存服务端（别人要看得到）。
   ============================================================ */

/* ---------- 一、皮肤令牌 ---------- */
html[data-theme="lilac"] {
  --p-50:#F6F4FF; --p-100:#EDE9FD; --p-200:#DCD6FB; --p-300:#C3B8F8;
  --p-400:#A99CF7; --p-500:#8E7FF5; --p-600:#7C6CF0; --p-700:#5B4BD6;
  --bg:#F7F6FC; --card:#FFFFFF; --line:#ECE9F7;
  --ink:#2A2640; --body:#635E78; --muted:#A39EB5;
  --gold:#E8C879; --gold-soft:#F2DFAC; --cream:#FFF7E8;
  --t-wall:#F7F6FC; --t-head:#FFFFFF; --t-sheet:#FFFFFF;
}
/* 果冻绿 */
html[data-theme="jelly"] {
  --p-50:#EFF9F3; --p-100:#DFF3E8; --p-200:#C6E9D6; --p-300:#A5DBBF;
  --p-400:#83CFA8; --p-500:#62C293; --p-600:#45B585; --p-700:#2E9A6E;
  --bg:#F1FAF5; --card:#FFFFFF; --line:#DDEFE5;
  --ink:#1F3B2E; --body:#4E6B5C; --muted:#93AD9F;
  --gold:#EFC96B; --gold-soft:#F6E0A6; --cream:#FFFDF3;
  --t-wall:#F1FAF5; --t-head:#FFFFFF; --t-sheet:#FFFFFF;
}
/* 护眼纸感 */
html[data-theme="paper"] {
  --p-50:#FBF5E9; --p-100:#F6EBD7; --p-200:#EEDFC2; --p-300:#DFC79A;
  --p-400:#CDAE72; --p-500:#C09554; --p-600:#A87C3A; --p-700:#8A6224;
  --bg:#F4EDDF; --card:#FBF6EB; --line:#E7DAC1;
  --ink:#4A3B2A; --body:#6B5844; --muted:#A08E76;
  --gold:#C9A227; --gold-soft:#E3CD8A; --cream:#FFF9EC;
  --t-wall:#F4EDDF; --t-head:#FBF6EB; --t-sheet:#FBF6EB;
}
/* 夜间（护眼） */
html[data-theme="night"] {
  --p-50:#23202F; --p-100:#2B2739; --p-200:#38334A; --p-300:#4E4867;
  --p-400:#6E66A0; --p-500:#8E7FF5; --p-600:#9E90F8; --p-700:#B7ACFB;
  --bg:#16151C; --card:#211F2A; --line:#2E2B3A;
  --ink:#ECEAF5; --body:#B9B5CC; --muted:#7C7891;
  --gold:#E8C879; --gold-soft:#8E7A45; --cream:#F3EFE2;
  --t-wall:#16151C; --t-head:#211F2A; --t-sheet:#211F2A;
  /* uni 自带组件的底色也跟着翻 */
  --UI-BG:#211F2A; --UI-BG-1:#1B1A22; --UI-BG-2:#211F2A; --UI-BG-3:#1B1A22;
  --UI-BG-4:#0F0E14; --UI-BG-5:#211F2A;
  --UI-FG:#ECEAF5; --UI-FG-0:rgba(236,234,245,.92); --UI-FG-HALF:rgba(236,234,245,.7);
  --UI-FG-1:rgba(236,234,245,.55); --UI-FG-2:rgba(236,234,245,.35); --UI-FG-3:rgba(236,234,245,.12);
}

/* ---------- 二、字号（整站等比缩放，等价于浏览器缩放） ---------- */
html[data-font="92"]  { zoom: .92; }
html[data-font="112"] { zoom: 1.12; }
html[data-font="124"] { zoom: 1.24; }

/* ---------- 三、把「写死白色」的地方接回主题令牌 ----------
   这些选择器在月光样式里带了 !important，所以这边也必须 !important；
   靠 html[data-theme] 提高特异性来压过它们。 */
html[data-theme] uni-page-head .uni-page-head,
html[data-theme] .uni-page-head { background: var(--card) !important; }
html[data-theme] uni-tabbar { background: var(--card) !important; }
/* uni 的底部导航真正上色的是内层 .uni-tabbar（外层自定义元素只是壳），两个都要盖 */
html[data-theme] .uni-tabbar,
html[data-theme] .uni-tabbar-border { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme] uni-tabbar .uni-tabbar__item.uni-tabbar__item--active .uni-tabbar__label { color: var(--p-600) !important; }
html[data-theme] .search-bar,
html[data-theme] .filter-item { background: var(--card) !important; color: var(--body) !important; }
html[data-theme] .form-card { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme] .input-item, html[data-theme] .input-group,
html[data-theme] .uni-input-wrapper, html[data-theme] #sso-form .sso-row input { background: var(--p-50) !important; color: var(--ink) !important; }
html[data-theme] .input-item:focus-within, html[data-theme] .input-group:focus-within,
html[data-theme] .uni-input-wrapper:focus-within,
html[data-theme] #sso-form .sso-row input:focus { background: var(--card) !important; }
html[data-theme] .course-card, html[data-theme] .teacher-card, html[data-theme] .ranking-item,
html[data-theme] .menu-item, html[data-theme] .uni-card { background: var(--card) !important; border-color: var(--line) !important; }
html[data-theme] .menu-item:active { background: var(--p-50) !important; }
/* 退出登录那颗按钮是 uni 组件，白底写死在组件样式里，要单独盖 */
html[data-theme] .logout-btn, html[data-theme] .logout-btn uni-text {
  background: var(--card) !important; color: var(--p-600) !important;
  border: 1px solid var(--line) !important; }
html[data-theme] .uni-list, html[data-theme] .uni-list-item { background: var(--card) !important; }
html[data-theme] .uni-list-item__container { border-color: var(--line) !important; }
html[data-theme] #mine-login-btn { background: var(--card) !important; color: var(--p-600) !important; }
html[data-theme] .menu-icon-box { background: var(--p-50) !important; }
html[data-theme] .stat-label { color: rgba(255,255,255,.72) !important; }
html[data-theme] .tip, html[data-theme] .empty h3, html[data-theme] .empty p { color: var(--muted) !important; }

/* 夜间：登录页那张「月光洒在书桌上」也要跟着暗下来 */
html[data-theme="night"] .login-container,
html[data-theme="night"] .login-page,
html[data-theme="night"] .login-wrapper {
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(232,200,121,.10) 0%, rgba(232,200,121,0) 55%),
    radial-gradient(120% 90% at 12% 0%, rgba(142,127,245,.22) 0%, rgba(142,127,245,0) 60%),
    linear-gradient(168deg, #16151C 0%, #1B1A22 50%, #241F2E 100%) !important;
}
html[data-theme="night"] .app-name { color: var(--p-700) !important; }
html[data-theme="night"] .agreement-box, html[data-theme="night"] .form-footer { color: var(--muted) !important; }
html[data-theme="night"] uni-page-head .uni-page-head__title { color: var(--ink) !important; }

/* 护眼纸感：卡片带一点纸纹感（很浅的暖色渐变，别抢内容） */
html[data-theme="paper"] .course-card,
html[data-theme="paper"] .menu-item,
html[data-theme="paper"] .form-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 40%) !important;
}

/* ============================================================
   四、12 种聊天气泡（b1 ~ b12）
   来源：站长给的参考 HTML，这里按原样移植，只补 !important 以压过基础样式。
   ============================================================ */
.bub.b1 { background:linear-gradient(135deg,#ffe3ec 0%,#ffb8d2 100%) !important; border:none !important;
  border-radius:20px 20px 20px 4px !important; color:#c2185b !important;
  box-shadow:0 4px 10px rgba(255,184,210,.4), inset 0 2px 6px rgba(255,255,255,.8) !important;
  font-family:'Comic Sans MS','Nunito','PingFang SC',sans-serif !important; font-weight:600 !important; letter-spacing:.5px; }
.bub.b2 { background:linear-gradient(135deg,#e0f7fa 0%,#b2dfdb 100%) !important;
  border:1px solid rgba(255,255,255,.6) !important; border-radius:18px !important; color:#00695c !important;
  box-shadow:0 4px 12px rgba(178,223,219,.5), inset 0 0 10px rgba(255,255,255,.8) !important;
  font-family:'Varela Round','Microsoft YaHei',sans-serif !important; font-weight:400 !important; letter-spacing:1px; }
.bub.b3 { background:linear-gradient(135deg,#fff8e1 0%,#ffe0b2 100%) !important;
  border:1px solid #fff !important; border-radius:24px 24px 24px 0 !important; color:#b26a00 !important;
  box-shadow:0 4px 15px rgba(255,224,178,.5) !important;
  font-family:'KaiTi','STKaiti','Comic Sans MS',cursive !important; font-size:16px !important; font-weight:bold !important; }
.bub.b4 { background:linear-gradient(135deg,#d1b3ff 0%,#f8bbd0 100%) !important;
  border:1px solid rgba(255,255,255,.6) !important; border-radius:18px !important; color:#fff !important;
  text-shadow:0 1px 3px rgba(139,92,246,.4);
  box-shadow:inset 0 0 12px rgba(255,255,255,.9), 0 4px 12px rgba(209,179,255,.4) !important;
  font-family:'PingFang SC','Microsoft YaHei',sans-serif !important; font-weight:900 !important; letter-spacing:1.5px; }
.bub.b5 { background:linear-gradient(135deg,#c5cae9 0%,#b2dfdb 100%) !important; border:none !important;
  border-radius:18px !important; color:#33691e !important;
  box-shadow:inset 0 -2px 6px rgba(255,255,255,.6), 0 4px 10px rgba(178,223,219,.3) !important;
  font-family:'Helvetica Neue','PingFang SC',sans-serif !important; font-weight:300 !important; letter-spacing:1px; }
.bub.b6 { background:linear-gradient(135deg,#ffccbc 0%,#ffab91 100%) !important; border:none !important;
  border-radius:20px 4px 20px 20px !important; color:#bf360c !important;
  box-shadow:0 4px 12px rgba(255,171,145,.4) !important;
  font-family:'Comic Sans MS','PingFang SC',sans-serif !important; font-weight:700 !important; letter-spacing:.5px; }

.bub.b7 { background:linear-gradient(135deg,#0a192f 0%,#112240 100%) !important;
  border:1px solid #64ffda !important; border-radius:4px !important; color:#64ffda !important;
  box-shadow:0 0 12px rgba(100,255,218,.2), inset 0 0 8px rgba(100,255,218,.1) !important;
  font-family:'Courier New','Consolas',monospace !important; font-weight:600 !important; letter-spacing:1px;
  text-shadow:0 0 5px rgba(100,255,218,.8); }
.bub.b8 { background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 50%,#7dd3fc 100%) !important;
  border:1px solid rgba(255,255,255,.9) !important; border-radius:6px 24px 6px 24px !important; color:#0369a1 !important;
  box-shadow:inset 0 0 15px rgba(255,255,255,.9), 0 4px 15px rgba(125,211,252,.3) !important;
  font-family:'PingFang SC','Microsoft YaHei',sans-serif !important; font-weight:300 !important; letter-spacing:3px; }
.bub.b9 { background:linear-gradient(135deg,#2e1065 0%,#1e1b4b 50%,#4c1d95 100%) !important;
  border:1px solid rgba(167,139,250,.4) !important; border-radius:4px 16px 16px 16px !important; color:#c4b5fd !important;
  box-shadow:0 0 15px rgba(139,92,246,.3), inset 0 0 10px rgba(167,139,250,.2) !important;
  font-family:'Courier New','Consolas',monospace !important; font-weight:400 !important; letter-spacing:2px; }
.bub.b10 { background:linear-gradient(135deg,#7c4dff 0%,#00bcd4 100%) !important;
  border:1px solid rgba(255,255,255,.2) !important; border-radius:4px 12px 4px 12px !important; color:#fff !important;
  box-shadow:0 4px 15px rgba(124,77,255,.4) !important;
  font-family:'Impact','Arial Black',sans-serif !important; text-transform:uppercase; letter-spacing:2px; font-size:14px !important; }
.bub.b11 { background:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 30%,#fce7f3 70%,#f8fafc 100%) !important;
  border:1px solid rgba(255,255,255,.8) !important; border-radius:24px !important; color:#475569 !important;
  box-shadow:0 4px 15px rgba(167,139,250,.15), inset 0 2px 10px rgba(255,255,255,.9) !important;
  font-family:'Times New Roman','STSong',serif !important; font-style:italic; letter-spacing:1.5px; }
.bub.b12 { background:linear-gradient(90deg,#cbd5e1,#f1f5f9,#94a3b8) !important; background-size:200% auto !important;
  border:none !important; border-radius:30px 4px 30px 4px !important; color:#1e293b !important;
  box-shadow:0 4px 10px rgba(0,0,0,.05) !important;
  font-family:'Inter','Helvetica Neue','PingFang SC',sans-serif !important; font-weight:800 !important;
  text-transform:uppercase; font-size:13.5px !important; letter-spacing:2px; }

/* 附件/图片气泡不吃渐变，但保留该人的圆角与文字色，保证同一个人风格一致 */
.bub.b1.file, .bub.b2.file, .bub.b3.file, .bub.b4.file, .bub.b5.file, .bub.b6.file,
.bub.b7.file, .bub.b8.file, .bub.b9.file, .bub.b10.file, .bub.b11.file, .bub.b12.file { display:flex; }
.bub.b1 img.pic, .bub.b2 img.pic, .bub.b3 img.pic, .bub.b4 img.pic, .bub.b5 img.pic, .bub.b6 img.pic,
.bub.b7 img.pic, .bub.b8 img.pic, .bub.b9 img.pic, .bub.b10 img.pic, .bub.b11 img.pic, .bub.b12 img.pic { border-radius:12px; }

/* ============================================================
   五、外观设置面板
   ============================================================ */
/* 面板里的所有盒子统一按 border-box 算 —— 否则 width:100% + 左右 padding
   会把面板撑出屏幕（实测 430 的屏撑成 462，右边被切） */
.wb-ap-mask, .wb-ap-sheet,
.wb-ap-sheet *, .wb-ap-sheet *::before, .wb-ap-sheet *::after { box-sizing: border-box; }

/* uni 的页面头/底部导航默认 z-index 高达 998/999，必须压过它们，否则会挡住面板底部的按钮 */
.wb-ap-mask { position:fixed; inset:0; z-index:9990; background:rgba(20,18,32,.38);
  opacity:0; pointer-events:none; transition:opacity .22s; }
.wb-ap-mask.show { opacity:1; pointer-events:auto; }
.wb-ap-sheet { position:fixed; z-index:9991; left:0; right:0; bottom:0; margin:0 auto;
  width:100%; max-width:100%; max-height:88vh; overflow-y:auto;
  background:var(--t-sheet,#fff); color:var(--ink);
  border-radius:22px 22px 0 0; padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateY(102%); transition:transform .26s cubic-bezier(.22,.8,.3,1);
  box-shadow:0 -12px 40px rgba(20,18,32,.22);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.wb-ap-sheet.show { transform:translateY(0); }
@media (min-width: 600px) { .wb-ap-sheet { max-width: 560px; } }

.wb-ap-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.wb-ap-title { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; color:var(--ink); letter-spacing:.5px; }
.wb-ap-title .ic { width:30px; height:30px; border-radius:10px; background:var(--p-100);
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.wb-ap-reset { font-size:13px; color:var(--body); background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; cursor:pointer; }
.wb-ap-reset:active { background:var(--p-50); }

.wb-ap-sec { display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:700; color:var(--ink); margin:20px 0 6px; }
.wb-ap-sec:first-of-type { margin-top:6px; }
.wb-ap-sec .ic { width:22px; height:22px; border-radius:7px; background:var(--p-50); color:var(--p-600);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.wb-ap-sec em { margin-left:auto; font-style:normal; font-size:12.5px; font-weight:600; color:var(--muted); }
.wb-ap-desc { font-size:12.5px; color:var(--muted); line-height:1.65; margin:0 0 10px; }

/* 字号：四张方卡 */
.wb-ap-fonts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.wb-ap-fonts button { background:var(--p-50); border:1.5px solid transparent; border-radius:16px;
  padding:12px 0; font-size:15px; font-weight:700; color:var(--body); line-height:1.25; cursor:pointer;
  font-family:inherit; transition:.16s; }
.wb-ap-fonts button b { display:block; font-size:17px; font-weight:800; }
.wb-ap-fonts button small { display:block; font-size:11px; font-weight:500; opacity:.75; margin-top:2px; }
.wb-ap-fonts button.on { background:var(--p-600); color:#fff; border-color:var(--p-600);
  box-shadow:0 8px 20px rgba(70,58,150,.22); }

/* 皮肤：两列卡片 */
.wb-ap-themes { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.wb-ap-theme { background:var(--p-50); border:1.5px solid transparent; border-radius:18px; padding:13px 13px 14px;
  cursor:pointer; transition:.16s; position:relative; }
.wb-ap-theme.on { border-color:var(--p-600); background:var(--card);
  box-shadow:0 10px 26px rgba(70,58,150,.14); }
.wb-ap-theme .dots { display:flex; gap:5px; margin-bottom:10px; }
.wb-ap-theme .dots i { width:17px; height:17px; border-radius:50%; border:1.5px solid rgba(0,0,0,.07); }
.wb-ap-theme .nm { font-size:14.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:6px; }
.wb-ap-theme .tk { margin-left:auto; font-size:11px; color:var(--p-600); font-weight:800; }
.wb-ap-theme .ds { font-size:11.5px; color:var(--muted); line-height:1.55; margin-top:5px; }

/* 气泡：12 个小预览 */
.wb-ap-bubs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.wb-ap-bub { border:1.5px solid var(--line); border-radius:14px; padding:9px 8px 10px; cursor:pointer;
  background:var(--card); transition:.16s; }
.wb-ap-bub.on { border-color:var(--p-600); box-shadow:0 8px 20px rgba(70,58,150,.14); }
.wb-ap-bub .nm { font-size:10.5px; color:var(--muted); margin-bottom:7px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
.wb-ap-bub .pv { font-size:11.5px; line-height:1.4; padding:6px 8px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-ap-bub.on .nm { color:var(--p-600); font-weight:800; }

.wb-ap-foot { margin-top:20px; font-size:11.5px; color:var(--muted); line-height:1.7;
  border-top:1px solid var(--line); padding-top:12px; }
/* 面板几乎占满整屏，光靠"点外面关闭"不好点 —— 必须有个明确的「完成」 */
.wb-ap-done { display:block; width:100%; margin-top:14px; padding:14px 0; border:none;
  border-radius:16px; font-size:16px; font-weight:700; letter-spacing:3px; color:#fff;
  background:linear-gradient(135deg,var(--p-500) 0%,var(--p-600) 55%,var(--p-700) 100%);
  box-shadow:0 10px 24px rgba(92,76,214,.28); cursor:pointer; font-family:inherit; }
.wb-ap-done:active { transform:scale(.99); }