/* R18 UI 样板：只作用于 .uik（#/ui、#/ui/ddir）和 uik- 前缀的抽屉、弹层，不改其他页面。
   令牌沿用公网 opsconsole.cn 的飞书式样式：底 #F5F6F8、正文 #1F2329、次级 #4E5969、辅助 #86909C、边框 #E5E6EB、表头底 #F8F9FB。 */
.uik { font-variant-numeric:tabular-nums; }
.uik .uik-stack > * + * { margin-top:16px; }

/* ---------- 页头与样板说明 ---------- */
.uik .uik-hd { background:#fff; border-radius:12px; padding:20px 24px; display:flex; align-items:flex-start; gap:24px; }
.uik .uik-hd h2 { margin:0; font-size:20px; font-weight:600; color:#1F2329; }
.uik .uik-hd p { margin:6px 0 0; font-size:13px; line-height:1.7; color:#4E5969; max-width:760px; }
.uik .uik-hd .sp { flex:1; }
.uik .uik-hd .uik-acts { display:flex; gap:8px; flex-shrink:0; }
.uik .uik-toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.uik .uik-toc a { font-size:12px; color:#4E5969; background:#F2F3F5; border-radius:4px; padding:3px 8px; text-decoration:none; }
.uik .uik-toc a:hover { color:#1E3FDF; background:#EDF0FE; }

/* ---------- 标准件区块（左示例、右规则） ---------- */
.uik .uik-sec { background:#fff; border-radius:12px; padding:18px 20px 20px; scroll-margin-top:72px; }
.uik .uik-sec-h { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.uik .uik-sec-h .no { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:#1F2329; color:#fff; font-size:12px; font-weight:600; }
.uik .uik-sec-h h2 { margin:0; font-size:17px; font-weight:600; color:#1F2329; }
.uik .uik-sec-h span { font-size:12px; color:#86909C; }
.uik .uik-sec-b { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.uik .uik-demo { min-width:0; }
.uik .uik-rules { margin:0; padding:14px 16px; list-style:none; background:#F8F9FB; border-radius:8px; font-size:12.5px; line-height:1.7; color:#4E5969; }
.uik .uik-rules li + li { margin-top:6px; }
.uik .uik-rules li::before { content:"·"; color:#86909C; margin-right:6px; }
.uik .uik-rules b { color:#1F2329; font-weight:600; }
.uik .uik-cap { font-size:12px; color:#86909C; margin:10px 0 0; }
.uik .uik-demo h4 { margin:16px 0 8px; font-size:12px; font-weight:600; color:#4E5969; }
.uik .uik-demo h4:first-child { margin-top:0; }

/* ---------- 5 卡片与间距 ---------- */
.uik .uik-tokens td:first-child { width:150px; color:#4E5969; }
.uik .uik-mini-page { background:#F5F6F8; border-radius:10px; padding:16px; }
.uik .uik-mini-page .mc { background:#fff; border-radius:12px; padding:16px 20px; }
.uik .uik-mini-page .mc h5, .uik .uik-mini-page .mh h5 { margin:0; font-size:15px; font-weight:600; color:#1F2329; }
.uik .uik-mini-page .mc h5 small, .uik .uik-mini-page .mh h5 small { margin-left:8px; font-size:12px; font-weight:400; color:#86909C; }
.uik .uik-mini-page .mc p { margin:8px 0 0; font-size:12px; color:#86909C; }
.uik .uik-mini-page .mh { margin:16px 0 8px; }
.uik .uik-mini-page .mrow { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.uik .uik-mini-page .mrow .mc { height:64px; }
.uik .uik-mini-page .gap { position:relative; }
.uik .uik-dim { font-size:11px; color:#1E3FDF; }

/* ---------- 样板页里的动效示例 ---------- */
.uik .uik-seg { display:inline-flex; border:1px solid #E5E6EB; border-radius:6px; overflow:hidden; }
.uik .uik-seg button { all:unset; cursor:pointer; padding:6px 14px; font-size:12px; color:#4E5969; border-right:1px solid #E5E6EB; }
.uik .uik-seg button:last-child { border-right:0; }
.uik .uik-seg button.on { background:#EDF0FE; color:#1E3FDF; }
.uik .uik-kpis { display:flex; gap:36px; margin:14px 0 4px; }
.uik .uik-kpis span { display:block; font-size:12px; color:#86909C; }
.uik .uik-kpis b { font-size:26px; font-weight:600; color:#1F2329; padding:0 2px; }
.uik .uik-kpis small { font-size:12px; color:#86909C; margin-left:2px; }
.uik .uik-demo-cards { display:flex; align-items:flex-end; gap:16px; }
.uik .uik-fcard { width:300px; flex:none; background:#fff; border:1px solid #E5E6EB; border-radius:12px; padding:14px 16px; cursor:pointer; }
.uik .uik-fcard .fh { display:flex; align-items:center; font-size:12px; color:#86909C; }
.uik .uik-fcard .sp { flex:1; }
.uik .uik-fcard .big { margin-top:8px; font-size:24px; font-weight:600; color:#1F2329; }
.uik .uik-fcard .big small { font-size:13px; font-weight:400; margin-left:2px; color:#4E5969; }
.uik .uik-fcard .bn { font-size:12px; color:#86909C; margin-top:2px; }
.uik .uik-fcard .t { font-size:13px; color:#1F2329; margin-top:8px; line-height:1.6; }
.uik .uik-kind, .uik-drawer .uik-kind { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:4px; font-size:12px; background:#F2F3F5; color:#4E5969; }
.uik .uik-link-demo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.uik .uik-link-demo .bl > div { display:grid; grid-template-columns:56px 1fr 64px; gap:8px; align-items:center; padding:6px 4px; font-size:12.5px; }
.uik .uik-link-demo .bl i { height:8px; background:#EEF0F3; border-radius:4px; overflow:hidden; } .uik .uik-link-demo .bl i b { display:block; height:100%; background:#E5817A; }
.uik .uik-link-demo .bl em { font-style:normal; text-align:right; color:#D54941; }
.uik .uik-two { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:4px; }
.uik .uik-alist > div { display:flex; align-items:center; gap:12px; padding:9px 12px; margin-bottom:6px; background:#F8F9FB; border-radius:8px; font-size:13px; }
.uik .uik-alist > div b { font-size:18px; width:22px; text-align:center; }
.uik .uik-alist.play > div { animation:uik-slide .4s both; } .uik .uik-alist.play > div:nth-child(2) { animation-delay:.08s; } .uik .uik-alist.play > div:nth-child(3) { animation-delay:.16s; } .uik .uik-alist.play > div:nth-child(4) { animation-delay:.24s; }
.uik .uik-skel-card { position:relative; border:1px solid #E5E6EB; border-radius:10px; padding:4px 8px; min-height:150px; }
@keyframes uik-shimmer { 0% { background-position:-200px 0; } 100% { background-position:200px 0; } }
.uik .uik-skel-card.loading table { visibility:hidden; }
.uik .uik-skel-card.loading::after { content:""; position:absolute; inset:14px 16px; background:linear-gradient(90deg, #F2F3F5 0, #E9EBEE 40px, #F2F3F5 80px) 0 0 / 400px 100%; -webkit-mask:repeating-linear-gradient(#000 0 14px, transparent 14px 34px); mask:repeating-linear-gradient(#000 0 14px, transparent 14px 34px); animation:uik-shimmer 1s linear infinite; border-radius:4px; }