/* 字母键 字体 */
@font-face {
	font-family: "英文字体";
	font-weight: 600;
	src: url('../fonts/000.ttf');
}

/* 候选栏/剪贴板/候选展开/ 字体 */
@font-face {
	font-family: "汉字字体";
	font-weight: 600;
	src: url('../fonts/001.ttf');
}

/*单个大字集字体TH-Feon.ttf*/
@font-face {
	font-family: '大字集';
	font-weight: 600;
	src: url('../fonts/TH-Feon.ttf');
}

@font-face {
	font-family: '默认';
	font-weight: 600;
	src: url('fonts/Keyboard-Symbols.ttf');
}

@font-face {
	font-family: "字集一";
	font-weight: 600;
	src: url('../fonts/p1.ttf');
}

@font-face {
	font-family: "字集二";
	font-weight: 600;
	src: url('../fonts/p2.ttf');
}

@font-face {
	font-family: "字集三";
	font-weight: 600;
	src: url('../fonts/p3.ttf');
}

:root {
	--键高度: 3.5rem;
	--数字行高度: calc(var(--键高度)/1.31);
	/*数字行[sa:true]*/
	--行间距: 0.2rem;
	/*行(=)*/
	--底部增高: 0.1rem;
	--栏键间距: .2rem;

	/* 候选栏 */
	--候高度: 3.6rem;
	--候字体大小: 1.8rem;
	--候字体间距: 0.43rem;
	--候编码字大小: 0.8rem;
	--候编码位置: -0.3rem;
	/*上下,正数下移 负数上移*/
	--候字体位置: 2.2;

	--候工具字大小: 1.9rem;
	--候工具间距: 0.42rem;
	/*候选工具栏*/
	--候工具位置: var(--候字体位置);
	/*字上下*/
	--候顶部线色: transparent;
	--候顶部线色2: rgba(0, 0, 0, .4);

	--上下标大小: 0.6rem;

	--候选栏字体: 汉字字体, sans-serif;
	--字母键字体: 英文字体, 默认, 汉字字体, sans-serif;
	--功能键字体: 默认, 英文字体, 汉字字体, sans-serif;

	/* 会被皮肤 大字集开关 调用 */
	--大字集字体: 汉字字体, system, 大字集, sans-serif;
	/* --大字集字体:  汉字字体,sans-serif,字集一,字集二,字集三;  */

	/* 剪贴板/短语板/候选下拉展开 界面字体 */
	--界面字体大小: 1.4rem;
	--界面字体: 默认, sans-serif;
	--展开字体: var(--候选栏字体);
	--⏍时间: blue;
	--展开编码位置: -0.8em;
	/*调小向上*/

	--展开编码颜色: #517A95;
	--展开编码阴影: 0 -.01rem 0rem #000;
	--展开键字色: #444;
	--展开键字阴影:
		0 .1rem .3rem #B5C0D1,
		0 -.01rem 0 #000,
		0 .01rem 0 #fff;
	--展开键背景: rgba(235, 230, 217, .5);
	--展开键阴影: none;
	--展开键圆角: .4rem;
	--展开键边框: .06rem solid #888;
	--展开界面背景: #F3EFE8;

	/* u, i ,f, j键字体色,
取消下面行的注释,会变为默认字体色:*/
	/*	--uifj键色: var(--字体色1); */
}

/* Reset */
* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;
	-webkit-focus-ring-color: rgba(0, 0, 0, 0);
	outline: none;
}

html {
	touch-action: none;
	pointer-events: none;
}

body {
	overflow: hidden;
	background: var(--背景色0, none);
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.keyboard-key:focus {
	outline: none;
}

/* Keyboard */
.keyboard:not(.popup) {
	box-sizing: border-box;
	position: absolute;
	z-index: 15;
	border-top: solid max(0.05rem, 1px) var(--候顶部线色2);
	pointer-events: auto;
	width: var(--缩小, 100%);
	background: var(--键盘背景色);
	/* 促进硬件加速 */
	transform: translateZ(0);
	backface-visibility: hidden;
	/* 固定背景避免重复渲染 */
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* 按键区域 */
.keyboard-key-panel {
	width: 100%;
	box-sizing: border-box;
	padding-top: var(--栏键间距);
}

/* 按键 每一行 */
.keyboard-row {
	width: 100%;
	white-space: nowrap;
	text-align: center;
	transform: scale(var(--左右间距, 0.99));
	margin-bottom: var(--行间距);
}

.keyboard-key[data-row="0"] {
	display: var(--数字栏, none);
}

/* Buttons: logic keys */
.keyboard-key {
	box-sizing: border-box;
	background: none;
	display: inline-block;
	border: none;
	padding: 0 var(--键间距, 0);
}

/* Visible keys */
.keyboard-key>.visual-wrapper {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	height: var(--键高度);
	background: var(--背景色1, transparent);
	border-radius: var(--键圆角, none);
	border: var(--键边框大小, 0) solid var(--键边框颜色, transparent);
	box-shadow: var(--键阴影, none);
	pointer-events: none;
}

/* Standard key styles. */
.keyboard-key>.visual-wrapper>span {
	top: var(--字上下1, 0);
	left: var(--字左右1, 0);
	right: var(--预设, 0);
	bottom: var(--预设, 0);
	position: absolute;
	text-align: center;
	padding-top: 0.5rem;
	padding-bottom: 0.2rem;
	font-size: var(--字大小1);
	font-family: var(--字母键字体);
	text-shadow: var(--字阴影1, none);
	text-transform: var(--case);
	/*删除此行字母键变小写*/
	color: var(--字体色1);
	border-radius: var(--键圆角, none);
	box-shadow: var(--键阴影1, none);
	line-height: calc(var(--键高度)/1.1);
	z-index: 0;
}

.keyboard-key[data-keycode='32']>.visual-wrapper>span,
.keyboard-key.special-key>.visual-wrapper>span,
.keyboard-key.special-keya>.visual-wrapper>span {
	top: var(--字上下2, 0);
	left: var(--字左右2, 0);
	bottom: 0;
	right: 0;
}

/* 功能键 */
.keyboard-key.special-key>.visual-wrapper,
.keyboard-key.special-keya>.visual-wrapper {
	background: var(--背景色2);
}

.keyboard-key.special-key>.visual-wrapper>span,
.keyboard-key.special-keya>.visual-wrapper>span {
	color: var(--字体色2);
	font-size: var(--字大小1);
	font-family: var(--功能键字体);
	text-shadow: var(--字阴影2, none);
	box-shadow: var(--键阴影2, none);
}

.keyboard-key.special-key>.visual-wrapper>span {
	line-height: calc(var(--键高度)/1.1);
}

.keyboard-key.special-keya>.visual-wrapper {
	height: var(--数字行高度);
}

.keyboard-key.special-keya>.visual-wrapper>span {
	line-height: calc(var(--键高度)/1.5);
	/*数字行字体位置*/
}

.keyboard-key[data-keycode="13"]>.visual-wrapper {
	background: var(--⏎背景色, var(--背景色2));
	border-radius: var(--键圆角);
	box-shadow: var(--⏎阴影, var(--键阴影));
}

.keyboard-key[data-keycode="13"]>.visual-wrapper span {
	color: var(--⏎字体色);
	transform: rotateY(180deg);
	/* 反转回车键字符 */
}

.keyboard-key[data-keycode="32"]>.visual-wrapper span {
	font-size: 1.3rem;
	font-family: 汉字字体, 默认, serif;
	text-transform: uppercase;
	/* 空格键大写 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.keyboard-key[data-keycode="32"]>.visual-wrapper span::before,
.keyboard-key[data-keycode="32"]>.visual-wrapper span::after {
	position: absolute;
	font-size: var(--上下标大小, .6rem);
	color: var(--上标字符色1);
}

.keyboard-key[data-keycode="32"]>.visual-wrapper span::before {
	content: "↑";
	left: 0.2rem;
}

.keyboard-key[data-keycode="32"]>.visual-wrapper span::after {
	content: "↓";
	right: 0.2rem;
}

.keyboard-key[data-keycode="32"]>.visual-wrapper span a {
	color: green;
}

.keyboard-key:not(.special-key)[data-keycode="32"]>.visual-wrapper span::first-letter {
	color: var(--空格);
	/* 空格键第一个字颜色 */
}

.keyboard-key[data-keycode="102"]>.visual-wrapper span {
	color: var(--uifj键色, #f56);
}

.keyboard-key[data-keycode="105"]>.visual-wrapper span {
	color: var(--uifj键色, #FF9000);
}

.keyboard-key[data-keycode="106"]>.visual-wrapper span {
	color: var(--uifj键色, green);
}

.keyboard-key[data-keycode="117"]>.visual-wrapper span {
	color: var(--uifj键色, #56c);
}

.keyboard-key[data-keycode="116"]>.visual-wrapper span::before {
	position: absolute;
	font-size: var(--上下标大小, .6rem);
	color: var(--上标字符色1);
	content: "↖";
	left: 0.1rem;
}

.keyboard-key[data-keycode="116"]>.visual-wrapper span::after {
	position: absolute;
	font-size: var(--上下标大小, .6rem);
	color: var(--上标字符色1);
	content: "↘";
	right: 0.1rem;
}

.keyboard-key.special-key[data-keycode="-101"]>.visual-wrapper span,
.keyboard-key.special-key[data-keycode="-102"]>.visual-wrapper span,
.keyboard-key.special-key[data-keycode="-103"]>.visual-wrapper span,
.keyboard-key.special-key[data-keycode="-104"]>.visual-wrapper span,
.keyboard-key.special-key[data-keycode="-115"]>.visual-wrapper span,
.keyboard-key.special-key[data-keycode="27"]>.visual-wrapper span {
	text-shadow: none;
	color: var(--选重, var(--候高亮首选色));
}

/* 按键时动画 */
.keyboard-key.highlighted2 {
	padding: 0 0;
	position: relative;
	z-index: 100;
}

.highlighted2>.visual-wrapper {
	pointer-events: none;
}

.keyboard-key:not(.special-key).highlighted2>.visual-wrapper {
	background: var(--动画背景, var(--背景色1));
	box-shadow: var(--动画阴影, none);
}

.keyboard-key:not(.special-key):not([data-keycode="32"]).highlighted2>.visual-wrapper span {
	box-shadow: none;
	text-shadow: none;
	outline: .15rem solid var(--动画框色, red);
	outline-offset: var(--动画框大小, -.1rem);
	color: var(--动画字色, red);
}

.keyboard-key.special-key.highlighted2>.visual-wrapper span {
	outline: none
}

.keyboard-key.highlighted2.alt-show>.visual-wrapper {
	background: rgba(0, 0, 255, .3);
}

.keyboard-key.highlighted2 .alt-note {
	border: none;
	visibility: hidden;
}

.keyboard-key:not(.special-key).highlighted2>.visual-wrapper {
	transition: var(--动画, none);
}

/* 按键气泡弹出提示 */
.keyboard-key.highlighted {
	position: relative;
	z-index: 100;
}

.keyboard-key.highlighted>.visual-wrapper {
	background: var(--背景色1);
	/* 字母键 按下背景色 */
	border-top: none;
	margin: -0.5rem 0 0;
	height: calc(var(--键高度) - 0.5rem);
	bottom: 0rem;
}

.keyboard-key.highlighted>.visual-wrapper:after {
	content: "";
	position: absolute;
	left: -0.15rem;
	top: -0.15rem;
	bottom: -0.15rem;
	right: -0.15rem;
	z-index: -1;
	border-radius: var(--键圆角);
	border: 2px solid #f90000;
	/*按下字母键高亮边框*/
}

.keyboard-key.highlighted>.visual-wrapper>span {
	font: 300 1.6rem/2rem Sans-serif;
	background: var(--背景色1);
	/* filter: brightness(0.9); 1.2表示120%亮度，数值越大越浅 */
	/* 字母键 弹出显示 背景色 */
	color: var(--字体色1);
	/* 字母键 弹出显示 字体色 */
	height: calc(var(--键高度) + 0.5rem);
	top: -4.6rem;
	/*left: -0.8rem;
	right: -0.8rem;
	border: 2px solid #f90000;*/
	left: 0rem;
	right: 0rem;
	border: none;
	border-radius: var(--键圆角);
	box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.6);
	/*box-shadow: none;*/
}

.keyboard-key.special-keya.highlighted>.visual-wrapper,
.keyboard-key.special-keya.highlighted>.visual-wrapper>span {
	height: calc(var(--键高度)/1.31);
}

.keyboard-key.special-key.highlighted>.visual-wrapper>span {
	background: var(--背景色2);
	/* 特殊键 弹出显示 背景色 */
	color: var(--字体色2);
	/* 特殊键 弹出显示 字体色 */
}

/* 空格键不显示 */
.keyboard-key.highlighted[data-keycode="32"]>.visual-wrapper span {
	display: none;
}

/* 边缘键弹出偏移*/
.keyboard-key.highlighted:last-child>.visual-wrapper>span:after {
	right: 0rem;
}

/* .keyboard-key.highlighted:last-child>.visual-wrapper>span {
	right: 4%;
	border-bottom-right-radius: 0;
}

.keyboard-key.highlighted:first-child>.visual-wrapper>span {
	left: 4%;
	border-bottom-left-radius: 0;
} */

/* Key states */
/* Active */
.keyboard-key.kbr-key-active>.visual-wrapper>span {
	color: var(--⇧键单击, red);
}

/* Hold */
.keyboard-key.kbr-key-hold>.visual-wrapper {
	box-shadow: none;
}

.keyboard-key.kbr-key-hold>.visual-wrapper::after {
	content: "▪";
	position: absolute;
	left: 25%;
	top: 20%;
	bottom: 0;
	right: 0;
	color: var(--⇧方块, var(--⇧键单击));
	font-size: 1.1rem;
	z-index: 17;
}

.keyboard-key.kbr-key-hold>.visual-wrapper>span {
	color: var(--⇧键单击);
}

/* 候选栏 */
.keyboard-candidate-panel {
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	display: block;
	width: 100%;
	height: var(--候高度);
	color: var(--候字体颜色);
	background: var(--候背景色);
	/*候选栏背景色*/
	border-bottom: .1rem solid var(--候底线颜色);
	border-top: .05rem solid var(--候顶部线色);
	box-shadow: var(--候阴影, none);
}

.keyboard-candidate-panel span {
	min-width: 2.5rem;
	display: inline-block;
	text-align: center;
	font-size: var(--候字体大小);
	font-family: var(--候选栏字体);
	text-shadow: var(--候字阴影, none);
	line-height: var(--候字体位置);
	padding: 0.1rem var(--候字体间距) 0;
	/*字和字之间的间距*/
	position: relative;
}

.keyboard:not(.popup) .keyboard-candidate-panel span.first {
	color: var(--候高亮首选色);
}

.keyboard:not(.popup) .keyboard-candidate-panel p.desc {
	color: var(--候高亮首选色);
	/* desc字颜色 */
	font-size: 1rem;
	position: relative;
	display: inline-block;
}

.keyboard:not(.popup) .keyboard-candidate-panel span[data-data="0"] label.codetip {
	color: var(--补码2, var(--候高亮首选色));
}

.keyboard:not(.popup) .keyboard-candidate-panel span.first label.codetip {
	color: var(--补码1);
}

.keyboard:not(.popup) .keyboard-candidate-panel span:not([data-data="0"]) label.codetip {
	color: var(--候高亮首选色);
	/*候选栏编码补全字体_色*/
	position: absolute;
	top: -.45em;
	/* 调整上下位置 */
	left: 50%;
	transform: translateX(-50%);
}

.keyboard-candidate-panel span label.codetip {
	font-size: .8rem;
	/* 候选栏编码补全字体_大小*/
}

.keyboard:not(.popup) .keyboard-candidate-panel span[data-page="true"] {
	position: absolute;
	right: 0;
	min-width: 2.5rem;
	/*候选下拉展开键最小宽度*/
	height: var(--展开键高度, calc(var(--候高度) - 0.4rem)) !important;
	background: var(--V背景色);
	color: var(--候高亮首选色);
	border-left: .05rem solid rgba(100, 100, 100, .2);
}

body:not(.landscape) .keyboard:not(.popup) .keyboard-candidate-panel.page span:nth-last-child(2) {
	margin-right: calc(3.6rem);
}

.keyboard-candidate-panel span[data-active="1"] {
	color: var(--候高亮首选色);
}

/* 候选工具栏 */
.keyboard-candidate-panel .tool {
	line-height: var(--候工具位置, 2.2);
	font-family: 默认, 汉字字体, sans-serif;
	font-size: var(--候工具字大小, 1.9rem);
	padding: 0rem var(--候工具间距);
}

/* 候选栏 上标 */
.keyboard-candidate-panel .tool sup {
	font-size: 0.8rem;
	/* 设置上标的字体大小 */
	position: relative;
	top: -0.8rem;
	/* 调整上标向上的距离 */
	right: 0.2rem;
	/* 调整上标向右的位置,数值越小越靠右 */
}

.keyboard-code-panel {
	position: absolute;
	left: 1rem;
	top: var(--候编码位置);
	background: transparent;
	/*编码_背景色 */
	white-space: nowrap;
}

.keyboard-code-panel .code-got,
.keyboard-code-panel .code-text {
	color: var(--候字体颜色);
	font-family: var(--候选栏字体);
	font-size: var(--候编码字大小);
}

.keyboard-code-panel .code-caret {
	color: var(--候字体颜色);
	border: max(0.05rem, 1px) solid var(--候高亮首选色);
	/* 编码光标 */
}

.keyboard:not(.popup) .keyboard-border-inner {
	margin: 0;
	padding: 0;
	border-top: max(0.05rem, 1px) solid var(--候顶部线色2);
}

/* 上下标 */
.alt-note,
.hii-note {
	position: absolute;
	font-family: 汉字字体, 默认, Sans-serif;
	font-size: var(--上下标大小, .6rem);
	pointer-events: none;
}

.alt-note {
	top: 3%;
	right: 0.2rem;
	color: var(--上标, var(--上标字符色1));
}

.keyboard-key.special-key .alt-note {
	color: var(--上标, var(--上标字符色2));
}

.hii-note {
	bottom: 3%;
	left: 0.2rem;
	color: var(--下标, var(--上标字符色1));
}

.keyboard-key.special-key .hii-note {
	color: var(--下标, var(--上标字符色2));
}

/* 界面 */
.overlay {
	box-sizing: border-box;
	position: absolute;
	border-top: 0.1rem solid #000;
	background: #ddd;
	z-index: 99;
	overflow-y: auto;
	overflow-x: hidden;
	pointer-events: auto;
}

.overlay button:active {
	background: #6ec5d5;
	color: #000;
}

/* 符号界面 */
.emoji button {
	background: var(--符号按键背景, #454545);
	color: var(--符号字体色, #eee);
	font: 2.2rem/3.4rem Sans-serif;
	border: 1px solid #000;
	display: inline-block;
	border-radius: 0px;
	-webkit-user-select: none;
	user-select: none;
}

/* 编辑界面 */
.editor {
	border-top: 0.1rem solid #000;
	background: var(--键盘背景色);
}

.editor button {
	-webkit-user-select: none;
	user-select: none;
	position: absolute;
	/* background: linear-gradient(90deg, #fff 50%, #ddd 100%); */
	background: var(--背景色1);
	width: 4.2rem;
	color: var(--字体色1);
	font: 1.1rem Sans-serif;
	border: .1rem solid #000;
	display: inline-block;
	border-radius: .5rem;
	height: calc(var(--键高度)/1.2);
	line-height: calc(var(--键高度)/1.2);
	box-shadow:
		inset -.2rem .2rem .1rem rgba(255, 255, 255, .5),
		inset .1rem -.1rem .3rem rgba(0, 0, 0, .3),
		-.15rem 0 .2rem rgba(0, 0, 0, .3);
}

.editor button.selected {
	background: #B0C0E9;
	box-shadow: none;
	color: red;
}

.editor button.arrow,
.editor button.select {
	width: 4.2rem;
}

.editor button .alt {
	position: absolute;
	font-size: .8rem;
	color: #0091E3;
	top: -30%;
	right: 8%;
	pointer-events: none;
}

/*候选下拉展开界面*/
.mymy,
.cands {
	border-top: .1rem SOLID #000;
	background: var(--展开界面背景, #ddd);
	padding: 0;
}

.mymy div,
.cands div {
	display: flex;
	min-width: calc(100% / 6.35);
	min-height: 2.8rem;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	flex-wrap: wrap;
	border-radius: var(--展开键圆角, .4rem);
	-webkit-user-select: none;
	user-select: none;
	margin: .1rem;
}

.mymy div>div,
.cands div>div {
	border: var(--展开键边框, .1rem solid #000);
	background: var(--展开键背景, #aaa);
	color: var(--展开键字色, #000);
	box-shadow: var(--展开键阴影, 0 .1rem .2rem rgba(0, 0, 0, .3));
}

.mymy div>div {
	font-size: 1.7rem;
}

.cands span {
	color: var(--展开键字色, #000);
	font-size: var(--界面字体大小);
	font-family: var(--展开字体);
	text-shadow: var(--展开键字阴影, 0 .1rem 0 #000);
	position: relative;
	line-height: 1.2;
	margin-top: .6rem;
	/* 按键"上半"高度 */
	margin-bottom: 0;
}

.cands span>a {
	color: var(--展开编码颜色, #FA9B7E);
	font: .9rem/.5rem Sans-serif;
	text-shadow: var(--展开编码阴影, none);
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top: var(--展开编码位置, -.8em);
	/* 编码"上下"位置 */
}

.landscape .cands div {
	font: 2.2rem/3.0rem Sans-serif;
	padding: 0 0.4rem;
}

/*剪贴板界面*/
.clipboard {
	border-top: 0.1rem solid #000;
	background: #E7D4B3;
}

.clipboard button {
	box-sizing: border-box;
	width: calc(100% - 0.2rem);
	min-height: 3.4rem;
	margin: 0.2rem .1rem;
	background: transparent;
	color: var(--界面字体色, #000);
	font-size: var(--界面字体大小);
	font-family: var(--界面字体);
	text-shadow: 0 0 0 #000;
	border-radius: .3rem;
	border: 0.05rem solid #777;
	border: none;
	border-bottom: 0.2rem dashed #444;
	border-radius: 0rem;
	display: block;
	-webkit-user-select: none;
	user-select: none;
	padding: 0 0.2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.clipboard button span {
	position: absolute;
	right: 1%;
	font-size: .6rem;
	background: rgba(0, 0, 0, .1);
	border-radius: 1rem;
	color: var(--⏍时间, #A7DDF6);
	/*剪贴板_时间字体色*/
}

.clipboard p {
	background: #aaa;
	color: #333;
	font-size: 2rem;
}

.setting,
.phrase,
.theme {
	padding: 0 0.1rem;
	border-top: 0.1rem solid #000;
}

.msgbox .md,
.setting button,
.theme button,
.jslist button {
	/*临时⚝/设置/配色 界面字体设置*/
	font-size: var(--界面字体大小);
	font-family: sans-serif;
	text-align: left;
	border: 0.1rem solid #000;
	max-height: 2.2rem;
	display: inline-block;
	border-radius: .4rem;
	-webkit-user-select: none;
	user-select: none;
	margin: 0.1rem;
}

/* 临时信息⚝界面 */
.msgbox {
	background: #E7D4B3;
	border-top: 0.1rem solid #000;
	padding: .3rem;
	display: flex;
	justify-content: center;
	width: 100%;
}

.msgbox .md {
	font-family: 默认, 大字集, fantasy;
	font-size: 1.1rem;
	border: none;
	box-shadow: none;
	position: absolute;
	line-height: 1.6;
	width: 98%;
	min-height: 100%;
	white-space: pre-wrap;
	background: transparent;
	color: #444;
	font-weight: 900;
	text-shadow: 0 0 0 #fff;
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.msgbox .md details {
	/* ++ */
	scroll-behavior: smooth;
	background: rgba(251, 203, 139, .5);
	border-radius: .4rem .4rem 0 0;
	box-shadow: 0 .1rem .1rem rgba(0, 0, 0, .3);
}

.msgbox .md .p1 {
	padding: .2rem 0 .2rem 0;
}

.msgbox .md summary {
	border-radius: .4rem .4rem 0 0;
	padding-top: .6rem;
	padding-bottom: .3rem;
	line-height: 1.4;
	font-size: 1.3rem;
	text-shadow: 0 0 0 #000;
	color: #fff;
	background: royalblue;
}

.msgbox .md details summary {
	list-style: none;
	/* 隐藏默认三角 */
}

.msgbox .md details summary::before {
	content: " ＋ ";
	/* 初始状态箭头 */
	display: inline-block;
	margin-right: .3rem;
	color: #ffff00;
	transition: transform 0.2s;
}

.msgbox .md details[open] summary::before {
	content: " 丨";
	/* 展开状态箭头 */
	margin-right: .6rem;
	transform: rotate(90deg);
}

.msgbox .md .col-2 {
	/* **abc** */
	font-size: 1.1rem;
	background: linear-gradient(180deg, transparent 70%, rgba(0, 172, 230, .2) 30%);
	color: #333;
	font-weight: 900;
	border-radius: 0rem;
	text-shadow: none;
	padding: .3rem .2rem 0.1rem .2rem;
	margin: .1rem 0;
	border-bottom: .05rem solid #555;
}

.msgbox .md .col-3 {
	/* `abc` */
	background: none;
	border-radius: .2rem;
	color: #0562AC;
	border-left: .1rem solid transparent;
	border-right: .1rem solid transparent;
	text-shadow: 0 0 0 #fff;
}

.msgbox .md .col-4 {
	/* ###abc */
	font-weight: 900;
	font-size: 1.4rem;
	color: #80007f;
	text-shadow: 0 0 0 #fff;
	padding: .3rem 0 .6rem 0;
}

.msgbox .md .col-5 {
	/* ~~abc~~ */
	font-weight: 900;
	font-size: 1rem;
	color: #888;
}

.msgbox .md pre {
	/* ```abc``` */
	line-height: 1.5;
	padding: .5rem 0rem .5rem 0.2rem;
	font-family: fantasy;
	background-color: #eee;
	color: #111;
	white-space: pre-wrap;
	border-top: .1rem solid #444;
	border-left: .1rem solid #444;
	box-shadow: 0 .05rem 0 #fff;
	font-weight: 600;
	font-size: 1rem;
	width: 98.5%;
}

.msgbox .md pre.col-6 {
	/* [](url) */
	border-bottom-color: rgba(255, 255, 255, .3);
	text-decoration: underline;
	text-decoration-color: #555;
	color: #802498;
	background: rgba(255, 255, 255, .3);
	border-radius: .4rem .4rem 0 0;
	text-shadow: none;
	box-shadow: none;
	white-space: nowrap;
	overflow-x: auto;
}

.msgbox .md pre.col-6::before {
	content: '🌐 ';
	position: relative;
	right: 0;
}

.msgbox .md details pre {
	border: none;
	border-top: .1rem solid #aaa;
	width: 100%;
}

.msgbox .md .col-7 {
	/* //文本 */
	text-shadow: none;
	color: #999;
}

.msgbox .md .col-8 {
	/* 数字. - */
	color: #C00000;
	font-weight: 900;
}

.msgbox .md hr {
	border: .15rem dashed #aaa;
}

.msgbox .md table {
	width: 100%;
	border-collapse: collapse;
}

.msgbox .md th,
.msgbox .md td {
	border: .1rem solid #00394d;
	padding: .3rem;
	text-align: center;
}

.msgbox .md th {
	background-color: #DCC780;
}

.msgbox .md tbody tr:nth-child(odd) {
	background-color: rgba(235, 253, 238, .2);
	/* 奇数行颜色 */
}

.msgbox .md tbody tr:nth-child(even) {
	/*	background-color: rgba(234, 249, 255, .2); /* 偶数行颜色 */
}

/* 设置界面 */
.setting {
	background: #bbb;
}

.setting button {
	border: .1rem solid #32393E;
	border-radius: .4rem;
	box-shadow: .1rem .2rem .2rem rgba(0, 0, 0, .3);
	background: #484A65;
	color: #ddd;
	margin-top: .5rem;
	min-width: calc(98.4% / 2);
}

.setting button:nth-last-child(-n+2) {
	background: #484A65;
	color: #fff900;
	text-align: center;
}

/* 配色界面 */
.theme,
.jslist {
	background: #bbb;
}

.theme button,
.jslist button {
	border: .1rem solid #32393E;
	border-radius: 1rem;
	box-shadow: .1rem .2rem .2rem rgba(0, 0, 0, .3);
	background: #484A65;
	color: #ddd;
	margin-top: .5rem;
	font-size: 1.1rem;
	text-align: center;
	white-space: nowrap;
	line-height: 1;
}

/* 短语界面 */
.phrase {
	background: #E7D4B3;
}

.phrase button {
	font-size: var(--界面字体大小);
	font-family: var(--界面字体);
	padding: .2rem;
	margin: 0.1rem;
	min-height: 3.5rem;
	max-height: 100%;
	text-align: left;
	background: #E7D4B3;
	border: none;
	border-bottom: 0.2rem dashed #444;
	border-radius: 0rem;
	box-shadow: none;
	text-shadow: 0 0 0 #000;
}

/* 长按弹出菜单 */
.action-shadow {
	position: absolute;
	z-index: 100;
	display: none;
	background-color: rgba(200, 200, 200, 0.8);
	width: 100%;
	height: 98px;
	pointer-events: auto;
	overflow: hidden;
}

.action-center {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.action-menu {
	background: #bbb;
	border-radius: .5rem;
	/* 外圆角 */
	border: 0.2rem solid #222;
	padding: 0.2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: fit-content;
	max-width: 60%;
	/* 限制菜单的最大宽度，防止过宽 */
}

.action-menu>.action-item {
	position: relative;
	background: #414769;
	min-width: 4.5rem;
	border: 0.1rem solid #000;
	color: #ddd;
	margin: .1rem;
	box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .3);
	border-radius: .5rem;
	user-select: none;
	font-size: 1.6rem;
	line-height: 2;
	text-align: center;
	flex: 1 1 calc(25% - 5px);
}

.action-grid-menu>.action-item:active,
.action-menu>.action-item:active {
	background: #6ec5d5;
	color: #000;
}

/*工具栏*/
.keyboard.popup .adds,
.keyboard.popup .zg {
	display: none;
}

.adds,
.zg {
	box-sizing: border-box;
	display: var(--工具栏, none);
	justify-content: center;
	align-items: center;
}

.adds button {
	box-sizing: border-box;
	padding: 0 2px;
	width: 13%;
	margin: 0 auto;
	background: var(--背景色2);
	color: var(--字体色2);
	border: var(--键边框大小) solid var(--键边框颜色);
	border-radius: var(--键圆角);
	font-size: 1rem;
	text-shadow: var(--字阴影2);
	box-shadow: var(--键阴影);
	height: 2rem;
	white-space: nowrap;
}

.adds button[data-active="1"] {
	background: red;
}

/* 底部显示 */
body:not(.landscape) .keyboard:not(.popup) .bottom-zg {
	height: var(--底部增高);
	box-sizing: border-box;
	display: var(--底部显示, inline-block);
}

.bottom-zg span {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	font-family: 汉字字体, sans-serif;
	font-size: var(--底栏字大小, 1.3rem);
	color: var(--底栏字色, #000);
	text-align: center;
	bottom: var(--底栏字上下位置, 0.5%);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body:not(.landscape) .keyboard:not(.popup) .bottom-buttons {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.7rem;
    display: var(--底部显示, flex);
    pointer-events: none;
    z-index: 15;
}

.trans-btn {
    flex: 1;
    background: transparent;
    opacity: 0.3;
    pointer-events: auto;
}

.landscape .bottom-zg span, .landscape .bottom-buttons {
	display: none;
}

/* 信息弹窗 */
#myAlert {
	font-size: 1.3rem;
	min-width: 3.4rem;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #007bff;
	color: #fff;
	border-bottom: 0.01rem solid #000;
	border-radius: .4rem;
	padding: .3rem;
	z-index: 100;
	text-align: center;
	white-space: nowrap;
}

/* 单手模式,缩放键盘 */
.keyboard,
.action-shadow {
	width: var(--缩小, 100%);
}

.keyboard,
.action-shadow,
#keyboard-overlay {
	right: var(--右, initial);
}

.editor button {
	transform: scaleX(var(--缩小, 100%));
}

.action-menu>.action-item {
	margin: var(--间, .4rem);
}

/* 悬浮候选栏 */
.popup {
	--悬浮背景: #535564;
	--悬浮字色: #fff;
	--悬浮高亮: #ff0;
	--悬浮圆角: .4rem;
	--悬浮阴影:
		inset 0 .1rem .1rem rgba(255, 255, 255, .2),
		0 .1rem .1rem rgba(0, 0, 0, .4);
}

.popup .keyboard-candidate-panel {
	overflow: hidden;
	height: auto;
	/*自动高度*/
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	white-space: pre-wrap;
	/*nowrap不换行, pre-wrap换行*/
	background: rgba(100, 100, 100, .8) !important;
	/*背景色*/
	border-radius: var(--悬浮圆角);
	pointer-events: auto;
	border: none;
	padding-bottom: .2rem;
	box-shadow: none;
	text-align: center;
	margin-top: -.5rem;
}

.popup .keyboard-candidate-panel span {
	box-sizing: border-box;
	border: .1rem solid #000;
	border-radius: var(--悬浮圆角);
	background: var(--悬浮背景);
	font-size: 1.8rem;
	font-family: var(--候选栏字体);
	padding: .3rem 0 .1rem 0;
	margin: 0.1rem;
	line-height: 1;
	display: flex;
	min-width: calc(100% / 6.35);
	min-height: 2.8rem;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	flex-wrap: wrap;
	-webkit-user-select: none;
	user-select: none;
	box-shadow: var(--悬浮阴影)
}

.popup .keyboard-candidate-panel span:not(.first) {
	color: var(--悬浮字色) !important;
}

.keyboard.popup .keyboard-candidate-panel span.first {
	color: var(--悬浮高亮) !important;
}

.keyboard.popup .keyboard-candidate-panel span label.codetip {
	font-size: 1.2rem;
	color: var(--悬浮高亮);
	/* 补全编码字体色 */
}

/* 悬浮编码栏 */
.popup .keyboard-code-panel {
	/*	display:none; /* 隐藏编码栏 */
	position: relative;
	width: min-content;
	left: -.5%;
	border: .1rem solid #000;
	border-radius: var(--悬浮圆角);
	box-shadow: var(--悬浮阴影);
	background: var(--悬浮背景);
	padding: .2rem .2rem 0 .2rem;
	margin: .3rem;
}

.popup .keyboard-code-panel span {
	font-family: var(--候选栏字体);
	font-size: 1.5rem;
	color: var(--悬浮字色);
	line-height: 1.3;
}

.popup .keyboard-candidate-panel span[data-page="true"] {
	display: none;
}