/* ============================================================
   双鱼/ceping · 全站界面统一改版 v2
   目标：统一青绿主题、提升表格与表单可读性、
        规范按钮/弹窗/空状态/移动端体验。
   原则：只做视觉与交互反馈，不改业务逻辑。
   ============================================================ */

/* ---------- 全局基础 ---------- */
:root {
    --success: #2A8A7B;
    --warning: #D97706;
    --danger: #DC2626;
    --info: #2563EB;
    --surface-2: #F8FBFA;
    --surface-3: #EFF6F4;
    --bg-light: #F1F8F6;
    --text: #172A26;
    --text-title: #172A26;
    --focus-ring: 0 0 0 3px rgba(42, 138, 123, .18);
    --brand-gradient: linear-gradient(135deg, #2A8A7B, #3AA899);
}

body {
    font-feature-settings: "tnum" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

#pageContent {
    max-width: 1440px;
    margin: 0 auto;
    padding: 26px 28px 42px;
}

#pageContent h1,
#pageContent h2,
#pageContent h3,
#pageContent h4 {
    color: var(--text-title);
    letter-spacing: -.2px;
}

#pageContent a {
    color: var(--primary);
    text-decoration: none;
}

#pageContent a:hover {
    text-decoration: underline;
}

::selection {
    background: rgba(42, 138, 123, .18);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #C6DBD5;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A8C9C0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 页面骨架 ---------- */
#pageContent > .section,
#pageContent > .chart-section,
#pageContent > .sp-section,
#pageContent > .ss-section,
#pageContent > .pk-card,
#pageContent > .chart-card,
#pageContent > .upload-zone {
    margin-bottom: 22px;
}

#pageContent .section-title,
#pageContent .sp-section-title,
#pageContent .ss-section-title,
#pageContent .cr-section-title,
#pageContent .sect-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-title);
}

#pageContent .section-title i {
    color: var(--primary);
}

#pageContent .sub,
#pageContent .chart-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ---------- 通用卡片 ---------- */
#pageContent .stat-card,
#pageContent .chart-card,
#pageContent .student-card,
#pageContent .sp-card,
#pageContent .pk-card,
#pageContent .ka-chart-card,
#pageContent .attention-card,
#pageContent .sp-overview-card,
#pageContent .agent-ask-card,
#pageContent .agent-confirm-card {
    background: linear-gradient(180deg, #fff, #FBFEFD);
    border: 1px solid rgba(42, 138, 123, .12);
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(31, 111, 99, .06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#pageContent .stat-card:hover,
#pageContent .chart-card:hover,
#pageContent .sp-card:hover,
#pageContent .pk-card:hover,
#pageContent .ka-chart-card:hover,
#pageContent .attention-card:hover,
#pageContent .sp-overview-card:hover {
    transform: translateY(-2px);
    border-color: rgba(42, 138, 123, .28);
    box-shadow: 0 12px 30px rgba(31, 111, 99, .12);
}

#pageContent .sp-card,
#pageContent .pk-card,
#pageContent .agent-confirm-card {
    padding: 18px;
}

#pageContent .sp-card:hover {
    border-left: 3px solid var(--primary);
}

#pageContent .chart-box {
    background: linear-gradient(180deg, #fff, #FAFDFC);
    border: 1px solid rgba(42, 138, 123, .10);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 111, 99, .05);
}

/* ---------- 表格 ---------- */
/* 20260917 冻结修复：:not(.sx-grid) 排除表格工作台网格（overflow:hidden 会破坏其 sticky 冻结列） */
#pageContent table:not(.sx-grid),
#pageContent .sp-table,
#pageContent .pk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid rgba(42, 138, 123, .12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(31, 111, 99, .05);
}

#pageContent table:not(.sx-grid) th,
#pageContent .sp-table th,
#pageContent .pk-table th {
    position: static;
    z-index: 2;
    background: #F1F8F6;
    color: #265B53;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(42, 138, 123, .12);
}

.modal-overlay table:not(.sx-grid) th,
.modal-overlay .sp-table th,
.modal-overlay .pk-table th {
    top: 0;
}

#pageContent table:not(.sx-grid) td,
#pageContent .sp-table td,
#pageContent .pk-table td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid #EDF4F2;
    vertical-align: middle;
}

#pageContent table:not(.sx-grid) tbody tr:last-child td {
    border-bottom: 0;
}

#pageContent table:not(.sx-grid) tbody tr:hover td,
#pageContent .sp-table tbody tr:hover td,
#pageContent .pk-table tbody tr:hover td {
    background: #F7FBFA;
}

/* ---------- 表单与筛选 ---------- */
#pageContent input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#pageContent select,
#pageContent textarea,
#pageContent .form-input {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #DCE8E6;
    border-radius: 10px;
    background: #FAFCFC;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#pageContent input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#pageContent select:focus,
#pageContent textarea:focus,
#pageContent .form-input:focus {
    background: #fff;
    border-color: #2A8A7B;
    box-shadow: var(--focus-ring);
}

#pageContent textarea:not(.sx-in) {
    min-height: 92px;
    line-height: 1.6;
    resize: vertical;
}

#pageContent .lbl {
    display: inline-block;
    margin-bottom: 7px;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------- 表格容器 / 徽标 ---------- */
#pageContent .table-wrap {
    overflow: auto;
    border: 1px solid rgba(42, 138, 123, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(31, 111, 99, .05);
    max-height: min(72vh, 760px);
}

#pageContent .table-wrap table {
    min-width: 720px;
}

/* 通用表格：滚动容器内表头固定，长文本自动换行 */
#pageContent .table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-light);
    box-shadow: inset 0 -1px 0 rgba(42, 138, 123, .12);
}

#pageContent .table-wrap th,
#pageContent .table-wrap td {
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

#pageContent .table-wrap td {
    white-space: normal;
}

/* 学员管理筛选条与姓氏头像：延续青绿按钮体系 */
#pageContent .stu-filter-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid rgba(42, 138, 123, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(31, 111, 99, .05);
}

#pageContent .stu-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 12.5px;
    font-weight: 800;
}

#pageContent .stu-filter-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #DCE8E6;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all .18s ease;
}

#pageContent .stu-filter-btn b {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #F0F8F6;
    color: #265B53;
    font-size: 11px;
    line-height: 18px;
}

#pageContent .stu-filter-btn:hover,
#pageContent .stu-filter-btn.active {
    border-color: #2A8A7B;
    background: #2A8A7B;
    color: #fff;
    box-shadow: 0 6px 16px rgba(42, 138, 123, .18);
    transform: translateY(-1px);
}

#pageContent .stu-filter-btn:hover b,
#pageContent .stu-filter-btn.active b {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

#pageContent .stu-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 12px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 5px 14px rgba(42, 138, 123, .2);
}

/* 教师规则模糊搜索下拉 */
.rule-combo {
    position: relative;
}

.rule-combo input {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #DCE8E6;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
}

.rule-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 300;
    max-height: 220px;
    overflow: auto;
    border: 1px solid #CDE0DB;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.rule-combo-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

.rule-combo-item:hover,
.rule-combo-item.active {
    background: #F0F8F6;
    color: #1F6F63;
}

/* 表格工作台：长内容换行，输入区域随内容增高 */
.sx-grid textarea.sx-in {
    display: block;
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 9px 10px;
    border: none;
    resize: none;
    overflow-y: auto;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    outline: none;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sx-grid td,
.sx-grid textarea.sx-in {
    min-width: 0;
    max-width: 100%;
}

.sx-grid td {
    white-space: normal;
}

/* ---------- 按钮统一 ---------- */
#pageContent .btn-primary {
    min-height: 40px;
    padding: 9px 20px;
    border: none;
    border-radius: 12px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

#pageContent .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(.98);
    box-shadow: 0 8px 20px rgba(42, 138, 123, .28);
}

#pageContent .btn-secondary {
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid #CDE0DB;
    border-radius: 12px;
    background: #fff;
    color: #265B53;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

#pageContent .btn-secondary:hover {
    border-color: #2A8A7B;
    background: #F2F9F7;
    transform: translateY(-1px);
}

#pageContent .btn-sm,
#pageContent .ka-btn,
#pageContent .pk-btn {
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #DCE8E6;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}

#pageContent .btn-sm:hover,
#pageContent .ka-btn:hover,
#pageContent .pk-btn:hover:not([disabled]) {
    border-color: #2A8A7B;
    color: #1F6F63;
    background: #F0F8F6;
    transform: translateY(-1px);
}

#pageContent .btn-sm[onclick*="delete"],
#pageContent .btn-sm[onclick*="Delete"],
#pageContent .btn-danger {
    border-color: #F8D7D7;
    background: #FDF4F4;
    color: #B91C1C;
}

#pageContent .btn-sm[onclick*="delete"]:hover,
#pageContent .btn-sm[onclick*="Delete"]:hover,
#pageContent .btn-danger:hover {
    border-color: #DC2626;
    background: #FEF2F2;
    color: #991B1B;
}

#pageContent button:focus-visible,
#pageContent .btn-primary:focus-visible,
#pageContent .btn-secondary:focus-visible,
#pageContent .btn-sm:focus-visible,
#pageContent a:focus-visible,
#pageContent input:focus-visible,
#pageContent select:focus-visible,
#pageContent textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- 标签/徽标/进度 ---------- */
#pageContent .dimension-tag,
#pageContent .pwb-tag,
#pageContent .ss-career-tag,
#pageContent .ls-dim-badge,
#pageContent .sp-grade {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid rgba(42, 138, 123, .18);
    border-radius: 99px;
    background: rgba(42, 138, 123, .08);
    color: #265B53;
    font-size: 11.5px;
    font-weight: 800;
}

#pageContent [class*="badge"],
#pageContent [class*="status"] {
    border-radius: 99px;
}

/* ---------- 弹窗 ---------- */
.modal-overlay {
    backdrop-filter: blur(7px) saturate(1.05);
    background: rgba(15, 34, 30, .40) !important;
}

.modal,
.modal-content,
.qk-modal {
    background: #fff !important;
    border: 1px solid rgba(42, 138, 123, .14) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(15, 34, 30, .22) !important;
    overflow: hidden;
}

.modal-header,
.qk-head {
    padding: 20px 24px !important;
    border-bottom: 1px solid #E8F0EF;
    background: linear-gradient(180deg, #F7FBFA, #fff);
}

.modal-body,
.qk-body {
    padding: 22px 24px !important;
    background: #fff;
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 18px 24px 24px !important;
    border-top: 1px solid #EDF4F2;
    background: #FBFDFD;
}

/* ---------- 空状态 / 加载状态 ---------- */
#pageContent .sp-empty,
#pageContent .pw-stu-empty,
#pageContent .pk-loading,
#pageContent .pk-err,
#pageContent .placeholder-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 210px;
    padding: 34px 22px;
    border: 1px dashed #C9DFD9;
    border-radius: 16px;
    background: linear-gradient(180deg, #FBFEFD, #F4FAF8);
    color: #5D7B75;
    text-align: center;
}

#pageContent .sp-empty i,
#pageContent .pw-stu-empty i,
#pageContent .placeholder-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(42, 138, 123, .10);
    color: var(--primary);
    font-size: 19px;
}

/* ---------- 侧边栏与顶部 ---------- */
.sidebar {
    background: linear-gradient(180deg, #175E52 0%, #1F6F63 45%, #2A8A7B 100%);
}

.sidebar-nav {
    padding: 14px 12px;
}

.nav-section-title {
    margin: 16px 14px 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.nav-item {
    min-height: 44px;
    border-radius: 11px;
    font-size: 13.5px;
}

.nav-item::before {
    display: none;
}

.nav-item.active {
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .92);
}

.topbar {
    box-shadow: 0 1px 0 rgba(31, 111, 99, .06);
}

.page-title {
    font-size: 19px;
}

.breadcrumb {
    padding-top: 2px;
}

.breadcrumb a {
    color: var(--text-muted);
    font-weight: 700;
}

.breadcrumb a:hover {
    text-decoration: none;
    color: var(--primary);
}

#campusSwitchBtn,
.student-selector {
    min-height: 38px;
    border: 1px solid #DCE8E6 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #265B53 !important;
    box-shadow: 0 1px 6px rgba(31, 111, 99, .04);
}

#campusSwitchBtn:hover,
.student-selector:hover {
    border-color: #2A8A7B !important;
    box-shadow: 0 4px 14px rgba(42, 138, 123, .13);
}

#campusMenu,
.student-dropdown {
    border: 1px solid rgba(42, 138, 123, .14) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 48px rgba(15, 34, 30, .16) !important;
}

#campusMenu label:hover,
.student-dropdown-list > div:hover {
    background: #F2F9F7 !important;
}

.logout-btn {
    border-radius: 11px;
    overflow: hidden;
}

/* ---------- 测评与报告专项 ---------- */
#pageContent .cr-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid rgba(42, 138, 123, .10);
    border-radius: 13px;
    background: linear-gradient(90deg, rgba(42, 138, 123, .07), rgba(42, 138, 123, .02));
}

#pageContent .cr-section-title {
    margin: 0;
}

#pageContent .sp-section {
    padding: 0;
    border: 1px solid rgba(42, 138, 123, .10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(31, 111, 99, .05);
    overflow: hidden;
}

#pageContent .sp-section-title {
    margin: 0;
    padding: 15px 18px;
    border-bottom: 1px solid #EAF2F0;
    background: #F9FDFC;
}

#pageContent .sp-section > div:not(.sp-section-title) {
    padding: 18px;
}

/* ---------- Agent 对话 ---------- */
.agent-msg {
    max-width: min(860px, 92%);
    padding: 13px 16px;
    border-radius: 15px;
    line-height: 1.65;
    box-shadow: 0 2px 10px rgba(31, 111, 99, .06);
}

.agent-msg.bot {
    border: 1px solid rgba(42, 138, 123, .12);
    background: #fff;
}

.agent-msg.user {
    background: var(--brand-gradient) !important;
    color: #fff;
}

.agent-dot {
    border: 1px solid rgba(42, 138, 123, .15);
    background: #fff;
    box-shadow: 0 3px 10px rgba(31, 111, 99, .08);
}

.agent-export-btn {
    border: 1px solid #DCE8E6 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #475569 !important;
}

.agent-export-btn:hover {
    border-color: #2A8A7B !important;
    color: #1F6F63 !important;
    background: #F0F8F6 !important;
}

/* ---------- 登录页 ---------- */
.login-container {
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 30px 80px rgba(4, 35, 30, .30);
}

.login-container::before {
    opacity: .48;
}

.role-tab {
    transition: color .2s ease, background .2s ease;
}

.role-tab.active {
    color: #2A8A7B;
}

.role-tab.active::after {
    background: linear-gradient(90deg, #2A8A7B, #3AA899) !important;
}

.login-btn {
    background: linear-gradient(135deg, #2A8A7B 0%, #3AA899 100%) !important;
    box-shadow: 0 12px 28px rgba(42, 138, 123, .26) !important;
}

.login-btn:hover {
    background: linear-gradient(135deg, #22796C 0%, #2A8A7B 100%) !important;
    transform: translateY(-1px);
}

.login-btn:focus-visible,
.form-input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
}

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
    #pageContent {
        padding: 18px 14px 34px;
    }

    #pageContent table:not(.sx-grid) {
        display: block;
        overflow-x: auto;
    }

    #pageContent .modal,
    #pageContent .modal-content,
    #pageContent .qk-modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(88vh, 760px);
        overflow: auto;
    }

    #pageContent .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
    }
}

@media (max-width: 620px) {
    #pageContent .sp-section > div:not(.sp-section-title),
    #pageContent .sp-card,
    #pageContent .pk-card {
        padding: 15px;
    }

    #pageContent table th,
    #pageContent table td {
        padding: 10px;
    }

    #pageContent .cr-section-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .sidebar,
    .topbar,
    .agent-panel,
    .modal-overlay {
        display: none !important;
    }

    #pageContent {
        max-width: none;
        padding: 0;
    }
}