/* 前台共享布局样式（主流：全宽 Header + 内层容器对齐） */
html {
scrollbar-gutter: stable;
}
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* 主流：大屏限制正文最大宽度，避免 100% 铺满 */
--tix-page-max: 1200px;
--tix-page-pad: 60px;
--tix-header-h: 80px;
/*
* 全站语义色（调色“单一真值源”）
* 使用规则：
* 1) 前台模板禁止直接写 #hex/rgb，统一引用本组变量。
* 2) 语义优先于颜色名：先表达用途，再映射具体色值。
* 3) strong/soft/bg/border 为同一语义的层级，不同状态组件按层级组合。
* 语义分组：
* - brand: 品牌主按钮/主链接/主 CTA
* - info: 信息提示、次级强调、可读提醒
* - success: 成功结果、完成态、正向反馈
* - warning: 风险提醒、待处理、需关注但非错误
* - danger: 错误、失败、破坏性操作
*/
--tds-color-bg-page: #fafbfc;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #f4f6f8;
--tds-color-text-strong: #161616;
--tds-color-text-main: #2a2a2a;
--tds-color-text-muted: #5f5f5f;
--tds-color-border-main: #e7eaee;
--tds-color-accent-soft: #6f859d;
--tds-color-brand: #2b2f36;
--tds-color-brand-hover: #1f2329;
--tds-color-accent: #15803d;
--tds-color-danger: #b91c1c;
--tds-color-success: #16a34a;
--tds-color-danger-strong: #991b1b;
--tds-color-danger-soft: #f87171;
--tds-color-danger-border-soft: #fca5a5;
--tds-color-danger-bg-soft: #fff1f2;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #9a3412;
--tds-color-warning-soft: #f59e0b;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-info: #2563eb;
--tds-color-info-strong: #1e40af;
--tds-color-info-border-soft: #bfdbfe;
--tds-color-info-bg-soft: #eff6ff;
--tds-color-success-strong: #2e7d32;
--tds-color-success-bg-soft: #e8f5e9;
--tds-color-upload-icon-fg: #6b7280;
--tds-color-upload-icon-bg: #ecfdf3;
--tds-color-text-inverse: #ffffff;
--tds-color-text-inverse-soft: rgba(255, 255, 255, 0.9);
--tds-color-overlay-action-border: rgba(255, 255, 255, 0.35);
--tds-color-overlay-action-border-strong: rgba(255, 255, 255, 0.7);
--tds-color-overlay-action-bg: rgba(0, 0, 0, 0.22);
--tds-color-overlay-action-bg-hover: rgba(0, 0, 0, 0.3);
--tds-color-overlay-action-bg-active: rgba(255, 255, 255, 0.2);
/* alpha / overlay tokens（模板禁止直写 rgba，统一走此处） */
--tds-alpha-black-03: rgba(0, 0, 0, 0.03);
--tds-alpha-black-04: rgba(0, 0, 0, 0.04);
--tds-alpha-black-05: rgba(0, 0, 0, 0.05);
--tds-alpha-black-06: rgba(0, 0, 0, 0.06);
--tds-alpha-black-08: rgba(0, 0, 0, 0.08);
--tds-alpha-black-12: rgba(0, 0, 0, 0.12);
--tds-alpha-black-20: rgba(0, 0, 0, 0.2);
--tds-alpha-black-25: rgba(0, 0, 0, 0.25);
--tds-alpha-black-30: rgba(0, 0, 0, 0.3);
--tds-alpha-black-45: rgba(0, 0, 0, 0.45);
--tds-alpha-black-50: rgba(0, 0, 0, 0.5);
--tds-alpha-black-55: rgba(0, 0, 0, 0.55);
--tds-alpha-black-60: rgba(0, 0, 0, 0.6);
--tds-alpha-black-65: rgba(0, 0, 0, 0.65);
--tds-alpha-white-72: rgba(255, 255, 255, 0.72);
--tds-alpha-white-80: rgba(255, 255, 255, 0.8);
--tds-color-info-focus-ring: rgba(37, 99, 235, 0.12);
--tds-color-danger-focus-ring: rgba(248, 113, 113, 0.2);
--tds-color-warning-focus-ring: rgba(251, 191, 36, 0.2);
--tds-color-warning-focus-ring-strong: rgba(245, 158, 11, 0.25);
--tds-alpha-ink-00: rgba(17, 17, 17, 0);
--tds-alpha-ink-04: rgba(17, 17, 17, 0.04);
--tds-alpha-ink-08: rgba(17, 17, 17, 0.08);
--tds-alpha-ink-12: rgba(17, 17, 17, 0.12);
--tds-alpha-ink-22: rgba(17, 17, 17, 0.22);
--tds-alpha-slate-05: rgba(15, 23, 42, 0.05);
--tds-alpha-slate-08: rgba(15, 23, 42, 0.08);
--tds-alpha-slate-20: rgba(15, 23, 42, 0.2);
--tds-alpha-brand-14: rgba(43, 47, 54, 0.14);
--tds-alpha-brand-18: rgba(17, 24, 39, 0.18);
--tds-alpha-brand-55: rgba(17, 24, 39, 0.55);
--tds-alpha-brand-92: rgba(17, 24, 39, 0.92);
--tds-alpha-info-20: rgba(29, 78, 216, 0.2);
--tds-alpha-success-20: rgba(0, 128, 96, 0.2);
--tds-alpha-success-35: rgba(47, 107, 79, 0.35);
--tds-alpha-warning-10: rgba(255, 152, 0, 0.1);
--tds-alpha-warning-15: rgba(255, 152, 0, 0.15);
--tds-alpha-warning-30: rgba(255, 152, 0, 0.3);
--tds-alpha-carbon-06: rgba(32, 34, 35, 0.06);
--tds-alpha-carbon-08: rgba(32, 34, 35, 0.08);
--tds-alpha-bluegray-14: rgba(31, 41, 55, 0.14);
--tds-alpha-deep-08: rgba(12, 18, 28, 0.08);
--tds-shadow-card: 0 8px 24px rgba(12, 18, 28, 0.08);
/*
* 兼容旧变量（逐页迁移完成前保留）
* 注意：
* - 新代码优先使用 --tds-color-*。
* - 旧模板改造时可先映射到 --tix-*，再逐步替换为 --tds-color-*。
*/
--tix-bg-base: var(--tds-color-bg-page);
--tix-bg-surface: var(--tds-color-bg-surface);
--tix-bg-subtle: var(--tds-color-bg-subtle);
--tix-text-strong: var(--tds-color-text-strong);
--tix-text-main: var(--tds-color-text-main);
--tix-text-muted: var(--tds-color-text-muted);
--tix-border-main: var(--tds-color-border-main);
--tix-accent-soft: var(--tds-color-accent-soft);
--tix-cta-bg: var(--tds-color-brand);
--tix-cta-bg-hover: var(--tds-color-brand-hover);
}
/* 主题预设：通过 html[data-tds-theme] 切换语义色映射
* default-neutral 直接继承 :root（不需要单独主题块）。
*/
html[data-tds-theme="slate-blue"] {
--tds-color-bg-page: #f6f8fc;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #eff3fb;
--tds-color-text-strong: #172554;
--tds-color-text-main: #1e3a5f;
--tds-color-text-muted: #5b6b8c;
--tds-color-border-main: #d9e2f2;
--tds-color-accent-soft: #8fa3c7;
--tds-color-brand: #1e3a8a;
--tds-color-brand-hover: #1e40af;
--tds-color-accent: #2563eb;
--tds-color-info: #2563eb;
--tds-color-info-strong: #1e40af;
--tds-color-info-border-soft: #bfdbfe;
--tds-color-info-bg-soft: #eff6ff;
--tds-color-upload-icon-fg: #2563eb;
--tds-color-upload-icon-bg: #eff6ff;
--tds-color-success: #15803d;
--tds-color-success-strong: #166534;
--tds-color-success-bg-soft: #dcfce7;
--tds-color-warning: #b54708;
--tds-color-warning-strong: #93370d;
--tds-color-warning-soft: #f79009;
--tds-color-warning-border-soft: #fdb022;
--tds-color-warning-bg-soft: #fffaeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-success-20: rgba(0, 128, 96, 0.2);
--tds-alpha-success-35: rgba(47, 107, 79, 0.35);
}
html[data-tds-theme="amber-charcoal"] {
--tds-color-bg-page: #f8f6f2;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #f3eee6;
--tds-color-text-strong: #1f1f1f;
--tds-color-text-main: #2f2f2f;
--tds-color-text-muted: #6b6359;
--tds-color-border-main: #e3dbcf;
--tds-color-accent-soft: #b5a48d;
--tds-color-brand: #c25b12;
--tds-color-brand-hover: #9f470d;
--tds-color-accent: #d97706;
--tds-color-info: #c25b12;
--tds-color-info-strong: #9f470d;
--tds-color-info-border-soft: #f3c58d;
--tds-color-info-bg-soft: #fff1de;
--tds-color-upload-icon-fg: #9f470d;
--tds-color-upload-icon-bg: #fff1de;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="midnight-cyan"] {
--tds-color-bg-page: #f3f8fb;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #e8f2f7;
--tds-color-text-strong: #0f2940;
--tds-color-text-main: #1c3d58;
--tds-color-text-muted: #5a7489;
--tds-color-border-main: #d4e3ee;
--tds-color-accent-soft: #7ba8bf;
--tds-color-brand: #0f4c81;
--tds-color-brand-hover: #0b5f9c;
--tds-color-accent: #06b6d4;
--tds-color-info: #06b6d4;
--tds-color-info-strong: #0e7490;
--tds-color-info-border-soft: #a5f3fc;
--tds-color-info-bg-soft: #ecfeff;
--tds-color-upload-icon-fg: #0891b2;
--tds-color-upload-icon-bg: #ecfeff;
--tds-color-success: #0f766e;
--tds-color-success-strong: #115e59;
--tds-color-success-bg-soft: #ccfbf1;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="forest-legal"] {
--tds-color-bg-page: #f4f8f4;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #edf4ee;
--tds-color-text-strong: #163226;
--tds-color-text-main: #27483a;
--tds-color-text-muted: #5f7a6b;
--tds-color-border-main: #d6e2d9;
--tds-color-accent-soft: #7ea18e;
--tds-color-brand: #1f5f3f;
--tds-color-brand-hover: #1a4f35;
--tds-color-accent: #2f855a;
--tds-color-info: #2f855a;
--tds-color-info-strong: #276749;
--tds-color-info-border-soft: #b7ddc6;
--tds-color-info-bg-soft: #e9f6ee;
--tds-color-upload-icon-fg: #2f855a;
--tds-color-upload-icon-bg: #e9f6ee;
--tds-color-success: #1f7a4f;
--tds-color-success-strong: #185f3d;
--tds-color-success-bg-soft: #dff3e7;
--tds-color-warning: #9a5a1a;
--tds-color-warning-strong: #7a4613;
--tds-color-warning-soft: #c57a2b;
--tds-color-warning-border-soft: #e6b07a;
--tds-color-warning-bg-soft: #fcf4ea;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="charcoal-amber"] {
--tds-color-bg-page: #f6f4f1;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #efe9e2;
--tds-color-text-strong: #161616;
--tds-color-text-main: #2b2b2b;
--tds-color-text-muted: #6a6259;
--tds-color-border-main: #ddd3c7;
--tds-color-accent-soft: #b19c84;
--tds-color-brand: #ff8a00;
--tds-color-brand-hover: #e67700;
--tds-color-accent: #ff8a00;
--tds-color-info: #ff8a00;
--tds-color-info-strong: #cc6f00;
--tds-color-info-border-soft: #ffd4a3;
--tds-color-info-bg-soft: #fff3e4;
--tds-color-upload-icon-fg: #cc6f00;
--tds-color-upload-icon-bg: #fff3e4;
--tds-color-success: #1f7a4f;
--tds-color-success-strong: #185f3d;
--tds-color-success-bg-soft: #dff3e7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="navy-gold"] {
--tds-color-bg-page: #f5f7fb;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #edf1f8;
--tds-color-text-strong: #0f1f3b;
--tds-color-text-main: #22385f;
--tds-color-text-muted: #5e6f8d;
--tds-color-border-main: #d8e0ef;
--tds-color-accent-soft: #9aa8c1;
--tds-color-brand: #162d5c;
--tds-color-brand-hover: #1f3f7d;
--tds-color-accent: #d4a017;
--tds-color-info: #d4a017;
--tds-color-info-strong: #a57c11;
--tds-color-info-border-soft: #f4df9f;
--tds-color-info-bg-soft: #fff7df;
--tds-color-upload-icon-fg: #a57c11;
--tds-color-upload-icon-bg: #fff7df;
--tds-color-success: #1f7a4f;
--tds-color-success-strong: #185f3d;
--tds-color-success-bg-soft: #dff3e7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="ocean-steel"] {
--tds-color-bg-page: #f2f7fa;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #e8f0f5;
--tds-color-text-strong: #132a3a;
--tds-color-text-main: #254355;
--tds-color-text-muted: #607b8d;
--tds-color-border-main: #d3e0e9;
--tds-color-accent-soft: #86a0b2;
--tds-color-brand: #1c4d6e;
--tds-color-brand-hover: #23658f;
--tds-color-accent: #0f88a8;
--tds-color-info: #0f88a8;
--tds-color-info-strong: #0c6f8a;
--tds-color-info-border-soft: #9fd4e3;
--tds-color-info-bg-soft: #e7f7fb;
--tds-color-upload-icon-fg: #0c6f8a;
--tds-color-upload-icon-bg: #e7f7fb;
--tds-color-success: #1f7a4f;
--tds-color-success-strong: #185f3d;
--tds-color-success-bg-soft: #dff3e7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="burgundy-sand"] {
--tds-color-bg-page: #f7f3f1;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #efe8e4;
--tds-color-text-strong: #3f1f2c;
--tds-color-text-main: #5a3342;
--tds-color-text-muted: #866573;
--tds-color-border-main: #e3d6cf;
--tds-color-accent-soft: #b69aa6;
--tds-color-brand: #7a223d;
--tds-color-brand-hover: #651c33;
--tds-color-accent: #b85a76;
--tds-color-info: #b85a76;
--tds-color-info-strong: #922f4e;
--tds-color-info-border-soft: #efbfd0;
--tds-color-info-bg-soft: #fdeff4;
--tds-color-upload-icon-fg: #922f4e;
--tds-color-upload-icon-bg: #fdeff4;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="ink-rose"] {
--tds-color-bg-page: #f9f7fb;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #f1edf7;
--tds-color-text-strong: #2a1f3d;
--tds-color-text-main: #45315f;
--tds-color-text-muted: #7a6b93;
--tds-color-border-main: #e1d8ee;
--tds-color-accent-soft: #b5a5cc;
--tds-color-brand: #3b2a5a;
--tds-color-brand-hover: #4a3670;
--tds-color-accent: #c0618b;
--tds-color-info: #c0618b;
--tds-color-info-strong: #9a486d;
--tds-color-info-border-soft: #f0c9da;
--tds-color-info-bg-soft: #fdf0f6;
--tds-color-upload-icon-fg: #9a486d;
--tds-color-upload-icon-bg: #fdf0f6;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="sunset-copper"] {
--tds-color-bg-page: #fbf6f1;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #f5ece4;
--tds-color-text-strong: #4a2d1e;
--tds-color-text-main: #68402b;
--tds-color-text-muted: #8b6a58;
--tds-color-border-main: #e7d7ca;
--tds-color-accent-soft: #c6a28b;
--tds-color-brand: #b65a2a;
--tds-color-brand-hover: #9e4d23;
--tds-color-accent: #e07a2d;
--tds-color-info: #e07a2d;
--tds-color-info-strong: #b85f20;
--tds-color-info-border-soft: #f3c8a2;
--tds-color-info-bg-soft: #fff3e7;
--tds-color-upload-icon-fg: #b85f20;
--tds-color-upload-icon-bg: #fff3e7;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="mint-sage"] {
--tds-color-bg-page: #f4faf6;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #eaf5ee;
--tds-color-text-strong: #1f3a2e;
--tds-color-text-main: #315646;
--tds-color-text-muted: #6a8a7a;
--tds-color-border-main: #d6e8dc;
--tds-color-accent-soft: #9ec3ad;
--tds-color-brand: #2f7a57;
--tds-color-brand-hover: #276749;
--tds-color-accent: #4ba97a;
--tds-color-info: #4ba97a;
--tds-color-info-strong: #2f7a57;
--tds-color-info-border-soft: #bfe4cc;
--tds-color-info-bg-soft: #edf9f1;
--tds-color-upload-icon-fg: #2f7a57;
--tds-color-upload-icon-bg: #edf9f1;
--tds-color-success: #238a5a;
--tds-color-success-strong: #1d6f49;
--tds-color-success-bg-soft: #dcf5e7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="obsidian"] {
--tds-color-bg-page: #121417;
--tds-color-bg-surface: #1a1d21;
--tds-color-bg-subtle: #22262c;
--tds-color-text-strong: #f3f4f6;
--tds-color-text-main: #e5e7eb;
--tds-color-text-muted: #9ca3af;
--tds-color-border-main: #323842;
--tds-color-accent-soft: #64748b;
--tds-color-brand: #0f172a;
--tds-color-brand-hover: #1e293b;
--tds-color-accent: #e5e7eb;
--tds-color-info: #38bdf8;
--tds-color-info-strong: #7dd3fc;
--tds-color-info-border-soft: #1e3a4a;
--tds-color-info-bg-soft: #0b1b24;
--tds-color-upload-icon-fg: #d1d5db;
--tds-color-upload-icon-bg: #2a3038;
--tds-color-success: #34d399;
--tds-color-success-strong: #6ee7b7;
--tds-color-success-bg-soft: #0f2c23;
--tds-color-warning: #f59e0b;
--tds-color-warning-strong: #fbbf24;
--tds-color-warning-soft: #f59e0b;
--tds-color-warning-border-soft: #7c5a15;
--tds-color-warning-bg-soft: #2a220f;
--tds-color-danger: #f87171;
--tds-color-danger-strong: #fca5a5;
--tds-color-danger-soft: #fda4af;
--tds-color-danger-border-soft: #7f1d1d;
--tds-color-danger-bg-soft: #2a1215;
}
html[data-tds-theme="graphite-soft"] {
--tds-color-bg-page: #1b1f24;
--tds-color-bg-surface: #232830;
--tds-color-bg-subtle: #2b313a;
--tds-color-text-strong: #f3f4f6;
--tds-color-text-main: #e5e7eb;
--tds-color-text-muted: #b4bcc8;
--tds-color-border-main: #3a424f;
--tds-color-accent-soft: #7b8798;
--tds-color-brand: #3b4657;
--tds-color-brand-hover: #4b596d;
--tds-color-accent: #7dd3fc;
--tds-color-info: #7dd3fc;
--tds-color-info-strong: #38bdf8;
--tds-color-info-border-soft: #33495a;
--tds-color-info-bg-soft: #1d2d3a;
--tds-color-upload-icon-fg: #cbd5e1;
--tds-color-upload-icon-bg: #2f3742;
--tds-color-success: #34d399;
--tds-color-success-strong: #6ee7b7;
--tds-color-success-bg-soft: #133328;
--tds-color-warning: #f59e0b;
--tds-color-warning-strong: #fbbf24;
--tds-color-warning-soft: #f59e0b;
--tds-color-warning-border-soft: #7c5a15;
--tds-color-warning-bg-soft: #2a220f;
--tds-color-danger: #f87171;
--tds-color-danger-strong: #fca5a5;
--tds-color-danger-soft: #fda4af;
--tds-color-danger-border-soft: #7f1d1d;
--tds-color-danger-bg-soft: #2a1215;
}
html[data-tds-theme="steel-blue"] {
--tds-color-bg-page: #f3f6fa;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #eaf0f6;
--tds-color-text-strong: #1a2f45;
--tds-color-text-main: #2e475f;
--tds-color-text-muted: #6c8196;
--tds-color-border-main: #d6e0ea;
--tds-color-accent-soft: #9aaec2;
--tds-color-brand: #2a4f73;
--tds-color-brand-hover: #33618f;
--tds-color-accent: #3e7fb8;
--tds-color-info: #3e7fb8;
--tds-color-info-strong: #2f6799;
--tds-color-info-border-soft: #b8d1e6;
--tds-color-info-bg-soft: #eef5fb;
--tds-color-upload-icon-fg: #2f6799;
--tds-color-upload-icon-bg: #eef5fb;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="royal-navy"] {
--tds-color-bg-page: #f2f5fa;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #e9eef7;
--tds-color-text-strong: #111f3b;
--tds-color-text-main: #243a63;
--tds-color-text-muted: #64779b;
--tds-color-border-main: #d3ddef;
--tds-color-accent-soft: #92a4c3;
--tds-color-brand: #142a57;
--tds-color-brand-hover: #1b3a78;
--tds-color-accent: #2f5fa8;
--tds-color-info: #2f5fa8;
--tds-color-info-strong: #234a85;
--tds-color-info-border-soft: #b2c5e7;
--tds-color-info-bg-soft: #edf3fc;
--tds-color-upload-icon-fg: #234a85;
--tds-color-upload-icon-bg: #edf3fc;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="cool-slate"] {
--tds-color-bg-page: #f4f6f8;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #eceff3;
--tds-color-text-strong: #1f2937;
--tds-color-text-main: #334155;
--tds-color-text-muted: #64748b;
--tds-color-border-main: #d9e0e8;
--tds-color-accent-soft: #93a1b3;
--tds-color-brand: #2f3f53;
--tds-color-brand-hover: #3b4f69;
--tds-color-accent: #4f6f8f;
--tds-color-info: #4f6f8f;
--tds-color-info-strong: #3f5d7a;
--tds-color-info-border-soft: #bfd0de;
--tds-color-info-bg-soft: #eff5fa;
--tds-color-upload-icon-fg: #3f5d7a;
--tds-color-upload-icon-bg: #eff5fa;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="smoke-graphite"] {
--tds-color-bg-page: #eef1f4;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #e5e9ee;
--tds-color-text-strong: #202a34;
--tds-color-text-main: #3a4654;
--tds-color-text-muted: #6f7c8d;
--tds-color-border-main: #d3dae3;
--tds-color-accent-soft: #9aa6b5;
--tds-color-brand: #404d5d;
--tds-color-brand-hover: #4f6074;
--tds-color-accent: #5e748d;
--tds-color-info: #5e748d;
--tds-color-info-strong: #4f6278;
--tds-color-info-border-soft: #c1ccd8;
--tds-color-info-bg-soft: #f0f4f8;
--tds-color-upload-icon-fg: #4f6278;
--tds-color-upload-icon-bg: #f0f4f8;
--tds-color-success: #2f7a57;
--tds-color-success-strong: #1f5c3f;
--tds-color-success-bg-soft: #e8f4ed;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #8f3f07;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #f0b26b;
--tds-color-warning-bg-soft: #fff4e5;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
}
html[data-tds-theme="legal-indigo"] {
--tds-color-bg-page: #f7f7fd;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #eeedfb;
--tds-color-text-strong: #1e1b4b;
--tds-color-text-main: #2e2a6e;
--tds-color-text-muted: #6b67a0;
--tds-color-border-main: #dddaf5;
--tds-color-accent-soft: #9490c5;
--tds-color-brand: #3730a3;
--tds-color-brand-hover: #312e81;
--tds-color-accent: #4338ca;
--tds-color-info: #4338ca;
--tds-color-info-strong: #3730a3;
--tds-color-info-border-soft: #c7d2fe;
--tds-color-info-bg-soft: #eef2ff;
--tds-color-upload-icon-fg: #3730a3;
--tds-color-upload-icon-bg: #eef2ff;
--tds-color-success: #15803d;
--tds-color-success-strong: #166534;
--tds-color-success-bg-soft: #dcfce7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(67, 56, 202, 0.2);
--tds-color-info-focus-ring: rgba(67, 56, 202, 0.12);
}
html[data-tds-theme="legal-crimson"] {
--tds-color-bg-page: #fdf7f7;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #faeaea;
--tds-color-text-strong: #3b0a0a;
--tds-color-text-main: #5c1a1a;
--tds-color-text-muted: #8a5c5c;
--tds-color-border-main: #f0d8d8;
--tds-color-accent-soft: #c4928a;
--tds-color-brand: #9b1c1c;
--tds-color-brand-hover: #7f1d1d;
--tds-color-accent: #b91c1c;
--tds-color-info: #b91c1c;
--tds-color-info-strong: #9b1c1c;
--tds-color-info-border-soft: #fecaca;
--tds-color-info-bg-soft: #fef2f2;
--tds-color-upload-icon-fg: #9b1c1c;
--tds-color-upload-icon-bg: #fef2f2;
--tds-color-success: #15803d;
--tds-color-success-strong: #166534;
--tds-color-success-bg-soft: #dcfce7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(185, 28, 28, 0.2);
--tds-color-info-focus-ring: rgba(185, 28, 28, 0.12);
}
html[data-tds-theme="legal-emerald"] {
--tds-color-bg-page: #f3faf6;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #e6f4ec;
--tds-color-text-strong: #064e35;
--tds-color-text-main: #0d5c3e;
--tds-color-text-muted: #4d8a6e;
--tds-color-border-main: #c6e2d4;
--tds-color-accent-soft: #6db898;
--tds-color-brand: #047857;
--tds-color-brand-hover: #065f46;
--tds-color-accent: #059669;
--tds-color-info: #059669;
--tds-color-info-strong: #047857;
--tds-color-info-border-soft: #a7f3d0;
--tds-color-info-bg-soft: #ecfdf5;
--tds-color-upload-icon-fg: #047857;
--tds-color-upload-icon-bg: #ecfdf5;
--tds-color-success: #047857;
--tds-color-success-strong: #065f46;
--tds-color-success-bg-soft: #d1fae5;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(4, 120, 87, 0.2);
--tds-color-info-focus-ring: rgba(4, 120, 87, 0.12);
}
html[data-tds-theme="legal-parchment"] {
--tds-color-bg-page: #fdf8ee;
--tds-color-bg-surface: #fffdf5;
--tds-color-bg-subtle: #f8f0d8;
--tds-color-text-strong: #2c1a06;
--tds-color-text-main: #4a2e0e;
--tds-color-text-muted: #8a6a3e;
--tds-color-border-main: #e8d5b0;
--tds-color-accent-soft: #b8956a;
--tds-color-brand: #5c3d11;
--tds-color-brand-hover: #4a2f0c;
--tds-color-accent: #7c5227;
--tds-color-info: #7c5227;
--tds-color-info-strong: #5c3d11;
--tds-color-info-border-soft: #e8c99a;
--tds-color-info-bg-soft: #fdf3e0;
--tds-color-upload-icon-fg: #5c3d11;
--tds-color-upload-icon-bg: #fdf3e0;
--tds-color-success: #2f6e3e;
--tds-color-success-strong: #1f5530;
--tds-color-success-bg-soft: #e6f4ec;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(92, 61, 17, 0.2);
--tds-color-info-focus-ring: rgba(92, 61, 17, 0.12);
}
html[data-tds-theme="legal-teal"] {
--tds-color-bg-page: #f2fafa;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #e4f4f4;
--tds-color-text-strong: #0d3330;
--tds-color-text-main: #154d48;
--tds-color-text-muted: #417a75;
--tds-color-border-main: #b8dbd9;
--tds-color-accent-soft: #5eaaa6;
--tds-color-brand: #0f766e;
--tds-color-brand-hover: #0d5f58;
--tds-color-accent: #0d9488;
--tds-color-info: #0d9488;
--tds-color-info-strong: #0f766e;
--tds-color-info-border-soft: #99d6d2;
--tds-color-info-bg-soft: #e6f7f6;
--tds-color-upload-icon-fg: #0f766e;
--tds-color-upload-icon-bg: #e6f7f6;
--tds-color-success: #0f766e;
--tds-color-success-strong: #0d5f58;
--tds-color-success-bg-soft: #ccf2ef;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(15, 118, 110, 0.2);
--tds-color-info-focus-ring: rgba(15, 118, 110, 0.12);
}
html[data-tds-theme="legal-purple"] {
--tds-color-bg-page: #f8f6fd;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #ede9f8;
--tds-color-text-strong: #1e0a4a;
--tds-color-text-main: #311a6b;
--tds-color-text-muted: #6b559a;
--tds-color-border-main: #d8cef2;
--tds-color-accent-soft: #9e88cc;
--tds-color-brand: #5b21b6;
--tds-color-brand-hover: #4c1a99;
--tds-color-accent: #7c3aed;
--tds-color-info: #7c3aed;
--tds-color-info-strong: #5b21b6;
--tds-color-info-border-soft: #c4b5fd;
--tds-color-info-bg-soft: #f0ebff;
--tds-color-upload-icon-fg: #5b21b6;
--tds-color-upload-icon-bg: #f0ebff;
--tds-color-success: #15803d;
--tds-color-success-strong: #166534;
--tds-color-success-bg-soft: #dcfce7;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(91, 33, 182, 0.2);
--tds-color-info-focus-ring: rgba(91, 33, 182, 0.12);
}
html[data-tds-theme="legal-bronze"] {
--tds-color-bg-page: #faf7f2;
--tds-color-bg-surface: #ffffff;
--tds-color-bg-subtle: #f2ead8;
--tds-color-text-strong: #2a1f08;
--tds-color-text-main: #3d2e0f;
--tds-color-text-muted: #7a6438;
--tds-color-border-main: #e0cfa0;
--tds-color-accent-soft: #b89c60;
--tds-color-brand: #7c5c1e;
--tds-color-brand-hover: #6a4d18;
--tds-color-accent: #9a7228;
--tds-color-info: #9a7228;
--tds-color-info-strong: #7c5c1e;
--tds-color-info-border-soft: #e8d48a;
--tds-color-info-bg-soft: #fdf6e0;
--tds-color-upload-icon-fg: #7c5c1e;
--tds-color-upload-icon-bg: #fdf6e0;
--tds-color-success: #2f6e3e;
--tds-color-success-strong: #1f5530;
--tds-color-success-bg-soft: #e6f4ec;
--tds-color-warning: #b45309;
--tds-color-warning-strong: #92400e;
--tds-color-warning-soft: #d97706;
--tds-color-warning-border-soft: #fbbf24;
--tds-color-warning-bg-soft: #fffbeb;
--tds-color-danger: #b42318;
--tds-color-danger-strong: #912018;
--tds-color-danger-soft: #f97066;
--tds-color-danger-border-soft: #fda29b;
--tds-color-danger-bg-soft: #fff1f3;
--tds-alpha-info-20: rgba(124, 92, 30, 0.2);
--tds-color-info-focus-ring: rgba(124, 92, 30, 0.12);
}
/* ─── 全站公共 Footer ───────────────────────────────────────── */
.tix-footer {
background: var(--tds-color-bg-surface);
border-top: 1px solid var(--tds-color-border-main);
padding: 28px 0;
}
.tix-footer-inner {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.tix-footer-links {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.tix-footer-links-mobile {
display: none;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
}
.tix-footer-link {
color: var(--tds-color-text-main);
font-size: 14px;
text-decoration: none;
}
.tix-footer-link:hover {
color: var(--tds-color-text-strong);
}
.tix-footer-sep {
color: var(--tds-color-text-muted);
font-size: 14px;
padding: 0 2px;
}
.tix-footer-copy {
margin: 0;
color: var(--tds-color-text-muted);
font-size: 13px;
}
@media (max-width: 768px) {
.tix-footer-links {
display: none;
}
.tix-footer-links-mobile {
display: flex;
}
}
/* ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--tix-page-pad: 20px;
}
}
@media (max-width: 1024px) {
:root {
--tix-header-h: 68px;
}
}
.tix-container {
width: 100%;
max-width: var(--tix-page-max);
margin: 0 auto;
padding: 0 var(--tix-page-pad);
}
.tix-header {
height: var(--tix-header-h);
border-bottom: 1px solid var(--tix-border-main);
background: var(--tix-bg-surface);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1002;
}
.tix-header-inner {
height: var(--tix-header-h);
display: flex;
align-items: center;
position: relative;
gap: 32px;
}
/* Logo 样式 */
.tix-header .logo {
display: inline-flex;
align-items: center;
height: 100%;
text-decoration: none;
flex: 0 0 auto;
}
.tix-header .logo-image {
display: block;
width: 188px;
height: auto;
max-height: calc(var(--tix-header-h) - 6px);
}
@media (max-width: 1024px) {
.tix-header .logo-image {
width: 190px;
max-height: calc(var(--tix-header-h) - 6px);
}
}
@media (max-width: 768px) {
.tix-header .logo-image {
width: 160px;
max-height: calc(var(--tix-header-h) - 6px);
}
}
/* 导航链接容器 */
.nav-links {
display: flex;
gap: 24px;
align-items: center;
margin-left: auto; /* 自动推到最右侧 */
flex-wrap: nowrap;
min-width: 0;
}
.nav-link {
text-decoration: none;
color: var(--tix-text-muted);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.nav-link:hover {
color: var(--tix-text-strong);
}
.nav-btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--tds-color-brand);
color: var(--tds-color-text-inverse);
border-radius: 10px;
min-height: 42px;
padding: 8px 16px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: none;
box-shadow: 0 2px 8px var(--tds-alpha-slate-20);
transition: background 0.18s ease;
white-space: nowrap;
}
.nav-btn-cta:hover {
background: var(--tds-color-brand-hover);
color: var(--tds-color-text-inverse);
}
/* Purchase header: mobile inline login link (shown only when nav-links are hidden). */
.tix-mobile-login-link {
display: none;
text-decoration: none;
color: var(--tix-text-muted);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.tix-mobile-login-link[data-tix-auth-when="user"] {
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
}
.tix-header .tix-mobile-login-link.user-menu {
display: none;
}
/* Header CTA (scope to header to avoid auth-form conflicts) */
.tix-header .login-btn {
background: var(--tix-cta-bg);
color: var(--tix-bg-surface);
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.tix-header .user-menu {
display: flex;
align-items: center;
margin-left: 12px;
}
.tix-header .user-menu-toggle,
.tix-header .user-avatar-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
color: var(--tix-text-main);
text-decoration: none;
margin-left: 12px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}
.tix-header .user-menu-toggle:hover,
.tix-header .user-avatar-link:hover {
background: var(--tix-bg-subtle);
}
.tix-header .user-avatar-icon {
width: 18px;
height: 18px;
}
.tix-header .user-center-link {
margin-left: 28px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
color: var(--tix-text-main);
white-space: nowrap;
}
.tix-header .user-center-link:hover {
text-decoration: underline;
}
.tix-header .tix-desktop-portal-link {
display: none;
align-items: center;
margin-left: 28px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
color: var(--tix-text-main);
white-space: nowrap;
transform: translateY(1px);
}
.tix-header .tix-desktop-portal-link:hover {
text-decoration: underline;
}
.tix-header .tix-mobile-account-link {
display: none;
text-decoration: none;
margin-left: 0;
}
@media (min-width: 1025px) {
.tix-header .tix-desktop-portal-link {
display: inline-flex;
}
}
.tix-header .tix-mobile-account-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--tix-bg-subtle);
color: var(--tix-text-main);
font-size: 13px;
font-weight: 600;
}
.tix-header .tix-mobile-account-link .user-menu-toggle,
.tix-header .tix-mobile-login-link .user-menu-toggle {
margin-left: 0;
}
.tix-header .user-menu-wrap {
position: relative;
}
.tix-header .user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
border: none;
background: transparent;
cursor: pointer;
color: var(--tix-text-main);
font-weight: 400;
font-size: 14px;
}
.tix-header .user-chip svg {
width: 16px;
height: 16px;
}
.tix-header .user-chip-icon {
width: 20px;
height: 20px;
}
.tix-header .user-menu-dropdown {
position: absolute;
right: 0;
top: calc(100% + 8px);
width: 200px;
background: var(--tix-bg-surface);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 10px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
padding: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
z-index: 1200;
}
.tix-header .user-menu-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
.tix-header .user-menu-email {
font-size: 14px;
color: var(--tix-text-muted);
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tix-header .user-menu-links {
display: flex;
flex-direction: column;
gap: 4px;
}
.tix-header .user-menu-links a {
text-decoration: none;
color: var(--tix-text-main);
padding: 6px 8px;
border-radius: 8px;
font-weight: 400;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tix-header .user-menu-links a:hover {
background: var(--tix-bg-subtle);
}
.tix-header .login-btn:hover {
background: var(--tix-cta-bg-hover);
}
/* Language switcher (desktop) */
.tix-header .language-switcher {
display: flex;
gap: 8px;
align-items: center;
padding-right: 16px;
margin-right: 16px;
border-right: 1px solid var(--tix-border-main);
}
.tix-header .language-switcher a {
color: var(--tix-text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 6px 10px;
border-radius: 8px;
transition: all 0.2s ease;
white-space: nowrap;
}
.tix-header .language-switcher a:hover {
color: var(--tix-text-strong);
background: var(--tix-bg-subtle);
}
.tix-header .language-switcher a.active {
color: var(--tix-text-strong);
background: var(--tix-bg-subtle);
font-weight: 600;
}
/* Language dropdown (desktop, compact) */
.tix-header .language-dropdown {
position: relative;
display: flex;
align-items: center;
padding-right: 16px;
margin-right: 16px;
border-right: 1px solid var(--tix-border-main);
}
.tix-header .language-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
background: var(--tix-bg-subtle);
border: 1px solid var(--tix-border-main);
border-radius: 18px;
color: var(--tix-text-main);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.tix-header .language-dropdown-toggle:hover {
background: var(--tix-bg-base);
}
.tix-header .language-dropdown-caret {
font-size: 11px;
color: var(--tix-text-muted);
}
.tix-header .language-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
padding: 10px;
background: var(--tix-bg-surface);
border: 1px solid var(--tix-border-main);
border-radius: 12px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 1001;
}
.tix-header .language-dropdown.is-open .language-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.tix-header .language-dropdown-option {
display: block;
padding: 10px 12px;
color: var(--tix-text-main);
text-decoration: none;
font-size: 13px;
border-radius: 10px;
transition: background 0.2s ease, color 0.2s ease;
}
.tix-header .language-dropdown-option:hover {
background: var(--tix-bg-subtle);
}
.tix-header .language-dropdown-option.active {
background: var(--tix-bg-subtle);
font-weight: 600;
}
/* Mobile language trigger (header right) */
.tix-header .mobile-language-trigger {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
font-size: 14px;
color: var(--tix-text-muted);
cursor: pointer;
padding: 12px;
min-width: 48px;
min-height: 48px;
border-radius: 8px;
transition: all 0.2s ease;
white-space: nowrap;
}
.tix-header .mobile-language-trigger:hover {
background: var(--tix-bg-subtle);
color: var(--tix-text-strong);
}
/* Mobile nav */
.mobile-nav {
position: fixed;
top: var(--tix-header-h);
left: 0;
width: 280px;
height: calc(100vh - var(--tix-header-h));
background: var(--tix-bg-surface);
z-index: 1000;
padding: 30px 20px;
border-right: 1px solid var(--tix-border-main);
transform: translateX(-100%);
transition: transform 0.3s ease;
overflow-y: auto;
}
.mobile-nav.open {
transform: translateX(0);
}
.mobile-nav-item {
display: block;
color: var(--tix-text-muted);
text-decoration: none;
font-size: 16px;
margin-bottom: 24px;
padding: 12px 0;
border-bottom: 1px solid var(--tix-border-main);
transition: color 0.2s ease;
white-space: nowrap;
}
.mobile-nav-item:hover {
color: var(--tix-text-strong);
}
.mobile-login-btn {
background: var(--tix-cta-bg);
color: var(--tix-bg-surface);
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
text-decoration: none;
display: block;
text-align: center;
margin-top: 20px;
white-space: nowrap;
}
/* Page content baseline offset for fixed header */
.main-content {
margin-top: var(--tix-header-h);
}
.nav-overlay {
position: fixed;
top: var(--tix-header-h);
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.mobile-nav.open + .nav-overlay {
display: block;
}
/* Language drawer (mobile) */
.language-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1002;
display: none;
}
.language-overlay.open {
display: block;
}
.language-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--tix-bg-surface);
border-radius: 16px 16px 0 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
z-index: 1003;
transform: translateY(100%);
transition: transform 0.3s ease;
max-height: 70vh;
overflow-y: auto;
}
.language-drawer.open {
transform: translateY(0);
}
.language-drawer-header {
padding: 20px 20px 10px;
border-bottom: 1px solid var(--tix-border-main);
display: flex;
justify-content: space-between;
align-items: center;
}
.language-drawer-title {
font-size: 18px;
font-weight: 600;
color: var(--tix-text-strong);
margin: 0;
}
.language-drawer-close {
background: none;
border: none;
font-size: 24px;
color: var(--tix-text-muted);
cursor: pointer;
padding: 8px;
line-height: 1;
}
.language-drawer-close:hover {
color: var(--tix-text-strong);
}
.language-options {
padding: 10px 0 30px;
}
.language-option {
display: block;
padding: 16px 20px;
color: var(--tix-text-main);
text-decoration: none;
font-size: 16px;
transition: background-color 0.2s ease;
}
.language-option:hover {
background: var(--tix-bg-subtle);
}
.language-option.active {
color: var(--tix-text-strong);
font-weight: 600;
background: var(--tix-bg-subtle);
}
/* 汉堡菜单按钮（移动端） */
.hamburger-btn {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 5px;
width: 32px;
height: 32px;
justify-content: center;
}
.hamburger-btn span {
width: 24px;
height: 2px;
background: var(--tix-text-strong);
margin: 2px 0;
transition: 0.3s;
}
.hamburger-btn.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0;
}
.hamburger-btn.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Responsive: switch to hamburger earlier to avoid wrapping */
@media (max-width: 1024px) {
.tix-header-inner {
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
}
.hamburger-btn {
display: flex;
grid-column: 1;
justify-self: start;
}
.tix-header .logo {
grid-column: 2;
justify-self: center;
}
.nav-links {
display: none;
}
.tix-mobile-login-link {
display: inline-flex;
grid-column: 3;
justify-self: end;
align-items: center;
}
.tix-header .tix-mobile-login-link.user-menu {
display: inline-flex;
}
.tix-header .tix-mobile-account-link {
display: inline-flex;
grid-column: 3;
justify-self: end;
align-items: center;
position: relative;
}
.tix-header .language-switcher {
display: none;
}
.tix-header .language-dropdown {
display: none;
}
.tix-header .mobile-language-trigger {
display: flex;
grid-column: 3;
justify-self: end;
}
.tix-header .user-center-link {
display: none;
}
.tix-header.has-mobile-portal-entry .user-center-link {
display: inline-flex;
grid-column: 3;
justify-self: end;
align-items: center;
margin-left: 0;
font-size: 14px;
}
.tix-header.has-mobile-portal-entry .mobile-language-trigger {
display: none;
}
.tix-header .tix-mobile-account-link + .mobile-language-trigger {
display: none;
}
}