/*
 * Juhe UI v2 — 全站唯一视觉合同（Mercury 式分层）
 * 引用：<link rel="stylesheet" href="/juhe/ui-system-v2/juhe-ui.css">（已自动 @import 字体）
 * 用法：页面根元素加 class="ju"，零件都以 ju- 开头。只定义外观，不定义业务行为。
 * 规则与页面模板见 /juhe/ui-system-v2/README.md 与 templates.html。
 */
@import url("./fonts.css");

:root{
  --ju-bg:#ffffff; --ju-side:#f8f8fa; --ju-subtle:#fcfcfd;
  --ju-line:#ebebf0; --ju-line-2:#dfdfe6; --ju-track:#eeeef3; --ju-hover:#f3f3f6; --ju-press:#ececf1;
  --ju-text:#1c1c22; --ju-text-2:#52525e; --ju-muted:#8a8a97; --ju-faint:#b4b4bf;
  --ju-accent:#5266eb; --ju-accent-hover:#3f53d8; --ju-accent-2:#8b98f3; --ju-accent-soft:#f0f1fd;
  --ju-pos:#15803d; --ju-pos-soft:#ebf7ef; --ju-pos-dot:#22a05b;
  --ju-neg:#c93341; --ju-neg-soft:#fcedef;
  --ju-warn:#a15c00; --ju-warn-soft:#fdf4e4;
  --ju-shadow:0 1px 2px rgba(20,20,40,.04);
  --ju-shadow-pop:0 12px 32px rgba(20,20,40,.14),0 0 0 1px rgba(20,20,40,.04);
  --ju-r-sm:8px; --ju-r:10px; --ju-r-card:14px;
  --ju-gap:16px; --ju-pad:24px;
  /* 页面版心：全站唯一来源（README 第13条）。宽屏铺满，左右统一 --ju-gutter；外壳不再另加边距。 */
  --ju-page-max:none; --ju-gutter:32px;
  --ju-font:"Juhe Inter","Juhe Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  /* 字号阶梯只有这 7 档 */
  --ju-f12:12px; --ju-f13:13px; --ju-f14:14px; --ju-f16:16px; --ju-f20:20px; --ju-f28:28px; --ju-f56:56px;
}

/* ============ 基础 ============ */
.ju{font:400 var(--ju-f14)/1.55 var(--ju-font);color:var(--ju-text);background:var(--ju-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 1,"cv11" 1}
.ju *,.ju *::before,.ju *::after{box-sizing:border-box}
.ju :focus-visible{outline:2px solid var(--ju-accent);outline-offset:2px;border-radius:6px}
.ju-ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ju-ic.lg{width:18px;height:18px}
.ju-muted{color:var(--ju-muted)} .ju-faint{color:var(--ju-faint)} .ju-t2{color:var(--ju-text-2)}
.ju-pos{color:var(--ju-pos)} .ju-neg{color:var(--ju-neg)} .ju-warn{color:var(--ju-warn)} .ju-acc{color:var(--ju-accent)}
.ju-f12{font-size:12px} .ju-f13{font-size:13px}

/* ============ 页面骨架 ============ */
.ju-page{max-width:var(--ju-page-max);margin:0 auto;padding:8px var(--ju-gutter) 64px}
.ju-page.wide{max-width:var(--ju-page-max)} /* 已统一为单一页宽，保留类名兼容 */
.ju-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:16px 0 24px;flex-wrap:wrap}
.ju-head h1{font-size:var(--ju-f28);font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.25}
.ju-desc{margin-top:6px;color:var(--ju-muted);font-size:var(--ju-f13);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ju-live{width:6px;height:6px;border-radius:50%;background:var(--ju-pos-dot);box-shadow:0 0 0 3px rgba(34,160,91,.14);flex:none}
.ju-live.stale{background:#e0a100;box-shadow:0 0 0 3px rgba(224,161,0,.16)} .ju-live.down{background:var(--ju-neg);box-shadow:0 0 0 3px rgba(201,51,65,.14)}
.ju-ctrls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ju-grid{display:grid;gap:var(--ju-gap)}
.ju-g-main{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.ju-g-side{grid-template-columns:minmax(0,1fr) 360px}
.ju-g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ju-g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ju-g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ju-stack-y{display:grid;gap:var(--ju-gap)}
.ju-mt{margin-top:var(--ju-gap)}

/* ============ 卡片 ============ */
.ju-card{background:#fff;border:1px solid var(--ju-line);border-radius:var(--ju-r-card);box-shadow:var(--ju-shadow);min-width:0;overflow:hidden}
.ju-card.flat{box-shadow:none}
.ju-pad{padding:var(--ju-pad)}
.ju-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.ju-card-title{display:flex;align-items:center;gap:8px;color:var(--ju-text-2);font-size:var(--ju-f14);font-weight:400;margin:0}
.ju-card-title.strong{color:var(--ju-text);font-weight:500;font-size:var(--ju-f16)}
.ju-card-foot{display:flex;align-items:center;gap:12px;padding:14px var(--ju-pad);border-top:1px solid var(--ju-line);background:var(--ju-subtle);color:var(--ju-muted);font-size:var(--ju-f13)}
.ju-help{width:16px;height:16px;border-radius:50%;border:1px solid var(--ju-line-2);color:var(--ju-muted);font-size:10px;font-weight:500;display:inline-grid;place-items:center;cursor:help;position:relative;flex:none}
.ju-help:hover::after,.ju-help:focus::after{content:attr(data-tip);position:absolute;left:22px;top:-8px;width:280px;padding:10px 12px;border-radius:10px;background:#1c1c22;color:#fff;font-size:12px;line-height:1.55;font-weight:400;z-index:30;box-shadow:var(--ju-shadow-pop);white-space:normal}

/* ============ 数字排版 ============ */
.ju-num{font-weight:400;letter-spacing:-.03em;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.ju-num .cur{font-size:.58em;color:var(--ju-text-2);margin-right:.08em;letter-spacing:0;vertical-align:.12em}
.ju-num.ju-pos .cur{color:var(--ju-pos)} .ju-num.ju-neg .cur{color:var(--ju-neg)}
.ju-num .unit{font-size:max(12px,.46em);color:var(--ju-muted);margin-left:.2em;letter-spacing:0}
.ju-num .pct{font-size:.5em;margin-left:.06em;letter-spacing:0;vertical-align:.5em;color:var(--ju-text-2)}
.ju-n56{font-size:var(--ju-f56)} .ju-n28{font-size:var(--ju-f28)} .ju-n20{font-size:var(--ju-f20)} .ju-n16{font-size:var(--ju-f16);letter-spacing:-.01em}
.ju-sub{margin-top:8px;color:var(--ju-muted);font-size:var(--ju-f13);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* 主数字卡：每页最多一个 */
.ju-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:14px;flex-wrap:wrap}
.ju-progress{display:flex;height:6px;border-radius:3px;background:var(--ju-track);overflow:hidden;margin-top:22px}
.ju-progress i{display:block;height:100%}
.ju-legend{display:flex;align-items:center;gap:18px;margin-top:12px;font-size:var(--ju-f13);color:var(--ju-text-2);flex-wrap:wrap}
.ju-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}
.ju-legend .end{margin-left:auto;color:var(--ju-muted)}
.ju-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--ju-line);background:var(--ju-subtle)}
.ju-strip>div{padding:16px var(--ju-pad);border-left:1px solid var(--ju-line);min-width:0} .ju-strip>div:first-child{border-left:0}
.ju-strip .l{font-size:12px;color:var(--ju-muted);display:flex;align-items:center;gap:6px}
.ju-strip .v{margin-top:4px;font-size:var(--ju-f16);font-weight:500;letter-spacing:-.01em}
.ju-strip .v span{font-weight:400;color:var(--ju-muted);font-size:13px;margin-left:6px}
.ju-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none}

/* 次要指标卡 */
.ju-kpi{display:flex;flex-direction:column}
.ju-kpi .ju-sub{margin-top:auto;padding-top:8px}
.ju-kpi .l{font-size:var(--ju-f13);color:var(--ju-text-2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.ju-kpi .ju-num{margin-top:10px}
.ju-kpi.clickable{cursor:pointer;transition:border-color .12s}
.ju-kpi.clickable:hover{border-color:var(--ju-line-2)}

/* ============ 控件 ============ */
.ju-seg{display:inline-flex;padding:3px;border-radius:var(--ju-r);background:#f1f1f5;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ju-seg>a,.ju-seg>button{height:30px;padding:0 14px;border-radius:var(--ju-r-sm);display:grid;place-items:center;color:var(--ju-text-2);cursor:pointer;font:inherit;font-size:var(--ju-f13);border:0;background:none;white-space:nowrap;transition:background .12s,color .12s}
.ju-seg>.on,.ju-seg>[aria-selected="true"]{background:#fff;color:var(--ju-text);font-weight:500;box-shadow:0 1px 2px rgba(20,20,40,.08),0 0 0 .5px rgba(20,20,40,.06)}
.ju-tabs{display:flex;gap:24px;border-bottom:1px solid var(--ju-line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.ju-tabs>a,.ju-tabs>button{padding:10px 0 11px;color:var(--ju-muted);border:0;background:none;font:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.ju-tabs>a:hover{color:var(--ju-text)} .ju-tabs>.on,.ju-tabs>[aria-selected="true"]{color:var(--ju-text);border-bottom-color:var(--ju-text);font-weight:500}
.ju-btn{height:36px;padding:0 14px;border-radius:var(--ju-r);border:1px solid var(--ju-line-2);background:#fff;color:var(--ju-text);font:inherit;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;box-shadow:var(--ju-shadow);transition:background .12s,border-color .12s}
.ju-btn:hover{border-color:#cfcfd8;background:#fafafc}
.ju-btn.primary{background:var(--ju-accent);border-color:var(--ju-accent);color:#fff;box-shadow:0 1px 2px rgba(82,102,235,.3)}
.ju-btn.primary:hover{background:var(--ju-accent-hover);border-color:var(--ju-accent-hover)}
.ju-btn.danger{background:var(--ju-neg);border-color:var(--ju-neg);color:#fff}
.ju-btn.quiet{border-color:transparent;background:#f1f1f5;box-shadow:none} .ju-btn.quiet:hover{background:var(--ju-press)}
.ju-btn.sm{height:30px;padding:0 10px;font-size:var(--ju-f13);border-radius:var(--ju-r-sm)}
.ju-btn:disabled,.ju-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.ju-link{color:var(--ju-accent);display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-weight:500;background:none;border:0;padding:0;font:inherit;font-weight:500}
.ju-link:hover{color:var(--ju-accent-hover)} .ju-link.muted{color:var(--ju-text-2)} .ju-link.danger{color:var(--ju-neg)}
.ju-dd{height:36px;padding:0 12px 0 14px;border-radius:var(--ju-r);border:1px solid var(--ju-line-2);background:#fff;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-weight:500;box-shadow:var(--ju-shadow)}
.ju-input,.ju-select,.ju-textarea{height:36px;border:1px solid var(--ju-line-2);border-radius:var(--ju-r);padding:0 12px;background:#fff;font:inherit;color:var(--ju-text);min-width:0;transition:border-color .12s,box-shadow .12s}
.ju-textarea{height:auto;padding:10px 12px;line-height:1.6;resize:vertical}
.ju-input:focus,.ju-select:focus,.ju-textarea:focus{outline:0;border-color:var(--ju-accent);box-shadow:0 0 0 3px rgba(82,102,235,.14)}
.ju-input::placeholder,.ju-textarea::placeholder{color:var(--ju-faint)}
.ju-field{display:grid;gap:6px} .ju-field>label{font-size:var(--ju-f13);color:var(--ju-text-2)} .ju-field .hint{font-size:12px;color:var(--ju-muted)}
.ju-search{position:relative;display:flex;align-items:center}.ju-search .ju-ic{position:absolute;left:12px;color:var(--ju-faint)}.ju-search .ju-input{padding-left:36px;width:100%}
.ju-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px var(--ju-pad);border-bottom:1px solid var(--ju-line)}
.ju-filters .grow{flex:1;min-width:220px}
.ju-switch{width:34px;height:20px;border-radius:10px;background:#d9d9e1;position:relative;display:inline-block;vertical-align:middle;cursor:pointer;transition:background .15s;flex:none}
.ju-switch::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.ju-switch.on{background:var(--ju-accent)} .ju-switch.on::after{left:16px}

/* ============ 标签 ============ */
.ju-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:500;white-space:nowrap;background:#f1f1f5;color:var(--ju-text-2)}
.ju-badge.ok{background:var(--ju-pos-soft);color:var(--ju-pos)} .ju-badge.warn{background:var(--ju-warn-soft);color:var(--ju-warn)}
.ju-badge.neg{background:var(--ju-neg-soft);color:var(--ju-neg)} .ju-badge.acc{background:var(--ju-accent-soft);color:var(--ju-accent)}
.ju-badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ju-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--ju-f13);color:var(--ju-text-2);white-space:nowrap}
.ju-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ju-faint)}
.ju-status.ok::before{background:var(--ju-pos-dot)} .ju-status.warn::before{background:#e0a100} .ju-status.neg::before{background:var(--ju-neg)} .ju-status.acc::before{background:var(--ju-accent)}

/* ============ 需要关注 / 任务列表 ============ */
.ju-tasks{margin-top:12px;display:grid}
.ju-tasks.compact .ju-task{padding:8px 12px;align-items:center}.ju-tasks.compact .tic{width:28px;height:28px}
.ju-task{display:flex;gap:14px;align-items:flex-start;padding:14px 12px;margin:0 -12px;border-radius:var(--ju-r);transition:background .12s}
.ju-task[role="button"],a.ju-task{cursor:pointer} .ju-task[role="button"]:hover,a.ju-task:hover{background:var(--ju-hover)}
.ju-task .tic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:#f1f1f5;color:var(--ju-muted)}
.ju-task .tic.warn{background:var(--ju-warn-soft);color:var(--ju-warn)} .ju-task .tic.neg{background:var(--ju-neg-soft);color:var(--ju-neg)} .ju-task .tic.acc{background:var(--ju-accent-soft);color:var(--ju-accent)}
.ju-task b{display:block;font-weight:500;line-height:1.4}
.ju-task span{display:block;color:var(--ju-muted);font-size:var(--ju-f13);margin-top:2px;line-height:1.5}
.ju-task .chev{margin-left:auto;color:var(--ju-faint);align-self:center}
.ju-empty-ok{display:flex;align-items:center;gap:10px;color:var(--ju-muted);padding:14px 0}

/* ============ 行列表（账户列表式） ============ */
.ju-list{margin-top:8px;display:grid}
.ju-li{display:flex;align-items:center;gap:14px;padding:12px;margin:0 -12px;border-radius:var(--ju-r);transition:background .12s}
.ju-li:hover{background:var(--ju-hover)}
.ju-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none;background:#f1f1f5;color:var(--ju-text-2);border:1px solid rgba(0,0,0,.04)}
.ju-avatar.sm{width:28px;height:28px;font-size:12px}
.ju-avatar.acc{background:var(--ju-accent-soft);color:var(--ju-accent)} .ju-avatar.ok{background:var(--ju-pos-soft);color:var(--ju-pos)} .ju-avatar.warn{background:var(--ju-warn-soft);color:var(--ju-warn)} .ju-avatar.neg{background:var(--ju-neg-soft);color:var(--ju-neg)}
.ju-li .main{flex:1;min-width:0} .ju-li .main b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ju-li .main span{font-size:12px;color:var(--ju-muted)}
.ju-li .side{text-align:right} .ju-li .side b{display:block;font-weight:500;font-size:15px;letter-spacing:-.01em} .ju-li .side span{font-size:12px;color:var(--ju-muted)}
.ju-minibar{width:64px;height:4px;border-radius:2px;background:var(--ju-track);overflow:hidden;margin:6px 0 0 auto}.ju-minibar i{display:block;height:100%;border-radius:2px;background:var(--ju-accent)}

/* ============ 表格 ============ */
.ju-sum{display:flex;align-items:flex-end;gap:48px;padding:22px var(--ju-pad);flex-wrap:wrap}
.ju-sum .l{font-size:var(--ju-f13);color:var(--ju-muted);margin-bottom:6px}
.ju-table-wrap{overflow-x:auto}
.ju-table{width:100%;border-collapse:collapse}
.ju-table th{height:40px;text-align:left;font-weight:500;font-size:12px;color:var(--ju-muted);padding:0 16px;border-top:1px solid var(--ju-line);border-bottom:1px solid var(--ju-line);background:var(--ju-subtle);white-space:nowrap}
.ju-table th:first-child,.ju-table td:first-child{padding-left:var(--ju-pad)} .ju-table th:last-child,.ju-table td:last-child{padding-right:var(--ju-pad)}
.ju-table td{height:56px;padding:8px 16px;border-bottom:1px solid var(--ju-line);vertical-align:middle}
.ju-table.dense td{height:44px;padding-top:6px;padding-bottom:6px}
.ju-table tbody tr:last-child td{border-bottom:0}
.ju-table tbody tr{transition:background .12s} .ju-table tbody tr:hover{background:#fafafc}
.ju-table tr.sel{background:var(--ju-accent-soft)}
.ju-table .r{text-align:right} .ju-table .c{text-align:center}
.ju-table td small{display:block;color:var(--ju-muted);font-size:12px;line-height:1.4}
.ju-table .group td{height:38px;background:var(--ju-subtle);color:var(--ju-muted);font-size:12px}
.ju-table .actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;white-space:nowrap}
.ju-idx{width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;font-size:12px;font-weight:600;background:#f1f1f5;color:var(--ju-text-2);margin-right:14px;vertical-align:middle}
.ju-idx.off{background:#fff;border:1px dashed var(--ju-line-2);color:var(--ju-faint)}
.ju-pbar{display:flex;align-items:center;gap:12px}.ju-pbar .t{flex:1;height:6px;border-radius:3px;background:var(--ju-track);overflow:hidden;min-width:60px}.ju-pbar i{display:block;height:100%;background:var(--ju-accent);border-radius:3px}
.ju-pbar span{min-width:44px;text-align:right;color:var(--ju-text-2);font-size:13px}
.ju-pbar.ok i{background:var(--ju-pos-dot)} .ju-pbar.warn i{background:#e0a100} .ju-pbar.neg i{background:var(--ju-neg)}
.ju-pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:14px var(--ju-pad);border-top:1px solid var(--ju-line);color:var(--ju-muted);font-size:13px;flex-wrap:wrap}
.ju-pager a,.ju-pager button{min-width:32px;height:32px;display:grid;place-items:center;border-radius:var(--ju-r-sm);border:0;background:none;color:var(--ju-text-2);cursor:pointer;font:inherit}
.ju-pager a:hover,.ju-pager button:hover{background:var(--ju-hover)} .ju-pager .on{background:#f1f1f5;color:var(--ju-text);font-weight:500}

/* ============ 提示条 / 状态 ============ */
.ju-notice{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--ju-r);background:var(--ju-warn-soft);color:var(--ju-text-2);font-size:var(--ju-f13)}
.ju-notice .ju-ic{color:var(--ju-warn);margin-top:2px}
.ju-notice b{color:var(--ju-text);font-weight:500}
.ju-notice.info{background:var(--ju-accent-soft)} .ju-notice.info .ju-ic{color:var(--ju-accent)}
.ju-notice.neg{background:var(--ju-neg-soft)} .ju-notice.neg .ju-ic{color:var(--ju-neg)}
.ju-notice .act{margin-left:auto;white-space:nowrap}
.ju-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:180px;padding:24px;color:var(--ju-muted);font-size:var(--ju-f13)}
.ju-state .ju-ic{width:28px;height:28px;color:var(--ju-faint);margin-bottom:4px}
.ju-state b{color:var(--ju-text);font-weight:500;font-size:var(--ju-f14)}
.ju-state.compact{min-height:96px;padding:16px}
.ju-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#efeff3 25%,#f7f7f9 50%,#efeff3 75%);background-size:200% 100%;animation:ju-skel 1.4s infinite}
@keyframes ju-skel{to{background-position:-200% 0}}

/* ============ 图表 ============ */
.ju-chart{position:relative}
.ju-chart.bleed{margin:20px calc(var(--ju-pad) * -1) 0}
.ju-chart svg{display:block;width:100%}
.ju-xaxis{display:flex;justify-content:space-between;padding:10px var(--ju-pad) 20px;color:var(--ju-muted);font-size:12px}
.ju-tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--ju-line);border-radius:var(--ju-r);box-shadow:var(--ju-shadow-pop);padding:8px 12px;font-size:12px;opacity:0;transition:opacity .1s;white-space:nowrap;z-index:5}
.ju-tip b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ju-text)}

/* ============ 弹窗 / 抽屉 ============ */
.ju-mask{position:fixed;inset:0;background:rgba(20,20,30,.32);backdrop-filter:blur(2px);z-index:100;display:grid;place-items:center;padding:16px}
.ju-dialog{width:min(520px,100%);background:#fff;border-radius:16px;box-shadow:var(--ju-shadow-pop);overflow:hidden}
.ju-dialog .hd{padding:20px var(--ju-pad) 0;font-size:var(--ju-f16);font-weight:500}
.ju-dialog .bd{padding:10px var(--ju-pad) 20px;color:var(--ju-text-2)}
.ju-dialog .ft{display:flex;justify-content:flex-end;gap:10px;padding:14px var(--ju-pad);border-top:1px solid var(--ju-line);background:var(--ju-subtle)}
.ju-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:#fff;box-shadow:var(--ju-shadow-pop);z-index:100;display:flex;flex-direction:column}
.ju-drawer .hd{display:flex;justify-content:space-between;align-items:center;padding:18px var(--ju-pad);border-bottom:1px solid var(--ju-line);font-weight:500;font-size:var(--ju-f16)}
.ju-drawer .bd{flex:1;overflow:auto;padding:var(--ju-pad)}
.ju-kv{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;font-size:var(--ju-f13)} .ju-kv dt{color:var(--ju-muted)} .ju-kv dd{margin:0;color:var(--ju-text)}

/* ============ 工作台（输入 → 结果） ============ */
.ju-work{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:var(--ju-gap);align-items:start}
.ju-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.ju-choice>*{border:1px solid var(--ju-line-2);border-radius:var(--ju-r);padding:12px 14px;cursor:pointer;background:#fff;text-align:left;font:inherit;transition:border-color .12s,background .12s}
.ju-choice>*:hover{border-color:#cfcfd8} .ju-choice>.on,.ju-choice>[aria-checked="true"]{border-color:var(--ju-accent);background:var(--ju-accent-soft);box-shadow:0 0 0 1px var(--ju-accent) inset}
.ju-choice b{display:block;font-weight:500} .ju-choice span{display:block;font-size:12px;color:var(--ju-muted);margin-top:2px}

/* ============ 文档 ============ */
.ju-doc{max-width:760px;font-size:15px;line-height:1.8;color:var(--ju-text-2)}
.ju-doc h2{font-size:var(--ju-f20);font-weight:500;color:var(--ju-text);margin:32px 0 8px;letter-spacing:-.01em}
.ju-doc h3{font-size:var(--ju-f16);font-weight:500;color:var(--ju-text);margin:24px 0 6px}
.ju-doc code{font-size:13px;background:#f1f1f5;border-radius:5px;padding:1px 6px}

/* ============ 响应式 ============ */
@media (max-width:1140px){.ju-g-main,.ju-g-side{grid-template-columns:1fr}.ju-g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.ju-work{grid-template-columns:1fr}}
@media (max-width:760px){
  :root{--ju-gutter:16px}
  .ju-page{padding:4px var(--ju-gutter) 48px}.ju-head{margin:10px 0 18px}.ju-n56{font-size:46px}
  .ju-g-2,.ju-g-3{grid-template-columns:1fr}
  .ju-strip{grid-auto-flow:row}.ju-strip>div{border-left:0;border-top:1px solid var(--ju-line)}.ju-strip>div:first-child{border-top:0}
  .ju-sum{gap:28px}
  .ju-table th,.ju-table td{padding-left:12px;padding-right:12px}
  .ju-table .sticky{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--ju-line)}
  .ju-table th.sticky{background:var(--ju-subtle)}
  .ju-kv{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ju *{transition:none!important;animation:none!important}}