/* ============================================================
   iEnglish 全站主题（蓝天白云）：侧边栏 + 顶栏 + 白卡片
   所有类名以 xt- 前缀，px 单位，不受各页 html rem 字号影响
   ============================================================ */

body.xt-body {
	margin: 0 !important; padding: 0 !important;
	/* 蓝天白云：多层radial-gradient自绘云朵 + 上深下浅天空渐变 */
	background:
		radial-gradient(ellipse 340px 95px at 16% 20%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 42%, rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 230px 70px at 25% 15%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 65%),
		radial-gradient(ellipse 400px 105px at 80% 10%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.42) 48%, rgba(255,255,255,0) 72%),
		radial-gradient(ellipse 250px 78px at 88% 15%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 65%),
		radial-gradient(ellipse 480px 115px at 50% 58%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 320px 95px at 6% 74%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 380px 100px at 94% 82%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 70%),
		linear-gradient(180deg, #3d9be6 0%, #5fb4f0 36%, #9dd4f7 72%, #d8effd 100%) !important;
	background-attachment: fixed;
	font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
	min-height: 100vh;
	font-size: 14px;
	/* 老index.css有 body{opacity:0} 防闪烁规则（靠body-week-up类恢复），这里强制恢复可见 */
	opacity: 1 !important;
	visibility: visible !important;
}

/* 一朵缓慢飘过的云（装饰层，在内容之下、不挡点击） */
body.xt-body::before {
	content: "";
	position: fixed;
	z-index: 0;
	pointer-events: none;
	width: 460px;
	height: 130px;
	left: -500px;
	top: 8%;
	background:
		radial-gradient(ellipse 200px 70px at 35% 62%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 150px 60px at 62% 45%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 70%),
		radial-gradient(ellipse 230px 60px at 50% 72%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 72%);
	filter: blur(2px);
	animation: xtCloudDrift 110s linear infinite;
}
@keyframes xtCloudDrift {
	from { transform: translateX(0); }
	to { transform: translateX(calc(100vw + 1000px)); }
}

/* ============ 整体布局 ============ */
.xt-app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* ============ 左侧导航 ============ */
.xt-side {
	width: 132px; flex-shrink: 0;
	background: rgba(13, 71, 130, 0.22);
	display: flex; flex-direction: column; align-items: center;
	padding-top: 18px;
}
.xt-brand {
	color: #fff; font-size: 28px; font-weight: bold; font-style: italic;
	letter-spacing: 1px; margin-bottom: 24px; text-shadow: 0 2px 5px rgba(0,0,0,.3);
	line-height: 1.2;
}
.xt-brand sup { font-size: 11px; font-style: normal; }
/* 品牌位显示用户名时的样式（去斜体、防长名溢出） */
.xt-brand.user {
	font-style: normal; font-size: 24px; letter-spacing: 0;
	word-break: break-all; padding: 0 8px; max-width: 100%;
}
.xt-menu { width: 100%; }
.xt-menu-item {
	display: block; text-align: center; text-decoration: none;
	margin: 12px 14px; padding: 16px 4px 13px; border-radius: 18px;
	color: rgba(255,255,255,.88); cursor: pointer;
}
.xt-menu-item:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.xt-menu-item.on {
	background: rgba(255,255,255,.24);
	box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
	color: #fff;
}
.xt-menu-icon {
	display: block; font-size: 38px; line-height: 1; margin-bottom: 9px;
	text-shadow: 0 3px 6px rgba(0,0,0,.2);
}
.xt-menu-label { font-size: 14px; letter-spacing: 2px; line-height: 1.4; }

/* ============ 右侧主区 ============ */
.xt-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* 顶栏 */
.xt-top {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 24px 10px;
	border-bottom: 1px solid rgba(255,255,255,.18);
}
.xt-top-left, .xt-top-right { display: flex; align-items: center; }
.xt-pill-btn {
	display: inline-block; padding: 6px 16px; border-radius: 18px;
	background: rgba(255,255,255,.30); color: #fff; font-size: 14px;
	cursor: pointer; border: none; margin-left: 10px; white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,60,120,.25); line-height: 1.5;
}
.xt-pill-btn:first-child { margin-left: 0; }
.xt-pill-btn:hover { background: rgba(255,255,255,.45); }

/* 内容区 */
.xt-content { flex: 1; padding: 14px 26px 30px; }

/* 标题行 */
.xt-title-row {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; margin: 6px 2px 14px;
}
.xt-title { color: #fff; font-size: 21px; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,.2); line-height: 1.5; }
.xt-title-right { display: flex; align-items: center; flex-wrap: wrap; }
.xt-sub { font-size: 13px; font-weight: normal; opacity: .85; margin-left: 10px; }
.xt-order-toggle { color: rgba(255,255,255,.65); font-size: 15px; margin-right: 16px; user-select: none; }
.xt-order-toggle span { cursor: pointer; margin-left: 10px; }
.xt-order-toggle span.on { color: #fff; font-weight: bold; }
.xt-chip {
	display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 17px;
	background: rgba(0,0,0,.22); color: #fff; font-size: 14px; margin-left: 10px;
}
.xt-chip .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 7px; font-size: 10px; line-height: 14px; text-align: center; color: #fff; }
.xt-chip .dot-yes { background: #34d399; }
.xt-chip .dot-no { background: #f87171; }
.xt-chip .dot-none { background: #b9c2cc; }
.xt-chip b { margin: 0 3px; }

/* 白色卡片 */
.xt-card {
	background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.15);
	overflow: hidden;
}
.xt-page-card { padding: 12px 16px 16px; }
.xt-page-card .weui-cells { margin: 6px 0 0; }

/* 筛选工具条 */
.xt-toolbar {
	display: flex; align-items: center; flex-wrap: wrap;
	padding: 12px 16px; background: #f6f8f9; border-bottom: 1px solid #eef1f2;
}
.xt-toolbar .form-control { display: inline-block; height: 32px; padding: 4px 8px; font-size: 13px; }
.xt-toolbar select.form-control { width: 130px; margin-right: 8px; }
.xt-toolbar input.time-input { width: 110px; margin-right: 8px; }
.xt-mini-btn {
	display: inline-block; padding: 5px 14px; border-radius: 16px; border: none;
	background: #1e88e5; color: #fff; font-size: 13px; cursor: pointer; margin-right: 8px;
	line-height: 1.6;
}
.xt-mini-btn.ghost { background: #fff; color: #556; border: 1px solid #d5dbe0; }
.xt-mini-btn.danger { background: #ef5350; }
.xt-mini-btn:hover { opacity: .88; }
/* 行内删除小按钮（删除模式） */
.xt-row-del {
	flex-shrink: 0; padding: 5px 13px; border: none; border-radius: 5px;
	background: #ef5350; color: #fff; font-size: 13px; cursor: pointer; margin-left: 10px;
}
.xt-row-del:hover { opacity: .85; }

/* 单词列表（筛词） */
.xt-word-list { max-height: 56vh; overflow-y: auto; }
.xt-word-row {
	display: flex; align-items: center; padding: 20px 26px;
	border-bottom: 1px solid #f3f5f6;
}
.xt-word-row:last-child { border-bottom: none; }
.xt-word-en {
	font-size: 24px; font-weight: bold; color: #1c1c1c; cursor: pointer;
	min-width: 170px; word-break: break-all;
}
.xt-word-mid { flex: 1; align-self: stretch; display: flex; align-items: center; min-width: 0; padding: 0 12px; cursor: pointer; }
.xt-word-cn { display: none; color: #555; font-size: 15px; }
.xt-play {
	display: none; margin-left: 14px; cursor: pointer; color: #333; font-size: 15px;
	flex-shrink: 0;
}
.xt-word-row.expanded .xt-word-cn, .xt-word-row.expanded .xt-play { display: inline-block; }

/* Yes/No radio风格按钮 */
.xt-ops { white-space: nowrap; }
.xt-radio-btn {
	display: inline-block; min-width: 88px; text-align: center;
	padding: 9px 14px; margin-left: 12px; border-radius: 5px;
	background: #e9ebed; color: #9aa3ab; font-size: 15px; cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,.12); user-select: none;
}
.xt-radio-btn .ring {
	display: inline-block; width: 13px; height: 13px; border-radius: 50%;
	border: 2px solid #b5bdc4; margin-right: 7px; vertical-align: -1px; background: #fff;
}
.xt-radio-btn:hover { background: #dfe3e6; }
.xt-radio-btn.on-yes { background: #22b573; color: #fff; }
.xt-radio-btn.on-yes .ring { border-color: #fff; background: #7df0b8; }
.xt-radio-btn.on-no { background: #ef5350; color: #fff; }
.xt-radio-btn.on-no .ring { border-color: #fff; background: #ffab91; }

/* 空列表 */
.xt-empty { text-align: center; color: #98a2ab; padding: 50px 0; font-size: 15px; }

/* ============ 识记视图 ============ */
.xt-mem-list { max-height: 60vh; overflow-y: auto; padding: 10px 14px; }
.xt-mem-row {
	display: flex; align-items: center; margin: 10px 4px; padding: 14px 20px;
	border-radius: 10px; background: #fff; border: 1px solid #eef1f4; cursor: pointer;
}
.xt-mem-row:hover {
	background: #d4e9fc; border-color: #7db8ec;
	box-shadow: 0 3px 10px rgba(30,136,229,.18);
	transform: translateX(3px);
}
.xt-mem-row { transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.xt-mem-row .en { font-size: 22px; font-weight: bold; color: #1c1c1c; min-width: 150px; word-break: break-all; cursor: pointer; }
.xt-mem-row .mid { flex: 1; align-self: stretch; display: flex; align-items: center; min-width: 0; padding: 0 14px; cursor: pointer; }
.xt-mem-row .detail { display: none; font-size: 14px; color: #667; }
.xt-mem-row.expanded .detail { display: inline-block; }
.xt-mem-row .btn-spell {
	display: inline-block; padding: 5px 14px; border-radius: 5px; border: none;
	background: #22b573; color: #fff; font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.xt-mem-row.active { background: #1976d2; border-color: #1976d2; box-shadow: 0 4px 12px rgba(25,118,210,.35); }
.xt-mem-row.active .en { color: #fff; }
.xt-mem-row.active .detail { color: #dcecff; }

/* 底部主按钮 */
.xt-bottom { text-align: center; padding: 22px 0 6px; }
.xt-main-btn {
	display: inline-block; width: 260px; padding: 12px 0; border: none;
	border-radius: 26px; font-size: 18px; color: #fff; cursor: pointer; letter-spacing: 4px;
	background: linear-gradient(90deg, #1e88e5, #00bcd4);
	box-shadow: 0 8px 20px rgba(20,80,150,.35);
}
.xt-main-btn:hover { opacity: .92; }
.xt-main-btn[disabled] { background: #b9c2cc; cursor: not-allowed; }

/* ============ 训练视图 ============ */
.xt-q-card { max-width: 720px; margin: 0 auto; padding: 30px 30px 34px; }
.xt-q-head { display: flex; justify-content: space-between; color: #8a949c; font-size: 14px; margin-bottom: 6px; }
.xt-q-head b { color: #1e88e5; }
.xt-q-en { text-align: center; font-size: 42px; font-weight: bold; color: #1c1c1c; padding: 26px 0 6px; word-break: break-all; }
.xt-q-sound { text-align: center; margin-bottom: 18px; }
.xt-q-sound span { color: #1e88e5; cursor: pointer; font-size: 15px; }
.xt-options { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.xt-option {
	width: calc(50% - 16px); margin: 8px; padding: 15px 16px; border-radius: 8px;
	background: #f1f3f5; color: #333; font-size: 17px; text-align: center; cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,.08); border: 2px solid transparent; user-select: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xt-option:hover { background: #e7ebee; }
/* 测试页选项：圆形字母徽章 */
.xt-option.with-badge { display: flex; align-items: center; justify-content: center; }
.xt-opt-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
	background: #1e88e5; color: #fff; font-size: 14px; font-weight: bold;
	margin-right: 10px; box-shadow: 0 2px 5px rgba(30,136,229,.35);
}
.xt-option.right .xt-opt-badge, .xt-option.wrong .xt-opt-badge { background: rgba(255,255,255,.32); box-shadow: none; }
.xt-opt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.xt-option.right { background: #22b573; color: #fff; border-color: #22b573; }
.xt-option.wrong { background: #ef5350; color: #fff; border-color: #ef5350; }
.xt-feedback { min-height: 26px; text-align: center; color: #ef5350; font-size: 14px; padding-top: 10px; }

/* ============ 报告视图 ============ */
.xt-report-wrap { max-width: 860px; margin: 0 auto; }
.xt-section-title { color: #fff; font-size: 16px; font-weight: bold; margin: 18px 4px 10px; text-shadow: 0 1px 3px rgba(0,0,0,.2); }
.xt-grid { display: flex; flex-wrap: wrap; padding: 10px 6px; }
.xt-cell { width: 16.66%; min-width: 100px; text-align: center; padding: 14px 0; }
.xt-num { font-size: 26px; font-weight: bold; color: #1e88e5; }
.xt-num.bad { color: #ef5350; }
.xt-label { font-size: 13px; color: #8a949c; margin-top: 4px; }
.xt-report-item {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 22px; border-bottom: 1px solid #f3f5f6; font-size: 15px;
}
.xt-report-item:last-child { border-bottom: none; }
.xt-report-item .en { font-weight: bold; color: #222; }
.xt-report-item .cn { color: #98a2ab; margin-left: 10px; font-size: 13px; }
.xt-badge { padding: 3px 10px; border-radius: 11px; font-size: 12px; color: #fff; white-space: nowrap; }
.xt-bs-skip { background: #9aa5b1; }
.xt-bs-first { background: #22b573; }
.xt-bs-retry { background: #f59e0b; }
.xt-bs-fail { background: #ef5350; }
.xt-history-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 22px; border-bottom: 1px solid #f3f5f6;
	font-size: 14px; color: #667; cursor: pointer;
}
.xt-history-row:hover { background: #f8fafb; }
.xt-history-row:last-child { border-bottom: none; }
.xt-history-row b { color: #223; }

/* ============ 复习页（review.html） ============ */
.xt-day-chip {
	display: inline-block; padding: 6px 16px; margin: 0 8px 6px 0; border-radius: 17px;
	border: 1px solid #d5dbe0; background: #fff; color: #667; font-size: 13px;
	cursor: pointer; user-select: none;
}
.xt-day-chip:hover { border-color: #1e88e5; color: #1e88e5; }
.xt-day-chip.on { background: #1e88e5; border-color: #1e88e5; color: #fff; }
.xt-mode-group { display: inline-block; margin-left: 8px; }
.xt-mode-btn {
	display: inline-block; padding: 5px 13px; border: 1px solid #d5dbe0; background: #fff;
	color: #667; font-size: 13px; cursor: pointer; user-select: none; margin-left: -1px;
}
.xt-mode-btn:first-child { border-radius: 16px 0 0 16px; margin-left: 0; }
.xt-mode-btn:last-child { border-radius: 0 16px 16px 0; }
.xt-mode-btn.on { background: #1e88e5; border-color: #1e88e5; color: #fff; position: relative; z-index: 1; }
.xt-review-row {
	display: flex; align-items: center; padding: 15px 24px;
	border-bottom: 1px solid #f3f5f6;
}
.xt-review-row:last-child { border-bottom: none; }
.xt-review-row .en {
	font-size: 19px; font-weight: bold; color: #1c1c1c; cursor: pointer;
	min-width: 200px; word-break: break-all;
}
.xt-review-row .mid { flex: 1; align-self: stretch; display: flex; align-items: center; min-width: 0; padding: 0 12px; }
.xt-review-row .cn { color: #555; font-size: 15px; word-break: break-all; }
.xt-mask { filter: blur(6px); cursor: pointer; transition: filter .15s; user-select: none; }
.xt-mask.revealed { filter: none; }

/* ============ 词库设置（用户-词书绑定） ============ */
.xt-bookrow {
	display: flex; align-items: center; padding: 16px 22px;
	border-bottom: 1px solid #f3f5f6;
}
.xt-bookrow:last-child { border-bottom: none; }
.xt-book-color {
	width: 46px; height: 58px; border-radius: 6px; flex-shrink: 0; margin-right: 16px;
	box-shadow: 0 3px 8px rgba(0,0,0,.18);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 20px;
}
.xt-book-info { flex: 1; min-width: 0; }
.xt-book-name { font-size: 17px; font-weight: bold; color: #223; }
.xt-book-meta { font-size: 13px; color: #8a949c; margin-top: 3px; }
.xt-book-desc { font-size: 13px; color: #a2acb5; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-bind-btn {
	flex-shrink: 0; min-width: 88px; text-align: center; padding: 8px 14px; margin-left: 12px;
	border-radius: 19px; border: 1px solid #d5dbe0; background: #fff; color: #667;
	cursor: pointer; font-size: 14px; user-select: none;
}
.xt-bind-btn:hover { border-color: #1e88e5; color: #1e88e5; }
.xt-bind-btn.on { background: #22b573; border-color: #22b573; color: #fff; }
.xt-bind-btn.on:hover { opacity: .88; }

/* ============ 词库绑定管理页（bankAdmin.html） ============ */
.xt-admin-cols { display: flex; gap: 16px; align-items: flex-start; }
.xt-admin-left { width: 300px; flex-shrink: 0; }
.xt-admin-right { flex: 1; min-width: 0; }
.xt-admin-head {
	padding: 12px 18px; background: #f6f8f9; border-bottom: 1px solid #eef1f2;
	font-size: 14px; font-weight: bold; color: #556;
}
.xt-userrow { padding: 13px 18px; border-bottom: 1px solid #f3f5f6; cursor: pointer; }
.xt-userrow:last-child { border-bottom: none; }
.xt-userrow:hover { background: #f4f9ff; }
.xt-userrow .name { font-size: 16px; font-weight: bold; color: #223; }
.xt-userrow .meta { font-size: 12px; color: #98a2ab; margin-top: 2px; word-break: break-all; }
.xt-userrow.on { background: #1e88e5; }
.xt-userrow.on .name { color: #fff; }
.xt-userrow.on .meta { color: #dcecff; }

@media (max-width: 760px) {
	.xt-admin-cols { flex-direction: column; }
	.xt-admin-left { width: 100%; }
	.xt-admin-right { width: 100%; }
}

/* ============ 词库内容管理三栏（bankManage.html） ============ */
.xt-manage-cols { display: flex; gap: 14px; align-items: flex-start; }
.xt-manage-col { width: 300px; flex-shrink: 0; }
.xt-manage-col.wide { flex: 1; width: auto; min-width: 0; }
.xt-col-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 11px 14px; background: #f6f8f9; border-bottom: 1px solid #eef1f2;
	font-size: 14px; font-weight: bold; color: #556;
}
.xt-col-head .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.xt-col-body { max-height: 66vh; overflow-y: auto; }
.xt-item-row {
	display: flex; align-items: center; padding: 12px 14px;
	border-bottom: 1px solid #f3f5f6; cursor: pointer;
}
.xt-item-row:last-child { border-bottom: none; }
.xt-item-row:hover { background: #f4f9ff; }
.xt-item-row.on { background: #1e88e5; }
.xt-item-row.on .t1 { color: #fff; }
.xt-item-row.on .t2 { color: #dcecff; }
.xt-item-main { flex: 1; min-width: 0; }
.xt-item-main .t1 { font-size: 15px; font-weight: bold; color: #223; word-break: break-all; }
.xt-item-main .t2 { font-size: 12px; color: #98a2ab; margin-top: 2px; word-break: break-all; }
.xt-tag-off {
	display: inline-block; padding: 1px 8px; border-radius: 9px;
	background: #9aa5b1; color: #fff; font-size: 11px; margin-left: 6px; vertical-align: 1px;
	font-weight: normal;
}
.xt-op {
	flex-shrink: 0; margin-left: 6px; padding: 3px 10px; border: none; border-radius: 4px;
	font-size: 12px; cursor: pointer; color: #fff;
}
.xt-op.edit { background: #1e88e5; }
.xt-op.del { background: #ef5350; }
.xt-item-row.on .xt-op.edit { background: rgba(255,255,255,.28); }
.xt-op:hover { opacity: .85; }
.xt-add-btn {
	flex-shrink: 0; padding: 4px 12px; border: none; border-radius: 14px;
	background: #22b573; color: #fff; font-size: 13px; cursor: pointer;
}
.xt-add-btn:hover { opacity: .88; }
/* 弹窗表单行 */
.xt-form-row { display: flex; align-items: center; padding: 8px 4px; }
.xt-form-row label { width: 90px; flex-shrink: 0; margin: 0; font-weight: normal; color: #556; font-size: 14px; }
.xt-form-row .form-control { flex: 1; }

@media (max-width: 900px) {
	.xt-manage-cols { flex-direction: column; }
	.xt-manage-col { width: 100%; }
	.xt-col-body { max-height: 40vh; }
}

/* ============ 词典搜索条（index.html） ============ */
.xt-search { display: flex; margin: 4px 0 14px; }
.xt-search-wrap { flex: 1; position: relative; }
.xt-search-input {
	width: 100%; height: 46px; border: none; border-radius: 10px 0 0 10px;
	padding: 0 40px 0 16px; font-size: 16px; outline: none; box-sizing: border-box;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.xt-clear {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px; border-radius: 50%; background: #c3ccd4; color: #fff;
	text-align: center; line-height: 22px; cursor: pointer; font-size: 14px;
}
.xt-search-btn {
	width: 96px; border: none; border-radius: 0 10px 10px 0; cursor: pointer;
	background: linear-gradient(90deg, #1e88e5, #00bcd4); color: #fff; font-size: 15px;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
/* 词典释义内容在白卡片里的适配 */
.xt-page-card .dic-wrapper { background: #fff; }

/* ============ 登录页 ============ */
.xt-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.xt-login-card {
	width: 100%; max-width: 380px; background: #fff; border-radius: 16px;
	box-shadow: 0 10px 32px rgba(0,0,0,.2); padding: 34px 30px 30px; box-sizing: border-box;
}
.xt-login-brand { text-align: center; font-size: 30px; font-weight: bold; font-style: italic; color: #1e88e5; margin-bottom: 24px; }
.xt-login-brand sup { font-size: 12px; font-style: normal; }
.xt-login-input {
	width: 100%; height: 44px; border: 1px solid #dde3e9; border-radius: 8px;
	padding: 0 14px; font-size: 15px; margin-bottom: 14px; outline: none; box-sizing: border-box;
}
.xt-login-input:focus { border-color: #1e88e5; }
.xt-login-btn {
	width: 100%; height: 46px; border: none; border-radius: 23px; cursor: pointer;
	background: linear-gradient(90deg, #1e88e5, #00bcd4); color: #fff; font-size: 17px; letter-spacing: 6px;
}

/* ============ 手机端响应式 ============ */
@media (max-width: 760px) {
	.xt-side { width: 74px; }
	.xt-brand { font-size: 15px; }
	.xt-menu-label { display: none; }
	.xt-menu-item { margin: 8px 10px; padding: 12px 2px 10px; }
	.xt-menu-icon { font-size: 30px; margin-bottom: 0; }
	.xt-top { padding: 10px 12px 8px; }
	.xt-pill-btn { padding: 5px 12px; font-size: 13px; margin-left: 6px; }
	.xt-content { padding: 10px 10px 24px; }
	.xt-title { font-size: 17px; }
	.xt-page-card { padding: 8px 10px 12px; }
	.xt-toolbar { padding: 10px 10px; }
	.xt-toolbar select.form-control { width: 108px; margin-bottom: 6px; }
	.xt-toolbar input.time-input { width: 96px; margin-bottom: 6px; }
	.xt-word-row { padding: 14px 12px; }
	.xt-word-en { min-width: 90px; font-size: 19px; }
	.xt-word-mid { padding: 0 6px; }
	.xt-radio-btn { min-width: 62px; padding: 7px 8px; margin-left: 6px; font-size: 13px; }
	.xt-mem-row { padding: 12px 12px; margin: 8px 2px; }
	.xt-mem-row .en { min-width: 100px; font-size: 18px; }
	.xt-option { width: 100%; }
	.xt-q-en { font-size: 32px; }
	.xt-cell { width: 33.33%; }
	.xt-search-btn { width: 74px; }
	.xt-main-btn { width: 82%; }
}

/* 识记分页条 */
.xt-mem-pager {
	display: flex; align-items: center; justify-content: center;
	padding: 10px 0 14px; border-top: 1px solid #f3f5f6;
}
.xt-mem-pageinfo { margin: 0 16px; color: #667; font-size: 14px; min-width: 52px; text-align: center; }
.xt-mem-pager .xt-mini-btn { margin-right: 0; }

/* 剪纸盒（识记页） */
.xt-mem-row .btn-clip {
	display: inline-block; margin-left: 8px; padding: 5px 16px; border: none; border-radius: 8px;
	background: linear-gradient(135deg, #26c6da, #1e88e5); color: #fff; font-size: 15px;
	cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 8px rgba(30,136,229,.35);
}
.xt-mem-row .btn-clip:hover { transform: scale(1.08); }
.xt-mem-row.clipping {
	pointer-events: none;
	transition: all .35s ease-in;
	transform: translateY(46px) scale(.25); opacity: 0;
}
.xt-clipbox { text-align: center; padding: 18px 0 6px; }
.xt-clipbox-icon { position: relative; display: inline-block; font-size: 52px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.xt-clipbox-badge {
	position: absolute; top: -6px; right: -14px; min-width: 24px; height: 24px; padding: 0 6px;
	border-radius: 12px; background: #1e88e5; color: #fff; font-size: 13px; font-weight: bold;
	line-height: 24px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.xt-clipbox-tip { margin-top: 10px; color: rgba(255,255,255,.92); font-size: 14px; text-shadow: 0 1px 2px rgba(0,60,120,.3); }
.xt-clip-subtitle { text-align: center; color: #98a2ab; font-size: 13px; margin-top: 6px; }
.xt-clipbox.in-modal { padding: 14px 0 4px; }
.xt-clipbox.in-modal .xt-clipbox-tip { color: #667; text-shadow: none; }
.xt-clipbox.in-modal.clickable { cursor: pointer; border-radius: 12px; padding: 14px 16px 8px; }
.xt-clipbox.in-modal.clickable:hover { background: #fff4f4; }
.xt-clipbox.in-modal.clickable .xt-clipbox-tip { color: #ef5350; }
.xt-clip-modal .xt-mem-row { cursor: default; margin: 10px 2px; }
.xt-clip-modal .xt-mem-row .en { min-width: 110px; font-size: 20px; }
/* 分拣阶段：双盒 + Yes/No */
.xt-sort-boxes { display: flex; justify-content: center; gap: 56px; }
.xt-clipbox-icon.box-green { filter: hue-rotate(85deg) saturate(1.5) drop-shadow(0 6px 12px rgba(0,0,0,.22)); }
.xt-clipbox-icon.box-red { filter: hue-rotate(-35deg) saturate(1.6) drop-shadow(0 6px 12px rgba(0,0,0,.22)); }
.xt-clipbox-badge.green { background: #22b573; }
.xt-clipbox-badge.red { background: #ef5350; }
.xt-clip-modal .sort-btn { min-width: 64px; padding: 7px 10px; margin-left: 8px; font-size: 13px; border: none; }
.xt-clip-modal .sort-btn .ring { width: 11px; height: 11px; margin-right: 5px; }

/* 剪纸盒完成页与混合检测 */
.xt-finish-tip { text-align: center; color: #445; font-size: 17px; font-weight: bold; padding: 22px 0 4px; }
.xt-finish-btns { display: flex; justify-content: center; gap: 14px; padding: 18px 0 12px; flex-wrap: wrap; }
.xt-clip-action {
	border: none; border-radius: 22px; padding: 10px 28px; font-size: 15px; color: #fff; cursor: pointer;
	background: linear-gradient(135deg, #26c6da, #1e88e5); box-shadow: 0 4px 12px rgba(30,136,229,.35);
}
.xt-clip-action:hover { opacity: .9; }
.xt-clip-action.mix { background: linear-gradient(135deg, #22b573, #17a07c); box-shadow: 0 4px 12px rgba(34,181,115,.35); }
.xt-clip-action.ghost { background: #fff; color: #556; border: 1px solid #d5dbe0; box-shadow: none; }
.xt-mix-item { display: inline-flex; align-items: center; margin: 8px 22px 8px 0; font-size: 15px; color: #334; font-weight: normal; cursor: pointer; }
.xt-mix-item input { margin: 0 7px 0 0; width: 17px; height: 17px; cursor: pointer; }

/* bankAdmin：测试单元范围面板 */
.xt-unit-panel {
	margin: 0 14px 12px 58px; padding: 10px 14px;
	background: #f6f9fc; border: 1px dashed #cfd8e0; border-radius: 8px;
}
.xt-unit-tip { color: #889; font-size: 12px; margin-bottom: 6px; }
.xt-unit-check {
	display: inline-flex; align-items: center; margin: 5px 18px 5px 0;
	font-size: 14px; color: #334; font-weight: normal; cursor: pointer;
}
.xt-unit-check input { margin: 0 6px 0 0; width: 16px; height: 16px; cursor: pointer; }

/* ============ 测试模块（test.html） ============ */
.xt-quiz-timer-wrap { height: 10px; background: #e8edf1; border-radius: 5px; overflow: hidden; margin: 6px 16px 0; }
.xt-quiz-timer { height: 100%; width: 100%; background: linear-gradient(90deg, #22b573, #26c6da); border-radius: 5px; }
.xt-quiz-timer.warn { background: linear-gradient(90deg, #ef5350, #ff8a65); }
.xt-quiz-en { text-align: center; font-size: 46px; font-weight: bold; color: #1c1c1c; padding: 34px 10px 6px; word-break: break-all; }
.xt-quiz-count { text-align: center; color: #98a2ab; font-size: 14px; padding-bottom: 10px; }
.xt-quiz-sec { text-align: center; font-size: 15px; color: #667; padding-top: 8px; }
.xt-quiz-sec b { color: #1e88e5; font-size: 19px; }

/* ============ 手机端适配增强 ============ */
@media (max-width: 760px) {
	body.xt-body { overflow-x: hidden; }
	/* 顶栏与标题行允许换行，避免横向溢出 */
	.xt-top { flex-wrap: wrap; }
	.xt-top-right { flex-wrap: wrap; justify-content: flex-end; }
	.xt-top .xt-pill-btn { margin-top: 4px; }
	.xt-chip { padding: 4px 10px; font-size: 12px; margin: 4px 0 0 6px; }
	.xt-order-toggle { margin-right: 8px; }
	/* 工具条：下拉/输入框全宽竖排，按钮保持行内（覆盖各页的内联宽度） */
	.xt-toolbar select.form-control,
	.xt-toolbar input.form-control { width: 100% !important; margin-right: 0 !important; margin-bottom: 6px; }
	.xt-toolbar .xt-mini-btn { margin-top: 2px; margin-bottom: 4px; }
	.xt-mode-group { margin: 2px 8px 4px 0; }
	/* 触控目标加大 */
	.xt-op { padding: 6px 12px; }
	.xt-row-del { padding: 7px 14px; }
	.xt-bind-btn { min-width: 74px; padding: 8px 10px; margin-left: 8px; }
	.xt-add-btn { padding: 6px 14px; }
	/* 报告统计改两列，数字不挤 */
	.xt-cell { width: 50%; }
	/* 弹窗表单更紧凑 */
	.xt-form-row label { width: 74px; font-size: 13px; }
	/* 复习/查询列表行：英文占位收窄 */
	.xt-review-row { padding: 13px 14px; }
	.xt-review-row .en { min-width: 110px; font-size: 17px; }
	/* 识记行 */
	.xt-mem-row .btn-spell { padding: 6px 12px; }
	/* 测试页 */
	.xt-quiz-en { font-size: 32px; padding: 22px 8px 4px; }
	.xt-quiz-sec { font-size: 14px; }
	.xt-finish-btns { gap: 10px; }
	.xt-clip-action { padding: 9px 20px; font-size: 14px; }
}

/* 动态视口高度：手机浏览器地址栏收展时不留白/不跳动 */
@supports (min-height: 100dvh) {
	body.xt-body { min-height: 100dvh; }
	.xt-app { min-height: 100dvh; }
}


/* ============ 学后检测成绩（train.html，家长向版式） ============ */
.xt-parent-hero { background: linear-gradient(135deg, #2f8ee0, #6ec1f7); border-radius: 16px; color: #fff; text-align: center; padding: 26px 20px 22px; box-shadow: 0 10px 26px rgba(47,142,224,.28); }
.xt-parent-hero .ph-title { font-size: 22px; font-weight: bold; letter-spacing: 3px; }
.xt-parent-hero .ph-student { margin-top: 6px; font-size: 15px; opacity: .92; }
.ph-ring { position: relative; width: 150px; height: 150px; margin: 16px auto 4px; }
.ph-ring-txt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ph-ring-txt b { font-size: 34px; line-height: 1; }
.ph-ring-txt span { font-size: 13px; opacity: .85; margin-top: 4px; }
.ph-stats { margin-top: 12px; }
.ph-chip { display: inline-block; background: rgba(255,255,255,.18); border-radius: 16px; padding: 6px 16px; margin: 0 6px; font-size: 14px; }
.ph-chip b { font-size: 18px; }
.xt-parent-info { display: flex; border-bottom: 1px solid #eef1f5; padding: 16px 0; margin-top: 6px; }
.pi-cell { flex: 1; text-align: center; border-left: 1px solid #eef2f6; min-width: 0; padding: 0 6px; }
.pi-cell:first-child { border-left: none; }
.pi-label { color: #8a9cae; font-size: 13px; }
.pi-value { color: #26384a; font-size: 16px; font-weight: bold; margin-top: 6px; overflow-wrap: break-word; }
.xt-score-list { padding-top: 6px; }
.xt-score-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #eef1f5; }
.xt-score-row:last-child { border-bottom: none; }
.xt-score-row.is-no { background: #fff8f8; }
.xt-score-row .en { font-size: 18px; font-weight: bold; color: #1c1c1c; min-width: 140px; word-break: break-all; }
.xt-score-row .cn { flex: 1; color: #667; font-size: 14px; min-width: 0; }
.xt-score-row .tag { flex-shrink: 0; border-radius: 12px; padding: 3px 12px; font-size: 13px; font-weight: bold; }
.xt-score-row .tag-yes { background: #e7f8ee; color: #22b573; }
.xt-score-row .tag-no { background: #ffebeb; color: #ef5350; }
@media (max-width: 640px) {
	.xt-score-row .en { min-width: 100px; font-size: 16px; }
	.pi-value { font-size: 14px; }
}
#selfcheck-list .sc-yes, #selfcheck-list .sc-no { border: none; }
@media (max-width: 760px) {
	#selfcheck-list .xt-mem-row { flex-wrap: wrap; }
	#selfcheck-list .xt-mem-row .en { min-width: 80px; }
	#selfcheck-list .xt-mem-row .mid { padding: 0 6px; }
}