/* 帮帮我 — 主题系统
* 通过 切换。
* 缺省（无 data-theme）= apple-white。
*/
:root {
--theme-transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* ========== Apple White（默认：苹果官网白） ========== */
html:not([data-theme]),
html[data-theme="apple-white"] {
--ink: #1d1d1f;
--ink-soft: #424245;
--muted: #6e6e73;
--line: rgba(0, 0, 0, 0.08);
--surface: rgba(255, 255, 255, 0.78);
--surface-solid: #f5f5f7;
--accent: #0071e3;
--accent-hover: #0077ed;
--teal: #3478f6;
--teal-deep: #0b5ce8;
--bg-top: #fbfbfd;
--bg-mid: #f5f5f7;
--bg-bottom: #ffffff;
--shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.06);
--body-gradient:
radial-gradient(ellipse 90% 55% at 10% -10%, rgba(0, 113, 227, 0.08), transparent 55%),
radial-gradient(ellipse 70% 45% at 95% 5%, rgba(52, 120, 246, 0.05), transparent 50%),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 38%, var(--bg-bottom) 100%);
--brand-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"PingFang SC", "Helvetica Neue", sans-serif;
--radius: 10px;
--btn-radius: 980px; /* 苹果风圆角胶囊 */
}
/* ========== Apple Black（苹果深色模式） ========== */
html[data-theme="apple-black"] {
--ink: #f5f5f7;
--ink-soft: #d2d2d7;
--muted: #86868b;
--line: rgba(255, 255, 255, 0.12);
--surface: rgba(28, 28, 30, 0.78);
--surface-solid: #1c1c1e;
--accent: #2997ff;
--accent-hover: #0a84ff;
--teal: #30d158;
--teal-deep: #27b24d;
--bg-top: #000000;
--bg-mid: #0a0a0a;
--bg-bottom: #141414;
--shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.5);
--body-gradient:
radial-gradient(ellipse 90% 55% at 10% -10%, rgba(41, 151, 255, 0.12), transparent 55%),
radial-gradient(ellipse 70% 45% at 95% 5%, rgba(48, 209, 88, 0.05), transparent 50%),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 38%, var(--bg-bottom) 100%);
--brand-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"PingFang SC", "Helvetica Neue", sans-serif;
--radius: 10px;
--btn-radius: 980px;
}
/* ========== Tesla（极简未来感 + 特斯拉红） ========== */
html[data-theme="tesla"] {
--ink: #171a20;
--ink-soft: #393c42;
--muted: #6b6e75;
--line: rgba(23, 26, 32, 0.12);
--surface: rgba(245, 245, 247, 0.78);
--surface-solid: #ececef;
--accent: #e31937;
--accent-hover: #c41430;
--teal: #393c42;
--teal-deep: #171a20;
--bg-top: #f2f2f5;
--bg-mid: #e8e8ec;
--bg-bottom: #dcdce0;
--shadow-soft: 0 10px 30px rgba(23, 26, 32, 0.1);
--body-gradient:
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-bottom) 100%);
--brand-font: "Inter", "Helvetica Neue", "PingFang SC", sans-serif;
--radius: 2px; /* 特斯拉棱角感 */
--btn-radius: 2px;
}
/* ========== NVIDIA（暗黑 + 荧光绿） ========== */
html[data-theme="nvidia"] {
--ink: #e8e8e8;
--ink-soft: #c4c4c4;
--muted: #888888;
--line: rgba(118, 185, 0, 0.18);
--surface: rgba(30, 30, 30, 0.82);
--surface-solid: #1e1e1e;
--accent: #76b900;
--accent-hover: #8fd400;
--teal: #c9df32;
--teal-deep: #a8c11e;
--bg-top: #0a0a0a;
--bg-mid: #141414;
--bg-bottom: #1a1a1a;
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.55);
--body-gradient:
radial-gradient(ellipse 90% 55% at 10% -10%, rgba(118, 185, 0, 0.14), transparent 55%),
radial-gradient(ellipse 70% 45% at 95% 5%, rgba(201, 223, 50, 0.06), transparent 50%),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 38%, var(--bg-bottom) 100%);
--brand-font: "Inter", "Helvetica Neue", "PingFang SC", sans-serif;
--radius: 4px;
--btn-radius: 4px;
}
/* ====== 通用适配：让关键部件自动跟随主题 ====== */
body {
background: var(--body-gradient);
background-attachment: fixed;
transition: var(--theme-transition);
}
/* 深色主题自动反转输入框 */
html[data-theme="apple-black"] .field input,
html[data-theme="apple-black"] .field textarea,
html[data-theme="apple-black"] .field select,
html[data-theme="nvidia"] .field input,
html[data-theme="nvidia"] .field textarea,
html[data-theme="nvidia"] .field select {
background: #2a2a2a;
color: var(--ink);
}
html[data-theme="apple-black"] .modal,
html[data-theme="nvidia"] .modal {
background: #1c1c1e;
color: var(--ink);
}
html[data-theme="apple-black"] .modal-actions,
html[data-theme="nvidia"] .modal-actions {
background: #1c1c1e;
border-top-color: var(--line);
}
/* 特斯拉主题：去掉圆角，加强线条 */
html[data-theme="tesla"] .btn {
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
html[data-theme="tesla"] .hero h1 {
letter-spacing: -0.01em;
font-weight: 700;
}
/* NVIDIA：科技感字体加粗 + 荧光强调 */
html[data-theme="nvidia"] .hero h1 em {
text-shadow: 0 0 24px rgba(118, 185, 0, 0.45);
}
html[data-theme="nvidia"] .brand {
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* 右上角：语言 + 主题（纯控件，无前置文案） */
.top-controls {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.45rem;
z-index: 50;
}
.lang-switch,
.theme-switch {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem;
margin: 0;
background: var(--surface, rgba(255, 255, 255, 0.86));
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border: 1px solid var(--line);
border-radius: 980px;
box-shadow: var(--shadow-soft);
}
/* 禁止任何前置说明文字 */
.lang-switch::before,
.theme-switch::before,
.top-controls::before {
content: none !important;
display: none !important;
}
.lang-switch button {
position: relative;
min-width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ink-soft);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
padding: 0 0.35rem;
transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.lang-switch button:hover {
color: var(--ink);
transform: scale(1.06);
}
.lang-switch button[aria-pressed="true"] {
background: var(--accent);
color: #fff;
}
/* 深色主题下语言按钮选中反色 */
html[data-theme="apple-black"] .lang-switch button[aria-pressed="true"],
html[data-theme="nvidia"] .lang-switch button[aria-pressed="true"] {
color: #000;
}
.theme-switch button {
position: relative;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--line);
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.theme-switch button:hover {
transform: scale(1.12);
}
.theme-switch button[aria-pressed="true"] {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.35);
}
.theme-switch .t-apple-white { background: linear-gradient(135deg, #fff, #f5f5f7); }
.theme-switch .t-apple-black { background: linear-gradient(135deg, #1c1c1e, #000); }
.theme-switch .t-tesla { background: linear-gradient(135deg, #e31937, #f5f5f7); }
.theme-switch .t-nvidia { background: linear-gradient(135deg, #1a1a1a, #76b900); }
/* 悬停提示：仅浮层，不占布局 */
.theme-switch button::after,
.lang-switch button::after {
content: attr(data-label);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--ink);
color: #fff;
font-size: 0.68rem;
font-weight: 600;
padding: 3px 7px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 51;
}
.theme-switch button:hover::after,
.lang-switch button:hover::after {
opacity: 1;
}
@media (max-width: 480px) {
.top-controls {
top: 0.65rem;
right: 0.65rem;
gap: 0.35rem;
}
.lang-switch button {
min-width: 26px;
height: 26px;
}
.theme-switch button {
width: 20px;
height: 20px;
}
}