/* ===== 全局 Reset（跨浏览器统一） ===== */
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; }
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; cursor: pointer; }
a { background-color: transparent; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }

/* ===== flexbox gap 兜底（老浏览器用 margin） ===== */
.demo .row { gap: 8px; }
.demo .row > * + * { margin-left: 8px; }
.demo-buttons { gap: 8px; }
.anim-cell { gap: 0; }
.toast { gap: 8px; }
label { gap: 6px; }
.pagination { gap: 6px; }
.qty-box { gap: 6px; }
/* 详细页公共样式（兼容所有浏览器） */
body {
    font-family: "Microsoft YaHei", "PingFang SC", -apple-system, "Helvetica Neue", Arial, sans-serif;
    margin: 0 auto;
    padding: 50px 120px;
    line-height: 1.75;
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    background-color: #f4f6f9;
    background-image: -webkit-linear-gradient(top, #f8fafc 0%, #eef2f7 100%);
    background-image: -moz-linear-gradient(top, #f8fafc 0%, #eef2f7 100%);
    background-image: linear-gradient(to bottom, #f8fafc 0%, #eef2f7 100%);
    -webkit-font-smoothing: antialiased
}

h1 {
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
    margin: 8px 0 16px;
    letter-spacing: -.5px
}

h2 {
    font-size: 22px;
    margin-top: 36px;
    padding: 9px 14px;
    background-color: #e8f0fe;
    background-image: -webkit-linear-gradient(left, #e8f0fe 0%, rgba(232, 240, 254, 0) 100%);
    background-image: -moz-linear-gradient(left, #e8f0fe 0%, rgba(232, 240, 254, 0) 100%);
    background-image: linear-gradient(to right, #e8f0fe 0%, rgba(232, 240, 254, 0) 100%);
    border-left: 4px solid #1a73e8;
    border-radius: 0 8px 8px 0;
    color: #1a202c;
    font-weight: 700
}

h3 {
    font-size: 19px;
    margin-top: 24px;
    color: #1a73e8;
    font-weight: 700
}

p {
    margin: 10px 0
}

a {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 600
}

a:hover {
    color: #1557b0;
    text-decoration: none
}

.red {
    color: #e02e2e;
    font-weight: 700
}

pre {
    cursor: pointer;
    background-color: #1e293b;
    color: #e2e8f0;
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0;
    overflow-x: auto;
    font-size: 17px;
    font-family: Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-all;
    -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    line-height: 1.65
}

.exp {
    margin-top: 10px;
    font-size: 17px;
    color: #7c2d12;
    background-color: #fff7ed;
    border-left: 3px solid #fb923c;
    padding: 10px 14px;
    border-radius: 0 8px 8px 0
}

.tip {
    background-color: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 14px;
    font-size: 17px;
    color: #713f12;
    -webkit-box-shadow: 0 2px 6px rgba(251, 191, 36, .15);
    box-shadow: 0 2px 6px rgba(251, 191, 36, .15)
}

.demo {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    margin-top: 14px;
    font-size: 17px;
    font-weight: 400;
    -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06)
}
.hw {
    background: #f8fafc;
    border-left: 3px solid #1a73e8;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.8;
}
.sel-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sel-list li {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 17px;
    transition: all .2s;
}
.sel-list li.active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1a73e8;
}
.sel-list li.hl {
    background: #e8f0fe;
    border-color: #1a73e8;
    color: #1a73e8;
}

.demo .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-
    -ms-flex-align: center;
    
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start
}

.demo .row>*+* {
    margin-left: 10px
}
.demo .row + .row {
    margin-top: 10px
}

.btn {
    display: inline-block;
    background: #fff;
    color: #1a73e8;
    border: 1.5px solid #1a73e8;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
    text-align: center;
}


.btn:hover {
    background-color: #fff;
    color: #1a73e8
}

.btn.ghost {
    background: #fff;
    color: #1a73e8;
    border: 1.5px solid #1a73e8;
    box-shadow: none
}

.btn.ghost:hover {
    background-color: #e8f0fe
}
.btn.danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    box-shadow: none;
}
.btn.danger:hover {
    background: #fee2e2;
    border-color: #f87171;
}

.inp {
    padding: 5px 10px;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    outline: none
}

.inp:focus {
    border-color: #1a73e8
}

.out {
    background-color: #f1f5f9;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 17px;
    color: #475569;
    min-height: 24px;
    white-space: normal;
    word-break: break-all;
    font-family: Consolas, "Courier New", monospace
}

.out.ok {
    background-color: #dcfce7;
    color: #15803d
}

.out.err {
    background-color: #fee2e2;
    color: #b91c1c
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 400;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06)
}

th,
td {
    border-bottom: 1px solid #e2e8f0;
    padding: 9px 12px;
    text-align: left
}

th {
    background-color: #f1f5f9;
    font-weight: 700;
    color: #334155
}

tr:hover td {
    background-color: #f8fafc
}

body>p:first-of-type a {
    display: inline-block;
    background-color: #e8f0fe;
    color: #1a73e8;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 17px
}

body>p:first-of-type a:hover {
    background-color: #d2e3fc;
    text-decoration: none
}

@media(max-width:640px) {
    body {
        padding: 20px 16px
    }

    h1 {
        font-size: 26px
    }

    pre {
        font-size: 15px
    }
}


.demo .row {
	gap: 8px;
}
.demo .row > * + * {
	margin-left: 0;
}

/* 动画格子：有背景色的状态文字必须白色，保证对比度 */
.anim-cell.active, .anim-cell.done, .anim-cell.target, .anim-cell.skipped {
	color: #fff !important;
}
.anim-cell.active .value, .anim-cell.done .value, .anim-cell.target .value, .anim-cell.skipped .value {
	color: #fff !important;
}
.anim-cell.active .label, .anim-cell.done .label, .anim-cell.target .label, .anim-cell.skipped .label {
	color: rgba(255,255,255,.85) !important;
}

/* 返回目录/总目录：固定左上角，浅蓝背景 */
.back-top {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 999;
	background: #d2e3fc !important;
	color: #1a73e8 !important;
	border: none !important;
	padding: 6px 12px !important;
}
/* 底部悬浮翻页按钮统一 padding */
div[style*="position:fixed;bottom:20px"] .btn {
	padding: 6px 12px;
	display: inline-block;
	
	
}

/* 代码语法高亮颜色（common.js 自动加 span） */
.hl-com  { color: #86efac; font-style: italic; }
.hl-kw   { color: #fbbf24; font-weight: 600; }
.hl-api  { color: #f87171; }
.hl-str  { color: #fde047; }
.hl-num  { color: #c4b5fd; }
.hl-tag  { color: #f472b6; }

@keyframes ripple {
    to {
        -webkit--webkit-transform: scale(4); -ms-transform: scale(4); transform: scale(4);
        -webkit-transform: scale(4); -ms-transform: scale(4); transform: scale(4);
        opacity: 0
    }
}
/* 购物车表格 */
#cartTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}
#cartTable th {
    background: #f1f5f9;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
}
#cartTable td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}
.demo .minus, .demo .plus {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-block;
    -webkit-box-align: center;
    -webkit-
    -ms-flex-align: center;
    
    -webkit-box-pack: center;
    -webkit-
    -ms-flex-pack: center;
    
    width: 26px;
    height: 26px;
    border: 1.5px solid #1a73e8;
    background: #fff;
    color: #1a73e8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    padding: 0;
}
#cartTable td .qty-num {
    display: inline-block;
    width: 24px;
    text-align: center;
    font-weight: 600;
}
.demo .del {
    border: 1.5px solid #e02e2e;
    background: #fff;
    color: #e02e2e;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 15px;
    cursor: pointer;
}
.demo .bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 14px;
}
.demo .bar > * + * {
    margin-left: 10px;
    margin-top: 6px;
}
.demo .summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    font-size: 17px;
    color: #334155;
}
.demo .summary b {
    color: #e02e2e;
    font-size: 19px;
}
.qty-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-
    -ms-flex-align: center;
    
    -webkit-box-pack: center;
    -webkit-
    -ms-flex-pack: center;
    
}
.qty-box .qty-num {
    display: inline-block;
    width: 24px;
    text-align: center;
    font-weight: 600;
    margin: 0 6px;
}

.qty-cell { text-align: center !important; }
#cartTable .stock-tip { display: inline-block; margin-left: 8px; font-size: 14px; color: #aaa; }

/* 通用 toast 提示（模仿 Ant Design） */
.toast {
	position: fixed;
	top: 30px;
	left: 50%;
	-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
	background: #fff;
	color: #333;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 17px;
	z-index: 9999;
	opacity: 0;
	-webkit-transition: opacity .3s; transition: opacity .3s;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	display: flex;
	
	gap: 8px;
}
.toast.show {
	opacity: 1;
}
.toast .icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #52c41a;
	color: #fff;
	display: flex;
	
	
	font-size: 14px;
	font-weight: bold;
	flex-shrink: 0;
}
/* 所有 demo 内元素垂直居中对齐 */
.demo > * {
	vertical-align: middle;
}
.demo input, .demo select, .demo textarea {
	vertical-align: middle;
}
label {
	vertical-align: middle;
}
/* 表单控件统一优化 */
.demo input:not([type='checkbox']):not([type='radio']), .demo select, .demo textarea {
	padding: 5px 10px;
	border: 1.5px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: #1e293b;
	outline: none;
	-webkit-transition: border-color .2s, box-shadow .2s; transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}
.demo input:not([type='checkbox']):not([type='radio']):focus, .demo select:focus, .demo textarea:focus {
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}
.demo input:not([type='checkbox']):not([type='radio']):hover, .demo select:hover {
	border-color: #94a3b8;
}
/* 复选框自定义样式：圆形、选中填充、hover 反馈 */
input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    -webkit--webkit-transition: all .2s; transition: all .2s; -webkit-transition: all .2s; transition: all .2s;
    flex-shrink: 0;
    margin: 0;
}
input[type='checkbox']:hover {
    border-color: #1a73e8;
    background: #eff6ff;
}
input[type='checkbox']:checked {
    background: #1a73e8;
    border-color: #1a73e8;
}
input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: translate(-50%, -60%) rotate(-45deg); -ms-transform: translate(-50%, -60%) rotate(-45deg); transform: translate(-50%, -60%) rotate(-45deg);
}
input[type='checkbox']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .2);
}
label {
    display: inline-block;
    
    gap: 6px;
    cursor: pointer;
}
.demo select {
	cursor: pointer;
	padding-right: 32px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
/* 动画格子通用样式（递归、循环、数组操作等） */
.anim-cell {
	display: inline-block;
	flex-direction: column;
	
	
	min-width: 72px;
	padding: 10px 14px;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	font-size: 17px;
	font-weight: 600;
	color: #64748b;
	-webkit-transition: all .25s ease; transition: all .25s ease;
	text-align: center;
	line-height: 1.4;
}
.anim-cell .label {
	font-size: 14px;
	font-weight: 400;
	color: #94a3b8;
	margin-bottom: 4px;
}
.anim-cell .value {
	font-size: 20px;
	font-weight: 700;
	color: #1e293b;
}
.anim-cell.active {
	border-color: #1a73e8;
	background: #e8f0fe;
	color: #1a73e8;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(26, 115, 232, .2);
}
.anim-cell.active .value {
	color: #1a73e8;
}
.anim-cell.done {
	border-color: #52c41a;
	background: #f0fdf4;
	color: #16a34a;
}
.anim-cell.done .value {
	color: #16a34a;
}
.anim-cell.skipped {
	border-color: #fca5a5;
	background: #fef2f2;
	color: #b91c1c;
	opacity: .6;
}
.anim-cell.target {
	border-color: #f59e0b;
	background: #fffbeb;
	color: #b45309;
}
/* 分页组件样式 */
.pagination {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
	gap: 6px;
	
}
.pagination button, .pagination span {
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: #1e293b;
	font-size: 17px;
	font-weight: 500;
	cursor: pointer;
	-webkit--webkit-transition: all .2s; transition: all .2s; -webkit-transition: all .2s; transition: all .2s;
	display: inline-block;
	
	
}
.pagination button:hover {
	border-color: #1a73e8;
	color: #1a73e8;
}
.pagination .active {
	background: #1a73e8;
	color: #fff;
	border-color: #1a73e8;
}
.pagination .disabled {
	opacity: .5;
	cursor: not-allowed;
}
/* 表格内容全部居中 */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
}
table th, table td {
	padding: 10px 12px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #e2e8f0;
}
table th {
	background: #f1f5f9;
	font-weight: 600;
	color: #1e293b;
}
table tr:nth-child(even) {
	background: #f8fafc;
}
/* 按钮行左右分栏 */
.demo-buttons { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; }
.btns-left { display:flex; flex-wrap:wrap; gap:8px; }
.btns-right { display:flex; gap:8px; }


/* 去掉演示区 max-height 滚动条 */
.demo, .vis, .vbox, #vis, #vbox { max-height: none !important; overflow: visible !important; }


/* API 速查表大字体版 */
h3 { font-size: 22px !important; }
table { font-size: 18px !important; line-height: 1.8; border-collapse: collapse; width: 100%; margin: 12px 0; }
table th { font-size: 17px !important; font-weight: 600; color: #1a73e8 !important; background: #e8f0fe !important; padding: 10px 14px; text-align: left; }
table td { padding: 12px 16px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
table tr:nth-child(even) td { background: #f8fafc; }
table td:first-child { color: #1a73e8 !important; font-weight: 700; font-family: Consolas, monospace; }


/* API 表第一列可点击复制 */
table td:first-child { cursor: pointer; font-size: 20px !important; }
table td:first-child:hover { background: #dbeafe !important; }



/* 去掉 API 名后的 📋 图标 */
table td:first-child::after { content: none !important; }

/* API 表格列宽 */
table.api-table th:nth-child(1), table.api-table td:nth-child(1) { width: 18%; }
table.api-table th:nth-child(2), table.api-table td:nth-child(2) { width: 22%; }
table.api-table th:nth-child(3), table.api-table td:nth-child(3) { width: 15%; }
table.api-table th:nth-child(4), table.api-table td:nth-child(4) { width: 15%; }
table.api-table th:nth-child(5), table.api-table td:nth-child(5) { width: 30%; }


/* 跨浏览器兼容：统一字体 */
html, body { font-family: 'Microsoft YaHei', '微软雅黑', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; -webkit-appearance: none; }


/* 目录页返回总目录：浅蓝实心背景 */
.back-toc { position: fixed; top: 20px; left: 20px; z-index: 999; background: #d2e3fc; color: #1a73e8; border: none; padding: 6px 12px; border-radius: 8px; font-size: 17px; font-weight: 600; text-decoration: none; }


/* 注释和代码视觉区分：注释淡绿底+左右留白 */
.hl-com { background: rgba(134,239,172,.12); padding: 1px 4px; border-radius: 3px; margin: 0 2px; }


/* 取消注释背景，只靠颜色区分 */
.hl-com { background: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }


/* API 速查表重构 */
table { table-layout: fixed !important; width: 100% !important; word-break: break-word; }
table td, table th { white-space: normal !important; word-wrap: break-word; padding: 12px 14px !important; }
table td:first-child { width: 22% !important; }
table td:nth-child(2) { width: 35% !important; }


/* 演示按钮区统一布局 */
.demo .row, .demo-buttons, .demo .btns { display: flex !important; flex-wrap: wrap; gap: 10px;  margin-bottom: 12px; }
.demo .row .btn, .demo-buttons .btn { margin: 0; }


/* 代码块统一：深色底 + 横向滚动，不强行换行 */
pre, code, .code-box, #codeBox, #codeOut { background: #1e293b !important; color: #e2e8f0 !important; overflow-x: auto !important; word-break: normal !important; word-wrap: normal !important; white-space: pre !important; }
table td code { background: #1e293b; color: #e2e8f0; padding: 2px 6px; border-radius: 3px; overflow-x: visible; white-space: pre-wrap; }


/* 代码块改为自动换行，不要横向滚动 */
pre, code, .code-box, #codeBox, #codeOut { overflow-x: visible !important; white-space: pre-wrap !important; word-break: break-word !important; }


/* API 速查表代码示例列深色块 */
table td code { background: #1e293b !important; color: #e2e8f0 !important; border-radius: 4px; padding: 2px 8px; font-family: Consolas, Monaco, monospace; font-size: 13px; display: inline-block; white-space: pre-wrap; word-break: break-word; margin: 2px 0; }
table td pre { background: #1e293b !important; color: #e2e8f0 !important; border-radius: 6px; padding: 8px; font-family: Consolas, Monaco, monospace; font-size: 14px; display: block; white-space: pre-wrap; word-break: break-word; margin: 0; }


/* 代码块统一 JS2/14 样式 */
pre, table td pre, .code-box, #codeBox, #codeOut { cursor: pointer; background: #1e293b !important; color: #e2e8f0 !important; border-radius: 6px; padding: 12px; font-family: Consolas, Monaco, monospace; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-x: visible; margin: 8px 0; }


/* 正文行内代码：浅灰底 + 深红字，去掉黑色大块背景（只影响段落/标题/说明中的 code，表格示例代码列仍为深色块） */
p code, li code, h1 code, h2 code, h3 code, .exp code, .tip code, .demo p code, .demo li code, th code, caption code {
    background: #eef2f7 !important;
    color: #c7254e !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 0.9em !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
/* 正文行内 code 的高亮色：原 hl 色是给深色块设计的浅色，浅灰底上看不清，换成深色版 */
p code .hl-kw, li code .hl-kw, h1 code .hl-kw, h2 code .hl-kw, h3 code .hl-kw, .exp code .hl-kw, .tip code .hl-kw, th code .hl-kw, caption code .hl-kw, .demo p code .hl-kw, .demo li code .hl-kw { color: #7c3aed !important; font-weight: 600 !important; }
p code .hl-api, li code .hl-api, h1 code .hl-api, h2 code .hl-api, h3 code .hl-api, .exp code .hl-api, .tip code .hl-api, th code .hl-api, caption code .hl-api, .demo p code .hl-api, .demo li code .hl-api { color: #dc2626 !important; }
p code .hl-str, li code .hl-str, h1 code .hl-str, h2 code .hl-str, h3 code .hl-str, .exp code .hl-str, .tip code .hl-str, th code .hl-str, caption code .hl-str, .demo p code .hl-str, .demo li code .hl-str { color: #059669 !important; }
p code .hl-num, li code .hl-num, h1 code .hl-num, h2 code .hl-num, h3 code .hl-num, .exp code .hl-num, .tip code .hl-num, th code .hl-num, caption code .hl-num, .demo p code .hl-num, .demo li code .hl-num { color: #b45309 !important; }
p code .hl-com, li code .hl-com, h1 code .hl-com, h2 code .hl-com, h3 code .hl-com, .exp code .hl-com, .tip code .hl-com, th code .hl-com, caption code .hl-com, .demo p code .hl-com, .demo li code .hl-com { color: #6b7280 !important; font-style: normal !important; background: none !important; }
p code .hl-tag, li code .hl-tag, h1 code .hl-tag, h2 code .hl-tag, h3 code .hl-tag, .exp code .hl-tag, .tip code .hl-tag, th code .hl-tag, caption code .hl-tag, .demo p code .hl-tag, .demo li code .hl-tag { color: #db2777 !important; }
/* 行内 code 字号略放大、字体栈更圆润 */
p code, li code, h1 code, h2 code, h3 code, .exp code, .tip code, .demo p code, .demo li code, th code, caption code { font-family: Consolas, "SF Mono", "Menlo", monospace !important; font-size: 0.95em !important; letter-spacing: 0.2px !important; font-weight: 700 !important; }

/* ===== 柔和高亮（演示元素被选中时） ===== */
.hl-active {
	background: #e8f0fe !important;
	color: #1a73e8 !important;
	border-radius: 6px;
	padding: 2px 8px;
	transition: all .25s ease;
	box-shadow: 0 2px 8px rgba(26, 115, 232, .15);
}

/* ===== 演示区表格表头柔和版 ===== */
.demo table th {
	background: #e8f0fe !important;
	color: #1a73e8 !important;
	font-weight: 600;
}
.demo table tr:nth-child(even) td {
	background: #f8fafc;
}