/* ==== 主样式（原 index.html 第一个 <style> 块，纯搬运） ==== */
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #3b82f6;
            --accent: #7c3aed;
            --accent-light: #8b5cf6;
            --bg-warm: #f8fafc;
            --bg-card: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #64748b;   /* 20260913 审计修复 UI-4：#94a3b8 白底对比度 2.5:1 不达标，提至 #64748b（≥4.5:1） */
            --border: #e2e8f0;
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
            --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 10px 15px -3px rgba(15, 23, 42, 0.05);
            --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --sidebar-width: 260px;
            --topbar-height: 64px;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-warm);
            color: var(--text-primary);
            font-size: 15px;   /* 20260831 字号整体提升：详情/电话等资料显示更大 */
            min-height: 100vh;
            overflow-x: hidden;
        }

        .login-page {
            position: fixed;
            inset: 0;
            display: flex;
            z-index: 9999;
            overflow: hidden;
        }

        .login-left {
            flex: 1;
            background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 30%, #2563eb 60%, #3b82f6 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
        }

        .login-left::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 60% at 20% 80%, rgba(124,58,237,0.2) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
                radial-gradient(ellipse 50% 50% at 50% 50%, rgba(37,99,235,0.3) 0%, transparent 70%);
            pointer-events: none;
        }

        .login-left-mesh {
            position: absolute;
            inset: 0;
            opacity: 0.04;
            background-image:
                linear-gradient(30deg, rgba(255,255,255,0.3) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.3) 87.5%),
                linear-gradient(150deg, rgba(255,255,255,0.3) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.3) 87.5%),
                linear-gradient(30deg, rgba(255,255,255,0.3) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.3) 87.5%),
                linear-gradient(150deg, rgba(255,255,255,0.3) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.3) 87.5%);
            background-size: 80px 140px;
            background-position: 0 0, 0 0, 40px 70px, 40px 70px;
            pointer-events: none;
        }

        .login-left-shapes {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .login-left-shapes .lshape {
            position: absolute;
            border-radius: 50%;
        }

        .login-left-shapes .lshape:nth-child(1) {
            width: 300px;
            height: 300px;
            top: -80px;
            left: -80px;
            background: rgba(255,255,255,0.04);
            animation: leftFloat1 18s ease-in-out infinite;
        }

        .login-left-shapes .lshape:nth-child(2) {
            width: 200px;
            height: 200px;
            bottom: 10%;
            right: -40px;
            background: rgba(124,58,237,0.08);
            animation: leftFloat2 22s ease-in-out infinite;
        }

        .login-left-shapes .lshape:nth-child(3) {
            width: 120px;
            height: 120px;
            top: 20%;
            right: 15%;
            background: rgba(255,255,255,0.06);
            animation: leftFloat3 15s ease-in-out infinite;
        }

        .login-left-shapes .lshape:nth-child(4) {
            width: 80px;
            height: 80px;
            bottom: 25%;
            left: 20%;
            background: rgba(124,58,237,0.06);
            animation: leftFloat1 20s ease-in-out infinite reverse;
        }

        .login-left-shapes .lshape:nth-child(5) {
            width: 160px;
            height: 160px;
            top: 55%;
            left: 8%;
            background: rgba(255,255,255,0.03);
            animation: leftFloat2 25s ease-in-out infinite;
        }

        .login-left-shapes .lshape:nth-child(6) {
            width: 40px;
            height: 40px;
            top: 15%;
            left: 45%;
            background: rgba(255,255,255,0.08);
            animation: leftFloat3 12s ease-in-out infinite;
        }

        .login-left-shapes .lshape:nth-child(7) {
            width: 60px;
            height: 60px;
            bottom: 40%;
            right: 30%;
            background: rgba(124,58,237,0.1);
            animation: leftFloat1 16s ease-in-out infinite;
        }

        @keyframes leftFloat1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(20px, -30px) scale(1.05); }
            66% { transform: translate(-15px, 20px) scale(0.95); }
        }

        @keyframes leftFloat2 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(-25px, -20px) rotate(10deg); }
        }

        @keyframes leftFloat3 {
            0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
            50% { transform: translateY(-35px) scale(1.1); opacity: 0.7; }
        }

        .login-left-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 40px;
        }

        .login-left-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 32px;
            background: rgba(255,255,255,0.12);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 60px rgba(255,255,255,0.05) inset;
            animation: iconPulse 4s ease-in-out infinite;
        }

        @keyframes iconPulse {
            0%, 100% { box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 60px rgba(255,255,255,0.05) inset; }
            50% { box-shadow: 0 12px 50px rgba(0,0,0,0.2), 0 0 80px rgba(255,255,255,0.1) inset; }
        }

        .login-left-icon i {
            font-size: 44px;
            color: white;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
        }

        .login-left-title {
            font-family: "STKaiti", "KaiTi", "SimKai", serif;
            font-size: 36px;
            color: white;
            letter-spacing: 6px;
            line-height: 1.5;
            text-shadow: 0 2px 20px rgba(0,0,0,0.15);
            margin-bottom: 16px;
        }

        .login-left-subtitle {
            font-size: 16px;
            color: rgba(255,255,255,0.75);
            letter-spacing: 4px;
            font-weight: 300;
        }

        .login-left-divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(124,58,237,0.8), transparent);
            margin: 28px auto;
            border-radius: 2px;
        }

        .login-left-tagline {
            font-size: 13px;
            color: rgba(255,255,255,0.5);
            letter-spacing: 2px;
            margin-top: 8px;
        }

        .login-left-decor-circles {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 2;
        }

        .login-left-decor-circles span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            animation: dotPulse 3s ease-in-out infinite;
        }

        .login-left-decor-circles span:nth-child(2) {
            animation-delay: 0.5s;
            background: rgba(124,58,237,0.5);
        }

        .login-left-decor-circles span:nth-child(3) {
            animation-delay: 1s;
        }

        @keyframes dotPulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.3); }
        }

        .login-right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-warm);
            position: relative;
            min-height: 100vh;
        }

        .login-right::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse at 0% 50%, rgba(37,99,235,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 100% 0%, rgba(124,58,237,0.03) 0%, transparent 40%);
            pointer-events: none;
        }

        .login-container {
            position: relative;
            z-index: 10;
            width: 420px;
            max-width: 90vw;
            animation: loginSlideUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            opacity: 0;
            transform: translateY(40px);
        }

        @keyframes loginSlideUp {
            to { opacity: 1; transform: translateY(0); }
        }

        .login-card {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 48px 40px 40px;
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.8) inset;
        }

        .login-brand {
            text-align: center;
            margin-bottom: 36px;
        }

        .login-brand-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 20px rgba(37,99,235,0.25);
        }

        .login-brand-icon i {
            font-size: 24px;
            color: white;
        }

        .login-brand h1 {
            font-family: "STKaiti", "KaiTi", "SimKai", serif;
            font-size: 22px;
            color: var(--text-primary);
            letter-spacing: 2px;
            line-height: 1.4;
        }

        .login-brand p {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 6px;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            position: relative;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .form-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .form-input-wrapper i.input-icon {
            position: absolute;
            left: 16px;
            color: var(--text-muted);
            font-size: 15px;
            transition: color var(--transition);
            z-index: 2;
        }

        .form-input {
            width: 100%;
            padding: 14px 16px 14px 46px;
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            font-size: 15px;
            font-family: inherit;
            color: var(--text-primary);
            background: white;
            transition: all var(--transition);
            outline: none;
        }

        .form-input::placeholder {
            color: var(--text-muted);
            font-weight: 300;
        }

        .form-input:focus {
            border-color: var(--primary);
            background: white;
            box-shadow: 0 0 0 4px rgba(37,99,235,0.08), 0 2px 12px rgba(37,99,235,0.06);
        }

        .form-input:focus ~ i.input-icon,
        .form-input:focus + i.input-icon {
            color: var(--primary);
        }

        .toggle-password {
            position: absolute;
            right: 14px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 15px;
            padding: 4px;
            transition: color var(--transition);
            z-index: 2;
        }

        .toggle-password:hover {
            color: var(--primary);
        }

        .login-btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 16px;
            font-weight: 700;
            font-family: inherit;
            color: white;
            cursor: pointer;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, #60a5fa 100%);
            transition: all var(--transition);
            position: relative;
            overflow: hidden;
            letter-spacing: 2px;
            margin-top: 4px;
        }

        .login-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(37,99,235,0.35);
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 40%, #93bbfd 100%);
        }

        .login-btn:hover::before {
            left: 100%;
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .login-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .login-error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            align-items: center;
            gap: 10px;
            animation: errorShake 0.5s ease-in-out;
            display: none;
        }

        .login-error.show {
            display: flex;
        }

        @keyframes errorShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-8px); }
            40% { transform: translateX(8px); }
            60% { transform: translateX(-6px); }
            80% { transform: translateX(6px); }
        }

        .login-footer {
            text-align: center;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }

        .login-footer p {
            font-size: 12px;
            color: var(--text-muted);
        }

        @media (max-width: 900px) {
            .login-left {
                display: none;
            }

            .login-right {
                flex: 1;
                background: linear-gradient(160deg, #1e40af 0%, #2563eb 30%, #3b82f6 70%, #60a5fa 100%);
            }

            .login-right::before {
                background:
                    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(124,58,237,0.15) 0%, transparent 60%),
                    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 50%);
            }

            .login-card {
                background: rgba(255,255,255,0.95);
                backdrop-filter: blur(20px);
                box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            }

            .login-brand-icon {
                display: none;
            }

            .login-brand h1 {
                color: var(--primary);
            }
        }

        /* ========== MAIN APP LAYOUT ========== */
        .app-wrapper {
            display: none;
            min-height: 100vh;
        }

        .app-wrapper.active {
            display: grid;
            grid-template-columns: var(--sidebar-width) 1fr;
            grid-template-rows: var(--topbar-height) 1fr;
            grid-template-areas:
                "sidebar topbar"
                "sidebar content";
            animation: appFadeIn 0.5s ease forwards;
            /* 固定视口高度：侧边栏/顶栏固定不动，仅内容区滚动 */
            height: 100vh;
        }

        @keyframes appFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* SIDEBAR（20260901 按设计规范：深蓝底 #0F3470，菜单项 44px，选中 #254B99 白字） */
        .sidebar {
            grid-area: sidebar;
            background: #0F3470;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            border-right: none;
        }

        .sidebar::before {
            content: none;
        }

        .sidebar::after {
            content: none;
        }

        .sidebar-header {
            height: 64px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.10);
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sidebar-logo-icon {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.12);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.14);
        }

        .sidebar-logo-icon i {
            font-size: 22px;
            color: #ffffff;
        }

        .sidebar-logo-text h2 {
            font-family: "STKaiti", "KaiTi", "SimKai", serif;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 1.5px;
            line-height: 1.3;
        }

        .sidebar-logo-text span {
            font-size: 10.5px;
            color: #C0D0F0;
            font-weight: 400;
            letter-spacing: 0.5px;
        }

        .sidebar-nav {
            flex: 1;
            padding: 12px 12px;
            overflow-y: auto;
            position: relative;
            z-index: 1;
        }

        .nav-section-title {
            font-size: 11.5px;
            font-weight: 600;
            color: #7E97C9;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 0 16px;
            margin-bottom: 10px;
            margin-top: 14px;
        }

        .nav-section-title:first-child {
            margin-top: 4px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            height: 44px;
            padding: 0 16px;
            border-radius: 8px;
            color: #C0D0F0;
            text-decoration: none;
            font-size: 14.5px;
            font-weight: 400;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            margin-bottom: 2px;
            position: relative;
            overflow: hidden;
        }

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

        .nav-item i {
            width: 20px;
            text-align: center;
            font-size: 15px;
        }

        .nav-item:hover {
            background: rgba(255,255,255,0.08);
            color: #ffffff;
        }

        .nav-item.active {
            background: #254B99;
            color: #ffffff;
            font-weight: 600;
        }

        .nav-item.active::before {
            transform: scaleY(1);
        }

        .nav-item i {
            width: 20px;
            text-align: center;
            font-size: 15px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .nav-item:hover i {
            transform: scale(1.1);
        }

        .nav-item .nav-badge {
            margin-left: auto;
            background: #007AFF;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 10px;
            min-width: 24px;
            text-align: center;
            letter-spacing: 0.5px;
        }

        .sidebar-footer {
            padding: 16px 24px 20px;
            border-top: 1px solid #E5E5EA;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .sidebar-footer-info {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #86868B;
            font-size: 11px;
            letter-spacing: 0.3px;
        }

        .sidebar-footer-info i {
            font-size: 13px;
        }

        /* TOPBAR（20260831 视觉改版：浅灰背景、白色选择器、蓝色账号标识） */
        .topbar {
            grid-area: topbar;
            background: rgba(245,245,247,0.92);
            backdrop-filter: blur(16px) saturate(1.2);
            -webkit-backdrop-filter: blur(16px) saturate(1.2);
            border-bottom: 1px solid #E5E5EA;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px;
            box-shadow: none;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .breadcrumb a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color var(--transition);
        }

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

        .breadcrumb-sep {
            color: var(--border);
            font-size: 10px;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .student-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            background: rgba(250,248,245,0.8);
            border: 1px solid rgba(216,232,232,0.7);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 13px;
            color: var(--text-primary);
            min-width: 160px;
            justify-content: space-between;
        }

        .student-selector:hover {
            border-color: var(--primary-light);
            box-shadow: 0 2px 12px rgba(37,99,235,0.1);
            background: rgba(255,255,255,0.95);
        }

        .student-selector i {
            color: var(--text-muted);
            font-size: 12px;
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px 6px 6px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .user-menu:hover {
            background: rgba(250,248,245,0.8);
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            background: #007AFF;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: 600;
            box-shadow: none;
            position: relative;
        }

        .user-avatar::before {
            content: none;
        }

        .user-info {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-size: 13px;
            font-weight: 600;
            color: #007AFF;
        }

        .user-role {
            font-size: 11px;
            color: var(--text-muted);
        }

        .logout-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: transparent;
            border: 1px solid rgba(216,232,232,0.7);
            border-radius: 10px;
            color: var(--text-secondary);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .logout-btn:hover {
            background: rgba(254,242,242,0.8);
            border-color: rgba(254,202,202,0.8);
            color: #dc2626;
            box-shadow: 0 2px 8px rgba(220,38,38,0.08);
        }

        /* CONTENT AREA */
        .content-area {
            grid-area: content;
            padding: 28px;
            overflow-y: auto;
            background: var(--bg-warm);
        }

        .page-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 16px;
        }

        .page-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .page-content {
            animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes pageEnter {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            60% {
                opacity: 1;
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dashboard-grid .stat-card {
            animation: cardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        .dashboard-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
        .dashboard-grid .stat-card:nth-child(2) { animation-delay: 0.1s; }
        .dashboard-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
        .dashboard-grid .stat-card:nth-child(4) { animation-delay: 0.2s; }

        @keyframes cardSlideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dashboard-charts .chart-card {
            animation: cardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
        }

        .quick-actions .quick-action-card {
            animation: cardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        .quick-actions .quick-action-card:nth-child(1) { animation-delay: 0.3s; }
        .quick-actions .quick-action-card:nth-child(2) { animation-delay: 0.35s; }
        .quick-actions .quick-action-card:nth-child(3) { animation-delay: 0.4s; }
        .quick-actions .quick-action-card:nth-child(4) { animation-delay: 0.45s; }

        .welcome-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--accent) 100%);
            border-radius: var(--radius-lg);
            padding: 32px 36px;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
            animation: welcomeSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .welcome-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .welcome-banner::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: 20%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        @keyframes welcomeSlideIn {
            from {
                opacity: 0;
                transform: translateY(-12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .welcome-text {
            position: relative;
            z-index: 1;
        }

        .welcome-greeting {
            font-size: 24px;
            font-weight: 800;
            color: white;
            margin-bottom: 6px;
            letter-spacing: 0.5px;
        }

        .welcome-subtitle {
            font-size: 14px;
            color: rgba(255,255,255,0.8);
            font-weight: 400;
        }

        .welcome-decoration {
            position: relative;
            z-index: 1;
            width: 64px;
            height: 64px;
            background: rgba(255,255,255,0.15);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            backdrop-filter: blur(4px);
        }

        .welcome-decoration i {
            font-size: 28px;
            color: white;
        }

        /* DASHBOARD PAGE */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 22px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(37, 99, 235, 0.06);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }

        .stat-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 4px;
            border-radius: var(--radius-md) 0 0 var(--radius-md);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .stat-card:nth-child(1)::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .stat-card:nth-child(2)::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
        .stat-card:nth-child(3)::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
        .stat-card:nth-child(4)::before { background: linear-gradient(90deg, #10b981, #34d399); }

        .stat-card:nth-child(1)::after { background: linear-gradient(180deg, #2563eb, #3b82f6); }
        .stat-card:nth-child(2)::after { background: linear-gradient(180deg, #7c3aed, #8b5cf6); }
        .stat-card:nth-child(3)::after { background: linear-gradient(180deg, #3b82f6, #60a5fa); }
        .stat-card:nth-child(4)::after { background: linear-gradient(180deg, #10b981, #34d399); }

        .stat-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(37, 99, 235, 0.15);
        }

        .stat-card:hover::after {
            opacity: 1;
        }

        .stat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .stat-label {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .stat-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .stat-card:hover .stat-icon {
            transform: scale(1.1);
        }

        .stat-card:nth-child(1) .stat-icon { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.08)); color: var(--primary); }
        .stat-card:nth-child(2) .stat-icon { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(139,92,246,0.08)); color: var(--accent); }
        .stat-card:nth-child(3) .stat-icon { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.08)); color: #3b82f6; }
        .stat-card:nth-child(4) .stat-icon { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.08)); color: #10b981; }

        .stat-value {
            font-size: 34px;
            font-weight: 900;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }

        .stat-trend {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            font-weight: 500;
            padding: 3px 10px;
            border-radius: 20px;
        }

        .stat-trend.up { color: #059669; background: rgba(16,185,129,0.1); }
        .stat-trend.down { color: #dc2626; background: rgba(239,68,68,0.1); }

        .dashboard-charts {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 22px;
            margin-bottom: 32px;
        }

        .chart-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37, 99, 235, 0.06);
            transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .chart-card:hover {
            box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
        }

        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .chart-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 14px;
        }

        .chart-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .chart-subtitle {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .chart-actions {
            display: flex;
            gap: 6px;
        }

        .chart-action-btn {
            padding: 5px 14px;
            border: 1px solid var(--border);
            background: transparent;
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: inherit;
        }

        .chart-action-btn:hover,
        .chart-action-btn.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
        }

        .chart-container {
            width: 100%;
            height: 320px;
        }

        /* PLACEHOLDER PAGES */
        .placeholder-page {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 60vh;
            text-align: center;
        }

        .placeholder-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(59,130,246,0.04) 100%);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
        }

        .placeholder-icon i {
            font-size: 42px;
            color: var(--primary);
        }

        .placeholder-page h2 {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .placeholder-page p {
            font-size: 15px;
            color: var(--text-muted);
            max-width: 400px;
            line-height: 1.7;
        }

        /* QUICK ACTIONS */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .quick-action-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 28px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-sm);
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .quick-action-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .quick-action-card:nth-child(1)::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .quick-action-card:nth-child(2)::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
        .quick-action-card:nth-child(3)::before { background: linear-gradient(90deg, #a855f7, #c084fc); }
        .quick-action-card:nth-child(4)::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }

        .quick-action-card:hover {
            border-color: rgba(37, 99, 235, 0.15);
            transform: translateY(-5px);
            box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12);
        }

        .quick-action-card:hover::before {
            opacity: 1;
        }

        .quick-action-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 18px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .quick-action-card:hover .quick-action-icon {
            transform: scale(1.08) translateY(-2px);
        }

        .quick-action-card:nth-child(1) .quick-action-icon { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.08)); color: var(--primary); }
        .quick-action-card:nth-child(2) .quick-action-icon { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.08)); color: #3b82f6; }
        .quick-action-card:nth-child(3) .quick-action-icon { background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(192,132,252,0.08)); color: #a855f7; }
        .quick-action-card:nth-child(4) .quick-action-icon { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(139,92,246,0.08)); color: var(--accent); }

        .quick-action-card h3 {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .quick-action-card:hover h3 {
            color: var(--primary);
        }

        .quick-action-card p {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .dashboard-charts {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            :root {
                --sidebar-width: 240px;
            }

            /* 单列布局: 侧边栏变为抽屉式 */
            .app-wrapper.active {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "topbar"
                    "content";
                /* 关键修复: animation会创建层叠上下文,导致sidebar的z-index被困在app-wrapper内,
                   遮罩层(z-index:998,挂在body下)反而盖住sidebar(z-index:999)造成导航不可点击。
                   移动端禁用淡入动画,让sidebar的z-index参与全局层叠比较 */
                animation: none;
            }

            .sidebar {
                position: fixed !important;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 999;
                width: var(--sidebar-width);
                transform: translateX(-100%);
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: none;
            }

            .sidebar.mobile-open {
                transform: translateX(0);
                box-shadow: 8px 0 32px rgba(0,0,0,0.2);
            }

            .content-area {
                padding: 14px;
            }

            .topbar {
                padding: 0 12px;
            }

            .breadcrumb {
                display: none;
            }

            .student-selector {
                display: none;
            }

            .user-info {
                display: none;
            }

            .dashboard-grid {
                grid-template-columns: 1fr 1fr;
            }

            .welcome-banner {
                padding: 24px;
                flex-direction: column;
                text-align: center;
                gap: 16px;
            }

            .welcome-greeting {
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .login-card { padding: 32px 24px 28px; }

            .dashboard-grid { grid-template-columns: 1fr; }
        }

        /* SCROLLBAR */
        ::-webkit-scrollbar {
            width: 6px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        /* LOADING SPINNER */
        .loading-spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* ========== STUDENT MANAGEMENT ========== */
        .student-management-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .student-management-header h2 {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 16px;
        }

        .student-management-header h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 22px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
        }

        .btn-primary:hover::after {
            opacity: 1;
        }

        .btn-primary span,
        .btn-primary i {
            position: relative;
            z-index: 1;
        }

        .students-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
        }

        .student-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(37, 99, 235, 0.06);
            position: relative;
        }

        .student-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
        }

        .student-card.active {
            border-color: var(--primary);
            background: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(59,130,246,0.02) 100%);
            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
        }

        .student-card.active::after {
            content: '当前选中';
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--primary);
            color: white;
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 10px;
            font-weight: 500;
        }

        .student-card-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px;
        }

        .student-avatar-lg {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        .student-avatar-lg.male { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .student-avatar-lg.female { background: linear-gradient(135deg, #ec4899, #f472b6); }
        .student-avatar-lg.unknown { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

        .student-info h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .student-info p {
            font-size: 12px;
            color: var(--text-muted);
        }

        .student-meta {
            display: flex;
            gap: 12px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .student-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: var(--bg-warm);
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .student-note {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
            margin-bottom: 14px;
            min-height: 20px;
        }

        .student-actions {
            display: flex;
            gap: 8px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }

        .btn-sm {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border);
            background: transparent;
            border-radius: 6px;
            font-size: 12px;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .btn-sm:hover {
            background: var(--bg-warm);
            color: var(--text-primary);
        }

        .btn-sm.btn-danger:hover {
            background: #fef2f2;
            border-color: #fecaca;
            color: #dc2626;
        }

        .btn-sm.btn-success:hover {
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: #16a34a;
        }

        /* STUDENT DROPDOWN */
        .student-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 240px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: all 0.25s ease;
        }

        .student-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .student-dropdown-header {
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .student-dropdown-header span {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .student-dropdown-header button {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 12px;
            font-family: inherit;
            cursor: pointer;
            font-weight: 500;
        }

        .student-dropdown-list {
            max-height: 280px;
            overflow-y: auto;
            padding: 8px;
        }

        .student-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .student-dropdown-item:hover {
            background: var(--bg-warm);
        }

        .student-dropdown-item.active {
            background: rgba(37,99,235,0.08);
        }

        .student-dropdown-item .avatar-sm {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: white;
            flex-shrink: 0;
        }

        .student-dropdown-item .avatar-sm.male { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .student-dropdown-item .avatar-sm.female { background: linear-gradient(135deg, #ec4899, #f472b6); }
        .student-dropdown-item .avatar-sm.unknown { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

        .student-dropdown-item .name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .student-dropdown-item .grade {
            font-size: 11px;
            color: var(--text-muted);
        }

        .student-dropdown-empty {
            padding: 24px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* MODAL */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            width: 480px;
            max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-lg);
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .modal-overlay.show .modal {
            transform: scale(1) translateY(0);
        }

        /* .modal-content: 用于带内联样式的弹窗(与.modal等效,确保有背景色) */
        .modal-content {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            width: 480px;
            max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-lg);
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .modal-overlay.show .modal-content {
            transform: scale(1) translateY(0);
        }

        .modal-header {
            padding: 24px 28px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-header h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--bg-warm);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .modal-close:hover {
            background: #fef2f2;
            color: #dc2626;
        }

        .modal-body {
            padding: 24px 28px;
        }

        .modal-footer {
            padding: 0 28px 24px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .btn-secondary {
            padding: 10px 22px;
            border: 1px solid var(--border);
            background: transparent;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-secondary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(59,130,246,0.03));
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-secondary:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
        }

        .btn-secondary:hover::before {
            opacity: 1;
        }

        /* CONFIRM DIALOG */
        .confirm-dialog-text {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.7;
            text-align: center;
            padding: 8px 0;
        }

        .confirm-dialog-student {
            font-weight: 600;
            color: var(--primary);
        }

        /* ========== EXAM ANALYSIS PAGE ========== */
        .exam-analysis-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .analysis-student-selector {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding: 18px 24px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
            transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .analysis-student-selector:hover {
            box-shadow: var(--shadow-md);
        }

        .analysis-student-selector label {
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            position: relative;
            padding-left: 14px;
        }

        .analysis-student-selector label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .analysis-student-selector select {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            color: var(--text-primary);
            background: var(--bg-warm);
            cursor: pointer;
            outline: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .analysis-student-selector select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
        }

        .analysis-student-selector .add-student-btn {
            padding: 10px 20px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .analysis-student-selector .add-student-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .analysis-student-selector .add-student-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37,99,235,0.3);
        }

        .analysis-student-selector .add-student-btn:hover::after {
            opacity: 1;
        }

        .analysis-student-selector .add-student-btn span,
        .analysis-student-selector .add-student-btn i {
            position: relative;
            z-index: 1;
        }

        .analysis-step {
            display: none;
        }

        .analysis-step.active {
            display: block;
            animation: pageEnter 0.4s ease forwards;
        }

        /* UPLOAD AREA */
        .upload-area {
            border: 2px dashed var(--border);
            border-radius: var(--radius-lg);
            padding: 60px 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-card);
            position: relative;
            overflow: hidden;
            background-image: linear-gradient(var(--bg-card), var(--bg-card)),
                              linear-gradient(135deg, var(--primary-light), var(--accent));
            background-origin: border-box;
            background-clip: padding-box, border-box;
        }

        .upload-area::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(124,58,237,0.02) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .upload-area:hover,
        .upload-area.dragover {
            background-image: linear-gradient(rgba(37,99,235,0.04), rgba(124,58,237,0.02)),
                              linear-gradient(135deg, var(--primary), var(--accent));
            background-origin: border-box;
            background-clip: padding-box, border-box;
        }

        .upload-area:hover::before,
        .upload-area.dragover::before {
            opacity: 1;
        }

        .upload-area.dragover {
            transform: scale(1.01);
            box-shadow: 0 8px 32px rgba(37,99,235,0.15);
        }

        .upload-icon-wrapper {
            width: 96px;
            height: 96px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(124,58,237,0.06) 100%);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            animation: uploadFloat 3s ease-in-out infinite;
        }

        @keyframes uploadFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        .upload-icon-wrapper i {
            font-size: 40px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .upload-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .upload-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }

        .upload-formats {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(124,58,237,0.04));
            border-radius: 10px;
            font-size: 12px;
            color: var(--text-secondary);
            position: relative;
            z-index: 1;
            border: 1px solid rgba(37,99,235,0.08);
        }

        .upload-formats i {
            color: var(--primary);
        }

        #fileInput {
            display: none;
        }

        /* IMAGE PREVIEW */
        .preview-container {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }

        .preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .preview-header h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            position: relative;
            padding-left: 14px;
        }

        .preview-header h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .preview-image-wrapper {
            border-radius: var(--radius-md);
            overflow: hidden;
            background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: 500px;
            margin-bottom: 20px;
            border: 1px solid var(--border);
        }

        .preview-image-wrapper img {
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
        }

        .preview-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .btn-analyze {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 40px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }

        .btn-analyze::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-analyze:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(37,99,235,0.35);
        }

        .btn-analyze:hover:not(:disabled)::after {
            opacity: 1;
        }

        .btn-analyze:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .btn-analyze span,
        .btn-analyze i {
            position: relative;
            z-index: 1;
        }

        .btn-reupload {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: 14px;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-reupload::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(59,130,246,0.03));
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-reupload:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37,99,235,0.1);
        }

        .btn-reupload:hover::before {
            opacity: 1;
        }

        /* PROGRESS INDICATOR */
        .analysis-progress {
            text-align: center;
            padding: 60px 40px;
        }

        .progress-icon-wrapper {
            width: 100px;
            height: 100px;
            margin: 0 auto 28px;
            background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(124,58,237,0.06) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .progress-icon-wrapper i {
            font-size: 42px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        .progress-spinner-ring {
            position: absolute;
            inset: -4px;
            border: 3px solid transparent;
            border-top-color: var(--primary);
            border-right-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .progress-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .progress-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        .progress-bar-wrapper {
            max-width: 360px;
            margin: 0 auto;
            height: 10px;
            background: var(--bg-warm);
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
            background-size: 200% 100%;
            border-radius: 5px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: progressShimmer 2s ease-in-out infinite;
        }

        @keyframes progressShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .progress-steps {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-top: 32px;
            position: relative;
        }

        .progress-step {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-muted);
            padding: 10px 20px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .progress-step:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -8px;
            top: 50%;
            width: 16px;
            height: 2px;
            background: var(--border);
            transform: translateY(-50%);
        }

        .progress-step.done:not(:last-child)::after {
            background: linear-gradient(90deg, #10b981, var(--primary-light));
        }

        .progress-step.active {
            color: var(--primary);
            font-weight: 600;
        }

        .progress-step.done {
            color: #10b981;
        }

        .progress-step i {
            font-size: 16px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--bg-warm);
            border: 2px solid var(--border);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .progress-step.active i {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-color: transparent;
            color: white;
            box-shadow: 0 4px 12px rgba(37,99,235,0.25);
        }

        .progress-step.done i {
            background: linear-gradient(135deg, #10b981, #34d399);
            border-color: transparent;
            color: white;
            box-shadow: 0 4px 12px rgba(16,185,129,0.25);
        }

        /* RESULT EDITOR */
        .result-editor {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .result-editor-header {
            padding: 24px 28px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            background: linear-gradient(135deg, rgba(37,99,235,0.02) 0%, rgba(124,58,237,0.01) 100%);
        }

        .result-summary {
            display: flex;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
        }

        .summary-item {
            text-align: center;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            background: var(--bg-card);
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .summary-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .summary-label {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .summary-value {
            font-size: 22px;
            font-weight: 800;
            color: var(--primary);
        }

        .summary-value.score { color: var(--accent); }
        .summary-value.total { color: var(--text-primary); }

        .result-editor-body {
            padding: 24px 28px;
        }

        .subject-display {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(124,58,237,0.04) 100%);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 20px;
            border: 1px solid rgba(37,99,235,0.1);
        }

        .knowledge-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 24px;
        }

        .knowledge-tag {
            padding: 5px 14px;
            background: rgba(168,85,247,0.08);
            border: 1px solid rgba(168,85,247,0.15);
            border-radius: 8px;
            font-size: 12px;
            color: #a855f7;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .knowledge-tag:hover {
            background: rgba(168,85,247,0.14);
            transform: translateY(-1px);
        }

        .questions-table-wrapper {
            overflow-x: auto;
            border: 1px solid rgba(37,99,235,0.08);
            border-radius: var(--radius-md);
        }

        .questions-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .questions-table th {
            background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(59,130,246,0.03));
            padding: 14px 16px;
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            border-bottom: 2px solid rgba(37,99,235,0.08);
        }

        .questions-table td {
            padding: 13px 16px;
            border-top: 1px solid rgba(37,99,235,0.04);
            vertical-align: middle;
        }

        .questions-table tr:nth-child(even) td {
            background: rgba(37,99,235,0.015);
        }

        .questions-table tr:hover td {
            background: rgba(37,99,235,0.04);
        }

        .questions-table tr {
            transition: all 0.2s ease;
        }

        .upload-tips-panel {
            background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(59,130,246,0.02));
            border: 1px solid rgba(37,99,235,0.1);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            margin-top: 16px;
        }

        .upload-tips-panel .tips-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .upload-tips-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .upload-tips-list li {
            font-size: 12px;
            color: var(--text-secondary);
            padding: 4px 0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5;
        }

        .upload-tips-list li i {
            color: var(--primary);
            font-size: 11px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .batch-task-panel {
            background: #fff;
            border: 1px solid rgba(37,99,235,0.12);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            margin-top: 16px;
        }

        .batch-task-header {
            font-size: 14px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .batch-progress-hint {
            background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.04));
            border: 1px solid rgba(59,130,246,0.15);
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            font-size: 13px;
            color: #3b82f6;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .batch-task-stats {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .batch-stat {
            font-size: 12px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .batch-stat.done { color: #10b981; }
        .batch-stat.pending { color: #9ca3af; }
        .batch-stat.error { color: #ef4444; }

        .batch-task-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .batch-task-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            background: rgba(37,99,235,0.02);
            border-radius: 6px;
            font-size: 12px;
        }

        .batch-task-item span:first-of-type {
            flex: 1;
            color: var(--text-primary);
        }

        .batch-task-status {
            font-weight: 600;
        }

        .question-number {
            font-weight: 600;
            color: var(--primary);
            width: 60px;
        }

        .question-content {
            min-width: 200px;
            color: var(--text-primary);
        }

        .unified-report-table-wrapper {
            overflow-x: auto;
            border: 1px solid rgba(37,99,235,0.1);
            border-radius: var(--radius-md);
            margin-bottom: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .unified-report-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            min-width: 1000px;
        }

        .unified-report-table th {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            padding: 14px 12px;
            text-align: center;
            font-weight: 600;
            color: #fff;
            font-size: 12px;
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .unified-report-table th:first-child {
            border-radius: var(--radius-md) 0 0 0;
        }

        .unified-report-table th:last-child {
            border-radius: 0 var(--radius-md) 0 0;
        }

        .unified-report-table td {
            padding: 12px;
            border-bottom: 1px solid rgba(37,99,235,0.05);
            vertical-align: middle;
            text-align: center;
        }

        .unified-report-table td.urt-content,
        .unified-report-table td.urt-analysis {
            text-align: left;
            min-width: 140px;
            max-width: 240px;
            font-size: 13px;
            line-height: 1.5;
        }

        .unified-report-table tr.wrong-row {
            background: rgba(239,68,68,0.03);
        }

        .unified-report-table tr.wrong-row:hover {
            background: rgba(239,68,68,0.07);
        }

        .unified-report-table tr:hover td {
            background: rgba(37,99,235,0.03);
        }

        .unified-report-table tr.wrong-row:hover td {
            background: rgba(239,68,68,0.06);
        }

        .urt-number {
            font-weight: 700;
            color: var(--primary);
            font-size: 14px;
            width: 50px;
        }

        .urt-status {
            font-size: 20px;
        }

        .urt-score {
            font-weight: 700;
            color: var(--text-primary);
        }

        .urt-maxscore {
            color: var(--text-muted);
            font-size: 12px;
        }

        .urt-answer-student {
            color: var(--text-primary);
            font-size: 12px;
            max-width: 150px;
            word-break: break-word;
        }

        .urt-answer-correct {
            color: #10b981;
            font-weight: 600;
            font-size: 12px;
            max-width: 150px;
            word-break: break-word;
        }

        .urt-answer-wrong {
            color: #ef4444;
            text-decoration: line-through;
            font-size: 12px;
            max-width: 150px;
            word-break: break-word;
            display: block;
        }

        .urt-kp {
            display: inline-block;
            background: rgba(59,130,246,0.08);
            color: #3b82f6;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
        }

        .urt-error-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 500;
        }

        .urt-error-type.concept { background: rgba(239,68,68,0.1); color: #ef4444; }
        .urt-error-type.calc { background: rgba(245,158,11,0.1); color: #f59e0b; }
        .urt-error-type.examine { background: rgba(168,85,247,0.1); color: #a855f7; }
        .urt-error-type.method { background: rgba(59,130,246,0.1); color: #3b82f6; }
        .urt-error-type.careless { background: rgba(236,72,153,0.1); color: #ec4899; }

        .urt-analysis-text {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.5;
            max-width: 200px;
        }

        .sp-question-type-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }

        .sp-qt-card {
            background: #fff;
            border: 1px solid rgba(37,99,235,0.08);
            border-radius: var(--radius-md);
            padding: 14px;
            transition: all 0.2s;
        }

        .sp-qt-card:hover {
            box-shadow: 0 2px 8px rgba(37,99,235,0.1);
            transform: translateY(-1px);
        }

        .sp-qt-type {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .sp-qt-rate {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .sp-qt-bar {
            height: 4px;
            background: rgba(37,99,235,0.08);
            border-radius: 2px;
            margin-bottom: 6px;
            overflow: hidden;
        }

        .sp-qt-bar-fill {
            height: 100%;
            border-radius: 2px;
            transition: width 0.5s ease;
        }

        .sp-qt-detail {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .sp-qt-weak {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .sp-qt-weak-tag {
            display: inline-block;
            background: rgba(239,68,68,0.06);
            color: #ef4444;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 10px;
        }

        .sp-attribution-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(37,99,235,0.05);
        }

        .sp-attribution-item:last-child {
            border-bottom: none;
        }

        .sp-attribution-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .sp-attribution-info {
            flex: 1;
        }

        .sp-attribution-dim {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .sp-attribution-examples {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .sp-timeline {
            position: relative;
            padding-left: 40px;
        }

        .sp-timeline::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #ef4444, #f59e0b, #10b981);
        }

        .sp-timeline-item {
            position: relative;
            margin-bottom: 24px;
        }

        .sp-timeline-item:last-child {
            margin-bottom: 0;
        }

        .sp-timeline-marker {
            position: absolute;
            left: -33px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }

        .sp-timeline-content {
            background: #fff;
            border: 1px solid rgba(37,99,235,0.08);
            border-radius: var(--radius-md);
            padding: 16px;
        }

        .sp-timeline-phase {
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .sp-timeline-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .sp-timeline-action {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            padding: 4px 0;
            line-height: 1.5;
        }

        .ss-page { max-width: 900px; margin: 0 auto; padding: 20px; }
        .ss-header { text-align: center; margin-bottom: 32px; }
        .ss-header-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), #0ea5e9); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; color: #fff; }
        .ss-header-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .ss-header-subtitle { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
        .ss-dimension-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
        .ss-dim-card { background: #fff; border: 1px solid rgba(37,99,235,0.08); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: all 0.2s; }
        .ss-dim-card:hover { box-shadow: 0 2px 8px rgba(37,99,235,0.1); transform: translateY(-1px); }
        .ss-dim-card.active { border-color: var(--primary); background: rgba(37,99,235,0.02); }
        .ss-dim-card.completed { border-color: #10b981; }
        .ss-dim-card-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 8px; }
        .ss-dim-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .ss-dim-card-count { font-size: 11px; color: var(--text-muted); }
        .ss-dim-card-progress { height: 3px; background: rgba(37,99,235,0.08); border-radius: 2px; margin-top: 8px; overflow: hidden; }
        .ss-dim-card-progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.3s; }
        .ss-question-area { background: #fff; border: 1px solid rgba(37,99,235,0.08); border-radius: var(--radius-md); padding: 24px; margin-bottom: 16px; }
        .ss-question-dim-label { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
        .ss-question-number { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
        .ss-question-text { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 20px; line-height: 1.6; }
        .ss-options { display: flex; flex-direction: column; gap: 8px; }
        .ss-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(37,99,235,0.08); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
        .ss-option:hover { background: rgba(37,99,235,0.03); border-color: rgba(37,99,235,0.15); }
        .ss-option.selected { background: rgba(37,99,235,0.06); border-color: var(--primary); }
        .ss-option-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(37,99,235,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
        .ss-option.selected .ss-option-dot { border-color: var(--primary); background: var(--primary); }
        .ss-option.selected .ss-option-dot::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
        .ss-option-text { font-size: 14px; color: var(--text-primary); }
        .ss-nav-buttons { display: flex; justify-content: space-between; margin-top: 16px; }
        .ss-btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
        .ss-btn-prev { background: rgba(37,99,235,0.06); color: var(--primary); }
        .ss-btn-next { background: var(--primary); color: #fff; }
        .ss-btn-next:hover { background: #1e40af; }
        .ss-btn-skip { background: rgba(245,158,11,0.1); color: #d97706; border: 1px solid rgba(245,158,11,0.3); }
        .ss-btn-skip:hover { background: rgba(245,158,11,0.2); }
        .ss-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .ss-progress-bar { height: 6px; background: rgba(37,99,235,0.08); border-radius: 3px; margin-bottom: 20px; overflow: hidden; }
        .ss-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #0ea5e9); border-radius: 3px; transition: width 0.3s; }
        .ss-progress-text { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 16px; }
        .ss-result-page { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .ss-result-header { text-align: center; margin-bottom: 32px; padding: 24px; background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(14,165,233,0.04)); border-radius: var(--radius-md); }
        .ss-result-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .ss-result-subtitle { font-size: 13px; color: var(--text-muted); }
        .ss-combo-cards { display: flex; flex-direction: column; gap: 20px; margin: 20px 0; }
        .ss-combo-card { background: #fff; border: 1px solid rgba(37,99,235,0.08); border-radius: var(--radius-md); padding: 24px; transition: all 0.2s; display: flex; gap: 24px; cursor: pointer; }
        .ss-combo-card:hover { border-color: rgba(37,99,235,0.25); box-shadow: 0 6px 20px rgba(37,99,235,0.12); transform: translateY(-2px); }
        .ss-combo-card.top { border-color: var(--primary); box-shadow: 0 2px 12px rgba(37,99,235,0.1); }
        .ss-combo-card.top:hover { box-shadow: 0 8px 24px rgba(37,99,235,0.18); }
        .ss-combo-card-left { flex: 0 0 320px; min-width: 280px; }
        .ss-combo-card-right { flex: 1; border-left: 2px solid rgba(37,99,235,0.1); padding-left: 20px; }
        .ss-combo-rank { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
        .ss-combo-rank.rank1 { background: rgba(37,99,235,0.1); color: var(--primary); }
        .ss-combo-rank.rank2 { background: rgba(59,130,246,0.1); color: #3b82f6; }
        .ss-combo-rank.rank3 { background: rgba(245,158,11,0.1); color: #f59e0b; }
        .ss-combo-name { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .ss-combo-rate { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
        .ss-combo-rate-label { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
        .ss-combo-careers { display: flex; flex-wrap: wrap; gap: 4px; }
        .ss-career-tag { padding: 2px 8px; border-radius: 8px; font-size: 11px; background: rgba(37,99,235,0.04); color: var(--text-secondary); }
        .ss-subject-bar-chart { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
        .ss-subject-bar-row { display: flex; align-items: center; gap: 10px; }
        .ss-subject-bar-label { width: 50px; font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: right; }
        .ss-subject-bar-track { flex: 1; height: 24px; background: rgba(37,99,235,0.06); border-radius: 12px; overflow: hidden; position: relative; }
        .ss-subject-bar-fill { height: 100%; border-radius: 12px; transition: width 0.5s ease; display: flex; align-items: center; padding-left: 8px; }
        .ss-subject-bar-value { font-size: 11px; font-weight: 700; color: #fff; }
        .ss-section { background: #fff; border: 1px solid rgba(37,99,235,0.08); border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; }
        .ss-section-title { font-size: 16px; font-weight: 600; color: var(--primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
        .ss-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
        .ss-type-card { padding: 12px; border-radius: 8px; border: 1px solid rgba(37,99,235,0.06); }
        .ss-type-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .ss-type-score { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
        .ss-type-desc { font-size: 11px; color: var(--text-muted); }
        .ss-theory-badge { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 10px; background: rgba(37,99,235,0.04); color: var(--text-muted); margin-bottom: 12px; }
        .ss-type-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 6px; }
        .ss-type-card-head .ss-type-name { margin-bottom: 0; flex: 1; min-width: 0; }
        .ss-type-progress { height: 6px; background: rgba(37,99,235,0.06); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
        .ss-type-progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
        .ss-dim-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; }
        .ss-dim-summary-card { background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(124,58,237,0.03)); border: 1px solid rgba(37,99,235,0.08); border-radius: 12px; padding: 14px 16px; }
        .ss-dim-summary-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
        .ss-dim-summary-pct { font-size: 18px; font-weight: 700; color: var(--primary); }
        .ss-dim-summary-track { height: 8px; background: rgba(37,99,235,0.08); border-radius: 4px; overflow: hidden; }
        .ss-dim-summary-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.6s ease; }
        .ss-dim-summary-theory { font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
        .ss-chart-wrap { margin-top: 16px; border-top: 1px dashed rgba(37,99,235,0.1); padding-top: 14px; }
        .ss-chart-wrap-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

        /* 移动端响应式 - 选科测评报告 */
        @media (max-width: 768px) {
            .ss-result-page { padding: 12px; }
            .ss-result-header { padding: 16px; margin-bottom: 20px; }
            .ss-result-title { font-size: 18px; }
            .ss-result-subtitle { font-size: 12px; }
            .ss-section { padding: 14px; margin-bottom: 12px; }
            .ss-section-title { font-size: 14px; margin-bottom: 12px; }
            .ss-combo-card { flex-direction: column; gap: 14px; padding: 16px; }
            .ss-combo-card-left { flex: none; min-width: 0; width: 100%; }
            .ss-combo-card-right { border-left: none; border-top: 2px solid rgba(37,99,235,0.1); padding-left: 0; padding-top: 14px; width: 100%; }
            .ss-combo-name { font-size: 16px; }
            .ss-combo-rate { font-size: 24px; }
            .ss-type-grid { grid-template-columns: 1fr; }
            .ss-dim-summary { grid-template-columns: 1fr; }
            .ss-subject-bar-label { width: 40px; font-size: 12px; }
            .ss-subject-bar-track { height: 20px; }
            .ss-chart-wrap-title { font-size: 11px; }
            #ssSubjectRadar, #ssChart_holland, #ssChart_intelligence, #ssChart_subjectAbility, #ssChart_learningStyle { height: 300px !important; }
        }
        @media (max-width: 480px) {
            .ss-result-page { padding: 8px; }
            .ss-result-header { padding: 12px; margin-bottom: 14px; }
            .ss-result-title { font-size: 16px; }
            .ss-section { padding: 10px; margin-bottom: 10px; }
            .ss-section-title { font-size: 13px; }
            .ss-combo-card { padding: 12px; }
            .ss-combo-name { font-size: 15px; }
            .ss-combo-rate { font-size: 22px; }
            .ss-career-tag { font-size: 10px; padding: 2px 6px; }
            .ss-type-card { padding: 10px; }
            .ss-type-name { font-size: 12px; }
            .ss-type-score { font-size: 18px; }
            .ss-type-desc { font-size: 10px; }
            .ss-subject-bar-label { width: 36px; font-size: 11px; }
            .ss-subject-bar-track { height: 18px; }
            .ss-subject-bar-value { font-size: 10px; }
            #ssSubjectRadar, #ssChart_holland, #ssChart_intelligence, #ssChart_subjectAbility, #ssChart_learningStyle { height: 260px !important; }
        }

        .btn-correct-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.15s;
            white-space: nowrap;
        }

        .btn-toggle-right {
            background: rgba(16,185,129,0.1);
            color: #10b981;
            border: 1px solid rgba(16,185,129,0.2);
        }
        .btn-toggle-right:hover { background: rgba(16,185,129,0.2); }

        .btn-toggle-wrong {
            background: rgba(239,68,68,0.08);
            color: #ef4444;
            border: 1px solid rgba(239,68,68,0.15);
        }
        .btn-toggle-wrong:hover { background: rgba(239,68,68,0.15); }

        .error-type-picker-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .error-type-picker {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            min-width: 300px;
            max-width: 360px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        }

        .etp-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .etp-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .etp-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border: 1px solid rgba(37,99,235,0.1);
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-primary);
            transition: all 0.15s;
        }
        .etp-option:hover {
            background: rgba(37,99,235,0.05);
            border-color: var(--primary);
        }

        .etp-cancel {
            width: 100%;
            padding: 10px;
            border: none;
            background: rgba(37,99,235,0.06);
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .btn-report-download {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #fff;
        }

        .btn-report-download:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37,99,235,0.3);
        }

        .btn-report-print {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid var(--primary);
            background: transparent;
            color: var(--primary);
            transition: all 0.2s;
        }

        .btn-report-print:hover {
            background: rgba(37,99,235,0.05);
        }

        @media print {
            body * { visibility: hidden; }
            #contentArea::after {
                content: "双鱼/比尔教育 · AI知识掌握测评报告";
                display: block;
                text-align: center;
                font-size: 11px;
                color: #2563eb;
                padding-top: 20px;
                margin-top: 20px;
                border-top: 1px solid #e5e7eb;
            }
            #contentArea, #contentArea * { visibility: visible; }
            #contentArea { position: absolute; left: 0; top: 0; width: 100%; }
            .sidebar, .mobile-menu-toggle, .btn-report-download, .btn-report-print,
            .btn-nav, .cr-export-btn { display: none !important; }
            .unified-report-table th {
                background: #2563eb !important;
                color: #fff !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .unified-report-table tr.wrong-row {
                background: rgba(239,68,68,0.05) !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

        .question-answer {
            color: var(--accent);
            font-weight: 500;
        }

        .question-input {
            width: 70px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            color: var(--text-primary);
            text-align: center;
            outline: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .question-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
        }

        .question-max-score {
            color: var(--text-muted);
            font-size: 12px;
            text-align: center;
        }

        .result-editor-footer {
            padding: 20px 28px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            background: linear-gradient(135deg, rgba(37,99,235,0.01) 0%, rgba(124,58,237,0.005) 100%);
        }

        /* ========== KNOWLEDGE ANALYSIS MODULE ========== */
        .knowledge-analysis-container {
            max-width: 1280px;
            margin: 0 auto;
        }

        .ka-header {
            text-align: center;
            padding: 40px 20px 32px;
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
            position: relative;
            overflow: hidden;
        }

        .ka-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
        }

        .ka-header-icon {
            width: 76px;
            height: 76px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 28px rgba(37,99,235,0.25);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ka-header-icon:hover {
            transform: translateY(-4px) scale(1.05);
        }

        .ka-header-icon i {
            font-size: 34px;
            color: white;
        }

        .ka-header h2 {
            font-size: 26px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
            position: relative;
            display: inline-block;
            padding-left: 16px;
        }

        .ka-header h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .ka-header p {
            font-size: 14px;
            color: var(--text-muted);
        }

        .ka-subject-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .ka-subject-tag {
            padding: 8px 22px;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
            background: var(--bg-warm);
            color: var(--text-secondary);
        }

        .ka-subject-tag.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            box-shadow: 0 4px 16px rgba(37,99,235,0.3);
            transform: translateY(-2px);
        }

        .ka-subject-tag:hover:not(.active) {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
        }

        .ka-charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .ka-chart-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ka-chart-card:hover {
            box-shadow: var(--shadow-md);
        }

        .ka-chart-card.full-width {
            grid-column: 1 / -1;
        }

        .ka-chart-header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ka-chart-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            padding-left: 14px;
        }

        .ka-chart-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .ka-chart-title i {
            color: var(--primary);
            font-size: 15px;
        }

        .ka-chart-body {
            padding: 20px;
            position: relative;
        }

        .ka-chart-body .chart-dom {
            width: 100%;
            height: 360px;
        }

        .ka-cards-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .ka-points-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ka-points-card:hover {
            box-shadow: var(--shadow-md);
        }

        .ka-points-header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ka-points-header.weak {
            background: linear-gradient(135deg, rgba(239,68,68,0.04) 0%, rgba(239,68,68,0.01) 100%);
            border-left: 4px solid #ef4444;
        }

        .ka-points-header.strong {
            background: linear-gradient(135deg, rgba(16,185,129,0.04) 0%, rgba(16,185,129,0.01) 100%);
            border-left: 4px solid #10b981;
        }

        .ka-points-header i {
            font-size: 18px;
        }

        .ka-points-header.weak i { color: #ef4444; }
        .ka-points-header.strong i { color: #10b981; }

        .ka-points-header span {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .ka-points-list {
            padding: 16px 24px;
            max-height: 260px;
            overflow-y: auto;
        }

        .ka-point-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .ka-point-item:last-child { margin-bottom: 0; }

        .ka-point-item:hover {
            transform: translateX(4px);
        }

        .ka-point-item.weak-item {
            background: rgba(239,68,68,0.05);
            border: 1px solid rgba(239,68,68,0.12);
        }
        .ka-point-item.weak-item:hover { background: rgba(239,68,68,0.1); }

        .ka-point-item.strong-item {
            background: rgba(16,185,129,0.05);
            border: 1px solid rgba(16,185,129,0.12);
        }
        .ka-point-item.strong-item:hover { background: rgba(16,185,129,0.1); }

        .ka-point-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .ka-point-item.weak-item .ka-point-icon {
            background: rgba(239,68,68,0.1);
            color: #ef4444;
        }

        .ka-point-item.strong-item .ka-point-icon {
            background: rgba(16,185,129,0.1);
            color: #10b981;
        }

        .ka-point-info {
            flex: 1;
        }

        .ka-point-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .ka-point-desc {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .ka-point-score {
            font-size: 16px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .ka-point-item.weak-item .ka-point-score { color: #ef4444; }
        .ka-point-item.strong-item .ka-point-score { color: #10b981; }

        .ka-detail-section {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            overflow: hidden;
        }

        .ka-detail-header {
            padding: 18px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ka-detail-header h3 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ka-detail-header h3 i {
            color: var(--accent);
        }

        .ka-detail-table-wrapper {
            overflow-x: auto;
        }

        .ka-detail-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .ka-detail-table th {
            background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(59,130,246,0.03));
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            border-bottom: 2px solid rgba(37,99,235,0.08);
        }

        .ka-detail-table td {
            padding: 12px 16px;
            border-top: 1px solid rgba(37,99,235,0.04);
            vertical-align: middle;
            color: var(--text-secondary);
        }

        .ka-detail-table tr:nth-child(even) td {
            background: rgba(37,99,235,0.015);
        }

        .ka-detail-table tr:hover td {
            background: rgba(37,99,235,0.04);
        }

        .ka-detail-table tr {
            transition: all 0.2s ease;
        }

        .ka-mastery-bar-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 180px;
        }

        .ka-mastery-bar-track {
            flex: 1;
            height: 8px;
            background: var(--bg-warm);
            border-radius: 4px;
            overflow: hidden;
        }

        .ka-mastery-bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.6s ease;
        }

        .ka-mastery-bar-fill.excellent { background: linear-gradient(90deg, #10b981, #34d399); }
        .ka-mastery-bar-fill.good { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .ka-mastery-bar-fill.average { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .ka-mastery-bar-fill.weak { background: linear-gradient(90deg, #ef4444, #f87171); }

        .ka-mastery-value {
            font-size: 13px;
            font-weight: 700;
            min-width: 42px;
            text-align: right;
        }

        .ka-level-badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .ka-level-badge.excellent { background: rgba(16,185,129,0.1); color: #059669; }
        .ka-level-badge.good { background: rgba(37,99,235,0.1); color: #2563eb; }
        .ka-level-badge.average { background: rgba(245,158,11,0.1); color: #d97706; }
        .ka-level-badge.weak { background: rgba(239,68,68,0.1); color: #dc2626; }

        .ka-actions-bar {
            display: flex;
            justify-content: center;
            gap: 16px;
            padding: 24px 0 32px;
        }

        .ka-btn {
            padding: 12px 28px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            border: none;
        }

        .ka-btn.primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
        }

        .ka-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37,99,235,0.3);
        }

        .ka-btn.secondary {
            border: 2px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
        }

        .ka-btn.secondary:hover {
            border-color: var(--primary-light);
            color: var(--primary);
        }

        .ka-loading-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.92);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
            border-radius: var(--radius-md);
        }

        .ka-loading-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: kaSpin 0.8s linear infinite;
        }

        @keyframes kaSpin {
            to { transform: rotate(360deg); }
        }

        .ka-loading-text {
            margin-top: 16px;
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .ka-loading-text i {
            color: var(--primary);
            margin-right: 6px;
        }

        .ka-related-questions {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .ka-related-questions.show {
            opacity: 1;
            visibility: visible;
        }

        .ka-related-modal {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            width: 90%;
            max-width: 640px;
            max-height: 80vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: scale(0.9) translateY(20px);
            transition: transform 0.3s ease;
        }

        .ka-related-questions.show .ka-related-modal {
            transform: scale(1) translateY(0);
        }

        .ka-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .ka-modal-header h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ka-modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--bg-warm);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 14px;
            transition: all 0.2s;
        }

        .ka-modal-close:hover {
            background: rgba(239,68,68,0.1);
            color: #ef4444;
        }

        .ka-modal-body {
            padding: 20px 24px;
            overflow-y: auto;
            flex: 1;
        }

        .ka-question-row {
            padding: 14px 16px;
            border: 1px solid rgba(37,99,235,0.08);
            border-radius: var(--radius-sm);
            margin-bottom: 10px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ka-question-row:hover {
            border-color: var(--primary-light);
            background: rgba(37,99,235,0.03);
            transform: translateX(4px);
        }

        .ka-q-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--primary);
            color: white;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            margin-right: 12px;
        }

        .ka-q-content {
            font-size: 14px;
            color: var(--text-primary);
            line-height: 1.5;
        }

        .ka-q-meta {
            display: flex;
            gap: 16px;
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .ka-q-meta span { display: flex; align-items: center; gap: 4px; }
        .ka-q-meta .score-val { color: var(--primary); font-weight: 600; }
        .ka-q-meta .wrong-val { color: #ef4444; font-weight: 600; }

        @media (max-width: 900px) {
            .ka-charts-grid { grid-template-columns: 1fr; }
            .ka-cards-row { grid-template-columns: 1fr; }
            .ka-chart-card.full-width { grid-column: 1; }
        }

        /* ========== ATTENTION ASSESSMENT ========== */
        .attention-container {
            max-width: 860px;
            margin: 0 auto;
        }

        .assessment-intro {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 44px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
            position: relative;
            overflow: hidden;
        }

        .assessment-intro::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
        }

        .assessment-intro-icon {
            width: 92px;
            height: 92px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(124,58,237,0.06) 100%);
            border-radius: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .assessment-intro-icon:hover {
            transform: translateY(-4px) scale(1.05);
        }

        .assessment-intro-icon i {
            font-size: 42px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .assessment-intro h2 {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 12px;
            position: relative;
            display: inline-block;
            padding-left: 16px;
        }

        .assessment-intro h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .assessment-intro p {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
            max-width: 520px;
            margin: 0 auto 28px;
        }

        .dimension-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 32px;
        }

        .dimension-tag {
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            background: var(--bg-warm);
            color: var(--text-secondary);
            border: 1px solid rgba(37,99,235,0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dimension-tag:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
        }

        .start-assessment-btn {
            padding: 16px 60px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 17px;
            font-weight: 700;
            font-family: inherit;
            color: white;
            cursor: pointer;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 3px;
            position: relative;
            overflow: hidden;
        }

        .start-assessment-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .start-assessment-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 36px rgba(37,99,235,0.35);
        }

        .start-assessment-btn:hover::after {
            opacity: 1;
        }

        .start-assessment-btn span,
        .start-assessment-btn i {
            position: relative;
            z-index: 1;
        }

        .questionnaire-wrapper {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .questionnaire-header {
            padding: 24px 32px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, rgba(37,99,235,0.02) 0%, rgba(124,58,237,0.01) 100%);
        }

        .questionnaire-progress-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .questionnaire-progress-info span {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .questionnaire-progress-num {
            font-size: 13px;
            color: var(--text-muted);
        }

        .progress-bar-outer {
            width: 240px;
            height: 10px;
            background: var(--bg-warm);
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .progress-bar-inner {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
            background-size: 200% 100%;
            border-radius: 5px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: progressGlow 2s ease-in-out infinite;
        }

        @keyframes progressGlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .questionnaire-body {
            padding: 32px;
        }

        .dimension-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .dimension-label.stability { background: rgba(37,99,235,0.08); color: #2563eb; }
        .dimension-label.allocation { background: rgba(124,58,237,0.08); color: #7c3aed; }
        .dimension-label.resistance { background: rgba(59,130,246,0.08); color: #3b82f6; }
        .dimension-label.duration { background: rgba(168,85,247,0.08); color: #a855f7; }
        .dimension-label.transfer { background: rgba(16,185,129,0.08); color: #10b981; }

        .question-item {
            margin-bottom: 36px;
            animation: questionIn 0.35s ease forwards;
            padding: 24px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(37,99,235,0.06);
            background: linear-gradient(135deg, rgba(37,99,235,0.01) 0%, rgba(124,58,237,0.005) 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .question-item:hover {
            border-color: rgba(37,99,235,0.12);
            box-shadow: var(--shadow-sm);
        }

        @keyframes questionIn {
            from { opacity: 0; transform: translateX(16px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .question-number {
            font-size: 13px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .question-text {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.6;
            margin-bottom: 18px;
        }

        .likert-options {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .likert-option {
            flex: 1;
            min-width: 90px;
            position: relative;
        }

        .likert-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .likert-option label {
            display: block;
            padding: 12px 8px;
            text-align: center;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-warm);
        }

        .likert-option input[type="radio"]:checked + label {
            border-color: var(--primary);
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(59,130,246,0.04) 100%);
            color: var(--primary);
            font-weight: 600;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
            transform: scale(1.03);
        }

        .likert-option input[type="radio"]:focus + label {
            outline: none;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
        }

        .likert-option label:hover {
            border-color: var(--primary-light);
            background: rgba(37,99,235,0.04);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .likert-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            padding: 0 4px;
        }

        .likert-labels span {
            font-size: 11px;
            color: var(--text-muted);
        }

        .questionnaire-footer {
            padding: 20px 32px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn-nav-question {
            padding: 11px 28px;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-nav-question:hover:not(:disabled) {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37,99,235,0.1);
        }

        .btn-nav-question:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .btn-submit-assessment {
            padding: 12px 36px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            color: white;
            cursor: pointer;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .btn-submit-assessment::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-submit-assessment:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37,99,235,0.3);
        }

        .btn-submit-assessment:hover::after {
            opacity: 1;
        }

        .btn-submit-assessment span,
        .btn-submit-assessment i {
            position: relative;
            z-index: 1;
        }

        .btn-submit-assessment:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* RESULT PAGE */
        .result-loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(250,248,245,0.92);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .loading-animation {
            width: 64px;
            height: 64px;
            position: relative;
            margin-bottom: 24px;
        }

        .loading-brain {
            width: 64px;
            height: 64px;
            animation: brainPulse 1.5s ease-in-out infinite;
        }

        @keyframes brainPulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.15); opacity: 1; }
        }

        .loading-text {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .loading-subtext {
            font-size: 13px;
            color: var(--text-muted);
        }

        .loading-dots::after {
            content: '';
            animation: dots 1.5s steps(4, end) infinite;
        }

        @keyframes dots {
            0% { content: ''; }
            25% { content: '.'; }
            50% { content: '..'; }
            75% { content: '...'; }
            100% { content: ''; }
        }

        .result-page {
            max-width: 960px;
            margin: 0 auto;
        }

        .result-header {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
            border-radius: var(--radius-lg);
            padding: 40px;
            color: white;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }

        .result-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 300px;
            height: 300px;
            background: rgba(255,255,255,0.06);
            border-radius: 50%;
        }

        .result-header::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,0.04);
            border-radius: 50%;
        }

        .result-header-content {
            position: relative;
            z-index: 1;
        }

        .result-header h2 {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .result-header p {
            font-size: 14px;
            opacity: 0.85;
        }

        .result-score-overview {
            display: flex;
            gap: 24px;
            margin-top: 24px;
        }

        .total-score-box {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-md);
            padding: 20px 28px;
            text-align: center;
        }

        .total-score-value {
            font-size: 42px;
            font-weight: 900;
            line-height: 1;
        }

        .total-score-label {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 6px;
        }

        .total-score-level {
            display: inline-block;
            margin-top: 10px;
            padding: 4px 16px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            background: rgba(255,255,255,0.2);
        }

        .result-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 24px;
        }

        .result-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 28px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .result-card:hover {
            box-shadow: var(--shadow-md);
        }

        .result-card.full-width {
            grid-column: 1 / -1;
        }

        .result-card-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-left: 14px;
        }

        .result-card-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .result-card-title i {
            color: var(--primary);
            font-size: 18px;
        }

        .radar-chart-container {
            width: 100%;
            height: 340px;
        }

        .dimension-scores-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .dimension-score-item {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .dimension-score-name {
            width: 100px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        .dimension-score-bar-wrap {
            flex: 1;
        }

        .dimension-score-bar-outer {
            height: 10px;
            background: var(--bg-warm);
            border-radius: 5px;
            overflow: hidden;
        }

        .dimension-score-bar-inner {
            height: 100%;
            border-radius: 5px;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dimension-score-bar-inner.bar-stability { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .dimension-score-bar-inner.bar-allocation { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
        .dimension-score-bar-inner.bar-resistance { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
        .dimension-score-bar-inner.bar-duration { background: linear-gradient(90deg, #a855f7, #c084fc); }
        .dimension-score-bar-inner.bar-transfer { background: linear-gradient(90deg, #10b981, #34d399); }

        .dimension-score-val {
            width: 44px;
            text-align: right;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            flex-shrink: 0;
        }

        .dimension-level-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 10px;
            border-radius: 10px;
            margin-left: 8px;
            flex-shrink: 0;
        }

        .level-excellent { background: rgba(16,185,129,0.1); color: #059669; }
        .level-good { background: rgba(59,130,246,0.1); color: #2563eb; }
        .level-average { background: rgba(124,58,237,0.1); color: #c2410c; }
        .level-weak { background: rgba(239,68,68,0.1); color: #dc2626; }

        .ai-report-section {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 32px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .ai-report-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-left: 14px;
        }

        .ai-report-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--accent), var(--primary));
        }

        .ai-report-title i {
            color: var(--accent);
        }

        .ai-report-content {
            font-size: 14px;
            line-height: 1.9;
            color: var(--text-secondary);
        }

        .ai-report-content h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 20px 0 10px;
        }

        .ai-report-content ul {
            padding-left: 20px;
            margin: 10px 0;
        }

        .ai-report-content li {
            margin-bottom: 6px;
        }

        .ai-report-content strong {
            color: var(--text-primary);
        }

        .result-actions {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 28px;
        }

        .btn-result-action {
            padding: 12px 32px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .btn-result-action.primary {
            border: none;
            color: white;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        }

        .btn-result-action.primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-result-action.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37,99,235,0.3);
        }

        .btn-result-action.primary:hover::after {
            opacity: 1;
        }

        .btn-result-action.primary span,
        .btn-result-action.primary i {
            position: relative;
            z-index: 1;
        }

        .btn-result-action.secondary {
            border: 2px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
        }

        .btn-result-action.secondary:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .result-grid {
                grid-template-columns: 1fr;
            }

            .result-score-overview {
                flex-direction: column;
                align-items: center;
            }

            .likert-options {
                flex-direction: column;
            }

            .questionnaire-body {
                padding: 20px;
            }

            .questionnaire-header {
                padding: 16px 20px;
            }

            .questionnaire-footer {
                padding: 16px 20px;
                flex-direction: column;
                gap: 12px;
            }

            .assessment-intro {
                padding: 28px 20px;
            }
        }

        /* ========== PERSONALITY TEST ========== */
        .personality-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .personality-header {
            text-align: center;
            padding: 44px 20px 32px;
        }

        .personality-header-icon {
            width: 84px;
            height: 84px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 32px rgba(37,99,235,0.25);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .personality-header-icon:hover {
            transform: translateY(-4px) scale(1.05);
        }

        .personality-header-icon i {
            font-size: 36px;
            color: white;
        }

        .personality-header h2 {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
            position: relative;
            display: inline-block;
            padding-left: 16px;
        }

        .personality-header h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .personality-header p {
            font-size: 15px;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .progress-ring-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 30px 0;
        }

        .progress-ring {
            position: relative;
            width: 140px;
            height: 140px;
        }

        .progress-ring svg {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
        }

        .progress-ring-bg {
            fill: none;
            stroke: var(--border);
            stroke-width: 10;
        }

        .progress-ring-fill {
            fill: none;
            stroke: url(#progressGradient);
            stroke-width: 10;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .progress-ring-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .progress-percent {
            font-size: 28px;
            font-weight: 900;
            color: var(--primary);
            line-height: 1;
        }

        .progress-label {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .step-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 16px;
        }

        .step-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--border);
            transition: all var(--transition);
        }

        .step-dot.active {
            background: var(--primary);
            box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
        }

        .step-dot.completed {
            background: #10b981;
        }

        .question-card {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 36px;
            box-shadow: var(--shadow-md);
            margin-bottom: 24px;
            animation: questionSlideIn 0.5s ease forwards;
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .question-card:hover {
            box-shadow: 0 8px 32px rgba(37,99,235,0.12);
        }

        @keyframes questionSlideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .question-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .question-text {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.6;
            margin-bottom: 28px;
        }

        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 14px;
        }

        .option-btn {
            position: relative;
            padding: 18px 16px;
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--bg-warm);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            font-family: inherit;
        }

        .option-btn:hover {
            border-color: var(--primary-light);
            background: white;
            transform: translateY(-3px);
            box-shadow: var(--shadow-sm);
        }

        .option-btn.selected {
            border-color: var(--primary);
            background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(59,130,246,0.04) 100%);
            box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
            transform: scale(1.03);
        }

        .option-value {
            display: block;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 6px;
        }

        .option-label {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .nav-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 28px;
            gap: 16px;
        }

        .btn-nav {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 15px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-prev {
            background: var(--bg-warm);
            color: var(--text-secondary);
            border: 2px solid var(--border);
        }

        .btn-prev:hover {
            background: white;
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
        }

        .btn-next {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            box-shadow: 0 4px 16px rgba(37,99,235,0.25);
        }

        .btn-next::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-next:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(37,99,235,0.35);
        }

        .btn-next:hover::after {
            opacity: 1;
        }

        .btn-next span,
        .btn-next i {
            position: relative;
            z-index: 1;
        }

        .btn-next:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .btn-submit {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
            box-shadow: 0 4px 16px rgba(124,58,237,0.3);
        }

        .btn-submit::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #c2410c 0%, var(--accent) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-submit:hover {
            box-shadow: 0 6px 24px rgba(124,58,237,0.4);
        }

        .btn-submit:hover::after {
            opacity: 1;
        }

        .btn-submit span,
        .btn-submit i {
            position: relative;
            z-index: 1;
        }

        /* REPORT STYLES */
        .report-container {
            max-width: 1100px;
            margin: 0 auto;
        }

        .report-summary-card {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            border-radius: var(--radius-lg);
            padding: 40px;
            color: white;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
        }

        .report-summary-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .report-summary-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .report-summary-icon {
            width: 56px;
            height: 56px;
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .report-summary-icon i {
            font-size: 26px;
        }

        .report-summary-title {
            font-size: 22px;
            font-weight: 700;
        }

        .report-summary-subtitle {
            font-size: 14px;
            opacity: 0.85;
            margin-top: 4px;
        }

        .report-summary-content {
            position: relative;
            z-index: 1;
        }

        .report-summary-text {
            font-size: 15px;
            line-height: 1.8;
            opacity: 0.95;
        }

        .charts-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 28px;
        }

        .chart-panel {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 28px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .chart-panel:hover {
            box-shadow: var(--shadow-md);
        }

        .chart-panel-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-left: 14px;
        }

        .chart-panel-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .chart-panel-title i {
            color: var(--primary);
        }

        .radar-chart-container {
            width: 100%;
            height: 360px;
        }

        .traits-bars {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .trait-bar-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .trait-bar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .trait-bar-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .trait-bar-score {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
        }

        .trait-bar-track {
            width: 100%;
            height: 12px;
            background: var(--bg-warm);
            border-radius: 6px;
            overflow: hidden;
        }

        .trait-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 16px 0;
        }

        .tag-item {
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            transition: all var(--transition);
        }

        .tag-item.positive {
            background: rgba(16,185,129,0.1);
            color: #059669;
            border: 1px solid rgba(16,185,129,0.2);
        }

        .tag-item.neutral {
            background: rgba(59,130,246,0.1);
            color: #2563eb;
            border: 1px solid rgba(59,130,246,0.2);
        }

        .tag-item.development {
            background: rgba(124,58,237,0.1);
            color: #c2410c;
            border: 1px solid rgba(124,58,237,0.2);
        }

        .detail-section {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 32px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .detail-section-title {
            font-size: 19px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--border);
            position: relative;
            padding-left: 16px;
        }

        .detail-section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 16px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--accent), var(--primary));
        }

        .detail-section-title i {
            color: var(--accent);
            font-size: 22px;
        }

        .detail-content {
            font-size: 15px;
            line-height: 1.9;
            color: var(--text-secondary);
        }

        .detail-content p {
            margin-bottom: 16px;
        }

        .detail-content strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .suggestion-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .suggestion-card {
            background: var(--bg-warm);
            border-radius: var(--radius-md);
            padding: 24px;
            border-left: 4px solid var(--primary);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-top: 1px solid rgba(37,99,235,0.06);
            border-right: 1px solid rgba(37,99,235,0.06);
            border-bottom: 1px solid rgba(37,99,235,0.06);
        }

        .suggestion-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .suggestion-card-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .suggestion-card-title i {
            color: var(--primary);
        }

        .suggestion-card-content {
            font-size: 14px;
            line-height: 1.7;
            color: var(--text-secondary);
        }

        .loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(255,255,255,0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .loading-spinner-large {
            width: 60px;
            height: 60px;
            border: 4px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 24px;
        }

        .loading-text {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .loading-subtext {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 8px;
        }

        @media (max-width: 768px) {
            .charts-section {
                grid-template-columns: 1fr;
            }

            .options-grid {
                grid-template-columns: 1fr;
            }

            .question-card {
                padding: 24px;
            }

            .suggestion-cards {
                grid-template-columns: 1fr;
            }
        }

        /* ========== LEARNING STYLE ASSESSMENT (VARK) ========== */
        .ls-assessment-container { max-width: 880px; margin: 0 auto; }

        .ls-intro-card {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 44px 36px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .ls-intro-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
        }

        .ls-intro-card::after {
            content: '';
            position: absolute;
            top: -60px;
            right: -60px;
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
            border-radius: 50%;
        }

        .ls-intro-icon {
            width: 92px;
            height: 92px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(124,58,237,0.06) 100%);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-intro-icon:hover {
            transform: translateY(-4px) scale(1.05);
        }

        .ls-intro-icon i {
            font-size: 42px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ls-intro-card h2 {
            font-size: 25px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
            display: inline-block;
            padding-left: 16px;
        }

        .ls-intro-card h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .ls-intro-card > p {
            font-size: 14.5px;
            color: var(--text-secondary);
            line-height: 1.8;
            max-width: 540px;
            margin: 0 auto 24px;
            position: relative;
            z-index: 1;
        }

        .ls-dimension-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 32px;
            position: relative;
            z-index: 1;
        }

        .ls-dim-badge {
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .ls-dim-badge.visual { background: rgba(59,130,246,0.09); color: #3b82f6; border: 1px solid rgba(59,130,246,0.18); }
        .ls-dim-badge.auditory { background: rgba(168,85,247,0.09); color: #a855f7; border: 1px solid rgba(168,85,247,0.18); }
        .ls-dim-badge.readwrite { background: rgba(16,185,129,0.09); color: #10b981; border: 1px solid rgba(16,185,129,0.18); }
        .ls-dim-badge.kinesthetic { background: rgba(124,58,237,0.09); color: #7c3aed; border: 1px solid rgba(124,58,237,0.18); }
        .ls-dim-badge.strategy { background: rgba(37,99,235,0.09); color: #2563eb; border: 1px solid rgba(37,99,235,0.18); }
        .ls-dim-badge.metacognition { background: rgba(217,119,6,0.09); color: #d97706; border: 1px solid rgba(217,119,6,0.18); }
        .ls-dim-badge.timemanage { background: rgba(236,72,153,0.09); color: #ec4899; border: 1px solid rgba(236,72,153,0.18); }
        .ls-dim-badge.selfmonitor { background: rgba(99,102,241,0.09); color: #6366f1; border: 1px solid rgba(99,102,241,0.18); }

        .ls-start-btn {
            padding: 16px 60px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 17px;
            font-weight: 700;
            font-family: inherit;
            color: white;
            cursor: pointer;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 3px;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .ls-start-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-start-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(37,99,235,0.35);
        }

        .ls-start-btn:hover::after {
            opacity: 1;
        }

        .ls-start-btn span,
        .ls-start-btn i {
            position: relative;
            z-index: 1;
        }

        /* LS QUESTIONNAIRE */
        .ls-q-wrapper {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .ls-q-header {
            padding: 22px 28px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            background: linear-gradient(135deg, rgba(37,99,235,0.02) 0%, rgba(124,58,237,0.01) 100%);
        }

        .ls-q-progress-info { display: flex; align-items: center; gap: 10px; }

        .ls-q-progress-info span { font-size: 14px; font-weight: 600; color: var(--text-primary); }

        .ls-q-progress-num { font-size: 12.5px; color: var(--text-muted); }

        .ls-pb-outer {
            width: 260px;
            height: 10px;
            background: var(--bg-warm);
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .ls-pb-inner {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
            background-size: 200% 100%;
            border-radius: 5px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: lsProgressGlow 2s ease-in-out infinite;
        }

        @keyframes lsProgressGlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .ls-q-body { padding: 28px 32px; }

        .ls-section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 15px;
            border-radius: 8px;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-bottom: 22px;
        }

        .ls-section-label.visual { background: rgba(59,130,246,0.08); color: #3b82f6; }
        .ls-section-label.auditory { background: rgba(168,85,247,0.08); color: #a855f7; }
        .ls-section-label.readwrite { background: rgba(16,185,129,0.08); color: #10b981; }
        .ls-section-label.kinesthetic { background: rgba(124,58,237,0.08); color: #7c3aed; }
        .ls-section-label.strategy { background: rgba(37,99,235,0.08); color: #2563eb; }
        .ls-section-label.metacognition { background: rgba(217,119,6,0.08); color: #d97706; }
        .ls-section-label.timemanage { background: rgba(236,72,153,0.08); color: #ec4899; }
        .ls-section-label.selfmonitor { background: rgba(99,102,241,0.08); color: #6366f1; }

        .ls-question-item {
            margin-bottom: 34px;
            animation: lsQIn 0.35s ease forwards;
            padding: 22px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(37,99,235,0.06);
            background: linear-gradient(135deg, rgba(37,99,235,0.01) 0%, rgba(124,58,237,0.005) 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-question-item:hover {
            border-color: rgba(37,99,235,0.12);
            box-shadow: var(--shadow-sm);
        }

        .ls-question-item:last-child { margin-bottom: 0; }

        @keyframes lsQIn {
            from { opacity: 0; transform: translateX(14px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .ls-q-number {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ls-q-number .dim-tag {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 8px;
            letter-spacing: 0.3px;
        }

        .ls-q-text {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            line-height: 1.65;
            margin-bottom: 18px;
        }

        .ls-likert-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
        }

        .ls-likert-btn {
            position: relative;
            cursor: pointer;
        }

        .ls-likert-btn input { position: absolute; opacity: 0; width: 0; height: 0; }

        .ls-likert-btn label {
            display: block;
            padding: 14px 6px;
            text-align: center;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 12.5px;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-warm);
        }

        .ls-likert-btn input:checked + label {
            border-color: var(--primary);
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(59,130,246,0.04) 100%);
            color: var(--primary);
            font-weight: 700;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
            transform: scale(1.03);
        }

        .ls-likert-btn input:focus + label {
            outline: none;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
        }

        .ls-likert-btn label:hover {
            border-color: var(--primary-light);
            background: rgba(37,99,235,0.03);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .ls-likert-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            padding: 0 2px;
        }

        .ls-likert-labels span {
            font-size: 10.5px;
            color: var(--text-muted);
            font-weight: 400;
        }

        .ls-q-footer {
            padding: 18px 28px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .ls-btn-nav {
            padding: 11px 28px;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ls-btn-nav:hover:not(:disabled) {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37,99,235,0.1);
        }

        .ls-btn-nav:disabled { opacity: 0.4; cursor: not-allowed; }

        .ls-btn-submit {
            padding: 12px 38px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            color: white;
            cursor: pointer;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .ls-btn-submit::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #c2410c 0%, var(--accent) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(124,58,237,0.3);
        }

        .ls-btn-submit:hover::after {
            opacity: 1;
        }

        .ls-btn-submit span,
        .ls-btn-submit i {
            position: relative;
            z-index: 1;
        }

        .ls-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        /* LS RESULT PAGE */
        .ls-result-container { max-width: 1000px; margin: 0 auto; }

        .ls-result-hero {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #1ab8b8 100%);
            border-radius: var(--radius-lg);
            padding: 40px;
            color: white;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .ls-result-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
        }

        .ls-result-hero::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
        }

        .ls-result-hero-inner { position: relative; z-index: 1; }

        .ls-result-hero h2 {
            font-size: 27px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .ls-result-hero > .ls-result-hero-inner > p {
            font-size: 14px;
            opacity: 0.88;
            margin-bottom: 20px;
        }

        .ls-dominant-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 24px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(8px);
            border-radius: 30px;
            font-size: 15px;
            font-weight: 600;
        }

        .ls-dominant-badge i { font-size: 18px; }

        .ls-score-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 14px;
            margin-bottom: 24px;
        }

        .ls-score-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 22px 18px;
            box-shadow: var(--shadow-sm);
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-score-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .ls-score-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
        }

        .ls-score-card.visual::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
        .ls-score-card.auditory::before { background: linear-gradient(90deg, #a855f7, #c084fc); }
        .ls-score-card.readwrite::before { background: linear-gradient(90deg, #10b981, #34d399); }
        .ls-score-card.kinesthetic::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
        .ls-score-card.strategy::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .ls-score-card.metacognition::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
        .ls-score-card.timemanage::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
        .ls-score-card.selfmonitor::before { background: linear-gradient(90deg, #6366f1, #818cf8); }

        .ls-sc-icon {
            width: 42px;
            height: 42px;
            margin: 0 auto 10px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .ls-score-card.visual .ls-sc-icon { background: rgba(59,130,246,0.1); color: #3b82f6; }
        .ls-score-card.auditory .ls-sc-icon { background: rgba(168,85,247,0.1); color: #a855f7; }
        .ls-score-card.readwrite .ls-sc-icon { background: rgba(16,185,129,0.1); color: #10b981; }
        .ls-score-card.kinesthetic .ls-sc-icon { background: rgba(124,58,237,0.1); color: #7c3aed; }
        .ls-score-card.strategy .ls-sc-icon { background: rgba(37,99,235,0.1); color: #2563eb; }
        .ls-score-card.metacognition .ls-sc-icon { background: rgba(217,119,6,0.1); color: #d97706; }
        .ls-score-card.timemanage .ls-sc-icon { background: rgba(236,72,153,0.1); color: #ec4899; }
        .ls-score-card.selfmonitor .ls-sc-icon { background: rgba(99,102,241,0.1); color: #6366f1; }

        .ls-sc-name { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; }
        .ls-sc-value { font-size: 30px; font-weight: 900; color: var(--text-primary); line-height: 1; }
        .ls-sc-max { font-size: 11px; color: var(--text-muted); font-weight: 400; }

        .ls-charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 24px;
        }

        .ls-chart-panel {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-chart-panel:hover {
            box-shadow: var(--shadow-md);
        }

        .ls-chart-title {
            font-size: 15.5px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            padding-left: 14px;
        }

        .ls-chart-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }

        .ls-chart-title i { color: var(--primary); font-size: 16px; }

        .ls-chart-box { width: 100%; height: 300px; }

        .ls-ai-report {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .ls-ai-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .ls-ai-icon {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, var(--accent), var(--accent-light));
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 19px;
        }

        .ls-ai-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 14px;
        }

        .ls-ai-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--accent), var(--primary));
        }
        .ls-ai-subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

        .ls-ai-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 44px 0;
            gap: 16px;
        }

        .ls-ai-spinner {
            width: 46px;
            height: 46px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .ls-ai-loading p { font-size: 13.5px; color: var(--text-muted); }

        .ls-ai-body {
            font-size: 14px;
            line-height: 1.9;
            color: var(--text-primary);
        }

        .ls-ai-body h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--primary);
            margin: 20px 0 10px;
            padding-left: 13px;
            border-left: 3px solid var(--primary);
        }

        .ls-ai-body h3:first-child { margin-top: 0; }
        .ls-ai-body p { margin-bottom: 11px; }
        .ls-ai-body ul, .ls-ai-body ol { padding-left: 20px; margin-bottom: 11px; }
        .ls-ai-body li { margin-bottom: 5px; }
        .ls-ai-body strong { color: var(--primary); }

        .ls-tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            padding: 18px 0;
        }

        .ls-tag-item {
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: default;
            transition: all var(--transition);
        }

        .ls-tag-item:hover { transform: translateY(-2px); }

        .ls-tag-item.xl { font-size: 18px; font-weight: 700; padding: 10px 26px; }
        .ls-tag-item.lg { font-size: 15.5px; font-weight: 600; padding: 9px 22px; }
        .ls-tag-item.md { font-size: 13px; font-weight: 500; }
        .ls-tag-item.sm { font-size: 11px; font-weight: 400; opacity: 0.82; }

        .ls-tag-item.visual { background: rgba(59,130,246,0.1); color: #3b82f6; }
        .ls-tag-item.auditory { background: rgba(168,85,247,0.1); color: #a855f7; }
        .ls-tag-item.readwrite { background: rgba(16,185,129,0.1); color: #10b981; }
        .ls-tag-item.kinesthetic { background: rgba(124,58,237,0.1); color: #7c3aed; }

        .ls-result-actions {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-top: 28px;
            flex-wrap: wrap;
        }

        .ls-action-btn {
            padding: 12px 30px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .ls-action-btn.primary {
            border: none;
            color: white;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        }

        .ls-action-btn.primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ls-action-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37,99,235,0.3);
        }

        .ls-action-btn.primary:hover::after {
            opacity: 1;
        }

        .ls-action-btn.primary span,
        .ls-action-btn.primary i {
            position: relative;
            z-index: 1;
        }

        .ls-action-btn.secondary {
            border: 2px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
        }

        .ls-action-btn.secondary:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .ls-charts-grid { grid-template-columns: 1fr; }
            .ls-likert-row { gap: 5px; }
            .ls-q-body { padding: 20px; }
            .ls-q-header { padding: 16px 20px; }
            .ls-q-footer { padding: 16px 20px; flex-direction: column; gap: 12px; }
            .ls-intro-card { padding: 28px 20px; }
            .ls-score-cards { grid-template-columns: repeat(2, 1fr); }
            .ls-result-hero { padding: 28px 20px; }
        }

        @media (max-width: 480px) {
            .ls-likert-row { gap: 3px; }
            .ls-likert-btn label { padding: 10px 3px; font-size: 11px; }
            .ls-score-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
        }

        /* ========== EXAM FULL REPORT PAGE ========== */
        .report-tabs {
            display: flex;
            gap: 6px;
            background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(59,130,246,0.02));
            border: 1px solid rgba(37,99,235,0.08);
            border-radius: 16px;
            padding: 6px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }

        .report-tab-btn {
            flex: 1;
            min-width: 120px;
            padding: 13px 22px;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
        }

        .report-tab-btn:hover {
            color: var(--primary);
            background: rgba(255,255,255,0.6);
        }

        .report-tab-btn.active {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: white;
            box-shadow: 0 4px 16px rgba(37,99,235,0.3);
        }

        .report-tab-btn i {
            font-size: 15px;
        }

        .report-tab-panel {
            display: none;
            animation: pageEnter 0.4s ease forwards;
        }

        .report-tab-panel.active {
            display: block;
        }

        /* ========== SINGLE-PAGE SCROLLING REPORT LAYOUT ========== */
        .sp-section {
            margin-bottom: 40px;
        }

        .sp-section-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 14px;
            border-bottom: none;
            position: relative;
        }

        .sp-section-title::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, rgba(37,99,235,0.2), rgba(59,130,246,0.05), transparent);
        }

        .sp-section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #2563eb, #3b82f6);
            border-radius: 2px;
        }

        .sp-section-title i {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(59,130,246,0.06));
            color: var(--primary);
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sp-overview-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .sp-overview-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 26px 22px;
            box-shadow: var(--shadow-sm);
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
        }

        .sp-overview-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(37, 99, 235, 0.12);
        }

        .sp-overview-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .sp-overview-card.subject::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
        .sp-overview-card.subject { border-color: rgba(37,99,235,0.1); }
        .sp-overview-card.score::before { background: linear-gradient(90deg, #10b981, #34d399); }
        .sp-overview-card.score { border-color: rgba(16,185,129,0.1); }
        .sp-overview-card.rate::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
        .sp-overview-card.rate { border-color: rgba(59,130,246,0.1); }
        .sp-overview-card.errors::before { background: linear-gradient(90deg, #ef4444, #f87171); }
        .sp-overview-card.errors { border-color: rgba(239,68,68,0.1); }

        .sp-overview-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 14px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .sp-overview-card.subject .sp-overview-icon { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.08)); color: #2563eb; }
        .sp-overview-card.score .sp-overview-icon { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.08)); color: #10b981; }
        .sp-overview-card.rate .sp-overview-icon { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.08)); color: #3b82f6; }
        .sp-overview-card.errors .sp-overview-icon { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(248,113,113,0.08)); color: #ef4444; }

        .sp-overview-value {
            font-size: 32px;
            font-weight: 900;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 6px;
        }

        .sp-overview-label {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .sp-radar-chart {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }

        .sp-radar-chart-container {
            width: 100%;
            height: 400px;
        }

        .sp-knowledge-group {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 26px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 16px;
            border-left: 4px solid var(--primary);
            border-top: 1px solid rgba(37,99,235,0.06);
            border-right: 1px solid rgba(37,99,235,0.06);
            border-bottom: 1px solid rgba(37,99,235,0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .sp-knowledge-group:hover {
            box-shadow: 0 6px 20px rgba(37,99,235,0.08);
        }

        .sp-knowledge-group-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }

        .sp-knowledge-group-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .sp-knowledge-group-rate {
            font-size: 12px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 12px;
            letter-spacing: 0.3px;
        }

        .sp-knowledge-group-rate.low {
            background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.06));
            color: #dc2626;
        }

        .sp-knowledge-group-rate.mid {
            background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.06));
            color: #d97706;
        }

        .sp-knowledge-group-rate.high {
            background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(52,211,153,0.06));
            color: #059669;
        }

        .sp-severity-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }
        .sp-severity-tag.high { background: rgba(239,68,68,0.1); color: #ef4444; }
        .sp-severity-tag.medium { background: rgba(245,158,11,0.1); color: #f59e0b; }
        .sp-severity-tag.low { background: rgba(16,185,129,0.1); color: #10b981; }

        .sp-error-list {
            list-style: none;
            padding: 0;
            margin: 0 0 12px;
        }

        .sp-error-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-warm);
            border-radius: var(--radius-sm);
            margin-bottom: 6px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .sp-error-list li i {
            color: #ef4444;
            font-size: 12px;
        }

        .sp-weak-detail {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .sp-weak-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 14px;
            background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(251,191,36,0.05));
            color: #d97706;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 700;
            border: 1px solid rgba(245,158,11,0.1);
        }

        .sp-comment-card {
            background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(59,130,246,0.03), rgba(124,58,237,0.02));
            border: 1px solid rgba(37,99,235,0.12);
            border-radius: 16px;
            padding: 32px 30px;
            position: relative;
            overflow: hidden;
        }

        .sp-comment-card::before {
            content: '';
            position: absolute;
            top: -40px;
            right: -40px;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .sp-comment-card::after {
            content: '\201C';
            position: absolute;
            top: 8px;
            left: 20px;
            font-size: 72px;
            font-weight: 900;
            color: rgba(37,99,235,0.08);
            line-height: 1;
            font-family: Georgia, serif;
            pointer-events: none;
        }

        .sp-comment-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
        }

        .sp-comment-header i {
            font-size: 20px;
            color: var(--primary);
        }

        .sp-comment-header span {
            font-size: 16px;
            font-weight: 700;
            color: var(--primary);
        }

        .sp-comment-text {
            font-size: 15px;
            line-height: 1.9;
            color: var(--text-secondary);
            position: relative;
            z-index: 1;
        }

        .sp-suggestion-card {
            background: var(--bg-card);
            border-radius: 14px;
            padding: 22px 24px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 14px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(37,99,235,0.04);
        }

        .sp-suggestion-card:hover {
            transform: translateX(6px);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
        }

        .sp-suggestion-priority {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            flex-shrink: 0;
            color: white;
        }

        .sp-suggestion-priority.high {
            background: linear-gradient(135deg, #ef4444, #f87171);
            box-shadow: 0 4px 12px rgba(239,68,68,0.25);
        }

        .sp-suggestion-priority.medium {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            box-shadow: 0 4px 12px rgba(245,158,11,0.25);
        }

        .sp-suggestion-priority.low {
            background: linear-gradient(135deg, #10b981, #34d399);
            box-shadow: 0 4px 12px rgba(16,185,129,0.25);
        }

        .sp-suggestion-content {
            flex: 1;
        }

        .sp-suggestion-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sp-suggestion-title i {
            color: var(--primary);
            font-size: 14px;
        }

        .sp-suggestion-desc {
            font-size: 13.5px;
            line-height: 1.7;
            color: var(--text-secondary);
        }

        .sp-attention-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 18px;
        }

        .sp-pie-chart-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }

        .sp-pie-chart-container {
            width: 100%;
            height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .sp-overview-grid { grid-template-columns: repeat(2, 1fr); }
            .sp-attention-grid { grid-template-columns: 1fr; }
            .sp-radar-chart-container { height: 300px; }
        }

        @media (max-width: 480px) {
            .sp-overview-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
        }

        /* ERROR ANALYSIS MODULE */
        .error-overview-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-bottom: 28px;
        }

        .error-overview-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: var(--shadow-sm);
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid transparent;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .error-overview-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .error-overview-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .error-overview-card.total::before { background: linear-gradient(90deg, #ef4444, #f87171); }
        .error-overview-card.total { border-color: rgba(239,68,68,0.1); }
        .error-overview-card.rate::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .error-overview-card.rate { border-color: rgba(245,158,11,0.1); }
        .error-overview-card.critical::before { background: linear-gradient(90deg, #dc2626, #ef4444); }
        .error-overview-card.critical { border-color: rgba(220,38,38,0.1); }

        .error-overview-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 14px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .error-overview-card.total .error-overview-icon { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(248,113,113,0.08)); color: #ef4444; }
        .error-overview-card.rate .error-overview-icon { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,191,36,0.08)); color: #f59e0b; }
        .error-overview-card.critical .error-overview-icon { background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(239,68,68,0.08)); color: #dc2626; }

        .error-overview-value {
            font-size: 36px;
            font-weight: 900;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 6px;
        }

        .error-overview-label {
            font-size: 13px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .error-charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 28px;
        }

        .error-chart-panel {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }

        .error-chart-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .error-chart-title i {
            color: var(--accent);
            font-size: 17px;
        }

        .error-pie-container {
            width: 100%;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .error-bar-container {
            width: 100%;
            height: 300px;
        }

        /* WRONG QUESTIONS TABLE */
        .wrong-questions-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(239,68,68,0.06);
        }

        .wrong-questions-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: none;
            position: relative;
        }

        .wrong-questions-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #ef4444, #f87171);
            border-radius: 2px;
        }

        .wrong-questions-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .wrong-questions-title i {
            color: #ef4444;
        }

        .wrong-questions-count {
            font-size: 13px;
            color: var(--text-muted);
            background: var(--bg-warm);
            padding: 4px 12px;
            border-radius: 12px;
        }

        .wq-table-wrapper {
            overflow-x: auto;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
        }

        .wq-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .wq-table th {
            background: var(--bg-warm);
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .wq-table td {
            padding: 14px 16px;
            border-top: 1px solid var(--border);
            vertical-align: middle;
        }

        .wq-table tr:hover td {
            background: rgba(239,68,68,0.02);
        }

        .wq-num {
            font-weight: 700;
            color: white;
            background: #ef4444;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .wq-content {
            min-width: 180px;
            color: var(--text-primary);
            font-weight: 500;
        }

        .wq-wrong-answer {
            color: #ef4444;
            font-weight: 600;
            text-decoration: line-through;
        }

        .wq-correct-answer {
            color: #10b981;
            font-weight: 700;
        }

        .wq-type-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 600;
        }

        .wq-type-badge.calc { background: rgba(239,68,68,0.08); color: #dc2626; }
        .wq-type-badge.concept { background: rgba(245,158,11,0.1); color: #d97706; }
        .wq-type-badge.careless { background: rgba(59,130,246,0.1); color: #2563eb; }
        .wq-type-badge.other { background: rgba(168,85,247,0.1); color: #a855f7; }

        .wq-analysis-toggle {
            cursor: pointer;
            color: var(--primary);
            font-weight: 600;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
        }

        .wq-analysis-toggle:hover { color: var(--primary-dark); }

        .wq-detail-row {
            display: none;
        }

        .wq-detail-row.show {
            display: table-row;
        }

        .wq-detail-cell {
            background: rgba(37,99,235,0.03) !important;
            padding: 16px !important;
        }

        .wq-detail-text {
            font-size: 13px;
            line-height: 1.7;
            color: var(--text-secondary);
            max-width: none;
        }

        /* IMPROVEMENT MODULE */
        .timeline-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 32px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 28px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .timeline-header {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 28px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .timeline-header i {
            color: var(--primary);
            font-size: 20px;
        }

        .improvement-timeline {
            position: relative;
            padding-left: 36px;
        }

        .improvement-timeline::before {
            content: '';
            position: absolute;
            left: 14px;
            top: 8px;
            bottom: 8px;
            width: 3px;
            background: linear-gradient(to bottom, var(--primary), var(--primary-light), var(--accent));
            border-radius: 2px;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 32px;
            padding-left: 24px;
        }

        .timeline-item:last-child { margin-bottom: 0; }

        .timeline-dot {
            position: absolute;
            left: -29px;
            top: 4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 3px solid var(--primary);
            background: var(--bg-card);
            z-index: 1;
        }

        .timeline-item.phase1 .timeline-dot { border-color: #2563eb; background: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,0.15); }
        .timeline-item.phase2 .timeline-dot { border-color: #3b82f6; background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.15); }
        .timeline-item.phase3 .timeline-dot { border-color: #7c3aed; background: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,0.15); }

        .timeline-item-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .timeline-phase-tag {
            padding: 4px 14px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
            color: white;
        }

        .phase1 .timeline-phase-tag { background: linear-gradient(135deg, #2563eb, #3b82f6); }
        .phase2 .timeline-phase-tag { background: linear-gradient(135deg, #3b82f6, #1ab8b8); }
        .phase3 .timeline-phase-tag { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

        .timeline-phase-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .timeline-phase-time {
            font-size: 12px;
            color: var(--text-muted);
            background: var(--bg-warm);
            padding: 3px 10px;
            border-radius: 8px;
        }

        .timeline-actions-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .timeline-action-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 14px;
            background: var(--bg-warm);
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            font-size: 13.5px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .timeline-action-item i {
            color: var(--primary);
            margin-top: 2px;
            flex-shrink: 0;
            font-size: 13px;
        }

        /* ATTENTION CARDS GRID */
        .attention-grid-section {
            margin-bottom: 28px;
        }

        .attention-grid-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .attention-grid-title i {
            color: var(--accent);
            font-size: 19px;
        }

        .attention-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 18px;
        }

        .attention-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-top: 4px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .attention-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0,0,0,0.08);
        }

        .attention-card.habit { border-top-color: #2563eb; }
        .attention-card.exam { border-top-color: #7c3aed; }
        .attention-card.parent { border-top-color: #10b981; }
        .attention-card.time { border-top-color: #8b5cf6; }

        .attention-card-icon {
            width: 46px;
            height: 46px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            margin-bottom: 16px;
        }

        .attention-card.habit .attention-card-icon { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.08)); color: #2563eb; }
        .attention-card.exam .attention-card-icon { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(139,92,246,0.08)); color: #7c3aed; }
        .attention-card.parent .attention-card-icon { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.08)); color: #10b981; }
        .attention-card.time .attention-card-icon { background: linear-gradient(135deg, rgba(139,92,247,0.15), rgba(167,139,250,0.08)); color: #8b5cf6; }

        .attention-card-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .attention-card-desc {
            font-size: 13px;
            line-height: 1.7;
            color: var(--text-secondary);
        }

        /* RESOURCE RECOMMENDATIONS */
        .resource-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 28px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .resource-section-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .resource-section-title i { color: #f59e0b; font-size: 18px; }

        .resource-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .resource-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 16px 20px;
            background: var(--bg-warm);
            border-radius: var(--radius-md);
            transition: all 0.2s ease;
        }

        .resource-item:hover {
            background: rgba(37,99,235,0.05);
            transform: translateX(4px);
        }

        .resource-item-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            flex-shrink: 0;
            background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(59,130,246,0.08));
            color: var(--primary);
        }

        .resource-item-content { flex: 1; }

        .resource-item-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .resource-item-desc {
            font-size: 12.5px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* DAILY ACTION PLAN */
        .daily-plan-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .daily-plan-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .daily-plan-title i { color: #10b981; font-size: 18px; }

        .daily-plan-categories {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .daily-category {
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .daily-category-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 18px;
            background: var(--bg-warm);
            cursor: pointer;
            transition: background 0.2s;
        }

        .daily-category-header:hover { background: rgba(37,99,235,0.06); }

        .daily-category-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
        }

        .daily-category.review .daily-category-icon { background: linear-gradient(135deg, #2563eb, #3b82f6); }
        .daily-category.practice .daily-category-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .daily-category.preview .daily-category-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
        .daily-category.habit .daily-category-icon { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

        .daily-category-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
        }

        .daily-category-count {
            font-size: 12px;
            color: var(--text-muted);
            background: white;
            padding: 2px 10px;
            border-radius: 10px;
        }

        .daily-tasks-list {
            padding: 12px 18px 16px;
            display: none;
        }

        .daily-tasks-list.show { display: block; }

        .daily-task-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--border);
            font-size: 13.5px;
            color: var(--text-secondary);
        }

        .daily-task-item:last-child { border-bottom: none; }

        .daily-task-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
            appearance: none;
            -webkit-appearance: none;
        }

        .daily-task-checkbox:checked {
            background: var(--primary);
            border-color: var(--primary);
        }

        .daily-task-checkbox:checked::after {
            content: '✓';
            color: white;
            font-size: 12px;
            font-weight: 700;
        }

        .daily-task-checkbox:checked + .daily-task-text {
            text-decoration: line-through;
            color: var(--text-muted);
        }

        /* KNOWLEDGE MASTERY TAB (existing report style) */
        .knowledge-mastery-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .km-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .km-title i { color: var(--primary); font-size: 18px; }

        .km-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 14px;
        }

        .km-item {
            padding: 18px;
            background: var(--bg-warm);
            border-radius: var(--radius-sm);
            border-left: 4px solid var(--primary);
            transition: all 0.2s ease;
        }

        .km-item:hover {
            background: rgba(37,99,235,0.04);
        }

        .km-item-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .km-item-bar-wrap {
            height: 8px;
            background: #e8eeef;
            border-radius: 4px;
            overflow: hidden;
        }

        .km-item-bar-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .km-item-rate {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 6px;
            text-align: right;
        }

        @media (max-width: 768px) {
            .error-overview-cards { grid-template-columns: 1fr; }
            .error-charts-grid { grid-template-columns: 1fr; }
            .report-tabs { flex-direction: column; }
            .report-tab-btn { min-width: unset; }
            .attention-cards-grid { grid-template-columns: 1fr; }
            .improvement-timeline { padding-left: 28px; }
        }

        /* ========== COMPREHENSIVE REPORT PAGE ========== */
        .comprehensive-report-container { max-width: 1200px; margin: 0 auto; }

        .cr-hero-section {
            background: linear-gradient(135deg, #064e52 0%, var(--primary) 30%, var(--primary-light) 60%, #1ab8b8 85%, #2dd4bf 100%);
            border-radius: 20px;
            padding: 40px 44px;
            color: white;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
        }

        .cr-hero-section::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -15%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .cr-hero-section::after {
            content: '';
            position: absolute;
            bottom: -25%;
            left: -10%;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .cr-hero-inner { position: relative; z-index: 1; }

        .cr-hero-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .cr-student-info { display: flex; align-items: center; gap: 18px; }

        .cr-avatar-lg {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            font-weight: 800;
            color: white;
            flex-shrink: 0;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }

        .cr-avatar-lg.male { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .cr-avatar-lg.female { background: linear-gradient(135deg, #ec4899, #f472b6); }
        .cr-avatar-lg.unknown { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

        .cr-student-name { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; }
        .cr-student-meta { font-size: 13px; opacity: 0.85; margin-top: 4px; }

        .cr-export-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 22px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: var(--radius-sm);
            color: white;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all var(--transition);
        }

        .cr-export-btn:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .cr-stats-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .cr-stat-item {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 14px;
            padding: 18px 24px;
            min-width: 140px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.12);
            transition: all 0.3s ease;
        }

        .cr-stat-item:hover {
            background: rgba(255,255,255,0.16);
            transform: translateY(-2px);
        }

        .cr-stat-value { font-size: 28px; font-weight: 900; line-height: 1; }
        .cr-stat-label { font-size: 12px; opacity: 0.85; margin-top: 6px; }

        /* CR PROGRESS RING */
        .cr-progress-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }

        .cr-progress-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            gap: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(37,99,235,0.06);
        }

        .cr-progress-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0,0,0,0.08);
        }

        .cr-ring-wrapper {
            position: relative;
            width: 72px;
            height: 72px;
            flex-shrink: 0;
        }

        .cr-ring-wrapper svg { transform: rotate(-90deg); width: 100%; height: 100%; }

        .cr-ring-bg { fill: none; stroke: var(--border); stroke-width: 7; }
        .cr-ring-fill {
            fill: none;
            stroke-width: 7;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cr-ring-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .cr-ring-percent { font-size: 17px; font-weight: 900; color: var(--text-primary); line-height: 1; }
        .cr-ring-label-text { font-size: 9px; color: var(--text-muted); margin-top: 2px; }

        .cr-progress-info h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
        .cr-progress-info p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
        .cr-progress-info .cr-last-time { font-size: 11px; color: var(--primary); font-weight: 600; margin-top: 6px; }

        /* CR ABILITY RADAR */
        .cr-ability-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .cr-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: none;
            position: relative;
        }

        .cr-section-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, rgba(37,99,235,0.15), rgba(59,130,246,0.05), transparent);
        }

        .cr-section-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cr-section-title i {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(59,130,246,0.06));
            color: var(--primary);
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cr-radar-chart-box { width: 100%; height: 420px; }

        /* CR TIMELINE */
        .cr-timeline-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .cr-timeline-list { position: relative; padding-left: 32px; }

        .cr-timeline-list::before {
            content: '';
            position: absolute;
            left: 11px;
            top: 8px;
            bottom: 8px;
            width: 3px;
            background: linear-gradient(to bottom, var(--primary), var(--primary-light), var(--accent), #f59e0b);
            border-radius: 2px;
        }

        .cr-timeline-item {
            position: relative;
            padding: 18px 22px;
            margin-bottom: 16px;
            background: var(--bg-warm);
            border-radius: 14px;
            border-left: 4px solid var(--primary);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cr-timeline-item:last-child { margin-bottom: 0; }

        .cr-timeline-item:hover {
            transform: translateX(8px);
            box-shadow: 0 4px 16px rgba(37,99,235,0.1);
            border-left-color: var(--accent);
        }

        .cr-timeline-dot {
            position: absolute;
            left: -26px;
            top: 22px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--primary);
            border: 3px solid var(--bg-card);
            z-index: 1;
        }

        .cr-timeline-item.exam-type { border-left-color: #2563eb; }
        .cr-timeline-item.exam-type .cr-timeline-dot { background: #2563eb; }
        .cr-timeline-item.attention-type { border-left-color: #a855f7; }
        .cr-timeline-item.attention-type .cr-timeline-dot { background: #a855f7; }
        .cr-timeline-item.learning-type { border-left-color: #10b981; }
        .cr-timeline-item.learning-type .cr-timeline-dot { background: #10b981; }
        .cr-timeline-item.personality-type { border-left-color: #7c3aed; }
        .cr-timeline-item.personality-type . cr-timeline-dot { background: #7c3aed; }

        .cr-tl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .cr-tl-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
        .cr-tl-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 10px;
        }

        .cr-tl-badge.exam-badge { background: rgba(37,99,235,0.1); color: #2563eb; }
        .cr-tl-badge.attention-badge { background: rgba(168,85,247,0.1); color: #a855f7; }
        .cr-tl-badge.learning-badge { background: rgba(16,185,129,0.1); color: #10b981; }
        .cr-tl-badge.personality-badge { background: rgba(124,58,237,0.1); color: #c2410c; }

        .cr-tl-desc { font-size: 13px; color: var(--text-secondary); }
        .cr-tl-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

        /* CR TREND CHARTS */
        .cr-trend-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .cr-trend-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }

        .cr-trend-chart-box { width: 100%; height: 280px; }

        /* CR SUBJECT SCORES & VISUAL ENHANCEMENTS */
        .cr-subject-scores-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.06);
        }
        .cr-subject-score-list { display: flex; flex-direction: column; gap: 14px; }
        .cr-subject-score-item {
            background: var(--bg-warm);
            border-radius: 12px;
            padding: 14px 18px;
            border: 1px solid rgba(37,99,235,0.05);
            transition: all 0.25s ease;
        }
        .cr-subject-score-item:hover { box-shadow: 0 4px 14px rgba(37,99,235,0.08); transform: translateY(-1px); }
        .cr-ss-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
        .cr-ss-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
        .cr-ss-name i { font-size: 13px; }
        .cr-ss-score { font-size: 14px; font-weight: 700; }
        .cr-ss-bar-wrap { height: 10px; background: rgba(37,99,235,0.06); border-radius: 6px; overflow: hidden; position: relative; }
        .cr-ss-bar-fill { height: 100%; border-radius: 6px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
        .cr-ss-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0)); border-radius: 6px; }
        .cr-ss-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: flex; justify-content: space-between; }

        .cr-chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 24px; }
        .cr-chart-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }
        .cr-chart-box { width: 100%; height: 320px; }

        .cr-perf-summary {
            background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(124,58,237,0.03));
            border-radius: 16px;
            padding: 24px 28px;
            margin-bottom: 24px;
            border: 1px solid rgba(37,99,235,0.08);
        }
        .cr-perf-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
        .cr-perf-badge {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
            border: 1px solid transparent;
        }
        .cr-perf-badge i { font-size: 12px; }
        .cr-perf-badge.level-excellent { background: rgba(16,185,129,0.12); color: #059669; border-color: rgba(16,185,129,0.25); }
        .cr-perf-badge.level-good { background: rgba(37,99,235,0.12); color: #1d4ed8; border-color: rgba(37,99,235,0.25); }
        .cr-perf-badge.level-medium { background: rgba(245,158,11,0.12); color: #d97706; border-color: rgba(245,158,11,0.25); }
        .cr-perf-badge.level-needeffort { background: rgba(239,68,68,0.12); color: #dc2626; border-color: rgba(239,68,68,0.25); }
        .cr-perf-badge.level-nodata { background: rgba(100,116,139,0.1); color: #475569; border-color: rgba(100,116,139,0.2); }

        /* SP PROGRESS RING OVERVIEW (exam report) */
        .sp-overview-card.with-ring { position: relative; }
        .sp-ring-mini { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; }
        .sp-ring-mini svg { transform: rotate(-90deg); }
        .sp-ring-mini circle { fill: none; stroke-width: 5; stroke-linecap: round; }
        .sp-ring-mini .ring-bg { stroke: rgba(255,255,255,0.25); }
        .sp-ring-mini .ring-fg { transition: stroke-dashoffset 1s ease; }
        .sp-ring-mini-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }

        .sp-coverage-section { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
        .sp-coverage-donut { width: 220px; height: 220px; flex-shrink: 0; }
        .sp-coverage-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
        .sp-cov-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
        .sp-cov-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
        .sp-cov-val { font-weight: 700; margin-left: auto; }

        .sp-qscore-chart { width: 100%; height: 300px; }

        @media (max-width: 900px) {
            .cr-chart-grid { grid-template-columns: 1fr; }
            .sp-coverage-section { flex-direction: column; }
        }

        /* CR EMPTY STATE */
        .cr-empty-state {
            text-align: center;
            padding: 80px 20px;
        }

        .cr-empty-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(59,130,246,0.03) 100%);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cr-empty-icon i { font-size: 42px; color: var(--primary); }

        .cr-empty-state h3 { font-size: 20px; color: var(--text-primary); margin-bottom: 10px; }
        .cr-empty-state p { font-size: 14px; color: var(--text-muted); max-width: 380px; margin: 0 auto 24px; line-height: 1.7; }

        /* MOBILE HAMBURGER MENU */
        .mobile-menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: var(--bg-warm);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition);
            margin-right: 12px;
        }

        .mobile-menu-toggle:hover { background: white; border-color: var(--primary-light); }

        .mobile-menu-toggle i { font-size: 18px; color: var(--text-primary); }

        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 998;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sidebar-overlay.show { display: block; opacity: 1; }

        /* TOAST NOTIFICATION */
        .toast-notification {
            position: fixed;
            top: 24px;
            right: 24px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 16px 24px;
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 99999;
            transform: translateX(calc(100% + 48px));
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-width: 380px;
            border-left: 4px solid var(--primary);
        }

        .toast-notification.show { transform: translateX(0); }

        .toast-notification.success { border-left-color: #10b981; }
        .toast-notification.error { border-left-color: #ef4444; }
        .toast-notification.warning { border-left-color: #f59e0b; }

        .toast-icon { font-size: 20px; flex-shrink: 0; }
        .toast-notification.success .toast-icon { color: #10b981; }
        .toast-notification.error .toast-icon { color: #ef4444; }
        .toast-notification.warning .toast-icon { color: #f59e0b; }

        .toast-message { font-size: 13px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }

        /* PRINT STYLES FOR EXPORT */
        @media print {
            body { background: white !important; }
            .sidebar, .topbar, .cr-export-btn, .btn-result-action, .ls-action-btn, .logout-btn, .student-selector, .user-menu { display: none !important; }
            .app-wrapper.active {
                grid-template-columns: 1fr !important;
                grid-template-areas: "content" !important;
                height: auto !important;
            }
            .content-area { padding: 20px !important; overflow: visible !important; }
            .chart-card, .stat-card, .result-card, .cr-ability-section, .cr-trend-card, .cr-progress-card, .cr-timeline-section { break-inside: avoid; box-shadow: none !important; border: 1px solid #eee !important; }
            .cr-hero-section { background: #2563eb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }

        @media (max-width: 768px) {
            .comprehensive-report-container { padding: 0; }
            .cr-hero-section { padding: 24px 20px; }
            .cr-hero-top { flex-direction: column; align-items: flex-start; }
            .cr-stats-row { gap: 12px; }
            .cr-stat-item { min-width: 100px; padding: 12px 14px; }
            .cr-stat-value { font-size: 22px; }
            .cr-student-name { font-size: 20px; }
            .cr-radar-chart-box { height: 320px; }
            .cr-trend-section { grid-template-columns: 1fr; }
            .cr-trend-chart-box { height: 240px; }
            .cr-progress-section { grid-template-columns: 1fr; }
            .cr-timeline-list { padding-left: 28px; }
            .cr-timeline-item { padding: 12px 14px; }
            .mobile-menu-toggle { display: flex; }
        }

        @media (max-width: 480px) {
            .cr-stats-row { grid-template-columns: repeat(2, 1fr); }
            .cr-stat-item { min-width: unset; }
            .cr-stat-value { font-size: 20px; }
            .cr-hero-inner { text-align: center; }
            .cr-student-info { flex-direction: column; text-align: center; }
            .cr-export-btn { align-self: center; }
        }
        /* ========== HISTORY RECORDS PAGE ========== */
        .history-page { max-width: 1200px; margin: 0 auto; }

        .history-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
            background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(59,130,246,0.02));
            border: 1px solid rgba(37,99,235,0.06);
            border-radius: 18px;
            padding: 20px;
        }

        .history-stat-card {
            background: var(--bg-card);
            border-radius: 14px;
            padding: 20px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(37,99,235,0.04);
        }

        .history-stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.06);
        }

        .history-stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .history-stat-card:nth-child(1) .history-stat-icon { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.08)); color: var(--primary); }
        .history-stat-card:nth-child(2) .history-stat-icon { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.08)); color: #10b981; }
        .history-stat-card:nth-child(3) .history-stat-icon { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.08)); color: #3b82f6; }
        .history-stat-card:nth-child(4) .history-stat-icon { background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(192,132,252,0.08)); color: #a855f7; }

        .history-stat-info { flex: 1; }

        .history-stat-value {
            font-size: 28px;
            font-weight: 900;
            color: var(--text-primary);
            line-height: 1;
        }

        .history-stat-label {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .history-filter-bar {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 18px 22px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .history-filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .history-filter-label {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            white-space: nowrap;
        }

        .history-filter-select {
            padding: 8px 32px 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-family: inherit;
            color: var(--text-primary);
            background: var(--bg-warm);
            cursor: pointer;
            outline: none;
            transition: all var(--transition);
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a7a7a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }

        .history-filter-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
        }

        .history-search-box {
            position: relative;
            flex: 1;
            min-width: 200px;
            max-width: 280px;
        }

        .history-search-input {
            width: 100%;
            padding: 8px 12px 8px 36px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-family: inherit;
            color: var(--text-primary);
            background: var(--bg-warm);
            outline: none;
            transition: all var(--transition);
        }

        .history-search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
        }

        .history-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 13px;
        }

        .history-type-tabs {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .history-type-tab {
            padding: 7px 16px;
            border: 1px solid var(--border);
            border-radius: 22px;
            font-size: 12px;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .history-type-tab:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            background: rgba(37,99,235,0.04);
        }

        .history-type-tab.active {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: white;
            border-color: transparent;
            box-shadow: 0 3px 12px rgba(37,99,235,0.25);
        }

        .history-list { display: flex; flex-direction: column; gap: 12px; }

        .history-record-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 22px 24px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            gap: 18px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(37,99,235,0.06);
            animation: cardFadeIn 0.35s ease forwards;
            opacity: 0;
            position: relative;
            overflow: hidden;
        }

        .history-record-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, #2563eb, #3b82f6);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        @keyframes cardFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .history-record-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0,0,0,0.08);
            border-color: rgba(37,99,235,0.12);
        }

        .history-record-card:hover::before {
            opacity: 1;
        }

        .history-record-type-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
            color: white;
        }

        .history-record-type-icon.exam { background: linear-gradient(135deg, #2563eb, #3b82f6); }
        .history-record-type-icon.attention { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .history-record-type-icon.learningMethod { background: linear-gradient(135deg, #a855f7, #c084fc); }
        .history-record-type-icon.personality { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

        .history-record-info { flex: 1; min-width: 0; }

        .history-record-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }

        .history-record-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .history-record-type-badge {
            padding: 3px 12px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        .history-record-type-badge.exam { background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(59,130,246,0.06)); color: var(--primary); }
        .history-record-type-badge.attention { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(96,165,250,0.06)); color: #3b82f6; }
        .history-record-type-badge.learningMethod { background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(192,132,252,0.06)); color: #a855f7; }
        .history-record-type-badge.personality { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(139,92,246,0.06)); color: var(--accent); }

        .history-record-meta {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .history-record-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .history-record-summary {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 6px;
            padding: 6px 14px;
            background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(59,130,246,0.02));
            border-radius: 8px;
            display: inline-block;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .history-record-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .history-btn-view {
            padding: 8px 18px;
            border: 1px solid var(--primary);
            background: transparent;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-family: inherit;
            color: var(--primary);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
        }

        .history-btn-view:hover {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: white;
            border-color: transparent;
            box-shadow: 0 3px 12px rgba(37,99,235,0.25);
        }

        .history-btn-delete {
            padding: 8px 14px;
            border: 1px solid var(--border);
            background: transparent;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .history-btn-delete:hover {
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            border-color: #fecaca;
            color: #dc2626;
            box-shadow: 0 2px 8px rgba(220,38,38,0.1);
        }

        /* Empty State */
        .history-empty-state {
            text-align: center;
            padding: 80px 20px;
            animation: pageEnter 0.4s ease forwards;
        }

        .history-empty-icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(59,130,246,0.04) 100%);
            border-radius: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(37,99,235,0.06);
        }

        .history-empty-icon i {
            font-size: 48px;
            color: var(--primary);
            opacity: 0.6;
        }

        .history-empty-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .history-empty-desc {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 24px;
            line-height: 1.6;
        }

        /* Pagination */
        .history-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }

        .history-page-btn {
            padding: 8px 14px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-family: inherit;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition);
        }

        .history-page-btn:hover:not(:disabled) {
            border-color: var(--primary);
            color: var(--primary);
        }

        .history-page-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .history-page-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .history-page-info {
            font-size: 13px;
            color: var(--text-muted);
            padding: 0 12px;
        }

        /* Detail Modal */
        .history-detail-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(6px);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .history-detail-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .history-detail-panel {
            background: var(--bg-card);
            border-radius: 20px;
            width: 90vw;
            max-width: 1000px;
            max-height: 88vh;
            overflow-y: auto;
            box-shadow: 0 24px 64px rgba(0,0,0,0.15);
            transform: scale(0.92) translateY(30px);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .history-detail-overlay.show .history-detail-panel {
            transform: scale(1) translateY(0);
        }

        .history-detail-header {
            position: sticky;
            top: 0;
            background: var(--bg-card);
            padding: 22px 28px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 10;
        }

        .history-detail-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .history-detail-close {
            width: 38px;
            height: 38px;
            border: none;
            background: var(--bg-warm);
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 15px;
            transition: all 0.2s ease;
        }

        .history-detail-close:hover {
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            color: #dc2626;
        }

        .history-detail-body {
            padding: 28px;
        }

        /* Delete Confirm */
        .history-delete-confirm {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
        }

        .history-delete-confirm.show {
            opacity: 1;
            visibility: visible;
        }

        .history-delete-dialog {
            background: var(--bg-card);
            border-radius: 20px;
            width: 420px;
            max-width: 92vw;
            padding: 36px 32px;
            text-align: center;
            box-shadow: 0 24px 64px rgba(0,0,0,0.15);
            transform: scale(0.9);
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(239,68,68,0.08);
        }

        .history-delete-confirm.show .history-delete-dialog {
            transform: scale(1);
        }

        .history-delete-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(239,68,68,0.1);
        }

        .history-delete-icon i {
            font-size: 26px;
            color: #dc2626;
        }

        .history-delete-text {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 22px;
        }

        .history-delete-name {
            font-weight: 700;
            color: var(--text-primary);
        }

        .history-delete-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        /* Loading Skeleton */
        .history-skeleton {
            background: linear-gradient(90deg, var(--bg-warm) 25%, #f0f4f4 50%, var(--bg-warm) 75%);
            background-size: 200% 100%;
            animation: skeletonShimmer 1.5s ease-in-out infinite;
            border-radius: var(--radius-md);
        }

        @keyframes skeletonShimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .history-skeleton-card {
            height: 100px;
            margin-bottom: 12px;
        }

        @media (max-width: 1024px) {
            .history-stats-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            .history-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
            .history-filter-bar { padding: 14px 16px; }
            .history-record-card { flex-wrap: wrap; padding: 16px; }
            .history-record-actions { width: 100%; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
            .history-detail-panel { width: 96vw; max-height: 92vh; }
            .history-detail-body { padding: 18px; }
        }

        @media (max-width: 480px) {
            .history-stats-grid { grid-template-columns: 1fr; }
            .history-type-tabs { width: 100%; }
            .history-search-box { max-width: 100%; width: 100%; order: 3; }
        }

        .preview-thumbnails {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        .preview-thumb-item {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 2px solid var(--border);
            aspect-ratio: 1;
            background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
            transition: all 0.3s ease;
        }

        .preview-thumb-item:hover {
            border-color: var(--primary-light);
            box-shadow: 0 4px 12px rgba(37,99,235,0.15);
            transform: translateY(-2px);
        }

        .preview-thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .preview-thumb-remove {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(239,68,68,0.9);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 2;
        }

        .preview-thumb-item:hover .preview-thumb-remove {
            opacity: 1;
        }

        .preview-thumb-remove:hover {
            background: rgba(220,38,38,1);
            transform: scale(1.1);
        }

        .preview-thumb-index {
            position: absolute;
            bottom: 4px;
            left: 4px;
            background: rgba(37,99,235,0.85);
            color: white;
            font-size: 11px;
            font-weight: 600;
            padding: 1px 7px;
            border-radius: 8px;
        }

        .preview-count {
            text-align: center;
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 16px;
            font-weight: 500;
        }

        .batch-subject-section {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 28px;
            margin-bottom: 32px;
            box-shadow: var(--shadow-sm);
            border-top: none;
        }

        .batch-subject-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px 20px;
            border-radius: var(--radius-md);
            margin-bottom: 24px;
        }

        .batch-subject-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            flex-shrink: 0;
        }

        .batch-subject-info {
            flex: 1;
        }

        .batch-subject-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .batch-subject-meta {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .batch-subject-score-badge {
            padding: 8px 18px;
            border-radius: 20px;
            color: white;
            font-size: 16px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .batch-overall-summary {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 28px;
            margin-bottom: 32px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(37,99,235,0.06);
        }

        /* ========== 全局移动端自适应增强 ========== */
        @media (max-width: 768px) {
            /* 1. 表格: 变为横向滚动块,防止列挤压变形（sx-grid 网格自带滚动容器,排除） */
            .content-area table:not(.sx-grid),
            .modal table,
            .modal-content table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }
            /* 已有滚动容器的表格保持原生渲染 */
            .questions-table-wrapper table,
            .unified-report-table-wrapper table,
            .ka-detail-table-wrapper table,
            .wq-table-wrapper table {
                display: table;
                overflow: visible;
            }

            /* 2. iOS防止聚焦缩放: 输入控件字号≥16px */
            .content-area input, .content-area select, .content-area textarea,
            .modal input, .modal select, .modal textarea,
            .modal-content input, .modal-content select, .modal-content textarea {
                font-size: 16px !important;
            }

            /* 3. 弹窗自适应: 覆盖内联大宽度 */
            .modal, .modal-content {
                width: auto !important;
                min-width: 0 !important;
                max-width: 94vw !important;
            }

            /* 4. 工具栏/筛选行允许换行 */
            .content-area div[style*="display: flex"],
            .content-area div[style*="display:flex"] {
                flex-wrap: wrap;
                row-gap: 10px;
            }

            /* 5. 统计卡片网格: 4列→2列 */
            .history-stats-grid { grid-template-columns: repeat(2, 1fr); }

            /* 6. 触摸目标增大 */
            .btn-sm { min-height: 36px; padding: 8px 12px; }
            .modal-close { width: 40px; height: 40px; }

            /* 7. 页面标题缩小 */
            .page-title { font-size: 16px; }
        }

        @media (max-width: 480px) {
            .content-area { padding: 10px; }
            .modal, .modal-content { max-width: 96vw !important; }
            .modal-header { padding: 18px 16px 0; }
            .modal-body, .modal-form { padding-left: 16px !important; padding-right: 16px !important; }
            .history-stats-grid { gap: 10px; padding: 14px; }
        }

/* ==== Agent 悬浮面板 + 单词量全屏样式（原第二个 <style> 块） ==== */
/* 圆形 AI 悬浮按钮（agent-fab）已删除（20260830），入口统一走「帮我执行」胶囊按钮 */
/* Agent 遮罩：黑色半透明全屏遮罩，点遮罩关闭 */
.agent-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,0.5);display:none}
.agent-overlay.show{display:block}
/* Agent 对话面板（20260830 全屏重构：点击即铺满屏幕自适应，完整干净无需调整；桌面内容限宽居中） */
.agent-panel{position:fixed;inset:0;z-index:10002;width:100%;height:100dvh;max-width:none;max-height:none;min-height:0;
    background:#fff;border-radius:0;display:none;flex-direction:column;
    box-shadow:none;border:none;overflow:hidden}
.agent-panel.open{display:flex;animation:agentFsIn .2s ease}
@keyframes agentFsIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
.agent-panel.collapsed{inset:auto;right:18px;bottom:18px;left:auto;top:auto;height:auto;width:auto;
    border-radius:16px;border:1px solid #e8eeef;box-shadow:0 12px 40px rgba(15,23,42,.22);max-width:calc(100vw - 36px)}
.agent-panel.collapsed .agent-msgs,.agent-panel.collapsed .agent-input{display:none}
.agent-panel-head{padding:14px 20px;background:#fff;border-bottom:1px solid #f1f5f9;
    display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px rgba(15,23,42,.05)}
.agent-panel-head .t{font-size:18px;font-weight:700;color:#1D1D1F;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.agent-panel-head .t .sig-ic{width:22px;height:22px;flex-shrink:0;
    pointer-events:none;-webkit-user-drag:none;user-drag:none;user-select:none}
.agent-panel.collapsed .agent-panel-head{cursor:grab;touch-action:none}
.agent-panel-head .x{display:flex;align-items:center;gap:6px;padding:9px 20px;border:none;border-radius:24px;
    background:#f1f5f9;color:#334155;cursor:pointer;font-size:14.5px;font-weight:600;font-family:inherit;transition:all .2s}
.agent-panel-head .x:hover{background:#e2e8f0;color:#0f172a}
.agent-panel-head .x:active{transform:scale(.95)}
.agent-panel-head .mn{cursor:pointer;font-size:16px;background:#f1f5f9;color:#64748b;
    width:32px;height:32px;border-radius:50%;border:none;line-height:1;display:flex;align-items:center;justify-content:center}
.agent-panel-head .mn:hover{background:#e2e8f0;color:#0f172a}
.agent-msgs{flex:1;overflow-y:auto;padding:14px;background:#f7fafb;display:flex;flex-direction:column;gap:10px}
.agent-msgs-inner{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.agent-msg{max-width:86%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.agent-msg.user{align-self:flex-end;background:#007AFF;color:#fff;border-bottom-right-radius:4px}
.agent-msg.bot{align-self:flex-start;background:#fff;border:1px solid #e8eeef;color:#0f172a;border-bottom-left-radius:4px}
.agent-msg .agent-tbl{margin-top:8px;border:1px solid #e8eeef;border-radius:8px;overflow:auto;max-height:220px;background:#fff}
.agent-msg .agent-tbl .tt{padding:6px 10px;font-weight:600;font-size:13px;background:#f1f5f9;border-bottom:1px solid #e8eeef}
.agent-msg .agent-tbl table{width:100%;border-collapse:collapse;font-size:12.5px}
.agent-msg .agent-tbl th{background:#f8fafc;padding:5px 8px;text-align:left;color:#475569;border-bottom:1px solid #eef2f4;white-space:nowrap}
.agent-msg .agent-tbl td{padding:5px 8px;border-bottom:1px solid #f1f5f9;color:#0f172a;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.agent-note{margin-top:6px;font-size:12px;color:#86868B}
/* AI 代操作确认卡片（新增学员/新增排课：草稿展示+确认执行/取消） */
.agent-confirm-card{margin-top:8px;border:1px solid #bfdbfe;border-radius:10px;background:#f8faff;overflow:hidden}
.agent-confirm-card .cfm-title{display:flex;align-items:center;gap:6px;padding:8px 10px;font-weight:600;
    font-size:12.5px;color:#1d4ed8;background:#e0ecff}
.agent-confirm-card .cfm-row{display:flex;justify-content:space-between;gap:10px;padding:5px 10px;
    font-size:12px;border-bottom:1px dashed #e3edf7}
.agent-confirm-card .cfm-k{color:#64748b;white-space:nowrap}
.agent-confirm-card .cfm-v{color:#0f172a;font-weight:600;text-align:right;word-break:break-all}
.agent-confirm-card .cfm-tip{padding:6px 10px;font-size:11px;color:#94a3b8;line-height:1.5}
.agent-confirm-card .cfm-btns{display:flex;gap:8px;padding:8px 10px}
.agent-confirm-card .cfm-ok{flex:1;padding:8px 0;border:none;border-radius:8px;background:#2563eb;color:#fff;
    font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.agent-confirm-card .cfm-ok:hover{background:#1d4ed8}
.agent-confirm-card .cfm-ok:disabled{background:#94a3b8;cursor:not-allowed}
.agent-confirm-card .cfm-no{flex:1;padding:8px 0;border:1px solid #cbd5e1;border-radius:8px;background:#fff;
    color:#64748b;font-size:12.5px;cursor:pointer;font-family:inherit;transition:all .2s}
.agent-confirm-card .cfm-no:hover{border-color:#94a3b8;color:#475569}
.agent-confirm-card .cfm-done{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;
    font-size:12.5px;font-weight:600;color:#059669;background:#ecfdf5}
/* 批量草稿组：每条一张子卡 + 组级全部确认/全部取消 */
.agent-confirm-card .cfm-item{margin:8px 10px;border:1px solid #dbe7fb;border-radius:8px;
    background:#fff;overflow:hidden}
.agent-confirm-card .cfm-item-title{padding:6px 10px;font-size:12px;font-weight:600;
    color:#1e40af;background:#f0f6ff;border-bottom:1px dashed #e3edf7}
.agent-confirm-card .cfm-item.done{border-color:#a7f3d0}
.agent-confirm-card .cfm-item.failed{border-color:#fca5a5;background:#fef2f2}
.agent-confirm-card .cfm-item.cancelled{opacity:.65}
.agent-confirm-card .cfm-item-state{display:flex;align-items:center;gap:6px;padding:7px 10px;
    font-size:12px;font-weight:600;color:#059669;background:#ecfdf5}
.agent-confirm-card .cfm-item-state.cfm-fail{color:#dc2626;background:#fef2f2}
.agent-confirm-card .cfm-grp-btns{display:flex;gap:8px;padding:8px 10px;
    border-top:1px dashed #bfdbfe;background:#f0f6ff}
/* 大列表折叠（>12 条）：子卡默认只显示标题行，点击展开核对；
   顶部组按钮紧贴标题，一键「全部确认/全部删除」不必翻到底部 */
.agent-confirm-card .cfm-item.collapsed .cfm-row,
.agent-confirm-card .cfm-item.collapsed .cfm-edit,
.agent-confirm-card .cfm-item.collapsed .cfm-btns{display:none}
.agent-confirm-card .cfm-item.collapsed .cfm-item-state{display:flex}
.agent-confirm-card .cfm-item.collapsed .cfm-item-title{cursor:pointer;user-select:none}
.agent-confirm-card .cfm-chev{margin-right:6px;font-size:10px;color:#64748b}
.agent-confirm-card .cfm-fold-hint{float:right;font-size:10.5px;font-weight:400;color:#94a3b8}
.agent-confirm-card .cfm-fold-tip{padding:6px 12px;font-size:11.5px;color:#64748b;background:#f8fafc;
    border-bottom:1px dashed #e2e8f0}
/* 删除类敏感操作卡片：红色警示样式（danger 标记） */
.agent-confirm-card.danger{border-color:#fecaca;background:#fff8f8}
.agent-confirm-card.danger .cfm-title{color:#b91c1c;background:#fee2e2}
.agent-confirm-card.danger .cfm-item{border-color:#f5c6c6}
.agent-confirm-card.danger .cfm-item-title{color:#b91c1c;background:#fef2f2;border-bottom:1px dashed #f5c6c6}
.agent-confirm-card.danger .cfm-grp-btns{border-top:1px dashed #fecaca;background:#fef2f2}
.agent-confirm-card .cfm-ok.danger{background:#dc2626}
.agent-confirm-card .cfm-ok.danger:hover{background:#b91c1c}
/* 确认卡片「直接修改」编辑区：字段行 + 输入框 + 保存按钮（输入字号≥16px 防iOS缩放） */
.agent-confirm-card .cfm-edit{padding:6px 10px 8px;border-top:1px dashed #e3edf7;background:#fbfdff}
.agent-confirm-card .cfm-edit-t{font-size:11.5px;color:#64748b;padding:3px 0 5px}
.agent-confirm-card .cfm-erow{display:flex;align-items:center;gap:10px;padding:4px 0}
.agent-confirm-card .cfm-erow .cfm-k{font-size:12px;min-width:72px}
.agent-confirm-card .cfm-inp{flex:1;min-width:0;padding:7px 10px;font-size:16px;font-family:inherit;
    border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a}
.agent-confirm-card .cfm-inp:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.15)}
.agent-confirm-card .cfm-save{width:100%;margin-top:6px;padding:7px 0;border:1px dashed #2563eb;border-radius:8px;
    background:#fff;color:#2563eb;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.agent-confirm-card .cfm-save:hover{background:#eff6ff}
.agent-confirm-card .cfm-save:disabled{color:#94a3b8;border-color:#cbd5e1;background:#f8fafc;cursor:not-allowed}
/* 条件补充表单卡片（语义未达成时 AI 说明原因+用户填条件，提交直连工具不经AI转述） */
.agent-ask-card{margin-top:8px;border:1px solid #fde68a;border-radius:10px;background:#fffbeb;overflow:hidden}
.agent-ask-card .cfm-title{display:flex;align-items:center;gap:6px;padding:8px 10px;font-weight:600;
    font-size:12.5px;color:#b45309;background:#fef3c7}
.agent-ask-card .ask-reason{padding:8px 10px;font-size:12px;color:#92400e;line-height:1.7;
    white-space:pre-line;border-bottom:1px dashed #fde68a}
.agent-ask-card .cfm-erow{display:flex;align-items:center;gap:10px;padding:4px 10px}
.agent-ask-card .cfm-erow .cfm-k{font-size:12px;color:#64748b;min-width:72px}
.agent-ask-card .cfm-inp{flex:1;min-width:0;padding:7px 10px;font-size:16px;font-family:inherit;
    border:1px solid #d6d3d1;border-radius:8px;background:#fff;color:#0f172a}
.agent-ask-card .cfm-inp:focus{outline:none;border-color:#d97706;box-shadow:0 0 0 2px rgba(217,119,6,0.15)}
.agent-ask-card .cfm-btns{display:flex;gap:8px;padding:8px 10px}
.agent-ask-card .cfm-ok{flex:1;padding:8px 0;border:none;border-radius:8px;background:#d97706;color:#fff;
    font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.agent-ask-card .cfm-ok:hover{background:#b45309}
.agent-ask-card .cfm-ok:disabled{background:#d6d3d1;cursor:not-allowed}
.agent-ask-card .cfm-tip{padding:6px 10px;font-size:11px;color:#a16207;line-height:1.5}
.agent-ask-card.ask-submitted{opacity:.7}
.agent-export-btn{display:inline-block;margin-top:8px;margin-right:6px;padding:6px 14px;font-size:12px;border:1px solid #2563eb;
    color:#2563eb;background:#fff;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s}
.agent-export-btn:hover{background:#2563eb;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.agent-export-btn:disabled{color:#94a3b8;border-color:#cbd5e1;background:#f8fafc;cursor:not-allowed}
.agent-export-btn i{margin-right:4px}
/* 20260904 B80：表格导出分组——与底部错题文档下载卡区分 */
.agent-export-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:8px;
    padding:8px 10px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px}
.agent-export-group .aeg-lab{font-size:12px;color:#475569;margin-right:2px}
.agent-export-group .aeg-lab i{margin-right:4px;color:#2563eb}
.agent-export-group .agent-export-btn{margin-top:0}
.agent-input{display:flex;gap:10px;padding:14px;border-top:1px solid #e8eeef;background:#fff;
    width:100%;max-width:888px;margin:0 auto;box-sizing:border-box;
    padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.agent-input textarea{flex:1;resize:none;border:1.5px solid #d7e1e6;border-radius:12px;padding:12px 14px;font-size:14px;
    font-family:inherit;outline:none;height:88px;min-height:88px;max-height:200px;line-height:1.6;box-sizing:border-box;transition:border-color .2s}
.agent-input textarea:focus{border-color:#2563eb}
.agent-input button{width:76px;border-radius:12px;border:none;background:#2563eb;color:#fff;font-size:14.5px;
    cursor:pointer;font-weight:600;flex-shrink:0}
.agent-input button:disabled{background:#94a3b8;cursor:not-allowed}
.agent-typing{align-self:flex-start;background:#fff;border:1px solid #e8eeef;border-radius:12px;
    padding:10px 14px;font-size:13px;color:#64748b}
.agent-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#94a3b8;margin:0 2px;
    animation:agentBlink 1.2s infinite}
.agent-dot:nth-child(2){animation-delay:.2s}
.agent-dot:nth-child(3){animation-delay:.4s}
@keyframes agentBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* 首页底部浮动圆按钮（记一笔 + 帮我执行，全局常驻所有断点，文字输入解析，无麦克风） */
.qr-float-bar{display:flex;position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:998;gap:22px;padding:8px}
.qr-float-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;height:96px;border:none;border-radius:50%;cursor:pointer;font-family:inherit;transition:all .2s;box-shadow:0 8px 22px rgba(15,23,42,0.28);border:3px solid rgba(255,255,255,0.35)}
.qr-float-btn .ic{font-size:34px;line-height:1}
.qr-float-btn .tx{font-size:15px;font-weight:700;color:#fff;line-height:1}
.qr-float-btn.record{background:linear-gradient(135deg,#10b981,#059669)}
.qr-float-btn.manage{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.qr-float-btn:active{transform:scale(.92)}
/* ==== 图片模式按钮（20260830 新素材：胶囊设计图，统一按钮框 aspect-ratio 保证两按钮等宽等高，图案 contain 完整显示） ==== */
.qr-float-btn.img-mode{width:auto;height:64px;aspect-ratio:2.2/1;gap:0;background:none;border:none;box-shadow:none;border-radius:36px;padding:0;flex-shrink:0;flex-direction:row}
.qr-float-btn.img-mode img{width:100%;height:100%;object-fit:contain;display:block}
.qr-float-btn.img-mode:active{transform:scale(.94)}
/* 20260916 动画助手改版：去掉圆形容器，仅保留人物本体；外层不做缩放/旋转 */
.qr-float-btn.sig{position:relative;width:102px;height:123px;background:none;border:none;border-radius:0;box-shadow:none;padding:0;touch-action:none;transition:none}
.qr-float-btn.sig:active{transform:none}
.qr-float-btn.sig img{width:62%;height:62%;object-fit:contain;display:block;
    pointer-events:none;-webkit-user-drag:none;user-drag:none;user-select:none}
.qr-float-btn.sig:hover{box-shadow:none;transform:none}
/* 新版动画助手：仅替换漂浮入口外形，点击/拖动/显隐逻辑保持不变 */
.assistant-character{position:relative;display:block;width:90px;height:117px;pointer-events:none;
    filter:drop-shadow(0 0 1px rgba(255,127,165,.95)) drop-shadow(0 0 1px rgba(255,127,165,.95)) drop-shadow(0 0 8px rgba(255,127,165,.55))}
.assistant-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0}
.assistant-character.state-idle .assistant-sprite{background-image:url("../img/assistant/sprite_idle.png");background-image:url("../img/assistant/sprite_idle.webp");background-size:720px 117px;background-position:0 0;animation:assistantIdle 4s steps(7) infinite}
.assistant-character.state-tickle .assistant-sprite{background-image:url("../img/assistant/sprite_tickle.png");background-image:url("../img/assistant/sprite_tickle.webp");background-size:900px 117px;animation:assistantTickle 1s steps(9) infinite}
.assistant-character.state-dragging .assistant-sprite{background-image:url("../img/assistant/sprite_dragging.png");background-image:url("../img/assistant/sprite_dragging.webp");background-size:720px 117px;background-position:0 0;animation:assistantDragging .6s steps(7) infinite}
.assistant-character.state-happy .assistant-sprite{background-image:url("../img/assistant/sprite_happy.png");background-image:url("../img/assistant/sprite_happy.webp");background-size:720px 117px;animation:assistantHappy 1s steps(7) infinite}
.assistant-character.state-bored .assistant-sprite{background-image:url("../img/assistant/sprite_bored.png");background-image:url("../img/assistant/sprite_bored.webp");background-size:720px 117px;animation:assistantBored 3.5s steps(7) infinite}
.assistant-character.state-yawning .assistant-sprite{background-image:url("../img/assistant/sprite_yawning.png");background-image:url("../img/assistant/sprite_yawning.webp");background-size:540px 117px;animation:assistantYawning 1.5s steps(5) infinite}
.assistant-character.state-sleeping .assistant-sprite{background-image:url("../img/assistant/sprite_sleeping.png");background-image:url("../img/assistant/sprite_sleeping.webp");background-size:720px 117px;animation:assistantSleeping 4s steps(7) infinite}
/* 短提示气泡：只做提示，不拦截点击/拖动 */
.assistant-tip{position:absolute;right:calc(100% + 8px);bottom:16px;padding:6px 10px;border:1.5px solid #ff7fa5;border-radius:12px;
    background:#fff;color:#d6336c;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;pointer-events:none;
    box-shadow:0 4px 12px rgba(214,51,108,.18);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.assistant-tip.show{opacity:1;visibility:visible}
@keyframes assistantIdle{from{background-position:0 0}to{background-position:-630px 0}}
@keyframes assistantTickle{from{background-position:0 0}to{background-position:-810px 0}}
@keyframes assistantDragging{from{background-position:0 0}to{background-position:-630px 0}}
@keyframes assistantHappy{from{background-position:0 0}to{background-position:-630px 0}}
@keyframes assistantBored{from{background-position:0 0}to{background-position:-630px 0}}
@keyframes assistantYawning{from{background-position:0 0}to{background-position:-450px 0}}
@keyframes assistantSleeping{from{background-position:0 0}to{background-position:-630px 0}}
.assistant-zzz{position:absolute;right:-2px;top:-6px;font-weight:700;color:#7aa8c4;opacity:0;pointer-events:none}
.assistant-zzz span{position:absolute;opacity:0;animation:assistantFloatZ 2.8s ease-in-out infinite}
.assistant-zzz span:nth-child(1){font-size:9px;animation-delay:0s}
.assistant-zzz span:nth-child(2){font-size:12px;animation-delay:.9s}
.assistant-zzz span:nth-child(3){font-size:15px;animation-delay:1.8s}
@keyframes assistantFloatZ{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(8px,-18px) scale(1.2)}}
.assistant-character.state-sleeping .assistant-zzz{opacity:1}
@media (prefers-reduced-motion: reduce){
    .assistant-character.state-idle .assistant-sprite,
    .assistant-character.state-tickle .assistant-sprite,
    .assistant-character.state-dragging .assistant-sprite,
    .assistant-character.state-happy .assistant-sprite{animation:none;background-image:url("../img/assistant/sprite_idle.png");background-image:url("../img/assistant/sprite_idle.webp");background-size:720px 117px}
    .assistant-zzz span,.assistant-tip{animation:none}
}
@keyframes sigBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.qr-float-bar .qr-float-btn.sig{animation:none}
@media (max-width:768px){
    .qr-float-btn.img-mode{width:auto;height:52px;border-radius:30px}
    .home-btn-row .qr-float-btn.img-mode{width:auto;height:38px;border-radius:22px}
}
@media (max-width:480px){
    .qr-float-btn.img-mode{width:auto;height:44px;border-radius:26px}
    .home-btn-row .qr-float-btn.img-mode{width:auto;height:34px;border-radius:20px}
}


    /* 移动端：悬浮栏/欢迎横幅自适应 */
@media (max-width: 768px) {
    .qr-float-bar{display:flex}
    /* 欢迎横幅改紧凑布局保留文字（20260831 用户调整：不再隐藏欢迎文本） */
    .welcome-banner{padding:20px 22px;flex-direction:column;align-items:flex-start;gap:6px;border-radius:16px;margin-bottom:20px;text-align:left}
    .welcome-banner .welcome-decoration{display:none}
    .welcome-banner .welcome-greeting{font-size:19px;margin:0}
    .welcome-banner .welcome-subtitle{font-size:12px;margin:0}
}

@media (max-width: 480px) {
    .qr-float-btn{width:84px;height:84px}
    .qr-float-btn .ic{font-size:30px}
    .qr-float-btn .tx{font-size:13px}
    .welcome-banner{padding:18px 20px;gap:4px;border-radius:14px;margin-bottom:16px}
    .welcome-banner .welcome-greeting{font-size:17px}
    .dashboard-grid{grid-template-columns:1fr;gap:8px}
    .stat-card{padding:14px 12px}
    .stat-value{font-size:20px}
    .stat-label{font-size:11px}
    .quick-actions{grid-template-columns:1fr;gap:8px}
}

/* 移动端响应式优化 */
@media (max-width: 768px) {
    /* AI 弹窗：全屏自适应（与记一笔同标准），键盘由 _agentKbFit + 100dvh 处理 */
    .agent-panel-head{padding:12px 14px}
    .agent-panel-head .t{font-size:17px}
    .agent-msgs{padding:12px}
    /* 输入框加大 + 16px 字号（iOS 聚焦小于16px会强制缩放页面，产生键盘上方大片空白） */
    .agent-input{padding:12px}
    .agent-input textarea{height:60px;max-height:160px;font-size:16px;padding:13px 14px}
    .agent-input button{width:80px;font-size:15px}
    .modal{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;margin:0 16px;}
    .modal-body{max-height:calc(100vh - 200px);overflow-y:auto;}
    .student-management-header h2{font-size:18px;}
    .dashboard-stat-card h3{font-size:14px;}
    .dashboard-stat-card .value{font-size:24px;}
}

@media (max-width: 480px) {
    .modal{width:100vw!important;max-width:100vw!important;margin:0;border-radius:16px 16px 0 0;}
    .modal-body input[type="text"],.modal-body input[type="number"],.modal-body input[type="date"],.modal-body select{font-size:16px;}
    .student-management-header h2{font-size:16px;}
    .student-management-header button{padding:8px 16px;font-size:13px;}
    .dashboard-stat-card{padding:16px;}
    .dashboard-stat-card h3{font-size:13px;}
    .dashboard-stat-card .value{font-size:20px;}
    .content-area{padding:10px;}
}

/* ==== 首页驾驶舱（20260901 按设计规范重做：12列栅格/主蓝#165DFF/统一卡12px圆角+柔和阴影） ==== */
/* 规范色板：主蓝#165DFF / 底#F7F9FC / 卡#fff / 标题#1D2129 / 正文#4E5969 / 辅助#86909C / 分割#E5E6EB */
.home-dash{padding:0 0 24px;background:#F7F9FC}
/* 模块①：页面大标题「运营总盘」 */
.dash-page-title{font-size:20px;font-weight:600;color:#1D2129;margin-bottom:20px}
/* 模块②：4 个统计卡（一行 4 个等宽，高 200px，间距 24px） */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:12px;padding:24px;height:200px;position:relative;overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.06);transition:box-shadow .2s,transform .2s}
.stat-card:hover{box-shadow:0 4px 18px rgba(22,93,255,.14);transform:translateY(-2px)}
.stat-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.stat-title{font-size:16px;color:#4E5969;font-weight:500}
/* 标题右侧圆形小设置图标 */
.stat-set{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#F2F3F5;color:#86909C;
    display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all .15s}
.stat-set:hover{background:#E8F3FF;color:#165DFF}
.stat-val{font-size:40px;font-weight:700;color:#1D2129;letter-spacing:-.02em;line-height:1.15}
.stat-unit{font-size:14px;color:#86909C;font-weight:400;margin-left:6px}
/* 卡片底部简易折线趋势图 */
.stat-spark{display:block;width:100%;height:30px;margin-top:10px}
.stat-spark-holder{height:40px}
/* 卡片右下角 48px 圆形图标按钮（浅蓝底 + 主蓝图标） */
.stat-icbtn{position:absolute;right:16px;bottom:34px;width:48px;height:48px;border-radius:50%;
    background:#E8F3FF;display:flex;align-items:center;justify-content:center}
.stat-icbtn i{font-size:20px;color:#165DFF}
/* 模块③：第二行两栏（课程分排 55% + 待办 45%，20260901 布局批 P0/P1：
   改 flex 比例分配，日历卡最大宽度 58% 防 2K+ 大屏无限拉伸，多余空间给待办） */
.dash-main{display:flex;gap:24px;align-items:stretch;min-width:0}
.dash-col{display:flex;flex-direction:column;min-width:0}
.cal-col{flex:55;max-width:58%}
.todo-col{flex:45}
.dash-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
/* P3：统一最小高度 + flex:1 随列拉伸，保证两卡底部对齐 */
.cal-card{flex:1;min-height:520px;overflow-y:auto}
.todo-card{flex:1;min-height:520px;overflow-y:auto}
.dash-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dash-card-title{font-size:16px;font-weight:500;color:#1D2129}
.dash-card-arrow{color:#86909C;font-size:13px}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:28px;height:28px;border:1px solid #E5E6EB;background:#fff;border-radius:8px;
    color:#4E5969;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.cal-nav button:hover{border-color:#165DFF;color:#165DFF;background:#E8F3FF}
.cal-head{margin-bottom:8px}
.cal-title{font-size:14px;font-weight:600;color:#4E5969}
/* 日历网格：格子 48*48 */
.cal-grid{display:grid;grid-template-columns:repeat(7,48px);gap:4px;justify-content:center}
.cal-wk{text-align:center;font-size:12px;color:#86909C;padding:6px 0;font-weight:500}
.cal-cell{width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    font-size:14px;color:#4E5969;border-radius:8px;cursor:pointer;transition:all .12s;position:relative}
.cal-cell.blank{cursor:default}
.cal-cell:hover:not(.blank){outline:2px solid rgba(22,93,255,.45)}
.cal-cell.today{font-weight:700}
.cal-cell.today::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
    width:4px;height:4px;border-radius:50%;background:#165DFF}
/* 有课的日期淡蓝色，课越多颜色越深（1-2 浅 / 3-8 中 / 9+ 深） */
.cal-cell.lv1{background:#E8F3FF;color:#165DFF}
.cal-cell.lv2{background:rgba(22,93,255,.45);color:#fff}
.cal-cell.lv3{background:#165DFF;color:#fff;font-weight:700}
.cal-cell.lv2.today::after,.cal-cell.lv3.today::after{background:#fff}
/* 选中日期：高亮蓝色背景白字（规范） */
.cal-cell.sel{background:#165DFF !important;color:#fff !important;font-weight:700}
.day-title{font-size:14px;font-weight:600;color:#1D2129;display:flex;align-items:center;gap:7px}
.day-title i{color:#165DFF;font-size:13px}
/* 课表面板（日历卡内嵌，点击日期才显示） */
.day-box{margin-top:12px}
.day-box:not(:empty){border-top:1px solid #E5E6EB;padding-top:12px}
.day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.day-close{width:24px;height:24px;border:none;background:#F2F3F5;border-radius:6px;color:#86909C;
    cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.day-close:hover{background:rgba(240,20,60,.10);color:#F0143C}
/* 绑定引导卡（未绑定青云账号：数据必须来自绑定账号身份） */
.dash-bind{text-align:center;padding:80px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.dash-bind > i{font-size:40px;color:#165DFF;margin-bottom:16px;display:block}
.dash-bind h3{font-size:18px;font-weight:600;color:#1D2129;margin:0 0 8px}
.dash-bind p{font-size:14px;color:#86909C;margin:0 0 20px}
.dash-bind .bind-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border:none;
    border-radius:8px;background:#165DFF;color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;
    font-family:inherit;transition:all .2s;box-shadow:0 4px 14px rgba(22,93,255,.30)}
.dash-bind .bind-btn:hover{background:#0E42D2;transform:translateY(-1px)}
.day-empty{font-size:13px;color:#86909C;padding:14px 0;text-align:center}
.day-list{display:flex;flex-direction:column}
/* P5：课表行可点击（课次详情弹窗）+ hover 平滑过渡 */
.day-row{display:flex;align-items:center;gap:12px;height:40px;padding:0 4px;border-bottom:1px solid #E5E6EB;
    font-size:13px;cursor:pointer;border-radius:6px;transition:background .18s}
.day-row:hover{background:#F7F9FC}
.day-row:last-child{border-bottom:none}
.day-time{flex-shrink:0;color:#165DFF;font-weight:600;font-size:12.5px;min-width:86px}
.day-main{flex:1;min-width:0;color:#1D2129;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-meta{flex-shrink:0;color:#86909C;font-size:12px}
/* 待办任务：行高 44px（复选框/状态图标/名称/时间/状态标签） */
.todo-list{display:flex;flex-direction:column}
.todo-row{border-bottom:1px solid #E5E6EB;cursor:pointer}
.todo-row:last-child{border-bottom:none}
.todo-head{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 2px;
    border-radius:6px;transition:background .18s}
.todo-row:hover .todo-head{background:#F7F9FC}
.todo-check,.ti-check{color:#C9CDD4;font-size:15px;width:18px;text-align:center;flex-shrink:0}
.todo-ic{color:#165DFF;font-size:15px;width:18px;text-align:center;flex-shrink:0}
.todo-title{font-size:14px;font-weight:600;color:#1D2129}
.todo-tag{font-size:12px;font-weight:500;border-radius:4px;padding:1px 8px;flex-shrink:0}
.todo-tag.red{background:#FDE7E9;color:#F53F3F}
.todo-tag.orange{background:#FFF3E0;color:#F77234}
.todo-tag.blue{background:#E8F3FF;color:#165DFF}
.todo-badge{background:#E8F3FF;color:#165DFF;font-size:12px;font-weight:600;
    border-radius:999px;padding:1px 9px;flex-shrink:0}
.todo-badge.red{background:#FDE7E9;color:#F53F3F}
.todo-sub{font-size:12px;color:#86909C;margin-left:auto}
.todo-arrow{color:#86909C;font-size:11px;transition:transform .2s;flex-shrink:0}
.todo-row .todo-detail{display:none}
.todo-row .todo-detail.open{display:block}
.todo-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 8px;font-size:13px;border-top:1px solid #F2F3F5}
.ti-dot{color:#86909C;font-size:13px;width:16px;text-align:center;flex-shrink:0}
.ti-name{color:#1D2129;font-weight:600;min-width:60px}
.ti-course{color:#4E5969;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-extra{color:#86909C;flex-shrink:0;font-size:12px}
/* 20260903 校区标注批：待办明细所属校区小徽标（灰色胶囊，超长省略） */
.ti-campus{flex-shrink:0;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:11px;color:#4E5969;background:#F2F3F5;border-radius:9px;padding:2px 8px}
/* 20260916 B138 待办分页：详情条目每页 8 条，翻页条（>1 页时出现） */
.todo-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0 10px;border-top:1px solid #F2F3F5}
.todo-pg-btn{width:26px;height:26px;border:1px solid #E5E6EB;border-radius:6px;background:#fff;color:#4E5969;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .18s}
.todo-pg-btn:hover:not(:disabled){border-color:#165DFF;color:#165DFF}
.todo-pg-btn:disabled{opacity:.35;cursor:default}
.todo-pg-info{font-size:12px;color:#86909C;min-width:40px;text-align:center}
/* 20260916 B150 数量感知：详情顶部汇总行（共 N 条 · 第 x/y 页），浅底醒目 */
.todo-total{margin:6px 0 2px;padding:5px 10px;font-size:12px;font-weight:600;color:#165DFF;background:#F7F9FC;border-radius:6px}
/* 模块④：快捷操作栏（20260901 布局批 P2：由右侧 fixed 悬浮改为待办卡内横排，
   待办列表下方加分隔线，不再挤占页面横向空间；按钮元素/事件委托不变） */
.dash-quick-float{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
    margin-top:14px;padding-top:14px;border-top:1px solid #E5E6EB}
.dash-quick-float .qf-btn{flex:1;min-width:96px;height:38px;font-size:13px}
.qf-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:8px;
    border:1px solid #E5E6EB;background:#fff;color:#4E5969;font-size:14px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.qf-btn i{color:#165DFF;font-size:15px}
.qf-btn:hover{border-color:rgba(22,93,255,.45);color:#165DFF;transform:translateY(-1px);box-shadow:0 4px 14px rgba(22,93,255,.14)}
.qf-btn.primary{background:#165DFF;border-color:#165DFF;color:#fff}
.qf-btn.primary i{color:#fff}
.qf-btn.primary:hover{background:#0E42D2;color:#fff;box-shadow:0 4px 14px rgba(22,93,255,.32)}
/* 兼容旧 quick-btn（AI 入口等处可能引用） */
.quick-list{display:flex;flex-direction:column;gap:10px}
.quick-btn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;
    border:1px solid #E5E6EB;background:#fff;color:#4E5969;font-size:14px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .2s;text-align:left}
.quick-btn i{color:#165DFF;font-size:15px;width:18px;text-align:center}
.quick-btn:hover{border-color:rgba(22,93,255,.45);color:#165DFF}
.quick-btn.primary{background:#165DFF;border-color:#165DFF;color:#fff}
.quick-btn.primary i{color:#fff}
/* ==== 20260901 首页快捷栏弹窗（不跳转：填必要条件 → draft_ 工具直连执行） ==== */
.qk-overlay{position:fixed;inset:0;z-index:10050;background:rgba(29,33,41,.45);
    display:flex;align-items:center;justify-content:center;padding:20px;animation:qkFade .18s ease}
@keyframes qkFade{from{opacity:0}to{opacity:1}}
.qk-modal{width:520px;max-width:100%;max-height:calc(100vh - 48px);background:#fff;border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;
    animation:qkPop .22s cubic-bezier(.34,1.4,.64,1)}
@keyframes qkPop{from{transform:scale(.94) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.qk-head{display:flex;align-items:center;gap:11px;padding:16px 24px;border-bottom:1px solid #E5E6EB;flex-shrink:0}
.qk-head > i{width:34px;height:34px;border-radius:8px;background:#E8F3FF;color:#165DFF;font-size:15px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qk-head > span{font-size:16.5px;font-weight:600;color:#1D2129}
.qk-close{margin-left:auto;width:30px;height:30px;border:none;border-radius:8px;background:#F2F3F5;
    color:#86909C;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;
    transition:all .15s;flex-shrink:0}
.qk-close:hover{background:#FDE7E9;color:#F53F3F}
.qk-body{padding:20px 24px 24px;overflow-y:auto}
.qk-desc{font-size:12.5px;color:#86909C;line-height:1.6;margin-bottom:16px;background:#F7F8FA;
    border-radius:8px;padding:8px 12px}
.qk-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.qk-row label{flex-shrink:0;width:112px;text-align:right;font-size:13.5px;color:#4E5969}
.qk-row label b{color:#F53F3F;margin-left:2px}
.qk-row input,.qk-row select{flex:1;min-width:0;height:38px;padding:0 12px;font-size:14px;font-family:inherit;
    color:#1D2129;background:#fff;border:1px solid #E5E6EB;border-radius:8px;transition:all .15s}
.qk-row input:focus,.qk-row select:focus{outline:none;border-color:#165DFF;box-shadow:0 0 0 2px rgba(22,93,255,.12)}
.qk-btns{display:flex;gap:10px;margin-top:18px}
.qk-ok{flex:1;height:40px;border:none;border-radius:8px;background:#165DFF;color:#fff;font-size:14px;
    font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;display:flex;align-items:center;
    justify-content:center;gap:7px}
.qk-ok:hover{background:#0E42D2}
.qk-ok:disabled{background:#94ADFF;cursor:not-allowed}
.qk-tip{margin-top:12px;font-size:11.5px;color:#86909C;line-height:1.6;text-align:center}
.qk-err{margin-bottom:12px;padding:9px 12px;border-radius:8px;background:#FDE7E9;color:#F53F3F;
    font-size:12.5px;line-height:1.6}
.qk-success{padding:14px;border-radius:8px;background:#E8FFEA;color:#00A854;font-size:13.5px;
    font-weight:600;line-height:1.7}
.qk-success i{margin-right:6px}
/* 查询结果（学员卡片） */
.qk-res{margin-top:16px}
.qk-res-head{font-size:13px;font-weight:600;color:#1D2129;margin-bottom:10px}
.qk-empty{padding:26px 0;text-align:center;font-size:13px;color:#86909C}
.qk-stu-card{border:1px solid #E5E6EB;border-radius:10px;padding:12px 14px;margin-bottom:10px;
    transition:border-color .15s}
.qk-stu-card:hover{border-color:rgba(22,93,255,.45)}
.qk-stu-name{font-size:14px;font-weight:600;color:#1D2129;display:flex;align-items:center;gap:8px}
.qk-stu-grade{font-size:11.5px;font-weight:500;color:#165DFF;background:#E8F3FF;border-radius:4px;padding:1px 7px}
.qk-stu-meta{font-size:12.5px;color:#86909C;margin:4px 0 8px}
.qk-stu-courses{display:flex;flex-wrap:wrap;gap:6px}
.qk-course{font-size:12px;color:#4E5969;background:#F2F3F5;border-radius:4px;padding:2px 8px}
.qk-course.neg{color:#F53F3F;background:#FDE7E9;font-weight:600}
/* ask 补充表单（多命中选择/缺条件补填） */
.qk-ask{margin-top:16px;border:1px solid #FEF0C7;background:#FFFBEB;border-radius:10px;padding:14px}
.qk-ask-title{font-size:13.5px;font-weight:600;color:#B45309;display:flex;align-items:center;gap:7px;margin-bottom:4px}
.qk-ask-reason{font-size:12px;color:#92400E;line-height:1.7;margin-bottom:12px;white-space:pre-line}
.qk-ask .qk-row{margin-bottom:10px}
.qk-ask .qk-btns{margin-top:14px}
/* 确认卡（draft 草稿核对后执行） */
.qk-cfm{margin-top:16px;border:1px solid #B8D4FF;border-radius:10px;overflow:hidden}
.qk-cfm-title{display:flex;align-items:center;gap:7px;padding:10px 14px;font-size:13.5px;font-weight:600;
    color:#0E42D2;background:#E8F3FF;border-bottom:1px solid #D6E8FF}
.qk-cfm-item{border-bottom:1px solid #E5E6EB;padding:10px 14px}
.qk-cfm-item:last-of-type{border-bottom:none}
.qk-cfm-item-title{font-size:12.5px;font-weight:600;color:#1D2129;margin-bottom:6px}
.qk-cfm-row{display:flex;justify-content:space-between;gap:14px;padding:3px 0;font-size:12.5px}
.qk-cfm-row .k{color:#86909C;flex-shrink:0}
.qk-cfm-row .v{color:#1D2129;font-weight:500;text-align:right;word-break:break-all}
.qk-cfm .qk-btns{padding:12px 14px 4px;margin-top:0}
.qk-cfm .qk-tip{padding:0 14px 12px;margin-top:8px}
.qk-cfm-ok{flex:1;height:40px;border:none;border-radius:8px;background:#165DFF;color:#fff;font-size:14px;
    font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;display:flex;align-items:center;
    justify-content:center;gap:7px}
.qk-cfm-ok:hover{background:#0E42D2}
.qk-cfm-ok:disabled{background:#94ADFF;cursor:not-allowed}
/* ==================== 20260901 快捷表单远程下拉（模糊搜索+选项回填） ==================== */
.qk-combo{position:relative}
.qk-combo-box{position:relative;flex:1;min-width:0}
.qk-combo-box input{width:100%}
.qk-combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10060;max-height:240px;
    overflow-y:auto;background:#fff;border:1px solid #E5E6EB;border-radius:10px;
    box-shadow:0 8px 24px rgba(29,33,41,.14);padding:4px}
.qk-combo-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 10px;border-radius:7px;cursor:pointer;transition:background .12s}
.qk-combo-opt:hover{background:#F2F7FF}
.qk-combo-label{font-size:13.5px;color:#1D2129;font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-combo-sub{font-size:11.5px;color:#86909C;flex-shrink:0;max-width:55%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-combo-empty{padding:14px 0;text-align:center;font-size:12.5px;color:#86909C}
/* 报课应收提示（选课程+填课时数后实时算） */
.qk-price-hint{margin:-4px 0 11px 124px;padding:7px 12px;border-radius:8px;
    background:#E8F3FF;color:#0E42D2;font-size:12.5px;line-height:1.6}
@media (max-width:560px){
    .qk-price-hint{margin-left:0}
}
/* ==================== 20260901 统计卡时间范围设置弹窗 ==================== */
.st-modal{width:460px}
.st-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.st-pre-btn{padding:8px 16px;border-radius:8px;border:1px solid #E5E6EB;background:#fff;
    color:#4E5969;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
    transition:all .15s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.st-pre-btn:hover{border-color:#165DFF;color:#165DFF}
.st-pre-btn.on{background:linear-gradient(135deg,#165DFF,#0E42D2);border-color:transparent;
    color:#fff;box-shadow:0 4px 10px rgba(22,93,255,.28)}
.st-dates .st-sep{color:#86909C;font-size:13px;flex-shrink:0}
.st-dates input{flex:1;min-width:0}
.st-cur{margin:6px 0 0 124px;font-size:12px;color:#86909C}
@media (max-width:560px){
    .st-cur{margin-left:0}
}
.st-reset{height:40px;padding:0 18px;border-radius:8px;border:1px solid #E5E6EB;background:#fff;
    color:#4E5969;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
    transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}
.st-reset:hover{border-color:#F53F3F;color:#F53F3F}
/* ==================== 20260901 二期 统计卡分类多选 ==================== */
.st-cats{margin-bottom:14px}
.st-cats>label{display:block;font-size:13px;color:#4E5969;font-weight:600;margin-bottom:8px}
.st-cats .st-cat-row{margin-bottom:0}
.st-cat-all{border-style:dashed!important;background:#F7F9FC!important;color:#86909C!important}
.st-cat-all:hover{border-color:#165DFF!important;color:#165DFF!important}
/* 统计卡自定义区间角标（标题右侧的日期区间小字） */
.stat-sub{margin-left:auto;margin-right:8px;font-size:11.5px;color:#86909C;
    font-weight:400;flex-shrink:0}
/* ==================== 20260902 统计卡构成明细弹窗（各校区→明细清单） ==================== */
.brk-modal{width:min(680px,94vw)}
.brk-total{font-size:13px;color:#4E5969;margin-bottom:14px}
.brk-total b{color:#0E42D2;font-size:16px;margin:0 2px}
.brk-item{border:1px solid #E5E6EB;border-radius:10px;margin-bottom:10px;overflow:hidden;
    background:#fff;transition:border-color .15s,box-shadow .15s}
.brk-item:hover{border-color:#B8D4FF;box-shadow:0 2px 10px rgba(22,93,255,.08)}
.brk-item-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.brk-campus{font-size:14px;font-weight:600;color:#1D2129;display:flex;align-items:center;gap:8px;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brk-campus i{color:#165DFF;font-size:13px;flex-shrink:0}
.brk-val{margin-left:auto;font-size:15px;font-weight:700;color:#0E42D2;flex-shrink:0}
.brk-val small{font-size:11px;color:#86909C;font-weight:400;margin-left:2px}
.brk-share{font-size:12px;color:#86909C;flex-shrink:0;min-width:36px;text-align:right}
.brk-arrow{font-size:11px;color:#86909C;flex-shrink:0;transition:transform .18s}
.brk-item.open .brk-arrow{transform:rotate(180deg)}
.brk-bar{height:4px;background:#F2F3F5;margin:0 14px 12px;border-radius:2px;overflow:hidden}
.brk-bar span{display:block;height:100%;background:linear-gradient(90deg,#165DFF,#0E42D2);
    border-radius:2px;transition:width .3s}
.brk-detail{display:none;border-top:1px dashed #E5E6EB;background:#F7F9FC}
.brk-item.open .brk-detail{display:block}
.brk-rows{max-height:300px;overflow-y:auto;padding:4px 14px 8px}
.brk-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #EEF0F4;
    font-size:12.5px}
.brk-row:last-child{border-bottom:none}
.brk-c1{color:#86909C;flex-shrink:0;min-width:118px}
.brk-c2{color:#1D2129;font-weight:500;flex:1;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.brk-c3{color:#4E5969;flex-shrink:0;max-width:180px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.brk-c4{color:#0E42D2;font-weight:700;flex-shrink:0;text-align:right}
.brk-empty{padding:26px 0;text-align:center;font-size:13px;color:#86909C}
.brk-cap{padding:6px 0 8px;text-align:center;font-size:11.5px;color:#C9CDD4}
/* ==================== 20260902 课表行校区徽标 ==================== */
.day-camp{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:10px;
    background:#E8F3FF;color:#0E42D2;font-size:11px;font-weight:600;vertical-align:middle}
/* ==================== 20260901 测评页 tab 按钮（此前样式缺失导致按钮"裸奔"） ==================== */
.assess-tabs{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.assess-tab{display:inline-flex;align-items:center;gap:9px;padding:11px 26px;border-radius:10px;
    border:1px solid #E5E6EB;background:#fff;color:#4E5969;font-size:15px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.assess-tab i{font-size:15px}
.assess-tab:hover{border-color:#165DFF;color:#165DFF;transform:translateY(-1px)}
.assess-tab.active{background:linear-gradient(135deg,#165DFF,#0F3470);border-color:transparent;
    color:#fff;box-shadow:0 6px 16px rgba(22,93,255,.3)}
/* ==================== 20260901(第二批) 弹窗内嵌青云页面（报课/退费/排课） ==================== */
.qye-overlay{position:fixed;inset:0;z-index:10070;background:rgba(15,25,45,.55);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;padding:24px}
.qye-modal{width:min(1280px,96vw);height:min(860px,92vh);background:#fff;border-radius:14px;
    box-shadow:0 24px 64px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.qye-head{display:flex;align-items:center;gap:10px;padding:13px 18px;background:#0F3470;color:#fff;flex-shrink:0}
.qye-head i{font-size:15px;opacity:.85}
.qye-head span{font-size:14.5px;font-weight:600;letter-spacing:.5px}
.qye-head-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.qye-warn{font-size:12px;color:#FFD591;display:flex;align-items:center;gap:6px}
.qye-warn i{font-size:12px}
.qye-newwin,.qye-close{width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.16);
    color:#fff;font-size:13px;cursor:pointer;transition:background .15s;display:flex;
    align-items:center;justify-content:center}
.qye-newwin:hover{background:rgba(255,255,255,.3)}
.qye-close:hover{background:#E5484D}
.qye-frame{flex:1;width:100%;border:none;background:#F5F7FA}
@media (max-width:560px){
    .qye-overlay{padding:8px}
    .qye-warn{display:none}
}
/* ==================== 20260901(第二批) 学员档案 360° 视图 ==================== */
.qk-stu-profile{margin-top:10px;height:34px;padding:0 16px;border-radius:8px;
    border:1px solid #B8D4FF;background:#E8F3FF;color:#0E42D2;font-size:13px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .18s;display:inline-flex;
    align-items:center;justify-content:center;gap:7px}
.qk-stu-profile:hover{background:#165DFF;border-color:#165DFF;color:#fff}
.sp-modal{width:min(1080px,94vw)}
.sp-loading{padding:60px 0;text-align:center;font-size:14px;color:#86909C}
.sp-loading i{margin-right:8px}
.sp-grid{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.sp-card{border:1px solid #E5E6EB;border-radius:12px;padding:16px;margin-bottom:16px;
    background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.sp-left .sp-card{position:sticky;top:0;background:linear-gradient(180deg,#F7F9FC,#fff)}
.sp-name{font-size:18px;font-weight:700;color:#1D2129;display:flex;align-items:center;gap:9px;
    margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #E5E6EB}
.sp-grade{font-size:11.5px;font-weight:500;color:#165DFF;background:#E8F3FF;border-radius:4px;padding:2px 8px}
.sp-info-row{display:flex;gap:10px;padding:6px 0;font-size:13px;line-height:1.5}
.sp-info-k{color:#86909C;flex-shrink:0;width:64px}
.sp-info-v{color:#1D2129;font-weight:500;word-break:break-all}
.sp-sec-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#1D2129;
    margin-bottom:12px}
.sp-sec-title i{color:#165DFF;font-size:14px}
.sp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.sp-table th{text-align:left;font-weight:600;color:#86909C;background:#F7F9FC;padding:8px 10px;
    border-bottom:1px solid #E5E6EB;white-space:nowrap}
.sp-table td{padding:8px 10px;border-bottom:1px solid #F2F3F5;color:#1D2129;vertical-align:top}
.sp-table tr:last-child td{border-bottom:none}
.sp-neg{color:#F53F3F;font-weight:600}
.sp-cmt{max-width:220px;white-space:pre-line;color:#4E5969}
.sp-empty{padding:22px 0;text-align:center;font-size:12.5px;color:#C9CDD4}
/* 20260905(第九十三批)：档案区块分页条（超10条分页，翻页局部刷新） */
.sp-pager{display:flex;align-items:center;justify-content:center;gap:10px;
    padding:9px 0 2px;border-top:1px dashed #F2F3F5;margin-top:4px}
.sp-pg-btn{padding:3px 12px;border:1px solid #E5E6EB;border-radius:6px;
    background:#fff;cursor:pointer;font-size:12px;color:#165DFF;
    white-space:nowrap;transition:background .15s}
.sp-pg-btn:hover:not([disabled]){background:#F0F5FF}
.sp-pg-btn[disabled]{opacity:.45;cursor:not-allowed}
.sp-pg-info{font-size:12px;color:#86909C;white-space:nowrap}
/* 可点击名字（20260901 第三批：学员/班级/课程名 → 详情小弹窗，不跳转） */
.lnk{color:#165DFF;cursor:pointer;border-bottom:1px dashed rgba(22,93,255,.4);
    transition:color .15s,border-color .15s}
.lnk:hover{color:#0E42D2;border-bottom-color:#0E42D2}
.sp-item{border:1px solid #F2F3F5;border-radius:9px;padding:11px 13px;margin-bottom:9px;background:#FAFBFC}
.sp-item-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;margin-bottom:5px}
.sp-item-h b{color:#1D2129}
.sp-item-h span{color:#86909C}
.sp-score{color:#D46B08;font-weight:600}
.sp-item-b{font-size:12.5px;color:#4E5969;line-height:1.7;white-space:pre-line}
.sp-wrong-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.sp-wrong-item{border:1px solid #E5E6EB;border-radius:9px;padding:11px 12px;background:#FAFBFC}
.sp-wrong-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:7px}
.sp-wrong-top span{color:#4E5969;font-weight:600}
.sp-wrong-top b{color:#F53F3F}
.sp-wrong-bar{height:6px;border-radius:3px;background:#E5E6EB;overflow:hidden}
.sp-wrong-bar i{display:block;height:100%;border-radius:3px;
    background:linear-gradient(90deg,#FF7D00,#F53F3F)}
.sp-wrong-last{font-size:11px;color:#C9CDD4;margin-top:6px}
.sp-wrong-total{margin-top:12px;font-size:12.5px;color:#86909C;text-align:right}
@media (max-width:760px){
    .sp-grid{grid-template-columns:1fr}
    .sp-left .sp-card{position:static}
}
@media (max-width:560px){
    .qk-overlay{padding:12px}
    .qk-row{flex-direction:column;align-items:stretch;gap:6px;margin-bottom:10px}
    .qk-row label{width:auto;text-align:left}
    .qk-modal{max-height:calc(100vh - 24px)}
}
.dash-err{text-align:center;padding:70px 20px;color:#4E5969;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.dash-err i{font-size:34px;color:#C9CDD4;margin-bottom:12px}
.dash-err p{margin:4px 0;font-size:14px}
.dash-err .sub{color:#86909C;font-size:12.5px}
@media (max-width:1100px){
    /* P4：窄屏上下堆叠（课程分排在上、待办在下），日历解除限宽 */
    .dash-main{flex-direction:column}
    .cal-col{max-width:100%}
    .cal-card,.todo-card{min-height:0}
}
@media (max-width:820px){
    .dash-stats{grid-template-columns:repeat(2,1fr)}
    .stat-card{height:auto;padding:18px}
    .stat-val{font-size:28px}
    .cal-grid{grid-template-columns:repeat(7,1fr)}
    .cal-cell{width:auto}
}
@media (max-width:480px){
    .dash-stats{gap:12px}
    .stat-card{padding:14px 16px}
    .stat-val{font-size:24px}
    .stat-icbtn{display:none}
    .day-time{min-width:74px;font-size:11.5px}
    .day-meta{display:none}
    .todo-sub{display:none}
    /* 手机端快捷按钮保留文字描述（图标+文字，约 2 个一行换行铺满） */
    .dash-quick-float .qf-btn{min-width:0;flex:1 1 46%;height:42px;font-size:12.5px}
}

/* 单词测评全屏界面 */
.wa-fullscreen{position:fixed;inset:0;z-index:10000;background:#f8fafc;display:none;flex-direction:column;}
.wa-fullscreen.open{display:flex;}
.wa-fs-head{display:flex;align-items:center;gap:16px;padding:14px 24px;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.wa-fs-head .t{font-size:18px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:8px;}
.wa-fs-head .meta{font-size:13px;color:#64748b;}
.wa-fs-close{margin-left:auto;width:40px;height:40px;border:none;border-radius:50%;background:#f1f5f9;color:#475569;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.wa-fs-close:hover{background:#fee2e2;color:#dc2626;}
.wa-fs-body{flex:1;overflow-y:auto;padding:24px;}
.wa-word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;max-width:1100px;margin:0 auto;}
.wa-word-card{border:1px solid #e2e8f0;border-radius:14px;padding:18px 14px;text-align:center;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,0.05);}
.wa-word-card .w{font-size:19px;font-weight:700;color:#0f172a;margin-bottom:14px;letter-spacing:0.5px;}
.wa-word-card .btns{display:flex;gap:8px;}
.wa-word-card .btns button{flex:1;padding:9px 6px;border-radius:8px;border:1px solid #e2e8f0;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .15s;}
.wa-know-btn{background:#fff;color:#2e7d32;border-color:#c8e6c9!important;}
.wa-know-btn.on{background:#2e7d32!important;color:#fff!important;border-color:#2e7d32!important;}
.wa-unknown-btn{background:#fff;color:#757575;border-color:#e0e0e0!important;}
.wa-unknown-btn.on{background:#9e9e9e!important;color:#fff!important;border-color:#9e9e9e!important;}
.wa-fs-footer{padding:16px 24px;background:#fff;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;box-shadow:0 -2px 8px rgba(0,0,0,0.05);}
.wa-fs-footer .hint{font-size:13px;color:#64748b;}
/* ==== 20260901 单词测评四选一（ABCD，英译汉/汉译英混合） ==== */
.wa-quiz-progress{max-width:760px;margin:0 auto 18px;}
.wa-quiz-progress-bar{height:8px;border-radius:4px;background:#E5E6EB;overflow:hidden;}
.wa-quiz-progress-fill{height:100%;border-radius:4px;background:#165DFF;transition:width .25s;}
.wa-quiz-progress-txt{margin-top:8px;font-size:13px;color:#86909C;text-align:center;}
.wa-quiz-progress-txt b{color:#165DFF;}
.wa-quiz-card{max-width:760px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:28px 24px;text-align:center;}
.wa-quiz-dir{display:inline-block;padding:4px 12px;border-radius:999px;background:#E8F3FF;color:#165DFF;font-size:12.5px;font-weight:600;margin-bottom:16px;}
.wa-quiz-prompt{font-size:34px;font-weight:700;color:#1D2129;letter-spacing:.5px;margin-bottom:24px;word-break:break-word;}
.wa-quiz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.wa-opt-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1.5px solid #E5E6EB;border-radius:8px;cursor:pointer;font-size:15px;color:#4E5969;transition:all .15s;text-align:left;}
.wa-opt-btn:hover{border-color:rgba(22,93,255,.45);color:#165DFF;box-shadow:0 2px 12px rgba(22,93,255,.10);}
.wa-opt-label{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#F2F3F5;color:#4E5969;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.wa-opt-btn.picked{border-color:#165DFF;background:#F0F6FF;color:#165DFF;}
.wa-opt-btn.picked .wa-opt-label{background:#165DFF;color:#fff;}
.wa-opt-text{flex:1;word-break:break-word;line-height:1.45;}
.wa-quiz-nav{max-width:760px;margin:18px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.wa-quiz-prev,.wa-quiz-next{height:40px;padding:0 18px;border:1.5px solid #E5E6EB;border-radius:8px;background:#fff;color:#4E5969;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;}
.wa-quiz-prev:hover:not(:disabled),.wa-quiz-next:hover:not(:disabled){border-color:#165DFF;color:#165DFF;}
.wa-quiz-prev:disabled,.wa-quiz-next:disabled{opacity:.4;cursor:not-allowed;}
.wa-quiz-jump{flex:1;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;}
.wa-jump-dot{width:11px;height:11px;border-radius:50%;background:#E5E6EB;cursor:pointer;transition:all .15s;}
.wa-jump-dot:hover{background:#86909C;}
.wa-jump-dot.done{background:#165DFF;}
.wa-jump-dot.cur{outline:2px solid rgba(22,93,255,.45);outline-offset:2px;background:#165DFF;}
@media (max-width:640px){
    .wa-quiz-opts{grid-template-columns:1fr;}
    .wa-quiz-prompt{font-size:26px;}
    .wa-quiz-card{padding:20px 16px;}
}

/* ==== 首页美化补丁（20260831 用户调整）：移动端顶栏布局优化，仅样式不影响功能 ==== */
@media (max-width: 768px) {
    /* 顶栏标题不换行，超出省略 */
    .topbar-left { min-width: 0; flex-shrink: 1; overflow: hidden; }
    .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* 校区选择器限宽，避免挤压 */
    .campus-switcher select { max-width: 110px !important; padding: 6px 8px !important; font-size: 12px !important; }
    /* 退出按钮移动端纯图标化 */
    .logout-btn { font-size: 0; gap: 0; padding: 8px 10px; flex-shrink: 0; }
    .logout-btn i { font-size: 14px; }
}

/* ==================== 20260901 动效优化批（P0 日历 + P1 全站微交互 + P2 加载反馈） ====================
 * 原则：纯视觉层增强，不改布局与业务逻辑；prefers-reduced-motion 用户自动降级 */

/* ---------- P0 日历组件 ---------- */
/* 格子统一过渡：hover/选中/课量色阶变化全部平滑（曲线按用户要求 cubic-bezier(.25,.8,.25,1)） */
.cal-cell{transition:background-color .24s cubic-bezier(.25,.8,.25,1),color .24s cubic-bezier(.25,.8,.25,1),
    box-shadow .24s cubic-bezier(.25,.8,.25,1),transform .24s cubic-bezier(.25,.8,.25,1),
    outline-color .24s cubic-bezier(.25,.8,.25,1);outline:2px solid transparent;outline-offset:-2px}
/* hover：底色平滑 + 轻微上浮 + 微弱阴影 */
.cal-cell:hover:not(.blank){outline-color:rgba(22,93,255,.45);transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(22,93,255,.16);z-index:2}
/* 选中：渐变底 + 外光晕（禁止色块瞬间跳变） */
.cal-cell.sel{background:linear-gradient(135deg,#165DFF 0%,#0E42D2 100%) !important;
    box-shadow:0 0 0 3px rgba(22,93,255,.26),0 4px 12px rgba(22,93,255,.22) !important}
/* 今日标记圆点：淡入弹出 */
.cal-cell.today::after{animation:calDotIn .45s cubic-bezier(.25,.8,.25,1) both}
/* 周末（渲染时标记 weekend 类）：渐变底色替代纯色硬色块 */
.cal-cell.weekend:not(.lv1):not(.lv2):not(.lv3):not(.sel){background:linear-gradient(135deg,#F7F9FC 0%,#EDF1F7 100%)}
/* 有课日期：渐变底色替代纯色（色阶信息保留） */
.cal-cell.lv1{background:linear-gradient(135deg,#EBF4FF 0%,#E0EFFF 100%)}
.cal-cell.lv2{background:linear-gradient(135deg,rgba(22,93,255,.42) 0%,rgba(22,93,255,.55) 100%)}
.cal-cell.lv3{background:linear-gradient(135deg,#1A66FF 0%,#165DFF 100%)}

/* 切月横向滑动（JS 配合：旧月退场后再换 DOM） */
.cal-box{overflow:hidden}
.cal-box.cal-slide-out-l{animation:calOutL .17s cubic-bezier(.25,.8,.25,1) both}
.cal-box.cal-slide-out-r{animation:calOutR .17s cubic-bezier(.25,.8,.25,1) both}
.cal-box.cal-slide-in-l{animation:calInL .26s cubic-bezier(.25,.8,.25,1) both}
.cal-box.cal-slide-in-r{animation:calInR .26s cubic-bezier(.25,.8,.25,1) both}
.cal-box.cal-fade{animation:calFade .18s ease both}
@keyframes calOutL{to{opacity:0;transform:translateX(-26px)}}
@keyframes calOutR{to{opacity:0;transform:translateX(26px)}}
@keyframes calInL{from{opacity:0;transform:translateX(26px)}}
@keyframes calInR{from{opacity:0;transform:translateX(-26px)}}
@keyframes calFade{from{opacity:0}}
@keyframes calDotIn{from{opacity:0;transform:translateX(-50%) scale(0)}to{opacity:1;transform:translateX(-50%) scale(1)}}

/* 日历骨架屏：加载期间格子呼吸闪烁 */
.cal-box.skel .cal-cell[data-ds]{animation:calSkel 1.1s ease-in-out infinite}
@keyframes calSkel{0%,100%{opacity:1}50%{opacity:.4}}
.cal-loading{animation:calFade .2s ease both}

/* 点击日期课表面板：淡入上移弹出 / 关闭淡出下移 */
.day-box.day-in{animation:dayIn .28s cubic-bezier(.25,.8,.25,1) both}
.day-box.day-out{animation:dayOut .17s ease both}
@keyframes dayIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dayOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}

/* ---------- P1 全站微交互 ---------- */
/* 按钮：统一 hover 轻放大 / 按下轻缩小（scale 属性独立于 transform，不与既有 hover 位移冲突） */
button{transition-property:background-color,color,border-color,box-shadow,opacity,filter,scale;transition-duration:.18s}
button:not(:disabled):hover{scale:1.02}
button:not(:disabled):active{scale:.97}

/* 输入框/下拉：聚焦边框阴影平滑过渡 + 微弱外发光（focus-visible 低于既有类级 focus 规则，不覆盖定制样式） */
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(22,93,255,.28);outline-offset:0}

/* 表格行/列表行：hover 背景平滑过渡 */
tbody tr{transition:background-color .18s ease,box-shadow .18s ease}
.day-row,.todo-row{transition:background-color .18s ease}

/* 青云内嵌弹窗：补齐入场动画（qk/modal 系已有）+ 统一退场 */
.qye-overlay{animation:qkFade .18s ease}
.qye-modal{animation:qyePop .24s cubic-bezier(.34,1.4,.64,1)}
@keyframes qyePop{from{transform:scale(.96) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.qye-overlay.qye-closing{animation:qyeOut .16s ease both}
.qye-overlay.qye-closing .qye-modal{animation:qyePopOut .16s ease both}
@keyframes qyeOut{to{opacity:0}}
@keyframes qyePopOut{to{transform:scale(.96) translateY(10px);opacity:0}}

/* 提交按钮 loading（JS 全局 submit 委托加 .is-loading）：旋转指示 + 防重复点击 */
button.is-loading{pointer-events:none;opacity:.72}
button.is-loading::after{content:'';width:13px;height:13px;border-radius:50%;border:2px solid currentColor;
    border-top-color:transparent;display:inline-block;margin-left:7px;vertical-align:-2px;
    animation:btnSpin .7s linear infinite;flex-shrink:0}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ---------- P2 加载反馈 ---------- */
/* 通用骨架块（shimmer 流光）：供列表/表格占位使用 */
.skel-block{background:linear-gradient(90deg,#F2F3F5 25%,#E8E9EB 37%,#F2F3F5 63%);background-size:400% 100%;
    animation:skelWave 1.3s ease infinite;border-radius:8px}
@keyframes skelWave{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* 无障碍：用户系统开启"减少动态效果"时自动关闭动画 */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
        transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==== 校区PK（20260902 多校区横向对比仪表盘） ==== */
.pk-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
    gap:14px;margin-bottom:18px}
.pk-title{min-width:200px}
.pk-h1{font-size:21px;font-weight:700;color:var(--text-primary)}
.pk-sub{font-size:12.5px;color:var(--text-muted);margin-top:4px}
.pk-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.pk-seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.pk-seg-btn{padding:8px 16px;font-size:13px;color:var(--text-secondary);background:#fff;
    border:none;cursor:pointer;transition:background .15s,color .15s}
.pk-seg-btn + .pk-seg-btn{border-left:1px solid var(--border)}
.pk-seg-btn:hover{background:var(--bg-warm)}
.pk-seg-btn.active{background:var(--primary);color:#fff;font-weight:600}
.pk-date{border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;
    color:var(--text-primary);background:#fff;outline:none}
.pk-date:focus{border-color:var(--primary)}
.pk-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;
    border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text-secondary);
    cursor:pointer;transition:all .15s}
.pk-btn:hover{border-color:var(--primary);color:var(--primary)}
.pk-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.pk-btn-primary:hover{background:var(--primary-dark);color:#fff}
.pk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.pk-sum-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,0.04);transition:transform .15s,box-shadow .15s}
.pk-sum-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.08)}
.pk-sum-top{display:flex;justify-content:space-between;align-items:center}
.pk-sum-title{font-size:13px;color:var(--text-muted)}
.pk-sum-ic{width:36px;height:36px;border-radius:10px;background:#eff6ff;color:var(--primary);
    display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.pk-sum-val{font-size:24px;font-weight:700;color:var(--text-primary);margin:10px 0 6px;
    letter-spacing:-.5px}
.pk-rate{font-size:12px}
.pk-rate.pk-up{color:#F53F3F}
.pk-rate.pk-down{color:#00B42A}
.pk-rate.pk-flat{color:var(--text-muted)}
.pk-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
    box-shadow:0 2px 10px rgba(0,0,0,0.04);margin-bottom:18px}
.pk-card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
    padding:14px 18px;border-bottom:1px solid #f1f5f9}
.pk-card-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.pk-hint{font-size:12px;color:var(--text-muted)}
.pk-table-wrap{overflow-x:auto}
.pk-table{width:100%;border-collapse:collapse;font-size:13px;min-width:max-content}
.pk-table th,.pk-table td{padding:10px 14px;text-align:center;border-bottom:1px solid #f1f5f9;
    border-right:1px solid #f8fafc;min-width:120px;white-space:nowrap}
.pk-table thead th{background:var(--bg-warm);color:var(--text-secondary);font-weight:600;
    border-bottom:1px solid var(--border)}
.pk-table tbody tr:hover td{background:#f8fbff}
.pk-sticky-col{position:sticky;left:0;background:#fff;z-index:2;text-align:left !important;
    font-weight:600;color:var(--text-secondary);min-width:120px;
    box-shadow:1px 0 0 0 #f1f5f9}
.pk-table thead .pk-sticky-col{background:var(--bg-warm)}
.pk-table td.pk-best .pk-v{color:var(--primary);font-weight:700}
.pk-v{font-weight:600;color:var(--text-primary)}
.pk-table td .pk-rate{display:block;margin-top:2px}
.pk-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.pk-chart-card{padding:16px 18px;margin-bottom:0}
.pk-chart{height:340px;width:100%}
.pk-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:40px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
    color:var(--text-muted);font-size:14px}
.pk-loading i{color:var(--primary)}
.pk-loading.pk-err i{color:#d97706}
@media (max-width:768px){
    .pk-toolbar{flex-direction:column;align-items:stretch}
    .pk-tools{justify-content:space-between}
    .pk-chart{height:280px}
    .pk-sum-val{font-size:20px}
}

/* ==================== 题库上传页（第五十二批 20260903） ==================== */
.qbu-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.qbu-h1{font-size:22px;font-weight:700;color:var(--text-primary)}
.qbu-sub{font-size:13px;color:var(--text-muted);margin-top:4px}
.qbu-grade-switch{display:flex;gap:8px;flex-shrink:0;padding-top:4px}
.qbu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.qbu-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.qbu-card-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-muted)}
.qbu-card-top i{color:var(--primary)}
.qbu-card-val{font-size:26px;font-weight:700;color:var(--text-primary);margin-top:6px}
.qbu-card.qbu-ok .qbu-card-val{color:#059669}
.qbu-card.qbu-warn .qbu-card-val{color:#d97706}
.qbu-progress-wrap{grid-column:1/-1;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 16px}
.qbu-progress-info{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--text-muted);margin-bottom:8px}
.qbu-bar{height:10px;background:var(--bg,#f1f5f9);border-radius:6px;overflow:hidden}
.qbu-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#34d399);border-radius:6px;transition:width .4s ease}
.qbu-ctrl-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.qbu-ctrl-tip{font-size:12.5px;color:var(--text-muted);background:#f8fafc;border:1px dashed var(--border);border-radius:8px;padding:8px 12px;line-height:1.6}
.qbu-ctrl-tip i{color:var(--primary);margin-right:4px}
.qbu-log{max-height:260px;overflow-y:auto;font-size:12.5px;font-family:Consolas,monospace;background:#0f172a;color:#e2e8f0;border-radius:8px;padding:10px 12px}
.qbu-log-line{padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05);white-space:pre-wrap;word-break:break-all}
.qbu-log-line.qbu-ok{color:#6ee7b7}
.qbu-log-line.qbu-warn{color:#fcd34d}
.qbu-log-line.qbu-err{color:#fca5a5}
.qbu-log-empty{color:#94a3b8}
.qbu-fails{margin-top:10px;border:1px solid #fecaca;background:#fef2f2;border-radius:8px;padding:10px 12px}
.qbu-fails-title{font-size:13px;font-weight:600;color:#b91c1c;margin-bottom:6px}
.qbu-fail-line{font-size:12.5px;color:#7f1d1d;padding:2px 0;word-break:break-all}
.qbu-verify{font-size:13px}
.qbu-cmp{overflow-x:auto}
.qbu-cmp table{width:100%;border-collapse:collapse;font-size:12.5px}
.qbu-cmp th,.qbu-cmp td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top}
.qbu-cmp th{background:#f1f5f9;font-weight:600}
.qbu-cmp tr.qbu-bad{background:#fef2f2}
.qbu-cell{max-width:360px;white-space:pre-wrap;word-break:break-all;font-family:Consolas,monospace;font-size:12px}
.qbu-ok-ic{color:#059669}
.qbu-err-ic{color:#dc2626}
.qbu-warn-ic{color:#d97706}
.qbu-cmp-sum{margin-top:8px;font-size:13px;font-weight:600;padding:8px 12px;border-radius:8px}
.qbu-cmp-sum.qbu-ok{background:#ecfdf5;color:#065f46}
.qbu-cmp-sum.qbu-warn{background:#fffbeb;color:#92400e}
.qbu-file-table{overflow-x:auto}
.qbu-file-table table{width:100%;border-collapse:collapse;font-size:13px}
.qbu-file-table th,.qbu-file-table td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.qbu-file-table th{background:#f1f5f9;font-weight:600}
.qbu-fname{max-width:300px;word-break:break-all}
.qbu-sample{color:var(--text-muted);font-size:12.5px;max-width:420px;word-break:break-all}
@media (max-width:768px){
    .qbu-cards{grid-template-columns:repeat(2,1fr)}
    .qbu-cell{max-width:200px}
}


/* ==================== 试卷工作台（20260903：错题组稿+组卷，页面化编辑导出） ==================== */
.pw-wrap{display:flex;flex-direction:column;height:100%;min-height:0}
.pw-toolbar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--bg-card);
    border:1px solid var(--border);border-radius:14px;margin-bottom:14px;flex-wrap:wrap;
    /* 20260904 B73：页面滚动时导出按钮吸顶——滚动发生在 .content-area，
       .pw-wrap 的 height:100% 因父层 .page-content 无高度约束实际=内容高，
       试卷长时整页滚、工具栏滚出视野 */
    position:sticky;top:0;z-index:30;box-shadow:0 2px 10px rgba(31,35,41,.06)}
.pw-title-input{flex:1;min-width:220px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;
    font-size:14.5px;font-weight:600;color:var(--text-primary);background:#fff}
.pw-title-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.pw-ans-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);
    white-space:nowrap;cursor:pointer}
.pw-ans-toggle input{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}
.pw-count{font-size:13px;color:var(--text-muted);white-space:nowrap}
.pw-btn{padding:9px 18px;font-size:13.5px;white-space:nowrap}
.pw-btn-pdf{color:#b91c1c;border-color:#fecaca;background:#fef2f2}
.pw-btn-pdf:hover{background:#fee2e2}
/* 20260904 B72：错题浏览窗下载按钮（Word 蓝 / PDF 红，与组卷导出一致） */
.pw-btn-word{color:#1d4ed8;border-color:#bfdbfe;background:#eff6ff}
.pw-btn-word:hover{background:#dbeafe}
/* 20260903 第六十一批：学员错题区 */
.pw-student-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--bg-card);
    border:1px solid var(--border);border-radius:14px;margin-bottom:14px;flex-wrap:wrap}
.pw-student-label{font-size:13.5px;font-weight:700;color:var(--text-primary);display:flex;
    align-items:center;gap:6px;white-space:nowrap}
.pw-student-label i{color:var(--primary)}
.pw-student-sel{width:auto;min-width:200px;max-width:320px;flex-shrink:1}
/* 20260904 B70：学员可搜索组合框（替换原生 select，支持姓名/年级/学校模糊筛选）
   20260904 B71：服务端分页——校区下拉（管理员）+ 滚动加载提示行 */
.pw-stu-campus{width:auto;min-width:130px;max-width:200px;flex-shrink:1}
.pw-stu-more{padding:9px 12px;text-align:center;color:var(--text-muted,#64748b);
    font-size:12px;border-top:1px dashed var(--border);position:sticky;bottom:0;
    background:var(--bg-card,#fff)}
.pw-stu-pick{position:relative;width:auto;min-width:230px;max-width:340px;flex:1 1 230px;flex-shrink:1}
.pw-stu-kw{width:100%;min-width:0}
.pw-stu-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1100;
    background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 10px 28px rgba(15,35,80,.16);max-height:264px;overflow-y:auto;display:none}
.pw-stu-drop.open{display:block}
.pw-stu-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 12px;font-size:13.5px;cursor:pointer;color:var(--text-primary)}
.pw-stu-opt .nm{font-weight:600;white-space:nowrap}
.pw-stu-opt .sub{color:var(--text-muted,#64748b);font-size:12px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
.pw-stu-opt:hover,.pw-stu-opt.active{background:#eef4ff}
.pw-stu-opt.sel{background:#e7f6ec}
.pw-stu-empty{padding:12px 14px;color:var(--text-muted,#64748b);font-size:13px;text-align:center}
/* 20260913 B115h：加题面板知识点可搜索组合框（下拉行/空态复用 pw-stu-opt / pw-stu-empty） */
.pw-kp-pick{position:relative}
.pw-kp-kw{width:100%}
.pw-kp-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1100;
    background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 10px 28px rgba(15,35,80,.16);max-height:264px;overflow-y:auto;display:none}
.pw-kp-drop.open{display:block}
/* 20260903 第六十三批：错题浏览弹窗（分页10/页 + 跨页多选 + 筛选 + 下载选中）
   20260903 第六十五批：弹窗加高加大 + 列表独立滚动（原无高度约束，长列表撑破弹窗不滚动） */
.pwb-modal{width:min(1240px,96vw);height:min(88vh,960px);max-height:88vh;
    display:flex;flex-direction:column;overflow:hidden}
.pwb-loading,.pwb-empty{padding:48px 20px;text-align:center;color:var(--text-muted);font-size:13.5px}
.pwb-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 18px;
    border-bottom:1px solid var(--border);flex-shrink:0}
.pwb-filter input[type=date]{padding:7px 10px;border:1px solid var(--border);
    border-radius:8px;font-size:13px;color:var(--text-primary)}
.pwb-filter select{width:auto;max-width:240px;font-size:13px;padding:7px 10px}
.pwb-sep{font-size:12px;color:var(--text-muted)}
.pwb-fcount{font-size:12.5px;color:var(--text-muted);margin-left:auto;white-space:nowrap}
.pwb-list{flex:1;min-height:120px;overflow-y:auto;padding:4px 18px}
.pwb-row{display:flex;gap:12px;align-items:flex-start;padding:13px 8px;
    border-bottom:1px dashed var(--border)}
.pwb-row:hover{background:#f5f8fc}
.pwb-chk{margin-top:4px;width:17px;height:17px;cursor:pointer;flex-shrink:0}
.pwb-main{min-width:0;flex:1}
.pwb-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;
    color:var(--text-muted);margin-bottom:4px}
.pwb-idx{font-weight:700;color:var(--text-primary)}
.pwb-tag{padding:1px 8px;border-radius:10px;background:#eef2f8;color:#475669;
    font-size:11.5px;white-space:nowrap}
.pwb-tag-t{background:#f0f4fb;color:#2a5caa}
.pwb-tag-ok{background:#e8f5e9;color:#2e7d32}
/* 20260913 B120：错题净化角标（AI 干净版）+ 原版切换态 */
.pwb-tag-clean{background:#e0f2f1;color:#00695c;cursor:pointer;font-weight:600}
.pwb-tag-clean:hover{background:#b2dfdb}
.pwb-tag-clean.pwb-tag-orig{background:#fff3e0;color:#b26a00}
.pwb-tag-no{background:#fdeeee;color:#c0392b}
.pwb-preview{font-size:14px;line-height:1.7;color:var(--text-primary);
    word-break:break-word}
/* 20260904 B74：TAL 切割原图优先展示——图加载成功隐藏文字版（has-fig），
   genie 管道图 404 由 onerror 移除、自动回落文字版 */
.pwb-fig-img{max-width:100%;max-height:320px;object-fit:contain;display:block;
    margin:6px 0;border-radius:8px;border:1px solid var(--border);
    background:#fafbfd}
.pwb-preview.has-fig .pwb-txt{display:none}
/* 20260904 B78：试卷题卡错题源图片优先——切割原图加载成功隐藏文字题干
   （TAL 切割图的文字版是 OCR 残留乱码），onerror 移除图回落文字
   20260904 B82：题池卡片 TAL 切割图同规则（pw-pool-item.has-fig） */
.pw-q-text.has-fig .pw-q-stem{display:none}
.pw-pool-item.has-fig .pw-pool-stem{display:none}
.pw-q-text .pw-fig img{max-width:100%;border-radius:6px;margin-top:4px}
.pwb-pts{font-size:12px;color:var(--text-muted);margin-top:4px}
.pwb-pts i{color:var(--primary);margin-right:2px}
.pwb-batch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:11px 18px;
    border-top:1px solid var(--border);background:#fafbfd;flex-shrink:0}
.pwb-count{font-size:13px;font-weight:700;color:var(--primary);white-space:nowrap}
.pwb-batch select{width:auto;font-size:13px;padding:7px 10px}
.pwb-page{display:flex;gap:10px;align-items:center;justify-content:center;
    padding:9px 18px;border-top:1px dashed var(--border);font-size:12.5px;
    color:var(--text-muted);flex-shrink:0}
.pwb-page button[disabled]{opacity:.45;cursor:not-allowed}
.pw-student-tip{font-size:12px;color:var(--text-muted);margin-left:auto;white-space:nowrap}
.pw-main{display:flex;gap:14px;flex:1;min-height:0;align-items:stretch}
/* 左：试卷预览（A4 纸面感） */
.pw-paper{flex:1;min-width:0;overflow-y:auto;background:#fff;border:1px solid var(--border);
    border-radius:14px;padding:30px 38px;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.pw-paper-head h1{font-size:21px;text-align:center;margin:0 0 6px;color:#111}
.pw-paper-meta{font-size:12px;color:#666;text-align:center;margin-bottom:18px}
.pw-sec-title{font-size:15.5px;font-weight:700;color:#2a5caa;border-bottom:2px solid #2a5caa;
    padding-bottom:4px;margin:22px 0 10px}
.pw-q{margin:10px 0;padding:8px 10px;border-radius:8px;border:1px solid transparent;position:relative;
    transition:all .15s ease}
.pw-q:hover{background:#f8fafc;border-color:var(--border)}
.pw-q-main{display:flex;gap:8px;align-items:flex-start}
.pw-q-text{flex:1;font-size:14px;line-height:1.8;color:#111;word-break:break-word}
/* B65：每题操作按钮（上移/下移/换题/删除）加大 + 默认可见（原 24×22 且 hover 才显示，太小不显眼） */
.pw-q-tools{display:flex;flex-direction:column;gap:5px;opacity:.9;transition:opacity .15s ease;flex-shrink:0}
.pw-q:hover .pw-q-tools,.pw-q:focus-within .pw-q-tools{opacity:1}
.pw-q-tools button{width:32px;height:28px;border:1px solid var(--border);background:#fff;border-radius:7px;
    color:var(--text-secondary);cursor:pointer;font-size:13px;display:flex;align-items:center;
    justify-content:center;padding:0;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.pw-q-tools button:hover{border-color:var(--primary);color:var(--primary);background:#f0f6ff}
.pw-q-tools .pw-q-del{color:#c0392b;border-color:#f3c6c6;background:#fdf6f6}
.pw-q-tools .pw-q-del:hover{border-color:#ef4444;color:#ef4444;background:#fdeeee}
.pw-q-ans{margin:6px 0 0 34px;padding:7px 12px;background:#faf7ef;border-left:3px solid #b8860b;
    border-radius:0 6px 6px 0;font-size:13px;line-height:1.75;color:#333;word-break:break-word}
.pw-q-ans .lab{color:#b8860b;font-weight:700;margin-right:2px}
/* B69：试卷区题图（题干图 + 答案/解析内嵌图——预览缩略，导出时后端全宽嵌入） */
.pw-fig{margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:6px}
.pw-q-text .pw-fig{margin-left:0}
.pw-fig img{max-width:200px;max-height:170px;border:1px solid var(--border);border-radius:6px;
    background:#fff;object-fit:contain}
.pw-q-ans .pw-fig{margin:4px 0 2px}
.pw-q-ans .pw-fig img{max-width:150px;max-height:130px}
.pw-note{margin-top:18px;font-size:12.5px;color:var(--text-muted);text-align:center}
.pw-empty-paper{text-align:center;padding:90px 20px;color:var(--text-muted)}
.pw-empty-paper i{font-size:42px;margin-bottom:14px;color:#cbd5e1}
.pw-empty-paper p{margin:4px 0;font-size:15px;color:var(--text-secondary)}
.pw-empty-paper .sub{font-size:12.5px;color:var(--text-muted)}
.pw-dragging{opacity:.4}
.pw-drag-over{border-color:var(--primary)!important;background:rgba(37,99,235,.06)!important}
/* 右：加题面板 */
.pw-panel{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:9px;background:var(--bg-card);
    border:1px solid var(--border);border-radius:14px;padding:16px;overflow:hidden}
.pw-panel-title{font-size:14.5px;font-weight:700;color:var(--text-primary);display:flex;
    align-items:center;gap:7px}
.pw-panel-title i{color:var(--primary)}
.pw-select,.pw-search{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;
    background:#fff;color:var(--text-primary);width:100%}
.pw-select:focus,.pw-search:focus{outline:none;border-color:var(--primary)}
.pw-pool{flex:1;min-height:120px;overflow-y:auto;border:1px dashed var(--border);border-radius:10px;
    padding:10px;display:flex;flex-direction:column;gap:9px;background:#fbfdff}
.pw-pool-item{border:1px solid var(--border);border-radius:9px;padding:10px 11px;background:#fff;
    display:flex;flex-direction:column;gap:7px}
.pw-pool-item:hover{border-color:var(--primary-light);box-shadow:0 2px 8px rgba(37,99,235,.08)}
.pw-pool-stem{font-size:12.8px;line-height:1.7;color:#222;word-break:break-word;max-height:100px;
    overflow:hidden}
/* B68：题池题图预览 */
.pw-pool-fig{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.pw-pool-img{max-width:100%;max-height:96px;border:1px solid var(--border);border-radius:6px;
    background:#fff;object-fit:contain}
.pw-pool-imgn{font-size:11px;color:var(--text-muted);align-self:center}
.pw-pool-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pw-tag{font-size:11px;background:rgba(37,99,235,.08);color:var(--primary);border-radius:4px;
    padding:2px 7px;white-space:nowrap;font-weight:600}
.pw-kp{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    max-width:180px}
.pw-add-btn{padding:5px 0;font-size:12.5px;width:100%}
.pw-add-btn:disabled{opacity:.55;cursor:default}
.pw-pool-empty,.pw-pool-loading{text-align:center;padding:30px 10px;font-size:12.5px;color:var(--text-muted)}
.pw-pool-loading i{margin-right:5px}
/* ==================== 20260912 智能组卷 ==================== */
.pw-smart-open{margin-bottom:2px}
.pw-smart-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1200;display:flex;
    align-items:center;justify-content:center;padding:20px}
.pw-smart{background:#fff;border-radius:16px;width:700px;max-width:96vw;max-height:92vh;display:flex;
    flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.25);overflow:hidden}
.pw-smart-head{display:flex;align-items:center;gap:8px;padding:14px 20px;font-size:16px;font-weight:700;
    color:var(--text-primary);background:linear-gradient(135deg,#eef4ff,#f7fbff);
    border-bottom:1px solid var(--border);flex-shrink:0}
.pw-smart-head i{color:var(--primary)}
.pw-smart-close{margin-left:auto;border:none;background:transparent;font-size:22px;line-height:1;
    color:var(--text-muted);cursor:pointer;padding:2px 8px;border-radius:8px}
.pw-smart-close:hover{background:#eef2f7;color:#333}
.pw-smart-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.pw-smart-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pw-smart-row .lbl{font-size:12.5px;font-weight:700;color:var(--text-secondary);width:56px;flex-shrink:0;
    padding-top:8px}
.pw-smart-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.pw-smart-seg button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:5px 12px;
    font-size:12.5px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}
.pw-smart-seg button:hover{border-color:var(--primary);color:var(--primary)}
.pw-smart-seg button.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.pw-smart-kprow{flex-direction:column;gap:7px}
.pw-smart-kpkw{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:9px;font-size:13px;
    box-sizing:border-box}
.pw-smart-kpkw:focus{outline:none;border-color:var(--primary)}
.pw-smart-kp{display:flex;flex-wrap:wrap;gap:6px;max-height:128px;overflow-y:auto;width:100%}
.pw-smart-kp-empty{font-size:12.5px;color:var(--text-muted);padding:6px 2px}
.pw-smart-kp-tag{font-size:12px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;
    background:#f8fafc;color:#334155;cursor:pointer;user-select:none;transition:all .15s ease}
.pw-smart-kp-tag i{font-style:normal;color:var(--text-muted);font-size:11px;margin-left:2px}
.pw-smart-kp-tag:hover{border-color:var(--primary);color:var(--primary)}
.pw-smart-kp-tag.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pw-smart-kp-tag.on i{color:#dbeafe}
.pw-smart-kp-tag.zero{opacity:.5;cursor:not-allowed}
.pw-smart-qt{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-width:0}
.pw-smart-qt-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;
    padding:7px 10px;background:#fbfdff}
.pw-smart-qt-check{font-size:12.5px;color:#334155;display:flex;align-items:center;gap:5px;min-width:86px;
    cursor:pointer;flex-shrink:0}
.pw-smart-qt-check input{accent-color:var(--primary)}
.pw-smart-range{flex:1;min-width:52px;accent-color:var(--primary)}
.pw-smart-w{font-size:11.5px;color:var(--text-muted);width:20px;text-align:center;flex-shrink:0}
.pw-smart-n{font-size:11.5px;color:var(--primary);font-weight:700;width:38px;text-align:right;flex-shrink:0}
.pw-smart-total{width:74px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;font-size:13px}
.pw-smart-total:focus{outline:none;border-color:var(--primary)}
.pw-smart-quick{display:inline-flex;gap:4px}
.pw-smart-quick a{font-size:12px;color:var(--primary);background:#eef4ff;border-radius:6px;padding:4px 9px;
    cursor:pointer;border:1px solid transparent}
.pw-smart-quick a:hover{border-color:var(--primary)}
.pw-smart-preview{font-size:12px;color:var(--text-muted);align-self:center;margin-left:auto;max-width:300px;
    text-align:right}
.pw-smart-actions{display:flex;gap:10px;padding-top:2px}
.pw-smart-actions .btn-primary,.pw-smart-actions .btn-secondary{flex:1;justify-content:center}
.pw-smart-result{display:flex;flex-direction:column;gap:10px}
.pw-smart-loading,.pw-smart-empty{text-align:center;padding:26px 10px;color:var(--text-muted);font-size:13px}
.pw-smart-loading i{margin-right:6px}
.pw-smart-note{background:#fffbeb;border:1px solid #fcd34d;color:#92400e;border-radius:9px;padding:8px 12px;
    font-size:12.5px}
.pw-smart-dist{display:flex;flex-wrap:wrap;gap:8px}
.pw-smart-dist-item{position:relative;border:1px solid var(--border);border-radius:9px;padding:8px 12px 12px;
    font-size:12.5px;color:#334155;background:#fff;overflow:hidden;min-width:88px}
.pw-smart-dist-item b{color:var(--primary)}
.pw-smart-dist-item i{position:absolute;left:0;bottom:0;height:3px;background:var(--primary);
    border-radius:0 3px 3px 0}
.pw-smart-cards{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;padding-right:4px}
.pw-smart-card{border:1px solid var(--border);border-radius:10px;padding:9px 12px;background:#fff}
.pw-smart-card-meta{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.pw-smart-card-kp{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
.pw-smart-card-stem{font-size:12.8px;line-height:1.7;color:#222;word-break:break-word}
.pw-smart-card-fig{display:flex;gap:6px;margin-top:6px}
.pw-smart-card-fig img{max-width:120px;max-height:90px;border:1px solid var(--border);border-radius:6px}
.pw-smart-foot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border);
    background:#fafbfc;flex-shrink:0}
.pw-smart-foot span{flex:1;font-size:12.5px;color:var(--text-muted)}
@media (max-width:600px){
    .pw-smart-qt{grid-template-columns:1fr}
    .pw-smart{width:96vw}
}
@media (max-width:900px){
    .pw-main{flex-direction:column}
    .pw-panel{width:100%}
    .pw-paper{min-height:320px}
    .pw-q-tools{opacity:1}
}

/* 20260914 fix6e：试卷工作台移动端紧凑化——吸顶工具栏不再过高遮内容；
   学员/知识点下拉(z1100)高于吸顶工具栏(z30)与「帮我执行」漂浮按钮(z998)，
   滚动时不再被页面部分遮盖 */
@media (max-width:640px){
    .pw-toolbar{padding:10px 12px;gap:8px}
    .pw-title-input{min-width:140px;padding:7px 10px;font-size:14px}
    .pw-btn{padding:7px 12px;font-size:12.5px}
    .pw-student-bar{padding:10px 12px;gap:8px}
    .pw-student-tip{display:none}
    .pw-stu-pick{min-width:0;width:100%;flex-basis:100%}
    .pw-stu-drop,.pw-kp-drop{max-height:220px}
}

/* 20260913 审计修复 P2：尊重系统"减少动态效果"偏好（transition:all 性能问题的
   可访问性兜底；132 处动画属性逐一替换属纯视觉回归风险，暂不批量动） */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 20260914 fix6c：试卷工作台顶部「进入作业批改」醒目入口（仅教师端渲染，样式全角色通用） */
.pw-pigai-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 55%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(67, 56, 202, 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pw-pigai-banner:active { filter: brightness(1.08); }
.pw-pigai-banner i { font-size: 22px; }
.pw-pigai-banner-text { font-size: 15px; font-weight: 700; }
.pw-pigai-banner em {
    margin-left: auto;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .pw-pigai-banner { padding: 16px 14px; border-radius: 16px; }
    .pw-pigai-banner-text { font-size: 16px; }
}