/* ===========================================
* 青苹果主题 - 全局样式（MUI 调色板）
* 风格：白底为主 + 绿/蓝/红 3 色点缀
* 禁止大色块,色只用于图标徽章/激活态/数据点
* =========================================== */
:root {
/* 主色 - 高级深绿(参考图 logo 风格:深而不亮,鲜而不刺) */
--td-brand: #0FA968; /* 主绿 - 高级深绿(像 iOTASK 中 TASK 的绿) */
--td-brand-light: #E8F5EE; /* 极淡绿底(几乎不可见,仅 hover 提示) */
--td-brand-2: #0C9557; /* hover 深一档 */
--td-brand-3: #0A7D49; /* active 沉稳深绿 */
--td-info: #3B82F6; /* 蓝色 - 辅助(未回复/通知) */
--td-info-light: #DBEAFE;
--td-info-2: #2563EB;
--td-info-3: #1D4ED8;
--td-danger: #EF4444; /* 红色 - 仅用于未回复/危险 */
--td-danger-light: #FEE2E2;
--td-danger-bg: #FEE2E2;
--td-text-1: #0F172A;
--td-text-2: #475569;
--td-text-3: #94A3B8;
--td-bg-1: #FFFFFF;
--td-bg-2: #F8FAFC;
--td-bg-page: #F0F2F7;
--td-border: #E5E8EE;
--td-success: #0FA968;
--td-success-bg: #E8F5EE;
--td-warning: #F59E0B;
--td-warning-bg: #FEF3E2;
--td-radius-sm: 8px;
--td-radius-md: 12px;
--td-radius-lg: 16px;
/* 3D 阴影 - 高级绿光晕(柔和,深绿) */
--shadow-3d-light: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.04), 0 2px 4px rgba(15,23,42,.04);
--shadow-3d-hover: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.08);
--shadow-3d-press: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 4px rgba(15,23,42,.08) inset, 0 1px 2px rgba(15,23,42,.04);
--shadow-3d-brand: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.25);
--shadow-1: 0 1px 2px rgba(15,23,42,.03);
--shadow-2: 0 4px 12px rgba(15,23,42,.05);
--shadow-3: 0 8px 24px rgba(15,23,42,.08);
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei',
'Segoe UI', Roboto, sans-serif;
background: linear-gradient(180deg, #FFFFFF 0%, #F0F2F7 60%, #E8EBF2 100%);
color: var(--td-text-1);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
/* ===== 布局：极窄纯白侧栏 + 顶栏 + 内容 ===== */
.app-layout {
min-height: 100vh;
display: flex;
flex-direction: row;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
/* 横向展开侧栏（参考图风格：纯白 + 极轻 3D + 绿色激活指示） */
.app-rail {
width: 220px; flex-shrink: 0;
background: #FFFFFF;
display: flex; flex-direction: column;
padding: 18px 12px; gap: 4px;
position: sticky; top: 0; height: 100vh;
border-right: 1px solid #E5E8EE;
z-index: 50;
overflow-y: auto;
}
.rail-brand {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
margin-bottom: 12px;
position: relative;
}
.rail-brand img { width: 30px; height: 30px; display: block; }
.rail-brand-name {
font-size: 16px; font-weight: 800; color: #0F172A;
letter-spacing: .3px;
flex: 1;
}
/* 用 brand 绿点缀品牌名(参考 iOTASK logo 风格) */
.rail-brand-name em {
font-style: normal;
color: var(--td-brand);
}
.rail-nav {
display: flex; flex-direction: column; gap: 2px;
flex: 1;
width: 100%;
margin-top: 4px;
}
/* 侧栏菜单项 - 极简纯白(参考图风格,几乎无视觉重量) */
.rail-link {
position: relative;
width: 100%; min-height: 38px;
border-radius: 8px;
display: flex; flex-direction: row; align-items: center; gap: 10px;
padding: 8px 12px;
color: #64748B;
text-decoration: none; cursor: pointer;
transition: all .15s;
background: transparent;
border: 1px solid transparent;
font-family: inherit;
font-size: 13px; font-weight: 500;
letter-spacing: .2px;
box-sizing: border-box;
}
.rail-link .rail-ico {
width: 22px; height: 22px;
font-size: 11px; line-height: 1; font-weight: 700;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
background: transparent;
border: none;
color: #94A3B8;
flex-shrink: 0;
}
.rail-link .rail-sub {
font-size: 10px; line-height: 1;
color: #CBD5E1;
margin-left: auto;
font-weight: 500;
letter-spacing: .5px;
}
.rail-link:hover {
color: #0F172A;
background: #F8FAFC;
}
.rail-link:hover .rail-ico {
color: var(--td-brand);
}
.rail-link:hover .rail-sub { color: #94A3B8; }
.rail-link.on {
color: var(--td-brand-3);
background: var(--td-brand-light);
font-weight: 600;
}
.rail-link.on .rail-ico {
color: var(--td-brand);
}
.rail-link.on .rail-sub { color: var(--td-brand-2); opacity: .8; }
.rail-link.on::before {
content: '';
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 18px;
background: var(--td-brand);
border-radius: 0 3px 3px 0;
}
.rail-ico {
font-size: 18px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.rail-tip {
position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
background: #0F172A; color: #fff;
padding: 4px 10px; border-radius: 6px;
font-size: 12px; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .15s, left .15s;
z-index: 100;
box-shadow: 0 4px 10px rgba(15,23,42,.20);
font-weight: 500;
}
.rail-tip::before {
content: ''; position: absolute; left: -4px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 8px; height: 8px;
background: #0F172A;
}
.rail-link:hover .rail-tip,
.rail-link:focus .rail-tip {
opacity: 1; left: calc(100% + 12px);
}
.rail-bottom {
display: flex; flex-direction: column; gap: 2px; align-items: stretch;
border-top: 1px solid #F1F5F9;
padding-top: 10px;
margin-top: 10px;
width: 100%;
}
/* 底部按钮 - 简洁白底文字(参考图风格) */
.rail-link[data-tip*="智能助手"], .rail-link[data-tip*="帮助"] {
text-align: left;
}
.rail-link[data-tip*="智能助手"]:hover, .rail-link[data-tip*="帮助"]:hover {
color: #0F172A;
background: #F8FAFC;
}
.rail-link[data-tip*="智能助手"]:hover .rail-ico,
.rail-link[data-tip*="帮助"]:hover .rail-ico {
color: var(--td-brand);
}
.rail-avatar .rail-ico {
width: 22px; height: 22px;
font-size: 11px; font-weight: 700;
background: transparent;
color: #94A3B8;
}
.rail-avatar:hover .rail-ico {
color: var(--td-brand);
}
/* 右侧主区 */
.app-main-wrap {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
}
.app-topbar {
height: 64px;
background: #FFFFFF;
padding: 0 32px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--td-border);
position: sticky; top: 0; z-index: 40;
box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.topbar-left { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-title { font-size: 16px; font-weight: 700; color: var(--td-text-1); }
.topbar-sub { font-size: 11px; color: var(--td-text-3); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--td-text-2); }
.topbar-right .live-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--td-brand); margin-right: 6px;
box-shadow: 0 0 0 4px rgba(15,169,104,.22);
animation: pulse 1.6s infinite;
vertical-align: middle;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(15,169,104,.55); }
70% { box-shadow: 0 0 0 8px rgba(15,169,104,0); }
100% { box-shadow: 0 0 0 0 rgba(15,169,104,0); }
}
.app-content {
flex: 1;
padding: 24px 32px 40px;
width: 100%;
margin: 0;
max-width: none;
}
/* 移除旧的侧边栏样式 */
.app-sidebar, .side-link, .side-nav, .side-icon, .side-badge, .side-footer, .side-tip, .app-header, .app-logo, .app-header-meta { display: none !important; }
.app-body { display: contents; }
/* ===== 登录页 ===== */
.login-page {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
overflow: hidden;
z-index: 9999;
}
.login-bg {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(15,169,104,.08) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(15,169,104,.05) 0%, transparent 40%);
pointer-events: none;
}
.login-card {
position: relative; z-index: 1;
width: 420px; max-width: calc(100vw - 32px);
background: #fff; border-radius: 20px;
padding: 32px 36px 28px;
box-shadow: 0 24px 60px rgba(15,23,42,.15), 0 2px 6px rgba(15,23,42,.04);
animation: loginPop .4s cubic-bezier(.2,.9,.3,1.2);
border: 1px solid rgba(255,255,255,.6);
}
@keyframes loginPop {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-brand img { width: 52px; height: 52px; }
.login-title { font-size: 18px; font-weight: 700; color: #0F1B2D; }
.login-sub { font-size: 12px; color: #6B7A99; margin-top: 2px; }
.login-tip { font-size: 13px; color: #4F6079; margin-bottom: 16px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field > span { font-size: 12px; color: #4F6079; font-weight: 500; }
.login-field input {
height: 38px; padding: 0 12px;
border: 1.5px solid #E2E8F0; border-radius: 10px;
font-size: 14px; outline: none;
transition: border-color .15s, box-shadow .15s;
font-family: inherit;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
.login-field input:focus {
border-color: var(--td-brand);
box-shadow: 0 0 0 3px rgba(15,169,104,.18);
background: #fff;
}
.login-err {
background: #FEE2E2; color: #B91C1C;
padding: 8px 12px; border-radius: 6px; font-size: 12px;
}
.login-btn {
height: 40px; border: none; border-radius: 10px;
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff; font-size: 15px; font-weight: 600;
cursor: pointer; transition: all .15s;
margin-top: 4px;
font-family: inherit;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
position: relative;
}
.login-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 14px rgba(15,169,104,.45); }
.login-btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-3d-press); }
.login-btn:disabled { opacity: .6; cursor: not-allowed; }
.login-quick {
margin-top: 14px; padding-top: 14px;
border-top: 1px dashed #E2E8F0;
}
.login-quick-title { font-size: 12px; color: #6B7A99; margin-bottom: 8px; }
.login-quick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.login-chip {
padding: 5px 10px; border-radius: 999px;
background: #fff; color: var(--td-text-2);
border: 1px solid #E2E8F0; font-size: 12px;
cursor: pointer; transition: all .15s;
font-family: inherit;
box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.04);
}
.login-chip:hover { background: var(--td-brand-light); color: var(--td-brand-3); border-color: var(--td-brand); }
.login-chip.admin { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.login-chip.admin:hover { background: #fff; color: var(--td-brand-3); border-color: var(--td-brand); box-shadow: var(--shadow-3d-hover); }
.login-foot {
position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
color: #94A3B8; font-size: 11px;
}
/* ===== 顶栏用户标签 ===== */
.topbar-user {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: var(--td-bg-2);
font-size: 13px; color: var(--td-text-1); font-weight: 500;
}
.topbar-user-dot { width: 8px; height: 8px; border-radius: 50%; }
/* ===== 智能问答助手（右侧抽屉） ===== */
.bot-mask {
position: fixed; inset: 0;
background: rgba(15,27,45,.4);
display: flex; justify-content: flex-end; align-items: stretch;
z-index: 200;
animation: fadeIn .2s;
}
.bot-panel {
width: 420px; max-width: 100vw;
background: #fff; display: flex; flex-direction: column;
box-shadow: -8px 0 24px rgba(0,0,0,.15);
animation: slideLeft .25s;
}
@keyframes slideLeft { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.bot-header {
padding: 16px 18px; border-bottom: 1px solid #E2E8F0;
display: flex; align-items: center; justify-content: space-between;
background: #FFFFFF;
color: var(--td-text-1);
position: relative;
}
.bot-header::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, #0FA968 0%, #0A7D49 50%, transparent 100%);
}
.bot-header-left { display: flex; align-items: center; gap: 12px; }
.bot-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff; font-size: 20px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
}
.bot-title { font-size: 15px; font-weight: 700; }
.bot-sub { font-size: 11px; opacity: .85; }
.bot-tabs {
display: flex; gap: 8px;
padding: 10px 18px 0;
border-bottom: 1px solid #E2E8F0;
background: #FFFFFF;
}
.bot-tab {
padding: 8px 16px;
font-size: 13px; font-weight: 600;
color: #64748B;
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
border: 1px solid #E2E8F0;
border-bottom: none;
border-radius: 10px 10px 0 0;
cursor: pointer;
box-shadow: var(--shadow-3d-light);
transition: all .15s;
position: relative; top: 1px;
}
.bot-tab:hover { color: var(--td-brand-3); }
.bot-tab.on {
color: var(--td-brand-3);
background: linear-gradient(180deg, #FFFFFF 0%, var(--td-brand-light) 100%);
border-color: var(--td-brand);
box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,169,104,.10);
z-index: 1;
}
.bot-tab.on::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -1px;
height: 2px; background: #FFFFFF;
}
.help-faq {
padding: 14px 18px;
border-bottom: 1px dashed #E2E8F0;
}
.help-faq:last-child { border-bottom: none; }
.help-faq-q {
font-size: 13px; font-weight: 700; color: var(--td-text-1);
margin-bottom: 6px;
padding-left: 10px;
border-left: 3px solid var(--td-brand);
}
.help-faq-a {
font-size: 12px; line-height: 1.7; color: #475569;
padding-left: 13px;
}
.bot-close {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
border: 1px solid #E2E8F0;
width: 28px; height: 28px; border-radius: 50%;
font-size: 16px; color: var(--td-text-2);
cursor: pointer; line-height: 1;
box-shadow: var(--shadow-3d-light);
font-family: inherit;
transition: all .15s;
}
.bot-close:hover {
color: var(--td-danger);
border-color: var(--td-danger);
box-shadow: var(--shadow-3d-hover);
transform: translateY(-1px);
}
.bot-list {
flex: 1; overflow-y: auto;
padding: 16px 18px;
background: #F8FAFC;
display: flex; flex-direction: column; gap: 10px;
}
.bot-msg { display: flex; }
.bot-msg.me { justify-content: flex-end; }
.bot-bubble {
max-width: 80%;
padding: 10px 14px; border-radius: 12px;
font-size: 14px; line-height: 1.6;
background: #fff; color: #0F1B2D;
border: 1px solid #E5E8EE;
white-space: pre-wrap; word-break: break-word;
}
.bot-msg.me .bot-bubble {
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff; border: none;
border-bottom-right-radius: 4px;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
}
.bot-msg.bot .bot-bubble { border-bottom-left-radius: 4px; }
.bot-quick {
padding: 8px 12px; background: #fff;
border-top: 1px solid #E2E8F0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.bot-chip {
padding: 4px 10px; border-radius: 999px;
background: #fff; color: var(--td-brand-3);
border: 1px solid #E2E8F0; font-size: 12px;
cursor: pointer; transition: all .15s;
font-family: inherit;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.bot-chip:hover {
background: var(--td-brand-light);
color: var(--td-brand-3);
border-color: var(--td-brand);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(15,169,104,.22);
}
.bot-input {
padding: 12px; background: #fff;
border-top: 1px solid #E2E8F0;
display: flex; gap: 8px;
}
.bot-input input {
flex: 1; height: 38px; padding: 0 12px;
border: 1.5px solid #E2E8F0; border-radius: 10px;
font-size: 14px; outline: none; font-family: inherit;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
.bot-input input:focus { border-color: var(--td-brand); box-shadow: 0 0 0 3px rgba(15,169,104,.20); background: #fff; }
.bot-send {
height: 38px; padding: 0 16px;
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff; border: none; border-radius: 10px;
font-size: 14px; font-weight: 600; cursor: pointer;
font-family: inherit;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
transition: all .15s;
}
.bot-send:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 12px rgba(15,169,104,.40); }
.bot-send:active { transform: translateY(0); box-shadow: var(--shadow-3d-press); }
/* ===== 子页面通用 ===== */
.page-wrap { display: flex; flex-direction: column; gap: 16px; }
.page-header {
display: flex; align-items: center; justify-content: space-between;
background: #fff; border-radius: var(--td-radius-lg);
padding: 18px 22px; box-shadow: var(--td-shadow-2);
position: relative; overflow: hidden;
}
.page-header::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; background: linear-gradient(180deg, var(--td-brand) 0%, var(--td-brand-3) 100%);
}
.page-title { font-size: 18px; font-weight: 700; color: var(--td-text-1); line-height: 1.2; }
.page-sub { font-size: 12px; color: var(--td-text-3); margin-top: 4px; }
.page-tag {
display: inline-flex; align-items: center;
padding: 6px 14px; border-radius: 999px;
background: var(--td-brand-light); color: var(--td-brand-3);
font-size: 12px; font-weight: 600;
border: 1px solid #D4ECDD;
}
/* ===== 分页 ===== */
.pagination-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; margin-top: 4px;
border-top: 1px solid var(--td-border);
background: var(--td-bg-2);
border-bottom-left-radius: var(--td-radius-lg);
border-bottom-right-radius: var(--td-radius-lg);
flex-wrap: wrap; gap: 12px;
}
.pg-info { font-size: 13px; color: var(--td-text-2); }
.pg-info b { color: var(--td-brand-3); font-weight: 700; }
.pg-buttons { display: flex; align-items: center; gap: 4px; }
.pg-btn {
min-width: 32px; height: 32px; padding: 0 8px;
border: 1px solid #E2E8F0;
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
border-radius: 8px; cursor: pointer;
color: var(--td-text-1); font-size: 13px;
font-family: inherit; transition: all .15s;
box-shadow: var(--shadow-3d-light);
}
.pg-btn:hover:not(:disabled) {
border-color: var(--td-brand);
color: var(--td-brand-3);
box-shadow: var(--shadow-3d-hover);
transform: translateY(-1px);
}
.pg-btn:active:not(:disabled) {
background: linear-gradient(180deg, #F1F5F9 0%, #FFFFFF 100%);
box-shadow: var(--shadow-3d-press);
transform: translateY(0);
}
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-btn.on {
background: linear-gradient(180deg, var(--td-brand-2) 0%, var(--td-brand-3) 100%);
color: #fff;
border-color: var(--td-brand-3);
font-weight: 600;
box-shadow: var(--shadow-3d-brand);
}
.pg-ellipsis { color: var(--td-text-3); padding: 0 4px; }
@media (max-width: 720px) {
.app-rail { width: 180px; }
.app-topbar { padding: 0 16px; }
.app-content { padding: 16px; }
.topbar-sub { display: none; }
.topbar-right { gap: 12px; font-size: 12px; }
}
/* ===== 统计卡片 ===== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
border-radius: var(--td-radius-lg);
padding: 20px 22px; display: flex; align-items: center; gap: 16px;
border: 1px solid #E2E8F0;
box-shadow: var(--shadow-3d-light);
position: relative; overflow: hidden;
transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3d-hover); }
.stat-card::before {
content: ''; position: absolute; top: 0; right: 0;
width: 90px; height: 90px; border-radius: 50%;
background: radial-gradient(circle, rgba(15,169,104,.12) 0%, transparent 70%);
transform: translate(30%, -30%);
}
.stat-card.success::before { background: radial-gradient(circle, rgba(15,169,104,.12) 0%, transparent 70%); }
.stat-card.danger::before { background: radial-gradient(circle, rgba(239,68,68,.18) 0%, transparent 70%); }
.stat-icon {
width: 52px; height: 52px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.5px;
background: linear-gradient(135deg, #FFFFFF, #E8F5EE);
color: var(--td-brand-3);
flex-shrink: 0;
box-shadow: var(--shadow-3d-light);
border: 1px solid #D4ECDD;
}
.stat-card.success .stat-icon { background: linear-gradient(135deg, #FFFFFF, #E8F5EE); color: var(--td-brand-3); border-color: #D4ECDD; }
.stat-card.danger .stat-icon { background: linear-gradient(135deg, #FFFFFF, #FEF2F2); color: #DC2626; border-color: #FECACA; }
.stat-info { display: flex; flex-direction: column; }
.stat-label { font-size: 13px; color: var(--td-text-2); margin-bottom: 4px; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--td-text-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-trend { font-size: 12px; margin-top: 4px; color: var(--td-text-2); }
.stat-trend .up { color: var(--td-brand-3); font-weight: 600; }
.stat-trend .down { color: #EF4444; font-weight: 600; }
/* ===== 工具栏 ===== */
.toolbar-card {
background: #fff; border-radius: var(--td-radius-lg);
padding: 18px 20px; margin-bottom: 20px;
box-shadow: var(--td-shadow-2);
display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-divider {
display: inline-block; width: 1px; height: 20px;
background: var(--td-border); margin: 0 4px;
}
.select-actions {
display: inline-flex; align-items: center; gap: 4px;
padding: 0 4px 0 8px; height: 32px;
border-right: 1px solid var(--td-border);
margin-right: 4px;
}
.select-actions-label { font-size: 12px; color: var(--td-text-3); margin-right: 2px; }
.link-btn {
background: none; border: none; cursor: pointer;
color: var(--td-brand); font-size: 13px; padding: 0 4px;
font-family: inherit;
}
.link-btn:hover { color: var(--td-brand-2); text-decoration: underline; }
.dot-sep { color: var(--td-text-3); font-size: 12px; }
/* ===== 表格卡片 ===== */
.table-card {
background: #fff; border-radius: var(--td-radius-lg);
padding: 6px 6px 14px; box-shadow: var(--td-shadow-2); margin-bottom: 20px;
}
.table-header {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px 8px;
}
.table-title {
font-size: 16px; font-weight: 600; color: var(--td-text-1);
display: flex; align-items: center; gap: 8px;
}
.table-title .bar, .chart-title .bar {
width: 4px; height: 16px;
background: linear-gradient(180deg, #0FA968, #0A7D49);
border-radius: 2px;
}
/* ===== 状态徽标 ===== */
.status-tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; line-height: 20px;
}
.status-tag.replied { background: var(--td-brand-light); color: var(--td-brand-3); border: 1px solid #D4ECDD; }
.status-tag.sending { background: #F1F5F9; color: #475569; border: 1px solid #E5E8EE; }
.status-tag.pending { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.status-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ===== 智能建议卡（关键薄荷绿装饰） ===== */
.advice-card {
position: relative;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FCF9 100%);
border: 1px solid #E5E8EE;
border-radius: var(--td-radius-lg);
padding: 18px 22px;
box-shadow: var(--shadow-3d-light);
overflow: hidden;
margin-top: 16px;
}
.advice-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--td-brand) 0%, var(--td-brand-3) 100%);
}
.advice-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed #E5E8EE;
}
.advice-head-left { display: flex; align-items: center; gap: 12px; }
.advice-ico {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(180deg, var(--td-brand) 0%, var(--td-brand-3) 100%);
color: #fff; font-size: 18px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-3d-brand);
flex-shrink: 0;
}
.advice-title {
font-size: 15px; font-weight: 700;
color: var(--td-brand-3);
line-height: 1.2;
margin-bottom: 2px;
}
.advice-sub { font-size: 12px; color: var(--td-text-3); }
.advice-pill {
font-size: 11px; font-weight: 700; letter-spacing: .5px;
padding: 4px 10px; border-radius: 999px;
color: var(--td-brand-3);
background: linear-gradient(135deg, #E8F5EE 0%, #D4ECDD 100%);
border: 1px solid #C9E5D4;
box-shadow: 0 1px 2px rgba(15, 169, 104, .12);
}
.advice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.advice-list li {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 4px;
font-size: 13px; line-height: 1.65;
color: var(--td-text-1);
border-radius: 8px;
transition: background .15s ease;
}
.advice-list li:hover { background: rgba(232, 245, 238, .55); }
.advice-num {
flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: #fff;
border: 1.5px solid var(--td-brand);
color: var(--td-brand-3);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.advice-text { flex: 1; }
.advice-text b { color: var(--td-brand-3); font-weight: 700; }
/* ===== 行高亮 ===== */
.td-table tbody tr.row-replied { background: transparent; }
.td-table tbody tr.row-sent { background: rgba(230,240,255,.20); }
.td-table tbody tr.row-pending { background: rgba(254,226,226,.55); }
.td-table tbody tr.row-pending:hover { background: rgba(254,226,226,.85); }
/* ===== 联系人单元格 ===== */
.contact-cell { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.contact-cell .row { display: flex; align-items: center; gap: 6px; color: var(--td-text-2); }
.contact-cell .row .v { color: var(--td-text-1); font-variant-numeric: tabular-nums; }
/* ===== 头像 ===== */
.avatar-cell { display: flex; align-items: center; gap: 10px; }
.avatar-cell .avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
color: #475569; font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
border: 1px solid #E5E8EE;
box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.04), 0 1px 4px rgba(15,23,42,.04);
}
.avatar-cell .name { font-weight: 600; color: var(--td-text-1); line-height: 18px; }
.avatar-cell .meta { font-size: 12px; color: var(--td-text-3); }
.big-avatar {
width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
color: #0F172A; font-size: 26px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid #E5E8EE;
box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.06), 0 0 0 4px rgba(255,255,255,.6);
}
/* ===== 详情 ===== */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.detail-row {
display: flex; padding: 10px 0;
border-bottom: 1px dashed var(--td-border);
}
.detail-row .label { width: 80px; color: var(--td-text-2); font-size: 13px; }
.detail-row .value { flex: 1; color: var(--td-text-1); font-size: 14px; }
.detail-divider { height: 1px; background: var(--td-border); margin: 14px 0; }
.reply-bubble {
background: var(--td-bg-2); padding: 12px;
border-radius: 8px; font-size: 14px; line-height: 1.6; color: var(--td-text-1);
}
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
position: relative; padding: 8px 0 8px 22px;
border-left: 2px solid var(--td-border); margin-left: 6px;
}
.timeline li::before {
content: ''; position: absolute; left: -7px; top: 12px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--td-brand); box-shadow: 0 0 0 3px var(--td-brand-light);
}
.timeline li.replied::before { background: var(--td-success); box-shadow: 0 0 0 3px var(--td-success-bg); }
.timeline li.failed::before { background: #EF4444; box-shadow: 0 0 0 3px #FEE2E2; }
.timeline .time { font-size: 12px; color: var(--td-text-2); }
.timeline .desc { font-size: 14px; color: var(--td-text-1); margin-top: 2px; }
/* ===== 图表 ===== */
.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; }
.chart-card {
background: #fff; border-radius: var(--td-radius-lg);
padding: 16px 18px 8px; box-shadow: var(--td-shadow-2);
}
.chart-title {
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 600; margin-bottom: 12px;
}
.chart-canvas { height: 280px; position: relative; }
/* ===== TDesign 风格原子组件 - 3D 按钮 ===== */
.td-btn {
display: inline-flex; align-items: center; gap: 4px;
border: 1px solid transparent; border-radius: var(--td-radius-sm);
cursor: pointer; font-size: 14px; line-height: 1;
padding: 0 16px; height: 32px;
transition: all .15s; font-family: inherit;
white-space: nowrap;
position: relative;
}
.td-btn:disabled { cursor: not-allowed; opacity: .5; }
.td-btn-icon { font-size: 14px; line-height: 1; }
.td-btn--small { height: 24px; padding: 0 10px; font-size: 12px; }
.td-btn--medium { height: 32px; padding: 0 16px; font-size: 14px; }
.td-btn--large { height: 40px; padding: 0 20px; font-size: 16px; }
/* 默认：白→灰渐变 + 3D 凸起 */
.td-btn--default {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
color: var(--td-text-1);
border-color: #E2E8F0;
box-shadow: var(--shadow-3d-light);
}
.td-btn--default:hover:not(:disabled) {
background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
border-color: var(--td-brand);
color: var(--td-brand-3);
box-shadow: var(--shadow-3d-hover);
transform: translateY(-1px);
}
.td-btn--default:active:not(:disabled) {
background: linear-gradient(180deg, #F1F5F9 0%, #FFFFFF 100%);
box-shadow: var(--shadow-3d-press);
transform: translateY(0);
}
/* 主按钮：高级深绿 3D 凸起 */
.td-btn--primary {
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff;
border-color: #0A7D49;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
}
.td-btn--primary:hover:not(:disabled) {
background: linear-gradient(180deg, #12C275 0%, #0FA968 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 14px rgba(15,169,104,.45);
transform: translateY(-1px);
}
.td-btn--primary:active:not(:disabled) {
background: linear-gradient(180deg, #0A7D49 0%, #0A7D49 100%);
box-shadow: var(--shadow-3d-press);
transform: translateY(0);
}
/* Success = 高级深绿 */
.td-btn--success {
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff;
border-color: #0A7D49;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
}
.td-btn--success:hover:not(:disabled) {
background: linear-gradient(180deg, #12C275 0%, #0FA968 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 14px rgba(15,169,104,.45);
transform: translateY(-1px);
}
.td-btn--danger {
background: linear-gradient(180deg, #E25E58 0%, #C03B33 100%);
color: #fff;
border-color: #C03B33;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 6px rgba(239,68,68,.25);
}
.td-btn--danger:hover:not(:disabled) { transform: translateY(-1px); }
/* Outline：透明底 + 绿色描边 */
.td-btn--outline {
background: #fff;
border-color: #E2E8F0;
box-shadow: var(--shadow-3d-light);
}
.td-btn--primary.td-btn--outline {
color: #0A7D49;
border-color: #0FA968;
background: linear-gradient(180deg, #FFFFFF 0%, #E8F5EE 100%);
}
.td-btn--primary.td-btn--outline:hover:not(:disabled) {
background: linear-gradient(180deg, #E8F5EE 0%, #D4ECDD 100%);
box-shadow: var(--shadow-3d-hover);
}
.td-btn--success.td-btn--outline {
color: #0A7D49;
border-color: #0FA968;
background: #fff;
}
.td-btn--success.td-btn--outline:hover:not(:disabled) {
background: #E8F5EE;
box-shadow: var(--shadow-3d-hover);
}
.td-btn--text {
background: transparent; color: var(--td-brand-3);
padding: 0 8px; border: none; box-shadow: none;
}
.td-btn--text:hover:not(:disabled) {
background: var(--td-brand-light);
box-shadow: none;
}
.td-btn--solid.td-btn--default {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
color: var(--td-text-1);
border-color: #E2E8F0;
box-shadow: var(--shadow-3d-light);
}
.td-input {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--td-border); border-radius: var(--td-radius-sm);
background: #fff; padding: 0 12px; height: 32px;
transition: border-color .15s, box-shadow .15s;
}
.td-input:focus-within { border-color: var(--td-brand); box-shadow: 0 0 0 3px rgba(15,169,104,.20); }
.td-input input {
border: none; outline: none; background: transparent;
flex: 1; font-size: 14px; color: var(--td-text-1); height: 100%;
font-family: inherit;
}
.td-input-prefix { color: var(--td-text-3); }
.td-select {
border: 1px solid var(--td-border); border-radius: var(--td-radius-sm);
background: #fff; padding: 0 12px; height: 32px;
font-size: 14px; color: var(--td-text-1); outline: none; cursor: pointer;
font-family: inherit;
}
.td-select:focus { border-color: var(--td-brand); box-shadow: 0 0 0 3px rgba(15,169,104,.20); }
.td-tag {
display: inline-flex; align-items: center; padding: 0 8px;
height: 22px; border-radius: 4px;
font-size: 12px; line-height: 22px;
background: var(--td-bg-2); color: var(--td-text-2);
border: 1px solid transparent;
margin-left: 4px;
}
.td-tag--primary { background: var(--td-brand-light); color: var(--td-brand-3); }
.td-tag--success { background: var(--td-brand-light); color: var(--td-brand-3); }
.td-tag--danger { background: var(--td-danger-bg); color: var(--td-danger); }
.td-tag--warning { background: var(--td-warning-bg); color: var(--td-warning); }
/* ===== 表格 ===== */
.td-table { width: 100%; border-collapse: collapse; }
.td-table th {
background: var(--td-bg-2);
text-align: center; padding: 12px 18px; font-size: 13px; font-weight: 600;
color: var(--td-text-1);
border-bottom: 1px solid var(--td-border);
}
.td-table td {
padding: 12px 18px; font-size: 14px;
text-align: center;
border-bottom: 1px solid var(--td-border);
color: var(--td-text-1);
}
.td-table tr:last-child td { border-bottom: none; }
.td-table tr:hover td { background: #F8FAFC; }
.empty-tip { padding: 40px 0; text-align: center; color: var(--td-text-2); font-size: 14px; }
/* ===== 分析模块分组 ===== */
.analysis-wrap { display: flex; flex-direction: column; gap: 28px; }
.analysis-group { display: flex; flex-direction: column; gap: 12px; }
.analysis-group-header {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 4px 8px;
border-bottom: 1px dashed var(--td-border);
}
.analysis-group-header .agh-left {
display: flex; align-items: center; gap: 12px;
}
.analysis-group-header .agh-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.analysis-group-header .agh-title {
font-size: 16px; font-weight: 700; color: var(--td-text-1);
line-height: 1.2; letter-spacing: 0.2px;
}
.analysis-group-header .agh-sub {
font-size: 12px; color: var(--td-text-3); margin-top: 2px;
}
.analysis-group-header .agh-tag {
display: inline-flex; align-items: center;
padding: 4px 10px; border-radius: 999px;
background: #F1F5F9; color: #475569;
font-size: 12px; font-weight: 600;
}
/* 一键继续沟通 */
.contact-quick-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.contact-quick-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: 12px;
background: #fff; border: 1px solid var(--td-border);
cursor: pointer; text-align: left; font-family: inherit;
transition: all .2s;
}
.contact-quick-card:hover {
border-color: var(--td-brand);
background: var(--td-brand-light);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15,169,104,.20);
}
.contact-quick-card.wechat:hover { border-color: #07C160; background: #E8F8EE; }
.contact-quick-card.sms:hover { border-color: var(--td-brand); background: var(--td-brand-light); }
.cq-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
background: #F1F5F9; color: #475569;
}
.contact-quick-card.wechat .cq-icon { background: #E8F8EE; color: #07C160; }
.contact-quick-card.sms .cq-icon { background: var(--td-brand-light); color: var(--td-brand-3); }
.cq-body { flex: 1; min-width: 0; }
.cq-label { font-size: 14px; font-weight: 600; color: var(--td-text-1); line-height: 18px; }
.cq-sub { font-size: 12px; color: var(--td-text-3); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-arrow { color: var(--td-text-3); font-size: 16px; transition: transform .2s; }
.contact-quick-card:hover .cq-arrow { transform: translateX(2px); color: var(--td-brand-3); }
.copy-toast {
margin-top: 10px;
padding: 8px 12px;
background: #F1F5F9;
color: #475569;
border-radius: 6px;
font-size: 12px; font-weight: 500;
text-align: center;
animation: fadeIn .2s;
}
/* ===== 排名 / 回复率条 ===== */
.rank-num {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: var(--td-bg-2); color: var(--td-text-2);
font-size: 12px; font-weight: 700;
}
.rank-num[data-level="top"] {
background: linear-gradient(135deg, #0FA968, #0A7D49);
color: #fff; box-shadow: 0 2px 6px rgba(15,169,104,.30);
}
.rate-bar { display: flex; align-items: center; gap: 10px; }
.rate-bar-bg {
flex: 1; height: 8px; background: var(--td-bg-2);
border-radius: 999px; overflow: hidden;
min-width: 100px;
}
.rate-bar-fill {
height: 100%; border-radius: 999px;
transition: width .4s;
}
.rate-bar-fill.rate-good { background: linear-gradient(90deg, #0FA968, #12C275); }
.rate-bar-fill.rate-mid { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
.rate-bar-fill.rate-bad { background: linear-gradient(90deg, #EF4444, #FCA5A5); }
.rate-bar-text {
font-size: 13px; font-weight: 600; color: var(--td-text-1);
min-width: 48px; text-align: right; font-variant-numeric: tabular-nums;
}
/* HR 单元格 */
.hr-cell { display: flex; align-items: center; gap: 8px; }
.hr-avatar {
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, #0FA968, #0A7D49);
color: #fff; font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hr-avatar.big { width: 30px; height: 30px; font-size: 13px; }
.hr-name { font-size: 13px; color: var(--td-text-1); font-weight: 500; }
.hr-day-cell {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 22px; padding: 0 8px;
border-radius: 4px; font-size: 12px; font-weight: 600;
background: var(--td-bg-2); color: var(--td-text-2);
}
.hr-day-cell[data-level="mid"] { background: var(--td-brand-light); color: var(--td-brand-3); }
.hr-day-cell[data-level="high"] { background: var(--td-brand); color: #fff; }
/* 发送账号选择 */
.sender-account-block { align-items: flex-start; }
.sender-account-block > label:first-child { padding-top: 10px; }
.account-mode-tabs {
display: flex; gap: 4px; margin-bottom: 12px;
border-bottom: 1px solid var(--td-border);
}
.account-tab {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
border: 1px solid #E2E8F0;
cursor: pointer;
padding: 8px 14px; font-size: 13px; color: var(--td-text-2);
border-radius: 8px 8px 0 0; margin-bottom: -1px;
font-family: inherit; transition: all .15s;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.account-tab:hover { color: var(--td-brand-3); border-color: var(--td-brand); transform: translateY(-1px); }
.account-tab.on {
color: #fff;
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
border-color: #0A7D49;
font-weight: 600;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(10,125,73,.20), 0 4px 10px rgba(15,169,104,.30);
}
.account-hint {
font-size: 12px; color: var(--td-text-3);
background: var(--td-bg-2);
padding: 8px 12px; border-radius: 6px;
margin-top: 10px; line-height: 1.6;
}
.hr-account-list {
border: 1px solid var(--td-border); border-radius: 8px;
overflow: hidden; max-height: 220px; overflow-y: auto;
}
.hr-account-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-bottom: 1px solid var(--td-border);
gap: 12px;
}
.hr-account-row:last-child { border-bottom: none; }
.hr-account-row.warn { background: var(--td-danger-bg); }
.hr-account-row.warn .hr-account-empty { color: var(--td-danger); font-size: 12px; }
.hr-account-label { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 100px; }
.hr-avatar.small { width: 22px; height: 22px; font-size: 11px; }
.hr-account-options { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
background: #fff; border: 1px solid var(--td-border);
font-size: 12px; cursor: pointer; user-select: none;
transition: all .15s;
}
.chip:hover { border-color: var(--td-brand); color: var(--td-brand-3); }
.chip input { display: none; }
.chip.on { background: var(--td-brand-light); border-color: var(--td-brand); color: var(--td-brand-3); font-weight: 600; }
/* ===== 弹窗 / 抽屉 ===== */
.td-modal-mask, .td-drawer-mask {
position: fixed; inset: 0;
background: rgba(15,27,45,.4);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
animation: fadeIn .2s;
}
.td-drawer-mask { justify-content: flex-end; align-items: stretch; }
.td-modal {
background: #fff; border-radius: var(--td-radius-lg);
box-shadow: var(--td-shadow-3);
max-width: 92vw; max-height: 90vh;
display: flex; flex-direction: column;
animation: slideUp .25s;
}
.td-modal-header {
padding: 16px 20px; font-size: 16px; font-weight: 600;
border-bottom: 1px solid var(--td-border);
display: flex; justify-content: space-between; align-items: center;
}
.td-modal-close, .td-drawer-close {
cursor: pointer; font-size: 22px; color: var(--td-text-2);
line-height: 1; padding: 0 4px;
}
.td-modal-close:hover, .td-drawer-close:hover { color: var(--td-text-1); }
.td-modal-body, .td-drawer-body {
padding: 20px; overflow-y: auto; flex: 1;
}
.td-modal-footer {
padding: 12px 20px; border-top: 1px solid var(--td-border);
display: flex; justify-content: flex-end; gap: 8px;
}
.td-drawer {
background: #fff; height: 100%;
max-width: 92vw;
display: flex; flex-direction: column;
box-shadow: var(--td-shadow-3);
animation: slideLeft .25s;
}
.td-drawer-header {
padding: 16px 20px; font-size: 16px; font-weight: 600;
border-bottom: 1px solid var(--td-border);
display: flex; justify-content: space-between; align-items: center;
}
.td-drawer-footer {
padding: 12px 20px; border-top: 1px solid var(--td-border);
display: flex; justify-content: flex-end; gap: 8px;
}
/* ===== 表单 ===== */
.form-item { margin-bottom: 14px; display: flex; gap: 12px; align-items: flex-start; }
.form-item > label:first-child {
width: 80px; flex-shrink: 0; color: var(--td-text-2); font-size: 13px;
padding-top: 8px; text-align: right;
}
.form-item input[type="text"], .form-item textarea, .form-item select {
flex: 1; border: 1px solid var(--td-border); border-radius: var(--td-radius-sm);
padding: 6px 12px; font-size: 14px; font-family: inherit;
outline: none; transition: border-color .15s;
}
.form-item textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-item input:focus, .form-item textarea:focus, .form-item select:focus {
border-color: var(--td-brand); box-shadow: 0 0 0 3px rgba(15,169,104,.20);
}
.radio-group { display: flex; gap: 18px; padding-top: 4px; }
.radio-group label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.radio-group label.on { color: var(--td-brand-3); font-weight: 600; }
.form-tip { font-size: 12px; color: var(--td-text-3); margin-top: 4px; }
.preview-box { background: var(--td-bg-2); padding: 12px; border-radius: 8px; margin-top: 8px; font-size: 13px; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes slideLeft { from { transform: translateX(20px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
/* 响应式 */
@media (max-width: 1100px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.app-content { padding: 16px; }
.stat-grid { grid-template-columns: 1fr; }
.detail-grid { grid-template-columns: 1fr; }
}
/* =================================================================
* 2026 新视觉系统 (UI Upgrade Pack)
* Aurora · Glassmorphism · Skeleton · Parallax · Reveal · Toast
* ================================================================= */
/* ---------- 1. Aurora Gradient 背景层 + Parallax ---------- */
/* 根容器：relative + overflow hidden，承载 aurora 背景层 */
.app-layout {
position: relative;
overflow-x: hidden;
background: #F4F6FB; /* 极浅蓝灰底，让 aurora 更明显 */
}
.aurora-layer {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* 视差：通过 transform translateY 改变位置；50% 速度在 JS 中用 parallaxScroll() 控制 */
will-change: transform;
}
.aurora-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .55;
mix-blend-mode: screen; /* 颜色叠加更柔和 */
will-change: transform;
}
/* 深蓝绿色调 (logo = 绿，背景给点深蓝高级感) */
.aurora-blob.b1 {
width: 720px; height: 720px;
left: -180px; top: -200px;
background: radial-gradient(circle at 30% 30%, #0EA5E9 0%, #1E40AF 50%, transparent 70%);
animation: auroraFloat1 22s ease-in-out infinite;
}
.aurora-blob.b2 {
width: 680px; height: 680px;
right: -180px; top: 10%;
background: radial-gradient(circle at 50% 50%, #10B981 0%, #059669 45%, transparent 70%);
animation: auroraFloat2 28s ease-in-out infinite;
}
.aurora-blob.b3 {
width: 600px; height: 600px;
left: 25%; bottom: -150px;
background: radial-gradient(circle at 50% 50%, #0FA968 0%, #0EA5E9 50%, transparent 70%);
animation: auroraFloat3 32s ease-in-out infinite;
}
.aurora-blob.b4 {
width: 500px; height: 500px;
right: 15%; bottom: 10%;
background: radial-gradient(circle at 50% 50%, #6366F1 0%, #1E3A8A 50%, transparent 70%);
animation: auroraFloat4 26s ease-in-out infinite;
}
@keyframes auroraFloat1 {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(80px, 60px) scale(1.1); }
66% { transform: translate(-40px, 100px) scale(.95); }
}
@keyframes auroraFloat2 {
0%,100% { transform: translate(0,0) scale(1); }
25% { transform: translate(-90px, 50px) scale(1.08); }
50% { transform: translate(40px, 120px) scale(.92); }
75% { transform: translate(-60px, 30px) scale(1.05); }
}
@keyframes auroraFloat3 {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(100px, -80px) scale(1.12); }
}
@keyframes auroraFloat4 {
0%,100% { transform: translate(0,0) scale(1); }
40% { transform: translate(-70px, -60px) scale(1.06); }
80% { transform: translate(50px, -100px) scale(.94); }
}
/* aurora 之上的轻噪点 / 颗粒叠加，增加质感 */
.aurora-noise {
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
opacity: .04;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* 主区上浮到 aurora 之上 */
.app-rail, .app-main-wrap { position: relative; z-index: 1; }
/* ---------- 2. Sticky Sidebar + Glassmorphism ---------- */
.app-rail {
/* 已经是 position: sticky top:0 height:100vh; 升级为玻璃感 */
background: rgba(255, 255, 255, 0.72) !important;
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-right: 1px solid rgba(229, 232, 238, 0.6);
box-shadow: 1px 0 0 rgba(255,255,255,.4) inset,
0 8px 32px rgba(15, 27, 45, .04);
/* 玻璃层滚动条更细 */
scrollbar-width: thin;
}
/* ---------- 3. 浮窗 / 弹窗 Glassmorphism + 噪点 ---------- */
.td-modal-mask, .td-drawer-mask {
/* 用更柔的蒙层，让背后的 aurora 透出来 */
background: rgba(15, 27, 45, 0.35) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.td-modal, .td-drawer {
background: rgba(255, 255, 255, 0.78) !important;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, .65);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 24px 64px rgba(15, 23, 42, .22),
0 4px 12px rgba(15, 23, 42, .08) !important;
position: relative;
overflow: hidden;
}
/* 浮窗内的噪点纹理层 */
.td-modal::before, .td-drawer::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
opacity: .035;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
mix-blend-mode: multiply;
}
.td-modal-header, .td-modal-body, .td-modal-footer,
.td-drawer-header, .td-drawer-body, .td-drawer-footer {
position: relative;
z-index: 1;
}
/* ---------- 4. Skeleton Screen (骨架屏) ---------- */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
display: block;
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(226, 232, 240, 0.55) 25%,
rgba(241, 245, 249, 0.85) 37%,
rgba(226, 232, 240, 0.55) 63%
);
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
color: transparent !important;
}
.skeleton-line {
height: 14px;
margin: 8px 0;
border-radius: 6px;
}
.skeleton-line.lg { height: 22px; }
.skeleton-line.sm { height: 10px; width: 60%; }
.skeleton-circle {
width: 36px; height: 36px; border-radius: 50%;
}
.skeleton-card {
background: #fff;
border-radius: var(--td-radius-lg);
padding: 18px 20px;
box-shadow: var(--td-shadow-2);
border: 1px solid #E2E8F0;
display: flex; align-items: center; gap: 16px;
}
.skeleton-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--td-border);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
/* ---------- 5. Reveal on Scroll (滚动进入视口动画) ---------- */
@keyframes revealUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
transform .55s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, transform;
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* 不同延迟：让连续内容错开浮现，更生动 */
.reveal.delay-1 { transition-delay: .05s; }
.reveal.delay-2 { transition-delay: .12s; }
.reveal.delay-3 { transition-delay: .18s; }
.reveal.delay-4 { transition-delay: .24s; }
.reveal.delay-5 { transition-delay: .30s; }
.reveal.delay-6 { transition-delay: .36s; }
/* ---------- 6. Toast Notification (Vercel 风格：黑底白字圆角) ---------- */
.toast-stack {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
pointer-events: auto;
min-width: 280px; max-width: 380px;
background: #0F172A;
color: #fff;
border-radius: 12px;
padding: 12px 16px;
font-size: 13px; line-height: 1.5;
display: flex; align-items: flex-start; gap: 10px;
box-shadow:
0 1px 0 rgba(255,255,255,.08) inset,
0 10px 30px rgba(0,0,0,.30),
0 2px 6px rgba(0,0,0,.18);
animation: toastIn .25s cubic-bezier(.22, .61, .36, 1);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.toast.leaving {
animation: toastOut .2s cubic-bezier(.55, .06, .68, .19) forwards;
}
.toast-icon {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
margin-top: 1px;
}
.toast.success .toast-icon { background: #10B981; color: #fff; }
.toast.error .toast-icon { background: #EF4444; color: #fff; }
.toast.info .toast-icon { background: #3B82F6; color: #fff; }
.toast.warning .toast-icon { background: #F59E0B; color: #fff; }
.toast-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.toast-title {
font-weight: 600; font-size: 13px; color: #fff;
}
.toast-msg {
color: rgba(255,255,255,.78);
font-size: 12.5px;
word-break: break-word;
}
.toast-close {
flex-shrink: 0;
background: none; border: none; color: rgba(255,255,255,.5);
font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
font-family: inherit;
transition: color .15s;
}
.toast-close:hover { color: #fff; }
@keyframes toastIn {
from { opacity: 0; transform: translateX(40px) scale(.96); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateX(0) scale(1); }
to { opacity: 0; transform: translateX(40px) scale(.96); }
}
/* ---------- 7. Micro-interactions (Scale + 阴影加深) ---------- */
/* 统一开关：可点击元素添加 .mi 类即可获得 micro-interaction */
.mi, button, a, .td-btn, .pg-btn, .td-tag, .stat-card, .toolbar-card,
.table-card, .chart-card, .advice-card, .contact-quick-card, .login-chip,
.bot-chip, .rail-link, .page-header, .stat-icon, .td-modal-header {
transition: transform .18s cubic-bezier(.22, .61, .36, 1),
box-shadow .18s ease,
background-color .15s ease,
border-color .15s ease,
color .15s ease;
}
.mi:hover, .td-btn:hover, button.td-btn:hover, .login-btn:hover,
.pg-btn:hover:not(:disabled), .login-chip:hover, .bot-chip:hover,
.rail-link:hover, .contact-quick-card:hover, .stat-card:hover,
.toolbar-card:hover, .table-card:hover, .chart-card:hover,
.advice-card:hover {
transform: translateY(-2px) scale(1.012);
box-shadow: 0 12px 28px rgba(15, 23, 42, .12),
0 4px 8px rgba(15, 23, 42, .06);
}
.mi:active, .td-btn:active, button.td-btn:active,
.pg-btn:active:not(:disabled), .rail-link:active,
.contact-quick-card:active {
transform: translateY(0) scale(.985);
transition-duration: .08s;
}
/* 链接 / 文字按钮不放大 (避免文字变形) */
a:hover, .link-btn:hover, .td-tag:hover {
transform: none;
box-shadow: none;
}
/* 极小元素 (图标徽章) 只做颜色变化，不缩放避免视觉跳动 */
.stat-icon, .td-tag, .live-dot, .topbar-user-dot {
/* 但保留其父级 stat-card 的整体缩放 */
}
/* ---------- 8. 兼容：让旧的 .app-content 在 aurora 之上 ---------- */
.app-content { position: relative; z-index: 1; }
/* ---------- 9. prefers-reduced-motion：尊重无障碍偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
.aurora-blob, .reveal, .toast, .skeleton,
.ripple, .top-progress, .fab {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
10. 响应式适配系统（手机/平板/桌面）
断点策略（移动优先 → 桌面增强）：
- 默认 (<=720px) 手机竖屏
- 720px+ 手机横屏 / 小平板
- 900px+ 平板
- 1100px+ 小桌面
- 1280px+ 标准桌面
============================================================ */
/* ----- 10.1 汉堡按钮（仅在窄屏可见） ----- */
.hamburger {
position: fixed;
top: 12px;
left: 12px;
z-index: 60;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid rgba(15, 169, 104, 0.20);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
color: #0A7D49;
cursor: pointer;
display: none; /* 默认隐藏，窄屏才显示 */
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(15, 169, 104, 0.15);
transition: transform 0.2s ease, background 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.hamburger:hover { background: rgba(255, 255, 255, 0.95); }
.hamburger:active { transform: scale(0.92); }
/* ----- 10.2 抽屉遮罩（仅在 nav-open 时显示） ----- */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 49;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.app-layout.nav-open .nav-backdrop {
opacity: 1;
pointer-events: auto;
}
/* ----- 10.3 默认：移动端样式 ----- */
@media (max-width: 720px) {
.app-layout {
flex-direction: column;
}
.app-rail {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 260px !important;
height: 100vh;
z-index: 50;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
overflow-y: auto;
}
.app-layout.nav-open .app-rail {
transform: translateX(0);
}
.app-main-wrap {
width: 100% !important;
margin-left: 0 !important;
}
.hamburger { display: flex; }
.app-topbar {
padding: 0 16px 0 64px !important;
height: 60px !important;
min-height: 60px;
}
.topbar-title { font-size: 15px !important; }
.topbar-sub { display: none !important; }
.topbar-right { gap: 8px; font-size: 12px; }
.topbar-right .stat-mini-label { display: none; }
.app-content { padding: 14px !important; }
.stat-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px;
}
.stat-card { padding: 14px !important; }
.stat-num { font-size: 22px !important; }
.stat-spark { height: 28px !important; }
.chart-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
.chart-card { padding: 14px !important; }
.chart-card canvas { max-height: 240px; }
.hr-chart-grid {
grid-template-columns: 1fr !important;
}
.hr-chart-grid > .chart-card:last-child { grid-column: 1 !important; }
/* 表格：横向滚动容器 */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -14px;
padding: 0 14px;
}
.table-wrap .td-table { min-width: 640px; }
.table-card, .advice-card { padding: 14px !important; }
.table-title { font-size: 14px !important; }
.advice-head-left { gap: 10px; }
.advice-title { font-size: 15px !important; }
.advice-list li { font-size: 13px !important; padding: 8px 10px !important; }
/* 弹窗在移动端全屏 */
.modal-card {
width: calc(100vw - 20px) !important;
max-width: none !important;
max-height: calc(100vh - 20px) !important;
border-radius: 12px !important;
}
/* 顶栏的导出/导入/新建按钮文字在移动端隐藏 */
.toolbar-text-long { display: none; }
/* 浮动按钮调整位置避免被汉堡按钮遮挡 */
.fab { bottom: 18px !important; right: 18px !important; }
/* 行 hover 快速操作在移动端常驻（不再依赖 hover） */
.quick-actions { opacity: 0.85 !important; }
/* 顶栏 LIVE 卡片堆叠 */
.topbar-live-cards {
flex-wrap: wrap;
gap: 6px;
}
.topbar-live-card { padding: 4px 8px !important; font-size: 11px !important; }
.topbar-live-card-label { display: none; }
/* 登录页 */
.login-card { padding: 24px 18px !important; }
.login-title { font-size: 20px !important; }
}
/* ----- 10.4 中小屏优化（720-900 区间：手机横屏 / 小平板） ----- */
@media (min-width: 721px) and (max-width: 900px) {
.app-rail { width: 180px !important; }
.stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.chart-grid {
grid-template-columns: 1fr !important;
}
.hr-chart-grid {
grid-template-columns: 1fr !important;
}
.hr-chart-grid > .chart-card:last-child { grid-column: 1 !important; }
.topbar-sub { display: none; }
.app-content { padding: 18px !important; }
}
/* ----- 10.5 平板（900-1100） ----- */
@media (min-width: 901px) and (max-width: 1100px) {
.app-rail { width: 200px !important; }
.stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.chart-grid {
grid-template-columns: 1fr !important;
}
.hr-chart-grid {
grid-template-columns: 1fr 1fr !important;
}
.hr-chart-grid > .chart-card:last-child { grid-column: 1 / -1 !important; }
.app-content { padding: 20px !important; }
}
/* ----- 10.6 小桌面（1100-1280）：保留原 4 列 stat ----- */
@media (min-width: 1101px) and (max-width: 1280px) {
.stat-grid { grid-template-columns: repeat(4, 1fr); }
.chart-grid { grid-template-columns: 2fr 1fr; }
.hr-chart-grid { grid-template-columns: 1fr 1fr; }
.hr-chart-grid > .chart-card:last-child { grid-column: 1 / -1; }
}
/* ----- 10.7 标准桌面（>=1280） ----- */
@media (min-width: 1281px) {
.stat-grid { grid-template-columns: repeat(4, 1fr); }
.chart-grid { grid-template-columns: 2fr 1fr; }
.hr-chart-grid { grid-template-columns: 1fr 1fr 1fr; }
.hr-chart-grid > .chart-card:last-child { grid-column: 3 / 4; }
}
/* ----- 10.8 极大屏幕（>=1600）适度放大字号 ----- */
@media (min-width: 1600px) {
.app-content { padding: 32px 40px; }
.stat-card { padding: 22px; }
.stat-num { font-size: 30px; }
.chart-card { padding: 24px; }
.td-table th, .td-table td { padding: 14px 16px; }
}
/* ----- 10.9 触摸设备优化：增加点击目标尺寸 ----- */
@media (hover: none) and (pointer: coarse) {
.rail-link, .topbar-right button, .btn {
min-height: 40px;
}
.td-table th, .td-table td {
padding: 12px 10px;
}
}
/* ----- 10.10 表格移动端行卡视图（最窄屏 < 480 时切换） ----- */
@media (max-width: 480px) {
.stat-grid { grid-template-columns: 1fr !important; }
.app-content { padding: 10px !important; }
.stat-card { padding: 12px !important; }
.stat-num { font-size: 20px !important; }
.hamburger { top: 8px; left: 8px; }
.app-rail { width: 240px !important; }
.topbar-title { font-size: 14px !important; }
.topbar-right { gap: 6px; }
.topbar-right > * { font-size: 11px; }
}
/* ----- 10.11 缩放工具栏（顶栏右侧） ----- */
.zoom-bar {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
background: rgba(15, 169, 104, 0.06);
border: 1px solid rgba(15, 169, 104, 0.18);
border-radius: 10px;
margin-left: 8px;
user-select: none;
}
.zoom-btn, .zoom-label {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #0A7D49;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border-radius: 8px;
padding: 0;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
min-height: 28px;
min-width: 28px;
}
.zoom-btn { padding: 0 6px; }
.zoom-label {
min-width: 48px;
font-variant-numeric: tabular-nums;
font-size: 12px;
padding: 0 6px;
color: #0FA968;
background: rgba(255, 255, 255, 0.5);
}
.zoom-btn:hover { background: rgba(15, 169, 104, 0.10); }
.zoom-btn:active { transform: scale(0.92); }
.zoom-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.zoom-label:hover { background: rgba(255, 255, 255, 0.85); color: #0A7D49; }
/* 移动端：缩放控件更紧凑 */
@media (max-width: 720px) {
.zoom-bar { margin-left: 4px; }
.zoom-label { min-width: 40px; font-size: 11px; }
.zoom-btn { min-width: 26px; min-height: 26px; }
}
/* 当缩放生效时，主内容区允许横向滚动以查看完整内容 */
.app-main-wrap {
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* =================================================================
* UI Upgrade Pack v2 (2026 高级感打磨)
* Ripple · Top Progress · FAB · Focus Ring · Spring Easing
* ================================================================= */
/* ---------- 10. Button Ripple (点击水波纹) ---------- */
.ripple-host {
position: relative;
overflow: hidden;
isolation: isolate;
}
.ripple {
position: absolute;
border-radius: 50%;
pointer-events: none;
background: rgba(255, 255, 255, 0.55);
transform: scale(0);
opacity: 0.7;
animation: rippleGrow .65s cubic-bezier(.22,.61,.36,1) forwards;
z-index: 0;
mix-blend-mode: overlay;
}
.ripple.dark { background: rgba(15, 23, 42, 0.18); }
@keyframes rippleGrow {
to {
transform: scale(2.6);
opacity: 0;
}
}
/* 让按钮文字/图标始终在 ripple 之上 */
.ripple-host > * { position: relative; z-index: 1; }
/* ---------- 11. Top Loading Progress (顶栏流动进度条) ---------- */
.top-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2.5px;
z-index: 9998;
background: transparent;
pointer-events: none;
overflow: hidden;
}
.top-progress::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 30%;
background: linear-gradient(90deg,
transparent 0%,
rgba(15, 169, 104, 0.7) 30%,
#0FA968 50%,
rgba(15, 169, 104, 0.7) 70%,
transparent 100%);
box-shadow: 0 0 10px rgba(15, 169, 104, 0.6);
animation: topProgressMove 1.4s cubic-bezier(.55,.06,.68,.19) infinite;
}
@keyframes topProgressMove {
0% { left: -30%; }
100% { left: 100%; }
}
/* ---------- 12. FAB - 回到顶部浮动按钮 ---------- */
.fab {
position: fixed;
right: 24px;
bottom: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%);
color: #fff;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
z-index: 900;
opacity: 0;
transform: translateY(20px) scale(0.85);
pointer-events: none;
transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s ease;
box-shadow:
0 1px 0 rgba(255,255,255,.4) inset,
0 4px 10px rgba(10,125,73,.30),
0 8px 24px rgba(15, 23, 42, .20);
font-family: inherit;
}
.fab.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.fab:hover {
transform: translateY(-3px) scale(1.06);
box-shadow:
0 1px 0 rgba(255,255,255,.55) inset,
0 8px 22px rgba(10,125,73,.40),
0 12px 32px rgba(15, 23, 42, .25);
}
.fab:active { transform: translateY(0) scale(0.96); }
.fab::before {
content: '';
position: absolute; inset: -2px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(15,169,104,.4), transparent 50%);
z-index: -1;
filter: blur(8px);
opacity: 0;
transition: opacity .3s;
}
.fab:hover::before { opacity: 1; }
/* ---------- 13. Keyboard Focus Ring (无障碍可见焦点) ---------- */
button:focus-visible, a:focus-visible, .td-btn:focus-visible,
.td-input:focus-within, .td-select:focus-visible, input:focus-visible,
textarea:focus-visible {
outline: 2px solid #0FA968;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(15, 169, 104, 0.22);
}
/* 主按钮聚焦时用白边描边，避免与绿色融合 */
.td-btn--primary:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(15, 169, 104, 0.45);
}
/* ---------- 14. Reveal v2 (Spring 曲线 + Scale 进入) ---------- */
.reveal {
transform: translateY(24px) scale(0.96);
transition: opacity .6s cubic-bezier(.22,.61,.36,1),
transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view {
transform: translateY(0) scale(1);
}
/* ---------- 15. Toast v2 (Spring 反弹 + 图标背景模糊) ---------- */
.toast {
animation: toastSpringIn .45s cubic-bezier(.34,1.56,.64,1);
transform-origin: right center;
}
.toast-icon {
background: rgba(255,255,255,0.12) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.toast.success .toast-icon { background: rgba(16,185,129,0.95) !important; }
.toast.error .toast-icon { background: rgba(239,68,68,0.95) !important; }
.toast.info .toast-icon { background: rgba(59,130,246,0.95) !important; }
.toast.warning .toast-icon { background: rgba(245,158,11,0.95) !important; }
@keyframes toastSpringIn {
0% { opacity: 0; transform: translateX(60px) scale(0.7); }
60% { opacity: 1; transform: translateX(-6px) scale(1.04); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
/* ---------- 16. Aurora 呼吸感（叠加轻微 opacity/scale 脉动） ---------- */
.aurora-blob {
animation-timing-function: cubic-bezier(.45,.05,.55,.95);
}
.aurora-blob.b1 { animation: auroraFloat1 22s cubic-bezier(.45,.05,.55,.95) infinite, auroraBreathe 8s ease-in-out infinite; }
.aurora-blob.b2 { animation: auroraFloat2 28s cubic-bezier(.45,.05,.55,.95) infinite, auroraBreathe 10s ease-in-out infinite reverse; }
.aurora-blob.b3 { animation: auroraFloat3 32s cubic-bezier(.45,.05,.55,.95) infinite, auroraBreathe 12s ease-in-out infinite; }
.aurora-blob.b4 { animation: auroraFloat4 26s cubic-bezier(.45,.05,.55,.95) infinite, auroraBreathe 9s ease-in-out infinite reverse; }
@keyframes auroraBreathe {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.65; }
}
/* ---------- 17. 顶栏（Topbar）轻微玻璃感 ---------- */
.app-topbar {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-bottom: 1px solid rgba(229, 232, 238, 0.6) !important;
z-index: 60 !important;
}
/* ---------- 18. Sidebar 激活态左侧条带光晕 ---------- */
.rail-link.on::before {
background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%) !important;
box-shadow:
0 0 8px rgba(15, 169, 104, 0.6),
0 0 16px rgba(15, 169, 104, 0.3);
height: 20px !important;
width: 3px !important;
border-radius: 0 4px 4px 0;
}
/* ---------- 19. Skeleton 升级（圆头像+微脉冲） ---------- */
.skeleton {
background: linear-gradient(
90deg,
rgba(226, 232, 240, 0.4) 0%,
rgba(241, 245, 249, 0.95) 50%,
rgba(226, 232, 240, 0.4) 100%
) !important;
background-size: 200% 100% !important;
}
.skeleton-card {
background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
}
/* ---------- 20. 主区切换路由时的轻量过渡 ---------- */
.app-content {
animation: pageEnter .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes pageEnter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* =================================================================
* v3 业务功能 (智能解析 · 实时监控 · 行级操作)
* ================================================================= */
/* ---------- 21. 表格行左侧状态色条 ---------- */
.td-table tbody td:first-child {
position: relative;
}
.td-table tbody tr.row-pending td:first-child::before,
.td-table tbody tr.row-sent td:first-child::before,
.td-table tbody tr.row-replied td:first-child::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
}
.td-table tbody tr.row-pending td:first-child::before { background: linear-gradient(180deg, #FCA5A5, #EF4444); }
.td-table tbody tr.row-sent td:first-child::before { background: linear-gradient(180deg, #FCD34D, #F59E0B); }
.td-table tbody tr.row-replied td:first-child::before { background: linear-gradient(180deg, #6EE7B7, #0FA968); box-shadow: 0 0 6px rgba(15,169,104,0.4); }
/* ---------- 22. NEW 角标（候选人新回复时） ---------- */
.new-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
color: #fff;
box-shadow: 0 0 0 2px rgba(239,68,68,0.2), 0 2px 6px rgba(239,68,68,0.3);
vertical-align: middle;
animation: newBadgePop .6s cubic-bezier(.34,1.56,.64,1), newBadgePulse 1.4s ease-in-out infinite .6s;
}
@keyframes newBadgePop {
0% { transform: scale(0); }
60% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes newBadgePulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.2), 0 2px 6px rgba(239,68,68,0.3); }
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0.05), 0 4px 10px rgba(239,68,68,0.5); }
}
.td-table tbody tr.row-new {
background: linear-gradient(90deg, rgba(239,68,68,0.05) 0%, transparent 100%) !important;
animation: rowNewFlash 1.2s ease-out;
}
@keyframes rowNewFlash {
0% { background: rgba(239,68,68,0.15) !important; }
100% { background: transparent; }
}
/* ---------- 23. 行 hover 时显示的快速操作按钮 ---------- */
.contact-cell { position: relative; }
.quick-actions {
position: absolute;
right: -4px;
top: 50%;
transform: translateY(-50%) translateX(8px);
display: flex;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: opacity .18s, transform .18s cubic-bezier(.22,.61,.36,1);
z-index: 5;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 3px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.05);
}
.td-table tbody tr:hover .quick-actions {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
.qa-btn {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 4px 8px;
border: 1px solid transparent;
border-radius: 6px;
background: #fff;
color: #475569;
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .12s;
}
.qa-btn:hover { transform: translateY(-1px); }
.qa-btn.sms { color: #F59E0B; border-color: #FCD34D; background: #FFFBEB; }
.qa-btn.sms:hover { background: #FEF3C7; }
.qa-btn.wechat { color: #0FA968; border-color: #6EE7B7; background: #ECFDF5; }
.qa-btn.wechat:hover { background: #D1FAE5; }
.qa-btn.copy { color: #64748B; border-color: #CBD5E1; background: #F8FAFC; }
.qa-btn.copy:hover { background: #F1F5F9; }
.qa-btn:active { transform: translateY(0) scale(0.95); }
/* ---------- 24. 顶栏实时数据卡 ---------- */
.topbar-live-cards {
display: inline-flex;
align-items: stretch;
gap: 0;
background: rgba(255,255,255,0.6);
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 4px;
margin-right: 8px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.tlc-item {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 4px 12px;
border-radius: 8px;
min-width: 56px;
position: relative;
transition: background .2s;
}
.tlc-item + .tlc-item { border-left: 1px solid #E2E8F0; margin-left: 4px; padding-left: 14px; }
.tlc-num {
font-size: 16px; font-weight: 800;
color: #0F172A; line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.tlc-num i { font-size: 11px; font-style: normal; color: #94A3B8; margin-left: 1px; font-weight: 600; }
.tlc-label { font-size: 10px; color: #64748B; margin-top: 1px; font-weight: 500; }
.tlc-sent .tlc-num { color: #1E40AF; }
.tlc-reply .tlc-num { color: #0FA968; }
.tlc-rate .tlc-num { color: #0A7D49; }
/* 实时监控脉冲 pill */
.live-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15,169,104,0.08);
color: var(--td-brand-3);
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(15,169,104,0.2);
position: relative;
transition: all .2s;
}
.live-pill.pulse {
background: rgba(239,68,68,0.08);
border-color: rgba(239,68,68,0.3);
color: #B91C1C;
animation: livePillShake .5s ease-out;
}
@keyframes livePillShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.live-tick {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #EF4444;
color: #fff;
font-size: 10px;
font-weight: 800;
margin-left: 4px;
animation: liveTickPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes liveTickPop {
0% { transform: scale(0); }
60% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* ---------- 25. 解析结果卡片 ---------- */
.parse-result {
margin-top: 14px;
background: linear-gradient(180deg, #F0FDF4 0%, #ECFDF5 100%);
border: 1.5px solid #6EE7B7;
border-radius: 12px;
padding: 14px 16px;
animation: parseResultIn .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes parseResultIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.parse-result-head {
font-size: 13px; font-weight: 700; color: #0A7D49;
margin-bottom: 10px;
display: flex; align-items: center; gap: 6px;
}
.parse-result-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 18px;
}
.parse-result-grid > div {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
padding: 4px 0;
}
.parse-result-grid .lbl {
flex-shrink: 0;
width: 50px;
color: #64748B;
font-size: 12px;
text-align: right;
}
.parse-result-grid .val {
font-weight: 600;
color: #0F172A;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 4px;
}
.parse-result-grid .val.ok { color: #0FA968; }
.parse-result-grid .val.ok::before { content: '✓'; color: #0FA968; font-weight: 800; }
.parse-result-grid .val.warn { color: #F59E0B; }
.parse-result-grid .val.warn::before { content: '⚠'; color: #F59E0B; }
/* =================================================================
* v4 图表增强（HR 页 · Sparkline · 工具栏）
* ================================================================= */
/* ---------- 26. 图表卡片工具栏 ---------- */
.chart-card {
position: relative;
}
.chart-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; gap: 8px;
}
.chart-head-left { display: flex; align-items: center; gap: 8px; }
.chart-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.chart-tip { font-size: 12px; color: #6B7A99; font-weight: 400; }
.chart-toolbar { display: inline-flex; gap: 4px; align-items: center; }
.chart-chip {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 8px;
border-radius: 6px;
background: rgba(255,255,255,0.7);
border: 1px solid #E2E8F0;
color: #64748B;
font-size: 11px; font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.chart-chip:hover { background: #F0FDF4; border-color: #6EE7B7; color: #0A7D49; }
.chart-chip.on { background: linear-gradient(180deg, #0FA968 0%, #0A7D49 100%); color: #fff; border-color: #0A7D49; box-shadow: 0 1px 2px rgba(10,125,73,.20), 0 2px 6px rgba(15,169,104,.30); }
.chart-chip:active { transform: scale(.95); }
/* ---------- 27. 统计卡 sparkline ---------- */
.stat-card { position: relative; }
.stat-spark {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 80px;
height: 36px;
opacity: 0.7;
pointer-events: none;
}
.stat-spark.danger { opacity: 0.55; }
/* ---------- 28. HR 图表网格 ---------- */
.hr-chart-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 16px;
}
.hr-chart-grid > .chart-card:last-child { grid-column: 1 / -1; }
@media (max-width: 980px) {
.hr-chart-grid { grid-template-columns: 1fr; }
.hr-chart-grid > .chart-card:last-child { grid-column: 1; }
}
/* ---------- 29. 空数据图表占位 ---------- */
.chart-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%;
color: #94A3B8;
font-size: 13px;
gap: 8px;
}
.chart-empty-icon { font-size: 36px; opacity: 0.5; }
/* ---------- 30. 数字滚动入场（数字 tick 数字动效） ---------- */
@keyframes numberUp {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.stat-value, .tlc-num {
animation: numberUp .4s cubic-bezier(.22,.61,.36,1);
}