/* ═══════════════════════════════════════════════════════════
   山海农盟 CRM · 全局样式
   - 4 套内置主题：墨玉鎏金 / 象牙晨光 / 雾紫丝绒 / 青瓷烟雨
   - custom 主题由 theme.js 动态注入变量
   ═══════════════════════════════════════════════════════════ */

/* ───────── 墨玉鎏金（默认） ───────── */
:root, :root[data-theme="jade"]{
  --bg-deep:linear-gradient(158deg,#113524 0%,#0D2A1C 46%,#091E13 100%);
  --bg:#0D2A1C; /* 实色底板：下拉选项/表头/顶栏等需要不透明背景的组件 */
  --bg-layer:
    radial-gradient(1100px 620px at 10% -10%,rgba(53,194,135,.16),transparent 62%),
    radial-gradient(950px 560px at 92% 112%,rgba(226,181,107,.08),transparent 58%);
  --hairline:rgba(166,214,188,.14);
  --hairline-2:rgba(166,214,188,.08);
  --ink:#ECF6EF; --ink-2:#A5C8B4; --ink-3:#6F9380;
  --emerald:#35C287; --emerald-hi:#4BD79B; --emerald-deep:#3A9270;
  --emerald-soft:rgba(53,194,135,.13);
  --gold:#E2B56B; --gold-hi:#F0CE8E; --gold-deep:#C1924B;
  --gold-soft:rgba(226,181,107,.12);
  --on-accent:#06231A;
  --rose:#DBA3AB; --rose-soft:rgba(219,163,171,.12);
  --sage:#93CFAE; --sage-soft:rgba(147,207,174,.11);
  --apricot:#E5BC85; --apricot-soft:rgba(229,188,133,.11);
  --clay:#E09486; --clay-soft:rgba(224,148,134,.12);
  --lav:#B4A9E0; --lav-soft:rgba(180,169,224,.11);
  --font-display:"Cormorant Garamond","Noto Serif SC",serif;
  --font-body:"DM Sans","Noto Sans SC","PingFang SC",sans-serif;
  --sh-1:0 1px 2px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.22);
  --sh-2:0 4px 12px rgba(0,0,0,.24),0 16px 44px rgba(0,0,0,.32);
  --ease:cubic-bezier(.4,0,.2,1);
  --topbar-h:72px;
}

/* ───────── 象牙晨光（浅色） ───────── */
:root[data-theme="ivory"]{
  --bg-deep:#FBF8F3;
  --bg:#FBF8F3;
  --bg-layer:
    radial-gradient(1100px 620px at 10% -10%, rgba(156,139,181,.14), transparent 62%),
    radial-gradient(950px 560px at 92% 112%, rgba(212,165,165,.12), transparent 58%);
  --hairline:#EAE1D3;
  --hairline-2:#F1EAE0;
  --ink:#4A3F35; --ink-2:#8A7B6C; --ink-3:#B3A695;
  --emerald:#9C8BB5; --emerald-hi:#B4A5CC; --emerald-deep:#7E6D96;
  --emerald-soft:rgba(156,139,181,.13);
  --gold:#9C8BB5; --gold-hi:#B4A5CC; --gold-deep:#7E6D96;
  --gold-soft:rgba(156,139,181,.10);
  --on-accent:#FFFFFF;
  --rose:#D4A5A5; --rose-soft:rgba(212,165,165,.14);
  --sage:#8FAE8B; --sage-soft:rgba(143,174,139,.12);
  --apricot:#D4A574; --apricot-soft:rgba(212,165,116,.14);
  --clay:#C98878; --clay-soft:rgba(201,136,120,.13);
  --lav:#9C8BB5; --lav-soft:rgba(156,139,181,.13);
  --font-display:"Cormorant Garamond","Noto Serif SC",serif;
  --font-body:"DM Sans","Noto Sans SC","PingFang SC",sans-serif;
  --sh-1:0 1px 2px rgba(74,63,53,.06),0 8px 24px rgba(74,63,53,.08);
  --sh-2:0 4px 12px rgba(74,63,53,.08),0 16px 44px rgba(74,63,53,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ───────── 雾紫丝绒（深色） ───────── */
:root[data-theme="velvet"]{
  --bg-deep:#1B1426;
  --bg:#1B1426;
  --bg-layer:
    radial-gradient(1100px 620px at 10% -10%, rgba(212,165,165,.12), transparent 62%),
    radial-gradient(950px 560px at 92% 112%, rgba(227,198,166,.08), transparent 58%);
  --hairline:rgba(203,185,224,.16);
  --hairline-2:rgba(203,185,224,.09);
  --ink:#F3EEF8; --ink-2:#BBAFD1; --ink-3:#8A7BA3;
  --emerald:#D4A5A5; --emerald-hi:#E7BFC0; --emerald-deep:#B98B8C;
  --emerald-soft:rgba(212,165,165,.14);
  --gold:#E3C6A6; --gold-hi:#F0DCC2; --gold-deep:#C9AE8D;
  --gold-soft:rgba(227,198,166,.12);
  --on-accent:#2E1620;
  --rose:#D4A5A5; --rose-soft:rgba(212,165,165,.14);
  --sage:#93CFAE; --sage-soft:rgba(147,207,174,.11);
  --apricot:#E3C6A6; --apricot-soft:rgba(227,198,166,.12);
  --clay:#C98878; --clay-soft:rgba(201,136,120,.14);
  --lav:#C4B5FD; --lav-soft:rgba(196,181,253,.13);
  --font-display:"Cormorant Garamond","Noto Serif SC",serif;
  --font-body:"DM Sans","Noto Sans SC","PingFang SC",sans-serif;
  --sh-1:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.3);
  --sh-2:0 4px 12px rgba(0,0,0,.28),0 16px 44px rgba(0,0,0,.4);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ───────── 青瓷烟雨（浅色） ───────── */
:root[data-theme="celadon"]{
  --bg-deep:#F4F8F5;
  --bg:#F4F8F5;
  --bg-layer:
    radial-gradient(1100px 620px at 10% -10%, rgba(47,163,124,.1), transparent 62%),
    radial-gradient(950px 560px at 92% 112%, rgba(143,174,155,.12), transparent 58%);
  --hairline:#DCE7DF;
  --hairline-2:#E7EFE9;
  --ink:#2F4A3D; --ink-2:#6E8A7C; --ink-3:#9DB4A8;
  --emerald:#2FA37C; --emerald-hi:#4BB893; --emerald-deep:#26896A;
  --emerald-soft:rgba(47,163,124,.12);
  --gold:#2FA37C; --gold-hi:#4BB893; --gold-deep:#26896A;
  --gold-soft:rgba(47,163,124,.10);
  --on-accent:#FFFFFF;
  --rose:#D4A5A5; --rose-soft:rgba(212,165,165,.13);
  --sage:#6E8A7C; --sage-soft:rgba(110,138,124,.12);
  --apricot:#D4A574; --apricot-soft:rgba(212,165,116,.13);
  --clay:#C98878; --clay-soft:rgba(201,136,120,.13);
  --lav:#9C8BB5; --lav-soft:rgba(156,139,181,.12);
  --font-display:"Cormorant Garamond","Noto Serif SC",serif;
  --font-body:"DM Sans","Noto Sans SC","PingFang SC",sans-serif;
  --sh-1:0 1px 2px rgba(47,74,61,.06),0 8px 24px rgba(47,74,61,.08);
  --sh-2:0 4px 12px rgba(47,74,61,.08),0 16px 44px rgba(47,74,61,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ───────── custom（theme.js 会动态覆盖变量） ───────── */
:root[data-theme="custom"]{
  /* 兜底：等同 jade，页面加载后 JS 立即覆盖 */
}

/* ═════════════════ 基础 Reset ═════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-body);color:var(--ink);font-size:14px;
  -webkit-font-smoothing:antialiased;
  background: var(--bg-layer), var(--bg-deep);
  background-attachment:fixed;
  transition: background .4s ease, color .35s ease;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--emerald-soft);color:var(--ink)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;outline:none}

/* ═════════════════ 页面头 ═════════════════ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.overline{font-size:10.5px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-bottom:10px;font-weight:500}
.display{font-family:var(--font-display);font-weight:400;font-size:36px;line-height:1.12;letter-spacing:.05em;color:var(--ink)}
.sub{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.sub em{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--gold-hi);padding:0 2px}
.head-actions{display:flex;gap:12px;flex:none}

/* ═════════════════ 按钮 ═════════════════ */
.btn{
  border-radius:999px;font-size:13.5px;letter-spacing:.04em;
  padding:11px 24px;border:1px solid transparent;
  transition:all .25s var(--ease);
  display:inline-flex;align-items:center;gap:7px;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.btn.primary{
  background:linear-gradient(135deg,var(--emerald-hi),var(--emerald));
  color:var(--on-accent);font-weight:500;
  box-shadow:0 8px 24px var(--emerald-soft),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 30px var(--emerald-soft),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn.ghost{background:rgba(255,255,255,.045);border-color:var(--hairline);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-1px)}
.btn.danger{background:transparent;border-color:var(--clay);color:var(--clay)}
.btn.danger:hover{background:var(--clay-soft);color:var(--clay);transform:translateY(-1px)}

/* ═════════════════ 卡片 & Panel ═════════════════ */
.card{
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  border:1px solid var(--hairline);
  border-radius:20px;
  box-shadow:var(--sh-1);
  backdrop-filter:blur(10px);
  transition:background .4s ease,border-color .4s ease;
}
:root[data-theme="ivory"] .card,
:root[data-theme="celadon"] .card{
  background:#FFFFFF;
}
.panel{padding:24px 26px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.panel-title{font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:.05em;color:var(--ink)}
.panel-title small{font-size:10px;letter-spacing:.18em;color:var(--gold);margin-left:10px;text-transform:uppercase;font-family:var(--font-body)}
.link-more{border:0;background:none;font-size:12px;color:var(--gold-hi);letter-spacing:.06em;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:all .25s var(--ease)}
.link-more:hover{color:var(--gold)}

/* ═════════════════ 标签胶囊 ═════════════════ */
.tag{font-size:11.5px;padding:4px 11px;border-radius:999px;letter-spacing:.03em;white-space:nowrap;display:inline-block}
.tag.emerald{background:var(--emerald-soft);color:var(--emerald-hi)}
.tag.sage{background:var(--sage-soft);color:var(--sage)}
.tag.clay{background:var(--clay-soft);color:var(--clay)}
.tag.apricot{background:var(--apricot-soft);color:var(--apricot)}
.tag.rose{background:var(--rose-soft);color:var(--rose)}
.tag.lav{background:var(--lav-soft);color:var(--lav)}
.tag.gold{background:var(--gold-soft);color:var(--gold-hi)}

.delta{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 10px;border-radius:999px}
.delta.up{background:var(--emerald-soft);color:var(--emerald-hi)}
.delta.flat{background:rgba(255,255,255,.05);color:var(--ink-2)}

/* ═════════════════ 头像 ═════════════════ */
.avatar{
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:500;flex:none;user-select:none;
  background-size:cover;background-position:center;
}

/* ═════════════════ 弹窗 ═════════════════ */
.modal-mask{
  position:fixed;inset:0;background:rgba(8,12,10,.6);backdrop-filter:blur(4px);
  z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:.25s var(--ease);
}
.modal-mask.show{opacity:1;visibility:visible}
.modal-box{
  background:linear-gradient(165deg,rgba(28,34,31,.98),rgba(20,25,22,.98));
  border:1px solid var(--hairline);border-radius:22px;
  width:min(640px,100%);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
  transform:scale(.94);transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
:root[data-theme="ivory"] .modal-box,
:root[data-theme="celadon"] .modal-box{
  background:#FFFFFF;
  box-shadow:0 24px 60px rgba(47,74,61,.18);
}
.modal-mask.show .modal-box{transform:scale(1)}
.modal-head{padding:22px 28px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:12px}
.modal-head h3{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.05em;flex:1;color:var(--ink)}
.modal-head .close{width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);background:rgba(255,255,255,.04);color:var(--ink-2);font-size:16px;display:grid;place-items:center;transition:all .25s var(--ease)}
.modal-head .close:hover{color:var(--clay);border-color:var(--clay)}
.modal-body{flex:1;overflow-y:auto;padding:24px 28px}
.modal-foot{padding:18px 28px;border-top:1px solid var(--hairline);display:flex;justify-content:flex-end;gap:10px}

/* ═════════════════ 表单 ═════════════════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:12px;color:var(--ink-2);font-weight:500;letter-spacing:.02em}
.form-field label .req{color:var(--clay)}
.form-field input,
.form-field select,
.form-field textarea{
  padding:10px 14px;border:1px solid var(--hairline);border-radius:10px;
  font-size:13.5px;color:var(--ink);outline:none;
  background:rgba(255,255,255,.045);transition:all .25s var(--ease);
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--ink-3)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--emerald);
  box-shadow:0 0 0 3px var(--emerald-soft);
  background:rgba(255,255,255,.06);
}
select option{background:var(--bg);color:var(--ink)}
.form-field textarea{resize:vertical;min-height:80px;font-family:inherit}
.tag-picker{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.tag-opt{
  font-size:12px;padding:6px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--ink-2);
  border:1px solid transparent;transition:all .2s var(--ease);
  user-select:none;
}
.tag-opt:hover{color:var(--ink);border-color:var(--hairline)}
.tag-opt.on{color:var(--on-accent);font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}

/* ═════════════════ 抽屉 ═════════════════ */
.drawer-mask{
  position:fixed;inset:0;background:rgba(8,12,10,.55);backdrop-filter:blur(3px);
  z-index:900;opacity:0;visibility:hidden;transition:.3s var(--ease);
}
.drawer-mask.show{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(580px,94vw);
  z-index:901;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(28,34,31,.98),rgba(20,25,22,.98));
  border-left:1px solid var(--hairline);
  box-shadow:-24px 0 64px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
:root[data-theme="ivory"] .drawer,
:root[data-theme="celadon"] .drawer{
  background:#FFFFFF;
  box-shadow:-24px 0 64px rgba(47,74,61,.14);
}
.drawer.show{transform:translateX(0)}
.drawer-head{padding:22px 28px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:16px;flex-shrink:0}
.drawer-head .avatar{width:52px;height:52px;font-size:22px}
.drawer-head-info{flex:1;min-width:0}
.drawer-head-info h3{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:.04em;line-height:1.2;color:var(--ink)}
.drawer-head-info p{font-size:12px;color:var(--ink-3);margin-top:3px}
.drawer-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--hairline);background:rgba(255,255,255,.04);color:var(--ink-2);font-size:18px;display:grid;place-items:center;transition:all .25s var(--ease);flex-shrink:0}
.drawer-close:hover{color:var(--clay);border-color:var(--clay)}
.drawer-body{flex:1;overflow-y:auto;padding:24px 28px 32px}

/* ═════════════════ 详情区 ═════════════════ */
.detail-section{margin-bottom:28px}
.detail-section h4{
  font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.detail-section h4::before{content:"";width:14px;height:1px;background:var(--gold)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-field{background:rgba(255,255,255,.035);border:1px solid var(--hairline-2);border-radius:12px;padding:11px 14px}
:root[data-theme="ivory"] .detail-field,
:root[data-theme="celadon"] .detail-field{
  background:rgba(0,0,0,.025);
}
.detail-field label{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;margin-bottom:4px}
.detail-field span{font-size:13.5px;color:var(--ink);font-weight:500}

/* ═════════════════ 时间线 ═════════════════ */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--emerald),transparent)}
.tl-i{position:relative;margin-bottom:20px}
.tl-i:last-child{margin-bottom:0}
.tl-i::before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg-deep);border:2px solid var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}
.tl-i-meta{font-size:11.5px;color:var(--ink-3);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.tl-i-meta b{color:var(--emerald-hi);font-weight:500}
.tl-i-content{font-size:13.5px;color:var(--ink);line-height:1.7}
.tl-i-next{font-size:12.5px;color:var(--gold-hi);margin-top:6px;padding-left:10px;border-left:2px solid var(--gold)}

/* ═════════════════ 空状态 & 加载 ═════════════════ */
.empty{text-align:center;padding:80px 20px;color:var(--ink-3)}
.empty svg{width:56px;height:56px;stroke:currentColor;fill:none;stroke-width:1.2;opacity:.4;margin-bottom:16px}
.empty p{font-size:14px}
.empty small{display:block;font-size:12px;margin-top:6px;color:var(--ink-3);opacity:.7}
.spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--hairline);
  border-top-color:var(--emerald);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px;color:var(--ink-3);font-size:13px}

/* ═════════════════ Toast ═════════════════ */
#toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  background:var(--float-bg);color:var(--ink);
  border:1px solid var(--gold);
  font-size:12.5px;letter-spacing:.05em;
  padding:11px 22px;border-radius:999px;
  box-shadow:var(--sh-2);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:all .35s var(--ease);
  z-index:1000;max-width:80vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.error{border-color:var(--clay);color:var(--clay)}

/* ═════════════════ 通用动画 ═════════════════ */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ═════════════════ 响应式 ═════════════════ */
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start;gap:16px}
  .head-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
}

/* ═════════════════ 浅色主题微调 ═════════════════ */
/* 浅色主题下，输入框 / 卡片的背景需要更轻 */
:root[data-theme="ivory"] .form-field input,
:root[data-theme="ivory"] .form-field select,
:root[data-theme="ivory"] .form-field textarea,
:root[data-theme="celadon"] .form-field input,
:root[data-theme="celadon"] .form-field select,
:root[data-theme="celadon"] .form-field textarea{
  background:rgba(0,0,0,.02);
}
:root[data-theme="ivory"] .form-field input:focus,
:root[data-theme="ivory"] .form-field select:focus,
:root[data-theme="ivory"] .form-field textarea:focus,
:root[data-theme="celadon"] .form-field input:focus,
:root[data-theme="celadon"] .form-field select:focus,
:root[data-theme="celadon"] .form-field textarea:focus{
  background:#FFFFFF;
}
:root[data-theme="ivory"] .btn.ghost,
:root[data-theme="celadon"] .btn.ghost{
  background:rgba(0,0,0,.03);
}
:root[data-theme="ivory"] .tag-opt,
:root[data-theme="celadon"] .tag-opt{
  background:rgba(0,0,0,.03);
}
:root[data-theme="ivory"] .modal-head .close,
:root[data-theme="ivory"] .drawer-close,
:root[data-theme="celadon"] .modal-head .close,
:root[data-theme="celadon"] .drawer-close{
  background:rgba(0,0,0,.03);
}

/* ═════════════════ 移动端适配（≤640px） ═════════════════ */
@media (max-width:640px){
  :root{--topbar-h:56px}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{overflow-x:hidden;max-width:100%}
  button,.tag-opt,.link-more{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .modal-body,.drawer-body{-webkit-overflow-scrolling:touch}

  /* 弹窗改底部抽屉式 */
  .modal-mask{padding:0;align-items:flex-end}
  .modal-box{
    width:100%;max-height:86vh;max-height:86dvh;
    border-radius:18px 18px 0 0;
    transform:translateY(32px);
  }
  .modal-mask.show .modal-box{transform:translateY(0)}

  /* 触屏抵消 hover 上浮 */
  .btn.primary:hover,.btn.ghost:hover,.btn.danger:hover{transform:none}

  /* 毛玻璃不支持时纯色兜底 */
  @supports not (backdrop-filter: blur(1px)){
    .card,.modal-box,.drawer{background:rgba(13,34,25,.92)}
  }
}

/* ═════════════════ 槽位层（供子页内嵌样式消费，纯追加，不删改上方任何规则） ═════════════════
   jade 默认值 = 子页当前实测值，保证替换后默认主题像素级一致；
   非 jade 优先取样现有组件覆写（出处见交付表），无覆写用兜底。 */
:root, :root[data-theme="jade"]{
  --card-a: rgba(255,255,255,.055); --card-b: rgba(255,255,255,.018);
  --input-bg: rgba(255,255,255,.05);
  --seg-bg: rgba(255,255,255,.045);
  --float-bg: rgba(16,42,30,.94);
  --modal-a: rgba(28,58,44,.97); --modal-b: rgba(14,34,25,.97);
  --scrim: rgba(5,15,10,.55);
  --acc-a: #3ECB90; --acc-b: #26A271;
  --kpi-grad: linear-gradient(180deg,#F5D898,#E2B56B 60%,#C1924B);
  --kpi-num: transparent;
  --scroll: rgba(166,214,188,.16);
  --on-gold: #3A2B10;
}
:root[data-theme="velvet"]{
  --card-a: rgba(255,255,255,.06); --card-b: rgba(255,255,255,.02);
  --input-bg: rgba(255,255,255,.055);
  --seg-bg: rgba(255,255,255,.05);
  --float-bg: rgba(34,24,46,.97);
  --modal-a: rgba(34,24,46,.97); --modal-b: rgba(20,14,30,.97);
  --scrim: rgba(10,6,16,.6);
  --acc-a: #E7BFC0; --acc-b: #D4A5A5;
  --kpi-grad: linear-gradient(180deg,#F5D898,#E2B56B 60%,#C1924B);
  --kpi-num: transparent;
  --scroll: rgba(203,185,224,.16);
  --on-gold: #3A2B10;
}
:root[data-theme="ivory"]{
  --card-a: #FFFFFF; --card-b: #FFFFFF;
  --input-bg: rgba(0,0,0,.02);
  --seg-bg: #F4EDE2;
  --float-bg: #FFFDF9;
  --modal-a: #FFFFFF; --modal-b: #FFFFFF;
  --scrim: rgba(74,63,53,.35);
  --acc-a: #B4A5CC; --acc-b: #9C8BB5;
  --kpi-grad: none;
  --kpi-num: #8A6A2F;
  --scroll: #EAE1D3;
  --on-gold: #3A2B10;
}
:root[data-theme="celadon"]{
  --card-a: #FFFFFF; --card-b: #FFFFFF;
  --input-bg: rgba(0,0,0,.02);
  --seg-bg: #EDF4EF;
  --float-bg: #FFFFFF;
  --modal-a: #FFFFFF; --modal-b: #FFFFFF;
  --scrim: rgba(47,74,61,.32);
  --acc-a: #4BB893; --acc-b: #2FA37C;
  --kpi-grad: none;
  --kpi-num: #1E6B4F;
  --scroll: #DCE7DF;
  --on-gold: #3A2B10;
}