/* ============================================
Onomeo English — Duolingo Cartoon Theme
============================================ */
/* CSS @layer 优先级链（2026-05-29 引入）
base < theme < override —— 浏览器原生机制，配合 luxe.css 的主题重映射
逐步取代 !important 大战。详见 memory/project_onomeo_css_rewrite_plan.md */
@layer base, theme, override;
/* --- 0. Tokens（@layer base，可被 luxe.css 的 @layer theme 覆盖） --- */
@layer base {
:root {
--c-mint: #58cc02;
--c-mint-d: #4ba902;
--c-sky: #1cb0f6;
--c-sky-d: #1899d6;
--c-blue: #2b70c9;
--c-grape: #ce82ff;
--c-grape-d:#a560d3;
--c-pink: #ff86d0;
--c-orange: #ff9600;
--c-orange-d:#e08600;
--c-red: #ff4b4b;
--c-red-d: #d63a3a;
--c-yellow: #ffc800;
--c-yellow-d:#dba800;
--t-mint: #d7f7c2;
--t-sky: #ddf4ff;
--t-orange: #ffeacc;
--t-grape: #f1e0ff;
--t-red: #ffd6d6;
--t-yellow: #fff2c2;
--bg: #fff8ee;
--panel: #ffffff;
--ink: #3c3c3c;
--ink-soft: #777;
--border: #e5e5e5;
--border-h: #d0d0d0;
--radius: 16px;
--radius-lg:22px;
--shadow-card: 0 2px 0 0 var(--border);
--shadow-btn-mint: 0 4px 0 0 var(--c-mint-d);
--shadow-btn-sky: 0 4px 0 0 var(--c-sky-d);
--shadow-btn-orange: 0 4px 0 0 var(--c-orange-d);
--shadow-btn-grape: 0 4px 0 0 var(--c-grape-d);
--shadow-btn-red: 0 4px 0 0 var(--c-red-d);
--shadow-btn-yellow: 0 4px 0 0 var(--c-yellow-d);
--font-display: 'Fredoka', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
a { color: var(--c-sky); text-decoration: none; }
a:hover { text-decoration: underline; }
/* --- 1. Layout --- */
.app {
display: grid;
grid-template-columns: 240px 1fr 320px;
min-height: 100vh;
}
@media (max-width: 1200px) {
.app { grid-template-columns: 220px 1fr; }
.aside-right { display: none; }
}
@media (max-width: 760px) {
/* 移动端：sidebar 改为抽屉式（默认隐藏在屏幕左边），点汉堡按钮滑入 */
.app { grid-template-columns: 1fr; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
max-width: 85vw;
height: 100vh;
height: 100dvh; /* 动态视口高度，避免 iOS 浏览器 UI 遮挡 */
z-index: 200;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border-right: none;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.22);
}
.sidebar.is-mobile-open { transform: translateX(0); }
.main {
padding-top: 0;
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
min-height: calc(100vh - 56px);
min-height: calc(100dvh - 56px);
}
.aside-toggle { display: none; }
body { overflow-x: hidden; }
body.is-mobile-sidebar-open { overflow: hidden; }
}
/* 移动端顶部 bar + 抽屉遮罩（仅 ≤760px 显示，桌面端隐藏） */
.mobile-header { display: none; }
.mobile-overlay { display: none; }
@media (max-width: 760px) {
.mobile-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--panel, #fff);
border-bottom: 1px solid var(--border, #e5e5e5);
position: sticky;
top: 0;
z-index: 50;
height: 56px;
}
.mobile-hamburger {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: none;
background: transparent;
color: var(--ink, #3c3c3c);
border-radius: 8px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-hamburger:active { background: rgba(0, 0, 0, 0.06); }
.mobile-brand {
flex: 1;
text-align: center;
font-family: var(--font-display, sans-serif);
font-weight: 700;
font-size: 17px;
color: var(--ink, #3c3c3c);
}
.mobile-actions { width: 40px; }
.mobile-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 150;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
body.is-mobile-sidebar-open .mobile-overlay {
opacity: 1;
visibility: visible;
}
}
/* ===== 移动端底部 tab bar（仅 ≤760px 显示，桌面端隐藏）===== */
.mobile-tabbar { display: none; }
@media (max-width: 760px) {
.mobile-tabbar {
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
background: var(--panel, #fff);
box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.10);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-tab {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 7px 2px 6px;
text-decoration: none;
color: var(--ink-soft, #8a9990);
-webkit-tap-highlight-color: transparent;
}
.mobile-tab:active { background: rgba(0, 0, 0, 0.05); }
.mobile-tab svg { width: 21px; height: 21px; flex-shrink: 0; }
.mobile-tab-label {
font-weight: 600;
font-size: 13px;
line-height: 1;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-tab.is-active { color: var(--c-mint, #58cc02); }
/* luxe 主题：深底 + 柔金高亮 */
html[data-theme="luxe"] .mobile-tabbar {
background: #17140f;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(216, 192, 116, 0.14);
}
html[data-theme="luxe"] .mobile-tab { color: #8c8470; }
html[data-theme="luxe"] .mobile-tab:active { background: rgba(216, 192, 116, 0.08); }
html[data-theme="luxe"] .mobile-tab.is-active { color: #d8c074; }
}
.aside-right {
padding: 22px 18px 40px;
position: sticky;
top: 0;
max-height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
background: transparent;
border-left: 1px solid var(--border);
}
/* 右侧栏折叠按钮：骑跨右侧栏左边缘，垂直居中视口 */
.aside-toggle {
position: fixed;
top: 50%;
right: calc(320px - 9px);
transform: translateY(-50%);
width: 18px;
height: 60px;
padding: 0;
border: none;
border-radius: 9px;
background: rgba(255, 255, 255, .92);
color: var(--ink-soft, #8a9990);
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
transition: right .2s ease, height .15s ease, background .15s ease, color .15s ease;
z-index: 100;
}
.aside-toggle:hover {
background: #fff;
color: var(--c-mint, #58cc02);
height: 76px;
}
.aside-toggle .ic { width: 13px; height: 13px; }
/* 折叠态 */
.app.is-aside-collapsed { grid-template-columns: 240px 1fr 28px; }
.is-aside-collapsed .aside-right {
padding: 0;
gap: 0;
overflow: hidden;
}
.is-aside-collapsed .aside-right > * { display: none; }
.app.is-aside-collapsed .aside-toggle { right: calc(28px - 9px); }
@media (max-width: 1200px) {
.aside-toggle { display: none; }
}
.sidebar {
background: var(--panel);
border-right: 2px solid var(--border);
padding: 22px 14px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
color: var(--c-mint-d);
padding: 0 8px 18px;
border-bottom: 2px solid var(--border);
margin-bottom: 14px;
flex-shrink: 0;
}
.brand .logo {
width: 36px; height: 36px;
border-radius: 12px;
background: var(--c-mint);
display: grid; place-items: center;
box-shadow: 0 3px 0 0 var(--c-mint-d);
color: #fff;
}
.brand .logo .ic { width: 22px; height: 22px; stroke-width: 2.5; }
/* Generic line-icon */
.ic {
width: 20px;
height: 20px;
stroke-width: 2;
flex-shrink: 0;
vertical-align: middle;
}
.ic.lg { width: 28px; height: 28px; }
.ic.xl { width: 36px; height: 36px; }
.ic.xxl { width: 56px; height: 56px; stroke-width: 1.75; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group + .nav-group { margin-top: 10px; }
.nav-group-label {
font-size: 13px;
font-weight: 700;
color: var(--ink-soft, #999);
letter-spacing: .04em;
padding: 4px 14px 2px;
text-transform: none;
}
/* sidebar 二级菜单：原 .nav-more-* 兼容保留，新分组用 .nav-grp-* */
.nav-more-toggle,
.nav-grp-toggle {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: transparent;
border: 2px solid transparent;
color: var(--ink-soft, #777);
font-family: inherit;
font-weight: 700;
font-size: 16px;
cursor: pointer;
width: 100%;
text-align: left;
margin-top: 2px;
transition: background .12s;
}
.nav-more-toggle:hover,
.nav-grp-toggle:hover { background: var(--t-sky); color: var(--ink); }
.nav-more-toggle .ic,
.nav-grp-toggle .ic { width: 22px; height: 22px; }
.nav-more-chev,
.nav-grp-chev {
margin-left: auto;
font-size: 13px;
color: var(--ink-soft, #999);
}
.nav-more-panel,
.nav-grp-panel {
display: none;
flex-direction: column;
gap: 4px;
margin-top: 2px;
margin-bottom: 4px;
padding-left: 6px;
}
.nav-more-panel.is-open,
.nav-grp-panel.is-open { display: flex; }
.nav-more-panel a,
.nav-grp-panel a {
font-size: 14.5px;
padding: 10px 12px;
}
.nav-more-panel a .ic,
.nav-grp-panel a .ic { width: 18px; height: 18px; }
/* 学习者徽章 */
.sb-learner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-top: 8px;
border-radius: 16px;
background: var(--t-mint, #d7f7c2);
cursor: default;
}
.sb-learner-avatar {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--c-mint, #58cc02);
color: #fff;
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 18px;
flex-shrink: 0;
}
.sb-learner-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.sb-learner-cap {
font-size: 12px;
color: var(--ink-soft, #777);
letter-spacing: .04em;
}
.sb-learner-lv {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 16px;
color: var(--ink, #1c1b1f);
line-height: 1.1;
}
.sb-learner-track {
height: 6px;
margin-top: 4px;
background: rgba(0,0,0,.08);
border-radius: 3px;
overflow: hidden;
}
.sb-learner-track > i {
display: block;
height: 100%;
background: var(--c-mint, #58cc02);
border-radius: 3px;
transition: width .5s ease;
}
/* ============================================
右侧控制台（aside-right）
============================================ */
.aside-card {
background: var(--panel, #fff);
border-radius: 18px;
padding: 18px;
box-shadow: 0 4px 14px -10px rgba(0,0,0,.16);
display: flex;
flex-direction: column;
gap: 10px;
}
.aside-card-head {
display: flex;
align-items: center;
gap: 8px;
}
.aside-card-ic {
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
background: var(--t-yellow, #fff3c4);
color: var(--c-yellow, #ffc800);
}
.aside-card-ic .ic { width: 18px; height: 18px; }
.aside-card-ttl {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 15px;
color: var(--ink, #1c1b1f);
}
.aside-card-tag {
margin-left: auto;
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 14px;
color: var(--c-coral, #ff6b6b);
}
/* 今日目标圆环 */
.aside-goal .aside-card-ic { background: var(--t-mint, #d7f7c2); color: var(--c-mint, #58cc02); }
.aside-goal-ring {
position: relative;
width: 168px; height: 168px;
margin: 6px auto 4px;
}
.aside-goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aside-goal-ring .agr-track { fill: none; stroke: rgba(0,0,0,.08); stroke-width: 10; }
.aside-goal-ring .agr-fill {
fill: none;
stroke: var(--c-mint, #58cc02);
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 100;
transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.aside-goal-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 36px;
color: var(--c-mint, #58cc02);
}
.aside-goal-num i {
font-style: normal;
font-size: 14px;
margin-left: 2px;
}
.aside-goal-meta {
text-align: center;
font-family: var(--font-display, inherit);
font-size: 15px;
color: var(--ink, #1c1b1f);
}
.aside-goal-meta strong { color: var(--c-coral, #ff6b6b); font-weight: 800; }
.aside-goal-tip {
text-align: center;
font-size: 13px;
color: var(--ink-soft, #777);
}
.aside-goal-detail {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 6px;
padding: 9px 16px;
background: var(--t-mint, #d7f7c2);
color: var(--c-mint, #58cc02);
border-radius: 999px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
align-self: stretch;
}
.aside-goal-detail:hover { background: var(--c-mint, #58cc02); color: #fff; }
.aside-goal-detail span { font-size: 15px; line-height: 1; }
/* 今日短语 */
.aside-idiom { display: flex; flex-direction: column; gap: 6px; }
.aside-idiom-p {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 17px;
color: var(--c-coral, #ff6b6b);
line-height: 1.3;
}
.aside-idiom-m {
font-size: 14px;
color: var(--ink, #1c1b1f);
font-weight: 700;
}
.aside-idiom-ex {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 13px;
color: var(--ink-soft, #777);
font-style: italic;
background: var(--t-yellow, #fff8d6);
padding: 8px 10px;
border-radius: 10px;
line-height: 1.4;
}
.aside-idiom-ex > span { flex: 1; min-width: 0; }
.aside-idiom-speak {
flex-shrink: 0;
width: 26px; height: 26px;
display: grid; place-items: center;
background: rgba(255,255,255,.7);
border: none;
border-radius: 50%;
color: var(--c-yellow, #ffc800);
cursor: pointer;
}
.aside-idiom-speak:hover { background: var(--c-yellow, #ffc800); color: #fff; }
.aside-idiom-speak .ic { width: 14px; height: 14px; }
.aside-idiom-btn {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid var(--border, rgba(0,0,0,.12));
border-radius: 999px;
padding: 5px 12px;
font-size: 13px;
color: var(--ink-soft, #777);
cursor: pointer;
font-family: inherit;
}
.aside-idiom-btn:hover { background: var(--t-yellow, #fff8d6); border-color: var(--c-yellow, #ffc800); color: var(--ink); }
.aside-idiom-btn .ic { width: 14px; height: 14px; }
/* 学习连胜（一周日历点） */
.aside-card .aside-card-ic.flame, .aside-card:has(.aside-streak-row) .aside-card-ic {
background: var(--t-coral, #ffe0d6);
color: var(--c-coral, #ff6b6b);
}
.aside-streak-tip {
font-size: 13px;
color: var(--ink-soft, #777);
}
.aside-streak-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-top: 4px;
}
.aside-streak-dot {
width: 100%;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--border, rgba(0,0,0,.12));
color: var(--ink-soft, #999);
font-size: 12px;
position: relative;
}
.aside-streak-dot.is-done {
background: var(--c-mint, #58cc02);
border-color: var(--c-mint, #58cc02);
color: #fff;
}
.aside-streak-dot .ic { width: 14px; height: 14px; }
.aside-streak-lbl {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 4px);
font-size: 11px;
color: var(--ink-soft, #999);
white-space: nowrap;
}
.aside-streak-row { margin-bottom: 22px; }
.nav a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
color: var(--ink);
font-weight: 700;
font-size: 16px;
border: 2px solid transparent;
transition: background .12s, border-color .12s, transform .08s;
}
.nav a:hover { background: var(--t-sky); text-decoration: none; }
.nav a.active {
background: var(--t-sky);
border-color: var(--c-sky);
color: var(--c-blue);
}
.nav a .ic { width: 22px; height: 22px; }
/* Theme toggle (sits at bottom of sidebar) */
.theme-toggle {
margin-top: auto;
margin-bottom: 4px;
padding: 10px 14px;
border-radius: 14px;
border: 2px solid var(--border);
background: var(--panel);
color: var(--ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 3px 0 0 var(--border);
transition: transform .08s, background .12s, border-color .12s;
}
.theme-toggle:hover { background: var(--t-yellow); border-color: var(--c-yellow); }
.theme-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--border); }
.theme-toggle .ic { width: 18px; height: 18px; }
/* —— 底部 sb-toolbar：语言 / 主题 / 音效 / 来源 4 个按钮，2×2 网格 ——
结构与间距对齐 luxe 主题（css/luxe.css 同名规则），只换卡通配色，
让两个主题这块布局完全一致。 */
.sidebar .sb-toolbar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin: 8px 0 4px;
padding: 4px;
background: var(--bg);
border-radius: 12px;
}
.sidebar .sb-toolbar .sb-tool {
margin: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 4px;
background: transparent;
border: 0;
border-radius: 8px;
box-shadow: none;
color: var(--ink-soft);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
cursor: pointer;
text-decoration: none;
transition: background .12s, color .12s;
}
.sidebar .sb-toolbar .sb-tool:hover {
background: var(--panel);
border-color: transparent;
color: var(--ink);
}
.sidebar .sb-toolbar .sb-tool:active { transform: translateY(1px); box-shadow: none; }
.sidebar .sb-toolbar .sb-tool .ic,
.sidebar .sb-toolbar .sb-tool svg { width: 18px; height: 18px; }
.sidebar .sb-toolbar .sb-tool-lbl { font-size: 13px; color: inherit; }
/* 撤掉"来源"后只剩 3 个：语言占满一整行，主题 / 音效 并排在下。
不分主题，两套主题都适用（luxe.css 未设 grid-column，不冲突）。 */
.sidebar .sb-toolbar .sb-tool:first-child { grid-column: 1 / -1; }
.main {
padding: clamp(20px, 2vw, 32px) clamp(20px, 2.5vw, 40px) clamp(28px, 3vw, 48px);
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
}
.main > #view { flex: 1; min-width: 0; }
/* 全屏页（gacha/resume/report/daily）：取消 .main 的 padding，让页面自己的背景铺满边缘
并把可能挤掉的 main-footer 隐藏。这些页有自己的返回按钮和 layout，不需要外壳 padding 兜底 */
.main:has(.view-gacha),
.main:has(.view-resume),
.main:has(.view-report),
.main:has(.view-daily),
.main:has(.view-comic),
.main:has(.view-oracle),
.main:has(.view-postcards),
.main:has(.view-spread),
.main:has(.view-fingerprint),
.main:has(.view-wrapped),
.main:has(.view-lab),
.main:has(.pra-cartoon) {
padding: 0;
}
.main:has(.view-gacha) .main-footer,
.main:has(.view-resume) .main-footer,
.main:has(.view-report) .main-footer,
.main:has(.view-daily) .main-footer,
.main:has(.view-comic) .main-footer,
.main:has(.view-oracle) .main-footer,
.main:has(.view-postcards) .main-footer,
.main:has(.view-spread) .main-footer,
.main:has(.view-fingerprint) .main-footer,
.main:has(.view-wrapped) .main-footer,
.main:has(.view-lab) .main-footer,
.main:has(.pra-cartoon) .main-footer {
display: none;
}
.main-footer {
margin-top: 36px;
padding: 22px 0 8px;
text-align: center;
color: var(--ink-soft, #8a9990);
border-top: 1px dashed rgba(0,0,0,.06);
}
.main-footer-brand {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 15px;
color: var(--c-mint, #58cc02);
letter-spacing: .3px;
}
.main-footer-tag {
margin-top: 4px;
font-size: 13px;
}
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 22px;
gap: 16px;
flex-wrap: wrap;
}
.page-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 30px;
margin: 0;
}
.page-sub { color: var(--ink-soft); margin-top: 4px; font-size: 16px; }
/* 鼓励语小贴纸（背单词等练习页右上）*/
.encourage-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(180deg, #FFF8DB 0%, #FFEDA8 100%);
border: 2px solid #E8C770;
color: #6A4A00;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
box-shadow: 0 3px 0 0 #C9A24B;
white-space: nowrap;
}
.encourage-tag::before {
content: '✦';
font-size: 14px;
color: #B8861A;
}
/* --- 2. Buttons --- */
.btn {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: .3px;
text-transform: uppercase;
border: none;
border-radius: 14px;
padding: 12px 20px;
cursor: pointer;
color: #fff;
background: var(--c-mint);
box-shadow: var(--shadow-btn-mint);
transition: transform .08s, box-shadow .08s, filter .12s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover { filter: brightness(1.05); }
.btn:active {
transform: translateY(3px);
box-shadow: 0 1px 0 0 var(--c-mint-d);
}
.btn.sky { background: var(--c-sky); box-shadow: var(--shadow-btn-sky); }
.btn.sky:active { box-shadow: 0 1px 0 0 var(--c-sky-d); }
.btn.orange { background: var(--c-orange); box-shadow: var(--shadow-btn-orange); }
.btn.orange:active { box-shadow: 0 1px 0 0 var(--c-orange-d); }
.btn.grape { background: var(--c-grape); box-shadow: var(--shadow-btn-grape); }
.btn.grape:active { box-shadow: 0 1px 0 0 var(--c-grape-d); }
.btn.red { background: var(--c-red); box-shadow: var(--shadow-btn-red); }
.btn.red:active { box-shadow: 0 1px 0 0 var(--c-red-d); }
.btn.yellow { background: var(--c-yellow); box-shadow: var(--shadow-btn-yellow); color: #6a4a00; }
.btn.yellow:active { box-shadow: 0 1px 0 0 var(--c-yellow-d); }
.btn.ghost {
background: var(--panel);
color: var(--ink);
box-shadow: 0 4px 0 0 var(--border);
border: 2px solid var(--border);
}
.btn.ghost:active { box-shadow: 0 1px 0 0 var(--border); }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn.lg { padding: 16px 28px; font-size: 17px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* --- 3. Cards / Panels --- */
.card {
background: transparent;
border: none;
border-radius: 0;
padding: 22px 4px;
box-shadow: none;
border-top: 1px dashed rgba(0,0,0,.1);
border-bottom: 1px dashed rgba(0,0,0,.1);
}
.card + .card { border-top: none; margin-top: -1px; }
.card h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 18px;
}
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* 小屏笔记本/平板（761-900px）的 sidebar 横排适配。手机（≤760px）走抽屉式（见上方 @media (max-width: 760px)），不能让本块覆盖。 */
@media (min-width: 761px) and (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.app { grid-template-columns: 1fr; }
.sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav { flex-direction: row; flex-wrap: wrap; flex: 1 0 100%; }
.brand { flex: 1; }
.upgrade-pill { display: none; }
.theme-toggle, #sfx-toggle { flex: 0 0 auto; margin-top: 0; }
.sb-search { flex: 1 0 100%; }
.sb-stage-btn { flex: 1 0 100%; }
.auth-widget { margin-top: 0; }
}
/* --- 4. Stat tiles --- */
.stat {
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 16px;
display: flex;
align-items: center;
gap: 14px;
}
.stat .ic-wrap {
width: 48px; height: 48px;
border-radius: 14px;
display: grid; place-items: center;
flex-shrink: 0;
}
.stat .ic-wrap .ic { width: 24px; height: 24px; stroke-width: 2; }
.stat .ic-wrap.mint { background: var(--t-mint); color: var(--c-mint-d); }
.stat .ic-wrap.sky { background: var(--t-sky); color: var(--c-blue); }
.stat .ic-wrap.orange { background: var(--t-orange); color: var(--c-orange-d); }
.stat .ic-wrap.grape { background: var(--t-grape); color: var(--c-grape-d); }
.stat .ic-wrap.red { background: var(--t-red); color: var(--c-red-d); }
.stat .ic-wrap.yellow { background: var(--t-yellow); color: var(--c-yellow-d); }
.stat .num {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
line-height: 1;
}
.stat .lbl { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
/* --- 5. Hero (dashboard) --- */
.hero {
background: linear-gradient(135deg, var(--c-sky) 0%, var(--c-grape) 100%);
border-radius: var(--radius-lg);
padding: 28px 32px;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
box-shadow: 0 6px 0 0 rgba(0,0,0,.06);
}
.hero h1 {
margin: 0 0 8px;
font-family: var(--font-display);
font-size: 30px;
}
.hero p { margin: 0 0 16px; opacity: .95; max-width: 560px; }
.hero .mascot {
flex-shrink: 0;
color: var(--c-grape);
filter: drop-shadow(0 0 24px color-mix(in srgb, var(--c-grape) 35%, transparent));
}
.hero .mascot svg, .hero .mascot img { display: block; }
.constellation { animation: ctRot 90s linear infinite; transform-origin: 50% 50%; }
.constellation .ct-pulse { animation: ctTwinkle 3.2s ease-in-out infinite; transform-origin: 108px 30px; transform-box: fill-box; }
.constellation .ct-pulse-2 { animation: ctTwinkle 3.8s ease-in-out infinite .8s; transform-origin: 132px 148px; transform-box: fill-box; }
@keyframes ctRot { to { transform: rotate(360deg); } }
@keyframes ctTwinkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
.constellation,
.constellation .ct-pulse,
.constellation .ct-pulse-2 { animation: none !important; }
}
/* --- 6. Owl mascot (CSS-drawn alternative; emoji is the default) --- */
.owl {
width: 130px; height: 130px;
position: relative;
display: inline-block;
}
/* --- 7. Progress bar --- */
.bar {
background: var(--border);
border-radius: 999px;
height: 14px;
overflow: hidden;
}
.bar > i {
display: block;
height: 100%;
background: var(--c-mint);
border-radius: 999px;
transition: width .35s ease;
}
.bar.sky > i { background: var(--c-sky); }
.bar.gold > i { background: var(--c-yellow); }
/* --- 8. Flashcard --- */
.flashwrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
margin-top: 12px;
min-height: calc(100vh - 320px);
min-height: calc(100dvh - 320px);
}
.flashcard {
width: 100%;
max-width: 520px;
height: 320px;
perspective: 1200px;
cursor: pointer;
}
.flashcard .inner {
position: relative;
width: 100%; height: 100%;
transition: transform .55s;
transform-style: preserve-3d;
}
.flashcard.flipped .inner { transform: rotateY(180deg); }
.flashcard .face {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
border: 2px solid var(--border);
background: var(--panel);
box-shadow: 0 6px 0 0 var(--border);
backface-visibility: hidden;
display: grid;
place-items: center;
padding: 28px;
text-align: center;
}
/* 顶部"胶带"装饰条（Stitch 贴纸风） */
.flashcard .face::before {
content: '';
position: absolute;
top: -11px;
left: 50%;
width: 92px;
height: 20px;
transform: translateX(-50%) rotate(-2deg);
background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 100%);
border-left: 1px dashed rgba(0,0,0,.18);
border-right: 1px dashed rgba(0,0,0,.18);
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,.10);
pointer-events: none;
}
.flashcard .face.back { transform: rotateY(180deg); background: var(--t-mint); border-color: var(--c-mint); box-shadow: 0 6px 0 0 var(--c-mint-d); }
.flashcard .face.back::before {
background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 100%);
}
.flashcard .word {
font-family: var(--font-display);
font-size: 44px;
font-weight: 700;
}
.flashcard .pos { color: var(--ink-soft); font-style: italic; margin-top: 4px; font-size: 16px; }
.flashcard .pron { color: var(--c-sky); margin-top: 6px; font-size: 16px; }
.flashcard .def { font-size: 22px; font-weight: 700; }
.flashcard .ex { margin-top: 12px; color: var(--ink-soft); font-style: italic; max-width: 420px; }
.rating {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* --- 8.1 Flashcard skin (背单词新皮肤) --- */
.fc-header { align-items: flex-start; }
.fc-header-l { display: flex; flex-direction: column; gap: 6px; }
.fc-header-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 260px; max-width: 360px; flex: 1; }
.fc-meta { display: flex; align-items: center; gap: 14px; margin-top: 2px; flex-wrap: wrap; }
.fc-theme-tag {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 999px;
background: var(--t-sky);
color: var(--c-sky-d);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
}
.fc-today { color: var(--ink-soft); font-size: 15px; font-weight: 600; }
.fc-sub-hidden { display: none; }
.fc-prog { width: 100%; height: 12px; background: #f4d7c8; }
.fc-prog > i { background: linear-gradient(90deg, #C75B2A 0%, #A84A1F 100%); }
/* 卡片主体：白色圆角大卡 */
.fc-skin { gap: 28px; margin-top: 18px; }
.flashcard.fc-card {
height: 460px;
max-width: 720px;
touch-action: pan-y;
user-select: none;
}
.fc-card .face {
border: none;
border-radius: 28px;
background: #ffffff;
box-shadow: 0 4px 24px rgba(60, 50, 30, .08), 0 1px 3px rgba(60, 50, 30, .05);
/* 覆盖默认 .flashcard .face 的 grid 居中：改用内层 inner 自己 flex 居中，
让 .fc-actions 能真正 absolute 在右上角 */
display: block;
padding: 0;
}
.fc-card .face::before { display: none; }
.fc-card .face.back {
background: #ffffff;
border: none;
box-shadow: 0 4px 24px rgba(60, 50, 30, .08), 0 1px 3px rgba(60, 50, 30, .05);
}
/* 卡片右上角浮动按钮组 */
.fc-actions {
position: absolute;
top: 18px;
right: 18px;
display: flex;
gap: 10px;
z-index: 2;
}
.fc-iconbtn {
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: var(--t-sky);
color: var(--c-sky-d);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .12s, background .15s;
}
.fc-iconbtn:hover { background: #c8eaff; transform: translateY(-1px); }
.fc-iconbtn .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.fc-iconbtn.fc-fav { color: var(--c-orange); }
.fc-iconbtn.fc-fav.on { background: var(--c-orange); color: #fff; }
.fc-iconbtn.fc-fav.on .ic { fill: #fff; }
/* 卡片正面/背面内容布局 — inner 容器铺满 face，自己 flex 居中 */
.fc-card .face > .fc-front-inner,
.fc-card .face > .fc-back-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 56px 44px 36px;
gap: 6px;
}
.fc-card .word { font-size: 52px; color: #1a1f2e; }
.fc-card .word.fc-word-sm { font-size: 38px; margin-bottom: 2px; }
.fc-card .pron { color: var(--ink-soft); font-style: italic; font-size: 20px; }
.fc-card .pos { color: var(--ink-soft); font-style: italic; font-size: 16px; margin-top: 2px; }
.fc-tap-hint { color: var(--ink-soft); font-size: 14px; margin-top: 22px; }
/* 背面释义块（浅蓝色圆角） */
.fc-def-box {
margin-top: 14px;
background: var(--t-sky);
border-radius: 18px;
padding: 18px 24px;
max-width: 560px;
width: 100%;
}
.fc-def-box .def {
font-size: 18px;
font-weight: 700;
color: var(--c-sky-d);
margin-bottom: 8px;
}
.fc-def-box .ex {
margin: 0;
color: var(--ink);
font-style: italic;
font-size: 16px;
line-height: 1.55;
}
/* 评分按钮：宽矩形扁平卡片风（3 档：不认识/模糊/认识） */
.fc-rating {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width: 100%;
max-width: 720px;
}
.fc-rate-btn {
border: none;
border-radius: 18px;
padding: 22px 8px 18px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--ink);
transition: transform .12s, box-shadow .15s;
}
.fc-rate-btn:hover { transform: translateY(-2px); }
.fc-rate-btn:active { transform: translateY(0); }
.fc-rate-face { display: inline-flex; line-height: 0; }
.fc-rate-face .ic { width: 30px; height: 30px; stroke-width: 2; }
.fc-rate-text { letter-spacing: .04em; }
.fc-rate-red { background: #ffd4d4; color: #b13838; }
.fc-rate-gray { background: #d9e2ec; color: #4a5a6c; }
.fc-rate-sky { background: #9bdcff; color: #1a5d85; }
@media (max-width: 720px) {
.fc-header-r { min-width: 0; width: 100%; align-items: stretch; max-width: none; }
.flashcard.fc-card { height: 420px; }
.fc-card .word { font-size: 40px; }
.fc-card .word.fc-word-sm { font-size: 30px; }
}
/* --- 8.2 Flashcard 互动增强 --- */
/* 背景柔光球 */
.fc-stage { position: relative; isolation: isolate; }
.fc-blob {
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
filter: blur(80px);
opacity: .55;
z-index: -1;
pointer-events: none;
}
.fc-blob-a {
top: -120px; left: -80px;
background: radial-gradient(circle, #ffd2c4 0%, transparent 70%);
animation: fcFloatA 18s ease-in-out infinite;
}
.fc-blob-b {
bottom: -160px; right: -100px;
background: radial-gradient(circle, #c9e7ff 0%, transparent 70%);
animation: fcFloatB 22s ease-in-out infinite;
}
@keyframes fcFloatA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, 60px) scale(1.08); }
}
@keyframes fcFloatB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, -40px) scale(1.12); }
}
/* 进度条里程碑节点 */
.fc-prog { position: relative; overflow: visible; }
.fc-prog > i { position: relative; z-index: 1; }
.fc-mile {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .85);
z-index: 2;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s;
}
.fc-mile[data-at="25"] { left: 25%; }
.fc-mile[data-at="50"] { left: 50%; }
.fc-mile[data-at="75"] { left: 75%; }
.fc-mile[data-at="100"] { left: calc(100% - 4px); }
.fc-mile.reached {
background: #fff;
transform: translate(-50%, -50%) scale(1.7);
box-shadow: 0 0 0 3px rgba(199, 91, 42, .25);
}
/* 3D 倾斜外层包装 */
.fc-tilt {
width: 100%;
max-width: 720px;
display: flex;
justify-content: center;
transform: perspective(1100px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
transform-style: preserve-3d;
transition: transform .18s ease-out;
will-change: transform;
}
.fc-tilt .flashcard { width: 100%; }
/* 卡片高光（跟随光标）— 保留 .face 原本 position: absolute */
.fc-card .face { overflow: hidden; }
.fc-card .face::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
220px circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, .55),
transparent 60%
);
opacity: 0;
transition: opacity .25s;
z-index: 1;
}
.fc-card.has-hover .face::after { opacity: 1; }
.fc-card .face > * { position: relative; z-index: 2; }
/* 拖拽进行中：临时禁用过渡，跟随光标移动 */
.fc-card.is-dragging { transition: none; cursor: grabbing; }
.fc-card.is-dragging .inner { transition: none; }
/* 滑出动画：左滑/右滑/中滑 */
.fc-card.fly-left { transition: transform .35s ease-in, opacity .35s; transform: translate(-110%, 20px) rotate(-18deg); opacity: 0; }
.fc-card.fly-right { transition: transform .35s ease-in, opacity .35s; transform: translate(110%, 20px) rotate(18deg); opacity: 0; }
.fc-card.fly-down { transition: transform .35s ease-in, opacity .35s; transform: translate(0, 80px) scale(.9); opacity: 0; }
.fc-card.snap-back { transition: transform .25s cubic-bezier(.34,1.56,.64,1); transform: translate(0, 0) rotate(0deg); }
/* 拖拽方向提示水印 — 纯大字，无背景框 */
.fc-card .fc-drag-hint {
position: absolute;
top: 26px;
left: 50%;
transform: translateX(-50%) scale(.9);
font-family: var(--font-display);
font-weight: 800;
font-size: 30px;
letter-spacing: .12em;
z-index: 3;
opacity: 0;
pointer-events: none;
transition: opacity .15s, transform .15s;
}
.fc-card .fc-drag-hint.show { opacity: .9; transform: translateX(-50%) scale(1); }
.fc-card .fc-drag-hint.left { color: #b13838; }
.fc-card .fc-drag-hint.right { color: #1a5d85; }
.fc-card .fc-drag-hint.down { color: #4a5a6c; }
/* 键盘快捷键提示条 */
.fc-tip-row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin: -6px 0 4px;
color: var(--ink-soft);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .03em;
}
.fc-tip-row kbd {
display: inline-block;
padding: 1px 7px;
margin: 0 1px;
background: rgba(60, 50, 30, .07);
border-radius: 6px;
font-family: var(--font-display);
font-size: 13px;
color: var(--ink);
}
.fc-tip-mute { opacity: .7; }
@media (hover: none) {
.fc-tip-row { display: none; }
}
/* 触屏 / 无 hover 设备：关闭高光与 tilt */
@media (hover: none) {
.fc-tilt { transform: none !important; transition: none; }
.fc-card.has-hover .face::after { opacity: 0; }
}
/* --- 9. Quiz --- */
.quiz-q {
font-family: var(--font-display);
font-size: 26px;
margin: 8px 0 22px;
}
.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.options .opt {
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
cursor: pointer;
text-align: left;
font-weight: 700;
font-size: 16px;
box-shadow: 0 3px 0 0 var(--border);
transition: transform .08s, background .15s;
}
.options .opt:hover { background: var(--t-sky); border-color: var(--c-sky); }
.options .opt:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--border); }
.options .opt.correct {
background: var(--t-mint);
border-color: var(--c-mint);
box-shadow: 0 3px 0 0 var(--c-mint-d);
}
.options .opt.wrong {
background: var(--t-red);
border-color: var(--c-red);
box-shadow: 0 3px 0 0 var(--c-red-d);
animation: opt-shake .42s ease-in-out;
}
@keyframes opt-shake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-7px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(2px); }
}
.input-spell {
width: 100%;
padding: 14px 4px;
font-size: 22px;
font-family: var(--font-display);
border: none;
border-bottom: 1.5px solid rgba(0,0,0,.15);
border-radius: 0;
outline: none;
letter-spacing: 1px;
background: transparent;
transition: border-color .2s;
}
.input-spell:focus { border-bottom-color: var(--c-sky); border-bottom-width: 2px; }
.feedback {
padding: 14px 18px;
border-radius: var(--radius);
font-weight: 700;
margin-top: 14px;
}
.feedback.ok { background: var(--t-mint); color: var(--c-mint-d); border: 2px solid var(--c-mint); }
.feedback.bad { background: var(--t-red); color: var(--c-red-d); border: 2px solid var(--c-red); }
/* 反馈条下方的例句行：不进框、淡色、轻量，作为补充阅读 */
.feedback-ex {
margin: 10px 4px 0;
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
font-weight: 400;
}
/* --- 9.1 Quiz MC 增强布局（mockup 1:1 复刻：3 列 head + 双层 panel + 2 列 foot） --- */
.quiz-mc-head {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 24px;
margin: 6px 0 22px;
}
.quiz-mc-sub {
margin: 0; font-size: 15px; color: var(--ink-soft);
letter-spacing: .06em; display: flex; align-items: center; gap: 12px;
}
.quiz-mc-sub-mark {
width: 30px; height: 1px; background: currentColor; opacity: .4;
position: relative; display: inline-block;
}
.quiz-mc-sub-mark::after {
content: ''; position: absolute; right: -4px; top: -3.5px;
width: 8px; height: 8px;
background: currentColor; opacity: .65;
transform: rotate(45deg);
}
.quiz-mc-q {
font-family: var(--font-display);
font-size: 36px; line-height: 1.3; margin: 0 0 26px; font-weight: 700;
}
.quiz-mc-word { color: var(--c-sky); }
.quiz-mc-head-progress { text-align: right; min-width: 220px; }
.quiz-mc-meta { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.quiz-mc-progress {
width: 220px; height: 10px; border-radius: 99px;
background: rgba(0,0,0,.07); overflow: hidden; margin-left: auto;
box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.quiz-mc-progress-bar {
height: 100%; border-radius: 99px;
background: linear-gradient(90deg, var(--c-sky), var(--c-mint));
transition: width .35s ease;
box-shadow: 0 0 8px rgba(28, 176, 246, .4);
}
.quiz-mc-score {
display: inline-flex; align-items: center; gap: 7px;
padding: 10px 14px; border-radius: 99px;
background: var(--panel);
box-shadow: inset 0 0 0 1.5px var(--border);
font-size: 15px; color: var(--ink-soft); font-weight: 600;
white-space: nowrap;
}
.quiz-mc-score svg { width: 18px; height: 18px; color: var(--c-yellow); }
.quiz-mc-score strong { color: var(--ink); margin: 0 2px; font-size: 16px; }
/* 选项内嵌面板 */
.quiz-mc-board {
padding: 26px;
border-radius: var(--radius-lg);
background: rgba(0, 0, 0, .025);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.options-mc { gap: 16px; }
/* 选项卡放大版 */
.options .opt.opt-mc {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 36px 36px; min-height: 124px;
font-size: 24px;
border-radius: 20px;
background: var(--panel);
}
.opt-mc-text { flex: 1; text-align: left; line-height: 1.4; }
.opt-mc-radio {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
box-shadow: inset 0 0 0 2px var(--border);
position: relative; transition: box-shadow .15s, background .15s;
}
.options .opt.opt-mc:hover .opt-mc-radio {
box-shadow: inset 0 0 0 2px var(--c-sky);
}
.options .opt.opt-mc.correct .opt-mc-radio {
box-shadow: inset 0 0 0 2px var(--c-mint-d);
background: var(--c-mint);
}
.options .opt.opt-mc.correct .opt-mc-radio::after {
content: ''; position: absolute; inset: 7px;
border-radius: 50%; background: #fff;
}
.options .opt.opt-mc.wrong .opt-mc-radio {
box-shadow: inset 0 0 0 2px var(--c-red-d);
background: var(--c-red);
}
.options .opt.opt-mc.wrong .opt-mc-radio::after {
content: ''; position: absolute; inset: 7px;
border-radius: 50%; background: #fff;
}
/* 答完的小贴士卡 + 下一题（mockup：左右并排，按钮等高） */
.quiz-mc-foot {
margin-top: 24px;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 22px;
align-items: stretch;
}
.quiz-mc-tip {
display: flex; align-items: center; gap: 18px;
padding: 20px 24px; margin: 0;
background: var(--t-yellow);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1.5px rgba(255, 200, 0, .45);
min-height: 156px;
}
.quiz-mc-tip-body { flex: 1; min-width: 0; }
.quiz-mc-tip-title {
margin: 0 0 12px; font-size: 19px; font-weight: 700;
color: var(--c-yellow-d); letter-spacing: .04em;
display: inline-flex; align-items: center; gap: 9px;
}
.quiz-mc-tip-title svg { color: var(--c-yellow-d); width: 20px; height: 20px; }
.quiz-mc-tip-text { margin: 0; font-size: 19px; line-height: 1.55; }
.quiz-mc-tip-text strong { color: var(--c-yellow-d); }
.quiz-mc-tip-mascot {
flex-shrink: 0; width: 132px; height: 132px;
display: flex; align-items: center; justify-content: center;
}
.quiz-mc-tip-mascot img,
.quiz-mc-tip-mascot svg {
width: 100%; height: 100%; object-fit: contain;
transform-origin: bottom center;
animation: mascot-breathe 3.2s ease-in-out infinite;
}
.quiz-mc-tip-mascot img.cheer { animation: mascot-cheer .8s cubic-bezier(.34,1.56,.64,1), mascot-breathe 3.2s ease-in-out 1.2s infinite; }
.quiz-mc-tip-mascot img.sad { animation: mascot-sad .9s cubic-bezier(.4,0,.4,1) forwards; }
@keyframes mascot-breathe {
0%,100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.025) translateY(-2px); }
}
@keyframes mascot-cheer {
0% { transform: translateY(0) scale(1); }
30% { transform: translateY(-22px) scale(1.05, .95); }
55% { transform: translateY(0) scale(.92, 1.08); }
75% { transform: translateY(-6px) scale(1.02, .98); }
100% { transform: translateY(0) scale(1); }
}
@keyframes mascot-sad {
0% { transform: scale(1) translateY(0) rotate(0); }
40% { transform: scale(.92) translateY(6px) rotate(-3deg); }
60% { transform: scale(.9) translateY(8px) rotate(3deg); }
100% { transform: scale(.88) translateY(8px) rotate(0); }
}
.quiz-mc-next-col {
display: flex; flex-direction: column; align-items: stretch; gap: 10px;
min-height: 156px;
}
.quiz-mc-kbd {
font-size: 14px; color: var(--ink-soft); text-align: center;
}
.quiz-mc-kbd kbd {
display: inline-block; padding: 4px 12px; border-radius: 8px;
font-family: inherit; font-size: 13px; font-weight: 600;
background: var(--panel);
box-shadow: inset 0 0 0 1px var(--border), 0 1.5px 0 0 var(--border);
color: var(--ink);
margin: 0 2px;
}
.btn.quiz-mc-next-btn {
flex: 1; width: 100%;
font-size: 26px; font-weight: 700;
padding: 22px 36px; border-radius: 22px;
min-height: 108px;
justify-content: center;
gap: 16px;
letter-spacing: 0;
}
.btn.quiz-mc-next-btn .ic { width: 28px; height: 28px; stroke-width: 2.5; }
/* 触发阈值 900px：覆盖手机横屏（iPhone 14 Pro 横屏 852×393）等"窄主内容区"场景。
原来 780px 在横屏下不触发，main 被 sidebar 夹到 584px 时第一列被挤剩 89px，
把"看意思 · 选英文单词" 压成竖排。 */
@media (max-width: 900px) {
.quiz-mc-head { grid-template-columns: 1fr; gap: 12px; }
.quiz-mc-head-progress { text-align: left; min-width: 0; }
.quiz-mc-progress { margin-left: 0; width: 100%; }
.quiz-mc-q { font-size: 24px; }
.options .opt.opt-mc { padding: 20px; min-height: 72px; font-size: 16px; }
.quiz-mc-board { padding: 18px; }
.quiz-mc-tip-mascot { width: 84px; height: 84px; }
.quiz-mc-foot { grid-template-columns: 1fr; }
.quiz-mc-next-col { min-height: 0; }
.btn.quiz-mc-next-btn { min-height: 60px; }
}
/* --- 10. Listening / mic --- */
.mic-btn {
width: 96px; height: 96px;
border-radius: 50%;
border: none;
background: var(--c-red);
color: #fff;
cursor: pointer;
box-shadow: 0 5px 0 0 var(--c-red-d);
transition: transform .08s, box-shadow .08s;
display: grid;
place-items: center;
margin: 0 auto;
}
.mic-btn .ic { width: 40px; height: 40px; stroke-width: 2.25; }
.mic-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--c-red-d); }
.mic-btn.listening {
animation: pulse 1.2s infinite ease-in-out;
}
@keyframes pulse {
0%,100% { box-shadow: 0 5px 0 0 var(--c-red-d), 0 0 0 0 rgba(255,75,75,.45); }
50% { box-shadow: 0 5px 0 0 var(--c-red-d), 0 0 0 18px rgba(255,75,75,0); }
}
/* --- 11. Trend chart (progress page) --- */
.trend-chart { margin-top: 14px; }
.trend-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-chart .baseline { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend-chart .bar { fill: var(--t-mint); }
.trend-chart .area { /* fill 来自 url(#trend-fill-grad) */ }
.trend-chart .line { fill: none; stroke: var(--c-mint-d); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend-chart .dot { fill: var(--c-mint-d); }
.trend-chart .grad-top { stop-color: var(--c-mint); stop-opacity: .55; }
.trend-chart .grad-bot { stop-color: var(--c-mint); stop-opacity: 0; }
.trend-chart .tick line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend-chart .tick text { fill: var(--ink-soft); font-size: 13px; font-family: var(--font-body); }
.trend-legend { display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 14px; }
.trend-legend .lg-bar { display: inline-block; width: 4px; height: 12px; border-radius: 2px; background: var(--t-mint); vertical-align: middle; margin-right: 4px; }
.trend-legend .lg-line { display: inline-block; width: 18px; height: 2px; background: var(--c-mint-d); vertical-align: middle; margin-right: 4px; }
.trend-legend .lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-mint-d); vertical-align: middle; margin-right: 4px; }
/* --- 12. Badges --- */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.badge {
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 16px;
text-align: center;
box-shadow: var(--shadow-card);
position: relative;
}
.badge .b-ic {
display: inline-grid;
place-items: center;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--t-yellow);
color: var(--c-yellow-d);
}
.badge .b-ic .ic { width: 28px; height: 28px; stroke-width: 2; }
.badge.locked .b-ic { background: #efefef; color: #b5b5b5; }
.badge.unlocked .b-ic { background: var(--t-yellow); color: var(--c-orange-d); }
.badge .b-name { font-family: var(--font-display); font-size: 16px; margin-top: 8px; }
.badge .b-desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.badge.locked { opacity: .35; filter: grayscale(1); }
.badge.unlocked { border-color: var(--c-yellow); box-shadow: 0 3px 0 0 var(--c-yellow-d); }
/* Chip with icon */
.chip .ic { width: 16px; height: 16px; stroke-width: 2.25; margin-right: 4px; vertical-align: -3px; }
.btn .ic { width: 18px; height: 18px; stroke-width: 2.5; }
.btn.sm .ic { width: 16px; height: 16px; }
.btn.lg .ic { width: 20px; height: 20px; }
.pill .ic { width: 14px; height: 14px; stroke-width: 2.5; vertical-align: -2px; margin-right: 3px; }
/* --- 13. Theme picker chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
.chip {
padding: 6px 12px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.15);
background: transparent;
cursor: pointer;
font-weight: 700;
font-size: 14px;
box-shadow: none;
transition: transform .08s, border-color .15s, background .15s;
}
.chip:hover { background: var(--t-sky); }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--border); }
.chip.active { background: var(--c-mint); color: #fff; border-color: var(--c-mint-d); box-shadow: 0 3px 0 0 var(--c-mint-d); }
/* --- 14. Reading mode (clickable words) --- */
.reader {
font-size: 19px;
line-height: 1.8;
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 22px 26px;
}
.reader w {
cursor: pointer;
padding: 0 1px;
border-radius: 4px;
transition: background .12s;
}
.reader w:hover { background: var(--t-yellow); }
.reader w.known { color: var(--c-mint-d); font-weight: 700; }
.legend {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: var(--ink-soft);
}
.legend .sw {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--border);
vertical-align: middle;
margin-right: 2px;
}
.tooltip {
position: fixed;
z-index: 100;
background: #2d2d2d;
color: #fff;
padding: 10px 14px;
border-radius: 10px;
font-size: 15px;
max-width: 260px;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
pointer-events: none;
}
.tooltip b { color: var(--c-yellow); }
/* --- 15. Idiom card --- */
.idiom {
background: linear-gradient(135deg, var(--c-yellow) 0%, var(--c-orange) 100%);
color: #fff;
border-radius: var(--radius);
padding: 22px;
box-shadow: 0 5px 0 0 var(--c-orange-d);
}
.idiom .ttl { font-family: var(--font-display); font-size: 14px; opacity: .9; text-transform: uppercase; letter-spacing: 1px; }
.idiom .ttl .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.idiom .phrase { font-family: var(--font-display); font-size: 26px; margin: 6px 0 8px; }
.idiom .mean { font-weight: 600; }
.idiom .ex { margin-top: 8px; font-style: italic; opacity: .95; }
/* --- 16. Misc --- */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.hide { display: none !important; }
.pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 0;
border-radius: 0;
font-size: 16px;
font-weight: 700;
background: transparent;
color: var(--c-blue, var(--c-sky));
letter-spacing: .04em;
}
.pill .ic { width: 16px; height: 16px; stroke-width: 2.5; vertical-align: middle; margin: 0; }
.pill.mint { background: transparent; color: var(--c-mint-d); }
.pill.orange { background: transparent; color: var(--c-orange-d); }
.pill.red { background: var(--t-red); color: var(--c-red-d); }
.pill.grape { background: var(--t-grape); color: var(--c-grape-d); }
/* HUD 三件事打包成一条 stat bar：浅底容器，元素均匀间距，无内部框感 */
.hud-row {
gap: 18px;
padding: 6px 18px;
background: rgba(0,0,0,.04);
border-radius: 999px;
align-items: center;
}
.hud-row .pill { font-size: 18px; padding: 0; background: transparent; }
.hud-row .pill .ic { width: 22px; height: 22px; }
/* 模式 pill：降级到中性，不抢戏 */
.hud-row #mode-pill { color: var(--ink-soft, #6e6e6e); font-weight: 600; }
.hud-row #mode-pill .ic { color: var(--ink-soft, #8a9990); }
.hud-row .pill + .pill::before { content: none; }
/* ============================================
全屏开场 Splash —— 卡通版（无框 + 河流流光 + 磨砂丸）
============================================ */
/* 每个游戏的卡通配色（accent1 = 主色，accent2 = 辅色） */
.splash {
--ct-a1: var(--c-grape);
--ct-a2: var(--c-sky);
--ct-a3: var(--c-pink);
--ct-tint: var(--t-grape);
}
.splash.theme-sky {
--ct-a1: var(--c-sky);
--ct-a2: var(--c-grape);
--ct-a3: var(--c-blue);
--ct-tint: var(--t-sky);
}
.splash.theme-orange {
--ct-a1: var(--c-orange);
--ct-a2: var(--c-red);
--ct-a3: var(--c-yellow);
--ct-tint: var(--t-orange);
}
.splash.theme-grape {
--ct-a1: var(--c-grape);
--ct-a2: var(--c-pink);
--ct-a3: var(--c-sky);
--ct-tint: var(--t-grape);
}
.splash.theme-mint {
--ct-a1: var(--c-mint);
--ct-a2: var(--c-sky);
--ct-a3: var(--c-yellow);
--ct-tint: var(--t-mint);
}
/* 全屏：奶油 + 糖果云气泡 + 双侧极淡渐变 */
.splash {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow: auto;
animation: splashFade .35s ease both, splashBubbleDrift 40s linear infinite;
background:
/* 糖果云气泡（8 颗，平铺） */
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 80% 60% at 15% 15%, var(--ct-tint) 0%, transparent 55%),
radial-gradient(ellipse 70% 55% at 85% 85%, var(--ct-tint) 0%, transparent 55%),
linear-gradient(180deg, #FFFDF7 0%, var(--bg) 100%);
background-size: 900px 900px, auto, auto, auto;
background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
/* 糖果云缓慢上浮 */
@keyframes splashBubbleDrift {
0% { background-position: 0 0, 0 0, 0 0, 0 0; }
100% { background-position: 0 -900px, 0 0, 0 0, 0 0; }
}
/* ── 河流流光 1：主色斜带 ── */
.splash::before {
content: '';
position: absolute;
pointer-events: none;
width: 260vw;
height: 55vh;
top: 8%;
left: -80vw;
background: linear-gradient(90deg,
transparent 0%,
transparent 35%,
color-mix(in srgb, var(--ct-a1) 22%, transparent) 44%,
color-mix(in srgb, var(--ct-a1) 38%, transparent) 50%,
color-mix(in srgb, var(--ct-a1) 22%, transparent) 56%,
transparent 65%,
transparent 100%);
filter: blur(38px);
transform: rotate(-12deg);
transform-origin: center;
animation: splashRiver1 28s linear infinite;
}
/* ── 河流流光 2：辅色斜带，反向 ── */
.splash::after {
content: '';
position: absolute;
pointer-events: none;
width: 260vw;
height: 50vh;
bottom: 10%;
right: -80vw;
background: linear-gradient(90deg,
transparent 0%,
transparent 38%,
color-mix(in srgb, var(--ct-a2) 20%, transparent) 47%,
color-mix(in srgb, var(--ct-a2) 35%, transparent) 50%,
color-mix(in srgb, var(--ct-a2) 20%, transparent) 53%,
transparent 62%,
transparent 100%);
filter: blur(48px);
transform: rotate(8deg);
transform-origin: center;
animation: splashRiver2 36s linear infinite reverse;
}
@keyframes splashRiver1 {
0% { transform: rotate(-12deg) translateX(0); }
100% { transform: rotate(-12deg) translateX(60vw); }
}
@keyframes splashRiver2 {
0% { transform: rotate(8deg) translateX(0); }
100% { transform: rotate(8deg) translateX(60vw); }
}
/* 去框：splash-inner 仅做布局容器 */
.splash-inner {
position: relative;
z-index: 1;
max-width: 820px;
width: 100%;
text-align: center;
background: transparent;
border: none;
border-radius: 0;
padding: 0 24px;
box-shadow: none;
animation: splashRise .5s cubic-bezier(.22,.94,.4,1.2) both;
}
/* 第 3 条流光：第三色，近水平 */
.splash-inner::before {
content: '';
position: fixed;
pointer-events: none;
width: 260vw;
height: 35vh;
top: 42%;
left: -80vw;
background: linear-gradient(90deg,
transparent 0%,
transparent 42%,
color-mix(in srgb, var(--ct-a3) 18%, transparent) 50%,
transparent 58%,
transparent 100%);
filter: blur(32px);
transform: rotate(3deg);
z-index: -1;
animation: splashRiver3 44s linear infinite;
}
@keyframes splashRiver3 {
0% { transform: rotate(3deg) translateX(-30vw); }
100% { transform: rotate(3deg) translateX(30vw); }
}
/* 隐藏行星 orb */
.splash-decor { display: none; }
/* 大标题：卡通显示字 + 主色 → 辅色渐变 + 涂鸦星花 + 弹簧入场 */
.splash-title {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: 92px;
font-weight: 700;
line-height: 1.05;
margin: 50px 0 14px;
letter-spacing: -.5px;
background: linear-gradient(135deg, var(--ct-a1) 0%, var(--ct-a2) 70%, var(--ct-a3) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.08));
animation: splashTitlePop .65s cubic-bezier(.34, 1.56, .64, 1) both;
}
/* 标题左上涂鸦星花 */
.splash-title::before {
content: '✦';
position: absolute;
top: -18px;
left: -12px;
font-size: 32px;
color: var(--ct-a2);
-webkit-text-fill-color: var(--ct-a2);
animation: splashSparkleSpin 5s linear infinite;
pointer-events: none;
}
/* 标题右下涂鸦星花 */
.splash-title::after {
content: '✧';
position: absolute;
bottom: -6px;
right: -10px;
font-size: 26px;
color: var(--ct-a1);
-webkit-text-fill-color: var(--ct-a1);
animation: splashSparkleSpin 4s linear infinite reverse;
pointer-events: none;
}
@keyframes splashTitlePop {
0% { opacity: 0; transform: scale(.7) translateY(20px); }
60% { opacity: 1; transform: scale(1.06) translateY(0); }
100% { transform: scale(1); }
}
@keyframes splashSparkleSpin {
0%, 100% { transform: rotate(0deg) scale(1); opacity: .9; }
50% { transform: rotate(180deg) scale(1.25); opacity: 1; }
}
.theme-orange .splash-title,
.theme-sky .splash-title,
.theme-mint .splash-title,
.theme-grape .splash-title {
background: linear-gradient(135deg, var(--ct-a1) 0%, var(--ct-a2) 70%, var(--ct-a3) 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* 副标题：两端涂鸦星 */
.splash-tag {
display: inline-block;
position: relative;
color: var(--ink-soft);
font-size: 20px;
letter-spacing: .02em;
padding: 0 38px;
margin: 0 0 24px;
}
.splash-tag::before,
.splash-tag::after {
content: '✦';
position: absolute;
top: 50%;
font-size: 15px;
color: var(--ct-a1);
opacity: .8;
transform: translateY(-50%);
animation: splashSparkleSpin 6s linear infinite;
}
.splash-tag::before { left: 4px; }
.splash-tag::after { right: 4px; animation-direction: reverse; }
/* 地道表达标语：放大，无 pill */
.splash-quote {
display: inline-block;
font-style: italic;
font-size: 19px;
color: var(--ct-a1);
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0 0 32px;
max-width: 90%;
}
.theme-orange .splash-quote,
.theme-sky .splash-quote,
.theme-mint .splash-quote,
.theme-grape .splash-quote { background: transparent; }
/* 设置行 */
.splash .row {
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 14px 0;
align-items: center;
}
.splash .row strong {
color: var(--ink-soft);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: .12em;
font-size: 16px;
text-transform: uppercase;
margin-right: 14px;
}
.splash .chips { justify-content: center; gap: 12px; }
/* 主题下拉框：无框 */
.splash #theme-sel {
background: transparent;
color: var(--ink);
border: none;
border-radius: 0;
padding: 6px 28px 6px 4px;
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: .02em;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--ct-a1) 50%),
linear-gradient(135deg, var(--ct-a1) 50%, transparent 50%);
background-position: right 14px top 56%, right 8px top 56%;
background-size: 8px 8px, 8px 8px;
background-repeat: no-repeat;
}
/* 磨砂玻璃丸 chip — 弹簧动效 */
.splash .chip {
padding: 12px 28px;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
letter-spacing: .02em;
background: rgba(255,255,255,.55);
color: var(--ink);
border: none;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
}
.splash .chip .ic {
width: 18px;
height: 18px;
stroke-width: 2.25;
margin-right: 8px;
vertical-align: -3px;
color: var(--ct-a1);
}
.splash .chip:hover,
.splash .chip:not(.active):hover {
background: rgba(255,255,255,.85);
color: var(--ct-a1);
transform: translateY(-3px) scale(1.04);
box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.splash .chip:not(.active):hover .ic { color: var(--ct-a1); }
.splash .chip:active { transform: scale(.94) translateY(0) !important; }
/* 激活：主色饱和填充 + 软发光 + 上下跳动 */
.splash .chip.active {
background: linear-gradient(135deg, var(--ct-a1) 0%, var(--ct-a2) 100%);
color: #fff;
border: none;
box-shadow:
0 8px 22px color-mix(in srgb, var(--ct-a1) 35%, transparent),
0 0 30px color-mix(in srgb, var(--ct-a1) 25%, transparent);
animation: splashChipBounce 1.8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.splash .chip.active .ic { color: #fff; }
@keyframes splashChipBounce {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.03); }
}
/* 启动按钮：饱和糖果丸 + 大光晕 + 弹簧 + 左右涂鸦星 */
.splash-start,
.btn.splash-start {
position: relative;
background: linear-gradient(135deg, var(--ct-a1) 0%, var(--ct-a2) 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
font-size: 22px !important;
letter-spacing: .04em !important;
padding: 18px 56px !important;
margin-top: 32px;
box-shadow:
0 10px 28px color-mix(in srgb, var(--ct-a1) 40%, transparent),
0 0 50px color-mix(in srgb, var(--ct-a1) 25%, transparent) !important;
transition: all .35s cubic-bezier(.34, 1.56, .64, 1) !important;
overflow: visible;
animation: splashStartFloat 3s ease-in-out infinite;
}
/* 按钮后大光晕 */
.splash-start::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 200%;
height: 280%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse 50% 40% at 50% 50%,
color-mix(in srgb, var(--ct-a1) 30%, transparent) 0%,
transparent 70%);
filter: blur(40px);
z-index: -1;
pointer-events: none;
}
/* 按钮右侧涂鸦星 */
.splash-start::after {
content: '✦';
position: absolute;
top: -8px;
right: -16px;
font-size: 22px;
color: var(--ct-a3);
animation: splashSparkleSpin 4.5s linear infinite;
pointer-events: none;
}
.splash-start:hover {
transform: translateY(-4px) scale(1.04);
box-shadow:
0 16px 38px color-mix(in srgb, var(--ct-a1) 55%, transparent),
0 0 80px color-mix(in srgb, var(--ct-a1) 40%, transparent) !important;
}
.splash-start:active { transform: scale(.96) translateY(0) !important; }
@keyframes splashStartFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* 回首页链接 */
.splash-inner a.muted {
color: var(--ink-soft);
font-family: var(--font-display);
letter-spacing: .04em;
font-size: 16px;
transition: color .25s ease;
}
.splash-inner a.muted:hover { color: var(--ct-a1); }
/* 入场动画 */
@keyframes splashFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes splashRise {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.splash,
.splash::before,
.splash::after,
.splash-inner::before,
.splash-title,
.splash-title::before,
.splash-title::after,
.splash-tag::before,
.splash-tag::after,
.splash-start,
.splash-start::after,
.splash .chip.active { animation: none !important; }
}
/* 退出动画（添加 splash-leaving class 触发） */
.splash.splash-leaving { animation: splashFadeOut .28s ease forwards; }
@keyframes splashFadeOut {
to { opacity: 0; transform: scale(1.02); }
}
/* === 背单词开场：便签网格风（去背景色调） === */
.splash.splash-notes {
background: var(--bg);
animation: splashFade .35s ease both;
}
.splash.splash-notes::before,
.splash.splash-notes::after { display: none; }
.notes-inner {
max-width: 960px;
width: 100%;
padding: 0 24px;
}
.notes-title.splash-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #E27D5C 0%, #C97DD4 50%, #7B82E8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 0 0 14px;
text-shadow: none;
}
.notes-title.splash-title::before,
.notes-title.splash-title::after { display: none; }
.notes-sub {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
color: var(--ink-soft);
font-size: 16px;
margin: 0 0 40px;
font-weight: 500;
}
.notes-sub-em { color: #7B82E8; font-style: italic; font-weight: 600; }
.notes-sub-dot { opacity: .45; }
.notes-panel { width: 100%; margin-bottom: 36px; }
.notes-panel-label {
text-align: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: .25em;
text-transform: uppercase;
margin: 0 0 22px;
}
.notes-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px 18px;
}
@media (max-width: 900px) { .notes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .notes-grid { grid-template-columns: repeat(2, 1fr); } }
.note-card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 88px;
padding: 22px 14px 18px;
border: none;
border-radius: 10px;
background: var(--note-bg, #fef9c3);
box-shadow: 0 4px 12px rgba(60, 50, 30, .07), 0 1px 2px rgba(60, 50, 30, .05);
cursor: pointer;
transform: rotate(var(--note-rot, 0deg));
transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
user-select: none;
}
.note-card:hover {
transform: rotate(calc(var(--note-rot, 0deg) + 1.5deg)) translateY(-3px);
box-shadow: 0 10px 22px rgba(60, 50, 30, .12), 0 2px 4px rgba(60, 50, 30, .05);
}
.note-card.active {
transform: rotate(var(--note-rot, 0deg)) scale(1.1);
box-shadow: 0 14px 32px rgba(226, 125, 92, .28), 0 2px 6px rgba(60, 50, 30, .08);
outline: 2px solid #E27D5C;
outline-offset: 1px;
z-index: 2;
color: #1a1a1a;
}
.note-tape {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(var(--tape-rot, 2deg));
width: 46px;
height: 14px;
background: rgba(255, 255, 255, .7);
border-left: 1px dashed rgba(0, 0, 0, .12);
border-right: 1px dashed rgba(0, 0, 0, .12);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.note-card.active .note-tape {
background: rgba(226, 125, 92, .55);
border-color: rgba(226, 125, 92, .35);
}
.note-label { position: relative; z-index: 1; line-height: 1.2; text-align: center; }
/* 本阶段推荐：便签右下角小角标 */
.note-card .note-rec {
position: absolute;
right: -4px;
bottom: -8px;
z-index: 3;
padding: 3px 9px;
border-radius: 999px;
background: var(--c-yellow);
color: #5b4500;
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 2px 6px rgba(180,140,20,.4);
transform: rotate(3deg);
}
.note-card.is-rec { box-shadow: 0 6px 18px rgba(180, 140, 20, .18), 0 1px 2px rgba(60, 50, 30, .05); }
/* 每个主题的便签色 + 微旋 + 胶带角度 */
.note-card[data-k="daily"] { --note-bg: #e0f2fe; --note-rot: -1deg; --tape-rot: 2deg; }
.note-card[data-k="travel"] { --note-bg: #dcfce7; --note-rot: 1deg; --tape-rot: -1deg; }
.note-card[data-k="business"] { --note-bg: #fef9c3; --note-rot: -1deg; --tape-rot: 1deg; }
.note-card[data-k="feelings"] { --note-bg: #fce7f3; --note-rot: 2deg; --tape-rot: -2deg; }
.note-card[data-k="nature"] { --note-bg: #f0fdf4; --note-rot: -2deg; --tape-rot: 3deg; }
.note-card[data-k="tech"] { --note-bg: #eff6ff; --note-rot: 1deg; --tape-rot: -1deg; }
.note-card[data-k="health"] { --note-bg: #fff1f2; --note-rot: -2deg; --tape-rot: 2deg; }
.note-card[data-k="food"] { --note-bg: #ffedd5; --note-rot: 1deg; --tape-rot: -2deg; }
.note-card[data-k="edu"] { --note-bg: #f5f3ff; --note-rot: 1deg; --tape-rot: -3deg; }
/* CTA：圆角胶囊渐变 */
.notes-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 44px;
border: none;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: .04em;
color: #fff;
background: linear-gradient(135deg, #E27D5C 0%, #7B82E8 100%);
cursor: pointer;
box-shadow: 0 10px 28px rgba(123, 130, 232, .35);
transition: transform .15s, box-shadow .2s;
}
.notes-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(123, 130, 232, .45);
}
.notes-cta:active { transform: translateY(0); }
.notes-cta .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.notes-back-row { margin: 22px 0 0; }
.notes-back {
color: var(--ink-soft);
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: color .2s;
}
.notes-back:hover { color: #7B82E8; }
@media (max-width: 720px) {
.notes-title.splash-title { font-size: 36px; }
.notes-sub { font-size: 14px; }
.notes-sub-dot { display: none; }
}
/* —— 通用：splash-notes 容器下的标题 / 副标 / chip / 启动按钮 / 返回链接 —— */
.splash.splash-notes .splash-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #E27D5C 0%, #C97DD4 50%, #7B82E8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 0 0 14px;
text-shadow: none;
}
.splash.splash-notes .splash-title::before,
.splash.splash-notes .splash-title::after { display: none; }
.splash.splash-notes .splash-tag,
.splash.splash-notes .splash-quote {
color: var(--ink-soft);
background: transparent;
border: none;
text-shadow: none;
padding: 0;
font-size: 16px;
font-weight: 500;
margin: 0 0 6px;
font-style: normal;
}
.splash.splash-notes .splash-tag::before,
.splash.splash-notes .splash-tag::after,
.splash.splash-notes .splash-quote::before,
.splash.splash-notes .splash-quote::after { display: none; }
.splash.splash-notes .splash-quote {
color: #7B82E8;
font-style: italic;
margin-bottom: 28px;
}
.splash.splash-notes .splash-decor { display: none; }
/* 配置行（"模式：" "题量：" 等） */
.splash.splash-notes .row {
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 10px 0;
}
.splash.splash-notes .row strong {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: .18em;
text-transform: uppercase;
background: transparent;
padding: 0;
border: none;
}
/* 配置 chip：白底浅描边，激活态暖橙渐变填充 */
.splash.splash-notes .chip {
background: #ffffff;
border: 1px solid rgba(60, 50, 30, .12);
color: var(--ink);
border-radius: 999px;
padding: 9px 18px;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
letter-spacing: .03em;
box-shadow: 0 2px 6px rgba(60, 50, 30, .06);
transition: transform .18s, box-shadow .2s, border-color .2s;
}
.splash.splash-notes .chip:hover {
border-color: #E27D5C;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(60, 50, 30, .10);
}
.splash.splash-notes .chip.active {
background: linear-gradient(135deg, #E27D5C 0%, #C97DD4 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 18px rgba(226, 125, 92, .35);
}
.splash.splash-notes .chip .ic { color: inherit !important; }
/* select / textarea 在 splash-notes 下 */
.splash.splash-notes #theme-sel,
.splash.splash-notes .splash-inner select {
background: #ffffff;
border: 1px solid rgba(60, 50, 30, .12);
border-radius: 999px;
padding: 9px 18px;
font-weight: 700;
color: var(--ink);
box-shadow: 0 2px 6px rgba(60, 50, 30, .06);
}
/* 启动按钮 .splash-start：与 .notes-cta 同款胶囊 */
.splash.splash-notes .splash-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;
padding: 16px 44px;
border: none;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: .04em;
color: #fff;
background: linear-gradient(135deg, #E27D5C 0%, #7B82E8 100%);
cursor: pointer;
box-shadow: 0 10px 28px rgba(123, 130, 232, .35);
transition: transform .15s, box-shadow .2s, filter .2s;
text-transform: none;
}
.splash.splash-notes .splash-start:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(123, 130, 232, .45);
}
.splash.splash-notes .splash-start:active { transform: translateY(0); }
.splash.splash-notes .splash-start .ic { width: 18px; height: 18px; stroke-width: 2.4; color: #fff; }
/* "回首页" 文字链接 */
.splash.splash-notes .splash-inner a.muted {
color: var(--ink-soft);
font-size: 15px;
font-weight: 600;
background: transparent;
border: none;
padding: 0;
}
.splash.splash-notes .splash-inner a.muted:hover { color: #7B82E8; }
/* 内层容器调整 */
.splash.splash-notes .splash-inner {
max-width: 820px;
width: 100%;
padding: 0 24px;
}
/* ── 卡通主题 · 开场页翻新（听说/阅读/测验/连连看/发音房/互译）──
原本内容飘在一大片空旷的正中央，底部还有横向滚动条。
改成：内容收进一张居中白卡片 + 顶部图标徽章 + 柔和主题色背景晕。 */
html[data-theme="cartoon"] .splash.splash-notes {
overflow-x: hidden;
background:
radial-gradient(ellipse 72% 52% at 16% 12%, var(--ct-tint) 0%, transparent 60%),
radial-gradient(ellipse 62% 46% at 86% 90%, var(--ct-tint) 0%, transparent 60%),
linear-gradient(180deg, #FFFDF7 0%, var(--bg) 100%);
}
/* 杀掉残留的那条 260vw 流光：它是横向滚动条的元凶，也是多余的模糊光晕 */
html[data-theme="cartoon"] .splash.splash-notes .splash-inner::before { display: none; }
html[data-theme="cartoon"] .splash.splash-notes .splash-inner {
max-width: 600px;
padding: 46px 48px 40px;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 22px 60px rgba(60, 50, 30, .15);
display: flex;
flex-direction: column;
align-items: center;
}
/* 顶部图标徽章：用页面主题色染圆形底 */
html[data-theme="cartoon"] .splash.splash-notes .splash-decor {
display: flex;
align-items: center;
justify-content: center;
width: 66px;
height: 66px;
margin-bottom: 18px;
border-radius: 50%;
background: var(--ct-tint);
color: var(--ct-a1);
}
html[data-theme="cartoon"] .splash.splash-notes .splash-decor svg {
width: 31px;
height: 31px;
}
@media (max-width: 600px) {
html[data-theme="cartoon"] .splash.splash-notes .splash-inner {
padding: 34px 22px 30px;
border-radius: 22px;
}
html[data-theme="cartoon"] .splash.splash-notes .splash-title { font-size: 38px; }
}
/* --- Match · 连连看（连线版） --- */
.lk-panel {
background: var(--panel);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-card);
}
.lk-hud {
display: flex;
align-items: center;
gap: 16px;
margin: 0 auto 18px;
max-width: 960px;
flex-wrap: wrap;
}
.lk-hud-stat { display: flex; flex-direction: column; line-height: 1.15; }
.lk-hud-k { font-size: 13px; font-weight: 700; opacity: .55; }
.lk-hud-v { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.lk-hud-prog { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 10px; }
.lk-hud-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(0,0,0,.07); overflow: hidden; }
.lk-hud-bar > i {
display: block; height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, var(--c-mint), var(--c-blue));
transition: width .4s cubic-bezier(.3,.7,.3,1);
}
.lk-hud-prog-txt {
font-family: var(--font-display); font-size: 15px; font-weight: 700;
color: var(--ink); white-space: nowrap;
}
.lk-reset {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border: 0; border-radius: 12px;
background: var(--t-grape); color: var(--c-grape-d);
font-family: var(--font-display); font-weight: 700; font-size: 14px;
cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease;
}
.lk-reset:hover { transform: translateY(-1px); background: var(--c-grape); color: #fff; }
.lk-reset svg { width: 16px; height: 16px; }
.lk-stage {
position: relative;
display: flex;
justify-content: space-between;
max-width: 960px;
margin: 0 auto;
}
.lk-svg {
position: absolute; inset: 0; width: 100%; height: 100%;
overflow: visible; pointer-events: none; z-index: 1;
}
.lk-col {
display: flex;
flex-direction: column;
gap: 12px;
width: 320px;
flex: 0 0 320px;
}
.lk-col-full { width: 100%; flex: 1 1 auto; }
.lk-tile {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
min-height: 58px; padding: 12px 16px;
border: 0;
border-radius: 16px;
background: var(--panel); color: var(--ink);
font-family: var(--font-display); font-weight: 700; font-size: 17px;
text-align: center; cursor: pointer;
box-shadow: 0 3px 0 rgba(0,0,0,.10), 0 7px 16px rgba(0,0,0,.07);
transition: transform .14s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
-webkit-user-select: none; user-select: none;
}
.lk-col-l .lk-tile { color: var(--c-blue); justify-content: flex-end; }
.lk-col-r .lk-tile { justify-content: flex-start; }
.lk-tile:hover { transform: translateY(-2px); }
.lk-tile.is-sel {
background: var(--t-grape); color: var(--c-grape-d);
transform: translateY(-2px);
box-shadow: 0 0 0 3px var(--c-grape), 0 8px 18px rgba(206,130,255,.36);
}
.lk-tile.is-matched {
background: var(--t-mint); color: var(--c-mint-d);
box-shadow: 0 2px 0 rgba(0,0,0,.06);
pointer-events: none;
}
.lk-tile.is-err {
background: var(--t-red); color: var(--c-red-d);
box-shadow: 0 0 0 3px var(--c-red);
}
/* 连线：描边出场用 transition（luxe 主题禁用 @keyframes，不能用 CSS 动画） */
.lk-link line {
fill: none;
stroke-linecap: round;
stroke-width: 5;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset .45s ease;
}
.lk-link circle { opacity: 0; transition: opacity .2s ease .26s; }
.lk-link.is-drawn line { stroke-dashoffset: 0; }
.lk-link.is-drawn circle { opacity: 1; }
.lk-link-ok line { stroke: var(--c-mint); filter: drop-shadow(0 1px 3px rgba(88,204,2,.5)); }
.lk-link-ok circle { fill: var(--c-mint); }
.lk-link-bad line {
stroke: var(--c-red);
stroke-dashoffset: 0;
transition: none;
filter: drop-shadow(0 1px 3px rgba(255,90,90,.55));
}
.lk-link-bad circle { fill: var(--c-red); transition: none; }
.lk-hint {
text-align: center; margin: 16px 0 2px;
font-size: 14px; font-weight: 700; color: var(--ink); opacity: .6;
min-height: 20px;
}
.lk-empty { grid-column: 1 / -1; text-align: center; padding: 36px 20px; color: var(--ink); }
.lk-empty p { margin: 0 0 14px; opacity: .75; }
.lk-end {
margin-top: 18px; text-align: center;
background: var(--panel); border-radius: var(--radius-lg);
padding: 32px 22px; box-shadow: var(--shadow-card);
}
.lk-end-ic { display: flex; justify-content: center; margin-bottom: 6px; }
.lk-end-title { font-family: var(--font-display); font-size: 28px; margin: 4px 0 6px; }
.lk-end-sub { color: var(--ink); opacity: .65; font-size: 15px; }
.end-screen { padding: 28px 14px; }
@media (max-width: 720px) {
.lk-panel { padding: 14px; }
.lk-stage { max-width: 100%; }
.lk-col { width: 44%; flex: 0 0 44%; }
.lk-tile { font-size: 15px; min-height: 50px; padding: 10px 12px; }
.lk-hud { gap: 10px; }
}
/* ============================================
首页"观星台"场景 —— Phase 1
============================================ */
.scene {
position: relative;
padding: 50px 32px 80px;
min-height: calc(100vh - 60px);
--scene-accent: var(--c-grape);
--scene-accent-2: var(--c-sky);
}
/* ── 顶部问候 + stats ── */
.scene-sky {
text-align: center;
margin-bottom: 36px;
max-width: calc(100% - 560px); /* 240px 羊皮纸 + 28px 偏移 + 缓冲，对称居中需双倍 */
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1100px) {
.scene-sky { max-width: calc(100% - 300px); }
}
@media (max-width: 900px) {
.scene-sky { max-width: 100%; } /* 窄屏羊皮纸已变 static，无需让位 */
}
.scene-greet {
margin: 0 0 18px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3.2vw, 42px);
line-height: 1.15;
letter-spacing: -.5px;
overflow-wrap: break-word;
background: linear-gradient(135deg, var(--scene-accent) 0%, var(--scene-accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.06));
}
.scene-stats {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.stat-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 20px;
border-radius: 999px;
background: #fff;
border: 2px solid var(--border);
box-shadow: 0 4px 0 0 var(--border);
font-family: var(--font-display);
font-size: 16px;
color: var(--ink-soft);
letter-spacing: .02em;
transition: transform .2s cubic-bezier(.22,.94,.4,1.2), box-shadow .2s;
}
.stat-pill:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 0 var(--border);
}
.stat-pill strong {
margin-right: 2px;
font-family: var(--font-display);
font-weight: 800;
color: var(--scene-accent);
font-size: 20px;
line-height: 1;
}
/* ── 地道表达羊皮纸（漂浮卡片） ── */
.parchment {
position: absolute;
top: 60px;
right: 28px;
width: 240px;
padding: 18px 22px;
background: rgba(255,255,255,.85);
border-radius: 8px 22px 8px 22px;
box-shadow:
0 8px 22px rgba(0,0,0,.08),
0 2px 6px rgba(0,0,0,.04);
transform: rotate(-3deg);
text-decoration: none;
color: inherit;
z-index: 2;
transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
}
.parchment::before {
content: '✦';
position: absolute;
top: -12px;
left: 14px;
color: var(--scene-accent);
font-size: 18px;
}
.parchment:hover {
transform: rotate(-1deg) translateY(-4px) scale(1.03);
box-shadow:
0 14px 30px rgba(0,0,0,.12),
0 4px 10px rgba(0,0,0,.06);
}
.parchment-ttl {
margin-bottom: 10px;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: .7;
}
.parchment-phrase {
margin-bottom: 8px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--scene-accent);
}
.parchment-mean {
margin-bottom: 10px;
font-size: 16px;
color: var(--ink);
}
.parchment-ex {
font-size: 15px;
font-style: italic;
color: var(--ink-soft);
line-height: 1.6;
}
.parchment-more {
display: inline-block;
margin-top: 10px;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .08em;
font-weight: 700;
color: var(--scene-accent);
text-decoration: none;
border-bottom: 1px dashed currentColor;
padding-bottom: 1px;
transition: transform .2s ease, color .2s ease;
}
.parchment-more:hover { transform: translateX(3px); color: var(--scene-accent-2, var(--scene-accent)); }
/* ============================================
Idioms page · 地道表达
============================================ */
.idiom-hero {
background: linear-gradient(135deg, var(--t-yellow, #FFF7DC) 0%, var(--t-sky, #E7F1FF) 100%);
border-color: var(--c-yellow, #F2D98A);
text-align: center;
padding: 28px 24px;
}
.idiom-hero-tag {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 10px;
font-weight: 700;
}
.idiom-hero-phrase {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: var(--ink);
line-height: 1.15;
margin-bottom: 10px;
}
.idiom-hero-mean { font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.idiom-hero-ex { font-size: 16px; font-style: italic; color: var(--ink-soft); line-height: 1.55; }
.idiom-hero .row { justify-content: center; }
.iq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iq-opt {
padding: 14px 16px;
border-radius: 12px;
border: 1.5px solid rgba(0,0,0,.08);
background: #fff;
color: var(--ink);
font-size: 16px;
cursor: pointer;
text-align: left;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.iq-opt:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--c-sky); }
.iq-opt:disabled { cursor: default; }
.iq-opt.ok { border-color: var(--c-mint); background: var(--t-mint, #E0F5E5); }
.iq-opt.bad { border-color: var(--c-orange); background: var(--t-orange, #FFE7D2); }
.idiom-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.idiom-item {
background: #fff;
border: 1.5px solid rgba(0,0,0,.06);
border-radius: 12px;
padding: 12px 14px;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.idiom-item:hover { transform: translateY(-2px); border-color: var(--c-sky); box-shadow: 0 6px 16px -8px rgba(0,0,0,.1); }
.idiom-item.is-open { border-color: var(--c-sky); }
.idiom-item-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.idiom-item-phrase {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--ink);
}
.idiom-item-fav {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 999px;
color: rgba(0,0,0,.25);
cursor: pointer;
transition: color .15s ease, transform .15s ease, background .15s ease;
}
.idiom-item-fav:hover { color: #E54B6A; background: rgba(229,75,106,.08); transform: scale(1.1); }
.idiom-item-fav.on { color: #E54B6A; }
.idiom-item-fav .ic { width: 18px; height: 18px; }
.idiom-item-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.08); }
.idiom-item-mean { color: var(--ink); margin-bottom: 6px; }
.idiom-item-ex { font-style: italic; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.5; }
/* ============================================
CEFR distribution bars · 难度分布
============================================ */
.cefr-row {
display: grid;
grid-template-columns: 44px 1fr 84px;
align-items: center;
gap: 14px;
padding: 8px 0;
border-bottom: 1px dashed rgba(0,0,0,.06);
}
.cefr-row:last-child { border-bottom: none; }
.cefr-label {
font-family: var(--font-display);
font-size: 15px;
font-weight: 800;
text-align: center;
padding: 4px 10px;
border-radius: 8px;
color: #fff;
}
.cefr-track {
height: 8px;
background: rgba(0,0,0,.06);
border-radius: 999px;
overflow: hidden;
}
.cefr-track > i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--c-mint), var(--c-sky));
transition: width .6s ease;
border-radius: 999px;
}
.cefr-num {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ink-soft);
text-align: right;
}
.cefr-A1 .cefr-label { background: #6BD18B; }
.cefr-A2 .cefr-label { background: #A8D04D; }
.cefr-B1 .cefr-label { background: #F2C94C; color: #5C4516; }
.cefr-B2 .cefr-label { background: #FFA94D; }
.cefr-C1 .cefr-label { background: #F26A6A; }
.cefr-C2 .cefr-label { background: #B65BC4; }
/* ============================================
Writing · 写作翻译
============================================ */
.wr-stage { max-width: 720px; margin: 0 auto; padding: 20px 0 40px; }
.wr-progress {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 0 14px;
border-bottom: 1px solid rgba(0,0,0,.08);
margin-bottom: 20px;
}
.wr-step {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .12em;
color: var(--ink-soft);
font-weight: 700;
}
.wr-stage-fallback {
margin: 8px 0 14px;
padding: 9px 14px;
border-left: 3px solid var(--c-orange);
background: var(--t-orange);
color: #6a4500;
font-size: 14px;
line-height: 1.5;
border-radius: 0 8px 8px 0;
}
.wr-prompt-card {
border: 1px dashed rgba(0,0,0,.18);
padding: 22px 24px;
margin-bottom: 18px;
background: rgba(0,0,0,.02);
}
.wr-prompt-tag {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 10px;
font-weight: 700;
}
.wr-prompt-text {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.5;
color: var(--ink);
}
.wr-input {
width: 100%;
padding: 14px 16px;
border: 1.5px solid rgba(0,0,0,.12);
border-radius: 10px;
font-family: inherit;
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: #fff;
outline: none;
resize: vertical;
min-height: 90px;
transition: border-color .15s ease;
}
.wr-input:focus { border-color: var(--c-sky); }
/* 中英互译 · 卡通主题兜底：新增的金箔装饰与卡片包裹默认不影响卡通视觉 */
.wr-luxe-deco, .wr-luxe-foot { display: none; }
.wr-input-card { background: transparent; padding: 0; border: 0; position: relative; }
.wr-input-tag { display: none; }
.wr-char-count {
display: block; text-align: right;
font-family: var(--font-display);
font-size: 12px; color: var(--ink-soft);
margin-top: 6px; letter-spacing: .08em;
}
.wr-progress-bar { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.wr-track { display: none; }
.wr-prompt-card .wr-deco-moon { display: none; }
.wr-back { margin-right: 12px; }
.wr-next { margin-left: 12px; }
.wr-feedback {
margin-top: 22px;
padding-top: 18px;
border-top: 1px dashed rgba(0,0,0,.12);
}
.wr-fb-head {
display: flex; align-items: baseline; gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.wr-fb-num {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.wr-fb-tip { color: var(--ink-soft); font-size: 15px; }
.wr-fb-ok .wr-fb-num { color: var(--c-mint-d, #2A8F4D); }
.wr-fb-mid .wr-fb-num { color: var(--c-orange, #FF8E4D); }
.wr-fb-bad .wr-fb-num { color: #C4344C; }
.wr-diff { padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.wr-diff:last-of-type { border-bottom: none; }
.wr-diff-lbl {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 4px;
font-weight: 700;
}
.wr-diff-val {
font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
line-height: 1.55;
word-wrap: break-word;
}
.wr-diff-val.ref {
color: var(--scene-accent, var(--c-sky));
font-weight: 700;
}
#wr-dir-row { gap: 6px; }
#wr-dir-row .chip {
padding: 6px 14px;
border-radius: 999px;
background: transparent;
border: 1.5px solid rgba(0,0,0,.12);
font-size: 14px;
cursor: pointer;
color: var(--ink-soft);
font-family: var(--font-display);
}
#wr-dir-row .chip.active { background: var(--c-sky); color: #fff; border-color: var(--c-sky); }
/* ============================================
Placement · 入门水平测试
============================================ */
.pl-hero {
text-align: center;
padding: 60px 24px 40px;
max-width: 640px;
margin: 0 auto;
}
.pl-tag {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 10px;
font-weight: 700;
}
.pl-ttl {
font-family: var(--font-display);
font-size: 38px;
font-weight: 800;
line-height: 1.15;
margin: 0 0 14px;
background: linear-gradient(135deg, var(--scene-accent) 0%, var(--scene-accent-2) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.pl-sub { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.pl-quiz { max-width: 720px; margin: 0 auto; padding: 30px 16px; }
.pl-progressbar {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px;
}
.pl-step {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .12em;
color: var(--ink-soft);
font-weight: 700;
min-width: 60px;
}
.pl-track {
flex: 1; height: 6px;
background: rgba(0,0,0,.08);
border-radius: 999px;
overflow: hidden;
}
.pl-fill {
height: 100%;
background: linear-gradient(90deg, var(--c-sky), var(--c-mint));
transition: width .35s ease;
}
.pl-prompt {
font-family: var(--font-display);
font-size: 34px;
font-weight: 800;
text-align: center;
padding: 30px 20px;
margin-bottom: 18px;
border-top: 1px dashed rgba(0,0,0,.1);
border-bottom: 1px dashed rgba(0,0,0,.1);
}
.pl-opts { margin-bottom: 0; }
.pl-result { max-width: 720px; margin: 30px auto; padding: 0 16px 40px; }
.pl-score {
text-align: center;
padding: 30px 16px;
border-top: 1px dashed rgba(0,0,0,.1);
border-bottom: 1px dashed rgba(0,0,0,.1);
}
.pl-score-num {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
background: linear-gradient(135deg, var(--scene-accent) 0%, var(--scene-accent-2) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}
.pl-score-tag {
font-family: var(--font-display);
font-size: 15px;
letter-spacing: .15em;
color: var(--ink-soft);
margin-top: 12px;
font-weight: 700;
}
.pl-rec { margin: 30px 0; }
.pl-rec-hint {
text-align: center;
font-size: 15px;
color: var(--ink-soft);
margin-bottom: 18px;
}
.pl-rec-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.pl-rec-card {
display: block;
padding: 22px 24px;
text-decoration: none;
color: var(--ink);
border-top: 1px solid rgba(0,0,0,.15);
border-bottom: 1px solid rgba(0,0,0,.15);
transition: background .2s ease, transform .2s ease;
}
.pl-rec-card:hover { background: rgba(0,0,0,.03); transform: translateY(-2px); }
.pl-rec-card.primary { border-top-width: 2px; border-bottom-width: 2px; border-color: var(--scene-accent, var(--c-sky)); }
.pl-rec-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
margin-bottom: 4px;
}
.pl-rec-desc {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.5;
}
@media (max-width: 640px) {
.pl-rec-list { grid-template-columns: 1fr; }
.pl-ttl { font-size: 28px; }
.pl-prompt { font-size: 26px; }
}
/* ============================================
Mistakes page · 错题本（极简列表风，无圆框）
============================================ */
.mistakes-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.m-action-link {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: .04em;
color: var(--scene-accent, var(--c-sky));
text-decoration: none;
padding: 6px 0;
border-bottom: 1.5px solid currentColor;
transition: transform .2s ease, opacity .2s ease;
cursor: pointer;
}
.m-action-link:hover { transform: translateX(3px); opacity: .85; }
.m-empty {
margin-top: 24px;
padding: 60px 24px;
text-align: center;
border-top: 1px dashed rgba(0,0,0,.1);
border-bottom: 1px dashed rgba(0,0,0,.1);
}
.m-empty-mark { font-size: 40px; margin-bottom: 8px; }
.m-empty h3 { margin: 0 0 6px; font-weight: 700; }
.m-empty p { margin: 0; color: var(--ink-soft); }
.m-sectionhead {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 18px 0 12px;
border-bottom: 1px solid rgba(0,0,0,.1);
margin-bottom: 0;
}
.m-sectionhead-ttl {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--ink);
}
.m-sectionhead-hint { font-size: 14px; color: var(--ink-soft); }
.m-list { display: flex; flex-direction: column; }
.m-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 18px 4px;
border-bottom: 1px dashed rgba(0,0,0,.1);
background: transparent;
transition: background .15s ease;
}
.m-item:hover { background: rgba(0,0,0,.02); }
.m-item-main { flex: 1; min-width: 0; }
.m-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.m-item-word {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
color: var(--ink);
}
.m-item-ipa { font-size: 14px; color: var(--ink-soft); font-family: var(--font-display); }
.m-item-pos { font-size: 14px; color: var(--ink-soft); font-style: italic; }
.m-item-meaning { color: var(--ink); font-size: 16px; line-height: 1.5; }
.m-item-ex {
font-style: italic;
color: var(--ink-soft);
font-size: 14px;
margin-top: 4px;
line-height: 1.55;
}
.m-item-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
flex-shrink: 0;
}
.m-item-meta {
font-size: 14px;
color: var(--ink-soft);
letter-spacing: .04em;
white-space: nowrap;
}
.m-item-ops { display: flex; align-items: center; gap: 4px; }
.m-op-link {
font-size: 14px;
color: var(--ink-soft);
text-decoration: none;
padding: 2px 6px;
border-bottom: 1px dashed transparent;
transition: color .15s ease, border-color .15s ease;
cursor: pointer;
}
.m-op-link:hover { color: var(--scene-accent, var(--c-sky)); border-bottom-color: currentColor; }
.m-op-link.mastered:hover { color: var(--c-mint-d, #2A8F4D); }
.m-op-sep { color: rgba(0,0,0,.2); font-size: 14px; }
.m-practice-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0 18px;
border-bottom: 1px solid rgba(0,0,0,.1);
margin-bottom: 20px;
}
.m-practice-progress {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: .08em;
}
@media (max-width: 640px) {
.m-item { flex-direction: column; gap: 10px; }
.m-item-side { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}
/* ── 错题本 · 卡通主题：扁平列表 → 卡片网格 ── */
html[data-theme="cartoon"] .m-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
padding-top: 18px;
}
html[data-theme="cartoon"] .m-item {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 20px 22px;
border: none;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 16px rgba(60, 50, 30, .08);
transition: transform .15s ease, box-shadow .15s ease;
}
html[data-theme="cartoon"] .m-item:hover {
background: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(60, 50, 30, .14);
}
html[data-theme="cartoon"] .m-item-side {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 2px;
padding-top: 12px;
border-top: 1px solid rgba(60, 50, 30, .08);
}
/* ── 露台 ── */
.terrace {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
gap: 8px;
margin: 40px 0 50px;
padding: 30px 20px 36px;
}
.terrace-floor {
position: absolute;
left: 5%;
right: 5%;
bottom: 18px;
height: 6px;
border-radius: 4px;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--scene-accent) 30%, transparent) 30%,
color-mix(in srgb, var(--scene-accent-2) 30%, transparent) 70%,
transparent 100%);
filter: blur(2px);
z-index: 0;
}
/* 道具：图标 + 文字 + 底部辉光台 */
.prop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 130px;
padding: 18px 6px 10px;
text-decoration: none;
color: var(--scene-accent);
cursor: pointer;
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.prop::before {
content: '';
position: absolute;
left: 10%;
right: 10%;
bottom: -4px;
height: 26px;
background: radial-gradient(ellipse 80% 100% at 50% 100%,
color-mix(in srgb, currentColor 40%, transparent) 0%,
transparent 70%);
filter: blur(8px);
border-radius: 50%;
opacity: .55;
z-index: -1;
transition: opacity .4s ease, transform .4s ease;
}
.prop:hover {
transform: translateY(-12px) scale(1.06);
}
.prop:hover::before {
opacity: 1;
transform: scale(1.2);
}
.prop:active { transform: translateY(-6px) scale(.98); }
.prop-svg {
width: 80px;
height: 80px;
display: block;
filter: drop-shadow(0 4px 10px color-mix(in srgb, currentColor 25%, transparent));
transition: filter .35s ease;
}
.prop:hover .prop-svg {
filter: drop-shadow(0 6px 18px color-mix(in srgb, currentColor 50%, transparent));
}
.prop-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: .04em;
color: var(--ink);
}
/* 每个道具用不同卡通色 */
.prop-cards { color: var(--c-grape); }
.prop-telescope { color: var(--c-orange); }
.prop-gramophone { color: var(--c-sky); }
.prop-book { color: var(--c-mint); }
.prop-stars { color: var(--c-pink); }
.prop-hourglass { color: var(--c-yellow); }
/* ── 阶段横幅（10 阶中国学制阶梯）── */
.stage-banner {
max-width: 560px;
margin: 0 auto 28px;
padding: 18px 20px 16px;
border-radius: 18px;
background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(248,250,255,.92));
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 8px 24px -10px rgba(0,0,0,.15), 0 2px 6px -2px rgba(0,0,0,.08);
position: relative;
overflow: hidden;
}
.stage-banner::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(120% 80% at 100% 0%, var(--stage-tone, #6c8ef5) / 0.10, transparent 60%);
pointer-events: none;
}
.stage-banner[data-tone="mint"] { --stage-tone: #58c19a; }
.stage-banner[data-tone="sky"] { --stage-tone: #5aa6e8; }
.stage-banner[data-tone="leaf"] { --stage-tone: #6cb35a; }
.stage-banner[data-tone="amber"] { --stage-tone: #e7a247; }
.stage-banner[data-tone="coral"] { --stage-tone: #ec6f6a; }
.stage-banner[data-tone="violet"] { --stage-tone: #8e6cd9; }
.stage-banner[data-tone="indigo"] { --stage-tone: #5a6cd9; }
.stage-banner[data-tone="plum"] { --stage-tone: #b6549c; }
.stage-banner[data-tone="teal"] { --stage-tone: #2fa39a; }
.stage-banner[data-tone="gold"] { --stage-tone: #c79a3a; }
.stage-banner-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.stage-banner-eyebrow {
font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(0,0,0,.5); font-weight: 600;
}
.stage-banner-switch {
font-size: 14px; padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,.05); border: 0; cursor: pointer;
color: rgba(0,0,0,.65);
}
.stage-banner-switch:hover { background: rgba(0,0,0,.09); }
.stage-banner-body { position: relative; z-index: 1; }
.stage-banner-name {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin-bottom: 10px;
}
.stage-banner-id {
font-weight: 800; font-size: 22px;
color: var(--stage-tone);
letter-spacing: .04em;
}
.stage-banner-cn { font-weight: 700; font-size: 18px; color: #222; }
.stage-banner-sub { font-size: 14px; color: rgba(0,0,0,.5); }
.stage-banner-progress { margin: 8px 0 10px; }
.stage-banner-track {
height: 8px; border-radius: 99px;
background: rgba(0,0,0,.08); overflow: hidden;
margin-bottom: 6px;
}
.stage-banner-track > i {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, var(--stage-tone), color-mix(in srgb, var(--stage-tone) 60%, white));
border-radius: 99px;
transition: width .9s cubic-bezier(.2,.7,.2,1);
}
.stage-banner-num {
font-size: 14px; color: rgba(0,0,0,.55);
display: flex; justify-content: flex-end; gap: 2px;
}
.stage-banner-num span:first-child { color: var(--stage-tone); font-weight: 700; }
.stage-banner-tip {
font-size: 14px; line-height: 1.55;
color: rgba(0,0,0,.65); margin: 0;
}
.stage-ladder {
display: none;
margin-top: 14px;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.stage-banner.is-expanded .stage-ladder { display: grid; }
.stage-dot {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 4px; border-radius: 10px;
background: rgba(0,0,0,.04); border: 1px solid transparent;
cursor: pointer; transition: all .2s;
}
.stage-dot:hover { background: rgba(0,0,0,.08); }
.stage-dot.is-cur {
background: color-mix(in srgb, var(--stage-tone) 18%, white);
border-color: var(--stage-tone);
}
.stage-dot.is-done { opacity: .55; }
.stage-dot-id {
font-weight: 700; font-size: 14px; color: var(--stage-tone);
letter-spacing: .04em;
}
.stage-dot-cn { font-size: 13px; color: rgba(0,0,0,.6); }
/* dark mode 适配 */
:root[data-theme="dark"] .stage-banner {
background: linear-gradient(160deg, rgba(36,40,52,.92), rgba(28,32,44,.96));
border-color: rgba(255,255,255,.08);
}
:root[data-theme="dark"] .stage-banner-eyebrow { color: rgba(255,255,255,.55); }
:root[data-theme="dark"] .stage-banner-switch { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); }
:root[data-theme="dark"] .stage-banner-switch:hover { background: rgba(255,255,255,.14); }
:root[data-theme="dark"] .stage-banner-cn { color: #e8ebf2; }
:root[data-theme="dark"] .stage-banner-sub { color: rgba(255,255,255,.55); }
:root[data-theme="dark"] .stage-banner-tip { color: rgba(255,255,255,.7); }
:root[data-theme="dark"] .stage-banner-track { background: rgba(255,255,255,.1); }
:root[data-theme="dark"] .stage-banner-num { color: rgba(255,255,255,.6); }
:root[data-theme="dark"] .stage-dot { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .stage-dot:hover { background: rgba(255,255,255,.12); }
:root[data-theme="dark"] .stage-dot-cn { color: rgba(255,255,255,.65); }
/* ── 今日目标 ── */
.scene-goal {
max-width: 560px;
margin: 0 auto 36px;
text-align: center;
}
.scene-goal-text {
display: flex;
justify-content: center;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
font-family: var(--font-display);
}
.scene-goal-lbl {
font-size: 14px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: .75;
}
#goal-text {
font-size: 20px;
font-weight: 700;
color: var(--scene-accent);
}
.scene-goal-track {
height: 6px;
background: rgba(0,0,0,.06);
border-radius: 999px;
overflow: hidden;
}
.scene-goal-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--scene-accent), var(--scene-accent-2));
border-radius: 999px;
transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
box-shadow: 0 0 16px color-mix(in srgb, var(--scene-accent) 50%, transparent);
}
.scene-goal-tip {
margin: 12px 0 0;
font-size: 16px;
color: var(--ink-soft);
}
/* ── 主题之旅 CTA（取代旧的 chip 排） ── */
.journey-cta {
display: flex;
align-items: center;
gap: 16px;
max-width: 480px;
margin: 0 auto 36px;
padding: 16px 26px;
border-radius: 999px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--c-grape) 18%, white) 0%,
color-mix(in srgb, var(--c-sky) 18%, white) 100%);
text-decoration: none;
color: var(--ink);
border: 2px solid color-mix(in srgb, var(--c-grape) 35%, var(--border));
box-shadow:
0 5px 0 0 color-mix(in srgb, var(--c-grape) 35%, var(--border)),
0 12px 24px rgba(0,0,0,.06);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .18s ease;
}
.journey-cta:hover {
transform: translateY(-2px);
box-shadow:
0 7px 0 0 color-mix(in srgb, var(--c-grape) 35%, var(--border)),
0 16px 30px rgba(0,0,0,.10);
}
.journey-cta:active {
transform: translateY(3px);
box-shadow:
0 1px 0 0 color-mix(in srgb, var(--c-grape) 35%, var(--border)),
0 5px 12px rgba(0,0,0,.06);
transition-duration: .08s;
}
.journey-cta-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-grape), var(--c-sky));
color: #fff;
box-shadow: 0 4px 12px color-mix(in srgb, var(--c-grape) 40%, transparent);
}
.journey-cta-ic .ic { width: 24px; height: 24px; }
.journey-cta-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.journey-cta-ttl {
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
color: var(--ink);
}
.journey-cta-sub {
font-size: 15px;
color: var(--ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.journey-cta-arrow {
font-size: 22px;
font-weight: 700;
color: var(--c-grape);
transition: transform .3s ease;
}
.journey-cta:hover .journey-cta-arrow { transform: translateX(4px); }
/* 已废弃：旧版"主题之旅 · 地铁线路图" 渲染（viewJourney 已换成 lj-page 学习闯关路径）。
下方原 .journey / .journey-head / .journey-map / .station* / .leg* / .journey-foot
以及为手机端补的 .journey-list / .jline / .jstop 整组样式全是孤儿，2026-05 清理。 */
/* ── 徽章奖牌架 ── */
.medal-shelf {
text-align: center;
padding-top: 30px;
border-top: 1px dashed rgba(0,0,0,.08);
}
.medal-shelf-ttl {
display: block;
margin-bottom: 14px;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: .7;
}
.medal-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 24px;
max-width: 720px;
margin: 0 auto;
}
.medal {
width: 72px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
cursor: help;
--medal-color: var(--c-grape);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.medal-hex {
width: 58px;
height: 66px;
clip-path: polygon(50% 2%, 96% 26%, 96% 74%, 50% 98%, 4% 74%, 4% 26%);
background: linear-gradient(135deg,
color-mix(in srgb, var(--medal-color) 60%, #fff) 0%,
var(--medal-color) 60%,
color-mix(in srgb, var(--medal-color) 75%, #000) 100%);
filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--medal-color) 35%, transparent));
}
.medal .ic {
position: absolute;
top: 22px; left: 50%;
transform: translateX(-50%);
width: 24px; height: 24px;
color: #fff;
z-index: 2;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.medal-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
letter-spacing: .02em;
color: var(--ink-soft);
text-align: center;
white-space: nowrap;
overflow: hidden;
max-width: 80px;
text-overflow: ellipsis;
}
.medal:hover { transform: translateY(-4px) rotate(-3deg); }
.medal-empty {
margin: 0;
font-size: 16px;
color: var(--ink-soft);
opacity: .8;
}
@media (max-width: 900px) {
.parchment { position: static; transform: none; margin: 0 auto 24px; }
.parchment:hover { transform: scale(1.02); }
.terrace { gap: 4px; }
.prop { width: 100px; padding: 14px 4px 8px; }
.prop-svg { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.prop, .parchment, .medal, .scene-goal-fill { transition: none !important; }
}
/* ============================================
50. Polish — site-wide micro-animations & transitions
============================================ */
/* 50.1 页面进入：直接子节点从右轻滑入 + 微缩 + 淡入 + 阶梯延迟
像翻杂志而不是关一本开一本。.splash 已有自己的入场动画，跳过 */
#view > *:not(.splash) {
animation: lx-view-enter .42s cubic-bezier(.34, 1.06, .35, 1) both;
}
#view > *:not(.splash):nth-child(2) { animation-delay: .05s; }
#view > *:not(.splash):nth-child(3) { animation-delay: .10s; }
#view > *:not(.splash):nth-child(4) { animation-delay: .15s; }
#view > *:not(.splash):nth-child(5) { animation-delay: .20s; }
#view > *:not(.splash):nth-child(6) { animation-delay: .25s; }
@keyframes lx-view-enter {
from { opacity: 0; transform: translateX(8%) scale(.97); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
/* 含 position:fixed 的 .splash 开场层的页面，父级残留 transform 会成为 fixed 包含块，
把 splash 压扁成 page-header 高度。这些页改用纯 opacity 入场，避免 transform 劫持。 */
#view > *:has(> .splash) {
animation: lx-view-enter-opacity .42s ease both;
}
@keyframes lx-view-enter-opacity {
from { opacity: 0; }
to { opacity: 1; }
}
/* 50.2 sidebar nav：左侧指示条（active 时滑入）+ 图标轻推 */
.nav a {
position: relative;
overflow: hidden;
}
.nav a::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 3px; height: 0;
background: var(--c-sky);
border-radius: 0 3px 3px 0;
transform: translateY(-50%);
transition: height .25s cubic-bezier(.22,.94,.4,1.2), background-color .2s;
}
.nav a:hover::before { height: 36%; background: var(--c-sky); opacity: .55; }
.nav a.active::before { height: 60%; background: var(--c-sky); opacity: 1; }
.nav a .ic { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.nav a:hover .ic { transform: translateX(2px) rotate(-4deg); }
.nav a.active .ic { transform: translateX(2px); }
/* 50.3 卡片 hover 轻微上浮 + 阴影加深（不打扰原有交互卡） */
.card:not(.center):not(.hide):hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 0 var(--border);
}
.card { transition: transform .2s cubic-bezier(.22,.94,.4,1.2), box-shadow .2s; }
/* 50.4 stat tile hover 轻提 + icon 微跳 */
.stat { transition: transform .2s cubic-bezier(.22,.94,.4,1.2), box-shadow .2s; cursor: default; }
.stat:hover { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--border); }
.stat .ic-wrap { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.stat:hover .ic-wrap { transform: scale(1.08) rotate(-6deg); }
/* 50.5 按钮微反馈：hover 上浮 + 微缩 + 亮一档（向预览版动效卡⑥对齐） */
.btn { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s; }
.btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.025); filter: brightness(1.08); }
/* 50.6 chip hover 微缩放（splash 内的高度定制 chip 因更高特异性会覆盖此规则） */
.chip {
transition: transform .18s cubic-bezier(.34,1.56,.64,1), background-color .15s, border-color .15s, box-shadow .15s;
}
.chips .chip:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
/* 50.7 主题切换按钮：图标轻微旋转 */
.theme-toggle .ic { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.theme-toggle:hover .ic { transform: rotate(-20deg); }
/* 50.8 sidebar 滚动条美化 */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.16); }
/* 50.9 主题切换全局过渡：颜色/背景跟随主题切换平滑 */
body, .card, .stat, .btn, .chip, .pill, .nav a, .theme-toggle, .bar, .sidebar,
.parchment, .prop, .medal-hex, .scene-goal-track, .scene-goal-fill {
transition-property: background-color, color, border-color, box-shadow, transform;
transition-duration: .35s, .35s, .35s, .25s, .12s;
transition-timing-function: ease, ease, ease, ease, cubic-bezier(.34,1.56,.64,1);
}
/* 50.10 进度条加 shimmer 流光 */
.bar > i {
position: relative;
overflow: hidden;
}
.bar > i::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.5) 50%,
transparent 100%);
transform: translateX(-100%);
animation: lx-bar-shimmer 2.4s ease-in-out infinite;
}
@keyframes lx-bar-shimmer {
0%, 30% { transform: translateX(-100%); }
70%, 100% { transform: translateX(220%); }
}
/* 50.11 pill 悬浮微抬 */
.pill { transition: transform .2s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.pill:hover { transform: translateY(-1px); }
/* 50.12 link/anchor 微反馈 */
a.muted { transition: color .2s, transform .2s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
a.muted:hover { color: var(--c-sky); transform: translateX(-2px); }
/* 50.13 关注无障碍：focus-visible 强化 */
.btn:focus-visible,
.chip:focus-visible,
.nav a:focus-visible,
.theme-toggle:focus-visible,
.card a:focus-visible {
outline: 3px solid var(--c-sky);
outline-offset: 3px;
}
/* ============================================
51. Goal Progress Ring（每日目标进度环）
============================================ */
.goal-ring {
--gr-size: 132px;
--gr-stroke: 12px;
--gr-pct: 0;
--gr-color-1: var(--c-mint);
--gr-color-2: var(--c-sky);
width: var(--gr-size);
height: var(--gr-size);
position: relative;
flex-shrink: 0;
filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--gr-color-1) 25%, transparent));
}
.goal-ring.is-done {
--gr-color-1: var(--c-yellow);
--gr-color-2: var(--c-orange);
filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--gr-color-1) 55%, transparent));
animation: lx-goal-ring-pulse 2.4s ease-in-out infinite;
}
@keyframes lx-goal-ring-pulse {
0%, 100% { filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--gr-color-1) 55%, transparent)); }
50% { filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--gr-color-1) 80%, transparent)); }
}
.goal-ring svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
display: block;
}
.goal-ring .gr-track {
fill: none;
stroke: rgba(0,0,0,.07);
stroke-width: var(--gr-stroke);
}
.goal-ring .gr-fill {
fill: none;
stroke-width: var(--gr-stroke);
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 1.1s cubic-bezier(.22,.94,.4,1.2);
}
.goal-ring .gr-label {
position: absolute; inset: 0;
display: grid; place-items: center;
text-align: center;
pointer-events: none;
}
.goal-ring .gr-num {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
line-height: 1;
color: var(--ink);
}
.goal-ring .gr-num .gr-sym { font-size: 18px; margin-left: 1px; color: var(--ink-soft); }
.goal-ring .gr-lbl {
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-top: 5px;
font-weight: 700;
}
.goal-ring .gr-done-mark {
display: none;
font-size: 18px;
color: var(--c-mint-d);
margin-top: 2px;
}
.goal-ring.is-done .gr-num,
.goal-ring.is-done .gr-num .gr-sym { color: var(--c-orange-d); }
.goal-ring.is-done .gr-done-mark { display: block; }
/* Home page 把 scene-goal 改成两栏布局：环 + 文字块 */
.scene-goal.has-ring {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
max-width: 640px;
}
.scene-goal.has-ring .scene-goal-body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 220px;
text-align: left;
}
.scene-goal.has-ring .scene-goal-text {
margin-bottom: 0;
justify-content: flex-start;
}
.scene-goal.has-ring .scene-goal-track {
width: 240px;
}
.scene-goal.has-ring .scene-goal-tip {
margin: 4px 0 0;
text-align: left;
}
@media (max-width: 720px) {
.scene-goal.has-ring { flex-direction: column; }
.scene-goal.has-ring .scene-goal-body { text-align: center; align-items: center; }
.scene-goal.has-ring .scene-goal-text { justify-content: center; }
.scene-goal.has-ring .scene-goal-tip { text-align: center; }
}
/* ============================================
露台道具角标 — 背单词显示待复习数
============================================ */
.prop { position: relative; }
.prop-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 22px;
height: 22px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: var(--c-coral, #ff6b6b);
color: #fff;
font-size: 13px;
font-weight: 800;
font-family: var(--font-display, inherit);
box-shadow: 0 4px 10px -4px rgba(255,107,107,.6);
z-index: 2;
}
.prop-badge.hide { display: none; }
@media (prefers-reduced-motion: reduce) {
#view > *:not(.splash) { animation: none !important; }
.bar > i::after { animation: none !important; opacity: 0; }
.goal-ring.is-done { animation: none !important; }
}
/* ============================================
Subscription modal (cartoon only)
============================================ */
/* Sidebar upgrade pill */
.upgrade-pill {
margin-top: auto;
margin-bottom: 8px;
padding: 12px 14px;
border-radius: 14px;
border: 2px solid var(--c-orange-d);
background: linear-gradient(180deg, #ff8a65 0%, var(--c-orange) 100%);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 0 0 var(--c-orange-d);
transition: transform .08s, filter .12s;
}
.upgrade-pill:hover { filter: brightness(1.05); }
.upgrade-pill:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--c-orange-d); }
@media (max-width: 900px) { .upgrade-pill { display: none; } }
.upgrade-pill .ic { width: 18px; height: 18px; }
.upgrade-pill + .theme-toggle { margin-top: 0; }
/* Modal overlay */
.sub-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 24px;
animation: subModalIn .25s ease both;
}
.sub-modal.is-closing { animation: subModalOut .2s ease both; }
.sub-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(60, 60, 60, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.sub-modal-card {
position: relative;
background: var(--bg);
border: 3px solid var(--ink);
border-radius: 28px;
box-shadow: 0 12px 0 0 rgba(60, 60, 60, 0.3);
padding: 36px 36px 28px;
max-width: 1100px;
width: 100%;
max-height: calc(100vh - 48px);
overflow-y: auto;
animation: subCardIn .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.sub-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--panel);
color: var(--ink);
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 3px 0 0 var(--border);
transition: transform .08s, background .12s, color .12s, border-color .12s;
z-index: 2;
}
.sub-modal-close:hover { background: var(--t-red); border-color: var(--c-red); color: var(--c-red-d); }
.sub-modal-close:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--border); }
.sub-modal-close .ic { width: 18px; height: 18px; }
.sub-modal-head {
text-align: center;
margin-bottom: 28px;
padding: 0 24px;
}
.sub-modal-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 30px;
margin: 0 0 6px;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--c-mint-d);
}
.sub-modal-title .ic { width: 32px; height: 32px; color: var(--c-yellow-d); }
.sub-modal-sub {
color: var(--ink-soft);
font-size: 16px;
margin: 0;
}
@keyframes subModalIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes subModalOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes subCardIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.sub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
margin-top: 8px;
}
@media (max-width: 900px) {
.sub-grid { grid-template-columns: 1fr; }
}
.sub-card {
position: relative;
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px 22px 22px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 0 0 var(--border);
transition: transform .15s ease, box-shadow .15s ease;
}
.sub-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 0 var(--border);
}
.sub-card--featured {
background: linear-gradient(180deg, var(--t-mint) 0%, #f1ffe1 100%);
border-color: var(--c-mint);
box-shadow: 0 6px 0 0 var(--c-mint-d);
transform: translateY(-8px);
}
.sub-card--featured:hover {
transform: translateY(-10px);
box-shadow: 0 8px 0 0 var(--c-mint-d);
}
.sub-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--c-yellow);
color: #6a4a00;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
padding: 6px 14px;
border-radius: 999px;
border: 2px solid #fff;
box-shadow: 0 3px 0 0 var(--c-yellow-d);
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.sub-badge .ic { width: 14px; height: 14px; color: var(--c-orange-d); }
.sub-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.sub-tier {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
margin: 0;
color: var(--ink);
}
.sub-card--featured .sub-tier { color: var(--c-mint-d); }
/* Tier medallion — circular tinted badge holding the line icon */
.sub-medal {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
border: 2px solid currentColor;
background: #fff;
}
.sub-medal .ic { width: 24px; height: 24px; }
.sub-medal.mint { background: var(--t-mint); color: var(--c-mint-d); }
.sub-medal.sky { background: var(--t-sky); color: var(--c-sky-d); }
.sub-medal.yellow { background: var(--t-yellow); color: var(--c-yellow-d); }
.sub-medal.orange { background: var(--t-orange); color: var(--c-orange-d); }
.sub-medal.grape { background: var(--t-grape); color: var(--c-grape-d); }
.sub-medal.red { background: var(--t-red); color: var(--c-red-d); }
.sub-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 12px;
}
.sub-amount {
font-family: var(--font-display);
font-weight: 700;
font-size: 40px;
color: var(--ink);
letter-spacing: -0.5px;
}
.sub-period {
font-size: 15px;
color: var(--ink-soft);
font-weight: 600;
}
.sub-desc {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.5;
margin: 0 0 14px;
padding-bottom: 14px;
border-bottom: 2px dashed var(--border);
}
.sub-card--featured .sub-desc { border-bottom-color: rgba(75, 169, 2, 0.25); }
.sub-feats {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
}
.sub-feats li {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
line-height: 1.4;
}
.sub-feats li .ic { width: 18px; height: 18px; flex-shrink: 0; }
.sub-feats li.ok .ic { color: var(--c-mint-d); }
.sub-feats li.no { color: var(--ink-soft); opacity: 0.7; }
.sub-feats li.no .ic { color: var(--ink-soft); }
.sub-btn {
width: 100%;
justify-content: center;
margin-top: auto;
}
.sub-help {
margin-top: 28px;
background: var(--t-orange);
border: 2px solid var(--c-orange);
border-radius: var(--radius-lg);
padding: 20px 22px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 0 0 var(--c-orange-d);
flex-wrap: wrap;
}
.sub-help-mascot {
width: 72px;
height: 72px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--c-orange);
display: grid;
place-items: center;
color: var(--c-orange-d);
flex-shrink: 0;
box-shadow: 0 3px 0 0 var(--c-orange-d);
}
.sub-help-body { flex: 1; min-width: 200px; }
.sub-help-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
margin: 0 0 4px;
color: var(--c-orange-d);
}
.sub-help-text {
margin: 0;
font-size: 15px;
color: var(--ink);
line-height: 1.5;
}
/* Subscription toast */
.sub-toast {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
background: #fff;
color: var(--ink);
border: 2px solid var(--c-sky);
border-radius: 999px;
padding: 12px 22px;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
box-shadow: 0 4px 0 0 var(--c-sky-d);
}
/* ============================================
中英互译 · 开场页 (cartoon base)
============================================ */
.tx-intro { display: block; }
.tx-intro.hide { display: none; }
.tx-hero {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 22px; align-items: center;
background: linear-gradient(135deg, #d6f0ff 0%, #b6dffd 55%, #88c8fa 100%);
border: 2px solid var(--c-sky-d);
border-radius: 22px;
padding: 26px 28px;
box-shadow: 0 4px 0 0 var(--c-sky-d);
margin-top: 16px;
}
@media (max-width: 720px) { .tx-hero { grid-template-columns: 1fr; text-align: center; } }
.tx-hero-deco {
display: flex; align-items: center; justify-content: center;
gap: 8px;
font-family: var(--font-display);
}
.tx-hero-glyph {
width: 70px; height: 70px;
border-radius: 18px;
display: grid; place-items: center;
font-size: 26px; font-weight: 700;
background: #fff; color: #0e6da9;
box-shadow: 0 3px 0 0 rgba(0,0,0,.1);
border: 2px solid var(--c-sky-d);
}
.tx-hero-glyph.tx-glyph-en {
font-size: 22px; letter-spacing: 1.5px;
background: var(--c-sky); color: #fff;
}
.tx-hero-arrow {
font-size: 30px; font-weight: 700;
color: #0e6da9;
animation: tx-arrow-pulse 1.4s ease-in-out infinite;
}
@keyframes tx-arrow-pulse {
0%, 100% { transform: scale(1); opacity: .8; }
50% { transform: scale(1.12); opacity: 1; }
}
.tx-hero-eyebrow {
font-family: var(--font-display);
font-size: 13px; font-weight: 700;
color: #0e6da9;
letter-spacing: 2.5px; text-transform: uppercase;
margin-bottom: 4px;
}
.tx-hero-ttl {
font-family: var(--font-display);
font-weight: 700; font-size: 26px;
margin: 0 0 6px;
color: #0a2540; line-height: 1.25;
}
.tx-hero-sub { margin: 0; color: #0a2540; font-size: 15px; line-height: 1.6; }
.tx-hero-sub b { color: #1cb0f6; }
.tx-dir-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 640px) { .tx-dir-grid { grid-template-columns: 1fr; } }
.tx-dircard {
position: relative;
background: #fff;
border: 2px solid var(--border);
border-radius: 18px;
padding: 18px 20px;
cursor: pointer;
text-align: left;
transition: transform .12s, box-shadow .12s, border-color .12s;
box-shadow: var(--shadow-card);
}
.tx-dircard:hover { transform: translateY(-2px); border-color: var(--c-sky); }
.tx-dircard.active {
border-color: var(--c-mint);
box-shadow: 0 4px 0 0 var(--c-mint-d), 0 0 0 3px rgba(88, 204, 2, .18);
}
.tx-dircard-tag {
position: absolute;
top: -10px; left: 16px;
background: var(--c-mint);
color: #fff;
font-family: var(--font-display);
font-weight: 700; font-size: 13px;
padding: 3px 10px;
border-radius: 999px;
box-shadow: 0 2px 0 0 var(--c-mint-d);
letter-spacing: 1px;
}
.tx-dircard-tag.tx-tag-alt {
background: #ff9633;
box-shadow: 0 2px 0 0 #cc7a23;
}
.tx-dircard-arrow {
font-family: var(--font-display);
font-weight: 700; font-size: 24px;
color: var(--ink);
margin-bottom: 6px;
}
.tx-dircard-arrow span { color: var(--c-sky); margin: 0 6px; }
.tx-dircard-desc { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.tx-dircard-eg {
background: #fafbfc;
border: 1.5px dashed var(--border);
border-radius: 10px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
}
.tx-dircard-eg b {
display: inline-block;
min-width: 22px;
color: var(--c-sky);
font-weight: 700;
margin-right: 6px;
}
.tx-themebar {
display: flex; flex-wrap: wrap; gap: 8px;
}
.tx-theme {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px 6px 10px;
background: #fff;
border: 2px solid var(--border);
border-radius: 999px;
font-family: var(--font-display);
font-weight: 700; font-size: 14px;
color: var(--ink);
cursor: pointer;
box-shadow: 0 2px 0 0 var(--border);
transition: all .12s;
}
.tx-theme:hover:not(.is-empty) { border-color: var(--c-sky); }
.tx-theme.active {
background: var(--c-sky);
color: #fff;
border-color: var(--c-sky);
box-shadow: 0 2px 0 0 var(--c-sky-d);
}
.tx-theme .ic { width: 14px; height: 14px; }
.tx-theme i {
font-style: normal;
background: rgba(0,0,0,.08);
border-radius: 999px;
padding: 0 6px;
font-size: 10.5px;
margin-left: 2px;
}
.tx-theme.active i { background: rgba(255,255,255,.25); color: #fff; }
.tx-theme.is-empty { opacity: .4; cursor: not-allowed; }
.tx-cta { margin-top: 22px; align-items: center; gap: 12px; }
.tx-cta-hint { color: var(--ink-soft); font-size: 14px; }
/* splash-内嵌主题筛选条（互译） */
.splash .tx-theme-row { flex-wrap: wrap; row-gap: 8px; }
.tx-themebar-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.tx-themebar-inline .chip i {
font-style: normal;
background: rgba(0,0,0,.08);
border-radius: 999px;
padding: 0 6px;
font-size: 10.5px;
margin-left: 4px;
}
.tx-themebar-inline .chip.active i {
background: rgba(255,255,255,.25);
color: #fff;
}
.tx-themebar-inline .chip.is-empty,
.tx-themebar-inline .chip[disabled] {
opacity: .4;
cursor: not-allowed;
}
.tx-cta-hint-line {
margin: 14px 0 0;
color: var(--ink-soft);
font-size: 14px;
}
.splash .tx-cta-hint-line { color: rgba(220,232,250,.65); font-style: italic; }
/* ========== splash · 下次不再显示 复选框 (cartoon base) ========== */
.splash-skip-row {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: var(--ink-soft);
font-size: 14px;
font-family: var(--font-display);
cursor: pointer;
user-select: none;
padding: 6px 12px;
border-radius: 999px;
transition: background .15s, color .15s;
}
.splash-skip-row:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.splash-skip-row input[type=checkbox] {
accent-color: var(--c-sky);
width: 16px;
height: 16px;
cursor: pointer;
margin: 0;
}
.splash-skip-row span { line-height: 1.2; }
/* ============================================
全站搜索：sidebar 入口 + 弹层
============================================ */
/* sidebar 顶部搜索 pill */
.sb-search {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 14px;
margin-bottom: 14px;
border: 2px solid var(--border);
border-radius: 14px;
background: var(--bg);
color: var(--ink-soft);
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
cursor: pointer;
text-align: left;
transition: background .12s, border-color .12s, color .12s, transform .08s;
flex-shrink: 0;
}
.sb-search:hover { background: var(--t-sky); border-color: var(--c-sky); color: var(--c-blue); }
.sb-search:active { transform: translateY(1px); }
.sb-search .ic { width: 20px; height: 20px; }
.sb-search-text { flex: 1; }
.sb-search-kbd {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--ink-soft);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px 8px;
letter-spacing: .04em;
}
/* ============================================
Sidebar 阶段切换器（卡通风）
============================================ */
.sb-stage {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
padding: 6px 6px 12px;
margin: 4px 0 14px;
background: none;
border: 0;
border-bottom: 2px solid var(--border);
cursor: pointer;
text-align: left;
position: relative;
transition: border-color .18s ease;
flex-shrink: 0;
}
.sb-stage::after {
content: '';
position: absolute;
left: 6px; right: 6px; bottom: -2px;
height: 2px;
background: var(--c-mint);
transform: scaleX(.2);
transform-origin: left center;
transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .18s;
border-radius: 2px;
}
.sb-stage[data-tone="sky"]::after { background: var(--c-sky); }
.sb-stage[data-tone="leaf"]::after { background: var(--c-mint); }
.sb-stage[data-tone="amber"]::after { background: var(--c-orange); }
.sb-stage[data-tone="coral"]::after { background: var(--c-pink); }
.sb-stage[data-tone="violet"]::after { background: var(--c-grape); }
.sb-stage[data-tone="indigo"]::after { background: var(--c-blue); }
.sb-stage[data-tone="plum"]::after { background: var(--c-grape-d); }
.sb-stage[data-tone="teal"]::after { background: var(--c-sky-d); }
.sb-stage[data-tone="gold"]::after { background: var(--c-yellow); }
.sb-stage:hover { border-bottom-color: transparent; }
.sb-stage:hover::after { transform: scaleX(1); }
.sb-stage[aria-expanded="true"] { border-bottom-color: transparent; }
.sb-stage[aria-expanded="true"]::after { transform: scaleX(1); }
.sb-stage-cap {
font-size: 13px;
font-weight: 800;
letter-spacing: .22em;
color: var(--ink-soft);
text-transform: uppercase;
}
.sb-stage-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.sb-stage-id {
font-family: var(--font-display);
font-size: 15px;
font-weight: 800;
color: var(--ink-soft);
letter-spacing: .02em;
}
.sb-stage-cn {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
color: var(--ink);
line-height: 1.15;
transition: color .18s ease;
}
.sb-stage:hover .sb-stage-cn { color: var(--c-blue); }
.sb-stage-sub {
font-size: 13px;
color: var(--ink-soft);
font-weight: 600;
line-height: 1.3;
}
/* Popover —— 阶段列表 */
.sb-stage-pop {
position: fixed;
z-index: 8500;
width: 340px;
max-height: 78vh;
display: flex;
flex-direction: column;
background: var(--panel);
border: 2px solid var(--border);
border-radius: 18px;
box-shadow:
0 24px 60px -16px rgba(20, 30, 50, .25),
0 6px 18px -6px rgba(20, 30, 50, .12);
opacity: 0;
transform: translateX(-8px) scale(.985);
transform-origin: left top;
transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.sb-stage-pop.is-open {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
}
.sb-stage-pop-head {
padding: 16px 18px 10px;
border-bottom: 2px dashed var(--border);
}
.sb-stage-pop-title {
display: block;
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--ink);
}
.sb-stage-pop-hint {
display: block;
margin-top: 4px;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.4;
}
.sb-stage-pop-list {
overflow-y: auto;
padding: 6px;
}
.sb-stage-pop-item {
display: grid;
grid-template-columns: 40px 1fr 14px;
gap: 10px;
align-items: start;
width: 100%;
padding: 11px 12px;
background: none;
border: 0;
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: background .14s ease;
position: relative;
}
.sb-stage-pop-item + .sb-stage-pop-item { margin-top: 2px; }
.sb-stage-pop-item:hover { background: var(--t-sky); }
.sb-stage-pop-item.is-current { background: var(--t-mint); }
.sb-stage-pop-item.is-current::before {
content: '';
position: absolute;
left: 4px; top: 14px; bottom: 14px;
width: 3px;
border-radius: 2px;
background: var(--c-mint);
}
.sb-stage-pop-item[data-tone="sky"].is-current::before { background: var(--c-sky); }
.sb-stage-pop-item[data-tone="amber"].is-current::before { background: var(--c-orange); }
.sb-stage-pop-item[data-tone="coral"].is-current::before { background: var(--c-pink); }
.sb-stage-pop-item[data-tone="violet"].is-current::before { background: var(--c-grape); }
.sb-stage-pop-item[data-tone="indigo"].is-current::before { background: var(--c-blue); }
.sb-stage-pop-item[data-tone="plum"].is-current::before { background: var(--c-grape-d); }
.sb-stage-pop-item[data-tone="teal"].is-current::before { background: var(--c-sky-d); }
.sb-stage-pop-item[data-tone="gold"].is-current::before { background: var(--c-yellow); }
.sb-stage-pop-id {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
color: var(--ink-soft);
letter-spacing: .02em;
padding-top: 1px;
}
.sb-stage-pop-item.is-current .sb-stage-pop-id { color: var(--ink); }
.sb-stage-pop-body { display: flex; flex-direction: column; gap: 2px; }
.sb-stage-pop-cn {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--ink);
line-height: 1.2;
}
.sb-stage-pop-sub {
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 600;
}
.sb-stage-pop-tip {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.45;
margin-top: 2px;
opacity: .85;
}
.sb-stage-pop-mark {
width: 14px; height: 14px;
align-self: center;
border: 2px solid var(--border-h);
border-radius: 50%;
transition: border-color .14s, background-color .14s;
}
.sb-stage-pop-item.is-current .sb-stage-pop-mark {
border-color: var(--c-mint);
background: var(--c-mint);
box-shadow: inset 0 0 0 3px var(--panel);
}
.sb-stage-pop-item[data-tone="sky"].is-current .sb-stage-pop-mark { border-color: var(--c-sky); background: var(--c-sky); }
.sb-stage-pop-item[data-tone="amber"].is-current .sb-stage-pop-mark { border-color: var(--c-orange); background: var(--c-orange); }
.sb-stage-pop-item[data-tone="coral"].is-current .sb-stage-pop-mark { border-color: var(--c-pink); background: var(--c-pink); }
.sb-stage-pop-item[data-tone="violet"].is-current .sb-stage-pop-mark { border-color: var(--c-grape); background: var(--c-grape); }
.sb-stage-pop-item[data-tone="indigo"].is-current .sb-stage-pop-mark { border-color: var(--c-blue); background: var(--c-blue); }
.sb-stage-pop-item[data-tone="plum"].is-current .sb-stage-pop-mark { border-color: var(--c-grape-d); background: var(--c-grape-d); }
.sb-stage-pop-item[data-tone="teal"].is-current .sb-stage-pop-mark { border-color: var(--c-sky-d); background: var(--c-sky-d); }
.sb-stage-pop-item[data-tone="gold"].is-current .sb-stage-pop-mark { border-color: var(--c-yellow); background: var(--c-yellow); }
@media (max-width: 900px) {
.sb-stage { display: none; }
}
/* 弹层：底色遮罩 + 居中对话框 */
/* ════ 全站搜索 · 聚光灯式（单栏大字，选中行原地展开）════ */
.gs-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 9vh 24px 24px;
}
.gs-modal.hide { display: none; }
body.gs-open { overflow: hidden; }
.gs-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 18, 14, .5);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.gs-dialog {
position: relative;
width: min(720px, 100%);
max-height: min(78vh, 720px);
background: var(--panel);
border-radius: 22px;
box-shadow: 0 30px 80px rgba(0,0,0,.28);
display: flex;
flex-direction: column;
overflow: hidden;
animation: gs-pop .18s cubic-bezier(.4,0,.2,1);
}
@keyframes gs-pop {
from { transform: translateY(-12px) scale(.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.gs-input-row {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 28px;
box-shadow: inset 0 -1px 0 var(--border);
}
.gs-input-ic { color: var(--c-sky); display: inline-flex; line-height: 0; }
.gs-input-ic .ic { width: 22px; height: 22px; }
.gs-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-display, var(--font-body));
font-size: 24px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--ink);
}
.gs-input::placeholder { color: var(--ink-soft); font-weight: 500; }
.gs-input-kbd {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
color: var(--ink-soft);
background: var(--bg);
border-radius: 6px;
padding: 5px 10px;
}
/* 单栏滚动区 */
.gs-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 12px 16px 18px;
}
.gs-section-label {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
color: var(--ink-soft);
text-transform: uppercase;
letter-spacing: .16em;
padding: 16px 12px 8px;
}
.gs-section-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 6px;
}
.gs-section-row .gs-section-label { padding-bottom: 8px; }
.gs-section-clear {
background: none;
border: none;
color: var(--ink-soft);
font-size: 13px;
font-weight: 700;
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
}
.gs-section-clear:hover { background: var(--bg); color: var(--ink); }
.gs-fuzzy-hint {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 10px 4px;
padding: 9px 13px;
font-size: 13px;
color: var(--ink-soft);
background: var(--bg);
border-radius: 10px;
}
.gs-fuzzy-hint .ic { flex-shrink: 0; }
.gs-fuzzy-hint b { color: var(--ink); font-weight: 700; }
/* 最近搜索 / 试试搜 —— 简单行 */
.gs-recent {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: none;
border-radius: 12px;
background: transparent;
cursor: pointer;
text-align: left;
color: var(--ink);
font-weight: 600;
font-size: 16px;
font-family: var(--font-body);
}
.gs-recent .ic { color: var(--ink-soft); width: 18px; height: 18px; flex-shrink: 0; }
.gs-recent:hover { background: var(--bg); }
/* —— 聚光灯结果行 —— */
.gs-item {
display: block;
width: 100%;
padding: 16px 18px;
border: none;
border-radius: 16px;
background: transparent;
cursor: pointer;
text-align: left;
transition: background .14s;
}
.gs-item:hover { background: var(--bg); }
.gs-item.active { background: var(--t-sky); }
.gs-item-head { display: flex; align-items: baseline; gap: 14px; }
.gs-item-title {
font-family: var(--font-display);
font-size: 27px;
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-item-title.is-sm {
font-size: 18px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.4;
white-space: normal;
}
.gs-item.active .gs-item-title { color: var(--c-blue); }
.gs-item-meta {
font-family: var(--font-display);
font-size: 14px;
color: var(--ink-soft);
flex-shrink: 0;
}
.gs-item-tag {
margin-left: auto;
flex-shrink: 0;
align-self: center;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
padding: 4px 11px;
border-radius: 999px;
background: var(--t-sky);
color: var(--c-blue);
}
.gs-tag-word, .gs-tag-theme { background: var(--t-mint); color: var(--c-mint-d); }
.gs-tag-idiom { background: var(--t-grape); color: var(--c-grape-d); }
.gs-tag-sentence { background: var(--t-sky); color: var(--c-blue); }
.gs-tag-reading { background: var(--t-yellow); color: var(--c-yellow-d); }
.gs-tag-nav { background: var(--bg); color: var(--ink-soft); }
.gs-item-def { font-size: 17px; color: var(--ink-soft); margin-top: 7px; }
/* 选中行原地展开：例句 + 操作 */
.gs-item-expand {
max-height: 0;
overflow: hidden;
transition: max-height .26s ease, margin-top .26s ease;
}
.gs-item.active .gs-item-expand { max-height: 220px; margin-top: 14px; }
.gs-item-ex {
margin: 0;
font-size: 16px;
line-height: 1.6;
font-style: italic;
color: var(--ink-soft);
padding-left: 14px;
box-shadow: inset 2px 0 0 var(--c-sky);
}
.gs-item-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gs-item-speak {
width: 38px; height: 38px;
flex-shrink: 0;
border: none;
border-radius: 10px;
cursor: pointer;
background: var(--panel);
color: var(--c-sky);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 2px var(--border);
}
.gs-item-speak:hover { background: var(--t-sky); }
.gs-item-speak .ic { width: 18px; height: 18px; }
.gs-item-jump {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border: none;
border-radius: 999px;
background: var(--c-sky);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.gs-item-jump:hover { background: var(--c-sky-d); }
.gs-item-jump .ic { width: 15px; height: 15px; }
.gs-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
color: var(--ink-soft);
gap: 8px;
}
.gs-empty .ic { color: var(--border-h); }
.gs-empty-t {
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
color: var(--ink);
margin: 8px 0 0;
}
.gs-empty-s { font-size: 15px; margin: 0; }
.gs-footer {
display: flex;
align-items: center;
gap: 22px;
padding: 13px 24px;
box-shadow: inset 0 1px 0 var(--border);
font-size: 13px;
color: var(--ink-soft);
font-weight: 600;
}
.gs-footer kbd {
font-family: var(--font-display);
font-size: 12.5px;
background: var(--bg);
border-radius: 5px;
padding: 2px 7px;
margin: 0 2px;
color: var(--ink-soft);
}
.gs-footer-spacer { flex: 1; }
.gs-footer-brand { font-family: var(--font-display); letter-spacing: .12em; }
@media (max-width: 720px) {
.gs-modal { padding: 5vh 12px 12px; }
.gs-dialog { max-height: 86vh; }
.gs-input { font-size: 20px; }
.gs-item-title { font-size: 23px; }
.sb-search-kbd { display: none; }
}
/* --- Pronounce Lab (发音房) --- */
.pron-card {
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 26px 24px;
box-shadow: 0 4px 0 0 var(--border);
border-top: 2px solid var(--border);
border-bottom: 2px solid var(--border);
}
.pron-word-row {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.pron-word {
font-family: var(--font-display);
font-size: 56px;
line-height: 1.05;
margin: 0;
color: var(--ink);
letter-spacing: .5px;
}
.pron-pos {
font-size: 16px;
color: var(--muted);
font-style: italic;
}
.pron-ipa {
font-family: 'Noto Sans Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 22px;
color: var(--c-grape-d);
margin-top: 6px;
}
.pron-def {
margin-top: 10px;
font-size: 18px;
color: var(--ink);
font-weight: 600;
}
.pron-ex {
margin-top: 6px;
color: var(--muted);
font-size: 16px;
}
.pron-ex .pron-ex-q { font-style: italic; }
.pron-actions {
display: flex; align-items: center; gap: 12px;
margin-top: 22px;
flex-wrap: wrap;
}
.pron-mic {
width: 80px; height: 80px;
}
.pron-mic.scoring { animation: pulse 1s infinite ease-in-out; background: var(--c-yellow); box-shadow: 0 5px 0 0 var(--c-yellow-d); color: #6a4a00; }
.pron-tip { margin-top: 12px; }
.pron-score-pill {
display: inline-flex; align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: var(--panel);
color: var(--ink-soft);
font-weight: 700;
font-family: var(--font-display);
border: 2px solid var(--border);
}
.pron-score-pill.scored {
background: var(--t-mint);
color: var(--c-mint-d);
border-color: var(--c-mint);
}
@media (max-width: 700px) {
.pron-word { font-size: 40px; }
.pron-actions { gap: 8px; }
.pron-mic { width: 70px; height: 70px; }
}
/* --- Dict (词典查词) --- */
.dict-search-row {
margin-top: 10px;
display: flex; flex-direction: column; gap: 12px;
}
.dict-input-wrap {
position: relative;
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 0 0 var(--border);
display: flex; align-items: center;
padding: 4px 14px 4px 44px;
}
.dict-input-ic {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--muted);
}
.dict-input-ic .ic { width: 20px; height: 20px; }
.dict-input {
flex: 1;
border: none; outline: none; background: transparent;
font-family: var(--font-display);
font-size: 22px;
padding: 14px 0;
color: var(--ink);
}
/* 去掉 input[type=search] 的浏览器原生清空键，与 .dict-clear 重复 */
.dict-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dict-input::-ms-clear { display: none; }
.dict-clear {
border: none; background: transparent;
font-size: 24px; cursor: pointer;
color: var(--muted); padding: 6px 10px;
}
.dict-clear:hover { color: var(--c-red); }
.dict-filter-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
font-size: 14px;
}
.dict-filter-row > strong { color: var(--muted); font-weight: 600; }
.dict-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 22px;
margin-top: 18px;
}
.dict-side {
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 14px;
align-self: start;
box-shadow: 0 4px 0 0 var(--border);
}
.dict-side-h {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 15px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .5px;
}
.dict-recent { display: flex; flex-direction: column; gap: 6px; }
.dict-recent-item {
border: 2px solid var(--border);
border-radius: 12px;
background: var(--panel);
padding: 8px 12px;
cursor: pointer;
text-align: left;
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
font-family: var(--font-text);
transition: transform .08s, background .12s;
}
.dict-recent-item:hover { background: var(--t-sky); transform: translateY(-1px); }
.dict-recent-w {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
}
.dict-recent-ipa {
font-family: 'Noto Sans Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 14px;
color: var(--c-grape-d);
}
.dict-main { min-width: 0; }
.dict-status { margin: 4px 0 14px; font-size: 15px; }
.dict-item {
background: var(--panel);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
margin-bottom: 12px;
box-shadow: 0 3px 0 0 var(--border);
}
.dict-item .dict-row {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dict-item .dict-w {
margin: 0;
font-family: var(--font-display);
font-size: 24px;
color: var(--ink);
}
.dict-item .dict-pos { color: var(--muted); font-style: italic; font-size: 14px; }
.dict-item .dict-ipa {
font-family: 'Noto Sans Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 15px;
color: var(--c-grape-d);
}
.dict-tag {
font-size: 13px;
padding: 2px 8px;
border-radius: 999px;
background: var(--t-mint);
color: var(--c-mint-d);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
border: 1.5px solid var(--c-mint);
}
.dict-tag.dict-lvl { background: var(--t-grape); color: var(--c-grape-d); border-color: var(--c-grape); }
.dict-tag.dict-theme-tag { background: var(--t-sky); color: var(--c-sky-d); border-color: var(--c-sky); }
.dict-def { margin: 8px 0 4px; font-size: 16px; color: var(--ink); font-weight: 600; }
.dict-ex { color: var(--muted); font-style: italic; font-size: 15px; }
.dict-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 800px) {
.dict-grid { grid-template-columns: 1fr; }
.dict-side { order: 2; }
.dict-input { font-size: 18px; padding: 12px 0; }
}
/* --- Favorites (收藏夹) --- */
.fav-search {
max-width: 280px;
font-size: 16px !important;
padding: 8px 12px !important;
border: 2px solid var(--border);
border-radius: 12px;
background: var(--panel);
font-family: var(--font-text);
}
.fav-item .dict-tag.dict-lvl { background: var(--t-orange, #ffe5cc); color: var(--c-orange-d); border-color: var(--c-orange); }
/* ============================================
60. Duolingo-style motion polish
只加动画/交互，不改颜色。按钮弹性、答题对错反馈、
进度条回弹、撒花。所有动画走 prefers-reduced-motion 兜底。
============================================ */
/* 60.1 按钮按下：弹簧缩放（在已有 :active translateY 的基础上叠加 scale） */
.btn:active:not(:disabled) { transform: translateY(3px) scale(.96); }
/* 60.2 新出现的按钮：弹性 pop-in
触发场景：finishQ 追加的 #next-btn、各回合结束面板的按钮 */
@keyframes lx-btn-pop-in {
0% { transform: scale(.6); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
#next-btn,
#end-screen .btn,
#iq-result .btn,
#pl-result .btn,
.btn.lx-pop {
animation: lx-btn-pop-in .42s cubic-bezier(.34,1.56,.64,1) both;
}
/* 60.3 答题正确：脉冲放大 */
@keyframes lx-opt-correct {
0% { transform: scale(1); }
35% { transform: scale(1.06); }
60% { transform: scale(.98); }
100% { transform: scale(1); }
}
.options .opt.correct,
.iq-opt.ok {
animation: lx-opt-correct .55s cubic-bezier(.34,1.56,.64,1);
}
/* 60.4 答题错误：左右摇头 */
@keyframes lx-opt-wrong {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(7px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(3px); }
}
.options .opt.wrong,
.iq-opt.bad {
animation: lx-opt-wrong .45s ease-in-out;
}
/* 60.5 反馈框：上滑 + 轻微回弹进入 */
@keyframes lx-fb-in {
0% { transform: translateY(14px) scale(.96); opacity: 0; }
60% { transform: translateY(-3px) scale(1.02); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.feedback {
animation: lx-fb-in .42s cubic-bezier(.34,1.56,.64,1);
transform-origin: top center;
}
/* 60.6 进度条填充：弹性回弹（覆盖原 ease 缓动） */
.bar > i,
.pl-fill,
.fc-prog > i {
transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
/* 60.7 完成庆祝：卡片轻弹 + 暖光晕（box-shadow 固定 32px 模糊，只改透明度，不扩散） */
.lx-pulse-bounce {
animation: lx-pulse-bounce 1.8s cubic-bezier(.2, .75, .25, 1) both;
transform-origin: center center;
border-radius: 18px;
will-change: transform, box-shadow;
}
@keyframes lx-pulse-bounce {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 150, 0, 0), 0 0 0 0 rgba(255, 200, 0, 0); }
16% { transform: scale(1.035); box-shadow: 0 0 38px 6px rgba(255, 150, 0, .85), 0 0 14px 2px rgba(255, 200, 0, .55); }
36% { transform: scale(1.022); box-shadow: 0 0 38px 6px rgba(255, 150, 0, .65), 0 0 14px 2px rgba(255, 200, 0, .38); }
62% { transform: scale(1.008); box-shadow: 0 0 38px 6px rgba(255, 150, 0, .35), 0 0 14px 2px rgba(255, 200, 0, .18); }
100% { transform: scale(1); box-shadow: 0 0 38px 6px rgba(255, 150, 0, 0), 0 0 14px 2px rgba(255, 200, 0, 0); }
}
/* 60.8 +XP 飘字（"+5 XP" 从锚点上飘 60px 渐隐）—— 主题中性基础样式 */
.lx-xp-float {
position: fixed;
z-index: 9998;
font-family: var(--font-display);
font-weight: 900;
font-size: 22px;
color: var(--c-orange-d);
text-shadow:
0 2px 0 rgba(255, 255, 255, .9),
0 3px 6px rgba(255, 138, 101, .35);
letter-spacing: .04em;
pointer-events: none;
transform: translate(-50%, 0);
animation: lx-xp-float-up 1.2s cubic-bezier(.2, .7, .2, 1) forwards;
white-space: nowrap;
}
@keyframes lx-xp-float-up {
0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); }
12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
25% { transform: translate(-50%, -8px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -64px) scale(.9); }
}
/* 60.9 完成弹窗 .lx-win-popup —— 左下"+10 XP"卡片，主题中性基础样式 */
#lx-win-popup-container {
position: fixed;
left: 14px; bottom: 14px;
z-index: 1400;
display: flex;
flex-direction: column-reverse;
gap: 8px;
pointer-events: none;
}
.lx-win-popup {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius);
font-size: 15px;
max-width: 320px;
pointer-events: auto;
cursor: pointer;
font-family: var(--font-display);
background: var(--panel);
color: var(--ink);
border: 2px solid var(--border);
border-left: 4px solid var(--c-orange);
box-shadow: 0 6px 0 0 var(--border), 0 12px 24px rgba(255, 138, 101, .18);
animation: lx-win-pop-in .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.lx-win-popup.out { animation: lx-win-pop-out .3s ease forwards; }
.lx-win-popup-icon {
font-size: 22px;
flex-shrink: 0;
color: var(--c-orange-d);
display: inline-flex;
align-items: center;
justify-content: center;
}
.lx-win-popup-icon .ic { width: 22px; height: 22px; }
.lx-win-popup-body { flex: 1; min-width: 0; }
.lx-win-popup-eyebrow {
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
}
.lx-win-popup-title {
font-size: 15px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.lx-win-popup-amount {
font-size: 17px;
font-weight: 800;
color: var(--c-mint-d);
white-space: nowrap;
margin-left: 6px;
font-family: var(--font-display);
}
@keyframes lx-win-pop-in {
from { transform: translateX(-120%) scale(.8); opacity: 0; }
to { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes lx-win-pop-out {
from { transform: translateX(0) scale(1); opacity: 1; }
to { transform: translateX(-120%) scale(.85); opacity: 0; }
}
/* 60.10 数字闪光 —— XP/streak 增长时的瞬时光晕（halo 色通过 --flash-halo 切主题） */
.lx-bal-win { animation: lx-bal-win-glow .7s ease; }
@keyframes lx-bal-win-glow {
0%, 100% { filter: none; }
30%, 60% {
filter:
drop-shadow(0 0 16px rgba(34, 197, 94, .9))
drop-shadow(0 0 6px rgba(86, 222, 130, .7))
brightness(1.18);
}
}
.lx-score-flash {
--flash-halo: rgba(255, 200, 0, .9); /* cartoon: --c-yellow 调透明 */
animation: lx-score-flash .8s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes lx-score-flash {
0% { transform: scale(1); filter: none; }
35% {
transform: scale(1.45);
filter: brightness(1.8) drop-shadow(0 0 28px var(--flash-halo));
}
100% { transform: scale(1); filter: none; }
}
/* 路由切换淡入 —— navigate() 替换 #view 内容后加 .view-enter 触发 */
#view.view-enter { animation: view-enter .14s ease-out; }
@keyframes view-enter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* 题内切换 —— quiz/placement/reading/listen/speak/mistakes/idiom/translate 的"下一题"滑动
swapQuestion() helper 给容器加 q-stage + q-out → 换内容 → q-in */
.q-stage { will-change: transform, opacity; }
.q-stage.q-out { animation: q-out .18s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.q-stage.q-in { animation: q-in .18s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes q-out {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-30%); opacity: 0; }
}
@keyframes q-in {
from { transform: translateX(30%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.lx-flame-lightup {
animation: lx-flame-lightup .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes lx-flame-lightup {
0% {
filter: grayscale(1) brightness(.6);
transform: scale(.85);
}
40% {
filter:
drop-shadow(0 0 14px #FF6B00)
drop-shadow(0 0 30px #FFD700);
transform: scale(1.2);
}
100% {
filter:
drop-shadow(0 0 8px #FF6B00)
drop-shadow(0 0 18px #FFAA00);
transform: scale(1);
}
}
/* 60.11 prefers-reduced-motion 兜底：全静音 */
@media (prefers-reduced-motion: reduce) {
#next-btn,
#end-screen .btn,
#iq-result .btn,
#pl-result .btn,
.btn.lx-pop,
.options .opt.correct,
.options .opt.wrong,
.iq-opt.ok,
.iq-opt.bad,
.feedback,
.lx-pulse-bounce,
.lx-xp-float,
.lx-win-popup,
.lx-win-popup.out,
.lx-bal-win,
.lx-score-flash,
.lx-flame-lightup,
#view.view-enter,
.q-stage.q-out,
.q-stage.q-in {
animation: none !important;
}
.bar > i,
.pl-fill,
.fc-prog > i {
transition: width .25s ease-out !important;
}
}
/* ============================================
Auth widget + modal
============================================ */
.auth-widget {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
margin-top: 14px;
margin-bottom: 8px;
border-radius: 12px;
border: 2px solid var(--border);
background: var(--panel);
color: var(--ink);
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 3px 0 0 var(--border);
transition: transform .08s, background .12s, border-color .12s;
}
.auth-widget:hover { background: var(--t-mint); border-color: var(--c-mint); }
.auth-widget:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--border); }
.auth-widget .ic { width: 16px; height: 16px; }
.auth-widget.is-in {
padding: 8px 12px;
background: linear-gradient(135deg, var(--t-mint) 0%, var(--t-sky) 100%);
border-color: var(--c-mint);
}
.auth-widget-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-mint-d);
color: #fff;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.auth-widget-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
flex: 1;
}
.auth-widget-cap {
font-size: 13px;
font-weight: 600;
color: var(--c-mint-d);
letter-spacing: .04em;
text-transform: uppercase;
}
.auth-widget-id {
font-size: 14px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.auth-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 24px;
animation: subModalIn .25s ease both;
}
.auth-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(60, 60, 60, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.auth-modal-card {
position: relative;
background: var(--bg);
border: 3px solid var(--ink);
border-radius: 24px;
box-shadow: 0 12px 0 0 rgba(60, 60, 60, 0.3);
padding: 32px 32px 24px;
max-width: 380px;
width: 100%;
animation: subCardIn .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.auth-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--panel);
color: var(--ink);
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 3px 0 0 var(--border);
transition: transform .08s, background .12s, color .12s, border-color .12s;
}
.auth-modal-close:hover { background: var(--t-red); border-color: var(--c-red); color: var(--c-red-d); }
.auth-modal-close:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--border); }
.auth-modal-close .ic { width: 16px; height: 16px; }
.auth-modal-head { text-align: center; margin-bottom: 22px; }
.auth-modal-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
margin: 0 0 6px;
color: var(--c-mint-d);
}
.auth-modal-sub {
color: var(--ink-soft);
font-size: 14px;
margin: 0;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
font-size: 14px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: .03em;
}
.auth-field input {
padding: 11px 14px;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 16px;
background: var(--panel);
color: var(--ink);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.03);
transition: border-color .12s;
}
.auth-field input:focus {
outline: none;
border-color: var(--c-mint);
background: var(--bg);
}
.auth-error {
background: var(--t-red);
color: var(--c-red-d);
padding: 10px 14px;
border-radius: 10px;
font-size: 14px;
border: 2px solid var(--c-red);
}
.auth-submit {
margin-top: 4px;
padding: 12px 16px;
border: 2px solid var(--ink);
border-radius: 14px;
background: var(--c-mint-d);
color: #fff;
font-weight: 700;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 0 0 var(--ink);
transition: transform .08s, box-shadow .08s;
}
.auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--ink); }
.auth-submit:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ink); }
.auth-submit:disabled { opacity: .6; cursor: progress; }
.auth-toggle {
margin-top: 6px;
text-align: center;
font-size: 14px;
color: var(--ink-soft);
}
.auth-toggle-link {
background: none;
border: none;
padding: 0;
margin-left: 4px;
color: var(--c-mint-d);
font-weight: 700;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.account-menu {
position: fixed;
z-index: 999;
background: var(--bg);
border: 2px solid var(--ink);
border-radius: 16px;
box-shadow: 0 8px 0 0 rgba(60,60,60,.25);
padding: 12px;
min-width: 220px;
opacity: 0;
transform: translateY(-6px);
transition: opacity .15s, transform .15s;
}
.account-menu.is-open { opacity: 1; transform: translateY(0); }
.account-menu-head {
padding: 6px 10px 10px;
border-bottom: 1px dashed var(--border);
margin-bottom: 8px;
}
.account-menu-cap {
font-size: 13px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: .05em;
text-transform: uppercase;
}
.account-menu-email {
font-size: 14px;
font-weight: 600;
color: var(--ink);
margin-top: 2px;
word-break: break-all;
}
.account-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: none;
background: transparent;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
color: var(--c-red-d);
cursor: pointer;
text-align: left;
}
.account-menu-item:hover { background: var(--t-red); }
.account-menu-item .ic { width: 16px; height: 16px; }
/* ============================================
Progress 深度可视化 — Stage / Week / Donut / Bests
============================================ */
/* Stage 各阶段掌握度横条 */
.stage-row { margin-bottom: 14px; }
.stage-row-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 15px;
}
.stage-row-id {
font-weight: 800;
font-family: var(--font-display);
color: var(--ink);
min-width: 32px;
}
.stage-row[data-tone="mint"] .stage-row-id { color: var(--c-mint-d); }
.stage-row[data-tone="sky"] .stage-row-id { color: var(--c-sky-d); }
.stage-row[data-tone="leaf"] .stage-row-id { color: var(--c-leaf-d, #4b8a3a); }
.stage-row[data-tone="amber"] .stage-row-id { color: var(--c-yellow-d); }
.stage-row[data-tone="coral"] .stage-row-id { color: var(--c-red-d); }
.stage-row[data-tone="violet"] .stage-row-id { color: #7a5dd6; }
.stage-row[data-tone="indigo"] .stage-row-id { color: #4b59c8; }
.stage-row[data-tone="plum"] .stage-row-id { color: #8e3d9a; }
.stage-row[data-tone="teal"] .stage-row-id { color: #2e8a8a; }
.stage-row[data-tone="gold"] .stage-row-id { color: #b08d2a; }
.stage-row-cn {
font-weight: 600;
color: var(--ink);
}
.stage-row-num {
font-size: 14px;
color: var(--ink-soft);
font-weight: 600;
}
.stage-row-pct {
font-size: 14px;
font-weight: 800;
color: var(--c-mint-d);
min-width: 38px;
text-align: right;
}
.stage-row-track {
position: relative;
height: 10px;
background: var(--panel);
border: 1.5px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.stage-row-seen,
.stage-row-master {
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-radius: 6px;
transition: width .35s ease;
}
.stage-row-seen { background: rgba(123, 196, 163, .25); }
.stage-row-master { background: linear-gradient(90deg, var(--c-mint), var(--c-mint-d)); }
/* 周 XP 柱状图 */
.week-svg { width: 100%; height: auto; display: block; }
.week-svg .baseline { stroke: var(--border); stroke-width: 1; }
.week-svg .wx-bar rect {
fill: var(--c-sky);
transition: fill .15s;
}
.week-svg .wx-bar rect.ghost { fill: var(--c-sky); opacity: .18; }
.week-svg .wx-bar:hover rect { fill: var(--c-sky-d); }
.week-svg .wx-bar:hover rect.ghost { opacity: .35; }
.week-svg .wx-label {
fill: var(--ink-soft);
font-size: 13px;
}
.week-total {
margin-top: 8px;
font-size: 14px;
text-align: center;
}
/* 周 XP 空态 */
.view-progress .week-empty {
padding: 28px 0 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.view-progress .week-empty-msg {
font-size: 15px;
color: var(--ink-soft);
text-align: center;
max-width: 360px;
line-height: 1.6;
}
.view-progress .week-empty-dots {
display: flex;
gap: 8px;
}
.view-progress .week-empty-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--surface-hi, #e8e8f0);
border: 1px solid var(--border);
}
.view-progress .week-empty-dot.on {
background: var(--c-sky);
border-color: transparent;
}
/* 错题主题 donut */
.dt-wrap {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.dt-svg {
width: 180px;
height: 180px;
flex-shrink: 0;
}
.dt-svg circle { transition: opacity .15s; }
.dt-svg:hover circle { opacity: .8; }
.dt-svg circle:hover { opacity: 1; stroke-width: 28; }
.dt-center-num {
font-family: var(--font-display);
font-weight: 800;
font-size: 26px;
fill: var(--ink);
}
.dt-center-lbl {
font-size: 13px;
fill: var(--ink-soft);
}
.dt-legend {
flex: 1;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 6px;
}
.dt-leg-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.dt-leg-sw {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.dt-leg-name {
flex: 1;
color: var(--ink);
font-weight: 600;
}
.dt-leg-num {
color: var(--ink-soft);
font-size: 14px;
}
/* 个人最佳卡片 */
.bests-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 720px) {
.bests-grid { grid-template-columns: repeat(2, 1fr); }
}
.best-card {
background: var(--panel);
border: 2px solid var(--border);
border-radius: 16px;
padding: 18px 14px;
text-align: center;
box-shadow: 0 3px 0 0 var(--border);
}
.best-ic {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
margin: 0 auto 10px;
}
.best-ic.orange { background: var(--t-orange); color: var(--c-orange-d, #c25e2e); }
.best-ic.mint { background: var(--t-mint); color: var(--c-mint-d); }
.best-ic.yellow { background: var(--t-yellow); color: var(--c-yellow-d); }
.best-ic.sky { background: var(--t-sky); color: var(--c-sky-d); }
.best-ic .ic { width: 22px; height: 22px; }
.best-num {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
color: var(--ink);
margin-bottom: 2px;
}
.best-lbl {
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.best-sub {
font-size: 13px;
color: var(--ink-soft);
margin-top: 4px;
}
/* ============================================
离线状态条 + 同步 toast
============================================ */
.offline-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 998;
display: none;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 16px;
background: var(--c-orange-d, #e89b7f);
color: #fff;
font-size: 14px;
font-weight: 700;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, .08);
}
.offline-bar.is-on { display: flex; }
.offline-bar.is-syncing { background: var(--c-sky-d, #4b8aae); }
.offline-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: offlinePulse 1.4s ease-in-out infinite;
}
@keyframes offlinePulse {
0%, 100% { opacity: .3; transform: scale(.7); }
50% { opacity: 1; transform: scale(1); }
}
.sync-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 12px);
background: var(--ink);
color: #fff;
padding: 12px 20px;
border-radius: 24px;
font-size: 15px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
opacity: 0;
transition: opacity .25s, transform .25s;
z-index: 1001;
pointer-events: none;
}
.sync-toast.is-on {
opacity: 1;
transform: translate(-50%, 0);
}
/* ============================================
发音房实时波形
============================================ */
.pron-wave {
display: block;
width: 100%;
height: 64px;
margin: 10px 0 6px;
border-radius: 12px;
background: var(--panel);
border: 2px solid var(--border);
opacity: 0;
transition: opacity .25s;
}
.pron-wave.is-on { opacity: 1; }
/* ============================================
PvP 对战
============================================ */
/* ── login hero ── */
.pvp-login-hero {
grid-column: 1 / -1;
text-align: center;
padding: 56px 24px 44px;
background: var(--panel);
border: 2px solid var(--border);
border-radius: 20px;
}
/* 卡通主题：卡片不要边框（硬约束），改用柔和阴影撑起白卡 */
html[data-theme="cartoon"] .pvp-login-hero {
border: none;
box-shadow: 0 6px 22px rgba(60, 50, 30, .09);
}
html[data-theme="cartoon"] .dict-item { border: none; }
html[data-theme="cartoon"] .idiom-item {
border: none;
box-shadow: 0 2px 10px rgba(60, 50, 30, .07);
}
.pvp-hero-emblem { font-size: 60px; line-height: 1; margin-bottom: 16px; display: block; }
.pvp-hero-title {
font-family: var(--font-display);
font-size: 28px; font-weight: 800;
color: var(--ink); margin: 0 0 10px;
}
.pvp-hero-sub { color: var(--ink-soft); font-size: 16px; margin: 0 0 22px; }
.pvp-hero-feats {
display: flex; justify-content: center; gap: 8px;
flex-wrap: wrap; margin-bottom: 28px;
}
.pvp-feat {
padding: 5px 14px;
border: 1.5px solid var(--border);
border-radius: 999px;
font-size: 14px; font-weight: 700;
color: var(--ink-soft);
}
.pvp-hero-login { font-size: 16px; padding: 12px 28px; border-radius: 12px; }
/* ── status pill ── */
.pvp-status-pill { font-family: var(--font-display); letter-spacing: .08em; }
/* ── lobby ── */
.pvp-lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .pvp-lobby { grid-template-columns: 1fr; } }
.pvp-lobby-card {
display: flex; flex-direction: column;
padding: 26px 22px;
border: 2px solid var(--border);
border-radius: 20px;
background: var(--panel);
position: relative; overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.pvp-lobby-card:hover {
border-color: var(--c-mint);
box-shadow: 0 0 28px rgba(100,220,180,.12);
}
.pvp-lobby-card.is-join:hover {
border-color: var(--c-sky);
box-shadow: 0 0 28px rgba(80,160,240,.12);
}
.pvp-lobby-badge {
position: absolute; top: 16px; right: 16px;
width: 46px; height: 46px; border-radius: 50%;
background: var(--t-mint); border: 2px solid var(--c-mint);
display: grid; place-items: center; font-size: 20px;
}
.pvp-lobby-card.is-join .pvp-lobby-badge { background: var(--t-sky); border-color: var(--c-sky); }
.pvp-lobby-card h3 {
font-family: var(--font-display);
font-size: 20px; font-weight: 800;
margin: 0 0 8px; color: var(--ink);
padding-right: 52px;
}
.pvp-lobby-card > p {
font-size: 14px; color: var(--ink-soft);
margin: 0 0 18px; line-height: 1.55; flex: 1;
}
.pvp-room-input {
width: 100%; box-sizing: border-box;
padding: 12px 14px;
border: 2px solid var(--border); border-radius: 12px;
font-family: var(--font-display); font-size: 20px;
letter-spacing: .25em; text-transform: uppercase;
background: var(--bg); color: var(--ink);
margin-bottom: 10px; transition: border-color .15s;
}
.pvp-room-input:focus { outline: none; border-color: var(--c-sky); }
.pvp-room-input::placeholder { letter-spacing: .06em; opacity: .35; }
/* ── room shell ── */
.pvp-room { padding: 24px; }
.pvp-room-head {
display: flex; align-items: center; gap: 12px;
padding-bottom: 16px;
border-bottom: 2px dashed var(--border);
margin-bottom: 22px;
}
.pvp-room-label {
font-size: 13px; letter-spacing: .2em;
color: var(--ink-soft); font-weight: 700;
text-transform: uppercase; margin-bottom: 2px;
}
.pvp-room-code {
font-family: var(--font-display);
font-size: 32px; font-weight: 800;
letter-spacing: .3em; color: var(--c-mint-d);
}
/* ── arena / vs ── */
.pvp-arena {
display: grid;
grid-template-columns: 1fr 60px 1fr;
align-items: center; gap: 10px; margin-bottom: 20px;
}
.pvp-player {
text-align: center; padding: 20px 10px;
border: 2px solid var(--border); border-radius: 18px;
background: var(--panel);
transition: border-color .3s, box-shadow .3s;
}
.pvp-player.is-ready {
border-color: var(--c-mint);
box-shadow: 0 0 22px rgba(100,220,180,.18);
}
.pvp-avatar {
width: 58px; height: 58px; border-radius: 50%;
display: grid; place-items: center;
margin: 0 auto 10px;
font-family: var(--font-display);
font-weight: 800; font-size: 15px;
}
.pvp-avatar.host { background: var(--c-mint-d); color: #fff; }
.pvp-avatar.guest { background: var(--c-sky-d); color: #fff; }
.pvp-pname {
font-weight: 700; color: var(--ink); font-size: 15px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.pvp-pscore { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--ink); line-height: 1; margin: 5px 0 4px; }
.pvp-pready { font-size: 14px; color: var(--ink-soft); }
.pvp-pready.is-ready { color: var(--c-mint-d); font-weight: 700; }
.pvp-vs-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pvp-vs-tag {
font-family: var(--font-display);
font-size: 20px; font-weight: 800;
color: var(--c-yellow-d); letter-spacing: .08em; line-height: 1;
}
.pvp-vs-line { width: 2px; height: 14px; background: var(--border); border-radius: 1px; }
.pvp-actions-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pvp-hint { font-size: 14px; }
.pvp-hint.is-err { color: var(--c-red-d); font-weight: 700; }
/* ── question ── */
.pvp-question {
margin-top: 12px; padding: 20px 18px;
border: 2px solid var(--border); border-radius: 18px;
background: var(--panel);
}
.pvp-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pvp-q-counter { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-soft); }
/* SVG countdown ring */
.pvp-clock-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.pvp-clock-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.pvp-clock-track { fill: none; stroke: var(--border); stroke-width: 3.5; }
.pvp-clock-fill {
fill: none; stroke: var(--c-mint-d);
stroke-width: 3.5; stroke-linecap: round;
stroke-dasharray: 119.4; stroke-dashoffset: 0;
transition: stroke-dashoffset .18s linear, stroke .4s;
}
.pvp-clock-fill.is-urgent { stroke: var(--c-red-d); }
.pvp-q-clock {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-display);
font-size: 16px; font-weight: 800;
color: var(--ink); line-height: 1;
}
.pvp-q-word {
font-family: var(--font-display);
font-size: 42px; font-weight: 800;
color: var(--ink); text-align: center;
margin: 14px 0 20px; letter-spacing: .03em;
}
.pvp-q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .pvp-q-options { grid-template-columns: 1fr; } }
.pvp-opt {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border: 2px solid var(--border); border-radius: 14px;
background: var(--bg); cursor: pointer; font-size: 16px; text-align: left;
transition: transform .08s, border-color .12s, background .12s, box-shadow .12s;
}
.pvp-opt:hover:not(:disabled) {
border-color: var(--c-mint); background: var(--t-mint);
transform: translateY(-1px); box-shadow: 0 4px 14px rgba(100,220,180,.15);
}
.pvp-opt:disabled { cursor: not-allowed; opacity: .8; }
.pvp-opt-key {
width: 30px; height: 30px; border-radius: 8px;
background: var(--border);
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.pvp-opt.is-mine { border-color: var(--c-sky-d); background: var(--t-sky); }
.pvp-opt.is-correct { border-color: var(--c-mint-d); background: var(--t-mint); box-shadow: 0 0 16px rgba(100,220,180,.2); }
.pvp-opt.is-wrong { border-color: var(--c-red-d); background: var(--t-red); }
.pvp-q-feedback { margin-top: 12px; }
/* ── done ── */
.pvp-done { text-align: center; padding: 28px 20px 24px; }
.pvp-done-trophy {
font-size: 54px; line-height: 1; margin-bottom: 12px;
animation: trophyPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes trophyPop {
from { transform: scale(0) rotate(-8deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
.pvp-done-headline {
font-family: var(--font-display);
font-size: 24px; font-weight: 800;
color: var(--ink); margin-bottom: 18px;
}
.pvp-result-tag {
display: inline-block;
padding: 6px 18px; border-radius: 999px;
font-size: 17px; font-weight: 800;
}
.pvp-result-tag.win { background: var(--c-mint-d); color: #fff; }
.pvp-result-tag.lose { background: var(--c-red-d); color: #fff; }
.pvp-result-tag.tie { background: var(--c-yellow-d); color: #fff; }
.pvp-done-scores {
display: flex; justify-content: center;
align-items: center; gap: 18px; margin: 4px 0 26px;
font-family: var(--font-display);
}
.pvp-final-score { text-align: center; }
.pvp-final-name { font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }
.pvp-final-pts { font-size: 44px; font-weight: 800; line-height: 1; color: var(--ink); }
.pvp-final-pts.is-winner { color: var(--c-mint-d); }
.pvp-done-vs { font-size: 18px; color: var(--border); font-weight: 800; }
/* ============================================================
Full-page Auth (Cartoon Tactile · 仿 Stitch Playful 设计稿)
仅在未登录时挂载；挂载期间会强制关闭 luxe.css 覆盖层，
登录页有两套皮肤：cartoon 主题 → 手绘涂鸦，luxe 主题 → 复古波普。
皮肤由 #auth-page 上的 .auth-skin-doodle / .auth-skin-retro 切换。
============================================================ */
body.is-auth-page { overflow: hidden; }
body.is-auth-page .app { display: none !important; }
/* ---- 通用骨架（两套皮肤共享布局，外观由 .auth-skin-* 覆盖）---- */
.auth-page {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
padding: 24px;
overflow: auto;
isolation: isolate;
}
.auth-page::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
.auth-page-card {
position: relative;
width: 100%;
max-width: 414px;
padding: 30px 34px;
animation: authCardIn .5s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes authCardIn {
from { opacity: 0; transform: translateY(16px) scale(.985); }
to { opacity: 1; transform: none; }
}
.auth-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 18px;
}
.auth-mascot { display: grid; place-items: center; margin-bottom: 6px; }
.auth-mascot svg { display: block; }
.auth-brand { margin: 0; line-height: 1; }
.auth-tagline { margin: 6px 0 0; }
.auth-form-full { display: flex; flex-direction: column; gap: 13px; }
.auth-field-full { display: flex; flex-direction: column; gap: 6px; }
.auth-field-row {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 4px;
}
.auth-field-help { background: none; border: 0; padding: 0; cursor: pointer; }
.auth-field-help:hover { text-decoration: underline; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap .auth-input-icon {
position: absolute;
left: 13px;
display: grid;
place-items: center;
pointer-events: none;
}
.auth-input-wrap .auth-input-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.auth-input-full {
width: 100%;
height: 50px;
padding: 0 14px 0 40px;
font-family: 'Nunito', sans-serif;
font-size: 15px;
font-weight: 700;
outline: none;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.auth-error-full {
padding: 9px 13px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
}
.auth-cta {
width: 100%;
height: 52px;
cursor: pointer;
transition: transform .09s, filter .12s, opacity .12s;
}
.auth-cta:hover:not(:disabled) { filter: brightness(1.04); }
.auth-cta:active:not(:disabled) { transform: translateY(2px); }
.auth-cta:disabled { opacity: .6; cursor: progress; }
.auth-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 11px;
margin: 18px 0;
}
.auth-divider span { font-size: 13.5px; font-weight: 800; letter-spacing: .04em; }
.auth-divider hr { margin: 0; }
.auth-google {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: transform .09s, filter .12s, background-color .12s;
}
.auth-google:active { transform: translateY(2px); }
.auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-footer-line { text-align: center; margin-top: 20px; }
.auth-swap { background: none; border: 0; padding: 0; margin-left: 4px; cursor: pointer; }
.auth-swap:hover { text-decoration: underline; }
.auth-form-full.is-swapping { animation: authSwap .35s ease both; }
@keyframes authSwap {
0% { opacity: 1; transform: translateX(0); }
45% { opacity: 0; transform: translateX(-8px); }
55% { opacity: 0; transform: translateX(8px); }
100% { opacity: 1; transform: translateX(0); }
}
/* ============ 皮肤 A — 手绘涂鸦（cartoon 主题）============ */
.auth-skin-doodle { font-family: 'Nunito', sans-serif; color: #3c3c3c; }
.auth-skin-doodle.auth-page::before {
background-color: #fff8ee;
background-image: radial-gradient(circle at 1.5px 1.5px, rgba(60,60,60,.05) 1.5px, transparent 1.7px);
background-size: 22px 22px;
}
.auth-skin-doodle .auth-page-card {
background: #fffdf6;
border-radius: 32px 26px 34px 24px;
box-shadow: 7px 9px 0 rgba(60,60,60,.10), 0 20px 44px -20px rgba(60,60,60,.30);
}
.auth-skin-doodle .auth-brand {
font-family: 'Fredoka', sans-serif;
font-size: 30px;
font-weight: 700;
letter-spacing: -.01em;
color: #58cc02;
margin-top: 4px;
}
.auth-skin-doodle .auth-tagline { font-size: 14px; font-weight: 700; color: #a59a83; }
.auth-skin-doodle .auth-field-label {
font-family: 'Fredoka', sans-serif;
font-size: 13.5px;
font-weight: 600;
color: #6b6357;
}
.auth-skin-doodle .auth-field-help {
font-family: 'Fredoka', sans-serif;
font-size: 13px;
color: #1cb0f6;
}
.auth-skin-doodle .auth-input-icon { color: #a8a194; }
.auth-skin-doodle .auth-input-full {
background: #fff;
border: 2.5px solid #3a3a3a;
border-radius: 15px 12px 16px 13px;
color: #3c3c3c;
}
.auth-skin-doodle .auth-input-full::placeholder { color: #bdb6a8; font-weight: 600; }
.auth-skin-doodle .auth-input-full:focus {
border-color: #58cc02;
box-shadow: 3px 3px 0 rgba(88,204,2,.22);
}
.auth-skin-doodle .auth-error-full { background: #ffe0e0; color: #c0392b; }
.auth-skin-doodle .auth-cta {
background: #58cc02;
color: #fff;
border: 2.5px solid #3a3a3a;
border-radius: 16px 14px 17px 13px;
font-family: 'Fredoka', sans-serif;
font-size: 18px;
font-weight: 600;
box-shadow: 4px 4px 0 #3a3a3a;
}
.auth-skin-doodle .auth-divider span { color: #a8a194; }
.auth-skin-doodle .auth-divider hr {
border: 0;
border-top: 2.5px dashed #e6ddc8;
height: 0;
background: none;
}
.auth-skin-doodle .auth-google {
background: #fff;
color: #3a3a3a;
border: 2.5px solid #3a3a3a;
border-radius: 15px 13px 16px 12px;
font-family: 'Nunito', sans-serif;
font-size: 14.5px;
font-weight: 800;
box-shadow: 3px 3px 0 #3a3a3a;
}
.auth-skin-doodle .auth-footer-line { font-size: 13.5px; font-weight: 700; color: #a59a83; }
.auth-skin-doodle .auth-swap {
font-family: 'Fredoka', sans-serif;
font-size: 14px;
font-weight: 500;
color: #1cb0f6;
}
/* ============ 皮肤 B — 复古波普（luxe 主题）============ */
.auth-skin-retro { font-family: 'Nunito', sans-serif; color: #f0e9d4; }
.auth-skin-retro.auth-page::before {
background-color: #0e0e0c;
background-image: radial-gradient(circle at 2px 2px, rgba(0,212,255,.10) 2px, transparent 2.4px);
background-size: 17px 17px;
}
.auth-skin-retro .auth-page-card {
background: #1e1d19;
border-radius: 22px;
box-shadow: 0 0 44px rgba(0,212,255,.10), 0 30px 64px -22px #000;
}
.auth-skin-retro .auth-brand {
font-family: 'Lilita One', cursive;
font-size: 34px;
font-weight: 400;
letter-spacing: .03em;
color: #f5c518;
text-shadow: 0 0 18px rgba(0,212,255,.4);
margin-top: 6px;
}
.auth-skin-retro .auth-tagline {
font-size: 13.5px;
font-weight: 800;
color: #b3a26a;
text-transform: uppercase;
letter-spacing: .07em;
}
.auth-skin-retro .auth-field-label {
font-family: 'Lilita One', cursive;
font-size: 14px;
color: #e8d9a0;
letter-spacing: .05em;
text-transform: uppercase;
}
.auth-skin-retro .auth-field-help {
font-family: 'Nunito', sans-serif;
font-size: 13px;
font-weight: 900;
color: #f5c518;
text-transform: uppercase;
}
.auth-skin-retro .auth-input-icon { color: #8a8268; }
.auth-skin-retro .auth-input-full {
background: #2a2924;
border: 2.5px solid #3d3b32;
border-radius: 12px;
color: #f0e9d4;
}
.auth-skin-retro .auth-input-full::placeholder { color: #6a6657; font-weight: 600; }
.auth-skin-retro .auth-input-full:focus {
border-color: #f5c518;
background: #322f24;
}
.auth-skin-retro .auth-error-full { background: #3a2018; color: #ff9d7a; }
.auth-skin-retro .auth-cta {
background: #f5c518;
color: #1a1810;
border: 2.5px solid #0e0e0c;
border-radius: 13px;
font-family: 'Lilita One', cursive;
font-size: 20px;
letter-spacing: .07em;
box-shadow: 4px 5px 0 #000;
}
.auth-skin-retro .auth-divider span {
color: #8a8268;
text-transform: uppercase;
letter-spacing: .08em;
}
.auth-skin-retro .auth-divider hr {
border: 0;
height: 2.5px;
background: #3a382f;
border-radius: 2px;
}
.auth-skin-retro .auth-google {
background: #2a2924;
color: #f0e9d4;
border: 2.5px solid #3d3b32;
border-radius: 13px;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 900;
}
.auth-skin-retro .auth-footer-line { font-size: 13.5px; font-weight: 800; color: #b3a26a; }
.auth-skin-retro .auth-swap {
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 900;
color: #f5c518;
}
@media (max-width: 480px) {
.auth-page { padding: 14px; }
.auth-page-card { padding: 26px 22px; }
.auth-skin-doodle .auth-brand { font-size: 26px; }
.auth-skin-retro .auth-brand { font-size: 30px; }
}
/* ---------- 内容来源 / 鸣谢页 ---------- */
.credits-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.credits-card {
background: var(--panel);
border-radius: var(--radius-lg);
padding: 18px 20px;
}
.credits-card-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.credits-name { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.credits-license {
font-size: 14px; color: var(--c-sky-d);
background: rgba(0,0,0,.04); border-radius: 999px; padding: 3px 10px;
}
.credits-row { display: flex; gap: 10px; font-size: 15px; line-height: 1.7; }
.credits-k { color: var(--muted); flex: 0 0 38px; }
.credits-v { color: var(--ink-soft); flex: 1; }
.credits-link {
display: inline-block; margin-top: 10px; font-size: 14px;
color: var(--c-sky-d); text-decoration: none;
}
.credits-link:hover { text-decoration: underline; }
.credits-foot {
font-size: 14px; line-height: 1.8; color: var(--muted);
margin: 6px 2px 0;
}
.sb-foot-link {
display: block; text-align: center;
font-size: 14px; color: var(--muted); text-decoration: none;
}
.sb-foot-link:hover { color: var(--ink-soft); }
.sb-bottom {
margin-top: auto;
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ============================================
好友页 — #/friends
============================================ */
.fr-count-pill { font-family: var(--font-display); }
/* 未登录引导 */
.fr-login {
text-align: center; padding: 56px 24px; max-width: 420px; margin: 30px auto;
}
.fr-login-emblem {
width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--t-mint); color: var(--c-mint-d);
}
.fr-login-emblem .ic { width: 38px; height: 38px; }
.fr-login-title { font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.fr-login-sub { font-size: 15px; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.7; }
.fr-login-btn { font-size: 16px; padding: 11px 26px; }
/* 搜索面板 */
.fr-search { background: var(--panel); border-radius: var(--radius); padding: 16px; margin-bottom: 8px; }
.fr-search-box {
display: flex; align-items: center; gap: 10px;
background: var(--bg); border-radius: 12px; padding: 10px 14px;
}
.fr-search-box .ic { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.fr-search-box input {
flex: 1; border: none; background: transparent; outline: none;
font-size: 15px; color: var(--ink); font-family: inherit;
}
.fr-search-results { margin-top: 8px; }
.fr-search-results:empty { margin-top: 0; }
/* 分区 */
.fr-section { margin-top: 22px; }
.fr-h {
font-size: 15px; color: var(--ink-soft); font-weight: 700;
margin: 0 0 10px 2px; display: flex; align-items: center; gap: 8px;
}
.fr-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
background: var(--c-red); color: #fff; font-size: 14px; font-weight: 800;
}
/* 好友行 */
.fr-row {
display: flex; align-items: center; gap: 12px;
background: var(--panel); border-radius: var(--radius);
padding: 12px 14px; margin-bottom: 8px;
}
.fr-avatar {
position: relative; flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 50%;
background: var(--t-sky); color: var(--c-sky-d);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800; font-family: var(--font-display);
}
.fr-dot {
position: absolute; right: -1px; bottom: -1px;
width: 13px; height: 13px; border-radius: 50%;
background: var(--border-h); box-shadow: 0 0 0 3px var(--panel);
}
.fr-dot.is-on { background: var(--c-mint); }
.fr-meta { flex: 1; min-width: 0; }
.fr-name {
font-size: 16px; font-weight: 700; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-sub {
font-size: 14px; color: var(--muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-row .btn.sm { flex: 0 0 auto; }
.fr-empty {
font-size: 14px; color: var(--muted); padding: 14px 14px;
background: var(--panel); border-radius: var(--radius); margin: 0;
}
/* ============================================
个人主页 — #/profile
============================================ */
.pf-id {
display: flex; align-items: center; gap: 16px;
background: var(--panel); border-radius: var(--radius);
padding: 18px 18px; margin-bottom: 4px;
}
.pf-avatar {
flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
background: var(--t-mint); color: var(--c-mint-d);
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 800; font-family: var(--font-display);
}
.pf-id-meta { min-width: 0; }
.pf-name { font-size: 19px; font-weight: 800; color: var(--ink); }
.pf-email {
font-size: 14px; color: var(--muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 段位卡 */
.pf-rank-card {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: var(--panel); border-radius: var(--radius); padding: 18px;
}
.pf-rating {
flex: 0 0 auto; text-align: center;
padding: 6px 22px 6px 6px;
}
.pf-rating-num {
font-size: 46px; font-weight: 800; line-height: 1;
color: var(--c-grape-d); font-family: var(--font-display);
}
.pf-rating-cap { font-size: 14px; color: var(--muted); margin-top: 6px; }
.pf-rank-stats {
flex: 1; min-width: 240px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px;
}
.pf-rs { text-align: center; }
.pf-rs b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }
.pf-rs span { font-size: 14px; color: var(--muted); }
/* 学习成就 */
.pf-ach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-ach-tile {
background: var(--panel); border-radius: var(--radius);
padding: 16px 10px; text-align: center;
}
.pf-ach-num {
font-size: 24px; font-weight: 800; color: var(--ink);
font-family: var(--font-display);
}
.pf-ach-cap { font-size: 14px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .pf-ach { grid-template-columns: repeat(2, 1fr); } }
/* 最近对战 */
.pf-match {
display: flex; align-items: center; gap: 12px;
background: var(--panel); border-radius: var(--radius);
padding: 11px 14px; margin-bottom: 7px;
}
.pf-match-tag {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800;
}
.pf-match-win .pf-match-tag { background: var(--t-mint); color: var(--c-mint-d); }
.pf-match-loss .pf-match-tag { background: var(--t-red); color: var(--c-red-d); }
.pf-match-draw .pf-match-tag { background: var(--border); color: var(--ink-soft); }
.pf-match-vs { flex: 1; font-size: 15px; color: var(--ink); }
.pf-match-score {
flex: 0 0 auto; font-size: 16px; font-weight: 800; color: var(--ink-soft);
font-family: var(--font-display);
}
/* ============================================
排行榜 — #/leaderboard
============================================ */
.lb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.lb-tab {
font-size: 15px; font-weight: 700; font-family: inherit;
padding: 8px 18px; border-radius: 999px; cursor: pointer;
border: none; background: var(--panel); color: var(--ink-soft);
}
.lb-tab.is-active { background: var(--c-grape); color: #fff; }
.lb-row {
display: flex; align-items: center; gap: 12px;
background: var(--panel); border-radius: var(--radius);
padding: 11px 14px; margin-bottom: 7px;
}
.lb-row.is-me { background: var(--t-grape); }
.lb-rank {
flex: 0 0 auto; width: 30px; text-align: center;
font-size: 16px; font-weight: 800; color: var(--ink-soft);
font-family: var(--font-display);
}
.lb-rank-1 { color: var(--c-yellow-d); }
.lb-rank-2 { color: #9aa0a6; }
.lb-rank-3 { color: var(--c-orange-d); }
.lb-avatar { width: 38px; height: 38px; font-size: 16px; }
.lb-rating {
flex: 0 0 auto; text-align: right;
font-size: 19px; font-weight: 800; color: var(--c-grape-d);
font-family: var(--font-display); line-height: 1.1;
}
.lb-rating span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.lb-me-tag {
font-size: 13px; font-weight: 800; color: #fff; background: var(--c-grape);
padding: 1px 7px; border-radius: 8px; vertical-align: 1px;
}
/* ============================================
约战邀请横幅 — 全站浮层
============================================ */
.pvp-invite-banner {
position: fixed; left: 50%; bottom: 24px; z-index: 1200;
transform: translate(-50%, 140%); transition: transform .32s cubic-bezier(.22,.94,.4,1.2);
display: flex; align-items: center; gap: 16px;
background: var(--panel); border-radius: var(--radius-lg);
padding: 14px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
max-width: 440px; width: calc(100% - 32px);
}
.pvp-invite-banner.show { transform: translate(-50%, 0); }
.pib-text { flex: 1; min-width: 0; }
.pib-text strong { font-size: 16px; color: var(--ink); }
.pib-sub { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.pib-actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* PVP 结算页：段位分变化 */
.pvp-rating-delta {
font-size: 15px; color: var(--ink-soft); font-weight: 700;
margin: 6px 0 2px; text-align: center;
}
.pvp-rating-delta span { font-family: var(--font-display); }
.pvp-rating-delta.up span { color: var(--c-mint-d); }
.pvp-rating-delta.down span { color: var(--c-red-d); }
/* 好友页：离线胶囊 */
.fr-offline-pill { background: var(--bg); color: var(--muted); }
/* 进度页社交卡片（真实数据填充） */
.pgd-avatar { position: relative; }
.pgd-social-empty { font-size: 14px; color: var(--muted); padding: 8px 2px; }
.pgd-friends-count {
font-size: 14px; color: var(--muted); margin-bottom: 8px; padding: 0 2px;
}
/* PVP 快速匹配卡（横跨整行） */
.pvp-quickmatch {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: var(--t-mint); border-radius: var(--radius-lg);
padding: 20px 22px;
}
.pvp-qm-text { flex: 1; min-width: 200px; }
.pvp-qm-text h3 { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.pvp-qm-text p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.pvp-qm-btn { flex: 0 0 auto; }
.pvp-qm-btn.is-matching {
background: var(--c-orange);
box-shadow: 0 4px 0 0 var(--c-orange-d);
}
/* ============================================
首页 v2（按新版三栏设计）
============================================ */
.home-v2 {
display: flex;
flex-direction: column;
gap: 22px;
width: 100%;
}
.home-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 12px 0 0;
}
.home-hero-text { flex: 1; min-width: 0; }
.home-greet {
font-family: var(--font-display, inherit);
font-size: 36px;
font-weight: 800;
color: var(--ink, #1c1b1f);
line-height: 1.2;
margin: 0 0 10px;
}
.home-sub {
font-size: 15px;
color: var(--ink-soft, #777);
margin: 0;
}
.home-hero-deco {
width: 200px;
height: 120px;
flex-shrink: 0;
}
/* 4 个 stats 卡 */
.home-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
}
.home-stat {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: var(--panel, #fff);
border-radius: 20px;
box-shadow: 0 4px 14px -10px rgba(0,0,0,.14);
}
.home-stat-ic {
width: 52px; height: 52px;
display: grid; place-items: center;
border-radius: 14px;
background: var(--t-mint, #d7f7c2);
color: var(--c-mint, #58cc02);
flex-shrink: 0;
}
.home-stat-ic .ic { width: 28px; height: 28px; }
.home-stat[data-tone="coral"] .home-stat-ic { background: var(--t-coral, #ffe0d6); color: var(--c-coral, #ff6b6b); }
.home-stat[data-tone="grape"] .home-stat-ic { background: var(--t-grape, #e8dcfb); color: var(--c-grape, #8a5cf0); }
.home-stat[data-tone="yellow"] .home-stat-ic { background: var(--t-yellow, #fff3c4); color: var(--c-yellow, #ffc800); }
.home-stat-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.home-stat-num {
font-family: var(--font-display, inherit);
font-size: 26px;
font-weight: 800;
color: var(--ink, #1c1b1f);
line-height: 1.1;
}
.home-stat-cap {
font-size: 13.5px;
color: var(--ink-soft, #777);
}
/* 大 CTA */
.home-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 18px 24px;
background: var(--c-mint, #58cc02);
color: #fff;
border: none;
border-radius: 16px;
font-family: var(--font-display, inherit);
font-size: 20px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 6px 0 0 #4ba002, 0 8px 18px -6px rgba(88,204,2,.55);
transition: transform .1s ease, box-shadow .12s ease;
}
.home-cta:hover { background: #62d605; }
.home-cta:active {
transform: translateY(4px);
box-shadow: 0 2px 0 0 #4ba002, 0 4px 12px -6px rgba(88,204,2,.5);
}
.home-cta-ic {
width: 28px; height: 28px;
display: grid; place-items: center;
background: rgba(255,255,255,.18);
border-radius: 50%;
}
.home-cta-ic .ic { width: 14px; height: 14px; fill: #fff; stroke: #fff; }
/* 学习路径 */
.home-path {
padding: 28px 32px 36px;
background: var(--panel, #fff);
border-radius: 20px;
box-shadow: 0 4px 14px -10px rgba(0,0,0,.14);
}
.home-path-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.home-path-ttl {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--font-display, inherit);
font-size: 17px;
font-weight: 800;
color: var(--ink, #1c1b1f);
}
.home-path-ttl .ic {
width: 22px; height: 22px;
color: var(--c-mint, #58cc02);
}
.home-path-more {
font-size: 13px;
color: var(--ink-soft, #777);
text-decoration: none;
background: var(--t-mint, #f0f9e8);
padding: 6px 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.home-path-more .ic { width: 14px; height: 14px; }
.home-path-more:hover { background: var(--t-yellow, #fff3c4); color: var(--ink, #1c1b1f); }
.home-path-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
position: relative;
}
.home-path-row::before {
content: '';
position: absolute;
top: 60px;
left: 12%;
right: 12%;
height: 3px;
background: repeating-linear-gradient(
to right,
var(--c-mint, #58cc02) 0 10px,
transparent 10px 20px
);
opacity: .55;
z-index: 0;
}
.step-num { left: calc(50% - 52px); }
.home-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 4px 8px;
text-decoration: none;
position: relative;
z-index: 1;
transition: transform .15s ease;
}
.home-step:hover { transform: translateY(-3px); }
.step-num {
position: absolute;
top: 4px;
left: calc(50% - 44px);
width: 26px;
height: 26px;
display: grid; place-items: center;
background: var(--c-mint, #58cc02);
color: #fff;
border-radius: 50%;
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 13px;
border: 3px solid var(--panel, #fff);
z-index: 2;
box-shadow: 0 2px 4px -1px rgba(88,204,2,.35);
}
.step-circle {
position: relative;
width: 92px;
height: 92px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--t-mint, #d7f7c2);
color: var(--c-mint, #58cc02);
margin-top: 14px;
transition: transform .15s ease;
}
.step-circle .ic { width: 38px; height: 38px; }
.step-name { font-size: 16px; margin-top: 10px; }
.step-tip { font-size: 13px; }
/* 圆形周围装饰小点 */
.step-circle::before {
content: '';
position: absolute;
top: 6px; right: -10px;
width: 5px; height: 5px;
background: currentColor;
border-radius: 50%;
opacity: .35;
}
.step-circle::after {
content: '';
position: absolute;
bottom: 10px; left: -8px;
width: 4px; height: 4px;
background: currentColor;
border-radius: 50%;
opacity: .25;
}
.home-step[data-tone="sky"] .step-circle { background: var(--t-sky, #ddf4ff); color: var(--c-sky, #1cb0f6); }
.home-step[data-tone="grape"] .step-circle { background: var(--t-grape, #e8dcfb); color: var(--c-grape, #8a5cf0); }
.home-step[data-tone="yellow"] .step-circle { background: var(--t-yellow, #fff3c4); color: var(--c-yellow, #ffc800); }
.home-step[data-tone="coral"] .step-circle { background: var(--t-coral, #ffe0d6); color: var(--c-coral, #ff6b6b); }
.step-name {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 15px;
color: var(--ink, #1c1b1f);
margin-top: 6px;
}
.step-tip {
font-size: 12px;
color: var(--ink-soft, #777);
}
/* 学习小贴士 */
.home-tip {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--t-yellow, #fff8d6);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform .12s ease;
}
.home-tip:hover { transform: translateY(-2px); }
.home-tip-ic {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 12px;
background: rgba(255,255,255,.7);
color: var(--c-yellow, #ffc800);
flex-shrink: 0;
}
.home-tip-ic .ic { width: 22px; height: 22px; }
.home-tip-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.home-tip-ttl {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 14px;
color: var(--ink, #1c1b1f);
}
.home-tip-txt {
font-size: 13px;
color: var(--ink-soft, #555);
line-height: 1.5;
}
.home-tip-arrow {
font-size: 18px;
color: var(--ink-soft, #999);
flex-shrink: 0;
}
@media (max-width: 760px) {
.home-greet { font-size: 24px; }
.home-path-row { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.home-path-row::before { display: none; }
.step-circle { width: 56px; height: 56px; }
}
/* 首页底栏：填充主内容下方的视觉空白，纯品牌签名 */
.home-footer {
display: flex;
align-items: center;
gap: 20px;
padding: 28px 32px;
margin-top: 28px;
background: var(--t-mint, #eaf6e0);
border-radius: 18px;
color: var(--ink-soft, #6a7a70);
}
.home-footer-mascot {
width: 88px;
height: 88px;
flex-shrink: 0;
color: var(--c-mint, #58cc02);
}
.home-footer-mascot svg { width: 100%; height: 100%; display: block; }
.home-footer-text { display: flex; flex-direction: column; gap: 6px; }
.home-footer-slogan {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 18px;
color: var(--ink, #1c1b1f);
line-height: 1.4;
}
.home-footer-meta {
font-size: 13px;
color: var(--ink-soft, #8a9990);
}
@media (max-width: 760px) {
.home-footer { padding: 22px 20px; gap: 14px; }
.home-footer-mascot { width: 68px; height: 68px; }
.home-footer-slogan { font-size: 16px; }
}
/* 右侧栏底部签名 */
.aside-footer {
margin-top: auto;
padding: 18px 12px 4px;
text-align: center;
}
.aside-footer-brand {
font-family: var(--font-display, inherit);
font-weight: 800;
font-size: 15px;
color: var(--c-mint, #58cc02);
letter-spacing: .2px;
}
.aside-footer-tag {
margin-top: 2px;
font-size: 13px;
color: var(--ink-soft, #8a9990);
}
/* 62. 答对毛玻璃卡（Liquid Glass 风，仅 luxe 主题用） */
.lx-correct-glass {
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;
pointer-events: none;
padding: 22px 30px 22px 24px;
border-radius: 22px;
background: rgba(255, 255, 255, .14);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow:
0 14px 40px rgba(0, 0, 0, .25),
0 4px 14px rgba(255, 255, 255, .08),
inset 0 1px 0 rgba(255, 255, 255, .4),
inset 0 -1px 0 rgba(255, 255, 255, .08),
inset 0 0 0 1px rgba(255, 255, 255, .14);
display: flex;
align-items: center;
gap: 16px;
opacity: 0;
transform: translate(-50%, calc(-50% + 24px)) scale(.94);
}
.lx-correct-glass-medal {
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, #e6ffe6 100%);
box-shadow:
0 6px 14px rgba(255, 255, 255, .35),
inset 0 -2px 4px rgba(0, 0, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .9);
display: flex;
align-items: center;
justify-content: center;
}
.lx-correct-glass-medal svg {
width: 28px; height: 28px;
color: #2fbe2f;
}
.lx-correct-glass-text {
display: flex;
flex-direction: column;
gap: 3px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.lx-correct-glass-h {
font-weight: 700;
font-size: 21px;
letter-spacing: -.2px;
line-height: 1.1;
}
.lx-correct-glass-sub {
font-size: 13px;
color: rgba(255, 255, 255, .82);
letter-spacing: .1px;
display: flex;
align-items: center;
gap: 8px;
}
.lx-correct-glass-dot {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, .6);
}
/* lx-correct-glass 进出场动画改由 JS element.animate() 驱动（见 showCorrectBadge）——
luxe 全局禁用 @keyframes，CSS 命名动画不能用 */
/* 61. 答对绿勾大徽章 —— 答题正确时屏幕中央闪一下，弹性进 + 自动消失 */
.lx-correct-badge {
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
border-radius: 50%;
background: var(--c-mint, #58cc02);
box-shadow:
0 10px 0 var(--c-mint-d, #4ba902),
0 18px 40px rgba(88, 204, 2, .35);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transform: scale(.3) rotate(-12deg);
}
.lx-correct-badge svg {
width: 64px;
height: 64px;
color: #fff;
}
/* lx-correct-badge 进出场动画改由 JS element.animate() 驱动（见 showCorrectBadge）——
luxe 全局禁用 @keyframes，CSS 命名动画不能用 */
/* 63. 答错全屏红闪 —— 答题错误时屏幕一道红光，配合已有的选项摇头。
淡出 + 自删一律由 JS 的 element.animate() 驱动，不用 @keyframes——
luxe 主题全局禁用 @keyframes，CSS 动画不播会让红光卡死不消。 */
.lx-wrong-flash {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
background: rgba(255, 60, 60, .26);
}
/* 64. 连击里程碑（3/5/10）：HUD 一道金光横扫 + MILESTONE 飘字 + 火苗 pill duang */
.lx-milestone-host { position: relative; overflow: visible; }
.lx-milestone-sweep {
position: absolute;
top: -6px; bottom: -6px; left: -30%;
width: 35%;
background: linear-gradient(110deg, transparent 0%, rgba(255, 200, 80, .55) 50%, transparent 100%);
transform: skewX(-15deg);
pointer-events: none;
border-radius: 8px;
z-index: 1;
animation: lx-ms-sweep .95s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes lx-ms-sweep {
0% { left: -40%; opacity: 1; }
100% { left: 135%; opacity: 1; }
}
.lx-milestone-toast {
position: absolute;
left: 50%; top: -24px;
transform: translateX(-50%);
padding: 4px 12px;
background: linear-gradient(135deg, #ff9600, #ffce6b);
color: #fff;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(255, 150, 0, .35);
pointer-events: none;
z-index: 2;
animation: lx-ms-toast 1.5s ease forwards;
}
@keyframes lx-ms-toast {
0% { opacity: 0; transform: translate(-50%, 14px); }
18% { opacity: 1; transform: translate(-50%, 0); }
78% { opacity: 1; transform: translate(-50%, -4px); }
100% { opacity: 0; transform: translate(-50%, -24px); }
}
.lx-milestone-pop { animation: lx-ms-pop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes lx-ms-pop {
0% { transform: scale(1); }
40% { transform: scale(1.22); }
100% { transform: scale(1); }
}
/* 66. 心心血条：quiz 失血系统 */
.hud-hearts { display: inline-flex; align-items: center; gap: 6px; }
.hud-hearts .heart {
width: 34px; height: 32px;
display: inline-block;
transition: transform .15s ease;
}
.hud-hearts .heart svg {
width: 100%; height: 100%; display: block;
}
.hud-hearts .heart.full svg path { fill: #ff4b4b; }
.hud-hearts .heart.empty svg path { fill: rgba(0, 0, 0, .14); }
.hud-hearts .heart.breaking {
animation: heart-break .6s cubic-bezier(.4, 0, .4, 1) forwards;
transform-origin: center;
}
@keyframes heart-break {
0% { transform: scale(1); }
30% { transform: scale(1.3); }
55% { transform: scale(.85) rotate(-8deg); }
100% { transform: scale(.8) rotate(0); opacity: .5; }
}
/* 65. 连击火苗 SVG：扁平单色实心，颜色靠 currentColor，按连击数变档 */
.lx-streak-flame {
width: 28px; height: 28px;
display: inline-block; vertical-align: -6px;
color: #c4c0b8; /* idle：纯灰 */
transition: color .3s ease, transform .3s ease;
}
#streak-pill[data-streak="lit"] .lx-streak-flame { color: #ffb86a; }
#streak-pill[data-streak="hot"] .lx-streak-flame {
color: #ff8a1c;
animation: flame-flicker 1.2s ease-in-out infinite;
}
#streak-pill[data-streak="super"] .lx-streak-flame {
width: 36px; height: 36px;
color: #ff6a00;
animation: flame-dance .55s ease-in-out infinite;
}
@keyframes flame-flicker {
0%, 100% { transform: scale(1) rotate(-2deg); }
50% { transform: scale(1.06) rotate(2deg); }
}
@keyframes flame-dance {
0%, 100% { transform: scale(1.04) rotate(-3deg); }
50% { transform: scale(1.10) rotate(3deg); }
}
/* HUD 文字色统一成深中性（让心和火做主角，文字退到背景） */
.hud-row #streak-pill,
.hud-row #score-pill { color: var(--ink, #3c3c3c); }
.hud-row #streak-pill .ic,
.hud-row #score-pill .ic { color: var(--ink-soft, #8a9990); }
/* ===== 题型扩展：听音选词 / 反向 MC ===== */
.quiz-listen-cue {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 4px 0 18px;
}
.quiz-listen-play {
font-size: 16px;
padding: 12px 22px;
}
.quiz-listen-hint {
font-size: 13px;
}
.quiz-listen-word {
font-family: var(--font-display, inherit);
font-weight: 700;
font-size: 38px;
letter-spacing: 0.2px;
}
/* ===== 题型扩展：拼写题 (renderSpell) ===== */
.quiz-spell {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.95fr);
gap: 28px;
align-items: start;
}
.quiz-spell-main { min-width: 0; }
.quiz-spell-progress { margin: 0 0 22px; }
.quiz-spell-prog-meta {
margin: 0 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: .12em;
}
.quiz-spell-prog-meta strong { color: var(--ink); margin: 0 2px; }
.quiz-spell-prog-bar {
height: 4px;
border-radius: 999px;
background: rgba(0,0,0,.08);
overflow: hidden;
}
.quiz-spell-prog-fill {
height: 100%;
background: var(--c-sky, #6cc1ff);
border-radius: 999px;
transition: width .3s ease;
}
.quiz-spell-cap {
margin: 0 0 14px;
font-size: 19px;
font-weight: 700;
color: var(--ink);
font-family: var(--font-display, inherit);
}
.quiz-spell-word {
margin: 0 0 22px;
font-size: 76px;
font-weight: 800;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--ink);
font-family: var(--font-display, inherit);
}
.quiz-spell-ipa {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 22px;
color: var(--ink-soft);
font-size: 16px;
}
.quiz-spell-pos { font-style: italic; }
.quiz-spell-ph { letter-spacing: .03em; }
.quiz-spell-listen { margin-left: 4px; }
.quiz-spell-input {
width: 100%;
padding: 22px 26px !important;
font-size: 24px !important;
border-radius: 14px !important;
border: 1px solid rgba(0,0,0,.12) !important;
background: rgba(0,0,0,.02) !important;
letter-spacing: 2px;
}
.quiz-spell-input::placeholder {
color: rgba(0,0,0,.3);
letter-spacing: .04em;
}
.quiz-spell-hint { margin: 14px 0 22px; }
.quiz-spell-hint-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
padding: 4px 0;
color: var(--ink-soft);
font-size: 14px;
cursor: pointer;
}
.quiz-spell-hint-btn:hover { color: var(--c-yellow-d, #d49b00); }
.quiz-spell-hint-btn svg { color: var(--c-yellow, #ffc800); }
.quiz-spell-actions {
display: flex;
gap: 14px;
margin: 0;
}
.btn.quiz-spell-submit {
padding: 16px 38px;
font-size: 17px;
font-weight: 700;
min-width: 160px;
}
.btn.quiz-spell-skip {
padding: 16px 26px;
font-size: 15px;
}
/* 右侧栏：装饰图 + 小提示 */
.quiz-spell-side {
display: flex;
flex-direction: column;
gap: 18px;
}
.quiz-spell-deco {
position: relative;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.quiz-spell-deco-img {
width: 100%;
max-width: 360px;
object-fit: contain;
filter: drop-shadow(0 14px 36px rgba(201,168,76,.22));
}
.quiz-spell-tip {
padding: 18px 20px;
border-radius: 14px;
background: var(--t-yellow, rgba(255,200,0,.12));
}
.quiz-spell-tip-title {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
color: var(--c-yellow-d, #d49b00);
letter-spacing: .06em;
}
.quiz-spell-tip-text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink);
}
@media (max-width: 980px) {
.quiz-spell { grid-template-columns: 1fr; }
.quiz-spell-side { flex-direction: row; gap: 14px; }
.quiz-spell-deco { flex: 1; aspect-ratio: auto; height: 140px; }
.quiz-spell-tip { flex: 1.2; }
.quiz-spell-word { font-size: 56px; }
}
@media (max-width: 640px) {
.quiz-spell-side { flex-direction: column; }
.quiz-spell-word { font-size: 44px; }
.quiz-spell-input { padding: 18px 20px !important; font-size: 20px !important; }
}
/* ===== 题型扩展：词义连连看 ===== */
.match-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 8px 0 4px;
}
.match-col {
display: flex;
flex-direction: column;
gap: 10px;
}
.match-cell {
padding: 14px 16px;
border-radius: 14px;
background: var(--t-sky, #ddf4ff);
color: var(--ink, #3c3c3c);
font-family: var(--font-display, inherit);
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: transform 0.16s ease, background 0.16s ease, outline 0.16s ease;
text-align: center;
border: 0;
outline: 3px solid transparent;
min-height: 52px;
}
.match-cell:hover:not(:disabled):not(.matched) {
transform: translateY(-2px);
}
.match-cell.selected {
background: #fff4c2;
outline-color: var(--c-yellow, #ffc800);
}
.match-cell.matched {
background: var(--t-mint, #d7f7c2);
color: var(--c-mint-d, #4ca100);
cursor: default;
opacity: 0.72;
}
.match-cell.wrong {
background: var(--t-red, #ffd6d6);
outline-color: var(--c-red, #ff4b4b);
animation: matchShake 0.4s ease;
}
.match-cell.shake { animation: matchShake 0.4s ease; }
@keyframes matchShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-5px); }
40%, 80% { transform: translateX(5px); }
}
.match-status {
text-align: center;
font-family: var(--font-display, inherit);
font-weight: 700;
margin: 14px 0 0;
color: var(--ink-soft, #888);
font-size: 14px;
}
.match-status strong { color: var(--c-mint-d, #4ca100); }
/* —— 配对成功瞬间反馈：Duolingo 全套（双格弹跳 + 光线 + 钩钩 + +10 飘字） —— */
.match-cell.match-burst { animation: matchBurst 0.42s cubic-bezier(.34,1.56,.64,1); }
@keyframes matchBurst {
0% { transform: scale(1); }
35% { transform: scale(1.12); }
65% { transform: scale(.96); }
100% { transform: scale(1); }
}
.match-fx-layer {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9998;
overflow: hidden;
}
.match-beam {
position: fixed;
height: 3px;
background: linear-gradient(90deg,
rgba(255,216,107,0) 0%,
rgba(255,216,107,.9) 25%,
#fff7c8 50%,
rgba(255,216,107,.9) 75%,
rgba(255,216,107,0) 100%);
box-shadow: 0 0 18px rgba(255,216,107,.9), 0 0 36px rgba(255,216,107,.55);
border-radius: 2px;
pointer-events: none;
transform-origin: 0 50%;
will-change: transform, opacity;
}
.match-check {
position: fixed;
width: 30px; height: 30px;
margin: -15px 0 0 -15px;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #fff5c8 0%, #ffd86b 45%, #c9a84c 100%);
display: flex; align-items: center; justify-content: center;
color: #2b1d04;
box-shadow: 0 0 22px rgba(255,216,107,.95), 0 4px 16px rgba(0,0,0,.35);
pointer-events: none;
will-change: transform, opacity;
}
.match-check svg { width: 18px; height: 18px; }
.match-plus {
position: fixed;
font-family: var(--font-display, ui-monospace, monospace);
font-weight: 800;
font-size: 22px;
color: #ffd86b;
text-shadow: 0 0 14px rgba(255,216,107,.8), 0 2px 6px rgba(0,0,0,.4);
pointer-events: none;
transform: translate(-50%, 0);
will-change: transform, opacity;
}
/* ============================================
Mobile（≤760px）样式最终覆盖层
——必须在文件末尾，靠 CSS cascade 后置 + body 前缀提升 specificity
覆盖全局 .sidebar { position: sticky } 和 .app.is-aside-collapsed
============================================ */
@media (max-width: 760px) {
/* .app 强制单列，无论是否有 is-aside-collapsed */
body .app,
body .app.is-aside-collapsed {
grid-template-columns: 1fr;
}
/* sidebar 抽屉式（覆盖全局 sticky） */
body .sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
z-index: 200;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border-right: none;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.22);
}
body .sidebar.is-mobile-open {
transform: translateX(0);
}
body .aside-toggle {
display: none;
}
}
/* ════════════════════════════════════════════
LL_FB · Duolingo 风格底部答题反馈 bar（卡通主题）
════════════════════════════════════════════ */
.duo-fb {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1000;
background: #fff8ee;
border-top: 4px solid #58cc02;
box-shadow: 0 -6px 30px rgba(0,0,0,.12);
transform: translateY(100%);
transition: transform .42s cubic-bezier(.34,1.56,.64,1);
pointer-events: none;
}
.duo-fb.show { transform: translateY(0); pointer-events: auto; }
/* ── 视觉特效：图标弹跳 / 错题摇晃 / 标题滑入 ── */
@keyframes duo-fb-icon-pop {
0% { transform: scale(.3) rotate(-25deg); opacity: 0; }
55% { transform: scale(1.18) rotate(8deg); opacity: 1; }
78% { transform: scale(.94) rotate(-3deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes duo-fb-icon-pop-bad {
0% { transform: scale(.5) rotate(0); opacity: 0; }
30% { transform: scale(1.15) rotate(0); opacity: 1; }
50% { transform: scale(1) translateX(-6px); }
62% { transform: scale(1) translateX(6px); }
74% { transform: scale(1) translateX(-4px); }
86% { transform: scale(1) translateX(3px); }
100% { transform: scale(1) translateX(0); }
}
@keyframes duo-fb-line-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes duo-fb-glow-pulse {
0%, 100% { box-shadow: 0 4px 0 #58a700, 0 0 0 0 rgba(88,204,2,0); }
50% { box-shadow: 0 4px 0 #58a700, 0 0 0 8px rgba(88,204,2,.15); }
}
/* 答错 / 部分对：脉冲光晕跟随语气色，别用绿（否则红/橙按钮配绿底色） */
@keyframes duo-fb-glow-pulse-bad {
0%, 100% { box-shadow: 0 4px 0 #cc3838, 0 0 0 0 rgba(255,75,75,0); }
50% { box-shadow: 0 4px 0 #cc3838, 0 0 0 8px rgba(255,75,75,.15); }
}
@keyframes duo-fb-glow-pulse-mid {
0%, 100% { box-shadow: 0 4px 0 #cc7700, 0 0 0 0 rgba(255,150,0,0); }
50% { box-shadow: 0 4px 0 #cc7700, 0 0 0 8px rgba(255,150,0,.15); }
}
.duo-fb.show .duo-fb-icon {
animation: duo-fb-icon-pop .55s cubic-bezier(.34,1.56,.64,1) .08s both;
}
.duo-fb[data-tone="bad"].show .duo-fb-icon {
animation: duo-fb-icon-pop-bad .7s cubic-bezier(.36,.07,.19,.97) .08s both;
}
.duo-fb.show .duo-fb-title {
animation: duo-fb-line-in .35s ease-out .12s both;
}
.duo-fb.show .duo-fb-head {
animation: duo-fb-line-in .35s ease-out .18s both;
}
.duo-fb.show .duo-fb-line {
animation: duo-fb-line-in .35s ease-out .24s both;
}
.duo-fb.show .duo-fb-line:nth-child(3) {
animation-delay: .30s;
}
.duo-fb.show .duo-fb-continue {
animation: duo-fb-glow-pulse 2.2s ease-in-out 1s infinite;
}
.duo-fb[data-tone="bad"].show .duo-fb-continue {
animation: duo-fb-glow-pulse-bad 2.2s ease-in-out 1s infinite;
}
.duo-fb[data-tone="mid"].show .duo-fb-continue {
animation: duo-fb-glow-pulse-mid 2.2s ease-in-out 1s infinite;
}
.duo-fb-inner {
max-width: 1200px;
margin: 0 auto;
padding: 20px 28px;
display: flex;
align-items: center;
gap: 24px;
}
.duo-fb-icon {
flex: 0 0 64px;
width: 64px; height: 64px;
border-radius: 50%;
background: #58cc02;
color: #fff;
display: flex;
align-items: center; justify-content: center;
box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.duo-fb-body { flex: 1; min-width: 0; }
.duo-fb-title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: #58cc02;
margin-bottom: 6px;
line-height: 1.2;
}
.duo-fb-detail {
display: flex; flex-direction: column; gap: 6px;
font-size: 16px;
color: #5a5350;
}
.duo-fb-head {
display: flex; align-items: baseline; gap: 14px;
flex-wrap: wrap;
}
.duo-fb-score {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: #58cc02;
}
.duo-fb-hint { color: #6a6360; font-size: 16px; }
.duo-fb-line {
display: flex; gap: 14px; align-items: baseline;
font-size: 17px;
}
.duo-fb-lbl {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: .16em;
color: #9a8d80;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
min-width: 34px;
}
.duo-fb-val { color: #2a2520; font-weight: 600; word-break: break-word; }
.duo-fb-ref .duo-fb-val { color: #58cc02; }
/* 答错/部分对时参考答案不用绿（绿=答对，跟红/橙语气冲突），改中性深色 */
.duo-fb[data-tone="bad"] .duo-fb-ref .duo-fb-val,
.duo-fb[data-tone="mid"] .duo-fb-ref .duo-fb-val { color: #2a2520; }
.duo-fb-extra { font-size: 13px; color: #6a6360; line-height: 1.5; }
.duo-fb-actions {
display: flex; align-items: center; gap: 12px;
flex: 0 0 auto;
}
.duo-fb-listen {
width: 44px; height: 44px;
border-radius: 50%;
border: 2px solid #cdd6e5;
background: #fff;
color: #1cb0f6;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0;
transition: border-color .15s;
}
.duo-fb-listen:hover { border-color: #1cb0f6; }
.duo-fb-listen-lbl { display: none; }
.duo-fb-continue {
padding: 12px 28px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
letter-spacing: .04em;
border: 0;
border-radius: 14px;
background: #58cc02;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 0 #58a700;
transition: transform .12s, box-shadow .12s, background .15s;
min-width: 130px;
}
.duo-fb-continue:hover { background: #61d80a; }
.duo-fb-continue:active { transform: translateY(2px); box-shadow: 0 2px 0 #58a700; }
.duo-fb[data-tone="bad"] { border-top-color: #ff4b4b; }
.duo-fb[data-tone="bad"] .duo-fb-icon { background: #ff4b4b; box-shadow: 0 4px 0 #cc3838; }
.duo-fb[data-tone="bad"] .duo-fb-title,
.duo-fb[data-tone="bad"] .duo-fb-score { color: #ea2b2b; }
.duo-fb[data-tone="bad"] .duo-fb-continue { background: #ff4b4b; box-shadow: 0 4px 0 #cc3838; }
.duo-fb[data-tone="bad"] .duo-fb-continue:hover { background: #ff6868; }
.duo-fb[data-tone="mid"] { border-top-color: #ff9600; }
.duo-fb[data-tone="mid"] .duo-fb-icon { background: #ff9600; box-shadow: 0 4px 0 #cc7700; }
.duo-fb[data-tone="mid"] .duo-fb-title,
.duo-fb[data-tone="mid"] .duo-fb-score { color: #e08500; }
.duo-fb[data-tone="mid"] .duo-fb-continue { background: #ff9600; box-shadow: 0 4px 0 #cc7700; }
.duo-fb[data-tone="mid"] .duo-fb-continue:hover { background: #ffa61f; }
@media (max-width: 720px) {
.duo-fb-inner { padding: 14px 16px; gap: 14px; }
.duo-fb-icon { width: 48px; height: 48px; flex: 0 0 48px; }
.duo-fb-title { font-size: 18px; }
.duo-fb-continue { padding: 10px 20px; font-size: 14px; min-width: 100px; }
}
/* ════════════════════════════════════════════════════════════════
手机精细化补丁（≤480px）：补呼吸感、防误触
整个 css/ 之前的断点都是 560-900px（平板范围），真手机一直 inherit
760px 样式。这块专门给 ≤480px 调几个关键数值。
原则：只动间距/尺寸，不动信息密度（feedback_density_first）。
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* 主内容区左右 padding 收一档（默认 20px → 16px），让卡片有更多展开空间 */
.main { padding-left: 16px; padding-right: 16px; }
/* 主按钮 min-height 44px（iOS HIG 触摸目标标准）——防误触
只对明确「主按钮」类生效，图标/tabbar/汉堡按钮不影响 */
.btn,
a.btn,
button.btn,
.lnp-btn,
.plus-gate-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 报纸首页四模块卡：拉开 gap、卡身留更多 padding */
.lnp-mod-grid { gap: 16px; }
.lnp-mod { padding: 18px 16px; }
/* 头条 CTA 行（开始今天/换个主题等）按钮之间拉开 */
.lnp-actions { gap: 14px; flex-wrap: wrap; }
/* tabbar：6 个 tab 在 375 屏挤不下，「我的」会被切——
字号守 13px 底线（CLAUDE.md 硬约束），改空间靠收 padding + 缩 icon + letter-spacing */
.mobile-tab { padding: 5px 0 4px; gap: 2px; }
.mobile-tab svg { width: 19px; height: 19px; }
.mobile-tab-label { letter-spacing: -0.02em; }
/* footer 被 tabbar 挡：main 底部 padding 加缓冲 56→72，footer 自身 padding 收一档
避免「用陪伴的方式学英语」最后一行被 tabbar 啃掉 */
.main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* footer 跟 tabbar 之间需要呼吸距——之前 padding 14 收太狠，profile 这种短页紧贴 */
.main-footer { margin-top: 28px; padding: 18px 0 16px; }
}
/* ════════════════════════════════════════════════════════════════════════
「我的」总览页（#/me）— 双主题
cartoon: 涂鸦黑板风（暖奶油底 + 厚黑描边 + 多彩贴纸 + Fredoka/Caveat/Nunito）
luxe: 黑黄警示风（纯黑 + 警示黄 + 黑黄斜纹 + Anton/Archivo/JBM）
规则：不用 emoji、卡片不用 CSS border（用 box-shadow / outline 模拟）、字号 ≥13px
════════════════════════════════════════════════════════════════════════ */
.view-me{
/* ── tokens (cartoon D defaults) ─────────────────────────────── */
--me-bg:#FFF6E0;
--me-bg-soft:#FFFBEE;
--me-card:#FFFBEE;
--me-card-dk:#F4E8C7;
--me-card-hi:#FFF7DC;
--me-card-alt-a:#FFF7DC;
--me-card-alt-b:#E8F8FF;
--me-card-alt-c:#FFE7E5;
--me-ink:#1A1310;
--me-ink-2:#3E2E26;
--me-ink-3:#74604F;
--me-line:#1A1310;
--me-mint:#58CC02;
--me-mint-dk:#3F9B00;
--me-sky:#1CB0F6;
--me-tang:#FF9600;
--me-tang-dk:#C77000;
--me-grape:#CE82FF;
--me-grape-dk:#9E54CC;
--me-sun:#FFC800;
--me-rose:#FF4B5C;
--me-rose-dk:#C12D3D;
--me-font-display:'Fredoka','PingFang SC','Microsoft YaHei',sans-serif;
--me-font-body:'Nunito','PingFang SC','Microsoft YaHei',sans-serif;
--me-font-hand:'Caveat','Nunito',cursive;
--me-font-mono:'Nunito','PingFang SC',sans-serif;
--me-shadow-hard:0 0 0 3px var(--me-line), 6px 6px 0 0 var(--me-line);
--me-shadow-soft:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
--me-shadow-flat:inset 0 0 0 2.5px var(--me-line);
--me-cap-transform:none;
--me-cap-letter:0;
position:relative;
display:flex;flex-direction:column;gap:26px;
padding:24px 28px 60px;max-width:1280px;margin:0 auto;
color:var(--me-ink);
font-family:var(--me-font-body);font-size:14px;line-height:1.5;font-weight:600;
}
/* 整页底色：body 在 #/me 路由直接换 me-bg（cartoon 奶油 / luxe 黑），
侧边栏自己有 background !important 会盖回去，aside-right 是 transparent → 跟着 body 一起变。
::before 只做局部 radial 装饰（粉/蓝/绿 软光晕）。 */
body:has(.view-me){
background:#FFF6E0 !important;
background-image:none !important;
}
html[data-theme="luxe"] body:has(.view-me){
background-color:#060814 !important;
/* 不写 background-image —— 让 luxe.css FINAL OVERRIDE 的 4 团极光弥散光透下来 */
}
.view-me::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(900px 500px at 10% -10%, rgba(206,130,255,.10), transparent 55%),
radial-gradient(700px 400px at 95% 30%, rgba(28,176,246,.10), transparent 55%),
radial-gradient(800px 500px at 50% 110%, rgba(88,204,2,.08), transparent 55%);
}
/* 黑板粉笔点状纹理（preview5 的 body::before 复刻）—— 与上层 radial 叠加 */
.view-me::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(rgba(26,19,16,.08) 1px, transparent 1.5px),
radial-gradient(rgba(26,19,16,.05) 1px, transparent 1.5px);
background-size:24px 24px, 16px 16px;
background-position:0 0, 12px 8px;
}
/* luxe 主题下 #/me 页专属流光：::after 改为旋转"金色光锥"（black+gold 版极光锥，仅 #/me 范围）。
selector 特异性高于 luxe.css 的 *::after animation-kill 规则，所以 animation 能跑。 */
html[data-theme="luxe"] .view-me::after{
content:"";display:block;
position:fixed;left:-15%;right:-15%;top:-20%;bottom:auto;
height:80vh;width:auto;inset:auto;
z-index:0;pointer-events:none;
background:conic-gradient(from 60deg at 50% 50%,
transparent 0deg, rgba(76,54,255,.20) 30deg, transparent 80deg,
rgba(0,212,255,.18) 140deg, transparent 180deg,
rgba(255,84,176,.20) 240deg, transparent 300deg,
rgba(76,54,255,.18) 360deg) !important;
background-image:conic-gradient(from 60deg at 50% 50%,
transparent 0deg, rgba(76,54,255,.20) 30deg, transparent 80deg,
rgba(0,212,255,.18) 140deg, transparent 180deg,
rgba(255,84,176,.20) 240deg, transparent 300deg,
rgba(76,54,255,.18) 360deg) !important;
background-size:auto !important;background-position:0 0 !important;
filter:blur(70px);
animation:lx-aurora-me 32s linear infinite !important;
animation-name:lx-aurora-me !important;
}
@keyframes lx-aurora-me{
0% { transform:rotate(0deg) scale(1.2); }
100% { transform:rotate(360deg) scale(1.2); }
}
.view-me > *{position:relative;z-index:1}
/* ── 顶部 hello bar ──────────────────────────────────────────── */
.me-hello{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 4px 0;flex-wrap:wrap}
.me-hello-l{display:flex;align-items:center;gap:12px;font-family:var(--me-font-hand);font-size:22px;font-weight:500;color:var(--me-ink-2)}
.me-hello-l svg{width:22px;height:22px;color:var(--me-tang);flex-shrink:0}
.me-hello-r{display:flex;gap:8px;flex-wrap:wrap}
.me-pill{
display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
background:var(--me-card);color:var(--me-ink);
font-family:var(--me-font-display);font-weight:600;font-size:13px;letter-spacing:.04em;
box-shadow:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
transform:rotate(-1.5deg);
}
.me-pill-mint{background:var(--me-mint)}
.me-pill-sky{background:var(--me-sky)}
.me-pill-tang{background:var(--me-tang)}
.me-pill-sun{background:var(--me-sun)}
.me-pill-rose{background:var(--me-rose);color:#fff}
.me-hello-r .me-pill:nth-child(2n){transform:rotate(1.8deg)}
/* ── 通用：涂鸦盒（外壳） ──────────────────────────────────── */
.me-box{
position:relative;background:var(--me-card);color:var(--me-ink);
box-shadow:var(--me-shadow-hard);
}
.me-box-lift{transition:transform .15s, box-shadow .15s}
.me-box-lift:hover{transform:translate(-2px,-2px);box-shadow:0 0 0 3px var(--me-line), 8px 8px 0 0 var(--me-line)}
/* ── HERO ──────────────────────────────────────────────────── */
.me-hero{
display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
padding:28px 32px;background:var(--me-card);
box-shadow:var(--me-shadow-hard);
}
.me-hero-avatar{position:relative;flex-shrink:0}
.me-hero-av-circle{
width:120px;height:120px;border-radius:50%;
background:var(--me-sun);color:var(--me-ink);
box-shadow:0 0 0 4px var(--me-line), 0 0 0 8px var(--me-card), 0 0 0 11px var(--me-line), 6px 6px 0 0 var(--me-line);
display:flex;align-items:center;justify-content:center;
}
.me-hero-av-circle svg{width:60px;height:60px}
.me-hero-lvl{
position:absolute;bottom:-8px;right:-12px;
background:var(--me-rose);color:#fff;
font-family:var(--me-font-display);font-weight:700;font-size:14px;
padding:6px 10px;
box-shadow:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
transform:rotate(8deg);letter-spacing:.04em;
}
.me-hero-name{min-width:0}
.me-hero-name h1{
margin:0;font-family:var(--me-font-display);font-weight:700;
font-size:clamp(40px, 5.6vw, 64px);line-height:.96;color:var(--me-ink);letter-spacing:-.01em;
}
.me-hi{color:var(--me-mint-dk);position:relative;display:inline-block}
.me-hi::after{
content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:10px;
background:var(--me-sun);z-index:-1;transform:rotate(-1deg);
box-shadow:0 0 0 2px var(--me-line);
}
.me-scribble{display:inline-block;transform:rotate(-3deg);color:var(--me-grape-dk)}
.me-hero-strap{
margin:14px 0 0;font-family:var(--me-font-hand);font-size:22px;font-weight:500;
color:var(--me-ink-2);display:flex;align-items:center;gap:10px;line-height:1.35;
}
.me-hero-strap svg{width:18px;height:18px;color:var(--me-rose);flex-shrink:0}
.me-hero-strap em{font-style:normal;color:var(--me-tang-dk);font-weight:600}
.me-hero-stats{display:flex;flex-direction:column;gap:10px;align-items:flex-end;min-width:0}
.me-ribbon{
background:var(--me-mint);color:var(--me-ink);
font-family:var(--me-font-display);font-weight:700;font-size:13px;letter-spacing:.03em;
padding:7px 16px;
box-shadow:0 0 0 3px var(--me-line), 4px 4px 0 0 var(--me-line);
display:inline-flex;align-items:center;gap:8px;transform:rotate(2deg);
white-space:nowrap;
}
.me-ribbon svg{width:16px;height:16px;flex-shrink:0}
.me-ribbon-tang{background:var(--me-tang);transform:rotate(-2deg)}
.me-ribbon-grape{background:var(--me-grape);transform:rotate(1.5deg);color:#fff}
.me-ribbon-grape b{color:#fff;font-weight:700}
.me-ribbon-meta{
font-family:var(--me-font-mono);font-size:12px;color:var(--me-ink-3);
letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding-right:6px;
}
/* ── HERO 右上 PvP 紧凑块（替代旧 ribbon 三件套） ────────── */
.me-hero-pvp{
display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;
padding:14px 18px;background:var(--me-card-dk);color:var(--me-ink);
box-shadow:var(--me-shadow-soft);
min-width:140px;
}
.me-hero-pvp-cap{
font-family:var(--me-font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--me-ink-3);
}
.me-hero-pvp-pts{
font-family:var(--me-font-display);font-weight:700;font-size:40px;line-height:.95;color:var(--me-ink);
font-variant-numeric:lining-nums;letter-spacing:-.02em;
}
.me-hero-pvp-rec{
font-family:var(--me-font-hand);font-weight:500;font-size:16px;color:var(--me-grape-dk);line-height:1.2;
}
/* ── 四数字带 ──────────────────────────────────────────────── */
.me-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.me-stat{
position:relative;padding:20px 18px 18px;text-align:center;
background:var(--me-card);color:var(--me-ink);
box-shadow:var(--me-shadow-hard);
transition:transform .15s, box-shadow .15s;
}
.me-stat:hover{transform:translate(-2px,-2px);box-shadow:0 0 0 3px var(--me-line), 8px 8px 0 0 var(--me-line)}
.me-stat-tag{
position:absolute;top:-12px;right:-10px;z-index:2;
background:var(--me-rose);color:#fff;
font-family:var(--me-font-display);font-weight:700;font-size:12px;
padding:5px 10px;letter-spacing:.04em;
box-shadow:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
transform:rotate(-2deg);
}
.me-stat-ic{
width:46px;height:46px;border-radius:50%;background:var(--me-mint);
box-shadow:0 0 0 2.5px var(--me-line);
display:inline-flex;align-items:center;justify-content:center;color:var(--me-ink);
margin-bottom:8px;
}
.me-stat-ic svg{width:26px;height:26px}
.me-stat-v{font-family:var(--me-font-display);font-weight:700;font-size:52px;line-height:.95;color:var(--me-ink);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.me-stat-v small{font-size:18px;font-weight:600;color:var(--me-ink-3);margin-left:2px}
.me-stat-l{font-family:var(--me-font-display);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--me-ink-2);margin-top:4px;text-transform:uppercase}
.me-stat-sub{font-family:var(--me-font-hand);font-size:18px;color:var(--me-ink-3);margin-top:4px;font-weight:500;line-height:1.2}
.me-stat-c2 .me-stat-ic{background:var(--me-tang)}
.me-stat-c3 .me-stat-ic{background:var(--me-sky)}
.me-stat-c4 .me-stat-ic{background:var(--me-grape);color:#fff}
.me-stat-c2 .me-stat-tag{background:var(--me-sun);color:var(--me-ink)}
.me-stat-c3 .me-stat-tag{background:var(--me-mint);color:var(--me-ink)}
.me-stat-c4 .me-stat-tag{background:var(--me-grape);color:#fff}
/* ── Section 通用 ─────────────────────────────────────────── */
.me-section{display:flex;flex-direction:column;gap:14px}
.me-section-head{
display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:0 6px;flex-wrap:wrap;
}
.me-section-title{
display:flex;align-items:center;gap:12px;margin:0;
}
.me-section-ic{
width:40px;height:40px;border-radius:14px;background:var(--me-sun);
box-shadow:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
display:inline-flex;align-items:center;justify-content:center;color:var(--me-ink);flex-shrink:0;
}
.me-section-ic svg{width:22px;height:22px}
.me-section-h2{
margin:0;font-family:var(--me-font-display);font-weight:700;font-size:28px;color:var(--me-ink);letter-spacing:-.01em;line-height:1.05;
}
.me-section-h2 .u{position:relative;display:inline-block}
.me-section-h2 .u::after{
content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:6px;background:var(--me-mint);z-index:-1;transform:rotate(-.5deg);
}
.me-section-meta{font-family:var(--me-font-hand);font-size:18px;font-weight:500;color:var(--me-ink-3);text-align:right}
/* ── 今日目标 ─────────────────────────────────────────────── */
.me-today{
padding:28px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
background:var(--me-card);box-shadow:var(--me-shadow-hard);
}
.me-today-ring{position:relative;width:180px;height:180px;flex-shrink:0}
.me-today-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.me-today-stamp{
position:absolute;top:-4px;right:-8px;z-index:2;
background:var(--me-rose);color:#fff;
font-family:var(--me-font-display);font-weight:700;font-size:12px;
padding:5px 9px;letter-spacing:.04em;
box-shadow:0 0 0 2.5px var(--me-line), 2px 2px 0 0 var(--me-line);
transform:rotate(10deg);
}
.me-today-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.me-today-num b{font-family:var(--me-font-display);font-weight:700;font-size:48px;color:var(--me-ink);line-height:1;font-variant-numeric:lining-nums}
.me-today-num b small{font-size:20px;color:var(--me-ink-3);font-weight:600}
.me-today-num span{font-family:var(--me-font-hand);font-weight:500;font-size:20px;color:var(--me-ink-2);margin-top:2px}
.me-today-note{
margin:0;font-family:var(--me-font-body);font-weight:700;font-size:20px;line-height:1.45;color:var(--me-ink);
}
.me-today-note .me-hl{
background:var(--me-sun);padding:0 6px;color:var(--me-ink);
box-shadow:0 0 0 2px var(--me-line);
transform:rotate(-1deg);display:inline-block;
}
.me-today-note em{font-style:normal;color:var(--me-tang-dk);font-weight:700}
.me-today-note .ps{display:block;margin-top:12px;font-family:var(--me-font-hand);font-weight:500;font-size:20px;color:var(--me-ink-3)}
.me-today-cta{display:flex;flex-direction:column;gap:10px;min-width:160px}
/* ── 通用按钮 ─────────────────────────────────────────────── */
.me-btn{
display:inline-flex;justify-content:space-between;align-items:center;gap:12px;
padding:12px 18px;background:var(--me-card);color:var(--me-ink);
font-family:var(--me-font-display);font-weight:600;font-size:15px;letter-spacing:.02em;
box-shadow:0 0 0 2.5px var(--me-line), 4px 4px 0 0 var(--me-line);
transition:transform .12s, box-shadow .12s, background .15s;cursor:pointer;
text-decoration:none;
}
.me-btn:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 2.5px var(--me-line), 5px 5px 0 0 var(--me-line)}
.me-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 2.5px var(--me-line), 1px 1px 0 0 var(--me-line)}
.me-btn-mint{background:var(--me-mint)}
.me-btn-sky{background:var(--me-sky)}
.me-btn-tang{background:var(--me-tang)}
.me-btn svg{width:18px;height:18px;flex-shrink:0}
/* ── 本周战报（_renderWeekBars 写入 .pgd-day-col 结构） ───── */
.me-week{padding:26px 30px;background:var(--me-card);box-shadow:var(--me-shadow-hard);display:flex;flex-direction:column;gap:18px}
.me-week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:end;min-height:180px}
.view-me .pgd-day-col{display:flex;flex-direction:column;align-items:center;gap:8px;height:180px;justify-content:flex-end}
.view-me .pgd-day-bar-wrap{width:60%;min-height:6px;display:flex;align-items:flex-end;justify-content:center}
.view-me .pgd-day-bar{
width:100%;background:var(--me-mint);
box-shadow:0 0 0 2.5px var(--me-line);
transition:height .35s cubic-bezier(.2,.8,.3,1);
}
.view-me .pgd-day-bar.done{background:var(--me-mint)}
.view-me .pgd-day-bar.partial{background:var(--me-sky)}
.view-me .pgd-day-bar.empty{background:var(--me-card-dk);height:10px}
.view-me .pgd-day-col:nth-child(3) .pgd-day-bar{background:var(--me-grape)}
.view-me .pgd-day-col:nth-child(4) .pgd-day-bar{background:var(--me-tang)}
.view-me .pgd-day-col:nth-child(5) .pgd-day-bar{background:var(--me-rose)}
.view-me .pgd-day-circle{
width:30px;height:30px;border-radius:50%;
background:var(--me-card-dk);color:var(--me-ink-3);
box-shadow:0 0 0 2.5px var(--me-line);
display:flex;align-items:center;justify-content:center;
font-family:var(--me-font-display);font-weight:700;font-size:14px;
}
.view-me .pgd-day-circle.done{background:var(--me-mint);color:var(--me-ink)}
.view-me .pgd-day-circle.partial{background:var(--me-sky);color:var(--me-ink)}
.view-me .pgd-day-circle.today{box-shadow:0 0 0 2.5px var(--me-line), 0 0 0 5px var(--me-sun);animation:me-pulse 1.8s infinite}
@keyframes me-pulse{50%{transform:scale(1.08)}}
.view-me .pgd-day-letter{font-family:var(--me-font-display);font-weight:600;font-size:13px;color:var(--me-ink-2);letter-spacing:.03em}
.me-week-foot{
padding:12px 16px;background:var(--me-tang);color:#fff;
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
font-family:var(--me-font-display);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
.me-week-total{font-family:var(--me-font-display);font-weight:700;font-size:20px;color:#fff;letter-spacing:0;text-transform:none}
/* ── 页尾 colophon（卡通：奶油底 + 厚黑描边 + 顶部黄胶带） ── */
.view-me .me-colophon{
position:relative;margin-top:10px;padding:24px 28px;
background:var(--me-card);color:var(--me-ink);
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
font-family:var(--me-font-display);font-weight:600;font-size:12px;
letter-spacing:.08em;text-transform:uppercase;
box-shadow:0 0 0 3px var(--me-line), 6px 6px 0 0 var(--me-line);
}
.view-me .me-colophon::before{
content:"";position:absolute;top:-10px;left:50%;
width:120px;height:22px;background:var(--me-sun);
box-shadow:0 0 0 2.5px var(--me-line);
transform:translateX(-50%) rotate(-2deg);
}
.view-me .me-colophon-l,
.view-me .me-colophon-r{color:var(--me-ink-3)}
.view-me .me-colophon-c{
font-family:var(--me-font-hand);font-weight:600;font-size:24px;color:var(--me-tang-dk);
text-transform:none;letter-spacing:0;flex:1;text-align:center;min-width:200px;
}
/* ── 对战段位 (PVP) ────────────────────────────────────────── */
.me-pvp{display:grid;grid-template-columns:1fr 1.2fr;gap:18px}
.me-pvp-card{padding:26px 30px;background:var(--me-card);box-shadow:var(--me-shadow-hard)}
.me-pvp-top{display:flex;align-items:center;gap:22px;margin-bottom:20px}
.me-pvp-trophy{
width:104px;height:104px;border-radius:22px;
background:var(--me-grape);color:#fff;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
box-shadow:0 0 0 3.5px var(--me-line), 0 0 0 7px var(--me-card), 0 0 0 10px var(--me-line), 6px 6px 0 0 var(--me-line);
transform:rotate(-3deg);
}
.me-pvp-trophy svg{width:54px;height:54px}
.me-pvp-info{flex:1;min-width:0}
.me-pvp-cap{
display:inline-block;font-family:var(--me-font-display);font-weight:700;font-size:12px;
background:var(--me-ink);color:#fff;padding:4px 10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.view-me .me-pvp-info .me-pvp-pts,
.view-me #me-rating.me-pvp-pts{
font-family:var(--me-font-display);font-weight:700;font-size:64px;line-height:.9;color:var(--me-ink);font-variant-numeric:lining-nums;letter-spacing:-.02em;
}
.me-pvp-tier{font-family:var(--me-font-hand);font-weight:600;font-size:22px;color:var(--me-grape-dk);margin-top:4px}
/* PVP 战绩格 (_meLoadPvp 写入 .me-rs > b + span 共 6 个) */
.view-me .me-pvp-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.view-me .me-rs{
padding:12px 8px;text-align:center;background:var(--me-card-hi);
box-shadow:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
display:flex;flex-direction:column;gap:3px;
}
.view-me .me-rs b{font-family:var(--me-font-display);font-weight:700;font-size:24px;color:var(--me-ink);line-height:1;font-variant-numeric:lining-nums}
.view-me .me-rs span{font-family:var(--me-font-display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--me-ink-2)}
.view-me .me-rs:nth-child(1){background:var(--me-mint)}
.view-me .me-rs:nth-child(2){background:var(--me-rose);color:#fff}
.view-me .me-rs:nth-child(2) b,.view-me .me-rs:nth-child(2) span{color:#fff}
.view-me .me-rs:nth-child(3){background:var(--me-sun)}
/* PVP history (_meLoadPvp 写入 .me-match) */
.me-pvp-history-wrap{padding:24px 26px;background:var(--me-card);box-shadow:var(--me-shadow-hard)}
.me-pvp-history-wrap h4{margin:0 0 14px;font-family:var(--me-font-display);font-weight:700;font-size:16px;color:var(--me-ink);display:flex;align-items:center;gap:10px}
.me-pvp-history-wrap h4 svg{width:18px;height:18px;color:var(--me-tang)}
.view-me .me-match{
display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
padding:11px 14px;margin-bottom:8px;background:var(--me-card-dk);
box-shadow:var(--me-shadow-flat);
}
.view-me .me-match:last-child{margin-bottom:0}
.view-me .me-match-tag{
font-family:var(--me-font-display);font-weight:700;font-size:13px;letter-spacing:.05em;padding:5px 10px;text-transform:uppercase;
box-shadow:inset 0 0 0 2px var(--me-line);background:var(--me-card);
}
.view-me .me-match-win .me-match-tag{background:var(--me-mint);color:var(--me-ink)}
.view-me .me-match-loss .me-match-tag{background:var(--me-rose);color:#fff}
.view-me .me-match-draw .me-match-tag{background:var(--me-card-dk);color:var(--me-ink-2)}
.view-me .me-match-vs{font-family:var(--me-font-display);font-weight:600;font-size:16px;color:var(--me-ink)}
.view-me .me-match-score{font-family:var(--me-font-display);font-weight:700;font-size:17px;color:var(--me-ink);letter-spacing:.04em}
.view-me .me-empty{
padding:18px;text-align:center;font-family:var(--me-font-hand);font-size:18px;font-weight:500;color:var(--me-ink-3);
background:var(--me-card-dk);box-shadow:var(--me-shadow-flat);
}
/* ── 收藏（_meInitFavs 写 .me-fav-item） ────────────────── */
.me-favorites{padding:26px 28px;background:var(--me-card);box-shadow:var(--me-shadow-hard);display:flex;flex-direction:column;gap:18px}
.me-fav-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.me-fav-tabs{display:flex;gap:0;background:var(--me-card-dk);padding:3px;box-shadow:var(--me-shadow-flat)}
.me-fav-tabs button,
.view-me [data-fav-tab]{
background:transparent;color:var(--me-ink-2);border:0;
padding:9px 14px;cursor:pointer;
font-family:var(--me-font-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.view-me [data-fav-tab].is-on{background:var(--me-mint);color:var(--me-ink)}
.me-fav-search{
background:var(--me-card-hi);padding:9px 14px;color:var(--me-ink);
font-family:var(--me-font-hand);font-size:17px;font-weight:500;
outline:none;border:0;min-width:200px;flex:1 1 auto;max-width:280px;
box-shadow:0 0 0 2.5px var(--me-line), 3px 3px 0 0 var(--me-line);
}
.me-fav-search::placeholder{color:var(--me-ink-3);font-style:italic}
.me-fav-list,.view-me #fav-list{
display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;
}
.view-me .me-fav-item{
padding:16px 18px 14px;background:var(--me-card);position:relative;
box-shadow:0 0 0 3px var(--me-line), 5px 5px 0 0 var(--me-line);
transition:transform .15s;
display:flex;flex-direction:column;gap:6px;
}
.view-me .me-fav-item:nth-child(3n+1){transform:rotate(-1deg);background:var(--me-card-alt-a)}
.view-me .me-fav-item:nth-child(3n+2){transform:rotate(1.2deg);background:var(--me-card-alt-b)}
.view-me .me-fav-item:nth-child(3n+3){transform:rotate(-.6deg);background:var(--me-card-alt-c)}
.view-me .me-fav-item:hover{transform:rotate(0) translateY(-3px)}
.view-me .me-fav-item::before{
content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
width:14px;height:14px;border-radius:50%;background:var(--me-rose);
box-shadow:0 0 0 2.5px var(--me-line), inset -2px -2px 0 rgba(0,0,0,.2);
}
.view-me .me-fav-w{font-family:var(--me-font-display);font-weight:700;font-size:20px;color:var(--me-ink);line-height:1.1}
.view-me .me-fav-def{font-family:var(--me-font-body);font-weight:600;font-size:14px;color:var(--me-ink-2);line-height:1.5}
.me-fav-foot{text-align:right;font-family:var(--me-font-hand);font-size:18px;color:var(--me-ink-2);font-weight:500}
.me-fav-foot a{color:var(--me-rose-dk);font-weight:600;text-decoration:none}
.view-me .hide{display:none}
/* ── 偏好（renderProfilePreferences 写 .pf-pref-*） ──────── */
.me-prefs-wrap{padding:18px 24px;background:var(--me-card);box-shadow:var(--me-shadow-hard)}
.view-me .pf-pref-grid{display:flex;flex-direction:column}
.view-me .pf-pref-row{
display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
padding:14px 4px;
}
.view-me .pf-pref-row + .pf-pref-row{border-top:2.5px dashed var(--me-ink-3)}
.view-me .pf-pref-k{
font-family:var(--me-font-display);font-weight:600;font-size:15px;color:var(--me-ink-2);
display:inline-flex;align-items:center;gap:10px;letter-spacing:.02em;
}
.view-me .pf-pref-k::before{
content:"";width:24px;height:24px;background:var(--me-mint);flex-shrink:0;
box-shadow:0 0 0 2.5px var(--me-line);
background-image:url("data:image/svg+xml;utf8,");
background-position:center;background-repeat:no-repeat;background-size:18px 18px;
}
.view-me .pf-pref-v{font-family:var(--me-font-display);font-weight:700;font-size:17px;color:var(--me-ink);text-align:right}
.view-me .pf-pref-empty{
padding:18px;text-align:center;font-family:var(--me-font-hand);font-size:20px;font-weight:500;color:var(--me-ink-3);
background:var(--me-card-dk);box-shadow:var(--me-shadow-flat);margin-bottom:12px;
}
.view-me .pf-pref-btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 18px;background:var(--me-tang);color:var(--me-ink);
font-family:var(--me-font-display);font-weight:700;font-size:14px;letter-spacing:.04em;
box-shadow:0 0 0 2.5px var(--me-line), 4px 4px 0 0 var(--me-line);cursor:pointer;
border:0;margin-top:14px;
}
.view-me .pf-pref-btn:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 2.5px var(--me-line), 5px 5px 0 0 var(--me-line)}
/* ── 游客状态 ───────────────────────────────────────────── */
.me-guest-body{padding:28px;text-align:center;background:var(--me-card);box-shadow:var(--me-shadow-hard);display:flex;flex-direction:column;gap:18px;align-items:center}
.me-guest-msg{margin:0;font-family:var(--me-font-hand);font-size:24px;font-weight:500;color:var(--me-ink-2)}
/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width:980px){
.view-me{padding:18px 16px 50px}
.me-hero{grid-template-columns:1fr;gap:18px;padding:22px 22px;text-align:center}
.me-hero-stats{align-items:center;flex-direction:row;justify-content:center;flex-wrap:wrap}
.me-hero-strap{justify-content:center}
.me-stat-row{grid-template-columns:repeat(2,1fr)}
.me-today{grid-template-columns:1fr;gap:18px;padding:22px}
.me-today-cta{min-width:0}
.me-pvp{grid-template-columns:1fr}
}
@media (max-width:600px){
.me-stat-row{grid-template-columns:1fr 1fr}
.me-stat-v{font-size:42px}
.me-section-h2{font-size:24px}
.me-fav-list,.view-me #fav-list{grid-template-columns:1fr}
}
/* ════════════════════════════════════════════════════════════════════════
luxe 主题覆盖（E 黑黄警示风）
════════════════════════════════════════════════════════════════════════ */
html[data-theme="luxe"] .view-me{
/* AURORA 流光(1:1 复刻 preview6b 多彩极光，cyan/violet/pink/lime)，仅 #/me 路由生效 */
--me-bg:#060814;
--me-bg-soft:#0B0E22;
--me-card:#0F1230;
--me-card-dk:#0B0E22;
--me-card-hi:#101637;
--me-card-alt-a:#0F1230;
--me-card-alt-b:#0F1230;
--me-card-alt-c:#0F1230;
--me-ink:#F0F4FF;
--me-ink-2:#B8C0E5;
--me-ink-3:#7480AC;
--me-line:rgba(255,255,255,.10);
--me-mint:#9CFF6D;
--me-mint-dk:#7AD950;
--me-sky:#00D4FF;
--me-tang:#00D4FF;
--me-tang-dk:#66E6FF;
--me-grape:#4C36FF;
--me-grape-dk:#3A28D9;
--me-sun:#66E6FF;
--me-rose:#FF54B0;
--me-rose-dk:#E03A95;
--me-font-display:'Manrope','PingFang SC','Noto Sans SC',sans-serif;
--me-font-body:'Manrope','Inter','PingFang SC','Noto Sans SC',sans-serif;
--me-font-hand:'Instrument Serif','Manrope','PingFang SC',serif;
--me-font-mono:'JetBrains Mono','Consolas',monospace;
--me-shadow-hard:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
--me-shadow-soft:0 8px 24px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.06);
--me-shadow-flat:inset 0 0 0 1px rgba(255,255,255,.08);
--me-cap-transform:uppercase;
--me-cap-letter:.05em;
}
html[data-theme="luxe"] .view-me::before{
/* 4 团极光弥散光（preview6b body 复刻）：紫/青/品红/绿 */
background:
radial-gradient(60% 50% at 12% 0%, rgba(76,54,255,.34), transparent 60%),
radial-gradient(50% 45% at 88% 5%, rgba(0,212,255,.26), transparent 60%),
radial-gradient(55% 55% at 60% 100%, rgba(255,84,176,.22), transparent 65%),
radial-gradient(40% 35% at 0% 60%, rgba(156,255,109,.12), transparent 70%) !important;
}
/* 老的'黑+警示黄' me-* overrides 在 2026-05-24 整块删除 —— 改走下方 AURORA 流光块 1:1 复刻 preview6b */
/* ════════════════════════════════════════════════════════════════════════
头像选择 modal（预设挑选 + 上传）— 双主题
════════════════════════════════════════════════════════════════════════ */
.me-avatar-overlay{
position:fixed;inset:0;z-index:9999;
background:rgba(0,0,0,.55);
display:flex;align-items:center;justify-content:center;
padding:20px;animation:me-av-fade .15s ease-out;
}
@keyframes me-av-fade{from{opacity:0}to{opacity:1}}
.me-avatar-modal{
background:var(--me-card,#FFFBEE);color:var(--me-ink,#1A1310);
width:min(560px,100%);max-height:88vh;overflow:auto;
box-shadow:0 0 0 3px var(--me-line,#1A1310), 6px 6px 0 0 var(--me-line,#1A1310);
display:flex;flex-direction:column;
font-family:var(--me-font-body,'Nunito',sans-serif);
}
.me-avatar-modal-head{
display:flex;justify-content:space-between;align-items:center;
padding:18px 26px 14px;
}
.me-avatar-modal-head h3{
margin:0;font-family:var(--me-font-display,'Fredoka',sans-serif);font-weight:700;font-size:22px;color:var(--me-ink,#1A1310);letter-spacing:-.01em;
}
.me-avatar-x{
background:transparent;border:0;cursor:pointer;
font-family:var(--me-font-display,sans-serif);font-weight:700;font-size:20px;line-height:1;
color:var(--me-ink,#1A1310);
width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2.5px var(--me-line,#1A1310);
transition:background .12s, color .12s;
}
.me-avatar-x:hover{background:var(--me-rose,#FF4B5C);color:#fff}
.me-avatar-body{padding:14px 26px 0;display:flex;flex-direction:column;gap:18px}
.me-avatar-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.me-avatar-cell{
background:var(--me-card-hi,#FFF7DC);color:var(--me-ink,#1A1310);
border:0;cursor:pointer;padding:8px;
width:100%;aspect-ratio:1;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2.5px var(--me-line,#1A1310);
transition:transform .12s, box-shadow .12s, background .12s;
}
.me-avatar-cell svg{width:88%;height:88%;display:block}
.me-avatar-cell:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 2.5px var(--me-line,#1A1310), 3px 3px 0 0 var(--me-line,#1A1310)}
.me-avatar-cell.is-on{background:var(--me-sun,#FFC800);box-shadow:0 0 0 2.5px var(--me-line,#1A1310), 4px 4px 0 0 var(--me-line,#1A1310)}
.me-avatar-divider{
display:flex;align-items:center;gap:14px;
color:var(--me-ink-3,#74604F);font-family:var(--me-font-hand,'Caveat',cursive);font-size:18px;font-weight:500;
}
.me-avatar-divider::before,
.me-avatar-divider::after{
content:"";flex:1;height:2px;
background:repeating-linear-gradient(90deg, var(--me-ink,#1A1310) 0 4px, transparent 4px 8px);
}
.me-avatar-upload{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.me-avatar-preview-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 6px}
.me-avatar-preview-circle{
width:128px;height:128px;border-radius:50%;
background:var(--me-card-hi,#FFF7DC);color:var(--me-ink,#1A1310);
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 3px var(--me-line,#1A1310);
overflow:hidden;
}
.me-avatar-preview-circle svg{width:60%;height:60%}
.me-avatar-preview-circle .me-hero-av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.me-avatar-preview-label{font-family:var(--me-font-hand,'Caveat',cursive);font-size:18px;font-weight:500;color:var(--me-ink-3,#74604F)}
/* 旧 me-avatar-preview-wrap 保留兼容，不再使用 */
.me-avatar-preview-wrap{display:flex;align-items:center;gap:14px}
.me-avatar-preview-wrap img{
width:96px;height:96px;object-fit:cover;display:block;
box-shadow:0 0 0 3px var(--me-line,#1A1310);
}
.me-avatar-preview-hint{font-family:var(--me-font-hand,'Caveat',cursive);font-size:18px;font-weight:500;color:var(--me-grape-dk,#9E54CC)}
.me-avatar-hint{margin:0;font-family:var(--me-font-body,'Nunito',sans-serif);font-size:12px;color:var(--me-ink-3,#74604F);font-weight:600;max-width:320px}
.me-btn[disabled]{opacity:.4;cursor:not-allowed}
.me-btn[disabled]:hover{transform:none;box-shadow:0 0 0 2.5px var(--me-line,#1A1310), 4px 4px 0 0 var(--me-line,#1A1310)}
.me-avatar-foot{
padding:18px 26px 22px;display:flex;gap:10px;flex-wrap:wrap;
margin-top:8px;
}
.me-avatar-foot .me-avatar-clear-btn{margin-left:auto}
/* av-circle button 形态：去掉默认 button 样式 */
.view-me .me-hero-av-circle{border:0;padding:0}
.view-me .me-hero-av-circle.me-clickable{cursor:pointer;transition:transform .15s ease}
.view-me .me-hero-av-circle.me-clickable:hover{transform:translateY(-3px)}
.view-me .me-hero-av-circle.me-clickable:active{transform:translateY(-1px)}
.view-me .me-hero-av-img{
width:100%;height:100%;object-fit:cover;display:block;
border-radius:50%;
}
/* —— luxe 覆盖 —— */
html[data-theme="luxe"] .me-avatar-overlay{background:rgba(0,0,0,.85)}
html[data-theme="luxe"] .me-avatar-modal{
background:var(--me-card);color:var(--me-ink);
box-shadow:0 0 0 1px var(--me-line);
border-top:3px solid var(--me-tang);
}
html[data-theme="luxe"] .me-avatar-modal-head h3{
font-family:var(--me-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
}
html[data-theme="luxe"] .me-avatar-x{
box-shadow:0 0 0 1px var(--me-line);color:var(--me-ink);
}
html[data-theme="luxe"] .me-avatar-x:hover{background:var(--me-tang);color:var(--me-bg)}
html[data-theme="luxe"] .me-avatar-cell{
background:var(--me-card-dk);color:var(--me-ink);
box-shadow:inset 0 0 0 1px var(--me-line);
}
html[data-theme="luxe"] .me-avatar-cell:hover{
transform:none;box-shadow:inset 0 0 0 1px var(--me-tang);background:var(--me-bg);
}
html[data-theme="luxe"] .me-avatar-cell.is-on{
background:var(--me-tang);color:var(--me-bg);
box-shadow:inset 0 0 0 1px var(--me-tang);transform:none;
}
html[data-theme="luxe"] .me-avatar-divider{
color:var(--me-ink-3);font-family:var(--me-font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
}
html[data-theme="luxe"] .me-avatar-divider::before,
html[data-theme="luxe"] .me-avatar-divider::after{background:var(--me-line)}
html[data-theme="luxe"] .me-avatar-preview-circle{
background:var(--me-bg);color:var(--me-tang);
box-shadow:inset 0 0 0 2px var(--me-tang);
border-radius:0;
}
html[data-theme="luxe"] .me-avatar-preview-circle .me-hero-av-img{border-radius:0}
html[data-theme="luxe"] .me-avatar-preview-label{
font-family:var(--me-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--me-ink-3);font-weight:400;
}
html[data-theme="luxe"] .me-avatar-preview-wrap img{box-shadow:0 0 0 1px var(--me-tang)}
html[data-theme="luxe"] .me-avatar-preview-hint{
font-family:var(--me-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--me-tang);font-weight:500;
}
html[data-theme="luxe"] .me-avatar-hint{font-family:var(--me-font-mono);font-size:11px;color:var(--me-ink-3);font-weight:400}
html[data-theme="luxe"] .me-avatar-foot{border-top:1px solid var(--me-line);padding-top:18px}
/* ════════════════════════════════════════════════════════════════════════
BLACK + GOLD 流光升级（1:1 复刻 preview6b 视觉招式，配色换金色家族）
2026-05-24 在所有 luxe me-* 原"警示风"规则之上再叠一层："圆角玻璃面板 +
1px 金色描边 + 顶端高光带 + 大数字金色渐变 + 圆角圆头像金色渐变 +
角落径向辉光 + glow 按钮"。仅 #/me 路由生效。 */
/* —— 所有 .me-* 容器：圆角玻璃面板（替原"直角无圆角"+ 金色描边 + 内顶端高光） —— */
html[data-theme="luxe"] .view-me .me-hero,
html[data-theme="luxe"] .view-me .me-stat,
html[data-theme="luxe"] .view-me .me-today,
html[data-theme="luxe"] .view-me .me-week,
html[data-theme="luxe"] .view-me .me-pvp-card,
html[data-theme="luxe"] .view-me .me-pvp-history-wrap,
html[data-theme="luxe"] .view-me .me-favorites,
html[data-theme="luxe"] .view-me .me-prefs-wrap,
html[data-theme="luxe"] .view-me .me-guest-body{
background:var(--me-card) !important;
border:1px solid var(--me-line) !important;
border-radius:20px !important;
box-shadow:0 18px 50px rgba(0,0,0,.50), inset 0 0 0 1px rgba(0,212,255,.06) !important;
backdrop-filter:blur(28px) saturate(140%);
-webkit-backdrop-filter:blur(28px) saturate(140%);
position:relative;overflow:hidden;
}
html[data-theme="luxe"] .view-me .me-hero{border-radius:24px !important}
html[data-theme="luxe"] .view-me .me-hero::before{
/* 顶端 1.5px 金色 → 琥珀渐变光带（替原"4px 实色顶边"） */
content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
background:linear-gradient(90deg, var(--me-tang), var(--me-grape) 60%, var(--me-sun)) !important;
display:block !important;
}
html[data-theme="luxe"] .view-me .me-stat{
border-radius:18px !important;
}
html[data-theme="luxe"] .view-me .me-stat::after{
/* 右上角金色径向辉光（preview6b 的 .stat::after 复刻） */
content:"";position:absolute;top:-50px;right:-50px;width:160px;height:160px;border-radius:50%;
background:radial-gradient(circle, var(--me-tang) 0%, transparent 60%);
opacity:.18;filter:blur(20px);pointer-events:none;display:block;
}
html[data-theme="luxe"] .view-me .me-stat.me-stat-c2::after{background:radial-gradient(circle, var(--me-grape) 0%, transparent 60%);opacity:.22}
html[data-theme="luxe"] .view-me .me-stat.me-stat-c3::after{background:radial-gradient(circle, var(--me-sun) 0%, transparent 60%);opacity:.18}
html[data-theme="luxe"] .view-me .me-stat.me-stat-c4::after{background:radial-gradient(circle, var(--me-rose) 0%, transparent 60%);opacity:.22}
/* —— Avatar：金色渐变圆 + 多层 box-shadow 光晕（preview6b 复刻） —— */
html[data-theme="luxe"] .view-me .me-hero-av-circle{
width:130px !important;height:130px !important;border-radius:50% !important;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 50%),
linear-gradient(135deg, var(--me-tang), var(--me-grape)) !important;
background-color:transparent !important;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.20),
inset 0 -20px 60px rgba(76,54,255,.40),
0 20px 60px rgba(0,212,255,.30),
0 0 80px rgba(156,255,109,.18) !important;
color:rgba(255,255,255,.92) !important;
}
html[data-theme="luxe"] .view-me .me-hero-av-circle svg{
width:70px !important;height:70px !important;
filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
html[data-theme="luxe"] .view-me .me-hero-av-img{border-radius:50% !important}
html[data-theme="luxe"] .view-me .me-hero-lvl{
background:linear-gradient(135deg, var(--me-rose), var(--me-grape)) !important;
color:#fff !important;
border-radius:999px !important;padding:6px 12px !important;
box-shadow:0 8px 24px rgba(76,54,255,.50), inset 0 0 0 1px rgba(255,255,255,.30) !important;
letter-spacing:.10em !important;font-family:var(--me-font-mono) !important;font-weight:500 !important;
transform:none !important;
}
/* —— 大数字渐变文字（preview6b 复刻：hero pvp pts / stat-v / today-num） —— */
html[data-theme="luxe"] .view-me .me-hero-pvp-pts,
html[data-theme="luxe"] .view-me .me-hero-pvp-pts.me-hero-pvp-pts,
html[data-theme="luxe"] .view-me .me-stat-v,
html[data-theme="luxe"] .view-me .me-today-num b,
html[data-theme="luxe"] .view-me .me-pvp-info .me-pvp-pts,
html[data-theme="luxe"] .view-me #me-rating.me-pvp-pts,
html[data-theme="luxe"] .view-me .me-pvp-pts{
background:linear-gradient(135deg, var(--me-ink), var(--me-tang)) !important;
-webkit-background-clip:text !important;background-clip:text !important;
-webkit-text-fill-color:transparent !important;color:transparent !important;
}
/* 数字 small 后缀保持金色实色（不参与渐变） */
html[data-theme="luxe"] .view-me .me-stat-v small,
html[data-theme="luxe"] .view-me .me-today-num b small{
background:none !important;
-webkit-text-fill-color:var(--me-tang) !important;color:var(--me-tang) !important;
}
/* —— Section 小图标：玻璃 panel + 金色 svg —— */
html[data-theme="luxe"] .view-me .me-section-ic{
width:36px;height:36px;border-radius:10px;
background:rgba(0,212,255,.08) !important;
border:1px solid var(--me-line);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
color:var(--me-tang) !important;
}
html[data-theme="luxe"] .view-me .me-section-ic svg{color:var(--me-tang)}
/* —— Hello bar pill：胶囊形 + 金色边 + svg 点 —— */
html[data-theme="luxe"] .view-me .me-pill{
background:rgba(0,212,255,.06) !important;
border:1px solid var(--me-line) !important;
border-left:1px solid var(--me-line) !important;
border-radius:999px !important;
color:var(--me-ink-2) !important;
padding:5px 12px !important;
backdrop-filter:blur(16px);
}
html[data-theme="luxe"] .view-me .me-pill::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--me-tang);box-shadow:0 0 8px var(--me-tang);
margin-right:6px;vertical-align:middle;
}
html[data-theme="luxe"] .view-me .me-pill-sun{
background:rgba(156,255,109,.10) !important;border-color:rgba(156,255,109,.30) !important;
}
html[data-theme="luxe"] .view-me .me-pill-mint::before{background:var(--me-sun);box-shadow:0 0 8px var(--me-sun)}
/* —— Btn：玻璃面板 + 金渐变 + glow hover —— */
html[data-theme="luxe"] .view-me .me-btn{
background:linear-gradient(135deg, rgba(0,212,255,.20), rgba(76,54,255,.08)) !important;
border:1px solid rgba(0,212,255,.30) !important;
border-radius:14px !important;
border-left:1px solid rgba(0,212,255,.30) !important;
color:var(--me-ink) !important;
box-shadow:inset 0 0 20px rgba(0,212,255,.08) !important;
padding:14px 20px !important;
transition:transform .2s, box-shadow .2s, border-color .2s !important;
}
html[data-theme="luxe"] .view-me .me-btn:hover{
transform:translateY(-2px) !important;
box-shadow:0 12px 30px rgba(0,212,255,.25), inset 0 0 30px rgba(0,212,255,.15) !important;
border-color:rgba(0,212,255,.55) !important;
background:linear-gradient(135deg, rgba(0,212,255,.30), rgba(76,54,255,.14)) !important;
color:var(--me-ink) !important;
}
html[data-theme="luxe"] .view-me .me-btn-mint{
background:linear-gradient(135deg, rgba(156,255,109,.22), rgba(0,212,255,.10)) !important;
border-color:rgba(156,255,109,.35) !important;
}
html[data-theme="luxe"] .view-me .me-btn-sky{
background:linear-gradient(135deg, rgba(76,54,255,.20), rgba(76,54,255,.10)) !important;
border-color:rgba(76,54,255,.30) !important;
}
html[data-theme="luxe"] .view-me .me-btn-tang{
background:linear-gradient(135deg, rgba(255,84,176,.20), rgba(255,84,176,.10)) !important;
border-color:rgba(255,84,176,.30) !important;
}
/* —— 圆环：金渐变 stroke + drop-shadow glow —— */
html[data-theme="luxe"] .view-me .me-today-ring svg{
filter:drop-shadow(0 0 24px rgba(0,212,255,.30));
}
html[data-theme="luxe"] .view-me .me-today-stamp{
background:linear-gradient(135deg, var(--me-grape), var(--me-tang)) !important;
color:#060814 !important;
border:1px solid rgba(255,255,255,.20);
border-radius:999px !important;
box-shadow:0 4px 16px rgba(0,212,255,.30) !important;
transform:none !important;
}
/* —— 收藏标签 tabs：玻璃 + 金渐变 active —— */
html[data-theme="luxe"] .view-me .me-fav-tabs{
background:rgba(0,212,255,.04) !important;
border:1px solid var(--me-line) !important;
border-radius:14px !important;
padding:4px !important;
}
html[data-theme="luxe"] .view-me [data-fav-tab]{
border-radius:10px !important;border-left:0 !important;
}
html[data-theme="luxe"] .view-me [data-fav-tab].is-on{
background:linear-gradient(135deg, var(--me-tang), var(--me-grape)) !important;
color:#060814 !important;
box-shadow:0 4px 16px rgba(0,212,255,.30) !important;
}
/* —— Search field：圆角胶囊 —— */
html[data-theme="luxe"] .view-me .me-fav-search{
background:rgba(0,212,255,.04) !important;
border:1px solid var(--me-line) !important;
border-radius:999px !important;
color:var(--me-ink) !important;
padding:10px 16px !important;
}
html[data-theme="luxe"] .view-me .me-fav-search:focus{
border-color:rgba(0,212,255,.40) !important;
}
/* —— Fav card 单卡：圆角 + 金渐变背景 + hover glow —— */
html[data-theme="luxe"] .view-me .me-fav-item{
background:linear-gradient(135deg, rgba(76,54,255,.10), rgba(0,212,255,.04)) !important;
border:1px solid rgba(0,212,255,.18) !important;
border-left:1px solid rgba(0,212,255,.18) !important;
border-radius:18px !important;
transition:transform .2s, box-shadow .2s, border-color .2s !important;
}
html[data-theme="luxe"] .view-me .me-fav-item:hover{
transform:translateY(-3px) !important;
box-shadow:0 16px 36px rgba(0,0,0,.35) !important;
border-color:rgba(0,212,255,.40) !important;
background:linear-gradient(135deg, rgba(76,54,255,.14), rgba(0,212,255,.06)) !important;
}
/* —— Match log 行：玻璃 hover —— */
html[data-theme="luxe"] .view-me .me-match{
border-radius:12px !important;
background:rgba(0,212,255,.04) !important;
border:1px solid var(--me-line) !important;
transition:background .15s, border-color .15s;
}
html[data-theme="luxe"] .view-me .me-match:hover{background:rgba(0,212,255,.08) !important;border-color:rgba(0,212,255,.25) !important}
/* —— PvP trophy crest：金渐变盾形 —— */
html[data-theme="luxe"] .view-me .me-pvp-trophy{
border-radius:50% !important;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 40%),
linear-gradient(135deg, var(--me-grape), var(--me-tang)) !important;
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,.25),
inset 0 -20px 40px rgba(76,54,255,.50),
0 16px 50px rgba(0,212,255,.30) !important;
color:rgba(255,255,255,.92) !important;
border:none !important;
}
html[data-theme="luxe"] .view-me .me-pvp-trophy::after{display:none !important}
html[data-theme="luxe"] .view-me .me-pvp-trophy svg{
width:54px !important;height:54px !important;
filter:drop-shadow(0 4px 12px rgba(0,0,0,.30));
}
/* —— rs 战绩格：圆角 panel —— */
html[data-theme="luxe"] .view-me .me-rs{
background:rgba(0,212,255,.04) !important;
border:1px solid var(--me-line) !important;
border-radius:14px !important;
padding:14px 8px !important;
}
html[data-theme="luxe"] .view-me .me-rs:nth-child(n){background:rgba(0,212,255,.04) !important}
/* —— pref 行：圆角 hover panel + 金圆点 chk —— */
html[data-theme="luxe"] .view-me .pf-pref-row{
border-radius:14px !important;
padding:16px 22px !important;border-left:0 !important;
}
html[data-theme="luxe"] .view-me .pf-pref-row + .pf-pref-row{border-top:1px solid var(--me-line) !important}
html[data-theme="luxe"] .view-me .pf-pref-row:hover{background:rgba(0,212,255,.04) !important}
html[data-theme="luxe"] .view-me .pf-pref-k::before{
content:"";display:inline-block !important;
width:8px;height:8px;border-radius:50%;
background:var(--me-tang);box-shadow:0 0 8px var(--me-tang);
margin-right:10px;vertical-align:middle;
}
/* —— Colophon：玻璃面板 + 金渐变标语 —— */
html[data-theme="luxe"] .view-me .me-colophon{
background:rgba(0,212,255,.04) !important;
border:1px solid var(--me-line) !important;
border-radius:18px !important;
box-shadow:0 18px 50px rgba(0,0,0,.40), inset 0 0 0 1px rgba(0,212,255,.06) !important;
padding:26px 32px !important;
backdrop-filter:blur(20px);
}
html[data-theme="luxe"] .view-me .me-colophon::before{display:none !important}
html[data-theme="luxe"] .view-me .me-colophon-c{
background:transparent !important;
color:var(--me-tang) !important;
-webkit-text-fill-color:var(--me-tang) !important;
font-family:'Instrument Serif',serif !important;font-style:italic;font-weight:400;font-size:22px;
text-transform:none !important;letter-spacing:0 !important;
}
/* —— hero-pvp 右上块：金渐变玻璃 —— */
html[data-theme="luxe"] .view-me .me-hero-pvp{
background:linear-gradient(135deg, rgba(0,212,255,.20), rgba(76,54,255,.06)) !important;
border:1px solid rgba(0,212,255,.30) !important;
border-radius:18px !important;
box-shadow:inset 0 0 30px rgba(0,212,255,.08), 0 8px 30px rgba(76,54,255,.20) !important;
padding:18px 24px !important;
}
/* —— Week bars：渐变顶端 + 内描边 + 顶 glow —— */
html[data-theme="luxe"] .view-me .pgd-day-bar{
border-radius:8px 8px 4px 4px !important;
background:linear-gradient(180deg, var(--me-tang), rgba(0,212,255,.4)) !important;
box-shadow:0 -4px 16px rgba(0,212,255,.30), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
html[data-theme="luxe"] .view-me .pgd-day-bar.done{
background:linear-gradient(180deg, var(--me-tang), rgba(76,54,255,.5)) !important;
box-shadow:0 -4px 20px rgba(0,212,255,.40), inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
html[data-theme="luxe"] .view-me .pgd-day-bar.partial{
background:linear-gradient(180deg, var(--me-sun), rgba(156,255,109,.4)) !important;
}
html[data-theme="luxe"] .view-me .pgd-day-circle.done{
background:linear-gradient(135deg, var(--me-tang), var(--me-grape)) !important;color:#060814 !important;
box-shadow:0 4px 12px rgba(0,212,255,.30) !important;
}
/* —— Week foot：圆角玻璃带 —— */
html[data-theme="luxe"] .view-me .me-week-foot{
background:rgba(0,212,255,.04) !important;
border:1px solid var(--me-line) !important;
border-radius:14px !important;
padding:16px 22px !important;
margin-top:18px;
}
/* hero av-img 在 luxe 主题下：圆形 + 金边（覆盖原"方形不圆") */
html[data-theme="luxe"] .view-me .me-hero-av-img{border-radius:50%}
/* ====================================================================
全局右上角浮动控件：语言切换（#top-lang-btn）+ 账户头像（#top-account-btn）
挂载/事件在 js/app.js 的 ensureTopRightControls() 里
默认色按 luxe 主题（半透明白）；cartoon 主题切到 Duolingo 彩色实心
==================================================================== */
.tr-btn{
position:relative;
width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:rgba(255,255,255,.78);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .15s;
}
.tr-btn-acct{color:rgba(255,255,255,.92);font-weight:600;}
/* 铃铛右上角红点：有未读公告时显示，点开看过 markBellRead 后隐藏（[[js/nav.js checkBellUnread]]）
呼吸动画 = 红点本身轻微缩放 + 外圈红色光晕从内向外扩散淡出，每 1.6s 一轮 */
.tr-bell-dot{
--bell-ring: #0a0a0c; /* luxe 默认黑环；cartoon 主题下被覆盖成奶油白 */
position:absolute;top:-2px;right:-2px;
width:10px;height:10px;border-radius:50%;
background:#ef4444;
box-shadow:0 0 0 2px var(--bell-ring), 0 0 0 0 rgba(239,68,68,.55);
transform-origin:center;
animation:tr-bell-pulse 1.6s ease-out infinite;
}
html[data-theme="cartoon"] .tr-bell-dot{--bell-ring:#fff8ee;}
/* luxe.css ~13689 行通配 `html[data-theme="luxe"] * { animation-name:none !important }` 会杀掉命名动画，
这里用更高的类选择器特异性 (.tr-bell-dot 0,2,0,1 > * 0,1,0,1) + !important 把铃铛红点的动画扳回来 */
html[data-theme="luxe"] .tr-bell-dot{animation-name:tr-bell-pulse !important;}
@keyframes tr-bell-pulse{
0% {transform:scale(1); box-shadow:0 0 0 2px var(--bell-ring), 0 0 0 0 rgba(239,68,68,.55);}
60% {transform:scale(1.18);box-shadow:0 0 0 2px var(--bell-ring), 0 0 0 9px rgba(239,68,68,0);}
100% {transform:scale(1); box-shadow:0 0 0 2px var(--bell-ring), 0 0 0 0 rgba(239,68,68,0);}
}
@media (prefers-reduced-motion: reduce){
.tr-bell-dot{animation:none !important;}
html[data-theme="luxe"] .tr-bell-dot{animation-name:none !important;}
}
.tr-btn:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,1);}
.tr-avatar{font-size:14px;letter-spacing:.3px;}
.tr-streak{
position:absolute;top:-4px;right:-4px;
min-width:17px;height:17px;padding:0 4px;
border-radius:9px;
background:linear-gradient(135deg,#ff9600,#ff6a00);
color:#fff;font-size:10px;font-weight:800;line-height:1;
align-items:center;justify-content:center;letter-spacing:.2px;
box-shadow:0 0 0 2px #0a0a0c;
}
/* —— 卡通主题：换上 Duolingo 实心彩色 + 厚底阴影（仿 push-button） —— */
html[data-theme="cartoon"] .tr-btn{
border-color:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;
color:#fff;
}
html[data-theme="cartoon"] .tr-btn-lang{
background:#1cb0f6; /* Duo 天蓝 */
box-shadow:0 3px 0 #1899d6,0 4px 12px rgba(28,176,246,.28);
}
html[data-theme="cartoon"] .tr-btn-lang:hover{
background:#2cc0ff;color:#fff;
transform:translateY(-1px);
box-shadow:0 4px 0 #1899d6,0 6px 16px rgba(28,176,246,.34);
}
html[data-theme="cartoon"] .tr-btn-acct{
background:#58cc02; /* Duo 薄荷绿 */
box-shadow:0 3px 0 #46a302,0 4px 12px rgba(88,204,2,.28);
}
html[data-theme="cartoon"] .tr-btn-acct:hover{
background:#6ad810;color:#fff;
transform:translateY(-1px);
box-shadow:0 4px 0 #46a302,0 6px 16px rgba(88,204,2,.34);
}
html[data-theme="cartoon"] .tr-btn-bell{
background:#ff9600; /* Duo 橙 */
box-shadow:0 3px 0 #d97e00,0 4px 12px rgba(255,150,0,.28);
}
html[data-theme="cartoon"] .tr-btn-bell:hover{
background:#ffa820;color:#fff;
transform:translateY(-1px);
box-shadow:0 4px 0 #d97e00,0 6px 16px rgba(255,150,0,.34);
}
/* 卡通浅底 → streak 红章的暗色描边换成白环，融合奶油/米白底 */
html[data-theme="cartoon"] .tr-streak{box-shadow:0 0 0 2px #fff;}