/* ============================================================
   iEnglish Premium UI
   作为 xt-theme.css 的最后覆盖层，不改变现有页面结构与业务行为。
   ============================================================ */

:root {
	--xt-bg: #f3f6fa;
	--xt-surface: #ffffff;
	--xt-surface-soft: #f8fafc;
	--xt-surface-tint: #f1f5ff;
	--xt-navy-950: #081426;
	--xt-navy-900: #0d1c34;
	--xt-navy-800: #142945;
	--xt-text: #172033;
	--xt-text-soft: #42526a;
	--xt-muted: #64748b;
	--xt-muted-light: #8a98aa;
	--xt-border: #e3e9f1;
	--xt-border-strong: #d4ddea;
	--xt-primary: #315bea;
	--xt-primary-deep: #2447c6;
	--xt-primary-soft: #eaf0ff;
	--xt-accent: #17a6b8;
	--xt-success: #159a72;
	--xt-warning: #d98b18;
	--xt-danger: #dc4c64;
	--xt-radius-sm: 10px;
	--xt-radius-md: 14px;
	--xt-radius-lg: 18px;
	--xt-shadow-sm: 0 4px 14px rgba(15, 39, 64, .06);
	--xt-shadow-md: 0 14px 34px rgba(15, 39, 64, .10);
	--xt-shadow-lg: 0 26px 70px rgba(8, 20, 38, .16);
	--xt-ease: cubic-bezier(.2, .72, .25, 1);
}

html {
	background: var(--xt-bg);
}

body.xt-body {
	color: var(--xt-text);
	line-height: 1.6;
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background:
		radial-gradient(circle at 9% 4%, rgba(49, 91, 234, .12), transparent 28%),
		radial-gradient(circle at 92% 8%, rgba(23, 166, 184, .11), transparent 24%),
		linear-gradient(145deg, #f7f9fd 0%, #f1f5fa 52%, #eef4f8 100%) !important;
	background-attachment: fixed !important;
}

body.xt-body::before {
	content: "";
	position: fixed;
	left: auto;
	right: -220px;
	top: -270px;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(70, 103, 232, .16) 0%, rgba(70, 103, 232, 0) 68%);
	filter: blur(4px);
	opacity: 1;
	animation: xtPremiumFloat 16s var(--xt-ease) infinite alternate;
}

body.xt-body::after {
	content: "";
	position: fixed;
	z-index: 0;
	pointer-events: none;
	left: 10%;
	bottom: -360px;
	width: 760px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(23, 166, 184, .10) 0%, rgba(23, 166, 184, 0) 70%);
	filter: blur(10px);
}

@keyframes xtPremiumFloat {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-48px, 38px, 0) scale(1.08); }
}

body.xt-body ::selection {
	background: rgba(49, 91, 234, .20);
	color: var(--xt-navy-950);
}

body.xt-body * {
	scrollbar-width: thin;
	scrollbar-color: #b8c5d6 transparent;
}

body.xt-body *::-webkit-scrollbar { width: 8px; height: 8px; }
body.xt-body *::-webkit-scrollbar-track { background: transparent; }
body.xt-body *::-webkit-scrollbar-thumb {
	background: #bcc8d7;
	border: 2px solid transparent;
	border-radius: 8px;
	background-clip: padding-box;
}
body.xt-body *::-webkit-scrollbar-thumb:hover { background-color: #93a4b9; }

/* ---------- 应用壳 ---------- */
.xt-app {
	position: relative;
	z-index: 1;
	isolation: isolate;
	min-height: 100vh;
}

.xt-side {
	position: sticky;
	top: 0;
	width: 164px;
	height: 100vh;
	box-sizing: border-box;
	align-items: stretch;
	padding: 0 11px 14px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 22%),
		linear-gradient(165deg, var(--xt-navy-800), var(--xt-navy-950));
	border-right: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 16px 0 44px rgba(8, 20, 38, .12);
	overflow: hidden;
}

.xt-side::before {
	content: "";
	position: absolute;
	left: -85px;
	top: -105px;
	width: 270px;
	height: 270px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(75, 111, 255, .30), transparent 69%);
	pointer-events: none;
}

.xt-side::after {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -130px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(23, 166, 184, .18), transparent 70%);
	pointer-events: none;
}

.xt-brand {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	box-sizing: border-box;
	margin: 0 4px 8px;
	padding: 0 2px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: -.4px;
	text-shadow: none;
}

.xt-brand::before {
	display: none;
}

.xt-brand::after {
	content: "LEARNING";
	position: absolute;
	left: 50%;
	top: 58px;
	color: rgba(218, 229, 248, .56);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 1.35px;
	transform: translateX(-50%);
}

.xt-brand sup {
	margin-left: 2px;
	font-size: 9px;
	opacity: .72;
}

.xt-brand.user {
	max-width: 100%;
	padding: 0 8px;
	color: #f8fbff;
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 22px;
	font-weight: 650;
	font-style: normal;
	letter-spacing: .7px;
	line-height: 1.25;
	text-shadow: 0 4px 16px rgba(64, 126, 255, .26), 0 1px 0 rgba(255, 255, 255, .16);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}

.xt-brand.user::after {
	content: "当前用户";
	top: 62px;
	color: rgba(190, 210, 239, .68);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-shadow: none;
}

.xt-menu {
	position: relative;
	z-index: 1;
	flex: 1;
	width: 100%;
	padding: 4px 0 10px;
	overflow-x: hidden;
	overflow-y: auto;
}

.xt-menu-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	box-sizing: border-box;
	margin: 7px 3px;
	padding: 11px 6px 10px;
	border: 1px solid transparent;
	border-radius: 17px;
	color: #b9c7db;
	text-align: center;
	transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.xt-menu-item:hover,
.xt-menu-item:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .075);
	border-color: rgba(255, 255, 255, .08);
	transform: translateY(-1px);
	outline: none;
}

.xt-menu-item.on {
	color: #fff;
	background: linear-gradient(110deg, rgba(82, 111, 245, .34), rgba(34, 174, 190, .17));
	border-color: rgba(139, 162, 255, .26);
	box-shadow: 0 12px 28px rgba(3, 12, 29, .22), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.xt-menu-item.on::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 4px;
	height: 25px;
	border-radius: 4px;
	background: #7ee7ee;
	box-shadow: 0 0 14px rgba(126, 231, 238, .72);
	transform: translateY(-50%);
}

.xt-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
	color: #fff;
	font-size: 31px;
	line-height: 1;
	text-shadow: none;
	filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .16));
	transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.xt-menu-icon svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.xt-menu-item:hover .xt-menu-icon,
.xt-menu-item.on .xt-menu-icon {
	color: #fff;
	background: linear-gradient(145deg, rgba(112, 139, 255, .30), rgba(35, 186, 198, .20));
	box-shadow: 0 9px 22px rgba(3, 12, 29, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
	transform: scale(1.04);
}

.xt-menu-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .8px;
	line-height: 1.35;
}

/* 大图标保持原页面辨识度，底座颜色统一收敛到品牌色。 */
.xt-menu-item[data-page="test"] .xt-menu-icon,
.xt-menu-item[data-page="train"] .xt-menu-icon { background-color: rgba(70, 96, 210, .12); }
.xt-menu-item[data-page="review"] .xt-menu-icon,
.xt-menu-item[data-page="index"] .xt-menu-icon { background-color: rgba(32, 157, 169, .10); }
.xt-menu-item[data-page="phrase"] .xt-menu-icon,
.xt-menu-item[data-page="select"] .xt-menu-icon { background-color: rgba(135, 105, 208, .10); }

.xt-user-profile {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	padding: 11px 12px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: rgba(255, 255, 255, .045);
	color: #dbe6f5;
	min-width: 0;
}

.xt-user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 10px;
	background: linear-gradient(145deg, #657df0, #21afbd);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 6px 15px rgba(33, 78, 204, .28);
}

.xt-user-name {
	overflow: hidden;
	color: #dbe6f5;
	font-size: 13px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xt-main {
	min-height: 100vh;
	background: transparent;
}

.xt-top {
	position: sticky;
	top: 0;
	z-index: 40;
	min-height: 68px;
	box-sizing: border-box;
	padding: 13px 32px;
	background: rgba(247, 249, 253, .84);
	border-bottom: 1px solid rgba(212, 221, 234, .78);
	box-shadow: 0 5px 22px rgba(15, 39, 64, .035);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.xt-pill-btn {
	min-height: 38px;
	box-sizing: border-box;
	padding: 7px 14px;
	border: 1px solid var(--xt-border-strong);
	border-radius: 11px;
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 3px 10px rgba(15, 39, 64, .045);
	color: var(--xt-text-soft);
	font-size: 13px;
	font-weight: 500;
	text-shadow: none;
	transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.xt-pill-btn:hover,
.xt-pill-btn:focus-visible {
	background: #fff;
	border-color: #b8c6de;
	box-shadow: 0 7px 18px rgba(15, 39, 64, .09);
	color: var(--xt-primary);
	transform: translateY(-1px);
	outline: none;
}

.xt-pill-btn:disabled,
.xt-pill-btn[disabled] {
	opacity: .48;
	cursor: not-allowed;
	transform: none;
}

.xt-content {
	width: 100%;
	max-width: 1680px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 29px 34px 48px;
}

.xt-title-row {
	margin: 0 2px 19px;
}

.xt-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	color: var(--xt-text);
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.35px;
	line-height: 1.4;
	text-shadow: none;
}

.xt-title::before {
	content: "";
	align-self: center;
	width: 4px;
	height: 23px;
	margin-right: 11px;
	border-radius: 5px;
	background: linear-gradient(180deg, var(--xt-primary), var(--xt-accent));
	box-shadow: 0 4px 10px rgba(49, 91, 234, .20);
}

.xt-sub {
	margin-left: 12px;
	color: var(--xt-muted);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 1;
}

.xt-section-title,
.report-section-title {
	color: var(--xt-text);
	font-size: 17px;
	font-weight: 700;
	text-shadow: none;
}

/* ---------- 卡片与工具条 ---------- */
.xt-card {
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(222, 229, 239, .92);
	border-radius: var(--xt-radius-lg);
	box-shadow: var(--xt-shadow-md);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.xt-card:hover {
	border-color: #d6dfeb;
	box-shadow: 0 17px 40px rgba(15, 39, 64, .115);
}

.xt-page-card { padding: 18px 20px 22px; }
.xt-page-card .dic-wrapper { background: transparent; }

.xt-toolbar {
	gap: 8px;
	padding: 14px 16px;
	background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
	border-bottom: 1px solid var(--xt-border);
}

.xt-body .form-control,
.xt-body .xt-form-row input,
.xt-body .xt-form-row textarea,
.xt-body .xt-form-row select,
.xt-body #userSearch,
.xt-body .adaptive-input {
	height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--xt-border-strong);
	border-radius: var(--xt-radius-sm);
	background-color: #fff;
	box-shadow: inset 0 1px 2px rgba(15, 39, 64, .025);
	color: var(--xt-text);
	font-size: 14px;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.xt-body .form-control:focus,
.xt-body .xt-form-row input:focus,
.xt-body .xt-form-row textarea:focus,
.xt-body .xt-form-row select:focus,
.xt-body #userSearch:focus,
.xt-body .adaptive-input:focus {
	border-color: rgba(49, 91, 234, .72);
	box-shadow: 0 0 0 3px rgba(49, 91, 234, .11);
}

.xt-body .xt-form-row textarea { height: auto; min-height: 92px; padding: 10px 12px; }
.xt-body .xt-form-row label { color: var(--xt-text-soft); font-weight: 600; }

/* ---------- 全站下拉框 ---------- */
.xt-body select.form-control,
.xt-body select.select,
.xt-body .xt-form-row select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-height: 40px;
	padding: 0 34px 0 12px;
	border: 1px solid var(--xt-border-strong);
	border-radius: 11px;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' fill='none' stroke='%2364758b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 15px 15px;
	box-shadow: 0 3px 10px rgba(15, 39, 64, .035), inset 0 1px 0 rgba(255, 255, 255, .8);
	color: var(--xt-text-soft);
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 38px;
	text-overflow: ellipsis;
	cursor: pointer;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

.xt-body select.form-control:hover,
.xt-body select.select:hover,
.xt-body .xt-form-row select:hover {
	border-color: #afbed2;
	background-color: #fcfdff !important;
	box-shadow: 0 6px 15px rgba(15, 39, 64, .075), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.xt-body select.form-control:focus,
.xt-body select.select:focus,
.xt-body .xt-form-row select:focus {
	border-color: rgba(49, 91, 234, .76);
	background-color: #fff !important;
	box-shadow: 0 0 0 3px rgba(49, 91, 234, .11), 0 7px 16px rgba(15, 39, 64, .07);
}

.xt-body select.form-control:disabled,
.xt-body select.select:disabled,
.xt-body .xt-form-row select:disabled {
	border-color: #e0e6ee;
	background-color: #f2f5f8 !important;
	box-shadow: none;
	color: #98a4b3;
	cursor: not-allowed;
	opacity: .86;
}

.xt-body select.form-control option,
.xt-body select.select option,
.xt-body .xt-form-row select option {
	background: #fff;
	color: var(--xt-text);
	font-size: 14px;
	font-weight: 400;
}

.xt-body select.form-control option:disabled,
.xt-body select.select option:disabled,
.xt-body .xt-form-row select option:disabled { color: #9aa6b5; }

.xt-body select.form-control optgroup,
.xt-body select.select optgroup,
.xt-body .xt-form-row select optgroup {
	color: var(--xt-primary-deep);
	font-weight: 700;
}

.xt-body select.form-control::-ms-expand,
.xt-body select.select::-ms-expand,
.xt-body .xt-form-row select::-ms-expand { display: none; }

/* 若后续页面启用 bootstrap-select，也继承同一套视觉。 */
.xt-body .bootstrap-select.form-control,
.xt-body .bootstrap-select.select {
	height: 40px;
	min-height: 40px;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: transparent !important;
	box-shadow: none;
}

.xt-body .bootstrap-select > .dropdown-toggle {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
	width: 100%;
	padding: 8px 36px 8px 13px;
	border: 1px solid var(--xt-border-strong);
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 3px 10px rgba(15, 39, 64, .035);
	color: var(--xt-text-soft);
	font-size: 14px;
	font-weight: 500;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.xt-body .bootstrap-select > .dropdown-toggle::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5' fill='none' stroke='%2364758b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") center/15px 15px no-repeat;
	transform: translateY(-50%);
	transition: transform .2s var(--xt-ease);
}

.xt-body .bootstrap-select.open > .dropdown-toggle::after {
	transform: translateY(-50%) rotate(180deg);
}

.xt-body .bootstrap-select .bs-caret,
.xt-body .bootstrap-select .caret { display: none; }

.xt-body .bootstrap-select.btn-group .dropdown-toggle .filter-option {
	position: static;
	width: 100%;
	overflow: hidden;
	color: inherit;
	line-height: 22px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xt-body .bootstrap-select.open > .dropdown-toggle,
.xt-body .bootstrap-select > .dropdown-toggle:focus {
	border-color: rgba(49, 91, 234, .76);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(49, 91, 234, .11), 0 8px 18px rgba(15, 39, 64, .07);
	outline: none !important;
}

.xt-body .bootstrap-select > .dropdown-toggle:hover {
	border-color: #afbed2;
	background: #fcfdff;
}

.xt-body .bs-container.bootstrap-select {
	z-index: 1075;
}

.xt-body .bootstrap-select .dropdown-menu {
	min-width: 100%;
	margin-top: 7px;
	padding: 7px;
	border: 1px solid var(--xt-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 16px 38px rgba(15, 39, 64, .14);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transform-origin: top center;
	animation: xtSelectMenuIn .16s var(--xt-ease) both;
}

.xt-body .bootstrap-select.dropup .dropdown-menu {
	margin-top: 0;
	margin-bottom: 7px;
	transform-origin: bottom center;
}

@keyframes xtSelectMenuIn {
	from { opacity: 0; transform: translateY(-4px) scale(.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.xt-body .bootstrap-select .dropdown-menu.inner {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	animation: none;
}

.xt-body .bootstrap-select .bs-searchbox {
	padding: 3px 3px 8px;
}

.xt-body .bootstrap-select .bs-searchbox .form-control {
	height: 36px;
	padding: 7px 11px 7px 34px;
	border: 1px solid var(--xt-border-strong);
	border-radius: 9px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%238a98aa' stroke-width='1.8'/%3E%3Cpath d='m12.5 12.5 4 4' stroke='%238a98aa' stroke-linecap='round' stroke-width='1.8'/%3E%3C/svg%3E") 11px center/14px 14px no-repeat,
		#f8fafc;
	box-shadow: none;
	font-size: 13px;
}

.xt-body .bootstrap-select .bs-searchbox .form-control:focus {
	border-color: rgba(49, 91, 234, .70);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(49, 91, 234, .09);
}

.xt-body .bootstrap-select .dropdown-menu > li > a {
	position: relative;
	min-height: 36px;
	padding: 8px 32px 8px 11px;
	border-radius: 8px;
	color: var(--xt-text-soft);
	font-size: 13px;
	line-height: 20px;
	outline: none;
	transition: color .14s ease, background .14s ease;
}

.xt-body .bootstrap-select .dropdown-menu > li > a:hover,
.xt-body .bootstrap-select .dropdown-menu > li > a:focus,
.xt-body .bootstrap-select .dropdown-menu > li.selected > a {
	background: var(--xt-primary-soft);
	color: var(--xt-primary-deep);
}

.xt-body .bootstrap-select .dropdown-menu > li.selected > a {
	font-weight: 600;
}

.xt-body .bootstrap-select .dropdown-menu > li.selected > a::after {
	content: "✓";
	position: absolute;
	right: 11px;
	top: 50%;
	color: var(--xt-primary);
	font-size: 14px;
	font-weight: 700;
	transform: translateY(-50%);
}

.xt-body .bootstrap-select .dropdown-menu > li.disabled > a {
	background: transparent;
	color: #a4afbd;
	cursor: not-allowed;
}

.xt-body .bootstrap-select .dropdown-header {
	padding: 8px 11px 5px;
	color: var(--xt-primary-deep);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
}

.xt-body .bootstrap-select .no-results {
	margin: 2px;
	padding: 12px 10px;
	border-radius: 8px;
	background: #f8fafc;
	color: var(--xt-muted);
	font-size: 13px;
}

.xt-mini-btn,
.xt-add-btn,
.xt-row-del,
.xt-op,
.xt-clip-action {
	border-radius: 10px;
	font-weight: 500;
	transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

.xt-mini-btn {
	min-height: 36px;
	padding: 6px 15px;
	background: linear-gradient(135deg, var(--xt-primary), #4576f0);
	box-shadow: 0 6px 15px rgba(49, 91, 234, .20);
}

.xt-mini-btn.ghost {
	background: #fff;
	border: 1px solid var(--xt-border-strong);
	box-shadow: none;
	color: var(--xt-text-soft);
}

.xt-mini-btn.danger,
.xt-row-del,
.xt-op.del { background: var(--xt-danger); }
.xt-add-btn { background: var(--xt-success); }
.xt-op.edit { background: var(--xt-primary); }

.xt-mini-btn:hover,
.xt-add-btn:hover,
.xt-row-del:hover,
.xt-op:hover,
.xt-clip-action:hover {
	opacity: 1;
	box-shadow: 0 8px 18px rgba(15, 39, 64, .14);
	transform: translateY(-1px);
}

.xt-main-btn {
	min-height: 50px;
	border-radius: 14px;
	background: linear-gradient(120deg, var(--xt-primary), #4b6fe6 56%, var(--xt-accent));
	box-shadow: 0 13px 28px rgba(49, 91, 234, .25);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.xt-main-btn:hover,
.xt-main-btn:focus-visible {
	opacity: 1;
	box-shadow: 0 17px 34px rgba(49, 91, 234, .31);
	filter: saturate(1.06);
	transform: translateY(-2px);
	outline: none;
}

.xt-main-btn[disabled] {
	background: #b8c2cf;
	box-shadow: none;
}

.xt-body .btn {
	border-radius: 10px;
	font-weight: 500;
	transition: box-shadow .18s ease, transform .18s ease;
}

.xt-body .btn-primary {
	border-color: var(--xt-primary);
	background: var(--xt-primary);
}

.xt-body .btn-default {
	border-color: var(--xt-border-strong);
	background: #fff;
	color: var(--xt-text-soft);
}

.xt-body .btn:hover { transform: translateY(-1px); box-shadow: var(--xt-shadow-sm); }

/* ---------- 列表、筛选和状态 ---------- */
.xt-word-row,
.xt-review-row,
.xt-bookrow,
.xt-item-row,
.xt-userrow,
.xt-history-row,
.xt-report-item,
.xt-mem-row {
	border-color: var(--xt-border);
	transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.xt-word-row:hover,
.xt-review-row:hover,
.xt-bookrow:hover,
.xt-item-row:hover,
.xt-userrow:hover,
.xt-history-row:hover {
	background: #f7f9fd;
}

.xt-mem-row {
	border-color: var(--xt-border);
	border-radius: 13px;
	background: #fff;
}

.xt-mem-row:hover {
	background: var(--xt-surface-tint);
	border-color: #b9c8ef;
	box-shadow: 0 7px 18px rgba(49, 91, 234, .09);
}

.xt-item-row.on,
.xt-userrow.on,
.xt-mem-row.active {
	background: linear-gradient(110deg, #315bea, #3972dc);
	border-color: transparent;
	box-shadow: 0 9px 22px rgba(49, 91, 234, .23);
}

.xt-word-en,
.xt-mem-row .en,
.xt-review-row .en,
.xt-book-name,
.xt-item-main .t1,
.xt-userrow .name,
.xt-report-item .en { color: var(--xt-text); }

.xt-word-cn,
.xt-review-row .cn,
.xt-book-meta,
.xt-book-desc,
.xt-item-main .t2,
.xt-userrow .meta,
.xt-report-item .cn { color: var(--xt-muted); }

.xt-chip {
	margin-left: 8px;
	border: 1px solid var(--xt-border);
	background: rgba(255, 255, 255, .82);
	box-shadow: var(--xt-shadow-sm);
	color: var(--xt-text-soft);
}

.xt-order-toggle { color: var(--xt-muted); }
.xt-order-toggle span.on { color: var(--xt-primary); }

.xt-mode-btn,
.xt-day-chip,
.xt-bind-btn,
.xt-radio-btn {
	border-color: var(--xt-border-strong);
	background: #fff;
	color: var(--xt-muted);
	box-shadow: none;
}

.xt-mode-btn:hover,
.xt-day-chip:hover,
.xt-bind-btn:hover {
	border-color: #9fb1df;
	color: var(--xt-primary);
}

.xt-mode-btn.on,
.xt-day-chip.on {
	border-color: var(--xt-primary);
	background: var(--xt-primary);
	color: #fff;
}

.xt-bind-btn.on { border-color: var(--xt-success); background: var(--xt-success); }
.xt-radio-btn.on-yes { background: var(--xt-success); }
.xt-radio-btn.on-no { background: var(--xt-danger); }

.xt-empty {
	color: var(--xt-muted-light);
	font-size: 14px;
}

.xt-empty::before {
	content: "—";
	display: block;
	margin-bottom: 6px;
	color: #c4ceda;
	font-size: 28px;
	font-weight: 300;
}

.xt-admin-head,
.xt-col-head {
	padding-top: 14px;
	padding-bottom: 14px;
	background: #f8fafc;
	border-color: var(--xt-border);
	color: var(--xt-text-soft);
}

.xt-unit-panel {
	background: #f8fafc;
	border-color: #cbd6e4;
}

.xt-unit-tip,
.xt-clip-subtitle { color: var(--xt-muted); }

.xt-clipbox-tip {
	color: var(--xt-muted);
	text-shadow: none;
}

/* ---------- 搜索、词典和短句 ---------- */
.xt-search {
	margin-bottom: 18px;
	filter: drop-shadow(0 10px 22px rgba(15, 39, 64, .08));
}

.xt-search-input {
	height: 50px;
	border: 1px solid var(--xt-border-strong);
	border-right: none;
	border-radius: 14px 0 0 14px;
	box-shadow: none;
	color: var(--xt-text);
}

.xt-search-input:focus {
	border-color: rgba(49, 91, 234, .72);
	box-shadow: inset 0 0 0 1px rgba(49, 91, 234, .16);
	outline: none;
}

.xt-search-btn {
	width: 104px;
	border-radius: 0 14px 14px 0;
	background: linear-gradient(135deg, var(--xt-primary), var(--xt-accent));
	box-shadow: none;
	font-weight: 600;
}

.xt-clear { background: #b6c1cf; }
.xt-page-card .dic-wrapper { color: var(--xt-text); }

.xt-save-mode-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--xt-muted) !important;
}

.xt-save-mode-row .xt-mode-group { margin-left: 0; }

.xt-body textarea.fy {
	border-color: var(--xt-border-strong);
	border-radius: 13px;
	background: #fbfcfe;
	color: var(--xt-text);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.xt-body textarea.fy:focus {
	border-color: rgba(49, 91, 234, .72);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(49, 91, 234, .10);
	outline: none;
}

.xt-page-card .weui-cells { background: transparent; }
.xt-page-card .weui-cell { border-color: var(--xt-border); }

/* ---------- 测试、训练与报告 ---------- */
.xt-q-card {
	padding: 34px 34px 38px;
}

.xt-q-en,
.xt-quiz-en {
	color: var(--xt-text);
	letter-spacing: -.8px;
}

.xt-q-head,
.xt-quiz-count,
.xt-quiz-sec,
.adaptive-meta { color: var(--xt-muted); }

.xt-q-head b,
.xt-quiz-sec b { color: var(--xt-primary); }

.xt-option {
	border: 1px solid var(--xt-border);
	border-radius: 13px;
	background: #f8fafc;
	box-shadow: 0 4px 12px rgba(15, 39, 64, .045);
	color: var(--xt-text-soft);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.xt-option:hover {
	border-color: #a9b9e4;
	background: #f2f5ff;
	box-shadow: 0 8px 18px rgba(49, 91, 234, .10);
	transform: translateY(-1px);
}

.xt-option.right { border-color: var(--xt-success); background: var(--xt-success); color: #fff; }
.xt-option.wrong { border-color: var(--xt-danger); background: var(--xt-danger); color: #fff; }

.xt-opt-badge {
	background: var(--xt-primary);
	box-shadow: 0 4px 10px rgba(49, 91, 234, .24);
}

.xt-quiz-timer-wrap {
	height: 8px;
	background: #e7ecf3;
}

.xt-quiz-timer { background: linear-gradient(90deg, var(--xt-primary), var(--xt-accent)); }
.xt-quiz-timer.warn { background: linear-gradient(90deg, var(--xt-danger), #ef8965); }

.xt-grid { gap: 2px; }
.xt-num { color: var(--xt-primary); }
.xt-num.bad { color: var(--xt-danger); }
.xt-label { color: var(--xt-muted); }

.parent-hero {
	background: linear-gradient(135deg, #eff3ff, #f5fbfc);
	border-color: #d9e3f3;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.parent-card,
.parent-plan-box,
.technical-item {
	border: 1px solid var(--xt-border);
	background: #fbfcfe;
	box-shadow: 0 5px 15px rgba(15, 39, 64, .035);
}

.parent-card-label,
.parent-headline,
.technical-value { color: var(--xt-text); }
.parent-card-title,
.parent-card-text,
.parent-summary,
.technical-name { color: var(--xt-muted); }

.parent-actions {
	border: 1px solid #dcebe5;
	background: #f2faf6;
}

.parent-note {
	border-left-color: var(--xt-warning);
	background: #fff9ed;
}

.adaptive-level,
.plan-tag {
	background: var(--xt-primary-soft);
	color: var(--xt-primary-deep);
}

.report-generating {
	background: rgba(8, 20, 38, .56);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.report-generating-card {
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 22px;
	box-shadow: var(--xt-shadow-lg);
}

.report-generating-spinner {
	border-color: #e5eaf3;
	border-top-color: var(--xt-primary);
	border-right-color: var(--xt-accent);
}

.report-generating-title { color: var(--xt-text); }
.report-generating-text { color: var(--xt-muted); }

/* ---------- 登录 ---------- */
.xt-login-wrap {
	position: relative;
	z-index: 1;
	padding: 32px;
}

.xt-login-card {
	position: relative;
	overflow: hidden;
	max-width: 430px;
	padding: 48px 44px 40px;
	border: 1px solid rgba(255, 255, 255, .82);
	border-radius: 24px;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 30px 80px rgba(15, 39, 64, .19);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.xt-login-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--xt-primary), #6379ec, var(--xt-accent));
}

.xt-login-kicker {
	margin-bottom: 10px;
	color: var(--xt-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.1px;
	text-align: center;
}

.xt-login-brand {
	margin-bottom: 6px;
	color: var(--xt-text);
	font-size: 34px;
	font-style: normal;
	letter-spacing: -1px;
}

.xt-login-subtitle {
	margin-bottom: 28px;
	color: var(--xt-muted);
	font-size: 13px;
	text-align: center;
}

.xt-login-input {
	height: 48px;
	margin-bottom: 14px;
	border-color: var(--xt-border-strong);
	border-radius: 12px;
	background: rgba(249, 251, 253, .92);
	color: var(--xt-text);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.xt-login-input:focus {
	border-color: rgba(49, 91, 234, .72);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(49, 91, 234, .11);
}

.xt-login-btn {
	height: 50px;
	margin-top: 4px;
	border-radius: 13px;
	background: linear-gradient(120deg, var(--xt-primary), #526de3 58%, var(--xt-accent));
	box-shadow: 0 13px 25px rgba(49, 91, 234, .24);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 4px;
	transition: box-shadow .2s ease, transform .2s ease;
}

.xt-login-btn:hover,
.xt-login-btn:focus-visible {
	box-shadow: 0 17px 32px rgba(49, 91, 234, .31);
	transform: translateY(-2px);
	outline: none;
}

.xt-login-foot {
	margin-top: 22px;
	color: var(--xt-muted-light);
	font-size: 11px;
	letter-spacing: .4px;
	text-align: center;
}

/* ---------- Bootstrap Modal 与 Layer ---------- */
.xt-body .modal-backdrop.in { opacity: .58; }

.xt-body .modal-content {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .74);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(8, 20, 38, .27);
}

.xt-body .modal-header {
	padding: 20px 22px 14px;
	border-bottom: 1px solid var(--xt-border);
	background: linear-gradient(180deg, #fff, #fbfcfe);
}

.xt-body .modal-title {
	color: var(--xt-text);
	font-size: 18px;
	font-weight: 700;
}

.xt-body .modal-header .close {
	color: #66758a;
	font-size: 27px;
	font-weight: 400;
	opacity: .72;
}

.xt-body .modal-body { padding: 20px 22px; color: var(--xt-text-soft); }
.xt-body .modal-footer { padding: 14px 22px 20px; border-top: 1px solid var(--xt-border); }

body .layui-layer {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .72) !important;
	border-radius: 17px !important;
	box-shadow: 0 25px 70px rgba(8, 20, 38, .25) !important;
}

body .layui-layer-title {
	height: 52px !important;
	padding: 0 48px 0 20px !important;
	border-color: var(--xt-border) !important;
	background: linear-gradient(180deg, #fff, #f8fafc) !important;
	color: var(--xt-text) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 52px !important;
}

body .layui-layer-content { color: var(--xt-text-soft); }
body .layui-layer-setwin { top: 19px !important; }
body .layui-layer-btn { padding: 12px 16px 16px !important; border-color: var(--xt-border) !important; }
body .layui-layer-btn a {
	height: 34px !important;
	border-radius: 9px !important;
	font-weight: 500 !important;
	line-height: 34px !important;
}
body .layui-layer-btn .layui-layer-btn0 {
	border-color: var(--xt-primary) !important;
	background: var(--xt-primary) !important;
}
body .layui-layer-msg {
	border: 1px solid rgba(255, 255, 255, .65) !important;
	border-radius: 13px !important;
	background: rgba(13, 28, 52, .94) !important;
	box-shadow: 0 16px 45px rgba(8, 20, 38, .26) !important;
}
body .layui-layer-msg .layui-layer-content { color: #fff !important; }

.xt-body .datetimepicker {
	border: 1px solid var(--xt-border);
	border-radius: 14px;
	box-shadow: var(--xt-shadow-lg);
}

/* ---------- 轻动效与键盘可用性 ---------- */
.xt-content > div,
.xt-content > .xt-card,
.xt-content > .xt-title-row {
	animation: xtContentIn .42s var(--xt-ease) both;
}

@keyframes xtContentIn {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: translateY(0); }
}

.xt-body button:focus-visible,
.xt-body a:focus-visible,
.xt-body [tabindex]:focus-visible {
	outline: 3px solid rgba(49, 91, 234, .28);
	outline-offset: 2px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) and (min-width: 761px) {
	.xt-side { width: 148px; padding-left: 9px; padding-right: 9px; }
	.xt-brand { padding-left: 0; font-size: 18px; }
	.xt-brand::after { left: 50%; letter-spacing: 1px; }
	.xt-menu-item { gap: 4px; padding-left: 5px; padding-right: 5px; }
	.xt-menu-icon { width: 48px; height: 48px; font-size: 28px; }
	.xt-content { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 760px) {
	body.xt-body {
		background-attachment: scroll !important;
	}

	body.xt-body::before,
	body.xt-body::after {
		animation: none;
		opacity: .55;
	}

	.xt-app {
		display: block;
		padding-bottom: 74px;
	}

	.xt-side {
		position: fixed;
		z-index: 1000;
		left: 8px;
		right: 8px;
		top: auto;
		bottom: 8px;
		display: block;
		width: auto;
		height: 66px;
		padding: 5px 7px;
		border: 1px solid rgba(255, 255, 255, .13);
		border-radius: 18px;
		box-shadow: 0 18px 45px rgba(8, 20, 38, .27);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}

	.xt-side::before,
	.xt-side::after,
	.xt-brand,
	.xt-user-profile { display: none; }

	.xt-menu {
		display: flex;
		align-items: stretch;
		width: 100%;
		height: 100%;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
	}

	.xt-menu-item {
		flex: 1 0 68px;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		min-width: 68px;
		height: 56px;
		margin: 0 2px;
		padding: 4px 5px;
		border-radius: 13px;
		text-align: center;
		scroll-snap-align: center;
	}

	.xt-menu-item:hover { transform: none; }
	.xt-menu-item.on::after {
		left: 50%;
		right: auto;
		top: auto;
		bottom: 2px;
		width: 16px;
		height: 3px;
		transform: translateX(-50%);
	}

	.xt-menu-icon {
		width: 28px;
		height: 28px;
		border-radius: 8px;
		font-size: 19px;
		filter: none;
	}

	.xt-menu-icon svg { width: 17px; height: 17px; }
	.xt-menu-label { display: block; font-size: 9px; letter-spacing: 0; }

	.xt-main { min-height: 100vh; padding-bottom: 0; }
	.xt-top { min-height: 58px; padding: 9px 12px; column-gap: 8px; row-gap: 6px; }
	.xt-top-left { flex: 0 0 auto; }
	.xt-top-right { flex: 1 1 auto; min-width: 0; gap: 4px; justify-content: flex-end; }
	.xt-pill-btn { min-height: 35px; padding: 6px 10px; }
	.xt-content { padding: 20px 12px 34px; }
	.xt-title-row { gap: 10px; margin-bottom: 15px; }
	.xt-title { font-size: 21px; }
	.xt-title::before { height: 20px; margin-right: 8px; }
	.xt-sub { width: 100%; margin: 4px 0 0 12px; font-size: 12px; }
	.xt-title-right { margin-left: 10px; }
	.xt-card { border-radius: 15px; }
	.xt-card:hover { box-shadow: var(--xt-shadow-md); }
	.xt-page-card { padding: 13px 12px 16px; }
	.xt-toolbar { gap: 6px; padding: 11px; }
	.xt-toolbar .bootstrap-select.xt-select-enhanced,
	.xt-toolbar .bootstrap-select.form-control,
	.xt-form-row .bootstrap-select,
	.xt-body .weui-cell__bd .bootstrap-select {
		width: 100% !important;
		max-width: 100%;
		margin-right: 0 !important;
	}
	.xt-toolbar .bootstrap-select.xt-select-enhanced,
	.xt-toolbar .bootstrap-select.form-control { margin-bottom: 6px; }
	.xt-chip { margin-top: 4px; box-shadow: none; }
	.xt-q-card { padding: 25px 16px 28px; }
	.xt-option { border-radius: 11px; }
	.xt-login-wrap { padding: 18px; }
	.xt-login-card {
		width: calc(100vw - 36px);
		max-width: 400px;
		box-sizing: border-box;
		padding: 40px 25px 32px;
		border-radius: 21px;
	}
	.xt-login-brand { font-size: 31px; }
	.xt-body .modal-dialog { margin: 16px 10px; }
	.xt-body .modal-content { border-radius: 17px; }
	.xt-manage-col,
	.xt-manage-col.wide { width: 100%; box-sizing: border-box; }
}

@media (max-width: 420px) {
	.xt-top { align-items: flex-start; }
	.xt-top-right { justify-content: flex-end; }
	.xt-pill-btn { padding-left: 8px; padding-right: 8px; font-size: 12px; }
	.xt-content { padding-left: 10px; padding-right: 10px; }
	.xt-menu-item { flex-basis: 64px; min-width: 64px; }
	.xt-word-row,
	.xt-review-row { padding-left: 10px; padding-right: 10px; }
	.xt-main-btn { width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
	body.xt-body::before,
	.xt-content > div,
	.xt-content > .xt-card,
	.xt-content > .xt-title-row {
		animation: none !important;
	}

	.xt-menu-item,
	.xt-pill-btn,
	.xt-main-btn,
	.xt-option,
	.xt-mem-row {
		transition-duration: .01ms !important;
	}
}