/* ========================================
   计量经济学创造讨论改进交互系统 - Platform CSS
   Modern Redesign with Glassmorphism & Animations
   ======================================== */

/* ========== Design Tokens ========== */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #eef2ff;
    --primary-glow: rgba(99, 102, 241, 0.4);
    --secondary: #06b6d4;
    --accent: #8b5cf6;
    --accent-light: #ede9fe;
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg: #f8faff;
    --bg-card: #ffffff;
    --bg-dark: #0f172a;
    --bg-darker: #020617;
    --text: #1e293b;
    --text-secondary: #64748b;
    /* Noise texture for gradient dithering */
    --noise-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    --text-light: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --radius-full: 9999px;
    --sidebar-width: 272px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    overflow-x: hidden;
}

/* ========== Login Page ========== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    background: var(--bg-darker);
}

/* Noise dither for login page */
.login-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--noise-svg);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 1;
    mix-blend-mode: overlay;
}
/* Animated mesh gradient background */
.login-page::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(236, 72, 153, 0.15) 0%, transparent 40%);
    animation: meshMove 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes meshMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, -3%) rotate(1deg); }
    50% { transform: translate(-1%, 2%) rotate(-1deg); }
    75% { transform: translate(3%, 1%) rotate(0.5deg); }
}

/* Floating orbs */
.login-page::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    top: 10%;
    right: 10%;
    filter: blur(60px);
    animation: float 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

.login-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 48px 44px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
    animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardAppear {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.login-header p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 500;
}

.login-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 28px;
    gap: 4px;
}

.login-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-xs);
}

.login-tab.active {
    color: white;
    background: rgba(99, 102, 241, 0.6);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.login-tab:hover:not(.active) {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}

/* Make labels dark in app context */
.app-layout .form-group label {
    color: var(--text);
}

.form-group input, .form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: var(--transition);
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    color: white;
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.form-group select option {
    background: var(--bg-dark);
    color: white;
}

/* App-context form fields (dark theme) */
.app-layout .form-group input,
.app-layout .form-group select,
.modal .form-group input,
.modal .form-group select {
    background: rgba(255,255,255,0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
}

.app-layout .form-group input::placeholder,
.modal .form-group input::placeholder {
    color: rgba(255,255,255,0.3);
}

.app-layout .form-group input:focus,
.app-layout .form-group select:focus,
.modal .form-group input:focus,
.modal .form-group select:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(255,255,255,0.08);
}

/* ========== Buttons ========== */
.btn {
    padding: 11px 22px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
    background: var(--bg);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}
.btn-danger:hover { transform: translateY(-1px); }

.btn-accent {
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.btn-full { width: 100%; }

.btn-loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 0.8rem;
    border-radius: var(--radius-xs);
}

.login-error {
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 8px;
    display: none;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-xs);
}

.login-hint {
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    margin-top: 12px;
}
.login-hint a {
    color: var(--accent, #60a5fa);
    text-decoration: none;
    cursor: pointer;
}
.login-hint a:hover {
    text-decoration: underline;
    color: var(--accent-hover, #93c5fd);
}

.invite-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Action glow indigo (invite professor) */
.action-glow-indigo:hover {
    background: rgba(99,102,241,0.12) !important;
    border-color: rgba(99,102,241,0.3) !important;
}

/* ========== App Layout ========== */
.app-layout { display: none; flex-direction: column; min-height: 100vh; }
.app-layout.active { display: flex; }

/* ========== Glass Top Bar ========== */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    padding: 0 28px;
}
.app-topbar.topbar-dark {
    background: rgba(2,6,23,0.8);
    border-bottom-color: rgba(255,255,255,0.06);
}
.app-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    max-width: 1400px;
    margin: 0 auto;
}
.app-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-brand-icon {
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.app-brand-text {
    font-size: 0.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.topbar-dark .app-brand-text {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
}
.app-topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--border-light);
    margin: 0 4px;
}
.topbar-dark .app-topbar-divider { background: rgba(255,255,255,0.1); }
.app-page-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.topbar-dark .app-page-title { color: rgba(255,255,255,0.5); }
.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lang-switcher-app {
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border-light);
    border-radius: 9999px;
    padding: 2px;
}
.topbar-dark .lang-switcher-app {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}
.lang-switcher-app .lang-btn {
    padding: 3px 10px;
    font-size: 0.7rem;
    background: none;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.2s;
}
.lang-switcher-app .lang-btn.active {
    background: var(--primary);
    color: white;
}
.topbar-dark .lang-switcher-app .lang-btn { color: rgba(255,255,255,0.5); }
.topbar-dark .lang-switcher-app .lang-btn.active { color: white; }

/* User chip */
.app-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border-light);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
}
.app-user-chip:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.2); }
.topbar-dark .app-user-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.topbar-dark .app-user-chip:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.25); }
.app-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: white;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s;
}
.app-user-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}
.topbar-dark .app-user-name { color: rgba(255,255,255,0.7); }

/* ========== Floating Dock ========== */
.dock {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}
.dock-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(15,23,42,0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}
.dock-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}
.dock-item.active {
    background: rgba(99,102,241,0.2);
}
.dock-icon {
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.dock-item:hover .dock-icon { transform: scale(1.2); }
.dock-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    transition: color 0.2s;
}
.dock-item:hover .dock-label,
.dock-item.active .dock-label { color: rgba(255,255,255,0.9); }
.dock-dot {
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a5b4fc;
    opacity: 0;
    transition: opacity 0.2s;
}
.dock-item.active .dock-dot { opacity: 1; }
.dock-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.1);
    margin: 0 4px;
}

/* ========== Main Content (full width) ========== */
.main-content {
    flex: 1;
    min-height: 100vh;
    background: var(--bg);
    padding-bottom: 80px; /* space for dock */
}

.content-body {
    padding: 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ========== Views ========== */
.view { display: none; }
.view.active { display: block; animation: viewFade 0.4s ease; }

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

/* ========== Dashboard ========== */
.welcome-banner {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    color: white;
    border-radius: var(--radius);
    padding: 36px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: 10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.welcome-banner h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.welcome-banner p {
    opacity: 0.85;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
    font-weight: 400;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

.stat-card .stat-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* ========== Cards ========== */
.card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: var(--transition);
}

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

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

.card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.card-body {
    padding: 24px;
}

/* ========== AI Prompt Library (Dark Glassmorphism) ========== */
.prompt-dark {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 0 0 48px 0;
    background: #0a0e1a !important;
}
.prompt-bg {
    display: none;
}

/* --- Hero Header --- */
.prompt-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px 20px 32px;
}
.prompt-hero-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fcd34d;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    animation: badgeGlow 3s ease-in-out infinite alternate;
}
@keyframes badgeGlow {
    0% { box-shadow: 0 0 12px rgba(245,158,11,0.1); }
    100% { box-shadow: 0 0 24px rgba(245,158,11,0.25); }
}
.prompt-hero-title {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.25;
    background: linear-gradient(135deg, #fff 0%, #fcd34d 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}
.prompt-hero-desc {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    margin-bottom: 24px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.prompt-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 20px rgba(245,158,11,0.3);
}
.prompt-hero-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 32px rgba(245,158,11,0.45);
}
.prompt-hero-btn span:first-child {
    font-size: 1.1rem;
    font-weight: 900;
}

/* --- Stats Row --- */
.prompt-stats-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.prompt-stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    transition: all 0.25s;
}
.prompt-stat-pill:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.prompt-stat-icon { font-size: 0.9rem; }
.prompt-stat-num { color: #fcd34d; font-weight: 800; }

/* --- Filter Pills --- */
.prompt-sort-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    justify-content: center;
}
.prompt-sort-btn {
    padding: 7px 18px;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    background: none;
    cursor: pointer;
    transition: all 0.25s;
}
.prompt-sort-btn.active {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    box-shadow: 0 2px 12px rgba(251,191,36,0.12);
}
.prompt-sort-btn:hover:not(.active) { color: rgba(255,255,255,0.7); }
.prompt-filter-row {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.prompt-pill {
    padding: 8px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
    flex-shrink: 0;
}
.prompt-pill:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}
.prompt-pill.active {
    background: rgba(245,158,11,0.2);
    border-color: rgba(245,158,11,0.4);
    color: #fcd34d;
    box-shadow: 0 0 16px rgba(245,158,11,0.15);
}

/* --- Prompt Empty State (Dark) --- */
.prompt-empty-state {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 20px;
}
.prompt-empty-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: emptyFloat 4s ease-in-out infinite;
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.prompt-empty-state h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.prompt-empty-state p {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    margin-bottom: 28px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.prompt-empty-state .forum-empty-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 20px rgba(245,158,11,0.3);
}
.prompt-empty-state .forum-empty-btn:hover {
    box-shadow: 0 8px 32px rgba(245,158,11,0.45);
}

/* --- Prompt Glass Card --- */
#promptsContainer {
    position: relative;
    z-index: 1;
}
.prompt-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.prompt-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(245,158,11,0.2);
    box-shadow: 0 8px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,158,11,0.1);
    transform: translateY(-2px);
}

.prompt-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px 0;
}
.prompt-card-header .post-author-info { flex: 1; }
.prompt-card-header .post-avatar {
    border-radius: 10px;
}
.prompt-card-header .post-author { color: #e2e8f0; }
.prompt-card-header .post-time { color: rgba(255,255,255,0.3); }
.prompt-card-header .post-badge.badge-professor { background: rgba(168,85,247,0.2); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.3); }
.prompt-card-header .post-badge.badge-student,
.prompt-card-header .post-badge.badge-researcher { background: rgba(99,102,241,0.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); }
.prompt-card-header .post-badge.badge-guest { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.25); }
.prompt-card-header .post-category {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
}

.prompt-card-body {
    padding: 12px 24px 0;
}
.prompt-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 6px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.prompt-card-desc {
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* --- Prompt Code Block (Dark Glass) --- */
.prompt-code-block {
    position: relative;
    margin: 0 16px 16px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.25s;
    overflow: hidden;
}
.prompt-code-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), rgba(99,102,241,0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.prompt-code-block:hover {
    background: rgba(0,0,0,0.5);
    border-color: rgba(245,158,11,0.15);
    box-shadow: inset 0 0 30px rgba(245,158,11,0.03);
}
.prompt-code-block:hover::before { opacity: 1; }
.prompt-code-block:hover .prompt-copy-btn { opacity: 1; transform: translateY(0); }

.prompt-auto-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251,191,36,0.15);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
}
.prompt-code-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #fbbf24;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.prompt-code-block pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #cbd5e1;
    max-height: 200px;
    overflow-y: auto;
}
.prompt-code-block pre::-webkit-scrollbar { width: 4px; }
.prompt-code-block pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.prompt-copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 16px;
    background: rgba(245,158,11,0.2);
    border: 1px solid rgba(245,158,11,0.35);
    border-radius: 9999px;
    color: #fcd34d;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.prompt-copy-btn:hover {
    background: rgba(245,158,11,0.35);
    box-shadow: 0 4px 16px rgba(245,158,11,0.2);
}

/* --- Prompt Card Footer --- */
.prompt-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.prompt-vote-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9999px;
    background: rgba(255,255,255,0.04);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.prompt-vote-btn:hover {
    border-color: rgba(99,102,241,0.4);
    color: #a5b4fc;
    background: rgba(99,102,241,0.1);
}
.prompt-vote-btn.voted {
    border-color: rgba(99,102,241,0.5);
    color: #a5b4fc;
    background: rgba(99,102,241,0.15);
    box-shadow: 0 0 12px rgba(99,102,241,0.15);
}
.prompt-vote-btn.voted .vote-icon {
    animation: voteUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes voteUp {
    0% { transform: scale(1); }
    40% { transform: scale(1.4) translateY(-2px); }
    100% { transform: scale(1); }
}
.prompt-used-count {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    margin-left: auto;
}
.prompt-copy-action {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    background: none;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.prompt-copy-action:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
}

/* --- Prompt Content Input (Modal - stays light) --- */
.prompt-content-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    color: #c7d2fe;
    background: rgba(15,23,42,0.6);
    outline: none;
    resize: none;
    line-height: 1.6;
    margin-bottom: 8px;
    transition: all 0.2s;
}
.prompt-content-input:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(15,23,42,0.8);
}
.prompt-content-input::placeholder { color: rgba(255,255,255,0.25); }

/* ========== Discussion Forum — Dark Glassmorphism ========== */
.forum-dark {
    position: relative;
    min-height: calc(100vh - 80px);
    padding-top: 28px;
    padding-bottom: 48px;
}
.forum-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
#forumListView, #postDetailView { position: relative; z-index: 1; }

/* --- Hero Compose Bar --- */
.forum-hero-compose {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    margin-bottom: 24px;
    animation: fadeSlideDown 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
.forum-hero-compose:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.forum-hero-left { display: flex; align-items: center; gap: 14px; flex: 1; }
.compose-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.forum-hero-text { flex: 1; }
.forum-hero-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.88rem;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
}
.forum-hero-tags { display: flex; gap: 6px; }
.forum-hero-tag {
    padding: 3px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
}
.forum-hero-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
    transition: all 0.25s;
}
.forum-hero-compose:hover .forum-hero-btn {
    box-shadow: 0 6px 24px rgba(99,102,241,0.45);
    transform: translateY(-1px);
}

/* --- Toolbar (Sort + Filter) --- */
.forum-toolbar-dark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    animation: fadeSlideDown 0.5s 0.1s cubic-bezier(0.4,0,0.2,1) both;
}
.forum-sort-toggle-dark {
    display: flex;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 3px;
    flex-shrink: 0;
}
.sort-btn-dark {
    padding: 7px 18px;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    background: none;
    cursor: pointer;
    transition: all 0.25s;
}
.sort-btn-dark.active {
    background: rgba(99,102,241,0.2);
    color: #c7d2fe;
    box-shadow: 0 2px 12px rgba(99,102,241,0.15);
}
.sort-btn-dark:hover:not(.active) { color: rgba(255,255,255,0.7); }

.forum-filter-pills {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.forum-pill {
    padding: 7px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    flex-shrink: 0;
}
.forum-pill:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.forum-pill.active {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.35);
    color: #a5b4fc;
}

/* --- Empty State (Dark) --- */
.forum-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.forum-empty-illustration {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: emptyFloat 4s ease-in-out infinite;
}
@keyframes emptyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.forum-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 10px;
}
.forum-empty-state p {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    margin-bottom: 28px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.forum-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.forum-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,0.5); }

/* --- Post Cards (Glass) --- */
.post-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.post-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    transform: translateY(-2px);
}
.post-card-click { padding: 20px 24px 12px; cursor: pointer; }

.post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: white;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.avatar-student { background: linear-gradient(135deg, #6366f1, #818cf8); }
.avatar-professor { background: linear-gradient(135deg, #a855f7, #c084fc); }
.avatar-guest { background: linear-gradient(135deg, #64748b, #94a3b8); }

.post-author-info { flex: 1; }
.post-author { font-weight: 700; font-size: 0.88rem; color: #e2e8f0; }
.post-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    cursor: default;
}
.badge-professor { background: rgba(168,85,247,0.2); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.3); }
.badge-student { background: rgba(99,102,241,0.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); }
.badge-guest { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.25); }

/* === Researcher Competitive Tier System (8 tiers) === */

/* Avatar gradients per tier */
.avatar-student.rlv-novice   { background: linear-gradient(135deg, #64748b, #94a3b8); }
.avatar-student.rlv-bronze   { background: linear-gradient(135deg, #b45309, #d97706); }
.avatar-student.rlv-silver   { background: linear-gradient(135deg, #6b7280, #d1d5db); }
.avatar-student.rlv-gold     { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 0 10px rgba(251,191,36,0.2); }
.avatar-student.rlv-platinum { background: linear-gradient(135deg, #06b6d4, #67e8f9); box-shadow: 0 0 12px rgba(6,182,212,0.25); }
.avatar-student.rlv-diamond  { background: linear-gradient(135deg, #8b5cf6, #c4b5fd); box-shadow: 0 0 14px rgba(139,92,246,0.3); }
.avatar-student.rlv-master   { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 0 16px rgba(225,29,72,0.3); }
.avatar-student.rlv-legend   { background: linear-gradient(135deg, #f59e0b, #fbbf24, #f97316); box-shadow: 0 0 20px rgba(245,158,11,0.4), 0 0 40px rgba(249,115,22,0.15); }

/* Badge colors per tier */
.badge-researcher.rlv-novice   { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }
.badge-researcher.rlv-bronze   { background: rgba(180,83,9,0.15);    color: #d97706; border: 1px solid rgba(217,119,6,0.3); }
.badge-researcher.rlv-silver   { background: rgba(156,163,175,0.15); color: #d1d5db; border: 1px solid rgba(209,213,219,0.25); }
.badge-researcher.rlv-gold     { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.badge-researcher.rlv-platinum { background: rgba(6,182,212,0.12);   color: #22d3ee; border: 1px solid rgba(34,211,238,0.25); }
.badge-researcher.rlv-diamond  { background: rgba(139,92,246,0.12);  color: #c4b5fd; border: 1px solid rgba(196,181,253,0.3); }
.badge-researcher.rlv-master   { background: rgba(225,29,72,0.12);   color: #fb7185; border: 1px solid rgba(251,113,133,0.3); }
.badge-researcher.rlv-legend   { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(249,115,22,0.15)); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }

/* Legend badge shimmer animation */
.badge-researcher.rlv-legend {
    animation: legend-shimmer 3s ease-in-out infinite;
}
@keyframes legend-shimmer {
    0%, 100% { box-shadow: 0 0 4px rgba(251,191,36,0.2); }
    50% { box-shadow: 0 0 12px rgba(251,191,36,0.4); }
}

/* === Professor Tier System (8 tiers — cute / mad-scientist themed) === */

/* Avatar gradients per professor tier */
.avatar-professor.plv-fresh     { background: linear-gradient(135deg, #a78bfa, #c4b5fd); }
.avatar-professor.plv-lab       { background: linear-gradient(135deg, #818cf8, #a78bfa); }
.avatar-professor.plv-coffee    { background: linear-gradient(135deg, #a855f7, #c084fc); }
.avatar-professor.plv-librarian { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 0 10px rgba(124,58,237,0.2); }
.avatar-professor.plv-star      { background: linear-gradient(135deg, #6d28d9, #a855f7); box-shadow: 0 0 12px rgba(109,40,217,0.25); }
.avatar-professor.plv-owl       { background: linear-gradient(135deg, #7c3aed, #ec4899); box-shadow: 0 0 14px rgba(124,58,237,0.3); }
.avatar-professor.plv-quantum   { background: linear-gradient(135deg, #6d28d9, #06b6d4); box-shadow: 0 0 16px rgba(109,40,217,0.35); }
.avatar-professor.plv-mad       { background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b); box-shadow: 0 0 20px rgba(124,58,237,0.4), 0 0 40px rgba(236,72,153,0.15); }

/* ================================================================
   TIER AVATAR GLOW — subtle background glow + slow specular sweep
   • filter: drop-shadow  — background colour breathes (≠ box-shadow)
   • ::after              — slow glass-orb specular highlight
   • ::before             — 2nd sweep on legend / mad only
   ================================================================ */

/* ── Slow specular sweep ── */
@keyframes avatarSpecularSweep {
    0%, 58%  { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
    63%      { opacity: 1; }
    78%      { transform: translateX(260%) skewX(-18deg); opacity: 0; }
    100%     { transform: translateX(260%) skewX(-18deg); opacity: 0; }
}

[class*="tier-av-"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent           20%,
        rgba(255,255,255,0.03) 38%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.03) 62%,
        transparent           80%
    );
    border-radius: inherit;
    pointer-events: none;
    animation: avatarSpecularSweep var(--sv-period, 14s) ease-in-out var(--sv-delay, 0s) infinite;
}

/* ── Researcher tiers ── */

@keyframes tierGlowNovice {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(148,163,184,0.18)); }
    50%       { filter: drop-shadow(0 0 6px rgba(148,163,184,0.32)); }
}
.tier-av-novice { --sv-period: 18s; animation: tierGlowNovice 5s ease-in-out infinite; }

@keyframes tierGlowBronze {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(217,119,6,0.28)); }
    50%       { filter: drop-shadow(0 0 8px rgba(245,158,11,0.48)); }
}
.tier-av-bronze { --sv-period: 15s; animation: tierGlowBronze 4.5s ease-in-out infinite; }

@keyframes tierGlowSilver {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(203,213,225,0.25)); }
    50%       { filter: drop-shadow(0 0 9px rgba(241,245,249,0.48)); }
}
.tier-av-silver { --sv-period: 14s; animation: tierGlowSilver 4s ease-in-out infinite; }

@keyframes tierGlowGold {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(251,191,36,0.35)); }
    50%       { filter: drop-shadow(0 0 12px rgba(253,224,71,0.58)); }
}
.tier-av-gold { --sv-period: 12s; animation: tierGlowGold 3.5s ease-in-out infinite; }

@keyframes tierGlowPlatinum {
    0%   { filter: drop-shadow(0 0 5px rgba(6,182,212,0.35)); }
    33%  { filter: drop-shadow(0 0 13px rgba(103,232,249,0.55)); }
    66%  { filter: drop-shadow(0 0 7px rgba(14,165,233,0.38)); }
    100% { filter: drop-shadow(0 0 5px rgba(6,182,212,0.35)); }
}
.tier-av-platinum { --sv-period: 11s; animation: tierGlowPlatinum 4s ease-in-out infinite; }

@keyframes tierGlowDiamond {
    0%   { filter: drop-shadow(0 0 6px rgba(139,92,246,0.38)); }
    25%  { filter: drop-shadow(0 0 14px rgba(196,181,253,0.58)); }
    50%  { filter: drop-shadow(0 0 8px rgba(124,58,237,0.42)); }
    75%  { filter: drop-shadow(0 0 15px rgba(167,139,250,0.58)); }
    100% { filter: drop-shadow(0 0 6px rgba(139,92,246,0.38)); }
}
.tier-av-diamond { --sv-period: 10s; animation: tierGlowDiamond 5s ease-in-out infinite; }

@keyframes tierGlowMaster {
    0%, 100% { filter: drop-shadow(0 0 7px rgba(225,29,72,0.42)); }
    50%       { filter: drop-shadow(0 0 16px rgba(251,113,133,0.62)); }
}
.tier-av-master { --sv-period: 9s; animation: tierGlowMaster 3s ease-in-out infinite; }

@keyframes tierGlowLegend {
    0%   { filter: drop-shadow(0 0 8px rgba(245,158,11,0.45)); }
    25%  { filter: drop-shadow(0 0 18px rgba(253,224,71,0.65)); }
    50%  { filter: drop-shadow(0 0 10px rgba(249,115,22,0.48)); }
    75%  { filter: drop-shadow(0 0 20px rgba(253,224,71,0.68)); }
    100% { filter: drop-shadow(0 0 8px rgba(245,158,11,0.45)); }
}
.tier-av-legend { --sv-period: 7s; animation: tierGlowLegend 4s ease-in-out infinite; }
.tier-av-legend::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        72deg,
        transparent           22%,
        rgba(255,220,80,0.06)  42%,
        rgba(255,255,180,0.18) 50%,
        rgba(255,220,80,0.06)  58%,
        transparent           78%
    );
    border-radius: inherit;
    pointer-events: none;
    animation: avatarSpecularSweep 10s ease-in-out 3.5s infinite;
}

/* ── Professor tiers ── */

@keyframes tierGlowProfFresh {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(167,139,250,0.22)); }
    50%       { filter: drop-shadow(0 0 7px rgba(196,181,253,0.40)); }
}
.tier-av-prof-fresh { --sv-period: 16s; animation: tierGlowProfFresh 5s ease-in-out infinite; }

@keyframes tierGlowProfFox {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(168,85,247,0.28)); }
    50%       { filter: drop-shadow(0 0 9px rgba(192,132,252,0.48)); }
}
.tier-av-prof-fox { --sv-period: 14s; animation: tierGlowProfFox 4.5s ease-in-out infinite; }

@keyframes tierGlowProfOwl {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(124,58,237,0.32)); }
    50%       { filter: drop-shadow(0 0 10px rgba(167,139,250,0.52)); }
}
.tier-av-prof-owl { --sv-period: 12s; animation: tierGlowProfOwl 4s ease-in-out infinite; }

@keyframes tierGlowProfDragon {
    0%   { filter: drop-shadow(0 0 5px rgba(109,40,217,0.32)); }
    33%  { filter: drop-shadow(0 0 12px rgba(167,139,250,0.52)); }
    66%  { filter: drop-shadow(0 0 6px rgba(109,40,217,0.35)); }
    100% { filter: drop-shadow(0 0 5px rgba(109,40,217,0.32)); }
}
.tier-av-prof-dragon { --sv-period: 11s; animation: tierGlowProfDragon 4.5s ease-in-out infinite; }

@keyframes tierGlowProfAlchemist {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(124,58,237,0.35)); }
    50%       { filter: drop-shadow(0 0 14px rgba(236,72,153,0.52)); }
}
.tier-av-prof-alchemist { --sv-period: 10s; animation: tierGlowProfAlchemist 3.5s ease-in-out infinite; }

@keyframes tierGlowProfQuantum {
    0%   { filter: drop-shadow(0 0 6px rgba(109,40,217,0.38)); }
    33%  { filter: drop-shadow(0 0 14px rgba(6,182,212,0.55)); }
    66%  { filter: drop-shadow(0 0 8px rgba(139,92,246,0.42)); }
    100% { filter: drop-shadow(0 0 6px rgba(109,40,217,0.38)); }
}
.tier-av-prof-quantum { --sv-period: 9s; animation: tierGlowProfQuantum 3.5s ease-in-out infinite; }

@keyframes tierGlowProfMad {
    0%   { filter: drop-shadow(0 0 7px rgba(124,58,237,0.42)); }
    20%  { filter: drop-shadow(0 0 16px rgba(236,72,153,0.58)); }
    40%  { filter: drop-shadow(0 0 8px rgba(245,158,11,0.45)); }
    60%  { filter: drop-shadow(0 0 15px rgba(6,182,212,0.55)); }
    80%  { filter: drop-shadow(0 0 9px rgba(139,92,246,0.48)); }
    100% { filter: drop-shadow(0 0 7px rgba(124,58,237,0.42)); }
}
.tier-av-prof-mad { --sv-period: 7s; animation: tierGlowProfMad 5s ease-in-out infinite; }
.tier-av-prof-mad::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        62deg,
        transparent           20%,
        rgba(236,72,153,0.05)  42%,
        rgba(255,200,255,0.14) 50%,
        rgba(236,72,153,0.05)  58%,
        transparent           80%
    );
    border-radius: inherit;
    pointer-events: none;
    animation: avatarSpecularSweep 9s ease-in-out 4s infinite;
}

/* Badge colors per professor tier */
.badge-professor.plv-fresh     { background: rgba(167,139,250,0.15); color: #c4b5fd; border: 1px solid rgba(196,181,253,0.25); }
.badge-professor.plv-lab       { background: rgba(129,140,248,0.15); color: #a5b4fc; border: 1px solid rgba(165,180,252,0.25); }
.badge-professor.plv-coffee    { background: rgba(168,85,247,0.2);   color: #d8b4fe; border: 1px solid rgba(168,85,247,0.3); }
.badge-professor.plv-librarian { background: rgba(124,58,237,0.15);  color: #c4b5fd; border: 1px solid rgba(124,58,237,0.3); }
.badge-professor.plv-star      { background: rgba(109,40,217,0.15);  color: #c4b5fd; border: 1px solid rgba(109,40,217,0.3); }
.badge-professor.plv-owl       { background: rgba(124,58,237,0.12);  color: #f9a8d4; border: 1px solid rgba(236,72,153,0.25); }
.badge-professor.plv-quantum   { background: rgba(109,40,217,0.12);  color: #67e8f9; border: 1px solid rgba(6,182,212,0.25); }
.badge-professor.plv-mad       { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(236,72,153,0.15)); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.35); }

/* Alchemist (炼金术士) badge shimmer */
.badge-professor.plv-owl {
    animation: prof-owl-shimmer 4s ease-in-out infinite;
}
@keyframes prof-owl-shimmer {
    0%, 100% { box-shadow: 0 0 3px rgba(124,58,237,0.15); }
    50% { box-shadow: 0 0 8px rgba(236,72,153,0.25); }
}

/* Quantum Mage (量子魔法师) badge shimmer + avatar pulse */
.badge-professor.plv-quantum {
    animation: prof-quantum-shimmer 3.5s ease-in-out infinite;
}
@keyframes prof-quantum-shimmer {
    0%, 100% { box-shadow: 0 0 4px rgba(109,40,217,0.2); }
    50% { box-shadow: 0 0 10px rgba(6,182,212,0.35); }
}
.avatar-professor.plv-quantum {
    animation: prof-quantum-pulse 5s ease-in-out infinite;
}
@keyframes prof-quantum-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(109,40,217,0.35), 0 0 32px rgba(6,182,212,0.1); }
    50% { box-shadow: 0 0 22px rgba(109,40,217,0.45), 0 0 40px rgba(6,182,212,0.18); }
}

/* Mad Scientist (疯狂科学家) badge shimmer + avatar pulse */
.badge-professor.plv-mad {
    animation: prof-mad-shimmer 3s ease-in-out infinite;
}
@keyframes prof-mad-shimmer {
    0%, 100% { box-shadow: 0 0 4px rgba(124,58,237,0.2); }
    50% { box-shadow: 0 0 12px rgba(236,72,153,0.4); }
}
.avatar-professor.plv-mad {
    animation: prof-mad-pulse 4s ease-in-out infinite;
}
@keyframes prof-mad-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.4), 0 0 40px rgba(236,72,153,0.15); }
    50% { box-shadow: 0 0 28px rgba(124,58,237,0.5), 0 0 50px rgba(236,72,153,0.25); }
}

/* Legend avatar pulse */
.avatar-student.rlv-legend {
    animation: legend-avatar-pulse 4s ease-in-out infinite;
}
@keyframes legend-avatar-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.4), 0 0 40px rgba(249,115,22,0.15); }
    50% { box-shadow: 0 0 28px rgba(245,158,11,0.5), 0 0 50px rgba(249,115,22,0.2); }
}

/* === Badge hover expand: rank title reveal animation === */
.rank-title-reveal {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    opacity: 0;
    transition: max-width 0.5s cubic-bezier(0.34,1.56,0.64,1),
                opacity 0.35s ease;
}
.post-badge:hover .rank-title-reveal {
    max-width: 300px;
    opacity: 1;
}
.post-badge {
    transition: padding 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
}
/* Glow bloom on hover for ranked badges */
.badge-professor.plv-fresh:hover     { box-shadow: 0 0 10px rgba(196,181,253,0.35); }
.badge-professor.plv-lab:hover       { box-shadow: 0 0 10px rgba(165,180,252,0.35); }
.badge-professor.plv-coffee:hover    { box-shadow: 0 0 12px rgba(168,85,247,0.4); }
.badge-professor.plv-librarian:hover { box-shadow: 0 0 12px rgba(124,58,237,0.4); }
.badge-professor.plv-star:hover      { box-shadow: 0 0 14px rgba(109,40,217,0.4); }
.badge-professor.plv-owl:hover       { box-shadow: 0 0 14px rgba(236,72,153,0.4), 0 0 28px rgba(124,58,237,0.15); }
.badge-professor.plv-quantum:hover   { box-shadow: 0 0 16px rgba(6,182,212,0.4), 0 0 32px rgba(109,40,217,0.15); }
.badge-professor.plv-mad:hover       { box-shadow: 0 0 18px rgba(236,72,153,0.5), 0 0 36px rgba(124,58,237,0.2); }
.badge-researcher.rlv-bronze:hover   { box-shadow: 0 0 10px rgba(217,119,6,0.35); }
.badge-researcher.rlv-silver:hover   { box-shadow: 0 0 10px rgba(209,213,219,0.3); }
.badge-researcher.rlv-gold:hover     { box-shadow: 0 0 12px rgba(251,191,36,0.4); }
.badge-researcher.rlv-platinum:hover { box-shadow: 0 0 12px rgba(34,211,238,0.35); }
.badge-researcher.rlv-diamond:hover  { box-shadow: 0 0 14px rgba(196,181,253,0.4); }
.badge-researcher.rlv-master:hover   { box-shadow: 0 0 14px rgba(251,113,133,0.4); }
.badge-researcher.rlv-legend:hover   { box-shadow: 0 0 18px rgba(251,191,36,0.5), 0 0 36px rgba(249,115,22,0.2); }

/* Challenge winner styles */
.challenge-sub-winner {
    border: 1px solid rgba(251,191,36,0.3) !important;
    background: rgba(251,191,36,0.05) !important;
}
/* 今日成功挑战者摘要 — 金色光晕 */
.challenge-winners-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.04), rgba(239,68,68,0.04));
    border: 1px solid rgba(251,191,36,0.25);
    font-size: 0.85rem;
    position: relative; overflow: hidden;
    animation: challengeWinnersFadeIn 0.6s ease-out;
    box-shadow: 0 0 20px rgba(251,191,36,0.06);
}
/* 流光扫过效果 */
.challenge-winners-summary::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.08), transparent);
    animation: challengeWinnersSweep 4s ease-in-out infinite;
}
@keyframes challengeWinnersSweep {
    0% { left: -60%; }
    50%,100% { left: 100%; }
}
@keyframes challengeWinnersFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.challenge-winners-icon { font-size: 1.2rem; animation: challengeTrophyBounce 2s ease-in-out infinite; }
@keyframes challengeTrophyBounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.challenge-winners-label { color: #fbbf24; font-weight: 700; }
.challenge-winners-names { color: rgba(255,255,255,0.85); font-weight: 500; }
.challenge-winner-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.12));
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.35);
    margin-left: 6px;
    animation: challengeBadgeGlow 2s ease-in-out infinite alternate;
    box-shadow: 0 0 8px rgba(251,191,36,0.1);
}
@keyframes challengeBadgeGlow {
    0% { box-shadow: 0 0 4px rgba(251,191,36,0.1); }
    100% { box-shadow: 0 0 14px rgba(251,191,36,0.25); }
}
.challenge-crown-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 6px;
    opacity: 0.5;
    transition: all 0.2s;
}
.challenge-crown-btn:hover {
    opacity: 1;
    border-color: rgba(251,191,36,0.4);
    background: rgba(251,191,36,0.1);
}
.challenge-crown-btn.crowned {
    opacity: 1;
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.4);
    box-shadow: 0 0 8px rgba(251,191,36,0.2);
}

/* Bounty badge on post cards */
.bounty-badge {
    background: rgba(251,191,36,0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,0.3) !important;
    animation: winner-glow 2s ease-in-out infinite;
}
.bounty-badge.bounty-closed {
    background: rgba(34,197,94,0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34,197,94,0.3) !important;
    animation: none;
}

/* Bounty banner in post detail */
.post-bounty-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.2);
}
.post-bounty-banner.bounty-awarded {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
}
.bounty-banner-icon { font-size: 1.2rem; }
.bounty-banner-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbbf24;
}
.bounty-awarded .bounty-banner-amount { color: #4ade80; }
.bounty-banner-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

/* Bounty award button in comments */
.bounty-award-btn {
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.3);
    color: #fbbf24;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
}
.bounty-award-btn:hover {
    background: rgba(251,191,36,0.25);
    box-shadow: 0 0 10px rgba(251,191,36,0.2);
}

/* Bounty option in post creation modal */
.bounty-option-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}

/* Activate button — gold outline with inner shimmer */
.bounty-activate-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 12px;
    border: 1.5px solid rgba(251,191,36,0.35);
    background: rgba(251,191,36,0.06);
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    align-self: flex-start;
}
.bounty-activate-btn:hover {
    border-color: rgba(251,191,36,0.6);
    background: rgba(251,191,36,0.1);
    box-shadow: 0 0 16px rgba(251,191,36,0.15);
}
.bounty-activate-btn.active {
    border-color: rgba(251,191,36,0.7);
    background: rgba(251,191,36,0.12);
    box-shadow: 0 0 20px rgba(251,191,36,0.2), 0 0 40px rgba(251,191,36,0.08);
}
.bounty-btn-icon {
    font-size: 1.1rem;
    transition: transform 0.3s;
}
.bounty-activate-btn.active .bounty-btn-icon {
    animation: bounty-coin-spin 0.6s ease-out;
}
@keyframes bounty-coin-spin {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.3); }
    100% { transform: rotateY(360deg) scale(1); }
}
/* Shimmer sweep across button */
.bounty-btn-shimmer {
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.15), transparent);
    pointer-events: none;
}
.bounty-activate-btn.active .bounty-btn-shimmer {
    animation: bounty-btn-sweep 2.5s ease-in-out infinite;
}
@keyframes bounty-btn-sweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* Chips panel */
.bounty-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
}
.bounty-panel.open {
    display: flex;
    animation: bounty-panel-in 0.35s cubic-bezier(.4,0,.2,1);
}
@keyframes bounty-panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.bounty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual chip */
.bounty-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 8px 12px 6px;
    border-radius: 12px;
    border: 1.5px solid rgba(251,191,36,0.2);
    background: rgba(251,191,36,0.04);
    color: rgba(251,191,36,0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    opacity: 0;
    animation: bounty-chip-in 0.35s cubic-bezier(.4,0,.2,1) forwards;
}
.bounty-chip:nth-child(1) { animation-delay: 0.03s; }
.bounty-chip:nth-child(2) { animation-delay: 0.06s; }
.bounty-chip:nth-child(3) { animation-delay: 0.09s; }
.bounty-chip:nth-child(4) { animation-delay: 0.12s; }
.bounty-chip:nth-child(5) { animation-delay: 0.15s; }
.bounty-chip:nth-child(6) { animation-delay: 0.18s; }
@keyframes bounty-chip-in {
    from { opacity: 0; transform: scale(0.7) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.bounty-chip:hover {
    border-color: rgba(251,191,36,0.5);
    background: rgba(251,191,36,0.1);
    color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251,191,36,0.15);
}
.bounty-chip.selected {
    border-color: rgba(251,191,36,0.8);
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    box-shadow: 0 0 16px rgba(251,191,36,0.25), 0 0 32px rgba(251,191,36,0.1);
    animation: bounty-chip-pulse 2s ease-in-out infinite;
}
@keyframes bounty-chip-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(251,191,36,0.25), 0 0 32px rgba(251,191,36,0.1); }
    50% { box-shadow: 0 0 22px rgba(251,191,36,0.35), 0 0 40px rgba(251,191,36,0.15); }
}
.bounty-chip-val {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}
.bounty-chip-unit {
    font-size: 0.55rem;
    font-weight: 600;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bounty-chip.selected .bounty-chip-unit { opacity: 0.85; }

/* Balance display */
.bounty-balance {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    padding-left: 2px;
}

/* Data analysis price tag */
.da-price-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.25);
    margin-left: 6px;
}

.post-time { color: rgba(255,255,255,0.3); font-size: 0.75rem; margin-top: 1px; }

.post-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
.post-content {
    color: rgba(255,255,255,0.5);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Post footer */
.post-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.post-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #a5b4fc;
    background: rgba(99,102,241,0.15);
    border: none;
}
.post-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.post-action-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.post-stat {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 9999px;
    transition: all 0.2s;
    cursor: pointer;
}
.post-stat:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }

/* --- Sort Toggle (legacy compat) --- */
.forum-toolbar { display: none; }

/* --- Status Badges (Dark) --- */
.post-status-row { display: flex; gap: 6px; padding: 0 0 8px 0; }
.post-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.pin-badge { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.25); }
.star-badge { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.25); }
.hot-badge { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); }
.care-badge {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(59,130,246,0.15));
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,0.3);
    animation: care-pulse 3s ease-in-out infinite;
}
@keyframes care-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    50% { box-shadow: 0 0 8px 2px rgba(16,185,129,0.15); }
}

.post-pinned {
    border-color: rgba(59,130,246,0.2);
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(255,255,255,0.04));
}
.post-featured {
    border-color: rgba(245,158,11,0.2);
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(255,255,255,0.04));
}

/* Professor moderation buttons */
.post-mod-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: none;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.4;
}
.post-mod-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.post-mod-btn.mod-active { opacity: 1; border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.15); }

/* --- Professor Insights Card --- */
.insight-section { margin-bottom: 14px; }
.insight-label { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.insight-label-warn { color: rgba(251,191,36,0.7); }
.insight-post-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-bottom: 2px; }
.insight-post-row:hover { background: rgba(255,255,255,0.06); }
.insight-post-title { font-size: 0.78rem; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-post-stats { font-size: 0.68rem; color: rgba(255,255,255,0.4); flex-shrink: 0; margin-left: 8px; }
.insight-student-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.insight-student-avatar { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #ef4444, #f87171); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: white; flex-shrink: 0; }
.insight-student-name { font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.insight-more { font-size: 0.7rem; color: rgba(255,255,255,0.3); padding: 4px 0; }
.insight-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.insight-stat { text-align: center; }
.insight-stat-num { display: block; font-size: 1.1rem; font-weight: 800; color: #c7d2fe; }
.insight-stat-label { font-size: 0.65rem; color: rgba(255,255,255,0.35); }

/* --- Post Detail (Glass) --- */
.forum-back-btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a5b4fc;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
    font-size: 0.88rem;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}
.forum-back-btn-dark:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.35);
}

.post-detail {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 24px;
}
.post-detail .post-title { font-size: 1.35rem; color: #f1f5f9; }
.post-detail .post-content {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    white-space: pre-wrap;
    line-height: 1.8;
}

/* --- Comments (Dark Glass) --- */
.comments-section { margin-top: 20px; }
.comments-section h4 {
    font-size: 0.95rem;
    margin-bottom: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}
.comment-card {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.comment-card:last-of-type { border-bottom: none; }
.comment-card:hover { background: rgba(255,255,255,0.02); border-radius: 12px; }
.comment-card .post-avatar { width: 34px; height: 34px; font-size: 0.78rem; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-card .post-author { font-size: 0.85rem; color: #e2e8f0; }
.comment-card .post-time { font-size: 0.72rem; margin-left: 8px; color: rgba(255,255,255,0.3); }
.comment-card.professor-comment {
    border-left: none;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.04));
    padding: 14px 16px;
    border-radius: 14px;
    margin: 4px 0;
    border: 1px solid rgba(139,92,246,0.15);
}
.comment-content {
    color: rgba(255,255,255,0.6);
    font-size: 0.88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    margin-top: 4px;
}

/* Comment input (Dark) */
.comment-form {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.comment-form .comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    animation: commentAvatarPulse 3s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(99,102,241,0.25), 0 0 24px rgba(168,85,247,0.1);
    transition: transform 0.25s, box-shadow 0.25s;
}
.comment-form .comment-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 18px rgba(99,102,241,0.4), 0 0 36px rgba(168,85,247,0.2);
}
/* ── Avatar surface glint ── */
/* Pseudo-element is pinned to the surface (inset:0, border-radius:inherit).
   Only the background-position moves — the element itself never detaches. */
.comment-form .comment-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent          0%,
        transparent          42%,
        rgba(255,255,255,0.32) 49%,
        rgba(255,255,255,0.08) 51%,
        transparent          58%,
        transparent          100%
    );
    background-size: 300% 100%;
    background-position: 120% 0;
    pointer-events: none;
    animation: surfaceGlint 5s ease-in-out infinite;
}
/* ── Input bar surface sweep ── */
/* Same technique: element is glued to the surface, gradient slides through. */
.comment-input-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent          0%,
        transparent          44%,
        rgba(255,255,255,0.04) 47%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 53%,
        transparent          56%,
        transparent          100%
    );
    background-size: 300% 100%;
    background-position: 120% 0;
    pointer-events: none;
    z-index: 2;
    animation: surfaceGlint 8s ease-in-out 1s infinite;
}
/* Shared keyframe — only background-position moves, element stays put */
@keyframes surfaceGlint {
    0%, 50%  { background-position: 120% 0; }
    80%      { background-position: -20% 0; }
    100%     { background-position: -20% 0; }
}
@keyframes commentAvatarPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(99,102,241,0.25), 0 0 24px rgba(168,85,247,0.1); }
    50%      { box-shadow: 0 0 18px rgba(99,102,241,0.4), 0 0 32px rgba(168,85,247,0.2); }
}
.comment-input-wrap {
    flex: 1;
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s;
}
.comment-input-wrap:focus-within {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(255,255,255,0.06);
}
.comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    resize: none;
    min-height: 60px;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    color: #e2e8f0;
}
.comment-form textarea::placeholder { color: rgba(255,255,255,0.25); }
/* Comment image preview */
.comment-image-preview {
    position: relative;
    padding: 8px 16px;
    display: inline-block;
}
.comment-image-preview img {
    max-width: 100%;
    max-height: 160px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
}
/* Comment image in display */
.comment-image {
    margin-top: 8px;
}
.comment-image img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: opacity 0.2s;
}
.comment-image img:hover { opacity: 0.9; }

/* Image Lightbox */
.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: lightboxIn 0.2s ease;
}
@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }
.image-lightbox img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    cursor: default;
}
.image-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.image-lightbox-close:hover {
    background: rgba(255,255,255,0.2);
}

.comment-input-actions {
    display: flex;
    align-items: center;
    padding: 6px 10px;
}
.comment-image-btn {
    padding: 4px 12px;
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.2s;
}
.comment-image-btn:hover {
    border-color: rgba(99,102,241,0.3);
    color: #a5b4fc;
    background: rgba(99,102,241,0.08);
}
.comment-submit-btn {
    padding: 6px 18px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(99,102,241,0.25);
}
.comment-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.4); }

/* --- Forum Modal (compose) --- */
.forum-modal { max-width: 560px; }
.forum-modal-body { padding: 20px 24px !important; }
.forum-compose-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.compose-avatar-modal { width: 44px; height: 44px; font-size: 1rem; }
.compose-user-info { flex: 1; }
.compose-user-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: #f1f5f9;
    display: block;
    margin-bottom: 6px;
}
.compose-category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.category-pill {
    display: inline-flex;
    cursor: pointer;
}
.category-pill input { display: none; }
.category-pill span {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
    cursor: pointer;
}
.category-pill input:checked + span {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.35);
}
/* --- Category Tag Selector (Immersive) --- */
.ctag-selector {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ctag {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 9999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); font-size: 0.74rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    user-select: none; overflow: hidden;
}
.ctag::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--ctag-glow, rgba(99,102,241,0.25)) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.ctag:hover {
    background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.8); transform: translateY(-1px);
}
.ctag:hover::before { opacity: 0.5; }
.ctag:active { transform: scale(0.95); }
.ctag.ctag-active {
    background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.45);
    color: #a5b4fc; box-shadow: 0 0 16px rgba(99,102,241,0.2), inset 0 0 12px rgba(99,102,241,0.06);
}
.ctag.ctag-active::before { opacity: 1; }
.ctag-icon { font-size: 0.85rem; line-height: 1; flex-shrink: 0; }
.ctag-label { white-space: nowrap; }
.ctag-pulse {
    animation: ctagPulse 0.45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes ctagPulse {
    0% { transform: scale(0.88); box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); box-shadow: 0 0 16px rgba(99,102,241,0.2); }
}
/* Custom tag accent */
.ctag-custom.ctag-active {
    --ctag-glow: rgba(16,185,129,0.3);
    background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4);
    color: #34d399; box-shadow: 0 0 16px rgba(16,185,129,0.15), inset 0 0 12px rgba(16,185,129,0.05);
}
/* AI-suggested tag glow */
.ctag.ctag-ai-suggest {
    animation: ctagAiGlow 2s ease-in-out infinite;
}
.ctag.ctag-ai-suggest.ctag-active {
    --ctag-glow: rgba(6,182,212,0.4);
    border-color: rgba(6,182,212,0.5);
    box-shadow: 0 0 20px rgba(6,182,212,0.25), 0 0 8px rgba(6,182,212,0.15), inset 0 0 12px rgba(6,182,212,0.08);
}
@keyframes ctagAiGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(6,182,212,0.15); }
    50% { box-shadow: 0 0 24px rgba(6,182,212,0.35), 0 0 8px rgba(6,182,212,0.2); }
}
/* "+" Add button */
.ctag-add {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 9999px;
    border: 1px dashed rgba(255,255,255,0.14); background: transparent;
    color: rgba(255,255,255,0.3); font-size: 0.74rem; font-weight: 600;
    cursor: pointer; transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.ctag-add:hover {
    border-color: rgba(99,102,241,0.45); color: #a5b4fc;
    background: rgba(99,102,241,0.08); transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(99,102,241,0.12);
}
.ctag-add:active { transform: scale(0.93); }
.ctag-add-icon { font-size: 0.95rem; transition: transform 0.3s; }
.ctag-add:hover .ctag-add-icon { transform: rotate(90deg); }
/* Inline input (expanded from "+") */
.ctag-input-wrap {
    display: inline-flex; align-items: center; gap: 0;
    border-radius: 9999px; overflow: hidden;
    border: 1px solid rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.06);
    animation: ctagInputSlide 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes ctagInputSlide {
    from { opacity: 0; max-width: 0; transform: scale(0.8); }
    to   { opacity: 1; max-width: 220px; transform: scale(1); }
}
.ctag-input {
    width: 110px; padding: 5px 12px; border: none; outline: none;
    background: transparent; color: #e2e8f0; font-size: 0.78rem; font-weight: 500;
}
.ctag-input::placeholder { color: rgba(255,255,255,0.25); }
.ctag-input-ok {
    padding: 5px 10px; border: none; border-left: 1px solid rgba(99,102,241,0.25);
    background: rgba(99,102,241,0.1); color: #a5b4fc;
    font-size: 0.8rem; cursor: pointer; transition: background 0.2s;
}
.ctag-input-ok:hover { background: rgba(99,102,241,0.25); }
.ctag-input-cancel {
    padding: 5px 8px; border: none; border-left: 1px solid rgba(99,102,241,0.15);
    background: transparent; color: rgba(255,255,255,0.35);
    font-size: 0.8rem; cursor: pointer; transition: color 0.2s;
}
.ctag-input-cancel:hover { color: #ef4444; }
.forum-title-input {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    outline: none;
    font-family: inherit;
    background: transparent;
    transition: border-color 0.2s;
    margin-bottom: 8px;
}
.forum-title-input:focus { border-bottom-color: var(--primary); }
.forum-title-input::placeholder { color: rgba(255,255,255,0.3); font-weight: 500; }
.forum-body-input {
    width: 100%;
    padding: 12px 0;
    border: none;
    font-size: 0.92rem;
    color: #e2e8f0;
    outline: none;
    font-family: inherit;
    background: transparent;
    resize: none;
    line-height: 1.7;
}
.forum-body-input::placeholder { color: rgba(255,255,255,0.3); }

.forum-modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
}
.forum-compose-tips {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 4px;
}
.forum-publish-btn {
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 12px rgba(99,102,241,0.25);
}
.forum-publish-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99,102,241,0.35); }

/* --- Post Image Upload --- */
.forum-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
}
.forum-image-btn:hover {
    border-color: rgba(99,102,241,0.4);
    color: #a5b4fc;
    background: rgba(99,102,241,0.1);
}
.image-preview-area {
    position: relative;
    margin-top: 12px;
    display: inline-block;
    max-width: 100%;
}
.image-preview-area img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
}
.image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.image-remove-btn:hover { background: rgba(239,68,68,0.8); }

/* --- Post Image Thumbnail (in card list) --- */
.post-image-thumb {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    max-height: 200px;
}
.post-image-thumb img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.post-card:hover .post-image-thumb img { transform: scale(1.02); }

/* --- Post Detail Image --- */
.post-detail-image {
    margin-top: 16px;
}
.post-detail-image img {
    max-width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.post-detail-image img:hover { opacity: 0.92; }

/* --- Feed Image Thumbnail --- */
.feed-image-thumb {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    max-height: 180px;
}
.feed-image-thumb img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

/* ========== New Post Modal ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal {
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    animation: modalAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #e2e8f0;
}

@keyframes modalAppear {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: rgba(255,255,255,0.5);
}

.modal-close:hover {
    background: rgba(255,255,255,0.12);
    color: #f1f5f9;
}

.modal-body { padding: 24px; }

.modal-body textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 120px;
    outline: none;
    font-family: inherit;
    transition: all 0.2s;
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
}

.modal-body textarea::placeholder { color: rgba(255,255,255,0.3); }

.modal-body textarea:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(255,255,255,0.06);
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ========== Attendance ========== */
.checkin-btn {
    width: 100%;
    padding: 20px;
    font-size: 1.15rem;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.checkin-status {
    text-align: center;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

.checkin-done {
    background: var(--success-light);
    color: #065f46;
}

.checkin-pending {
    background: #fef3c7;
    color: #92400e;
}

.attendance-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.attendance-table th, .attendance-table td {
    padding: 12px 16px;
    text-align: left;
}

.attendance-table th {
    background: var(--bg);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--border);
}

.attendance-table td {
    border-bottom: 1px solid var(--border-light);
}

.attendance-table tr:hover td {
    background: var(--bg);
}

.attendance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.summary-card {
    background: white;
    border-radius: var(--radius-sm);
    padding: 18px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

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

.summary-card .summary-num {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.summary-card .summary-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* ========== Files ========== */
.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.file-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    padding: 20px;
    transition: var(--transition);
}

.file-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.file-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.file-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    word-break: break-all;
}

.file-info {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-bottom: 14px;
    line-height: 1.6;
}

.file-actions {
    display: flex;
    gap: 8px;
}

/* Upload area */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    margin-bottom: 24px;
    cursor: pointer;
    transition: var(--transition);
    background: white;
}

.upload-area:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.upload-area .upload-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.upload-area p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ========== Mobile ========== */
@media (max-width: 768px) {
    .content-body {
        padding: 16px;
    }

    .app-topbar { padding: 0 16px; }
    .app-brand-text { display: none; }
    .app-topbar-divider { display: none; }
    .app-user-name { display: none; }

    /* Dock shrinks on mobile */
    .dock { bottom: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; transform: none; }
    .dock-inner { justify-content: space-around; width: 100%; gap: 0; padding: 6px 8px; border-radius: 16px; }
    .dock-item { padding: 6px 8px; }
    .dock-icon { font-size: 1.1rem; }
    .dock-label { font-size: 0.55rem; }

    .login-container {
        padding: 36px 28px;
    }
}

/* ========== Utility ========== */
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.hidden { display: none !important; }

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-light);
}

.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

.empty-state p {
    font-size: 0.95rem;
}

/* ========== Toast Notifications ========== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: var(--shadow-lg);
    animation: toastSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 360px;
    backdrop-filter: blur(8px);
}

.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast-info { background: linear-gradient(135deg, var(--primary), var(--accent)); }

@keyframes toastSlide {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ========== Activity List ========== */
.activity-list {
    list-style: none;
}

.activity-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

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

.activity-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.activity-text {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 500;
}

.activity-time {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 2px;
}

/* ========== Date Picker ========== */
.date-picker-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.date-picker-group input[type="date"] {
    padding: 7px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition);
}

.date-picker-group input[type="date"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* ========== Selection ========== */
::selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text);
}

/* ====================================================================
   LANDING PAGE, HERO, HIGHLIGHTS, TUTORIAL, LANGUAGE SWITCHER
   ==================================================================== */

.landing-page {
    background: var(--bg-darker);
    min-height: 100vh;
    min-height: 100dvh;
    color: white;
    overscroll-behavior-y: none;
}

.landing-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    /* Dynamic Island / notch safe area */
    padding-top: env(safe-area-inset-top, 0px);
}

.landing-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 800;
}

.brand-icon {
    font-size: 1.3rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-text {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

/* Nav login → avatar morph */
.nav-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    animation: navChipAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes navChipAppear {
    0% { opacity: 0; transform: scale(0.4); filter: blur(8px); }
    60% { opacity: 1; transform: scale(1.06); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.nav-user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(99,102,241,0.3);
}
.nav-user-name {
    font-size: 0.8rem; font-weight: 600;
    color: #e2e8f0; white-space: nowrap;
}
.nav-user-role {
    font-size: 0.6rem; font-weight: 600;
    padding: 1px 6px; border-radius: 8px;
    background: rgba(99,102,241,0.25);
    color: #a5b4fc; white-space: nowrap;
}
.nav-user-role.role-professor { background: rgba(245,158,11,0.2); color: #fbbf24; }
.nav-user-role.role-guest { background: rgba(148,163,184,0.2); color: #94a3b8; }

/* Hide login button when chip visible */
#navLoginBtn.hidden-morph {
    animation: navBtnShrink 0.35s cubic-bezier(0.4,0,1,1) both;
    pointer-events: none;
}
@keyframes navBtnShrink {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); filter: blur(6px); }
}

/* Starfield dock button special glow */
.dock-item[data-view="starfield"] .dock-icon {
    filter: drop-shadow(0 0 4px rgba(245,158,11,0.5));
}
.dock-item[data-view="starfield"]:hover .dock-icon {
    filter: drop-shadow(0 0 8px rgba(245,158,11,0.7));
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 2px;
    border: 1px solid rgba(255,255,255,0.08);
}

.lang-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: var(--transition);
}

.lang-btn.active {
    background: rgba(99,102,241,0.5);
    color: white;
    box-shadow: 0 1px 4px rgba(99,102,241,0.3);
}

.lang-btn:hover:not(.active) {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.06);
}

.lang-switcher-sidebar {
    margin-bottom: 10px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════
   ★ STARFIELD CONSTELLATION HERO
   ═══════════════════════════════════════════════ */
.star-hero {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% 30%, rgba(20,15,50,1) 0%, rgba(8,6,20,1) 50%, #020106 100%);
    overflow: clip;
}
.star-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--noise-svg);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 1;
    mix-blend-mode: overlay;
}
.star-hero canvas {
    position: absolute; inset: 0; z-index: 1;
}

/* ── Overlay: Floating Branding ── */
/* (overlay, stats, hint, scroll-cue removed — pure canvas starfield) */

/* ── Anonymous Star Input Bar ── */
.star-input-bar {
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    z-index: 5; width: 90%; max-width: 480px;
    pointer-events: auto;
}
.star-input-wrap {
    display: flex; align-items: center; gap: 0;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px; padding: 4px 4px 4px 20px;
    transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
    box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 0 0 0 rgba(99,102,241,0);
}
.star-input-wrap:focus-within {
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 4px 40px rgba(0,0,0,0.4), 0 0 60px rgba(99,102,241,0.08), inset 0 0 30px rgba(99,102,241,0.03);
    background: rgba(255,255,255,0.06);
}
.star-input-field {
    flex: 1; border: none; outline: none; background: transparent;
    color: rgba(255,255,255,0.85); font-size: 16px; font-weight: 500;
    letter-spacing: 0.01em; padding: 10px 0;
    font-family: inherit;
}
.star-input-field::placeholder {
    color: rgba(255,255,255,0.2); font-weight: 400;
}
.star-input-send {
    width: 40px; height: 40px; border-radius: 50%;
    border: none; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(168,85,247,0.25));
    color: rgba(255,255,255,0.5);
    transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
}
.star-input-send:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.55), rgba(168,85,247,0.45));
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(99,102,241,0.3);
}
.star-input-send:active { transform: scale(0.95); }
.star-input-send.sending {
    pointer-events: none;
    animation: starSendPulse 0.6s ease-out;
}
@keyframes starSendPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); background: rgba(255,255,255,0.2); }
    100% { transform: scale(1); }
}
/* Success flash on the whole bar */
.star-input-wrap.success {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 50px rgba(99,102,241,0.2), 0 0 100px rgba(168,85,247,0.1);
}

@keyframes starShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

@media (max-width: 600px) {
    /* Use fixed height so keyboard doesn't shrink the starfield */
    .star-hero {
        height: 100vh;       /* fallback */
        height: 100svh;      /* small viewport = always includes address bar */
        min-height: 0;       /* override desktop min-height */
    }

    /* ── Nav bar: compact for mobile, respects Dynamic Island ── */
    .landing-nav {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(2, 6, 23, 0.85);
    }
    .landing-nav-inner {
        padding: 8px 14px;
    }
    .nav-brand { font-size: 0.95rem; gap: 6px; }
    .brand-icon { font-size: 1.1rem; }
    .lang-btn { padding: 4px 8px; font-size: 0.7rem; }
    .lang-switcher { padding: 2px; }
    #navLoginBtn { font-size: 0.75rem; padding: 6px 12px; }
    .nav-user-chip { gap: 5px; }
    .nav-user-name { font-size: 0.72rem; }
    .nav-user-avatar { width: 24px; height: 24px; font-size: 11px; }

    /* ── Input bar: above dock + home indicator safe area ── */
    .star-input-bar {
        width: 88%;
        max-width: 400px;
        bottom: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .star-input-wrap {
        padding: 3px 3px 3px 16px;
        border-radius: 44px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .star-input-field { font-size: 16px; padding: 9px 0; } /* 16px prevents iOS auto-zoom on focus */
    .star-input-send { width: 36px; height: 36px; }

    /* ── Popups: constrained within viewport ── */
    .star-popup, .answer-popup {
        max-height: 65dvh;
        max-height: 65vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .star-popup {
        width: 290px;
        border-radius: 18px;
    }
    .answer-popup {
        border-radius: 16px;
    }
    /* ── Compact yellow star popup on mobile ── */
    .sp-my-section { padding: 16px 16px 12px; }
    .sp-my-text { font-size: 0.85rem; }
    .sp-my-body { font-size: 0.74rem; }
    .sp-tag-section { padding: 10px 16px; }
    .sp-related-section { padding: 12px 16px; }
    .sp-related-item { padding: 7px 10px; }
    .sp-related-text { font-size: 0.7rem; }
    .sp-action-btn { width: calc(100% - 32px); margin: 4px 16px 14px; font-size: 0.73rem; }
    .sp-action-row { padding: 6px 14px 12px; }
    .sp-like-btn, .sp-comment-btn { padding: 8px 8px; font-size: 0.7rem; }
    .sp-comment-input-row { padding: 6px 14px 12px; }
}

/* ── Landscape / very short viewport ── */
@media (max-height: 500px) {
    .star-input-bar {
        bottom: 60px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    .star-popup, .answer-popup {
        max-height: 60vh;
    }
}

/* ── iOS Safari: reduce blur for GPU perf, promote layers ── */
.is-ios .landing-nav {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(2, 6, 23, 0.88);
}
.is-ios .star-input-wrap {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.06);
}
.is-ios .star-popup,
.is-ios .answer-popup {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
/* iOS: lock star-hero so keyboard doesn't push it */
.is-ios .star-hero {
    position: fixed;
    inset: 0;
    height: 100%;
    min-height: 0;
}
/* Offset for landing-page flow since star-hero is now fixed */
.is-ios .landing-page > #showcaseCosmos {
    margin-top: 100vh;
    margin-top: 100svh;
}

/* ── Mobile GPU layer promotion for smooth compositing ── */
.is-mobile .star-hero canvas {
    will-change: transform;
    -webkit-transform: translateZ(0);
}
.is-mobile .star-input-bar {
    will-change: transform;
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
}
.is-mobile .landing-nav {
    will-change: transform;
    -webkit-transform: translateZ(0);
}

/* ── iPhone tall-screen (19.5:9) proportions ── */
@media (max-width: 480px) and (min-height: 750px) {
    .star-input-bar {
        bottom: 24px;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    /* Popups use more vertical space on tall screens */
    .star-popup, .answer-popup {
        max-height: 55dvh;
    }
}

/* ── Post Popup ── */
/* ── Yellow Star Popup (Redesigned: My Post + Smart Tags + Related Posts) ── */
.star-popup {
    position: absolute; z-index: 10;
    width: 340px; max-width: calc(100% - 24px);
    background: linear-gradient(160deg, rgba(8,6,24,0.96), rgba(15,10,35,0.96));
    backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 22px; padding: 0;
    pointer-events: none; opacity: 0;
    transform: scale(0.82) translateY(12px);
    transition: opacity 0.35s cubic-bezier(.34,1.56,.64,1), transform 0.35s cubic-bezier(.34,1.56,.64,1);
    box-shadow:
        0 24px 64px rgba(0,0,0,0.55),
        0 0 48px rgba(245,158,11,0.08),
        inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: visible;
}
.star-popup.open {
    pointer-events: auto; opacity: 1;
    transform: scale(1) translateY(0);
    touch-action: auto;
}
.star-popup-close {
    position: absolute; top: 12px; right: 14px; z-index: 5;
    background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.35);
    font-size: 1.1rem; cursor: pointer; transition: all 0.25s;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.star-popup-close:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* ── Section 1: My Post ── */
.sp-my-section {
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(245,158,11,0.1);
    position: relative;
}
.sp-my-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), rgba(251,191,36,0.3), transparent);
}
.sp-section-label {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
    color: rgba(245,158,11,0.7); margin-bottom: 8px;
}
.sp-my-text {
    font-size: 0.92rem; font-weight: 700; color: #f8fafc;
    line-height: 1.5; padding-right: 24px; word-break: break-word;
}
.sp-my-body {
    font-size: 0.78rem; color: rgba(255,255,255,0.4);
    line-height: 1.55; margin-top: 6px; word-break: break-word;
}
.sp-my-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.68rem; color: rgba(255,255,255,0.25); font-weight: 600;
    margin-top: 10px;
}
.sp-author { color: rgba(245,158,11,0.55); }

/* ── Section 2: Smart Tag Badge ── */
.sp-tag-section {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sp-tag-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(168,85,247,0.08));
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 20px; padding: 5px 14px 5px 10px;
}
.sp-tag-icon {
    font-size: 0.72rem; color: #f59e0b;
    animation: spTagPulse 2s ease-in-out infinite;
}
@keyframes spTagPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}
.sp-tag-name {
    font-size: 0.72rem; font-weight: 700; color: #fbbf24;
}
.sp-tag-conf {
    font-size: 0.6rem; font-weight: 600; color: rgba(245,158,11,0.5);
    margin-left: 2px;
}
.sp-conf-track {
    margin-top: 8px; height: 2px; border-radius: 1px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.sp-conf-fill {
    height: 100%; border-radius: 1px;
    background: linear-gradient(90deg, #f59e0b, #a855f7);
    transition: width 0.8s cubic-bezier(.22,1,.36,1);
}

/* ── Section 3: Related Posts ── */
.sp-related-section {
    padding: 14px 20px;
}
.sp-related-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 6px;
}
.sp-related-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: all 0.25s;
}
.sp-related-item:hover {
    background: rgba(245,158,11,0.06);
    border-color: rgba(245,158,11,0.15);
    transform: translateX(3px);
}
.sp-related-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.sp-related-text {
    font-size: 0.74rem; color: rgba(255,255,255,0.6); font-weight: 500;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-related-likes {
    font-size: 0.62rem; color: rgba(255,255,255,0.2); flex-shrink: 0;
}
.sp-no-related {
    font-size: 0.72rem; color: rgba(255,255,255,0.15);
    text-align: center; padding: 8px 0;
    font-style: italic;
}

/* ── Action Button ── */
.sp-action-btn {
    display: block; width: calc(100% - 40px); margin: 4px 20px 18px;
    padding: 11px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(168,85,247,0.08));
    border: 1px solid rgba(245,158,11,0.18);
    color: #fbbf24; font-size: 0.76rem; font-weight: 700;
    cursor: pointer; transition: all 0.3s; text-align: center;
}
.sp-action-btn:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(168,85,247,0.15));
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(245,158,11,0.15);
}

/* ── Star Popup: Like + Comment buttons ── */
.sp-action-row {
    display: flex; gap: 8px;
    padding: 6px 18px 14px; width: 100%; box-sizing: border-box;
    touch-action: auto; position: relative; z-index: 20;
}
.sp-like-btn, .sp-comment-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 11px 10px; min-height: 44px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #d1d5db; font-size: 0.73rem; font-weight: 600;
    cursor: pointer; transition: all 0.25s;
    -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    touch-action: manipulation;
    user-select: none; -webkit-user-select: none;
    position: relative; z-index: 15;
}
.sp-like-btn:active, .sp-comment-btn:active {
    transform: scale(0.95); opacity: 0.8;
}
.sp-like-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: #f87171; }
.sp-like-btn.sp-liked { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #f87171; }
.sp-comment-btn:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); color: #a5b4fc; }
.sp-like-icon, .sp-comment-icon { font-size: 0.85rem; }
.sp-like-count, .sp-comment-count { font-size: 0.8rem; font-weight: 700; }
.sp-like-label, .sp-comment-label { font-size: 0.68rem; opacity: 0.8; }

/* ── Star Popup: Comment inline input ── */
.sp-comment-input-row {
    display: flex; gap: 6px;
    padding: 6px 18px 14px; width: 100%; box-sizing: border-box;
    animation: spSlideIn 0.2s ease-out;
}
@keyframes spSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.sp-comment-input {
    flex: 1; padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #f3f4f6; font-size: 0.73rem; outline: none;
    transition: border-color 0.2s;
}
.sp-comment-input:focus { border-color: rgba(99,102,241,0.4); background: rgba(255,255,255,0.08); }
.sp-comment-input::placeholder { color: rgba(255,255,255,0.3); }
.sp-comment-send {
    padding: 8px 14px; border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none; color: #fff; font-size: 0.72rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.sp-comment-send:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.3); }
.sp-comment-success {
    width: 100%; text-align: center;
    color: #34d399; font-size: 0.73rem; font-weight: 600;
    padding: 6px 0; animation: spSlideIn 0.2s ease-out;
}

/* ── Mobile (starfield is pure canvas, no overlay rules needed) ── */

/* ── KEEP OLD .hero classes as aliases for backward compat ── */
.hero { display: none; /* replaced by .star-hero */ }
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px 32px 60px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.hero-orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%);
    top: -10%; left: -10%;
    animation: orbFloat1 20s ease-in-out infinite;
}

.hero-orb-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(139,92,246,0.35), transparent 70%);
    bottom: -10%; right: -5%;
    animation: orbFloat2 18s ease-in-out infinite;
}

.hero-orb-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(6,182,212,0.2), transparent 70%);
    top: 40%; left: 50%;
    animation: orbFloat3 22s ease-in-out infinite;
}

@keyframes orbFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    animation: heroAppear 1s cubic-bezier(0.16,1,0.3,1);
}

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

.hero-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: var(--radius-full);
    color: #a5b4fc;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 40%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.btn-hero-primary {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(99,102,241,0.4);
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99,102,241,0.5);
}

.btn-hero-secondary {
    padding: 14px 32px;
    background: rgba(255,255,255,0.06);
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-hero-secondary:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}

.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.hero-stat { text-align: center; }

.hero-stat-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}

.hero-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.1);
}

/* Landing Sections */
.landing-section { padding: 80px 32px; }
.landing-section-alt { background: rgba(255,255,255,0.02); }

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 48px;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Unified Showcase Cosmos Section ── */
.showcase-cosmos.landing-section {
    position: relative;
    overflow: hidden;
    padding: 80px 32px;
    background: linear-gradient(180deg, rgba(8,8,20,0.95) 0%, rgba(12,10,28,0.98) 50%, rgba(8,8,20,0.95) 100%);
}

.showcase-cosmos #showcaseCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.showcase-content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

.showcase-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 48px;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #e2e8f0, #c4b5fd, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.showcase-subtitle {
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.5);
    max-width: 680px;
    margin: -28px auto 48px;
    line-height: 1.7;
}

/* 3x2 Symmetric Card Grid */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.showcase-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 32px 26px;
    transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    animation: showcaseCardAppear 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.showcase-card:nth-child(1) { animation-delay: 0s; }
.showcase-card:nth-child(2) { animation-delay: 0.07s; }
.showcase-card:nth-child(3) { animation-delay: 0.14s; }
.showcase-card:nth-child(4) { animation-delay: 0.21s; }
.showcase-card:nth-child(5) { animation-delay: 0.28s; }
.showcase-card:nth-child(6) { animation-delay: 0.35s; }

@keyframes showcaseCardAppear {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Shimmer sweep */
.showcase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 0;
}

.showcase-card:hover::before { left: 100%; }

/* Top glow line on hover */
.showcase-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

.showcase-card:hover::after {
    opacity: 1;
    left: 10%;
    right: 10%;
}

.showcase-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(99,102,241,0.35);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 30px rgba(99,102,241,0.12);
}

.showcase-card-icon {
    font-size: 2.4rem;
    margin-bottom: 16px;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.2));
    position: relative;
    z-index: 1;
}

.showcase-card:hover .showcase-card-icon {
    transform: scale(1.2) rotate(-8deg);
}

.showcase-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #e2e8f0;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
}

.showcase-card:hover h3 { color: #c4b5fd; }

.showcase-card p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.showcase-tag {
    font-size: 0.72rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    transition: all 0.3s ease;
}

.showcase-tag:hover {
    background: rgba(139,92,246,0.25);
    border-color: rgba(139,92,246,0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(139,92,246,0.2);
    color: #fff;
}

/* Divider between the two parts */
.showcase-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 0;
}

.showcase-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
}

.showcase-divider-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 0 16px rgba(99,102,241,0.6), 0 0 40px rgba(99,102,241,0.2);
    animation: dividerOrbPulse 3s ease-in-out infinite;
}

@keyframes dividerOrbPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(99,102,241,0.6), 0 0 40px rgba(99,102,241,0.2); transform: scale(1); }
    50% { box-shadow: 0 0 24px rgba(99,102,241,0.9), 0 0 60px rgba(99,102,241,0.3); transform: scale(1.3); }
}

.section-subtitle {
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.5);
    max-width: 680px;
    margin: -28px auto 48px;
    line-height: 1.7;
}

/* Pipeline Steps (horizontal flow with glowing connector) */
.auto-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 16px;
    margin-bottom: 56px;
    flex-wrap: wrap;
    position: relative;
}

.auto-pipeline-step {
    flex: 0 1 180px;
    text-align: center;
    padding: 28px 16px 24px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: visible;
}

/* Shimmer removed from pipeline steps — overflow:visible needed for step number badges */

.auto-pipeline-step:hover {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.4);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(99,102,241,0.2), 0 0 20px rgba(99,102,241,0.08);
}

.auto-step-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(99,102,241,0.5), 0 0 8px rgba(139,92,246,0.3);
    animation: stepNumPulse 3s ease-in-out infinite;
}

@keyframes stepNumPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(99,102,241,0.5), 0 0 8px rgba(139,92,246,0.3); }
    50% { box-shadow: 0 4px 24px rgba(99,102,241,0.7), 0 0 16px rgba(139,92,246,0.5); }
}

/* Staggered pulse delay per step */
.auto-pipeline-step:nth-child(1) .auto-step-num { animation-delay: 0s; }
.auto-pipeline-step:nth-child(3) .auto-step-num { animation-delay: 0.6s; }
.auto-pipeline-step:nth-child(5) .auto-step-num { animation-delay: 1.2s; }
.auto-pipeline-step:nth-child(7) .auto-step-num { animation-delay: 1.8s; }
.auto-pipeline-step:nth-child(9) .auto-step-num { animation-delay: 2.4s; }

.auto-step-icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.3));
}

.auto-pipeline-step h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.auto-pipeline-step p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.55;
}

/* Animated glowing arrow connector */
.auto-pipeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    padding: 0 6px;
    margin-top: 44px;
    color: rgba(99,102,241,0.6);
    animation: arrowPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(99,102,241,0.4));
}

@keyframes arrowPulse {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

/* Stagger arrow animations */
.auto-pipeline-arrow:nth-child(2) { animation-delay: 0.3s; }
.auto-pipeline-arrow:nth-child(4) { animation-delay: 0.6s; }
.auto-pipeline-arrow:nth-child(6) { animation-delay: 0.9s; }
.auto-pipeline-arrow:nth-child(8) { animation-delay: 1.2s; }

/* Feature Grid */
.auto-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.auto-feature-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 22px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* Top accent border glow */
.auto-feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.6), transparent);
    opacity: 0;
    transition: opacity 0.4s, left 0.4s, right 0.4s;
}

.auto-feature-card:hover::after {
    opacity: 1;
    left: 10%;
    right: 10%;
}

.auto-feature-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(99,102,241,0.35);
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.2), 0 0 24px rgba(99,102,241,0.1);
}

.auto-feature-icon {
    font-size: 2rem;
    margin-bottom: 14px;
    display: inline-block;
    transition: transform 0.4s;
}

.auto-feature-card:hover .auto-feature-icon {
    transform: scale(1.15) rotate(-5deg);
}

.auto-feature-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.auto-feature-card p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
}

/* Methods Showcase — glassmorphism with glow border */
.auto-methods {
    text-align: center;
    margin-bottom: 48px;
    padding: 40px 32px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.04) 50%, rgba(6,182,212,0.04) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

/* Scanning light effect */
.auto-methods::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(99,102,241,0.06) 60deg, transparent 120deg);
    animation: methodsScan 8s linear infinite;
    pointer-events: none;
}

@keyframes methodsScan {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.auto-methods h3 {
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    position: relative;
}

.auto-method-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
}

.auto-method-tag {
    font-size: 0.84rem;
    padding: 8px 18px;
    border-radius: 24px;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.3);
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-family: 'Inter', monospace;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    cursor: default;
}

.auto-method-tag:hover {
    background: rgba(99,102,241,0.25);
    border-color: rgba(99,102,241,0.5);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 20px rgba(99,102,241,0.25), 0 0 12px rgba(99,102,241,0.15);
    color: #fff;
}

.auto-methods-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

/* CTA with glowing button */
.auto-cta {
    text-align: center;
    padding-top: 12px;
}

.auto-cta .btn-hero-primary {
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on CTA button */
.auto-cta .btn-hero-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: ctaShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaShimmer {
    0%, 70%, 100% { left: -100%; }
    40% { left: 150%; }
}

.auto-cta-hint {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    margin-top: 14px;
    letter-spacing: 0.03em;
}

/* Recent Feed */
.recent-feed { max-width: 700px; margin: 0 auto; }

.recent-feed-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: var(--transition);
}

.recent-feed-item:hover { background: rgba(255,255,255,0.07); }
.recent-feed-icon { font-size: 1.2rem; flex-shrink: 0; }
.recent-feed-text { flex: 1; font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.recent-feed-time { font-size: 0.78rem; color: rgba(255,255,255,0.3); flex-shrink: 0; }

/* Login Modal */
.login-modal {
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 32px 64px rgba(0,0,0,0.4);
    animation: modalAppear 0.4s cubic-bezier(0.16,1,0.3,1);
}

.login-modal .modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.login-modal .modal-close:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}

/* Tutorial / Manifesto */
.tutorial-container {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 32px;
    max-width: 800px;
    margin: 0 auto;
}

.tutorial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.tutorial-progress {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.tutorial-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.tutorial-page-num {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    white-space: nowrap;
}

.tutorial-page { display: none; }
.tutorial-page.active { display: block; }

.tutorial-page-inner {
    min-height: 340px;
    position: relative;
}

/* ── Ambient light behind content ── */
.tutorial-page-inner::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.05) 0%, transparent 70%);
    pointer-events: none;
    animation: ambientBreathe 6s ease-in-out infinite;
}

@keyframes ambientBreathe {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* ── Staggered reveal for children ── */
@keyframes manifestoReveal {
    from { opacity: 0; transform: translateY(14px); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
}

.tutorial-page.active .tutorial-page-inner > * {
    animation: manifestoReveal 0.6s cubic-bezier(.25,.46,.45,.94) both;
}
.tutorial-page.active .tutorial-page-inner > *:nth-child(1) { animation-delay: 0.06s; }
.tutorial-page.active .tutorial-page-inner > *:nth-child(2) { animation-delay: 0.18s; }
.tutorial-page.active .tutorial-page-inner > *:nth-child(3) { animation-delay: 0.34s; }
.tutorial-page.active .tutorial-page-inner > *:nth-child(4) { animation-delay: 0.50s; }
.tutorial-page.active .tutorial-page-inner > *:nth-child(5) { animation-delay: 0.66s; }
.tutorial-page.active .tutorial-page-inner > *:nth-child(6) { animation-delay: 0.82s; }
.tutorial-page.active .tutorial-page-inner > *:nth-child(7) { animation-delay: 0.96s; }

.tutorial-page h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #e2e8f0;
}

/* ── Manifesto icon ── */
.manifesto-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 2.2rem;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--m-color, #6366f1) 20%, transparent);
    background: color-mix(in srgb, var(--m-color, #6366f1) 8%, transparent);
    line-height: 1;
}

/* Inner glow ring */
.manifesto-badge::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--m-color, #6366f1) 0%, transparent 65%);
    opacity: 0.08;
    animation: iconGlow 4s ease-in-out infinite;
}

/* Outer breathing halo */
.manifesto-badge::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--m-color, #6366f1) 0%, transparent 60%);
    opacity: 0;
    z-index: -1;
    animation: iconGlow 4s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { opacity: 0.05; transform: scale(1); }
    50%      { opacity: 0.22; transform: scale(1.12); }
}

/* ── Manifesto body text ── */
.manifesto-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
    margin-bottom: 12px;
}

.manifesto-text:last-of-type { margin-bottom: 16px; }

/* ── Accent block (proclamation) ── */
.manifesto-accent {
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(99,102,241,0.4);
    border-radius: 0 8px 8px 0;
    padding: 14px 20px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.manifesto-accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.035) 50%, transparent 100%);
    animation: accentShimmer 1.8s ease 1.2s both;
}

@keyframes accentShimmer {
    from { left: -100%; }
    to   { left: 100%; }
}

.manifesto-accent p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.82);
    font-weight: 600;
    line-height: 1.75;
    margin: 0;
}

/* ── Closing line ── */
.manifesto-closing {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.4);
    margin-top: 16px;
    font-style: italic;
    line-height: 1.7;
}

.tutorial-cta { margin-top: 28px; }

.tutorial-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Landing Footer */
.landing-footer {
    padding: 32px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-brand {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links { display: flex; gap: 20px; }

.footer-links a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}

.footer-links a:hover { color: rgba(255,255,255,0.8); }

/* Landing Responsive */
@media (max-width: 768px) {
    .hero { padding: 100px 20px 40px; min-height: auto; }
    .hero-title { font-size: 2rem; }
    .hero-desc { font-size: 0.95rem; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-stats { gap: 16px; }
    .hero-stat-num { font-size: 1.4rem; }
    .landing-section { padding: 48px 16px; }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
    .showcase-cosmos.landing-section { padding: 48px 16px; }
    .auto-pipeline { flex-direction: column; align-items: center; gap: 8px; }
    .auto-pipeline-arrow { transform: rotate(90deg); margin: 0; padding: 4px 0; }
    .auto-pipeline-step { flex: 0 1 auto; width: 100%; max-width: 320px; }
    .auto-features { grid-template-columns: repeat(2, 1fr); }
    .section-subtitle { font-size: 0.92rem; margin-bottom: 32px; }
    .tutorial-container { padding: 20px; }
    .tutorial-page h2 { font-size: 1.2rem; }
    .manifesto-badge { width: 56px; height: 56px; font-size: 1.7rem; margin-bottom: 16px; }
    .tutorial-nav { flex-direction: column; gap: 10px; }
    .tutorial-nav .btn { width: 100%; }
    .footer-content { flex-direction: column; text-align: center; }
}

/* ====================================================================
   MODULAR DASHBOARD - Interactive Academic Platform Design
   ==================================================================== */

/* ===== Dashboard Hero (Profile Card) ===== */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 100%);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.dash-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.15);
    pointer-events: none;
}

.dash-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: 20%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    pointer-events: none;
}

.dash-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.dash-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #818cf8, #c084fc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 4px 15px rgba(129, 140, 248, 0.4);
    flex-shrink: 0;
    animation: avatarPulse 3s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(129, 140, 248, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(129, 140, 248, 0.6), 0 0 40px rgba(129, 140, 248, 0.2); }
}

.dash-hero-info h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.dash-hero-sub {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.6);
    max-width: 400px;
}

.dash-hero-right {
    position: relative;
    z-index: 1;
}

.dash-xp-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 16px 20px;
    min-width: 220px;
}

.dash-xp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dash-level {
    font-size: 0.85rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dash-xp-text {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

.dash-xp-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.dash-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #ef4444);
    border-radius: 3px;
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.dash-xp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: 3px;
    animation: xpShine 2s ease-in-out infinite;
}

@keyframes xpShine {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.dash-streak {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

.dash-streak-num {
    font-weight: 800;
    font-size: 1rem;
    color: #fbbf24;
}

.dash-streak-fire {
    font-size: 1rem;
    animation: fireWiggle 1s ease-in-out infinite;
}

@keyframes fireWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* ===== Quick Actions ===== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.quick-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: inherit;
}

.qa-discuss::before { background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.08)); }
.qa-code::before { background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(6,182,212,0.08)); }
.qa-checkin::before { background: linear-gradient(135deg, rgba(245,158,11,0.05), rgba(251,191,36,0.08)); }
.qa-sim::before { background: linear-gradient(135deg, rgba(236,72,153,0.05), rgba(244,114,182,0.08)); }

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

.quick-action-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.qa-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.quick-action-card:hover .qa-icon-wrap { transform: scale(1.15) rotate(-5deg); }

.qa-discuss .qa-icon-wrap { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.qa-code .qa-icon-wrap { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.qa-checkin .qa-icon-wrap { background: linear-gradient(135deg, #fefce8, #fef3c7); }
.qa-sim .qa-icon-wrap { background: linear-gradient(135deg, #fdf2f8, #fce7f3); }

.qa-icon { font-size: 1.3rem; }

.qa-label {
    flex: 1;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.qa-arrow {
    font-size: 1rem;
    color: var(--text-light);
    transition: transform 0.3s;
    position: relative;
    z-index: 1;
}

.quick-action-card:hover .qa-arrow { transform: translateX(4px); color: var(--primary); }

/* ===== Dashboard Grid ===== */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dash-stats-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.dash-feed-module {
    grid-row: span 2;
}

/* ===== Mini Stats ===== */
.mini-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    transition: all 0.3s;
    cursor: default;
}

.mini-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.mini-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.ms-users { background: linear-gradient(135deg, #eef2ff, #c7d2fe); }
.ms-posts { background: linear-gradient(135deg, #ecfdf5, #a7f3d0); }
.ms-checkins { background: linear-gradient(135deg, #fefce8, #fde68a); }
.ms-files { background: linear-gradient(135deg, #fdf2f8, #fbcfe8); }

.mini-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.mini-stat-label {
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 500;
}

/* ===== Dashboard Modules ===== */
.dash-module {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
}

.dash-module:hover {
    box-shadow: var(--shadow-md);
}

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

.module-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.module-body {
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
}

.module-badge {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.live-badge {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== Trending Posts ===== */
.trending-list { display: flex; flex-direction: column; gap: 10px; }

.trending-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    transition: all 0.25s;
    cursor: pointer;
}

.trending-item:hover {
    background: var(--primary-light);
    transform: translateX(4px);
}

.trending-rank {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: white; }
.rank-3 { background: linear-gradient(135deg, #d97706, #b45309); color: white; }
.rank-other { background: var(--border-light); color: var(--text-secondary); }

.trending-info { flex: 1; min-width: 0; }

.trending-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.trending-meta {
    font-size: 0.73rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Leaderboard ===== */
.leaderboard-list { display: flex; flex-direction: column; gap: 8px; }

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    transition: all 0.25s;
}

.leaderboard-item:hover { background: var(--bg); }

.lb-rank {
    width: 24px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-light);
    text-align: center;
}

.lb-rank-1 { color: #f59e0b; }
.lb-rank-2 { color: #94a3b8; }
.lb-rank-3 { color: #d97706; }

.lb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    color: white;
    flex-shrink: 0;
}

.lb-info { flex: 1; }

.lb-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.lb-score {
    font-size: 0.73rem;
    color: var(--text-light);
}

.lb-badge {
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.1));
    color: #d97706;
}

.empty-state-sm {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-light);
    font-size: 0.85rem;
}

/* ===== Forum Enhancements (Dark) ===== */
.post-card-click { cursor: pointer; }

.post-card .post-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.like-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}

.like-btn:hover {
    color: #f87171;
    background: rgba(248,113,113,0.1);
}

.like-btn.liked {
    color: #f87171;
    background: rgba(248,113,113,0.12);
}

.like-btn.liked .like-heart {
    animation: likeHeart 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.post-stat {
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
    font-weight: 500;
}

.post-image-thumb img, .post-detail-image img {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
}

@keyframes likeHeart {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Forum post card entrance animation */
#postsContainer > .post-card {
    opacity: 0;
    transform: translateY(16px);
    animation: postCardIn 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
}
#postsContainer > .post-card:nth-child(1) { animation-delay: 0.05s; }
#postsContainer > .post-card:nth-child(2) { animation-delay: 0.1s; }
#postsContainer > .post-card:nth-child(3) { animation-delay: 0.15s; }
#postsContainer > .post-card:nth-child(4) { animation-delay: 0.2s; }
#postsContainer > .post-card:nth-child(5) { animation-delay: 0.25s; }
#postsContainer > .post-card:nth-child(6) { animation-delay: 0.3s; }
#postsContainer > .post-card:nth-child(7) { animation-delay: 0.35s; }
#postsContainer > .post-card:nth-child(8) { animation-delay: 0.4s; }
@keyframes postCardIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Simulator Hero Card ===== */
/* ===== Data Analysis View ===== */

/* Hero Banner */
/* ============================================================
   HUD PANEL — Two-stage: Expanded (full-screen) → Collapsed
   ============================================================ */

/* --- Base container --- */
.da-hud {
    position: relative;
    background: linear-gradient(160deg, #060a14 0%, #0c1026 50%, #080e1c 100%);
    border: 1px solid rgba(99,102,241,0.1);
    border-radius: 28px;
    color: white;
    margin: 20px 28px 28px;
    overflow: hidden;
    box-shadow:
        0 8px 40px rgba(0,0,0,0.45),
        0 0 120px rgba(99,102,241,0.05),
        inset 0 1px 0 rgba(255,255,255,0.05);
    /* Transition for collapse animation */
    transition: min-height 0.8s cubic-bezier(0.4,0,0.2,1),
                padding 0.6s cubic-bezier(0.4,0,0.2,1),
                border-radius 0.6s ease;
}
.da-hud::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 60px rgba(99,102,241,0.04), 0 0 30px rgba(99,102,241,0.06);
    pointer-events: none;
    z-index: 0;
}

/* --- Particle canvas --- */
.da-hud-particles {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
    transition: opacity 0.6s ease;
}

/* --- Scan line --- */
.da-hud-scanline {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(99,102,241,0.012) 2px, rgba(99,102,241,0.012) 4px
    );
}
.da-hud-scanline::after {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 60px; top: -60px;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.05), transparent);
    animation: hudScan 5s linear infinite;
}
@keyframes hudScan { 0% { top: -60px; } 100% { top: 100%; } }

/* --- Dot grid --- */
.da-hud-grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image: radial-gradient(rgba(99,102,241,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    transition: opacity 0.6s ease;
}

/* --- Corner brackets --- */
.da-hud-corner {
    position: absolute; z-index: 5; pointer-events: none;
    transition: all 0.6s ease;
}
.da-hud-tl { top: 6px; left: 6px; width: 24px; height: 24px; border-top: 2px solid rgba(99,102,241,0.45); border-left: 2px solid rgba(99,102,241,0.45); }
.da-hud-tr { top: 6px; right: 6px; width: 24px; height: 24px; border-top: 2px solid rgba(99,102,241,0.45); border-right: 2px solid rgba(99,102,241,0.45); }
.da-hud-bl { bottom: 6px; left: 6px; width: 24px; height: 24px; border-bottom: 2px solid rgba(99,102,241,0.45); border-left: 2px solid rgba(99,102,241,0.45); }
.da-hud-br { bottom: 6px; right: 6px; width: 24px; height: 24px; border-bottom: 2px solid rgba(99,102,241,0.45); border-right: 2px solid rgba(99,102,241,0.45); }

/* --- Decorative hex rings --- */
.da-hex-ring {
    position: absolute; pointer-events: none; z-index: 1;
    width: 280px; height: 280px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(99,102,241,0.06);
    border-radius: 50%;
    animation: hexSpin 30s linear infinite;
    transition: opacity 0.6s ease;
}
.da-hex-ring::before {
    content: '';
    position: absolute; inset: 20px;
    border: 1px dashed rgba(99,102,241,0.04);
    border-radius: 50%;
}
.da-hex-ring-2 {
    width: 380px; height: 380px;
    border-style: dashed;
    border-color: rgba(99,102,241,0.03);
    animation-direction: reverse;
    animation-duration: 40s;
}
@keyframes hexSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ========== EXPANDED STATE (Full Screen) ========== */
.da-hud-expanded {
    min-height: calc(100vh - 90px);
    padding: 60px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hero section (visible only in expanded) */
.da-hud-hero {
    position: relative; z-index: 10;
    text-align: center;
    margin-bottom: 40px;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Hexagonal emblem */
.da-hud-emblem {
    position: relative;
    width: 90px; height: 90px;
    margin: 0 auto 20px;
}
.da-hud-hex-svg {
    width: 100%; height: 100%;
    animation: emblemFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(99,102,241,0.3));
}
@keyframes emblemFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.da-hud-emblem-pulse {
    position: absolute; inset: -8px;
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 50%;
    animation: emblemPulseRing 3s ease-out infinite;
}
@keyframes emblemPulseRing {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}

.da-hud-hero-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0 0 8px;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #e0e7ff 0%, #a5b4fc 40%, #818cf8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    line-height: 1.2;
}
.da-hud-hero-tagline {
    font-size: 0.72rem;
    color: rgba(165,180,252,0.45);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* Status chips */
.da-hud-status-row {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.da-hud-chip {
    font-size: 0.6rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(165,180,252,0.5);
    padding: 3px 10px;
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 20px;
    background: rgba(99,102,241,0.04);
}
.da-hud-chip-green {
    color: rgba(52,211,153,0.7);
    border-color: rgba(52,211,153,0.2);
    background: rgba(52,211,153,0.04);
}
.da-hud-chip-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(99,102,241,0.3);
}

/* Inline header (hidden in expanded) */
.da-hud-inline-header {
    display: none;
    align-items: center; gap: 12px;
    flex-shrink: 0;
    position: relative; z-index: 10;
}

/* Controls wrapper */
.da-hud-controls-wrap {
    position: relative; z-index: 10;
    width: 100%;
    max-width: 600px;
    transition: max-width 0.6s ease;
}

/* Expanded: controls centered */
.da-hud-expanded .da-hud-controls-wrap {
    max-width: 600px;
    margin: 0 auto;
}

/* Controls row */
.da-hud-controls {
    display: flex; align-items: flex-end; gap: 10px;
    flex-wrap: wrap;
}
.da-hud-field {
    display: flex; flex-direction: column; gap: 5px;
    flex: 1; min-width: 130px;
}
.da-hud-label {
    font-size: 0.6rem; font-weight: 700;
    color: rgba(99,102,241,0.55);
    text-transform: uppercase; letter-spacing: 0.12em;
    font-family: 'Courier New', monospace;
}
.da-hud-divider {
    width: 1px; height: 30px; flex-shrink: 0;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.25), transparent);
    align-self: center;
}

/* HUD Select */
.da-hud-select {
    width: 100%; padding: 9px 12px;
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 8px; font-size: 0.8rem;
    background: rgba(99,102,241,0.05);
    color: #c7d2fe;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s; cursor: pointer;
    font-family: inherit;
}
.da-hud-select option { background: #0d1225; color: #c7d2fe; }
.da-hud-select:focus { border-color: rgba(99,102,241,0.6); outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 0 16px rgba(99,102,241,0.08); }
.da-hud-select:hover { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.08); }

.da-source-dropzone { display: flex; align-items: center; gap: 8px; }
.da-source-dropzone.da-dragover { background: rgba(6,182,212,0.06); border-radius: 8px; }

/* HUD Analyze Button (Expanded = large, Collapsed = compact) */
.da-hud-run {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 28px;
    border: 1px solid rgba(99,102,241,0.4);
    border-radius: 8px; font-size: 0.8rem; font-weight: 800;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #c7d2fe;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    cursor: pointer; white-space: nowrap;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    position: relative; overflow: hidden;
}
.da-hud-run::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.25), transparent);
    transform: translateX(-100%); transition: transform 0.5s;
}
.da-hud-run:hover:not(:disabled)::before { transform: translateX(100%); }
.da-hud-run:hover:not(:disabled) {
    border-color: rgba(99,102,241,0.7);
    box-shadow: 0 0 24px rgba(99,102,241,0.3), 0 0 60px rgba(99,102,241,0.1), inset 0 0 20px rgba(99,102,241,0.06);
    color: white;
}
.da-hud-run:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.1s; }
.da-hud-run:disabled { opacity: 0.2; cursor: not-allowed; }
.da-hud-run-icon { font-size: 0.75rem; }

/* Expanded: button spans full width */
.da-hud-expanded .da-hud-run {
    width: 100%;
    margin-top: 8px;
    padding: 12px 28px;
    font-size: 0.85rem;
    border-radius: 10px;
}

/* ========== COLLAPSED STATE ========== */
.da-hud-collapsed {
    min-height: 0;
    padding: 14px 20px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    border-radius: 12px;
}

/* Hide hero in collapsed */
.da-hud-collapsed .da-hud-hero {
    display: none;
}
/* Show inline header in collapsed */
.da-hud-collapsed .da-hud-inline-header {
    display: flex;
}
/* Hide decorative rings in collapsed */
.da-hud-collapsed .da-hex-ring {
    opacity: 0;
}
/* Dim particles in collapsed */
.da-hud-collapsed .da-hud-particles {
    opacity: 0.3;
}
/* Fade grid in collapsed */
.da-hud-collapsed .da-hud-grid {
    opacity: 0.4;
}
/* Shrink corners in collapsed */
.da-hud-collapsed .da-hud-corner { width: 14px; height: 14px; }
.da-hud-collapsed .da-hud-tl { top: 3px; left: 3px; }
.da-hud-collapsed .da-hud-tr { top: 3px; right: 3px; }
.da-hud-collapsed .da-hud-bl { bottom: 3px; left: 3px; }
.da-hud-collapsed .da-hud-br { bottom: 3px; right: 3px; }

/* Controls: inline in collapsed */
.da-hud-collapsed .da-hud-controls-wrap {
    flex: 1; min-width: 0;
    max-width: none;
    margin: 0;
}
.da-hud-collapsed .da-hud-run {
    width: auto; margin-top: 0;
    padding: 7px 18px; font-size: 0.72rem;
    border-radius: 6px;
}
.da-hud-collapsed .da-hud-select {
    padding: 6px 10px; font-size: 0.76rem;
    border-radius: 6px;
}

/* Inline badge (collapsed) */
.da-hud-badge {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.25);
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
}
.da-hud-pulse {
    position: absolute; top: 4px; right: 4px;
    width: 5px; height: 5px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 6px #34d399;
    animation: hudPulse 2s ease-in-out infinite;
}
@keyframes hudPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.da-hud-badge-text {
    font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em;
    color: rgba(99,102,241,0.7);
}
.da-hud-title {
    font-size: 0.95rem; font-weight: 800; margin: 0;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, #c7d2fe, #818cf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.da-hud-sub {
    font-size: 0.6rem; color: rgba(255,255,255,0.3); margin: 1px 0 0 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.06em;
}

/* --- Loading bar (shared) --- */
.da-loading-bar {
    position: relative; z-index: 10;
    margin-top: 14px;
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    width: 100%;
}
.da-hud-collapsed .da-loading-bar {
    margin-top: 8px;
    flex-basis: 100%;
}
.da-loading-track {
    width: 200px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    margin: 0 auto 8px;
    overflow: hidden;
}
.da-loading-fill {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #06b6d4, #6366f1);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: daLoadSlide 1.2s ease-in-out infinite;
}
@keyframes daLoadSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Summary Stats Cards */
.da-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.da-summary-card {
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.3s;
    animation: daSummaryIn 0.5s ease-out both;
    backdrop-filter: blur(12px);
}
.da-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: rgba(99,102,241,0.2);
}

@keyframes daSummaryIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.da-summary-value {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--sc-from, #6366f1), var(--sc-to, #8b5cf6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.da-summary-label {
    font-size: 0.78rem;
    color: rgba(148,163,184,0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Analytics Tab Bar */
.da-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
    z-index: 20;
}
.da-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(148,163,184,0.7);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    white-space: nowrap;
}
.da-tab-btn:hover {
    color: #e2e8f0;
    background: rgba(99,102,241,0.1);
}
.da-tab-btn.da-tab-active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.da-tab-icon {
    font-size: 1.05rem;
    line-height: 1;
}
.da-tab-panel {
    display: none;
    animation: daTabFadeIn 0.4s ease;
}
.da-tab-panel-active {
    display: block;
}
@keyframes daTabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glass Cards */
.da-glass-card {
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(12px);
}
.da-glass-card:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    border-color: rgba(99,102,241,0.15);
}

/* Reveal Animation */
.da-reveal {
    animation: daRevealIn 0.5s ease-out both;
    animation-delay: var(--reveal-delay, 0s);
}
@keyframes daRevealIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.da-glass-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}

.da-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.da-header-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--dot-color, #6366f1);
    box-shadow: 0 0 8px var(--dot-color, #6366f1);
}

.da-glass-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.da-badge-glass {
    font-size: 0.78rem;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
    color: #a5b4fc;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(99,102,241,0.2);
}

/* Data Table */
.da-table-wrap { overflow-x: auto; padding: 0 4px 4px; }

.da-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.83rem;
}

.da-table th, .da-table td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(226,232,240,0.85);
}

.da-table th {
    background: rgba(255,255,255,0.05);
    font-weight: 700;
    color: #c7d2fe;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.da-table tbody tr { transition: background 0.2s; }
.da-table tbody tr:hover { background: rgba(99,102,241,0.08); }

.da-stats-table td:first-child {
    font-weight: 700;
    background: rgba(99,102,241,0.06);
    color: #a5b4fc;
    min-width: 90px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Charts Grid */
.da-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
}

.da-chart-body {
    position: relative;
    min-height: 300px;
    padding: 16px;
}

/* Column Selectors */
.da-col-select-glass {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.05);
    color: #e2e8f0;
    transition: all 0.2s;
    cursor: pointer;
}
.da-col-select-glass option { background: #0d1225; color: #e2e8f0; }
.da-col-select-glass:hover { border-color: rgba(99,102,241,0.4); }
.da-col-select-glass:focus { outline: none; border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }

.da-scatter-selects {
    display: flex;
    align-items: center;
    gap: 6px;
}
.da-vs {
    font-size: 0.75rem;
    color: rgba(148,163,184,0.5);
    font-weight: 600;
    text-transform: uppercase;
}

/* OLS X variable picker dropdown */
.da-x-picker { position: relative; }
.da-x-picker-btn {
    padding: 6px 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    font-size: 0.82rem; background: rgba(255,255,255,0.05); color: #e2e8f0;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.da-x-picker-btn:hover { border-color: rgba(99,102,241,0.4); }
.da-x-picker-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 180px; max-height: 220px; overflow-y: auto;
    background: rgba(13,18,37,0.95); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 6px 0; z-index: 50;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5); backdrop-filter: blur(16px);
}
.da-x-picker-dropdown.open { display: block; }
.da-x-picker-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 14px;
    font-size: 0.82rem; cursor: pointer; transition: background 0.15s;
    color: #e2e8f0;
}
.da-x-picker-item:hover { background: rgba(99,102,241,0.08); }
.da-x-picker-item input[type="checkbox"] {
    accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer;
}

/* Correlation Matrix — Neon Heatmap */
.da-corr-table td {
    text-align: center; font-variant-numeric: tabular-nums; font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid rgba(255,255,255,0.03);
    padding: 10px 12px;
    color: rgba(226,232,240,0.7);
}
.da-corr-table td.corr-high {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(52,211,153,0.12));
    color: #34d399; font-weight: 700;
    text-shadow: 0 0 10px rgba(52,211,153,0.4);
    box-shadow: inset 0 0 16px rgba(52,211,153,0.08);
}
.da-corr-table td.corr-mid {
    background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.08));
    color: #fbbf24; font-weight: 600;
    text-shadow: 0 0 8px rgba(251,191,36,0.3);
    box-shadow: inset 0 0 12px rgba(251,191,36,0.06);
}
.da-corr-table td.corr-low {
    background: rgba(255,255,255,0.02);
    color: rgba(148,163,184,0.45);
}
.da-corr-table td.corr-neg-high {
    background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(239,68,68,0.12));
    color: #fb7185; font-weight: 700;
    text-shadow: 0 0 10px rgba(244,63,94,0.4);
    box-shadow: inset 0 0 16px rgba(244,63,94,0.08);
}
.da-corr-table td.corr-diag {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    font-weight: 800; color: #c4b5fd;
    text-shadow: 0 0 12px rgba(139,92,246,0.5);
    box-shadow: inset 0 0 20px rgba(99,102,241,0.1);
}
.da-corr-table td:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 0 24px rgba(99,102,241,0.1);
    z-index: 1; position: relative;
    border-color: rgba(255,255,255,0.12);
}

@media (max-width: 600px) {
    .da-charts-grid { grid-template-columns: 1fr; }
    .da-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .highlights-grid { grid-template-columns: 1fr; }
    .auto-features { grid-template-columns: 1fr; }
    .auto-methods { padding: 24px 16px; }
    .auto-method-tags { gap: 6px; }
    .auto-method-tag { font-size: 0.75rem; padding: 5px 12px; }
    .da-tab-bar { overflow-x: auto; gap: 0; }
    .da-tab-btn { font-size: 0.78rem; padding: 10px 10px; min-width: 0; }
    .da-tab-icon { font-size: 0.9rem; }
}

/* ===== Local CSV Upload Buttons ===== */
.da-upload-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 6px;
    border: 1px solid rgba(6,182,212,0.3);
    background: rgba(6,182,212,0.06);
    color: #67e8f9; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}
.da-upload-btn:hover {
    background: rgba(6,182,212,0.12);
    border-color: rgba(6,182,212,0.5);
    box-shadow: 0 0 12px rgba(6,182,212,0.15);
}
.da-upload-file-info {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.2);
    animation: daFileInfoIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes daFileInfoIn { from { opacity:0; transform: scale(0.95); } to { opacity:1; transform: scale(1); } }
.da-upload-file-icon { font-size: 0.95rem; }
.da-upload-file-name {
    flex: 1; font-size: 0.75rem; font-weight: 600; color: #6ee7b7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: 'Courier New', monospace;
}
.da-upload-file-size { font-size: 0.65rem; color: rgba(255,255,255,0.35); font-family: 'Courier New', monospace; }
.da-upload-remove {
    width: 20px; height: 20px; border-radius: 4px; border: none;
    background: rgba(239,68,68,0.15); color: #fca5a5; font-size: 0.85rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.da-upload-remove:hover { background: rgba(239,68,68,0.35); }
/* Responsive HUD */
@media (max-width: 600px) {
    .da-hud-expanded { padding: 40px 20px 30px; min-height: calc(100vh - 80px); }
    .da-hud-hero-title { font-size: 1.6rem; }
    .da-hud-hero-tagline { font-size: 0.6rem; letter-spacing: 0.08em; }
    .da-hud-emblem { width: 70px; height: 70px; }
    .da-hud-status-row { flex-wrap: wrap; gap: 6px; }
    .da-hud-controls { flex-direction: column; }
    .da-hud-divider { width: 100%; height: 1px; }
    .da-hud-collapsed { flex-direction: column; align-items: stretch; padding: 12px 14px 10px; }
    .da-hud-collapsed .da-hud-inline-header { justify-content: center; }
    .da-hex-ring, .da-hex-ring-2 { display: none; }
}

/* ===== Econometrics Section ===== */
.da-section-divider {
    display: flex; align-items: center; gap: 16px;
    margin: 32px 0 24px; padding: 0 4px;
}
.da-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
.da-divider-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 18px; border-radius: 9999px;
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
    border: 1px solid rgba(99,102,241,0.2);
    font-size: 0.85rem; font-weight: 700; color: #a5b4fc;
    letter-spacing: 0.02em;
}
.da-econ-results { padding: 16px 20px; }
.da-econ-model-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.da-econ-stat-card {
    background: rgba(255,255,255,0.04); border-radius: 12px;
    padding: 12px 14px; text-align: center;
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.25s;
    backdrop-filter: blur(8px);
}
.da-econ-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border-color: rgba(99,102,241,0.2);
}
.da-econ-stat-value {
    font-size: 1.3rem; font-weight: 800; color: #a5b4fc;
    font-variant-numeric: tabular-nums;
}
.da-econ-stat-label {
    font-size: 0.68rem; color: rgba(148,163,184,0.6);
    font-weight: 500; margin-top: 2px;
}
/* Significance stars */
.da-sig-stars { color: #fbbf24; font-weight: 700; margin-left: 4px; text-shadow: 0 0 6px rgba(251,191,36,0.4); }
.da-sig-cell { font-variant-numeric: tabular-nums; }
.da-sig-high { color: #34d399; font-weight: 700; text-shadow: 0 0 6px rgba(52,211,153,0.3); }
.da-sig-mid { color: #fbbf24; font-weight: 600; }
.da-sig-low { color: rgba(148,163,184,0.6); }
/* Normality result cards */
.da-normality-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.da-normality-card {
    background: rgba(255,255,255,0.04); border-radius: 12px;
    padding: 14px 16px; border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.25s;
    backdrop-filter: blur(8px);
}
.da-normality-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.25); border-color: rgba(99,102,241,0.2); }
.da-normality-name { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
.da-normality-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.75rem; padding: 2px 0;
}
.da-normality-label { color: rgba(148,163,184,0.6); }
.da-normality-val { font-weight: 600; font-variant-numeric: tabular-nums; color: #cbd5e1; }
.da-normality-verdict {
    display: inline-block; margin-top: 6px; padding: 2px 10px;
    border-radius: 9999px; font-size: 0.7rem; font-weight: 700;
}
.da-verdict-pass { background: rgba(34,197,94,0.1); color: #16a34a; border: 1px solid rgba(34,197,94,0.2); }
.da-verdict-fail { background: rgba(239,68,68,0.08); color: #dc2626; border: 1px solid rgba(239,68,68,0.15); }
/* t-test results */
.da-ttest-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}
.da-ttest-card {
    background: rgba(255,255,255,0.04); border-radius: 12px;
    padding: 14px 16px; text-align: center;
    border: 1px solid rgba(255,255,255,0.07); transition: all 0.25s;
    backdrop-filter: blur(8px);
}
.da-ttest-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.25); border-color: rgba(99,102,241,0.2); }
.da-ttest-val { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #e2e8f0; }
.da-ttest-label { font-size: 0.7rem; color: rgba(148,163,184,0.6); margin-top: 2px; }

/* ===== Stats Sub-tabs ===== */
.da-stats-subtabs {
    display: flex; gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    overflow-x: auto;
}
.da-subtab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border: none; border-radius: 9px;
    background: transparent;
    color: rgba(148,163,184,0.7);
    font-size: 0.8rem; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    position: relative;
}
.da-subtab:hover { background: rgba(99,102,241,0.1); color: #e2e8f0; }
.da-subtab-active {
    background: rgba(99,102,241,0.15) !important;
    color: #a5b4fc !important;
    box-shadow: 0 2px 12px rgba(99,102,241,0.2);
    border: 1px solid rgba(99,102,241,0.25);
}
.da-subtab-icon { font-size: 0.9rem; }
.da-subtab-badge {
    font-size: 0.55rem; font-weight: 800;
    padding: 1px 5px; border-radius: 8px;
    letter-spacing: 0.04em;
}
.da-subtab-badge-ok {
    background: rgba(34,197,94,0.12); color: #16a34a;
}
.da-subtab-badge-na {
    background: rgba(148,163,184,0.12); color: #94a3b8;
}
.da-subtab-badge-hidden { display: none; }

/* Sub-panels */
.da-stats-subpanel { display: none; }
.da-stats-subpanel-active { display: block; animation: viewFade 0.35s ease; }

/* Compatibility notice */
.da-compat-notice {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.82rem; line-height: 1.6;
}
.da-compat-warning {
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.2);
    color: #e2e8f0;
}
.da-compat-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.da-compat-text strong { color: #d97706; }

/* Panel data labels */
.da-panel-label {
    font-size: 0.6rem; font-weight: 700;
    color: rgba(148,163,184,0.5);
    text-transform: uppercase; letter-spacing: 0.06em;
}

/* ARIMA parameter controls */
.da-arima-controls {
    display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
}
.da-arima-param-group {
    display: flex; gap: 4px;
    padding: 4px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
}
.da-arima-param {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.da-arima-param label {
    font-size: 0.6rem; font-weight: 800;
    color: rgba(148,163,184,0.5); text-transform: uppercase;
    letter-spacing: 0.06em;
}
.da-arima-input {
    width: 38px; padding: 4px 2px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px; font-size: 0.78rem;
    text-align: center; background: rgba(255,255,255,0.06);
    color: #e2e8f0; font-family: 'Courier New', monospace;
    font-weight: 700;
    transition: border-color 0.2s;
}
.da-arima-input:focus { border-color: rgba(99,102,241,0.5); outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.da-arima-sep {
    font-size: 0.9rem; font-weight: 600; color: rgba(148,163,184,0.4);
    padding-bottom: 6px;
}
.da-arima-auto-btn {
    padding: 6px 14px; border: 1px solid rgba(99,102,241,0.3);
    border-radius: 7px; background: rgba(99,102,241,0.08);
    color: #a5b4fc; font-size: 0.72rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
    transition: all 0.25s; white-space: nowrap;
    letter-spacing: 0.02em;
}
.da-arima-auto-btn:hover {
    background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.5);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.da-arima-auto-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* Panel model tabs (FE/RE toggle) */
.da-panel-model-tabs {
    display: flex; gap: 4px;
    margin: 14px 0 12px;
    padding: 3px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
    width: fit-content;
}
.da-panel-model-btn {
    padding: 6px 16px; border: none; border-radius: 6px;
    background: transparent; color: rgba(148,163,184,0.7);
    font-size: 0.75rem; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: all 0.2s;
    letter-spacing: 0.02em;
}
.da-panel-model-btn:hover { background: rgba(99,102,241,0.1); }
.da-panel-model-active {
    background: rgba(99,102,241,0.15) !important; color: #a5b4fc !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
    border: 1px solid rgba(99,102,241,0.25);
}
.da-panel-model-result { margin-bottom: 8px; }

/* Hausman test result */
.da-panel-hausman {
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    color: #e2e8f0;
}

/* ===== Code Examples Enhancement ===== */
.code-example {
    position: relative;
}

.code-example::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 2px solid transparent;
    transition: border-color 0.3s;
    pointer-events: none;
}

.code-example:hover::after {
    border-color: rgba(99, 102, 241, 0.2);
}

/* ===== Attendance Enhancement ===== */
.checkin-btn {
    position: relative;
    overflow: hidden;
}

.checkin-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
    transform: translate(-50%, -50%);
}

.checkin-btn:active::before {
    width: 300px;
    height: 300px;
}

/* ===== Confetti Canvas ===== */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ========================================
   IMMERSIVE DASHBOARD (matches landing page)
   ======================================== */

/* --- Dark Container --- */
.dash-dark {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 0 0 48px 0;
}

/* --- Floating Orbs Background (reuse landing classes) --- */
.dash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.dash-bg-prof .hero-orb-1 {
    background: radial-gradient(circle, rgba(139,92,246,0.4) 0%, transparent 70%);
}
.dash-bg-prof .hero-orb-2 {
    background: radial-gradient(circle, rgba(168,85,247,0.35) 0%, transparent 70%);
}
.dash-bg-prof .hero-orb-3 {
    background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
}

/* --- Glass Top Bar --- */
.dash-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0 24px 0;
    gap: 24px;
    flex-wrap: wrap;
}
.dash-topbar-left {}
.dash-greeting {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    margin-bottom: 4px;
}
.dash-bigname {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 60%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.dash-subtitle {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.35);
    font-weight: 400;
    margin-top: 6px;
    max-width: 400px;
    line-height: 1.5;
    animation: subtitleFade 1s 0.4s both;
}
@keyframes subtitleFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Stat pills */
.dash-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9999px;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.85rem;
}
.dash-pill-icon { font-size: 1.1rem; }
.dash-pill-sub { font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.dash-xp-bar {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}
.dash-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* Professor attendance ring widget */
.dash-ring-widget {
    position: relative;
    width: 64px;
    height: 64px;
}
.dash-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ring-bg-circle {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 5;
}
.dash-ring-fill-circle {
    fill: none;
    stroke: #a78bfa;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}
.dash-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-ring-pct {
    font-size: 0.82rem;
    font-weight: 800;
    color: #c4b5fd;
}
.dash-ring-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-ring-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}
.dash-ring-detail {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

/* --- Announcement Banner --- */
.dash-announce-banner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 12px;
    margin-bottom: 24px;
    color: #c7d2fe;
    font-size: 0.85rem;
}
.dash-announce-icon { font-size: 1.2rem; }
.dash-announce-text { flex: 1; overflow: hidden; }
.dash-announce-text .ds-announce-item {
    padding: 2px 0;
    color: rgba(255,255,255,0.7);
}
.dash-announce-text .ds-announce-item strong { color: #c7d2fe; }
.ds-announce-time { color: rgba(255,255,255,0.35); font-size: 0.72rem; margin-left: 8px; }

/* --- Professor Metrics Row --- */
.dash-metrics-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.dash-metric-glass {
    padding: 20px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.dash-metric-glass:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.dash-metric-num {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}
.dash-metric-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
}
.metric-glow-purple .dash-metric-num { color: #c4b5fd; }
.metric-glow-green .dash-metric-num { color: #86efac; }
.metric-glow-blue .dash-metric-num { color: #93c5fd; }
.metric-glow-amber .dash-metric-num { color: #fcd34d; }
.metric-glow-purple { border-color: rgba(167,139,250,0.2); }
.metric-glow-green { border-color: rgba(134,239,172,0.2); }
.metric-glow-blue { border-color: rgba(147,197,253,0.2); }
.metric-glow-amber { border-color: rgba(252,211,77,0.2); }

/* --- Main Layout: Feed + Sidebar --- */
.dash-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
/* When sidebar exists (professor dashboard) */
.dash-layout:has(.dash-sidebar) {
    grid-template-columns: 1fr 320px;
}

/* --- Feed Column --- */
.dash-feed { min-width: 0; }
.dash-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.dash-section-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.15;
}

/* override title color for dark dash */
.dash-dark .dash-section-title {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dash-feed-actions { display: flex; gap: 8px; }

/* Glass buttons */
.dash-glass-btn {
    padding: 8px 18px;
    background: rgba(99,102,241,0.2);
    border: 1px solid rgba(99,102,241,0.35);
    border-radius: 9999px;
    color: #c7d2fe;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.dash-glass-btn:hover {
    background: rgba(99,102,241,0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.dash-btn-dim {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}
.dash-btn-dim:hover { background: rgba(255,255,255,0.1); box-shadow: none; }
.dash-glass-btn-sm {
    padding: 4px 12px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 9999px;
    color: #a5b4fc;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.dash-glass-btn-sm:hover { background: rgba(99,102,241,0.3); }

/* Feed empty state */
.dash-feed-empty {
    text-align: center;
    padding: 48px 24px;
    color: rgba(255,255,255,0.4);
}
.dash-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.dash-feed-empty p { margin-bottom: 16px; }
.dash-empty-sm { color: rgba(255,255,255,0.35); font-size: 0.82rem; padding: 12px 0; text-align: center; }

/* ========================================
   INTERACTIVE FEED CARDS (Social style)
   ======================================== */
.dash-feed-list { display: flex; flex-direction: column; gap: 16px; }

.feed-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.feed-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.feed-card-header { padding: 20px 24px 0; }
.feed-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.feed-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.feed-avatar-stu { background: linear-gradient(135deg, #6366f1, #818cf8); }
.feed-avatar-prof { background: linear-gradient(135deg, #a855f7, #c084fc); }
.feed-author-info { flex: 1; min-width: 0; }
.feed-author-name { font-weight: 600; font-size: 0.88rem; color: #e2e8f0; }
.feed-role-badge {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(168,85,247,0.2);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #d8b4fe;
    margin-left: 6px;
    vertical-align: middle;
}
.feed-time { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.feed-category {
    padding: 3px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

.feed-card-body {
    padding: 12px 24px 8px;
    cursor: pointer;
}
.feed-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
.feed-content {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.feed-card-expanded .feed-content { max-height: 600px; }

/* Actions bar */
.feed-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.feed-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: none;
    border: none;
    border-radius: 9999px;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.feed-action-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
}
.feed-action-icon { font-size: 0.95rem; }
.feed-liked { color: #f87171 !important; }
.feed-liked .feed-action-icon { color: #f87171; }

/* Comment previews */
.feed-comments-preview {
    padding: 4px 24px 8px;
}
.feed-comment-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.8rem;
}
.feed-comment-avatar {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(99,102,241,0.3);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #c7d2fe;
    flex-shrink: 0;
}
.feed-comment-name { font-weight: 600; color: rgba(255,255,255,0.6); white-space: nowrap; }
.feed-comment-text { color: rgba(255,255,255,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full comments panel */
.feed-comments-full {
    padding: 8px 24px;
    border-top: 1px solid rgba(255,255,255,0.05);
    max-height: 300px;
    overflow-y: auto;
}
.feed-comment-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}
.feed-comment-prof .feed-comment-avatar { background: rgba(168,85,247,0.3); color: #d8b4fe; }
.feed-comment-body { flex: 1; min-width: 0; }
.feed-comment-body .feed-comment-name { font-size: 0.78rem; display: block; margin-bottom: 2px; }
.feed-comment-body .feed-comment-text { font-size: 0.82rem; white-space: normal; display: block; color: rgba(255,255,255,0.55); line-height: 1.5; }
.feed-comment-time { font-size: 0.68rem; color: rgba(255,255,255,0.25); margin-top: 3px; display: block; }
.feed-loading { text-align: center; padding: 16px; color: rgba(255,255,255,0.3); font-size: 0.82rem; }
.feed-no-comments { text-align: center; padding: 16px; color: rgba(255,255,255,0.3); font-size: 0.82rem; }

/* Reply box */
.feed-reply-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
/* Feed reply avatar with sparkle */
.feed-reply-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    animation: feedReplyAvatarPulse 3.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(99,102,241,0.2), 0 0 16px rgba(168,85,247,0.08);
}
/* ── Feed reply avatar surface glint ── */
.feed-reply-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent          0%,
        transparent          42%,
        rgba(255,255,255,0.28) 49%,
        rgba(255,255,255,0.06) 51%,
        transparent          58%,
        transparent          100%
    );
    background-size: 300% 100%;
    background-position: 120% 0;
    pointer-events: none;
    animation: surfaceGlint 6s ease-in-out infinite;
}
/* ── Feed reply bar surface sweep ── */
.feed-reply-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent          0%,
        transparent          44%,
        rgba(255,255,255,0.03) 47%,
        rgba(255,255,255,0.07) 50%,
        rgba(255,255,255,0.03) 53%,
        transparent          56%,
        transparent          100%
    );
    background-size: 300% 100%;
    background-position: 120% 0;
    pointer-events: none;
    z-index: 2;
    animation: surfaceGlint 9s ease-in-out 1.5s infinite;
}
@keyframes feedReplyAvatarPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(99,102,241,0.2), 0 0 16px rgba(168,85,247,0.08); }
    50%      { box-shadow: 0 0 14px rgba(99,102,241,0.35), 0 0 24px rgba(168,85,247,0.15); }
}
.feed-reply-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: #e2e8f0;
    outline: none;
    transition: all 0.2s;
}
.feed-reply-input::placeholder { color: rgba(255,255,255,0.25); }
.feed-reply-input:focus {
    border-color: rgba(99,102,241,0.4);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.feed-reply-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.feed-reply-send:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(99,102,241,0.4);
}

/* ========================================
   SIDEBAR GLASS CARDS
   ======================================== */
.dash-sidebar { display: flex; flex-direction: column; gap: 16px; }

.dash-glass-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.25s;
}
.dash-glass-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.dash-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 14px;
}
.dash-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dash-card-title-row .dash-card-title { margin-bottom: 0; }

/* Quick action grid */
.dash-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.dash-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.dash-action-item:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.3);
    transform: translateY(-2px);
}
.dash-action-icon { font-size: 1.5rem; }
.dash-action-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}

/* Live dot */
.dash-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52,211,153,0.5);
    animation: livePulse 2s infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Activity list in sidebar */
.dash-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-activity-list .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.78rem;
}
.dash-activity-list .activity-icon { font-size: 0.9rem; flex-shrink: 0; }
.dash-activity-list .activity-text { color: rgba(255,255,255,0.6); line-height: 1.4; }
.dash-activity-list .activity-time { font-size: 0.68rem; color: rgba(255,255,255,0.25); }

/* Students scroll */
.dash-students-scroll { max-height: 360px; overflow-y: auto; }

/* Prof announcements in sidebar */
.prof-announcement-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s;
}
.prof-announcement-item:hover { background: rgba(255,255,255,0.06); }
.prof-announcement-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.prof-announcement-meta { display: flex; align-items: center; gap: 6px; }
.prof-announcement-avatar {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, #a855f7, #c084fc);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; color: white;
}
.prof-announcement-name { font-weight: 600; font-size: 0.78rem; color: #e2e8f0; }
.prof-announcement-time { font-size: 0.65rem; color: rgba(255,255,255,0.3); }
.prof-announcement-title { font-weight: 700; font-size: 0.82rem; color: #e2e8f0; margin-bottom: 2px; }
.prof-announcement-content { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.5; }

/* Prof student overview (redesigned) */
.pso-summary {
    display: flex; gap: 6px; padding: 6px 0 10px; flex-wrap: wrap;
}
.pso-stat-chip {
    font-size: 0.68rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; display: inline-flex; align-items: center; gap: 3px;
}
.pso-chip-total { background: rgba(99,102,241,0.1); color: #a5b4fc; }
.pso-chip-active { background: rgba(16,185,129,0.1); color: #6ee7b7; }
.pso-chip-engage { background: rgba(245,158,11,0.1); color: #fcd34d; }
.pso-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 6px;
    border-radius: 10px; transition: all 0.2s; cursor: default;
}
.pso-row:hover { background: rgba(255,255,255,0.04); }
.pso-avatar {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800; color: white;
}
.pso-avatar-fire { background: linear-gradient(135deg, #f97316, #ef4444); box-shadow: 0 2px 10px rgba(249,115,22,0.3); }
.pso-avatar-star { background: linear-gradient(135deg, #a855f7, #6366f1); box-shadow: 0 2px 10px rgba(168,85,247,0.25); }
.pso-avatar-active { background: linear-gradient(135deg, #3b82f6, #06b6d4); box-shadow: 0 2px 10px rgba(59,130,246,0.2); }
.pso-avatar-quiet { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); box-shadow: none; color: rgba(255,255,255,0.4); }
.pso-info { flex: 1; min-width: 0; }
.pso-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.pso-name { font-size: 0.78rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.pso-guest-tag {
    font-size: 0.6rem; font-weight: 600; padding: 1px 6px; border-radius: 6px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35);
}
.pso-level {
    font-size: 0.6rem; font-weight: 700; padding: 1px 7px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
}
.pso-lv-fire { background: rgba(249,115,22,0.12); color: #fb923c; }
.pso-lv-star { background: rgba(168,85,247,0.12); color: #c084fc; }
.pso-lv-active { background: rgba(59,130,246,0.12); color: #93c5fd; }
.pso-lv-quiet { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); }
.pso-streak {
    font-size: 0.62rem; font-weight: 700; color: #f97316;
    display: inline-flex; align-items: center; gap: 1px;
}
.pso-stats-row { display: flex; align-items: center; gap: 8px; }
.pso-mini-stat { font-size: 0.65rem; color: rgba(255,255,255,0.4); white-space: nowrap; }
.pso-engage-bar {
    flex: 1; height: 4px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden; min-width: 30px; max-width: 60px;
}
.pso-engage-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.pso-time { font-size: 0.6rem; color: rgba(255,255,255,0.25); white-space: nowrap; margin-left: auto; }

/* Legacy compat */
.prof-student-list { display: flex; flex-direction: column; gap: 2px; }
.prof-student-header {
    display: grid; grid-template-columns: 2fr 1fr 0.8fr 0.8fr; gap: 6px;
    padding: 6px 8px; font-size: 0.65rem; font-weight: 700;
    color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.prof-student-row {
    display: grid; grid-template-columns: 2fr 1fr 0.8fr 0.8fr; gap: 6px;
    align-items: center; padding: 8px;
    border-radius: 8px; transition: background 0.2s; font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}
.prof-student-row:hover { background: rgba(255,255,255,0.04); }
.prof-student-name-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #e2e8f0; }
.prof-student-avatar {
    width: 24px; height: 24px; border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: white;
}
.prof-student-id { font-size: 0.7rem; color: rgba(255,255,255,0.35); font-family: monospace; }
.prof-student-stat { font-weight: 700; font-size: 0.78rem; text-align: center; color: rgba(255,255,255,0.6); }


/* ========================================
   DASHBOARD ENHANCEMENTS — Quick Nav + Animations
   ======================================== */

/* --- Student Quick Nav Cards --- */
.dash-quick-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.dash-nav-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}
.dash-nav-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.35s;
}
.dash-nav-card:hover::before { opacity: 1; }
.dash-nav-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.dash-nav-forum::before { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)); }
.dash-nav-forum:hover { border-color: rgba(99,102,241,0.3); }
.dash-nav-prompts::before { background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.08)); }
.dash-nav-prompts:hover { border-color: rgba(251,191,36,0.3); }
.dash-nav-files::before { background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(16,185,129,0.08)); }
.dash-nav-files:hover { border-color: rgba(52,211,153,0.3); }
.dash-nav-analytics::before { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(79,70,229,0.08)); }
.dash-nav-analytics:hover { border-color: rgba(99,102,241,0.3); }

.dash-nav-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.dash-nav-forum .dash-nav-icon-wrap { background: rgba(99,102,241,0.15); }
.dash-nav-prompts .dash-nav-icon-wrap { background: rgba(251,191,36,0.15); }
.dash-nav-files .dash-nav-icon-wrap { background: rgba(52,211,153,0.15); }
.dash-nav-analytics .dash-nav-icon-wrap { background: rgba(99,102,241,0.15); }

.dash-nav-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.dash-nav-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
}
.dash-nav-count {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}
.dash-nav-arrow {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.2);
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}
.dash-nav-card:hover .dash-nav-arrow {
    color: rgba(255,255,255,0.6);
    transform: translateX(4px);
}

/* --- Metric card enhancements --- */
.dash-metric-glass {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.dash-metric-icon-bg {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 3rem;
    opacity: 0.08;
    transform: rotate(12deg);
    pointer-events: none;
    transition: all 0.4s;
}
.dash-metric-glass:hover .dash-metric-icon-bg {
    opacity: 0.15;
    transform: rotate(0deg) scale(1.1);
}
.dash-metric-trend {
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 4px;
    color: rgba(255,255,255,0.3);
}

/* --- Action item glow variants --- */
.action-glow-amber:hover {
    background: rgba(251,191,36,0.12) !important;
    border-color: rgba(251,191,36,0.3) !important;
}
.action-glow-green:hover {
    background: rgba(52,211,153,0.12) !important;
    border-color: rgba(52,211,153,0.3) !important;
}
.action-glow-blue:hover {
    background: rgba(96,165,250,0.12) !important;
    border-color: rgba(96,165,250,0.3) !important;
}
.action-glow-purple:hover {
    background: rgba(139,92,246,0.12) !important;
    border-color: rgba(139,92,246,0.3) !important;
}

/* --- Stagger entrance animations --- */
.anim-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    animation: staggerIn 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
.anim-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.40s; }

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

/* --- Cache-first smooth refresh (Xiaohongshu-style) --- */
.refresh-fade-out {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1) !important;
    pointer-events: none;
}
.refresh-stagger-in > * {
    opacity: 0;
    transform: translateY(18px);
    animation: refreshFadeUp 0.45s cubic-bezier(0.16,1,0.3,1) forwards;
}
.refresh-stagger-in > *:nth-child(1) { animation-delay: 0.04s; }
.refresh-stagger-in > *:nth-child(2) { animation-delay: 0.08s; }
.refresh-stagger-in > *:nth-child(3) { animation-delay: 0.12s; }
.refresh-stagger-in > *:nth-child(4) { animation-delay: 0.16s; }
.refresh-stagger-in > *:nth-child(5) { animation-delay: 0.20s; }
.refresh-stagger-in > *:nth-child(6) { animation-delay: 0.24s; }
.refresh-stagger-in > *:nth-child(7) { animation-delay: 0.28s; }
.refresh-stagger-in > *:nth-child(8) { animation-delay: 0.32s; }
.refresh-stagger-in > *:nth-child(n+9) { animation-delay: 0.36s; }
@keyframes refreshFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Dashboard topbar entrance --- */
.dash-topbar {
    animation: fadeSlideDown 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Metric number counter glow pulse --- */
.dash-metric-num {
    transition: transform 0.3s;
}
.dash-metric-glass:hover .dash-metric-num {
    transform: scale(1.08);
}

/* --- Feed card entrance animation --- */
.dash-feed-list > .feed-card {
    opacity: 0;
    transform: translateY(20px);
    animation: feedCardIn 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
.dash-feed-list > .feed-card:nth-child(1) { animation-delay: 0.1s; }
.dash-feed-list > .feed-card:nth-child(2) { animation-delay: 0.2s; }
.dash-feed-list > .feed-card:nth-child(3) { animation-delay: 0.3s; }
.dash-feed-list > .feed-card:nth-child(4) { animation-delay: 0.4s; }
.dash-feed-list > .feed-card:nth-child(5) { animation-delay: 0.5s; }
@keyframes feedCardIn {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Glass card hover shine effect --- */
.dash-glass-card {
    position: relative;
    overflow: hidden;
}
.dash-glass-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.03) 50%,
        transparent 60%
    );
    transform: translateX(-100%) rotate(0deg);
    transition: none;
    pointer-events: none;
}
.dash-glass-card:hover::after {
    animation: cardShine 0.8s ease forwards;
}
@keyframes cardShine {
    to { transform: translateX(100%) rotate(0deg); }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .dash-layout, .dash-layout:has(.dash-sidebar) { grid-template-columns: 1fr; }
    .dash-sidebar { order: -1; }
    .dash-metrics-row { grid-template-columns: repeat(2, 1fr); }
    .dash-bigname { font-size: 2rem; }
    .dash-quick-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .dash-topbar { flex-direction: column; text-align: center; gap: 16px; }
    .dash-topbar-right { justify-content: center; flex-wrap: wrap; }
    .dash-bigname { font-size: 1.6rem; }
    .dash-metrics-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dash-metric-glass { padding: 14px; }
    .dash-metric-num { font-size: 1.5rem; }
    .feed-card-header { padding: 16px 16px 0; }
    .feed-card-body { padding: 10px 16px 6px; }
    .feed-card-actions { padding: 6px 12px; }
    .feed-reply-box { padding: 8px 12px 10px; }
    .feed-comments-preview { padding: 4px 16px 8px; }
    .feed-comments-full { padding: 8px 16px; }
    .prof-student-header,
    .prof-student-row { grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr; font-size: 0.68rem; }
    .pso-name { max-width: 70px; }
    .pso-engage-bar { max-width: 40px; }
    .dash-quick-nav { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dash-nav-card { padding: 14px 14px; }
}

/* --- Dark background for main content when dashboard active --- */
.main-content.main-dark-bg {
    background: #020617;
}
/* ── Global noise dithering — eliminates gradient banding on dark backgrounds ── */
.main-content.main-dark-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--noise-svg);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 1;
    mix-blend-mode: overlay;
}
/* Remove .content-body padding in dark mode — the panels manage their own spacing */
.main-content.main-dark-bg .content-body {
    padding: 0;
    max-width: none;
}

/* ---- Shared floating panel style for all dark view containers ---- */
.dash-dark,
.prompt-dark,
.forum-dark,
.challenge-dark,
.stu-mgmt-dark,
.files-dark,
.collab-dark {
    border-radius: 28px;
    margin: 20px 28px 28px;
    padding-left: 28px;
    padding-right: 28px;
    background: linear-gradient(160deg, #0a0e1a 0%, #0f1529 50%, #0a0e1c 100%);
    border: 1px solid rgba(99,102,241,0.08);
    box-shadow:
        0 8px 40px rgba(0,0,0,0.45),
        0 0 120px rgba(99,102,241,0.05),
        inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    transition: box-shadow 0.5s ease;
}
@media (min-width: 1200px) {
    .dash-dark, .prompt-dark, .forum-dark,
    .challenge-dark, .stu-mgmt-dark, .files-dark, .collab-dark,
    .da-hud {
        margin-left: 48px; margin-right: 48px; border-radius: 32px;
    }
    .dash-dark, .prompt-dark, .forum-dark,
    .challenge-dark, .stu-mgmt-dark, .files-dark, .collab-dark {
        padding-left: 40px; padding-right: 40px;
    }
}
@media (max-width: 768px) {
    .dash-dark, .prompt-dark, .forum-dark,
    .challenge-dark, .stu-mgmt-dark, .files-dark, .collab-dark,
    .da-hud {
        border-radius: 22px; margin: 12px 14px 20px;
    }
    .dash-dark, .prompt-dark, .forum-dark,
    .challenge-dark, .stu-mgmt-dark, .files-dark, .collab-dark {
        padding-left: 16px; padding-right: 16px;
    }
}
@media (max-width: 480px) {
    .dash-dark, .prompt-dark, .forum-dark,
    .challenge-dark, .stu-mgmt-dark, .files-dark, .collab-dark,
    .da-hud {
        border-radius: 18px; margin: 8px 8px 14px;
    }
    .dash-dark, .prompt-dark, .forum-dark,
    .challenge-dark, .stu-mgmt-dark, .files-dark, .collab-dark {
        padding-left: 10px; padding-right: 10px;
    }
}

/* ================================================
   DASHBOARD HUB CAPSULES (compact pill strip)
   ================================================ */
.dash-hub-capsules {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    animation: capsulesSlideIn 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes capsulesSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.hub-capsule {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    white-space: nowrap;
    user-select: none;
}
.hub-capsule:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(255,255,255,0.2);
}
.hub-cap-icon {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.15));
}
.hub-cap-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: -0.01em;
}
.hub-cap-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    min-width: 18px;
    text-align: center;
}
.hub-cap-badge-hot {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.3);
    color: #fca5a5;
    animation: hubCapPulse 2.5s ease-in-out infinite;
}
@keyframes hubCapPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
}

/* Capsule color accents */
.hub-cap-forum { border-left: 3px solid rgba(99,102,241,0.6); }
.hub-cap-forum:hover { background: rgba(99,102,241,0.12); box-shadow: 0 4px 20px rgba(99,102,241,0.15); }
.hub-cap-prompts { border-left: 3px solid rgba(245,158,11,0.6); }
.hub-cap-prompts:hover { background: rgba(245,158,11,0.12); box-shadow: 0 4px 20px rgba(245,158,11,0.15); }
.hub-cap-challenge { border-left: 3px solid rgba(239,68,68,0.6); }
.hub-cap-challenge:hover { background: rgba(239,68,68,0.12); box-shadow: 0 4px 20px rgba(239,68,68,0.15); }
.hub-cap-tutorial { border-left: 3px solid rgba(16,185,129,0.6); }
.hub-cap-tutorial:hover { background: rgba(16,185,129,0.12); box-shadow: 0 4px 20px rgba(16,185,129,0.15); }
.hub-cap-analytics { border-left: 3px solid rgba(6,182,212,0.6); }
.hub-cap-analytics:hover { background: rgba(6,182,212,0.12); box-shadow: 0 4px 20px rgba(6,182,212,0.15); }
.hub-cap-students { border-left: 3px solid rgba(139,92,246,0.6); }
.hub-cap-students:hover { background: rgba(139,92,246,0.12); box-shadow: 0 4px 20px rgba(139,92,246,0.15); }
.hub-cap-resources { border-left: 3px solid rgba(16,185,129,0.6); }
.hub-cap-resources:hover { background: rgba(16,185,129,0.12); box-shadow: 0 4px 20px rgba(16,185,129,0.15); }

/* Capsule hover tooltip */
.hub-cap-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.hub-capsule:hover .hub-cap-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.hub-cap-tt-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f1f5f9;
}
.hub-cap-tt-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.hub-cap-tt-preview {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Stagger entrance animation for capsules */
.hub-capsule:nth-child(1) { animation: capSlideIn 0.4s 0.1s both; }
.hub-capsule:nth-child(2) { animation: capSlideIn 0.4s 0.18s both; }
.hub-capsule:nth-child(3) { animation: capSlideIn 0.4s 0.26s both; }
.hub-capsule:nth-child(4) { animation: capSlideIn 0.4s 0.34s both; }
.hub-capsule:nth-child(5) { animation: capSlideIn 0.4s 0.42s both; }
@keyframes capSlideIn {
    from { opacity: 0; transform: translateX(-12px) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width:600px) {
    .dash-hub-capsules { gap: 8px; }
    .hub-capsule { padding: 8px 12px; gap: 6px; }
    .hub-cap-label { font-size: 0.75rem; }
    .hub-cap-icon { font-size: 1rem; }
}

/* ================================================
   STUDENT MANAGEMENT VIEW (Dark Immersive Theme)
   ================================================ */
.stu-mgmt-dark {
    position: relative; min-height: calc(100vh - 80px); padding: 0 0 48px 0;
}
.stu-mgmt-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.stu-mgmt-hero { position: relative; z-index: 1; text-align: center; padding: 48px 0 16px; }
.stu-mgmt-hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.15));
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 9999px; padding: 6px 18px;
    font-size: 0.8rem; font-weight: 700; color: #a78bfa; letter-spacing: 0.05em; margin-bottom: 16px;
}
.stu-mgmt-hero-title {
    font-size: 2.6rem; font-weight: 900;
    background: linear-gradient(135deg, #a78bfa 0%, #818cf8 40%, #6366f1 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 10px;
}
.stu-mgmt-hero-desc { font-size: 0.92rem; color: rgba(255,255,255,0.4); max-width: 500px; margin: 0 auto; }
.stu-mgmt-stats-row {
    position: relative; z-index: 1;
    display: flex; justify-content: center; gap: 12px; padding: 16px 0 24px; flex-wrap: wrap;
}
.stu-mgmt-stat-pill {
    display: flex; align-items: center; gap: 8px; padding: 8px 18px;
    background: rgba(255,255,255,0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px;
    color: #e2e8f0; font-weight: 600; font-size: 0.85rem;
}
.stu-mgmt-stat-icon { font-size: 1.1rem; }
.stu-mgmt-stat-num { font-weight: 800; font-size: 1rem; color: #a78bfa; }
.stu-mgmt-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.4); }

/* Toolbar */
.stu-mgmt-toolbar {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px; padding: 0 0 24px; flex-wrap: wrap;
    max-width: 1100px; margin: 0 auto;
}
.stu-mgmt-search-wrap {
    flex: 1; min-width: 200px; position: relative;
}
.stu-mgmt-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 0.9rem; opacity: 0.4; pointer-events: none;
}
.stu-mgmt-search {
    width: 100%; padding: 10px 14px 10px 38px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; color: #e2e8f0; font-size: 0.88rem;
    outline: none; transition: all 0.3s;
}
.stu-mgmt-search:focus {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 20px rgba(139,92,246,0.1);
}
.stu-mgmt-search::placeholder { color: rgba(255,255,255,0.25); }
.stu-mgmt-filters { display: flex; gap: 4px; }
.stu-mgmt-filter-btn {
    padding: 8px 16px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px;
    background: transparent; color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.25s;
}
.stu-mgmt-filter-btn:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.stu-mgmt-filter-btn.active {
    background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.4); color: #a78bfa;
}
.stu-mgmt-sort-select {
    padding: 8px 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    background: rgba(255,255,255,0.05); color: #e2e8f0; font-size: 0.82rem;
    cursor: pointer; outline: none;
}
.stu-mgmt-sort-select option { background: #1e293b; color: #e2e8f0; }

/* Student Cards Grid */
.stu-mgmt-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px; max-width: 1100px; margin: 0 auto; padding-bottom: 32px;
}
.stu-mgmt-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
    padding: 22px; cursor: pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0; transform: translateY(20px);
    animation: stuCardAppear 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: var(--card-delay, 0s);
}
.stu-mgmt-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(139,92,246,0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(139,92,246,0.15);
}
.stu-mgmt-card-glow {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.06) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.stu-mgmt-card:hover .stu-mgmt-card-glow { opacity: 1; }
@keyframes stuCardAppear {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card Elements */
.stu-mgmt-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stu-mgmt-avatar {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 15px rgba(99,102,241,0.3);
    transition: all 0.3s;
}
.stu-mgmt-card:hover .stu-mgmt-avatar { transform: scale(1.08); box-shadow: 0 6px 20px rgba(99,102,241,0.4); }
.stu-mgmt-fire { background: linear-gradient(135deg, #f59e0b, #ef4444) !important; box-shadow: 0 4px 15px rgba(239,68,68,0.3) !important; }
.stu-mgmt-warm { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
.stu-mgmt-cold { background: linear-gradient(135deg, #475569, #64748b) !important; box-shadow: 0 4px 15px rgba(100,116,139,0.2) !important; }
.stu-mgmt-role-tag {
    padding: 3px 10px; border-radius: 9999px; font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.stu-mgmt-role-student { background: rgba(99,102,241,0.12); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.25); }
.stu-mgmt-role-guest { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.stu-mgmt-card-name {
    font-size: 1.05rem; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.02em; margin: 0 0 2px; line-height: 1.3;
}
.stu-mgmt-card-id { font-size: 0.72rem; color: rgba(255,255,255,0.3); font-family: monospace; margin: 0 0 14px; }
.stu-mgmt-card-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-bottom: 12px; }
.stu-mgmt-card-stat { text-align: center; }
.stu-mgmt-card-stat-num { display: block; font-size: 1.1rem; font-weight: 800; color: #e2e8f0; }
.stu-mgmt-card-stat-label { display: block; font-size: 0.6rem; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; }
.stu-mgmt-card-bar {
    height: 3px; background: rgba(255,255,255,0.06); border-radius: 9999px; overflow: hidden;
}
.stu-mgmt-card-bar-fill {
    height: 100%; border-radius: 9999px; transition: width 1s ease;
}
/* Card economic data row */
.stu-mgmt-card-econ {
    display: flex; gap: 8px; margin: 6px 0 8px; padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.stu-mgmt-card-econ-item {
    flex: 1; display: flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
}
.stu-mgmt-econ-icon { font-size: 0.75rem; }
.stu-mgmt-econ-val {
    font-size: 0.8rem; font-weight: 700; color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}
.stu-mgmt-econ-lbl { font-size: 0.6rem; color: rgba(255,255,255,0.35); }
/* Detail modal: economic section */
.stu-mgmt-detail-econ-section {
    margin: 16px 0; padding: 16px;
    background: rgba(255,255,255,0.02); border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.stu-mgmt-detail-econ-section h3 {
    font-size: 0.9rem; font-weight: 600; color: #cbd5e1; margin: 0 0 12px;
}
.stu-mgmt-detail-econ-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stu-mgmt-detail-econ-card {
    text-align: center; padding: 12px 8px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.stu-mgmt-detail-econ-num {
    display: block; font-size: 1.3rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.stu-mgmt-detail-econ-label {
    font-size: 0.7rem; color: rgba(255,255,255,0.4); margin: 4px 0 0;
}
.stu-mgmt-detail-econ-tier {
    margin-top: 10px; font-size: 0.75rem; color: rgba(255,255,255,0.4); text-align: center;
}
.stu-mgmt-tier-badge {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    background: rgba(167,139,250,0.12); color: #c4b5fd;
    border: 1px solid rgba(167,139,250,0.18); font-weight: 600;
    text-transform: capitalize;
}
/* Card badges row */
.stu-mgmt-card-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* AI Archetype tag */
.stu-mgmt-archetype {
    font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px;
    background: rgba(99,102,241,0.12); color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.15);
}
/* Interest tags */
.stu-mgmt-tags { display: flex; gap: 4px; margin: 6px 0 2px; flex-wrap: wrap; }
.stu-mgmt-tag {
    font-size: 0.6rem; padding: 2px 7px; border-radius: 8px;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.06);
}
/* Alert chip */
.stu-mgmt-alert {
    font-size: 0.68rem; color: #f59e0b; margin: 4px 0;
    padding: 3px 8px; border-radius: 8px;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.12);
}
/* Detail: Action buttons */
.stu-mgmt-detail-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0;
    padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stu-mgmt-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 16px; border-radius: 10px; border: none;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.stu-mgmt-action-reward {
    background: rgba(245,158,11,0.12); color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.2);
}
.stu-mgmt-action-reward:hover { background: rgba(245,158,11,0.2); }
.stu-mgmt-action-msg {
    background: rgba(99,102,241,0.12); color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.2);
}
.stu-mgmt-action-msg:hover { background: rgba(99,102,241,0.2); }
.stu-mgmt-action-promote {
    background: rgba(16,185,129,0.12); color: #4ade80;
    border: 1px solid rgba(16,185,129,0.2);
}
.stu-mgmt-action-promote:hover { background: rgba(16,185,129,0.2); }
.stu-mgmt-action-delete {
    background: rgba(239,68,68,0.10); color: #f87171;
    border: 1px solid rgba(239,68,68,0.15);
}
.stu-mgmt-action-delete:hover { background: rgba(239,68,68,0.2); }
/* AI Profile section */
.stu-mgmt-ai-profile {
    background: rgba(99,102,241,0.04); border-radius: 12px;
    border: 1px solid rgba(99,102,241,0.08); padding: 14px;
}
.stu-mgmt-ai-loading {
    font-size: 0.8rem; color: rgba(255,255,255,0.3); font-style: italic;
}
.stu-mgmt-ai-text {
    font-size: 0.82rem; color: rgba(255,255,255,0.7); line-height: 1.7;
}
.stu-mgmt-ai-text strong { color: #a5b4fc; }

/* Loading & Empty */
.stu-mgmt-loading {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.4);
}
.stu-mgmt-loading-spinner {
    width: 36px; height: 36px; margin: 0 auto 12px;
    border: 3px solid rgba(255,255,255,0.1); border-top-color: #a78bfa;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.stu-mgmt-empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.35);
}
.stu-mgmt-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }

/* Detail Modal */
.stu-mgmt-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}
.stu-mgmt-modal-overlay.stu-mgmt-modal-visible { opacity: 1; }
.stu-mgmt-modal {
    position: relative;
    background: linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98));
    border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
    width: 90%; max-width: 560px; max-height: 85vh; overflow-y: auto;
    padding: 32px; box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    transform: scale(0.92) translateY(20px); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.stu-mgmt-modal-visible .stu-mgmt-modal { transform: scale(1) translateY(0); }
.stu-mgmt-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.stu-mgmt-modal-close:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.stu-mgmt-detail-top { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.stu-mgmt-detail-avatar {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.6rem; color: #fff;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    box-shadow: 0 8px 25px rgba(99,102,241,0.35);
}
.stu-mgmt-detail-info h2 {
    font-size: 1.5rem; font-weight: 900; color: #f1f5f9;
    letter-spacing: -0.03em; margin: 0 0 2px; line-height: 1.2;
}
.stu-mgmt-detail-info p { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin: 0 0 6px; font-family: monospace; }
.stu-mgmt-detail-level {
    display: inline-block; padding: 3px 12px; border-radius: 9999px;
    font-size: 0.7rem; font-weight: 700;
}
.stu-mgmt-level-god { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.2)); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.stu-mgmt-level-star { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.25); }
.stu-mgmt-level-active { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.stu-mgmt-level-lurk { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }

/* Detail Stats Grid */
.stu-mgmt-detail-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px;
}
.stu-mgmt-detail-stat-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 18px; text-align: center;
    transition: all 0.25s;
}
.stu-mgmt-detail-stat-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.stu-mgmt-detail-ring { position: relative; display: inline-block; margin-bottom: 6px; }
.stu-mgmt-ring-text {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem;
}
.stu-mgmt-detail-stat-big { font-size: 2rem; font-weight: 900; color: #e2e8f0; display: block; margin-bottom: 4px; }
.stu-mgmt-detail-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin: 0; }

/* Timeline */
.stu-mgmt-detail-section { margin-top: 4px; }
.stu-mgmt-detail-section h3 { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; margin: 0 0 14px; }
.stu-mgmt-timeline { display: flex; flex-direction: column; gap: 8px; }
.stu-mgmt-timeline-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05); border-radius: 12px;
    transition: all 0.2s;
}
.stu-mgmt-timeline-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.stu-mgmt-timeline-icon { font-size: 1.1rem; flex-shrink: 0; }
.stu-mgmt-timeline-content { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stu-mgmt-timeline-title { font-size: 0.82rem; font-weight: 600; color: #e2e8f0; }
.stu-mgmt-timeline-time { font-size: 0.7rem; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.stu-mgmt-no-activity { font-size: 0.82rem; color: rgba(255,255,255,0.3); text-align: center; padding: 20px 0; }

/* Mobile */
@media (max-width: 600px) {
    .stu-mgmt-hero-title { font-size: 1.8rem; }
    .stu-mgmt-stats-row { gap: 8px; }
    .stu-mgmt-stat-pill { padding: 6px 12px; font-size: 0.78rem; }
    .stu-mgmt-toolbar { flex-direction: column; padding: 0 8px 16px; }
    .stu-mgmt-grid { grid-template-columns: 1fr; padding: 0 8px; }
    .stu-mgmt-detail-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stu-mgmt-modal { padding: 20px; margin: 12px; }
}

/* ================================================
   CHALLENGE VIEW (Dark Immersive Theme)
   ================================================ */
/* ── Challenge Page: Premium Visual Design ── */
.challenge-dark {
    position: relative; min-height: calc(100vh - 80px);
    padding-top: 20px; padding-bottom: 48px;
    overflow: hidden;
}
.challenge-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
/* 网格底纹 */
.challenge-bg::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(251,191,36,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 40%, transparent 100%);
    animation: challengeGridPulse 8s ease-in-out infinite;
}
@keyframes challengeGridPulse {
    0%,100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
/* 星光粒子 canvas 由 JS 注入 */
.challenge-particles-canvas {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.challenge-hero { position: relative; z-index: 1; text-align: center; padding: 48px 0 20px; }
.challenge-hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.15));
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 9999px; padding: 6px 18px;
    font-size: 0.8rem; font-weight: 700; color: #fbbf24; letter-spacing: 0.05em; margin-bottom: 16px;
    animation: challengeFadeInDown 0.6s ease-out both;
    position: relative; overflow: hidden;
}
/* Badge shimmer sweep */
.challenge-hero-badge::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: challengeShimmer 3s ease-in-out infinite;
}
@keyframes challengeShimmer {
    0% { left: -100%; }
    50%,100% { left: 100%; }
}
.challenge-hero-title {
    font-size: 2.8rem; font-weight: 900;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 30%, #ef4444 60%, #ec4899 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 10px;
    animation: challengeTitleGradient 6s ease-in-out infinite, challengeFadeInDown 0.7s ease-out 0.1s both;
    text-shadow: 0 0 80px rgba(245,158,11,0.3);
}
@keyframes challengeTitleGradient {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.challenge-hero-desc {
    font-size: 0.92rem; color: rgba(255,255,255,0.4); max-width: 500px; margin: 0 auto;
    animation: challengeFadeInDown 0.7s ease-out 0.2s both;
}
@keyframes challengeFadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}
.challenge-stats-row {
    position: relative; z-index: 1;
    display: flex; justify-content: center; gap: 12px; padding: 20px 0 28px; flex-wrap: wrap;
}
.challenge-stat-pill {
    display: flex; align-items: center; gap: 8px; padding: 8px 18px;
    background: rgba(255,255,255,0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px;
    color: #e2e8f0; font-weight: 600; font-size: 0.85rem;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    animation: challengeFadeInUp 0.6s ease-out both;
}
.challenge-stat-pill:nth-child(1) { animation-delay: 0.25s; }
.challenge-stat-pill:nth-child(2) { animation-delay: 0.35s; }
.challenge-stat-pill:nth-child(3) { animation-delay: 0.45s; }
.challenge-stat-pill:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: rgba(251,191,36,0.3);
    box-shadow: 0 4px 20px rgba(251,191,36,0.12);
}
@keyframes challengeFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.challenge-stat-icon { font-size: 1.1rem; }
.challenge-stat-num {
    font-weight: 800; font-size: 1rem; color: #fbbf24;
    transition: transform 0.3s;
}
.challenge-stat-pill:hover .challenge-stat-num { transform: scale(1.2); }
.challenge-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.4); }

/* ── Challenge Card: Glow border on hover ── */
.challenge-today-card {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
    padding: 0; margin-bottom: 24px; overflow: hidden;
    animation: challengeCardSlideIn 0.7s ease-out 0.3s both;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.challenge-today-card:hover {
    border-color: rgba(251,191,36,0.2);
    box-shadow: 0 0 40px rgba(251,191,36,0.06), 0 8px 32px rgba(0,0,0,0.2);
}
/* Card top glow bar */
.challenge-today-card::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.5), rgba(239,68,68,0.5), transparent);
    border-radius: 2px;
    opacity: 0.6;
}
@keyframes challengeCardSlideIn {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.challenge-card-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.challenge-loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.08); border-top-color: #fbbf24; border-right-color: #f97316;
    border-radius: 50%; animation: spin 0.8s linear infinite;
    box-shadow: 0 0 20px rgba(251,191,36,0.15);
}
@keyframes spin { to { transform: rotate(360deg); } }
.challenge-today-inner { padding: 28px; }
.challenge-today-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.challenge-type-badge {
    display: inline-block; padding: 4px 12px;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25);
    border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: #fbbf24;
    transition: transform 0.2s;
}
.challenge-type-badge:hover { transform: scale(1.06); }
.challenge-author { font-size: 0.78rem; color: rgba(255,255,255,0.4); font-weight: 500; }
.challenge-today-title {
    font-size: 1.6rem; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.03em; margin-bottom: 10px; line-height: 1.3;
}
.challenge-today-desc {
    font-size: 0.92rem; color: rgba(255,255,255,0.55);
    line-height: 1.7; margin-bottom: 18px; white-space: pre-wrap;
}
.challenge-today-date { font-size: 0.75rem; color: rgba(255,255,255,0.35); font-weight: 500; }
.challenge-cross-link {
    display: inline-block; padding: 6px 16px;
    background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25);
    border-radius: 9999px; font-size: 0.78rem; font-weight: 600; color: #a5b4fc;
    cursor: pointer; margin-bottom: 16px; transition: all 0.2s;
}
.challenge-cross-link:hover { background: rgba(99,102,241,0.2); transform: translateY(-1px); }
.challenge-submit-area { margin-bottom: 16px; }
.challenge-answer-input {
    width: 100%; padding: 14px 16px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; color: #e2e8f0; font-size: 0.9rem;
    resize: vertical; min-height: 100px; font-family: inherit; transition: border-color 0.3s;
}
.challenge-answer-input:focus { outline: none; border-color: rgba(245,158,11,0.4); }
.challenge-answer-input::placeholder { color: rgba(255,255,255,0.25); }
.challenge-submit-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 12px 32px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border: none; border-radius: 14px; color: white;
    font-weight: 700; font-size: 0.95rem; cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 16px rgba(245,158,11,0.2);
}
.challenge-submit-btn::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.3s;
}
.challenge-submit-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 28px rgba(245,158,11,0.35), 0 0 12px rgba(239,68,68,0.2);
}
.challenge-submit-btn:hover::after { opacity: 1; }
.challenge-submit-btn:active { transform: translateY(-1px) scale(0.98); }
.challenge-submitted-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.3); border-radius: 14px;
    color: #6ee7b7; font-weight: 700; font-size: 0.95rem;
}

/* MC 选择题样式 — 酷炫交互 */
.challenge-mc-options {
    display: flex; flex-direction: column; gap: 10px;
    margin: 16px 0;
}
.challenge-mc-option {
    padding: 14px 18px; border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem; line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
/* 选项序号光效 */
.challenge-mc-option::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, transparent, rgba(251,191,36,0.3), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.challenge-mc-selectable {
    cursor: pointer;
}
.challenge-mc-selectable:hover {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.35);
    transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(245,158,11,0.08);
}
.challenge-mc-selectable:hover::before { opacity: 1; }
.challenge-mc-selectable:active {
    transform: translateX(6px) scale(0.98);
}
.challenge-mc-option.challenge-mc-selected {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.5);
    color: #fbbf24;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(245,158,11,0.15), inset 0 0 20px rgba(245,158,11,0.04);
    transform: translateX(6px);
}
.challenge-mc-option.challenge-mc-selected::before { opacity: 1; background: #fbbf24; }
.challenge-mc-option.challenge-mc-correct {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.4);
    color: #6ee7b7;
    animation: challengeCorrectPulse 0.6s ease-out;
}
.challenge-mc-option.challenge-mc-correct::before { opacity: 1; background: #10b981; }
@keyframes challengeCorrectPulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    50% { box-shadow: 0 0 20px 4px rgba(16,185,129,0.2); }
    100% { box-shadow: 0 0 12px 0 rgba(16,185,129,0.1); }
}
.challenge-mc-option.challenge-mc-wrong {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.35);
    color: #fca5a5;
    opacity: 0.75;
    animation: challengeWrongShake 0.4s ease-out;
}
@keyframes challengeWrongShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.challenge-mc-answered .challenge-mc-option {
    cursor: default;
    pointer-events: none;
}
.challenge-result-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 14px;
    font-weight: 700; font-size: 0.95rem;
    margin: 12px 0;
    animation: challengeResultFadeIn 0.5s ease-out;
}
@keyframes challengeResultFadeIn {
    from { opacity: 0; transform: scale(0.9) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.challenge-result-correct {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.08));
    border: 1px solid rgba(16,185,129,0.3);
    color: #6ee7b7;
    box-shadow: 0 0 24px rgba(16,185,129,0.1);
}
.challenge-result-wrong {
    background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.06));
    border: 1px solid rgba(239,68,68,0.3);
    color: #fca5a5;
}
.challenge-explanation {
    margin-top: 12px; padding: 14px 18px;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.04));
    border: 1px solid rgba(139,92,246,0.2);
    border-left: 3px solid rgba(139,92,246,0.5);
    border-radius: 0 14px 14px 0;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem; line-height: 1.7;
    animation: challengeExplanationSlide 0.5s ease-out;
}
@keyframes challengeExplanationSlide {
    from { opacity: 0; transform: translateX(-12px); max-height: 0; }
    to { opacity: 1; transform: translateX(0); max-height: 500px; }
}
.challenge-explanation strong {
    color: rgba(255,255,255,0.9);
}
.challenge-mc-prof-view .challenge-mc-option {
    font-size: 0.85rem; padding: 8px 12px;
}
.challenge-xp-info {
    display: flex; flex-wrap: wrap; gap: 2px;
    font-size: 0.72rem; color: rgba(255,255,255,0.3);
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);
}
.challenge-empty-state { text-align: center; padding: 48px 20px; animation: challengeFadeInUp 0.6s ease-out; }
.challenge-empty-icon { font-size: 3.5rem; margin-bottom: 16px; animation: challengeEmptyFloat 3s ease-in-out infinite; }
@keyframes challengeEmptyFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}
.challenge-empty-state p { color: rgba(255,255,255,0.4); font-size: 0.9rem; margin-bottom: 16px; }
.challenge-create-bar { position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: 20px; }
.challenge-create-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border: none; border-radius: 14px; color: white; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(245,158,11,0.25);
}
.challenge-create-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 32px rgba(245,158,11,0.35); }
.challenge-create-btn-sm {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border: none; border-radius: 10px; color: white; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: transform 0.2s;
}
.challenge-create-btn-sm:hover { transform: translateY(-2px); }
.challenge-prof-summary {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px; margin-bottom: 24px;
}
.challenge-summary-card {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important; color: #e2e8f0;
}
.challenge-summary-card .summary-num {
    background: linear-gradient(135deg, #fbbf24, #ef4444) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.challenge-summary-card .summary-label { color: rgba(255,255,255,0.4) !important; }
.challenge-submissions-section, .challenge-history-section { position: relative; z-index: 1; margin-bottom: 28px; }
.challenge-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.challenge-section-title { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.8); }
.challenge-section-count {
    background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.25);
    border-radius: 9999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 700; color: #fbbf24;
}
.challenge-no-subs { text-align: center; padding: 24px; color: rgba(255,255,255,0.3); font-size: 0.85rem; }
.challenge-sub-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 18px; margin-bottom: 12px;
    transition: border-color 0.4s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
    animation: challengeSubCardIn 0.5s ease-out both;
}
.challenge-sub-card:nth-child(2) { animation-delay: 0.05s; }
.challenge-sub-card:nth-child(3) { animation-delay: 0.1s; }
.challenge-sub-card:nth-child(4) { animation-delay: 0.15s; }
.challenge-sub-card:nth-child(5) { animation-delay: 0.2s; }
@keyframes challengeSubCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.challenge-sub-card:hover {
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.challenge-sub-pinned { border-color: rgba(245,158,11,0.3) !important; background: rgba(245,158,11,0.04); }
.challenge-sub-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.challenge-sub-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(239,68,68,0.3));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700; color: #fbbf24; flex-shrink: 0;
}
.challenge-sub-name { font-weight: 600; color: #e2e8f0; font-size: 0.85rem; }
.challenge-sub-pin-badge { font-size: 0.72rem; }
.challenge-sub-time { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-left: auto; }
.challenge-sub-content { color: rgba(255,255,255,0.7); font-size: 0.88rem; line-height: 1.7; margin-bottom: 10px; white-space: pre-wrap; }
.challenge-sub-actions { display: flex; gap: 8px; }
.challenge-like-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9999px; color: rgba(255,255,255,0.5); font-size: 0.78rem;
    cursor: pointer; transition: all 0.2s;
}
.challenge-like-btn:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); color: #fca5a5; }
.challenge-liked { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.25) !important; color: #f87171 !important; }
.challenge-pin-btn {
    padding: 3px 10px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px; color: #fbbf24; font-size: 0.7rem; cursor: pointer; font-weight: 600; transition: background 0.2s;
}
.challenge-pin-btn:hover { background: rgba(245,158,11,0.15); }
.challenge-history-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; margin-bottom: 8px;
    transition: background 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.challenge-history-item:hover {
    background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12);
    transform: translateX(4px);
}
.challenge-history-date { font-size: 0.72rem; color: rgba(255,255,255,0.35); font-weight: 600; white-space: nowrap; min-width: 80px; }
.challenge-history-info { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.challenge-history-type { font-size: 0.9rem; }
.challenge-history-title { font-size: 0.82rem; color: rgba(255,255,255,0.6); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.challenge-history-author { font-size: 0.72rem; color: rgba(255,255,255,0.25); white-space: nowrap; }
@media (max-width:768px) {
    .challenge-hero-title { font-size: 1.8rem; }
    .challenge-stats-row { gap: 8px; }
    .challenge-stat-pill { padding: 6px 12px; font-size: 0.78rem; }
    .challenge-today-inner { padding: 20px; }
    .challenge-today-title { font-size: 1.2rem; }
}

/* ================================================
   GUEST LOGIN STYLES
   ================================================ */
.guest-divider {
    display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
}
.guest-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.guest-divider-text { font-size: 0.78rem; color: rgba(255,255,255,0.35); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.btn-guest {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.15));
    border: 1px solid rgba(139,92,246,0.3);
    color: #c4b5fd; font-weight: 700; font-size: 0.95rem;
    padding: 12px 24px; border-radius: 12px; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position: relative; overflow: hidden;
}
.btn-guest::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(245,158,11,0.08));
    opacity: 0; transition: opacity 0.3s;
}
.btn-guest:hover::before { opacity: 1; }
.btn-guest:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 6px 24px rgba(139,92,246,0.2);
}
.btn-guest:active { transform: translateY(0) scale(0.98); }
.guest-icon { font-size: 1.2rem; animation: guestBounce 2s ease-in-out infinite; }
@keyframes guestBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.btn-guest.btn-loading { opacity: 0.7; pointer-events: none; }

/* Guest role badge */
.role-guest {
    background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(245,158,11,0.2)) !important;
    border: 1px solid rgba(139,92,246,0.3) !important;
    color: #c4b5fd !important;
}

/* ================================================
   PROFESSOR QUICK ACTIONS & CONFIGURATION
   ================================================ */
.prof-cmd-card { padding-bottom: 16px !important; }
.prof-action-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.prof-action-btn {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 14px 8px 10px; border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer; color: #e2e8f0;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    font-family: inherit;
}
.prof-action-btn:hover {
    transform: translateY(-4px) scale(1.04);
    border-color: rgba(255,255,255,0.2);
}
.prof-action-btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
}
.prof-action-glow {
    position: absolute; width: 80px; height: 80px; border-radius: 50%;
    top: -30px; right: -20px; filter: blur(28px); opacity: 0;
    transition: opacity 0.4s; pointer-events: none;
}
.prof-action-btn:hover .prof-action-glow { opacity: 1; }
.prof-action-announce .prof-action-glow { background: rgba(245,158,11,0.5); }
.prof-action-announce:hover { box-shadow: 0 6px 24px rgba(245,158,11,0.18); }
.prof-action-announce .prof-action-icon-wrap { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); }
.prof-action-challenge .prof-action-glow { background: rgba(239,68,68,0.5); }
.prof-action-challenge:hover { box-shadow: 0 6px 24px rgba(239,68,68,0.18); }
.prof-action-challenge .prof-action-icon-wrap { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); }
.prof-action-upload .prof-action-glow { background: rgba(16,185,129,0.5); }
.prof-action-upload:hover { box-shadow: 0 6px 24px rgba(16,185,129,0.18); }
.prof-action-upload .prof-action-icon-wrap { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.25); }
.prof-action-forum .prof-action-glow { background: rgba(99,102,241,0.5); }
.prof-action-forum:hover { box-shadow: 0 6px 24px rgba(99,102,241,0.18); }
.prof-action-forum .prof-action-icon-wrap { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); }
.prof-action-invite .prof-action-glow { background: rgba(139,92,246,0.5); }
.prof-action-invite:hover { box-shadow: 0 6px 24px rgba(139,92,246,0.18); }
.prof-action-invite .prof-action-icon-wrap { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.25); }
.prof-action-config .prof-action-glow { background: rgba(148,163,184,0.4); }
.prof-action-config:hover { box-shadow: 0 6px 24px rgba(148,163,184,0.15); }
.prof-action-config .prof-action-icon-wrap { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.25); }
.prof-action-icon-wrap {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
}
.prof-action-btn:hover .prof-action-icon-wrap {
    transform: scale(1.15) rotate(-8deg);
}
.prof-action-icon { font-size: 1.4rem; line-height: 1; }
.prof-action-label {
    font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.prof-action-stat {
    font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06); border-radius: 6px; padding: 1px 7px;
}
@media (max-width: 600px) {
    .prof-action-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .prof-action-btn { padding: 10px 4px 8px; }
    .prof-action-icon-wrap { width: 36px; height: 36px; }
    .prof-action-icon { font-size: 1.2rem; }
}

/* Professor Config Panel */
.prof-config-card {
    animation: profConfigSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes profConfigSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.prof-config-list { display: flex; flex-direction: column; gap: 4px; }
.prof-config-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s, border-color 0.2s;
}
.prof-config-item:hover {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1);
}
.prof-config-item-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.prof-config-item-icon { font-size: 1.2rem; flex-shrink: 0; }
.prof-config-item-label {
    display: block; font-size: 0.82rem; font-weight: 600; color: #e2e8f0;
}
.prof-config-item-desc {
    display: block; font-size: 0.65rem; color: rgba(255,255,255,0.3); margin-top: 1px;
}
.prof-config-select {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 5px 10px; color: #e2e8f0; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; appearance: auto;
    transition: border-color 0.2s;
}
.prof-config-select:focus { outline: none; border-color: rgba(139,92,246,0.5); }
.prof-config-toggle {
    position: relative; width: 40px; height: 22px; flex-shrink: 0;
}
.prof-config-toggle input { display: none; }
.prof-config-toggle-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(255,255,255,0.1); border-radius: 22px;
    transition: background 0.3s;
}
.prof-config-toggle-slider::before {
    content: ''; position: absolute; left: 3px; top: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(255,255,255,0.6);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
}
.prof-config-toggle input:checked + .prof-config-toggle-slider {
    background: rgba(139,92,246,0.5);
}
.prof-config-toggle input:checked + .prof-config-toggle-slider::before {
    transform: translateX(18px); background: #a78bfa;
}

/* ============================================================
   DATA CLEANING & PROCESSING TAB  —  Immersive Redesign
   ============================================================ */

/* ---- Diagnosis Hero Banner ---- */
.dc-diag-hero {
    position: relative; overflow: hidden;
    border-radius: 20px; padding: 36px 32px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    display: flex; align-items: center; gap: 40px;
    box-shadow: 0 8px 40px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dc-diag-hero-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.dc-grid-overlay {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: dcGridScroll 20s linear infinite;
}
@keyframes dcGridScroll {
    to { background-position: 28px 28px; }
}
.dc-float-orb {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: 0.35;
    animation: dcOrbFloat 8s ease-in-out infinite alternate;
}
.dc-orb-1 { width: 200px; height: 200px; background: #6366f1; top: -60px; right: -40px; }
.dc-orb-2 { width: 140px; height: 140px; background: #8b5cf6; bottom: -40px; left: 20%; animation-delay: -3s; }
.dc-orb-3 { width: 100px; height: 100px; background: #06b6d4; top: 30%; left: -20px; animation-delay: -5s; }
@keyframes dcOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(15px, -15px) scale(1.15); }
}

/* ---- Circular SVG Gauge ---- */
.dc-gauge-wrap {
    position: relative; z-index: 1;
    flex-shrink: 0; text-align: center;
}
.dc-gauge {
    width: 140px; height: 140px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 12px rgba(99,102,241,0.3));
}
.dc-gauge-track {
    fill: none; stroke: rgba(255,255,255,0.08);
    stroke-width: 8; stroke-linecap: round;
}
.dc-gauge-fill {
    fill: none; stroke: url(#dcGaugeGrad); stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.34,1.56,0.64,1);
}
.dc-gauge-text {
    fill: #fff; font-size: 32px; font-weight: 900;
    text-anchor: middle; dominant-baseline: auto;
    font-family: 'Inter', sans-serif;
    transform: rotate(90deg); transform-origin: 70px 70px;
}
.dc-gauge-label {
    fill: rgba(255,255,255,0.45); font-size: 9px; font-weight: 800;
    text-anchor: middle; letter-spacing: 0.2em;
    transform: rotate(90deg); transform-origin: 70px 70px;
}
.dc-gauge-status {
    margin-top: 8px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
    animation: dcPulseText 2s ease-in-out infinite;
}
@keyframes dcPulseText {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ---- Metric Tiles ---- */
.dc-metrics {
    position: relative; z-index: 1;
    flex: 1; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.dc-metric {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
}
.dc-metric::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.04));
    pointer-events: none;
}
.dc-metric:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.dc-metric-ring {
    position: relative; width: 44px; height: 44px; flex-shrink: 0;
}
.dc-metric-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.dc-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 3; }
.dc-ring-fill {
    fill: none; stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 113.1; stroke-dashoffset: 113.1;
    transition: stroke-dashoffset 1s cubic-bezier(0.34,1.56,0.64,1);
}
.dc-ring-missing { stroke: #f59e0b; }
.dc-ring-dup { stroke: #8b5cf6; }
.dc-ring-outlier { stroke: #ef4444; }
.dc-ring-type { stroke: #06b6d4; }
.dc-metric-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 900; color: #fff;
    font-family: 'Inter', sans-serif;
}
.dc-metric-info { flex: 1; min-width: 0; }
.dc-metric-title {
    font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
}
.dc-metric-desc {
    font-size: 0.68rem; color: rgba(255,255,255,0.45);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-metric-arrow {
    font-size: 1.1rem; color: rgba(255,255,255,0.2);
    transition: all 0.3s; font-weight: 300;
}
.dc-metric:hover .dc-metric-arrow {
    color: rgba(255,255,255,0.6);
    transform: translateX(3px);
}

/* ---- Detail Table Collapsible ---- */
.dc-detail-toggle { cursor: pointer; user-select: none; }
.dc-detail-toggle:hover { background: rgba(99,102,241,0.06); }
.dc-toggle-arrow {
    font-size: 0.7rem; color: rgba(148,163,184,0.5);
    transition: transform 0.3s;
}
.dc-toggle-arrow.dc-open { transform: rotate(180deg); }
.dc-detail-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s;
    padding: 0 20px;
}
.dc-detail-body.dc-expanded {
    max-height: 600px; padding: 0 20px 16px;
}
.da-clean-status-ok {
    display: inline-block;
    color: #16a34a; font-weight: 700; font-size: 0.72rem;
    background: rgba(34,197,94,0.08); padding: 3px 10px;
    border-radius: 6px; border: 1px solid rgba(34,197,94,0.15);
}
.da-clean-status-issue {
    display: inline-block;
    color: #d97706; font-weight: 700; font-size: 0.72rem;
    background: rgba(245,158,11,0.08); padding: 3px 10px;
    border-radius: 6px; border: 1px solid rgba(245,158,11,0.15);
}
.da-clean-highlight { color: #dc2626; font-weight: 800; }

/* Tab badge */
.da-tab-badge {
    font-size: 0.65rem; font-weight: 800;
    padding: 1px 7px; border-radius: 10px; line-height: 1.4;
}
.da-badge-warn {
    background: rgba(245,158,11,0.12) !important;
    color: #d97706 !important; border: 1px solid rgba(245,158,11,0.2) !important;
}
.da-badge-ok {
    background: rgba(34,197,94,0.12) !important;
    color: #16a34a !important; border: 1px solid rgba(34,197,94,0.2) !important;
}

/* ---- Pulsing header dot ---- */
.dc-dot-pulse {
    animation: dcDotPulse 2s ease-in-out infinite;
}
@keyframes dcDotPulse {
    0%, 100% { box-shadow: 0 0 4px var(--dot-color); }
    50% { box-shadow: 0 0 12px var(--dot-color), 0 0 24px var(--dot-color); }
}

/* ---- Header icon buttons ---- */
.dc-header-actions { display: flex; gap: 6px; }
.dc-icon-btn {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: rgba(148,163,184,0.6);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.25s;
}
.dc-icon-btn:hover {
    border-color: rgba(99,102,241,0.4); color: #a5b4fc;
    background: rgba(99,102,241,0.1);
    box-shadow: 0 2px 10px rgba(99,102,241,0.15);
    transform: translateY(-1px);
}

/* ---- Repair Cards ---- */
.dc-repair-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.dc-repair-card {
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    transition: all 0.3s; position: relative;
}
.dc-repair-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: attr(data-accent);
}
.dc-repair-card[data-accent="#f59e0b"]::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dc-repair-card[data-accent="#8b5cf6"]::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.dc-repair-card[data-accent="#ef4444"]::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.dc-repair-card:hover {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    transform: translateY(-2px);
}
.dc-repair-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 0;
}
.dc-repair-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ri-color) 8%, transparent);
    color: var(--ri-color);
    flex-shrink: 0;
}
.dc-repair-card-title {
    font-size: 0.82rem; font-weight: 700; color: #e2e8f0;
}
.dc-repair-card-body {
    padding: 12px 16px 16px;
    display: flex; flex-direction: column; gap: 8px;
}

/* ---- Shared select style ---- */
.dc-select {
    width: 100%; padding: 9px 32px 9px 12px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    font-size: 0.82rem; font-weight: 500;
    background: rgba(255,255,255,0.05); color: #e2e8f0;
    transition: all 0.25s; cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.dc-select option { background: #0d1225; color: #e2e8f0; }
.dc-select:hover { border-color: rgba(99,102,241,0.4); }
.dc-select:focus {
    outline: none; border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* ---- Execute button with ripple ---- */
.dc-exec-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 0; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(99,102,241,0.25);
    position: relative; overflow: hidden;
}
.dc-exec-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 20px rgba(99,102,241,0.35);
    transform: translateY(-1px);
}
.dc-exec-btn:active { transform: scale(0.97); }
.dc-exec-btn .dc-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.4);
    animation: dcRipple 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes dcRipple {
    from { width: 0; height: 0; opacity: 1; }
    to { width: 200px; height: 200px; opacity: 0; transform: translate(-50%, -50%); }
}

/* ---- Log / Timeline ---- */
.dc-log-wrap { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.dc-log-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; color: rgba(148,163,184,0.6);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.dc-log {
    max-height: 180px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
}
.dc-log-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 10px;
    font-size: 0.78rem; transition: background 0.2s;
    border-left: 3px solid transparent;
}
.dc-log-item:hover {
    background: rgba(99,102,241,0.04);
    border-left-color: var(--primary);
}
.dc-log-time {
    color: rgba(148,163,184,0.4); font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; min-width: 68px;
}
.dc-log-title-text { color: #a5b4fc; font-weight: 700; min-width: 90px; }
.dc-log-detail { color: rgba(148,163,184,0.7); }

/* ---- Transform Flow (Stepper) ---- */
.dc-transform-flow {
    display: flex; align-items: stretch; gap: 0;
    padding: 8px 0;
}
.dc-tf-step {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; position: relative; padding: 0 10px;
}
.dc-tf-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 0.78rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(99,102,241,0.25);
    margin-bottom: 10px; flex-shrink: 0;
}
.dc-tf-step-content {
    width: 100%; display: flex; flex-direction: column; gap: 6px;
}
.dc-tf-label {
    font-size: 0.72rem; font-weight: 700; color: rgba(148,163,184,0.6);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.dc-tf-connector {
    width: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding-top: 16px;
}
.dc-tf-connector::before {
    content: '';
    width: 100%; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(99,102,241,0.5), rgba(255,255,255,0.06));
    border-radius: 1px;
    animation: dcConnectorPulse 3s ease-in-out infinite;
}
@keyframes dcConnectorPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}
.dc-tf-step-go {
    justify-content: center;
}

/* Toggle pill group */
.dc-toggle-group {
    display: flex; gap: 4px;
    background: rgba(255,255,255,0.05); border-radius: 10px;
    padding: 3px; border: 1px solid rgba(255,255,255,0.07);
}
.dc-toggle-pill {
    flex: 1; cursor: pointer;
}
.dc-toggle-pill input { display: none; }
.dc-toggle-pill span {
    display: block; padding: 7px 12px;
    border-radius: 8px; text-align: center;
    font-size: 0.78rem; font-weight: 600;
    color: rgba(148,163,184,0.6);
    transition: all 0.25s;
}
.dc-toggle-pill input:checked + span {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc; font-weight: 700;
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}

/* Transform execute button */
.dc-transform-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 0.88rem; font-weight: 700;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(99,102,241,0.25);
    position: relative; overflow: hidden;
}
.dc-transform-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}
.dc-transform-btn:hover::before { transform: translateX(100%); }
.dc-transform-btn:hover {
    box-shadow: 0 6px 24px rgba(99,102,241,0.35);
    transform: translateY(-2px);
}
.dc-transform-btn:active { transform: translateY(0) scale(0.98); }

/* Preview Chart wrapper */
.dc-preview-wrap {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .dc-diag-hero { flex-direction: column; gap: 24px; padding: 28px 20px; }
    .dc-metrics { grid-template-columns: repeat(2, 1fr); width: 100%; }
    .dc-repair-cards { grid-template-columns: 1fr; }
    .dc-transform-flow { flex-direction: column; align-items: stretch; }
    .dc-tf-connector { width: auto; height: 20px; padding-top: 0; }
    .dc-tf-connector::before { width: 2px; height: 100%; }
}
@media (max-width: 480px) {
    .dc-metrics { grid-template-columns: 1fr; }
}

/* ================================================
   ECONOMICS QUOTE MODAL (Login Welcome)
   ================================================ */
.quote-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0); opacity: 0;
    transition: background 0.6s ease, opacity 0.4s ease;
    pointer-events: none;
}
.quote-modal-overlay.quote-visible {
    background: rgba(0,0,0,0.75); opacity: 1; pointer-events: auto;
}
.quote-modal-overlay.quote-fadeout {
    opacity: 0; transition: opacity 1.2s ease;
}
.quote-particle-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.quote-card {
    position: relative; z-index: 1;
    max-width: 560px; width: 90%; padding: 48px 40px 36px;
    background: rgba(15, 15, 35, 0.85);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    text-align: center;
    transform: scale(0.7) translateY(40px); opacity: 0;
    transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1), opacity 0.6s ease;
    box-shadow: 0 0 80px rgba(99,102,241,0.3), 0 0 200px rgba(139,92,246,0.15),
                inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
}
.quote-visible .quote-card {
    transform: scale(1) translateY(0); opacity: 1;
}
.quote-fadeout .quote-card {
    transform: scale(0.9) translateY(-20px); opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
}
.quote-glow-ring {
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, rgba(139,92,246,0.2) 40%, transparent 70%);
    animation: quoteGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes quoteGlowPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}
.quote-icon {
    font-size: 2.8rem; margin-bottom: 12px;
    filter: drop-shadow(0 0 12px rgba(99,102,241,0.6));
    animation: quoteIconFloat 3s ease-in-out infinite;
}
@keyframes quoteIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.quote-text {
    font-size: 1.35rem; font-weight: 700; line-height: 1.7;
    color: #f1f5f9; margin-bottom: 16px;
    text-shadow: 0 0 30px rgba(99,102,241,0.3);
}
.quote-author {
    font-size: 0.95rem; color: rgba(167,139,250,0.9); font-weight: 600;
    margin-bottom: 10px;
}
.quote-context {
    font-size: 0.82rem; color: rgba(148,163,184,0.8); line-height: 1.6;
    margin-bottom: 20px; padding: 12px 16px;
    background: rgba(255,255,255,0.04); border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.quote-xp-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 9999px;
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
    border: 1px solid rgba(99,102,241,0.3);
    color: #a78bfa; font-size: 0.8rem; font-weight: 700;
    animation: xpBadgePop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.8s both;
    margin-bottom: 20px;
}
@keyframes xpBadgePop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.quote-dismiss-btn {
    display: inline-block; padding: 10px 32px; border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 0.9rem; font-weight: 600;
    border-radius: 12px; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(99,102,241,0.4);
}
.quote-dismiss-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(99,102,241,0.5);
}
.quote-light-streak {
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: quoteLightStreak 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes quoteLightStreak {
    0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; }
}

/* ================================================
   QUOTE MANAGEMENT (Professor Panel)
   ================================================ */
.quote-mgmt-section { margin-top: 24px; }
.quote-mgmt-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.quote-mgmt-title {
    font-size: 1.1rem; font-weight: 700; color: #f1f5f9;
    display: flex; align-items: center; gap: 8px;
}
.quote-mgmt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quote-mgmt-btn {
    padding: 8px 16px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06); color: #e2e8f0;
    border-radius: 10px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.quote-mgmt-btn:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.4); }
.quote-mgmt-btn-primary {
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
    border-color: rgba(99,102,241,0.4);
}
.quote-mgmt-list { display: flex; flex-direction: column; gap: 10px; }

/* Scrollable quote management list inside dashboard card */
#quoteManagementList {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scroll-behavior: smooth;
}
#quoteManagementList::-webkit-scrollbar {
    width: 5px;
}
#quoteManagementList::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}
#quoteManagementList::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.25);
    border-radius: 10px;
}
#quoteManagementList::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.45);
}
/* Firefox scrollbar */
#quoteManagementList {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.25) transparent;
}

.quote-mgmt-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    transition: all 0.2s;
}
.quote-mgmt-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(99,102,241,0.2); }
.quote-mgmt-item-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.quote-mgmt-item-body { flex: 1; min-width: 0; }
.quote-mgmt-item-text { font-size: 0.92rem; color: #f1f5f9; font-weight: 600; margin-bottom: 4px; }
.quote-mgmt-item-meta {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap;
}
.quote-mgmt-item-author { font-size: 0.8rem; color: #a78bfa; }
.quote-mgmt-item-ctx { font-size: 0.75rem; color: rgba(148,163,184,0.7); line-height: 1.5; }
.quote-mgmt-item-actions { display: flex; gap: 6px; flex-shrink: 0; align-self: center; }
.quote-mgmt-del-btn {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(239,68,68,0.2);
    background: rgba(239,68,68,0.1); color: #ef4444; cursor: pointer; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.quote-mgmt-del-btn:hover { background: rgba(239,68,68,0.25); }
.quote-mgmt-empty {
    text-align: center; padding: 32px; color: rgba(148,163,184,0.5); font-size: 0.9rem;
}

/* ---- Quote Language Badges ---- */
.quote-lang-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
    flex-shrink: 0;
}
.quote-lang-zh {
    background: rgba(234,179,8,0.15);
    color: #facc15;
    border: 1px solid rgba(234,179,8,0.25);
}
.quote-lang-en {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.25);
}
.quote-lang-ru {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.22);
}

/* ---- Quote Language Selector (Add Modal) ---- */
.quote-lang-selector {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.quote-lang-option {
    cursor: pointer; display: flex; align-items: center;
}
.quote-lang-option input[type="radio"] {
    display: none;
}
.quote-lang-chip {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    transition: all 0.25s;
}
.quote-lang-option input[type="radio"]:checked + .quote-lang-chip.quote-lang-zh {
    background: rgba(234,179,8,0.18);
    color: #facc15;
    border-color: rgba(234,179,8,0.4);
    box-shadow: 0 0 12px rgba(234,179,8,0.15);
}
.quote-lang-option input[type="radio"]:checked + .quote-lang-chip.quote-lang-en {
    background: rgba(59,130,246,0.18);
    color: #60a5fa;
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 0 12px rgba(59,130,246,0.15);
}
.quote-lang-option input[type="radio"]:checked + .quote-lang-chip.quote-lang-ru {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-color: rgba(239,68,68,0.35);
    box-shadow: 0 0 12px rgba(239,68,68,0.12);
}
.quote-lang-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}

/* Quote Add/Import Modal */
.quote-add-modal {
    max-width: 580px; width: 90%; max-height: 80vh;
}
.quote-add-modal .modal-body { overflow-y: auto; max-height: 60vh; }
.quote-import-hint {
    font-size: 0.78rem; color: rgba(148,163,184,0.6); line-height: 1.6;
    margin-top: 8px; padding: 10px 14px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    font-family: 'Courier New', monospace;
}

/* ================================================
   ATTENDANCE LOG in Student Detail (Stu Mgmt)
   ================================================ */
.stu-mgmt-attendance-section {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.stu-mgmt-attendance-title {
    font-size: 0.95rem; font-weight: 700; color: #f1f5f9;
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.stu-mgmt-attendance-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}
.stu-mgmt-att-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2); border-radius: 8px;
    font-size: 0.72rem; color: #10b981;
}
.stu-mgmt-att-chip-guest {
    background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); color: #818cf8;
}

/* ================================================
   GLOBAL APP PARTICLE CANVAS
   ================================================ */
.app-particle-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity 1s ease;
}
.app-layout.active .app-particle-canvas {
    opacity: 1;
}

/* App模式下将 body 背景改为深色，防止底部 dock 透明区域露出 #f8faff 白底 */
.app-layout.active {
    background: #020617;
}

/* ================================================
   FILES VIEW (Dark Immersive Theme)
   ================================================ */
.files-dark {
    position: relative; min-height: calc(100vh - 80px); padding: 32px 24px 100px;
}
.files-bg {
    position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.files-hero {
    position: relative; z-index: 1; text-align: center; margin-bottom: 28px; padding-top: 20px;
}
.files-hero-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
    background: rgba(6,182,212,0.15); border: 1px solid rgba(6,182,212,0.25);
    border-radius: 9999px; color: #22d3ee; font-size: 0.78rem; font-weight: 600;
    margin-bottom: 12px; backdrop-filter: blur(8px);
}
.files-hero-title {
    font-size: 2rem; font-weight: 800; color: #f1f5f9; margin-bottom: 6px;
    background: linear-gradient(135deg, #f1f5f9, #06b6d4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.files-hero-desc {
    font-size: 0.9rem; color: rgba(148,163,184,0.6);
}
.files-dark .upload-area {
    background: rgba(255,255,255,0.04); border-color: rgba(6,182,212,0.25);
    color: #e2e8f0; position: relative; z-index: 1;
}
.files-dark .upload-area:hover {
    background: rgba(6,182,212,0.08); border-color: rgba(6,182,212,0.4);
}
.files-card-glass {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
    overflow: hidden; margin-top: 16px;
}
.files-card-header {
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.files-card-header h3 { color: #f1f5f9; font-size: 1rem; font-weight: 700; margin: 0; }
.files-card-body { padding: 16px 20px; }
.files-dark .files-grid { color: #e2e8f0; }
.files-dark .empty-state { color: rgba(148,163,184,0.5); }
.files-dark .empty-icon { filter: grayscale(0.5); opacity: 0.5; }
.files-dark .file-card {
    background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.files-dark .file-card:hover {
    background: rgba(255,255,255,0.08); border-color: rgba(99,102,241,0.3);
    box-shadow: 0 8px 30px rgba(99,102,241,0.15);
}
.files-dark .file-card .file-name { color: #f1f5f9; }
.files-dark .file-card .file-meta { color: rgba(148,163,184,0.6); }
.files-dark .file-card .file-actions a,
.files-dark .file-card .file-actions button { color: #818cf8; }

@media (max-width: 640px) {
    .files-dark { padding: 20px 12px 100px; }
    .files-hero-title { font-size: 1.5rem; }
}

/* === XP Pin System === */
.post-pin-xp-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; background: none; font-size: 0.72rem; font-weight: 600;
    color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.2s;
}
.post-pin-xp-btn:hover {
    border-color: rgba(251,191,36,0.4); color: #fbbf24;
    background: rgba(251,191,36,0.08); box-shadow: 0 0 12px rgba(251,191,36,0.1);
}
.post-pin-xp-btn.pinned {
    border-color: rgba(251,191,36,0.3); color: #fbbf24;
    background: rgba(251,191,36,0.1);
}

/* Pin Option in New Post Modal */
.pin-option-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; margin-top: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.pin-toggle-wrap {
    display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
}
.pin-toggle-wrap input[type="checkbox"] { display: none; }
.pin-toggle-track {
    width: 36px; height: 20px; border-radius: 10px;
    background: rgba(255,255,255,0.1); position: relative; transition: all 0.3s;
}
.pin-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s;
}
.pin-toggle-wrap input:checked + .pin-toggle-track {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.pin-toggle-wrap input:checked + .pin-toggle-track .pin-toggle-thumb {
    left: 18px; background: white;
}
.pin-toggle-text { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.pin-price-tag {
    padding: 3px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.1));
    color: #fbbf24; border: 1px solid rgba(251,191,36,0.2);
}

/* Pin Confirmation Dialog */
.pin-confirm-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.pin-confirm-dialog {
    background: linear-gradient(160deg, rgba(30,32,48,0.98), rgba(20,22,36,0.98));
    border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
    padding: 28px 32px; max-width: 360px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(251,191,36,0.05);
    text-align: center;
}
.pin-dialog-header {
    font-size: 1.1rem; font-weight: 800; color: #f1f5f9; margin-bottom: 18px;
}
.pin-price-display {
    display: flex; align-items: baseline; justify-content: center; gap: 6px;
    margin-bottom: 20px;
}
.pin-price-amount {
    font-size: 2.4rem; font-weight: 900; color: #fbbf24;
    text-shadow: 0 0 20px rgba(251,191,36,0.3);
}
.pin-price-unit {
    font-size: 1rem; font-weight: 700; color: rgba(251,191,36,0.6);
}
.pin-info-rows { margin-bottom: 14px; }
.pin-info-row {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pin-info-label { font-size: 0.8rem; color: rgba(255,255,255,0.4); }
.pin-info-value { font-size: 0.8rem; font-weight: 700; color: #e2e8f0; }
.pin-balance-ok { color: #34d399; }
.pin-balance-low { color: #f87171; }
.pin-market-hint {
    font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-bottom: 20px;
    padding: 8px; background: rgba(255,255,255,0.02); border-radius: 8px;
}
.pin-confirm-actions { display: flex; gap: 10px; }
.pin-cancel-btn {
    flex: 1; padding: 10px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; background: none; color: rgba(255,255,255,0.5);
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.pin-cancel-btn:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.pin-do-btn {
    flex: 1; padding: 10px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1a1c2e; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(251,191,36,0.25);
}
.pin-do-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(251,191,36,0.35); }
.pin-do-btn.disabled {
    opacity: 0.4; cursor: not-allowed;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3);
    box-shadow: none;
}

/* === Code Blocks in Forum === */
.code-block {
    margin: 10px 0; border-radius: 12px; overflow: hidden;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.code-block-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 14px; background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.code-lang {
    font-size: 0.7rem; font-weight: 700; color: rgba(129,140,248,0.7);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.code-copy-btn {
    padding: 2px 8px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; background: none; font-size: 0.68rem;
    color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.2s;
}
.code-copy-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.code-content {
    padding: 14px 16px; margin: 0; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem; line-height: 1.6; color: #e2e8f0;
    overflow-x: auto; white-space: pre; tab-size: 4;
}
.inline-code {
    padding: 1px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em; color: #c7d2fe;
}

/* Python Syntax Highlighting */
.py-keyword { color: #c084fc; font-weight: 600; }
.py-string { color: #34d399; }
.py-comment { color: rgba(148,163,184,0.5); font-style: italic; }
.py-number { color: #fbbf24; }
.py-builtin { color: #60a5fa; }
.py-decorator { color: #fb923c; }

/* Code button styles (new post modal + comment form) */
.forum-code-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.5);
    cursor: pointer; transition: all 0.2s;
}
.forum-code-btn:hover {
    border-color: rgba(129,140,248,0.4); color: #a5b4fc;
    background: rgba(129,140,248,0.1);
}
.comment-code-btn {
    padding: 4px 12px; background: none;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.4);
    cursor: pointer; transition: all 0.2s;
}
.comment-code-btn:hover {
    border-color: rgba(129,140,248,0.3); color: #a5b4fc;
    background: rgba(129,140,248,0.08);
}

/* === Professor Delete Actions === */
.post-mod-btn.mod-delete:hover {
    opacity: 1; background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.4); color: #f87171;
}
.post-detail-delete-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px; background: rgba(239,68,68,0.06);
    font-size: 0.75rem; font-weight: 600; color: rgba(239,68,68,0.6);
    cursor: pointer; transition: all 0.2s; margin-left: 8px;
}
.post-detail-delete-btn:hover {
    background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4);
    color: #f87171;
}

/* Delete Confirmation Dialog */
.delete-confirm-dialog {
    background: linear-gradient(160deg, rgba(30,32,48,0.98), rgba(20,22,36,0.98));
    border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
    padding: 28px 32px; max-width: 380px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(239,68,68,0.05);
    text-align: center;
}
.delete-dialog-icon { font-size: 2.2rem; margin-bottom: 10px; }
.delete-dialog-title {
    font-size: 1.1rem; font-weight: 800; color: #f1f5f9; margin-bottom: 10px;
}
.delete-dialog-post-title {
    font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 12px;
    padding: 6px 12px; background: rgba(255,255,255,0.03);
    border-radius: 8px; display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.delete-dialog-msg {
    font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-bottom: 20px;
    line-height: 1.5;
}
.delete-do-btn {
    flex: 1; padding: 10px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: white; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}
.delete-do-btn:hover {
    transform: translateY(-1px); box-shadow: 0 6px 20px rgba(239,68,68,0.35);
}

/* Tag Delete Button on Filter Pills */
.forum-pill-wrap {
    position: relative; display: inline-flex; align-items: center;
    flex-shrink: 0;
}
.forum-pill-wrap .forum-pill {
    transition: all 0.2s;
}
.forum-pill-wrap:hover .forum-pill {
    padding-right: 26px;
}
.forum-pill-delete {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(0.8);
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(239,68,68,0.7); border: none;
    color: white; font-size: 0.75rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: all 0.2s;
    z-index: 2; pointer-events: none;
}
.forum-pill-wrap:hover .forum-pill-delete {
    opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto;
}
.forum-pill-delete:hover {
    background: #ef4444;
    box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}

/* ================================================
   RESEARCH COLLABORATION SYSTEM (课题合作)
   ================================================ */

/* --- Container & Background --- */
.collab-dark {
    position: relative; min-height: calc(100vh - 80px);
    padding-top: 20px; padding-bottom: 48px;
}
.collab-bg {
    position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
    border-radius: inherit;
}
.collab-bg .orb {
    position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.35;
    animation: collabOrbFloat 12s ease-in-out infinite alternate;
}
.collab-bg .orb:nth-child(1) {
    width: 420px; height: 420px; top: -100px; left: -80px;
    background: radial-gradient(circle, rgba(56,189,248,0.5), transparent 70%);
}
.collab-bg .orb:nth-child(2) {
    width: 360px; height: 360px; bottom: -60px; right: -60px;
    background: radial-gradient(circle, rgba(168,85,247,0.45), transparent 70%);
    animation-delay: -4s;
}
.collab-bg .orb:nth-child(3) {
    width: 280px; height: 280px; top: 40%; left: 50%;
    background: radial-gradient(circle, rgba(34,197,94,0.35), transparent 70%);
    animation-delay: -8s;
}
@keyframes collabOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.08); }
    100% { transform: translate(-15px, 25px) scale(0.95); }
}
.collab-network-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0.3;
}

/* --- Dock Message Badge --- */
.dock-msg-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 5px; border-radius: 9999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: white; font-size: 0.65rem; font-weight: 800;
    text-align: center; box-shadow: 0 2px 8px rgba(239,68,68,0.5);
    animation: badgePulse 2s ease-in-out infinite;
    z-index: 10;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* --- Tabs --- */
.collab-tabs {
    position: relative; z-index: 1;
    display: flex; gap: 4px; padding: 20px 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto; scrollbar-width: none;
}
.collab-tabs::-webkit-scrollbar { display: none; }
.collab-tab {
    padding: 10px 20px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.collab-tab:hover {
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.collab-tab.active {
    background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(168,85,247,0.2));
    border-color: rgba(56,189,248,0.3);
    color: #e2e8f0; font-weight: 700;
    box-shadow: 0 4px 20px rgba(56,189,248,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* --- Panels --- */
.collab-panel {
    display: none; position: relative; z-index: 1;
    padding-top: 24px;
    animation: collabFadeIn 0.4s ease-out;
}
.collab-panel.active { display: block; }
@keyframes collabFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Common: Empty & Loading --- */
.collab-empty {
    text-align: center; padding: 60px 20px;
    color: rgba(255,255,255,0.3);
}
.collab-empty-icon {
    font-size: 3rem; margin-bottom: 12px; opacity: 0.5;
    animation: collabEmptyBounce 3s ease-in-out infinite;
}
@keyframes collabEmptyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.collab-empty p { font-size: 0.9rem; }
.collab-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px;
}

/* ================================================
   PLAZA (课题广场)
   ================================================ */
.collab-plaza-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.collab-plaza-hero { flex: 1; }
.collab-hero-title {
    font-size: 2.2rem; font-weight: 900;
    background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #22c55e 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 6px;
    animation: collabTitleShimmer 6s ease-in-out infinite;
    background-size: 200% 200%;
}
@keyframes collabTitleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.collab-hero-desc {
    font-size: 0.88rem; color: rgba(255,255,255,0.4); max-width: 460px;
}
.collab-publish-btn {
    padding: 12px 28px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8, #a855f7);
    color: white; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(56,189,248,0.3);
}
.collab-publish-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 30px rgba(56,189,248,0.4);
}

/* Filters */
.collab-filters {
    display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
.collab-search {
    flex: 1; min-width: 200px; padding: 10px 16px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; color: #e2e8f0; font-size: 0.85rem;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.collab-search:focus {
    outline: none; border-color: rgba(56,189,248,0.4);
    box-shadow: 0 0 20px rgba(56,189,248,0.1);
}
.collab-search::placeholder { color: rgba(255,255,255,0.25); }
.collab-filter-select {
    padding: 10px 16px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    color: #e2e8f0; font-size: 0.85rem; cursor: pointer;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s;
}
.collab-filter-select:focus { outline: none; border-color: rgba(56,189,248,0.4); }
.collab-filter-select option { background: #1a1f2e; color: #e2e8f0; }

/* Project Grid */
.collab-projects-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
@media (max-width: 768px) {
    .collab-projects-grid { grid-template-columns: 1fr; }
    .collab-plaza-header { flex-direction: column; align-items: stretch; }
}

/* Project Card */
.collab-project-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 22px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default; position: relative;
}
.collab-project-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #22c55e);
    opacity: 0; transition: opacity 0.3s;
}
.collab-project-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(56,189,248,0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(56,189,248,0.08);
}
.collab-project-card:hover::before { opacity: 1; }
.collab-endorsed {
    border-color: rgba(34,197,94,0.2);
    box-shadow: 0 0 24px rgba(34,197,94,0.06);
}
.collab-endorsed::before {
    background: linear-gradient(90deg, #22c55e, #38bdf8); opacity: 1;
}
.collab-card-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.collab-field-tag {
    display: inline-block; padding: 4px 12px;
    background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.2);
    border-radius: 9999px; font-size: 0.72rem; font-weight: 600; color: #7dd3fc;
}
.collab-status {
    font-size: 0.72rem; font-weight: 700; padding: 3px 10px;
    border-radius: 9999px;
}
.collab-status-open {
    background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25);
    color: #86efac;
}
.collab-status-full {
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
    color: #fca5a5;
}
.collab-card-title {
    font-size: 1.15rem; font-weight: 800; color: #f1f5f9;
    letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.35;
}
.collab-card-desc {
    font-size: 0.82rem; color: rgba(255,255,255,0.45);
    line-height: 1.6; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.collab-card-meta {
    display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
    font-size: 0.78rem; color: rgba(255,255,255,0.4);
}
.collab-card-author { display: flex; align-items: center; gap: 6px; }
.collab-mini-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(168,85,247,0.4));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.15);
}
.collab-card-team { display: flex; align-items: center; gap: 4px; }
.collab-card-reward { color: #fbbf24; font-weight: 700; }
.collab-card-methods {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.collab-method-chip {
    padding: 3px 10px; border-radius: 8px;
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2);
    font-size: 0.7rem; font-weight: 600; color: #c4b5fd;
    transition: all 0.2s;
}
.collab-method-chip:hover {
    background: rgba(168,85,247,0.2); transform: scale(1.05);
}
.collab-endorse-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 9999px;
    background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25);
    font-size: 0.7rem; font-weight: 700; color: #86efac;
}
.collab-card-actions {
    display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.collab-card-btn {
    flex: 1; padding: 9px 16px; border: none; border-radius: 10px;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-btn-apply {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: white; box-shadow: 0 4px 16px rgba(56,189,248,0.25);
}
.collab-btn-apply:hover {
    transform: translateY(-2px); box-shadow: 0 6px 24px rgba(56,189,248,0.35);
}
.collab-btn-applied {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
    cursor: default;
}
.collab-btn-joined {
    background: rgba(34,197,94,0.12); color: #86efac; cursor: default;
}
.collab-btn-manage {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.2));
    border: 1px solid rgba(245,158,11,0.3); color: #fbbf24;
}
.collab-btn-manage:hover {
    transform: translateY(-2px); background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(239,68,68,0.3));
}
.collab-btn-endorse {
    background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2);
    color: #86efac; padding: 6px 14px; border-radius: 10px;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    transition: all 0.25s;
}
.collab-btn-endorse:hover {
    background: rgba(34,197,94,0.2); transform: translateY(-1px);
}

/* ================================================
   PROFILE CARD (名片)
   ================================================ */
.collab-profile-card {
    max-width: 600px; margin: 0 auto;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px; padding: 32px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    animation: collabCardAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes collabCardAppear {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.collab-profile-header {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 28px; padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.collab-profile-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(168,85,247,0.3));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 800; color: #e2e8f0;
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 20px rgba(56,189,248,0.15);
    transition: all 0.4s;
}
.collab-profile-avatar:hover {
    transform: scale(1.08); box-shadow: 0 6px 28px rgba(56,189,248,0.25);
}
.collab-profile-info { flex: 1; }
.collab-profile-info h3 {
    font-size: 1.3rem; font-weight: 800; color: #f1f5f9;
    margin: 0 0 4px; letter-spacing: -0.02em;
}
.collab-profile-rank {
    font-size: 0.82rem; color: rgba(255,255,255,0.4);
}
.collab-profile-xp {
    padding: 6px 16px; border-radius: 9999px;
    background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(168,85,247,0.15));
    border: 1px solid rgba(56,189,248,0.2);
    font-size: 0.85rem; font-weight: 800; color: #7dd3fc;
    white-space: nowrap;
}
.collab-profile-form { display: flex; flex-direction: column; gap: 16px; }
.collab-profile-form label {
    font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.55);
    margin-bottom: 4px; letter-spacing: 0.03em;
}
.collab-input {
    width: 100%; padding: 12px 16px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; color: #e2e8f0; font-size: 0.88rem;
    font-family: inherit; transition: all 0.3s;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.collab-input:focus {
    outline: none; border-color: rgba(56,189,248,0.4);
    box-shadow: 0 0 24px rgba(56,189,248,0.1);
    background: rgba(255,255,255,0.08);
}
.collab-input::placeholder { color: rgba(255,255,255,0.2); }
.collab-profile-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
}
.collab-profile-toggle-row span {
    font-size: 0.85rem; color: rgba(255,255,255,0.6); font-weight: 600;
}
.collab-switch {
    position: relative; display: inline-block; width: 48px; height: 26px;
}
.collab-switch input { opacity: 0; width: 0; height: 0; }
.collab-switch-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: rgba(255,255,255,0.1); border-radius: 26px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-switch-slider::before {
    content: ''; position: absolute; left: 3px; top: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,0.6);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-switch input:checked + .collab-switch-slider {
    background: linear-gradient(135deg, #38bdf8, #a855f7);
    box-shadow: 0 2px 12px rgba(56,189,248,0.3);
}
.collab-switch input:checked + .collab-switch-slider::before {
    transform: translateX(22px); background: white;
}
.collab-save-btn {
    padding: 12px 28px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8, #a855f7);
    color: white; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(56,189,248,0.25);
    margin-top: 8px;
}
.collab-save-btn:hover {
    transform: translateY(-2px); box-shadow: 0 6px 28px rgba(56,189,248,0.35);
}

/* ================================================
   MESSAGES (私信)
   ================================================ */
.collab-msg-layout {
    display: grid; grid-template-columns: 320px 1fr;
    gap: 0; min-height: 500px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px; overflow: hidden;
}
@media (max-width: 768px) {
    .collab-msg-layout { grid-template-columns: 1fr; min-height: 400px; }
}
.collab-msg-list {
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto; max-height: 600px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.collab-msg-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-left: 3px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.collab-msg-item:hover {
    background: rgba(255,255,255,0.05);
    border-left-color: rgba(56,189,248,0.3);
}
.collab-msg-item.collab-msg-active {
    background: linear-gradient(90deg, rgba(56,189,248,0.1), rgba(56,189,248,0.02));
    border-left-color: #38bdf8;
}
.collab-msg-item.collab-msg-active .collab-msg-name {
    color: #38bdf8;
}
.collab-msg-unread {
    background: rgba(56,189,248,0.06);
    border-left-color: #38bdf8;
}
.collab-msg-unread::after {
    content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #38bdf8; box-shadow: 0 0 6px rgba(56,189,248,0.4);
}
.collab-msg-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 700; color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(168,85,247,0.35));
}
.collab-msg-avatar.avatar-professor { background: linear-gradient(135deg, #a855f7, #c084fc); border-color: rgba(168,85,247,0.3); }
.collab-msg-avatar.avatar-guest { background: linear-gradient(135deg, #64748b, #94a3b8); border-color: rgba(100,116,139,0.3); }
.collab-msg-avatar.avatar-student { background: linear-gradient(135deg, #6366f1, #818cf8); }
.collab-msg-avatar.avatar-student.rlv-novice   { background: linear-gradient(135deg, #64748b, #94a3b8); }
.collab-msg-avatar.avatar-student.rlv-bronze   { background: linear-gradient(135deg, #b45309, #d97706); }
.collab-msg-avatar.avatar-student.rlv-silver   { background: linear-gradient(135deg, #6b7280, #d1d5db); }
.collab-msg-avatar.avatar-student.rlv-gold     { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 0 10px rgba(251,191,36,0.2); }
.collab-msg-avatar.avatar-student.rlv-platinum { background: linear-gradient(135deg, #06b6d4, #67e8f9); box-shadow: 0 0 12px rgba(6,182,212,0.25); }
.collab-msg-avatar.avatar-student.rlv-diamond  { background: linear-gradient(135deg, #8b5cf6, #c4b5fd); box-shadow: 0 0 14px rgba(139,92,246,0.3); }
.collab-msg-avatar.avatar-student.rlv-master   { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 0 16px rgba(225,29,72,0.3); }
.collab-msg-avatar.avatar-student.rlv-legend   { background: linear-gradient(135deg, #f59e0b, #fbbf24, #f97316); box-shadow: 0 0 20px rgba(245,158,11,0.4); }
.collab-msg-preview { flex: 1; min-width: 0; }
.collab-msg-name {
    font-size: 0.88rem; font-weight: 700; color: #f1f5f9;
    margin-bottom: 2px; display: flex; align-items: center; gap: 6px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.2s;
}
.collab-msg-name .post-badge {
    font-size: 0.62rem; padding: 1px 6px; flex-shrink: 0;
}
.collab-msg-last {
    font-size: 0.78rem; color: rgba(255,255,255,0.35);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.collab-msg-time {
    font-size: 0.68rem; color: rgba(255,255,255,0.25);
    white-space: nowrap; flex-shrink: 0;
}

/* Chat */
.collab-msg-chat {
    display: flex; flex-direction: column;
}
.collab-chat-header {
    padding: 16px 20px; font-size: 0.95rem; font-weight: 700; color: #f1f5f9;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    display: flex; align-items: center; gap: 10px;
}
.collab-chat-header .collab-msg-avatar {
    width: 30px; height: 30px; font-size: 0.75rem;
}
.collab-chat-header .post-badge {
    font-size: 0.65rem; padding: 2px 7px;
}
.collab-chat-back {
    cursor: pointer; font-size: 1.2rem; color: rgba(255,255,255,0.5);
    transition: color 0.2s;
}
.collab-chat-back:hover { color: #38bdf8; }
.collab-chat-body {
    flex: 1; padding: 20px; overflow-y: auto;
    max-height: 440px; display: flex; flex-direction: column; gap: 8px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.collab-chat-bubble {
    max-width: 75%; padding: 10px 16px;
    border-radius: 16px; font-size: 0.85rem; line-height: 1.5;
    animation: collabBubbleIn 0.3s ease-out;
}
@keyframes collabBubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.collab-bubble-mine {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(56,189,248,0.25), rgba(99,102,241,0.25));
    border: 1px solid rgba(56,189,248,0.2);
    color: #e2e8f0;
    border-bottom-right-radius: 4px;
}
.collab-bubble-other {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0;
    border-bottom-left-radius: 4px;
}
.collab-bubble-system {
    align-self: center; max-width: 85%;
    background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.15);
    color: rgba(255,255,255,0.5); font-size: 0.78rem; text-align: center;
    border-radius: 12px;
}
.collab-bubble-text { word-break: break-word; }
.collab-bubble-time {
    font-size: 0.65rem; color: rgba(255,255,255,0.25);
    margin-top: 4px; text-align: right;
}
.collab-chat-input-row {
    display: flex; gap: 8px; padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.collab-chat-input {
    flex: 1; padding: 10px 16px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; color: #e2e8f0; font-size: 0.85rem; font-family: inherit;
    transition: border-color 0.3s;
}
.collab-chat-input:focus { outline: none; border-color: rgba(56,189,248,0.4); }
.collab-chat-input::placeholder { color: rgba(255,255,255,0.2); }
.collab-chat-send {
    padding: 10px 18px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: white; font-size: 1rem; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-chat-send:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 16px rgba(56,189,248,0.3);
}

/* ================================================
   WORKSPACE / KANBAN (工作室)
   ================================================ */
.collab-ws-select { margin-bottom: 16px; }
.collab-ws-board {
    animation: collabFadeIn 0.4s ease-out;
    position: relative;
}
.collab-ws-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(56,189,248,0.04), rgba(168,85,247,0.04));
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 20px;
    position: relative;
}
.collab-ws-header::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%);
    pointer-events: none;
}
.collab-ws-header::after {
    content: ''; position: absolute; bottom: -30px; left: 20%;
    width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,0.08), transparent 70%);
    pointer-events: none;
}
.collab-ws-header-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; min-width: 0; }
.collab-ws-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.collab-ws-header h3 {
    font-size: 1.25rem; font-weight: 900; color: #f1f5f9;
    margin: 0; letter-spacing: -0.03em;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe, #a5b4fc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.collab-ws-members { display: flex; gap: 6px; flex-wrap: wrap; }
.collab-ws-member-chip {
    padding: 4px 12px; border-radius: 9999px;
    background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.2);
    font-size: 0.72rem; font-weight: 600; color: #a5b4fc;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-ws-member-chip:hover {
    transform: translateY(-2px); background: rgba(99,102,241,0.2);
    box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}
.collab-ws-member-chip .collab-msg-avatar {
    width: 22px; height: 22px; font-size: 0.6rem; border: none;
}
.collab-ws-member-chip .post-badge {
    font-size: 0.58rem; padding: 1px 5px;
}
.collab-ws-add-task {
    padding: 10px 22px; border: 1px solid rgba(99,102,241,0.25);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.08));
    color: #a5b4fc; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-ws-add-task:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.15));
    border-color: rgba(99,102,241,0.4);
    color: #c7d2fe; transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(99,102,241,0.2);
}

/* Kanban Board */
.collab-kanban {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 24px;
}
@media (max-width: 768px) {
    .collab-kanban { grid-template-columns: 1fr; }
}
.collab-kanban-col {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px; padding: 18px;
    min-height: 200px;
    position: relative;
    transition: border-color 0.3s;
}
.collab-kanban-col::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 18px 18px 0 0; overflow: hidden;
}
.collab-kanban-col[data-status="todo"]::before { background: linear-gradient(90deg, #475569, #64748b); }
.collab-kanban-col[data-status="doing"]::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8); box-shadow: 0 0 12px rgba(56,189,248,0.3); }
.collab-kanban-col[data-status="done"]::before { background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: 0 0 12px rgba(34,197,94,0.3); }
.collab-kanban-col:hover { border-color: rgba(255,255,255,0.1); }
.collab-kanban-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; font-size: 0.85rem; font-weight: 700;
    color: rgba(255,255,255,0.6);
}
.collab-kanban-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.todo-dot {
    background: #64748b;
    box-shadow: 0 0 8px rgba(100,116,139,0.4);
}
.doing-dot {
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56,189,248,0.5);
    animation: dotPulse 2s ease-in-out infinite;
}
.done-dot {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.5);
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(56,189,248,0.5); }
    50% { box-shadow: 0 0 16px rgba(56,189,248,0.8); }
}
.collab-kanban-count {
    padding: 2px 8px; border-radius: 9999px;
    background: rgba(255,255,255,0.08); font-size: 0.72rem;
    font-weight: 800; color: rgba(255,255,255,0.4);
    margin-left: auto;
}
.collab-kanban-cards { display: flex; flex-direction: column; gap: 10px; }
.collab-kanban-empty {
    text-align: center; padding: 20px 0;
    color: rgba(255,255,255,0.15); font-size: 0.85rem;
}
.collab-kanban-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 14px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: kanbanCardIn 0.4s ease-out both;
    position: relative;
}
@keyframes kanbanCardIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.collab-kanban-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(99,102,241,0.1);
}
.collab-kanban-card-title {
    font-size: 0.88rem; font-weight: 700; color: #f1f5f9;
    margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.collab-kanban-card-desc {
    font-size: 0.75rem; color: rgba(255,255,255,0.35);
    margin-bottom: 8px; line-height: 1.4;
}
.collab-kanban-card-footer {
    display: flex; align-items: center; justify-content: space-between;
}
.collab-kanban-assignee {
    font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.4);
    padding: 3px 10px; border-radius: 9999px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.12);
    display: inline-flex; align-items: center; gap: 4px;
}
.collab-kanban-assignee .collab-msg-avatar {
    width: 18px; height: 18px; font-size: 0.5rem; border: none;
}
.collab-kanban-move {
    width: 28px; height: 28px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(99,102,241,0.15));
    color: #7dd3fc; font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-kanban-move:hover {
    transform: scale(1.15); background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: white; box-shadow: 0 4px 16px rgba(56,189,248,0.35);
}
.collab-dep-tag {
    font-size: 0.7rem; color: #fbbf24; cursor: help;
}

/* Bottom Grid: Pinboard + Activity Log side by side */
.ws-bottom-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px; margin-bottom: 24px;
}
@media (max-width: 768px) {
    .ws-bottom-grid { grid-template-columns: 1fr; }
}

/* Activity Log */
.collab-ws-log {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px; padding: 18px;
    position: relative; overflow: hidden;
}
.collab-ws-log::before {
    content: ''; position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.06), transparent 70%);
    pointer-events: none;
}
.collab-ws-log h4 {
    font-size: 0.9rem; font-weight: 800; color: rgba(255,255,255,0.6);
    margin: 0 0 12px;
}
.collab-log-list {
    max-height: 240px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.collab-log-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.78rem; animation: collabFadeIn 0.3s ease-out;
    transition: background 0.2s;
}
.collab-log-item:hover { background: rgba(255,255,255,0.02); border-radius: 8px; }
.collab-log-icon { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }
.collab-log-text { flex: 1; color: rgba(255,255,255,0.5); line-height: 1.4; }
.collab-log-text strong { color: rgba(255,255,255,0.7); }
.collab-log-time {
    font-size: 0.68rem; color: rgba(255,255,255,0.2);
    white-space: nowrap; flex-shrink: 0;
}
.collab-log-empty {
    text-align: center; padding: 16px; color: rgba(255,255,255,0.15);
}

/* ================================================
   WORKSPACE ENHANCEMENTS (工作室增强)
   ================================================ */

/* === Stats Bar === */
.ws-stats-bar {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 22px; margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(56,189,248,0.04), rgba(99,102,241,0.04));
    border: 1px solid rgba(56,189,248,0.1);
    border-radius: 18px; flex-wrap: wrap;
    animation: pvSlideUp 0.5s ease-out;
    position: relative; overflow: hidden;
}
.ws-stats-bar::after {
    content: ''; position: absolute; top: -30px; left: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,0.08), transparent 70%);
    pointer-events: none;
}
.ws-stat-ring { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.ws-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ws-ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 6; }
.ws-ring-fg {
    fill: none; stroke: #38bdf8; stroke-width: 6; stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(56,189,248,0.4));
    transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-ring-inner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.82rem; font-weight: 900; color: #f1f5f9;
}
.ws-stat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-chip {
    padding: 5px 12px; border-radius: 9999px;
    font-size: 0.68rem; font-weight: 700;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-chip:hover { transform: translateY(-2px) scale(1.1); }
.ws-chip-todo { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }
.ws-chip-doing { background: rgba(56,189,248,0.12); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.2); }
.ws-chip-done { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.ws-chip-overdue { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); animation: pvPulse 1.5s ease-in-out infinite; }
.ws-chip-urgent { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); animation: pvPulse 2s ease-in-out infinite; }

/* Member contribution bars */
.ws-member-bars { display: flex; flex-direction: column; gap: 5px; margin-left: auto; min-width: 160px; }
.ws-mbar-row { display: flex; align-items: center; gap: 6px; }
.ws-mbar-row .collab-msg-avatar { width: 20px; height: 20px; font-size: 0.5rem; border: none; flex-shrink: 0; }
.ws-mbar-name { font-size: 0.62rem; font-weight: 600; color: rgba(255,255,255,0.4); width: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mbar-track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.ws-mbar-fill { height: 100%; border-radius: 99px; background: rgba(99,102,241,0.2); position: relative; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ws-mbar-done { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 6px rgba(99,102,241,0.3); }
.ws-mbar-num { font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.3); width: 24px; text-align: right; }

@media (max-width: 600px) {
    .ws-stats-bar { flex-direction: column; align-items: stretch; }
    .ws-member-bars { margin-left: 0; min-width: unset; }
}

/* === Priority Badges === */
.ws-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.ws-prio-badge {
    padding: 2px 8px; border-radius: 6px;
    font-size: 0.62rem; font-weight: 700;
}
.ws-prio-low { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.ws-prio-medium { background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.ws-prio-high { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.ws-prio-urgent { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); animation: pvPulse 1.5s ease-in-out infinite; }

/* === Due Date Badges === */
.ws-due-badge {
    padding: 2px 8px; border-radius: 6px;
    font-size: 0.62rem; font-weight: 700;
}
.ws-due-ok { background: rgba(99,102,241,0.1); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2); }
.ws-due-soon { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.ws-due-overdue { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); animation: pvPulse 1.5s ease-in-out infinite; }

/* Comment count on card */
.ws-comment-count {
    font-size: 0.65rem; color: rgba(255,255,255,0.35); margin-left: 2px;
}

/* === Task Comments === */
.ws-task-comments {
    max-height: 200px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
    margin-bottom: 8px;
}
.ws-comments-empty {
    text-align: center; padding: 12px; color: rgba(255,255,255,0.2); font-size: 0.8rem;
}
.ws-comment-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; animation: pvSlideUp 0.3s ease-out both;
}
.ws-comment-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.ws-comment-head strong { font-size: 0.78rem; color: #e2e8f0; }
.ws-comment-time { font-size: 0.62rem; color: rgba(255,255,255,0.2); }
.ws-comment-body { font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.5; }
.ws-comment-input-row { display: flex; gap: 8px; }

/* === Team Vibes: Floating Button + Slide Panel === */
.ws-vibe-fab {
    position: fixed; bottom: 32px; right: 32px; z-index: 1180;
    width: 60px; height: 60px;
    border-radius: 50%; border: none;
    background: linear-gradient(135deg, #ec4899, #a855f7, #6366f1);
    color: white; font-size: 1.5rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(168,85,247,0.35), 0 0 40px rgba(236,72,153,0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: wsVibeFabIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wsVibeFabIn {
    from { opacity: 0; transform: scale(0) rotate(-180deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.ws-vibe-fab:hover {
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 8px 32px rgba(168,85,247,0.5), 0 0 60px rgba(236,72,153,0.2);
}
.ws-vibe-fab:active { transform: scale(0.95); }
.ws-vibe-fab-icon { font-size: 1.5rem; position: relative; z-index: 2; }
.ws-vibe-fab-pulse {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(236,72,153,0.4);
    animation: wsVibeFabPulse 2s ease-in-out infinite;
}
@keyframes wsVibeFabPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0; }
}
.ws-vibe-fab-hide { opacity: 0; pointer-events: none; transform: scale(0.5); }

/* Overlay */
.ws-vibe-overlay {
    position: fixed; inset: 0; z-index: 1190;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
}
.ws-vibe-overlay-show { opacity: 1; pointer-events: auto; }

/* Slide-in Panel */
.ws-vibe-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
    width: 400px; max-width: 92vw;
    background: linear-gradient(180deg, rgba(15,10,30,0.98), rgba(10,10,28,0.99));
    border-left: 1px solid rgba(168,85,247,0.15);
    box-shadow: -8px 0 40px rgba(0,0,0,0.5), 0 0 80px rgba(168,85,247,0.08);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto; padding: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.ws-vibe-panel-open { transform: translateX(0); }
.ws-vibe-panel .ws-focus-section { margin: 0; padding: 24px; padding-top: 16px; position: relative; overflow: visible; }

/* Vibe Card inside panel */
.ws-vibe-card {
    border-radius: 0; border: none;
    background: transparent;
}
.ws-vibe-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 20px; gap: 12px;
}
.ws-vibe-header-text { flex: 1; }
.ws-vibe-title {
    font-size: 1.2rem; font-weight: 900;
    background: linear-gradient(135deg, #f9a8d4, #c084fc, #93c5fd);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ws-vibe-subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 4px; }
.ws-vibe-close-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6); font-size: 1.3rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.25s; flex-shrink: 0;
    position: relative; z-index: 10;
}
.ws-vibe-close-btn:hover {
    background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4);
    color: #f87171; transform: rotate(90deg);
}
.ws-vibe-members-wrap { margin-bottom: 20px; }
.ws-vibe-members-label { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.35); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.ws-vibe-members { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-vibe-member-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px 7px 7px;
    border-radius: 50px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7); font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-vibe-member-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(236,72,153,0.1);
    border-color: rgba(236,72,153,0.3);
    box-shadow: 0 4px 20px rgba(236,72,153,0.15);
}
.ws-vibe-member-sel {
    background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(168,85,247,0.18)) !important;
    border-color: rgba(236,72,153,0.5) !important;
    color: #f9a8d4 !important;
    box-shadow: 0 0 24px rgba(236,72,153,0.25);
    animation: wsVibeMemberPulse 2s ease-in-out infinite;
}
@keyframes wsVibeMemberPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(236,72,153,0.15); }
    50% { box-shadow: 0 0 28px rgba(236,72,153,0.35); }
}
.ws-vibe-gifts-wrap { margin-bottom: 20px; }
.ws-vibe-gifts-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.ws-vibe-gift-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 14px 8px;
    border-radius: 16px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    cursor: pointer; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; overflow: hidden;
}
.ws-vibe-gift-btn:not([disabled]):hover {
    transform: translateY(-5px) scale(1.1);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.ws-vibe-gift-btn:not([disabled]):active { transform: scale(0.9); }
.ws-vibe-gift-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.ws-vibe-gift-btn:not([disabled]):hover::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 70%);
    animation: wsVibeGiftGlow 1s ease-in-out infinite;
}
@keyframes wsVibeGiftGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.ws-vibe-gift-emoji { font-size: 1.6rem; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ws-vibe-gift-btn:not([disabled]):hover .ws-vibe-gift-emoji {
    transform: scale(1.3) rotate(-12deg);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}
.ws-vibe-gift-label { font-size: 0.62rem; font-weight: 600; color: rgba(255,255,255,0.35); }
.ws-vibe-caring-wrap { margin-bottom: 22px; text-align: center; }
.ws-vibe-caring-btn {
    padding: 12px 32px;
    border-radius: 50px;
    border: 1px solid rgba(52,211,153,0.25);
    background: linear-gradient(135deg, rgba(52,211,153,0.1), rgba(56,189,248,0.1));
    color: #6ee7b7; font-size: 0.85rem; font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; overflow: hidden;
}
.ws-vibe-caring-btn:not([disabled]):hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(56,189,248,0.2));
    box-shadow: 0 6px 28px rgba(52,211,153,0.25);
}
.ws-vibe-caring-btn:not([disabled]):active { transform: scale(0.95); }
.ws-vibe-caring-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.ws-vibe-history { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px; }
.ws-vibe-history-title {
    font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.3);
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em;
}
.ws-vibe-history-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ws-vibe-history-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    animation: wsVibeItemIn 0.3s ease-out;
    transition: all 0.2s;
}
.ws-vibe-history-item:hover { background: rgba(255,255,255,0.05); }
@keyframes wsVibeItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
.ws-vibe-history-gift { border-color: rgba(168,85,247,0.1); }
.ws-vibe-history-caring { border-color: rgba(52,211,153,0.1); }
.ws-vibe-h-emoji { font-size: 1.1rem; flex-shrink: 0; }
.ws-vibe-h-text { font-size: 0.72rem; color: rgba(255,255,255,0.5); flex: 1; line-height: 1.4; }
.ws-vibe-h-text b { color: rgba(255,255,255,0.8); font-weight: 700; }
.ws-vibe-h-time { font-size: 0.62rem; color: rgba(255,255,255,0.2); flex-shrink: 0; white-space: nowrap; }
.ws-vibe-history-empty { font-size: 0.78rem; color: rgba(255,255,255,0.25); text-align: center; padding: 16px; }
/* Floating emoji animation */
.ws-vibe-float-emoji {
    position: absolute; bottom: 40%; pointer-events: none;
    animation: wsVibeFloat 2.5s ease-out forwards;
    z-index: 10;
}
@keyframes wsVibeFloat {
    0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
    20% { opacity: 1; transform: translateY(-30px) scale(1.3) rotate(-10deg); }
    100% { opacity: 0; transform: translateY(-160px) scale(0.4) rotate(25deg); }
}
/* Panel scrollbar */
.ws-vibe-panel::-webkit-scrollbar { width: 4px; }
.ws-vibe-panel::-webkit-scrollbar-track { background: transparent; }
.ws-vibe-panel::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.15); border-radius: 4px; }
@media (max-width: 600px) {
    .ws-vibe-fab { bottom: 20px; right: 20px; width: 52px; height: 52px; font-size: 1.2rem; }
    .ws-vibe-panel { width: 100vw; max-width: 100vw; }
    .ws-vibe-gifts-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}

/* === Pinboard (Enhanced) === */
.ws-pinboard-section {
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}
/* Subtle animated gradient backdrop behind the pinboard */
.ws-pinboard-section::before {
    content: '';
    position: absolute;
    inset: -20px;
    background:
        radial-gradient(ellipse 200px 160px at 20% 30%, rgba(99,102,241,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 180px 140px at 80% 70%, rgba(236,72,153,0.04) 0%, transparent 70%);
    animation: wsPinBgDrift 16s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
@keyframes wsPinBgDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8px, -6px) scale(1.03); }
    100% { transform: translate(-5px, 4px) scale(0.98); }
}

.ws-section-head {
    font-size: 0.95rem; font-weight: 800;
    color: rgba(255,255,255,0.65);
    margin-bottom: 14px;
    position: relative; z-index: 1;
    letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 8px;
}
/* Decorative animated underline */
.ws-section-head::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(99,102,241,0.4), rgba(168,85,247,0.2), transparent);
    animation: wsHeadLine 3s ease-in-out infinite alternate;
}
@keyframes wsHeadLine {
    0%   { opacity: 0.4; transform: scaleX(0.7); transform-origin: left; }
    100% { opacity: 0.8; transform: scaleX(1); transform-origin: left; }
}

.ws-pinboard {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 12px; margin-bottom: 14px; min-height: 40px;
    position: relative; z-index: 1;
}

/* --- Pin Card --- */
.ws-pin-card {
    padding: 16px; border-radius: 16px;
    position: relative; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: wsPinIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Shimmer sweep on cards */
.ws-pin-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.04) 45%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 55%,
        transparent 60%
    );
    background-size: 250% 100%;
    animation: wsPinShimmer 6s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes wsPinShimmer {
    0%, 100% { background-position: 200% 0; }
    50%      { background-position: -50% 0; }
}
/* Corner glow dot */
.ws-pin-card::after {
    content: '';
    position: absolute; top: 8px; right: 8px;
    width: 6px; height: 6px; border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s;
    transform: scale(0.5);
}
.ws-pin-card:hover::after {
    opacity: 1; transform: scale(1);
}
.ws-pin-blue::after   { background: #38bdf8; box-shadow: 0 0 8px rgba(56,189,248,0.6); }
.ws-pin-purple::after { background: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,0.6); }
.ws-pin-green::after  { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.ws-pin-amber::after  { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.6); }
.ws-pin-rose::after   { background: #f43f5e; box-shadow: 0 0 8px rgba(244,63,94,0.6); }

@keyframes wsPinIn {
    from { opacity: 0; transform: translateY(20px) scale(0.88) rotate(-3deg); }
    to   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.ws-pin-card:hover {
    transform: translateY(-6px) rotate(0.8deg) scale(1.02);
    z-index: 2;
}

/* Color variants — enhanced with glow */
.ws-pin-blue {
    background: rgba(56,189,248,0.06);
    border: 1px solid rgba(56,189,248,0.18);
    box-shadow: inset 0 1px 0 rgba(56,189,248,0.08);
}
.ws-pin-purple {
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.18);
    box-shadow: inset 0 1px 0 rgba(168,85,247,0.08);
}
.ws-pin-green {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.18);
    box-shadow: inset 0 1px 0 rgba(34,197,94,0.08);
}
.ws-pin-amber {
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.18);
    box-shadow: inset 0 1px 0 rgba(245,158,11,0.08);
}
.ws-pin-rose {
    background: rgba(244,63,94,0.06);
    border: 1px solid rgba(244,63,94,0.18);
    box-shadow: inset 0 1px 0 rgba(244,63,94,0.08);
}

.ws-pin-blue:hover   { border-color: rgba(56,189,248,0.45); box-shadow: 0 8px 28px rgba(56,189,248,0.12), 0 0 0 1px rgba(56,189,248,0.1); }
.ws-pin-purple:hover { border-color: rgba(168,85,247,0.45); box-shadow: 0 8px 28px rgba(168,85,247,0.12), 0 0 0 1px rgba(168,85,247,0.1); }
.ws-pin-green:hover  { border-color: rgba(34,197,94,0.45); box-shadow: 0 8px 28px rgba(34,197,94,0.12), 0 0 0 1px rgba(34,197,94,0.1); }
.ws-pin-amber:hover  { border-color: rgba(245,158,11,0.45); box-shadow: 0 8px 28px rgba(245,158,11,0.12), 0 0 0 1px rgba(245,158,11,0.1); }
.ws-pin-rose:hover   { border-color: rgba(244,63,94,0.45); box-shadow: 0 8px 28px rgba(244,63,94,0.12), 0 0 0 1px rgba(244,63,94,0.1); }

.ws-pin-text {
    font-size: 0.83rem; color: #e2e8f0; line-height: 1.55;
    margin-bottom: 10px; word-break: break-word;
    position: relative; z-index: 1;
}
.ws-pin-footer {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.65rem; color: rgba(255,255,255,0.3);
    position: relative; z-index: 1;
}
.ws-pin-author { font-weight: 700; }

/* Delete button with animated reveal */
.ws-pin-del {
    margin-left: auto; width: 20px; height: 20px; border: none;
    border-radius: 50%; background: rgba(239,68,68,0.12); color: #f87171;
    font-size: 0.72rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0; transform: scale(0.6) rotate(-90deg);
}
.ws-pin-card:hover .ws-pin-del {
    opacity: 1; transform: scale(1) rotate(0);
}
.ws-pin-del:hover {
    background: rgba(239,68,68,0.35);
    transform: scale(1.2) rotate(0);
    box-shadow: 0 0 12px rgba(239,68,68,0.3);
}

/* --- Empty state --- */
.ws-pin-empty {
    grid-column: 1 / -1; text-align: center; padding: 40px 24px;
    color: rgba(255,255,255,0.22); font-size: 0.88rem;
    position: relative;
}
.ws-pin-empty::before {
    content: '';
    display: block; width: 48px; height: 48px; margin: 0 auto 14px;
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 12px;
    animation: wsEmptyPulse 3s ease-in-out infinite;
}
@keyframes wsEmptyPulse {
    0%, 100% { transform: scale(1) rotate(0); border-color: rgba(255,255,255,0.1); }
    50%      { transform: scale(1.08) rotate(3deg); border-color: rgba(99,102,241,0.25); }
}

/* --- Input row (enhanced) --- */
.ws-pin-input-row {
    display: flex; gap: 8px;
    position: relative; z-index: 1;
}
.ws-pin-input {
    flex: 1; padding: 11px 16px; border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.85rem; font-family: inherit;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-pin-input:focus {
    outline: none;
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 16px rgba(99,102,241,0.12), 0 0 0 3px rgba(99,102,241,0.06);
    background: rgba(255,255,255,0.06);
    transform: scale(1.01);
}
.ws-pin-input::placeholder {
    color: rgba(255,255,255,0.2);
    transition: color 0.3s;
}
.ws-pin-input:focus::placeholder {
    color: rgba(99,102,241,0.35);
}
/* --- Custom Color Orb Picker --- */
.ws-pin-color-picker {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s;
}
.ws-pin-color-picker:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
}
.ws-pin-orb {
    position: relative; width: 22px; height: 22px;
    border-radius: 50%; border: none; cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0; outline: none;
    flex-shrink: 0;
}
.ws-pin-orb-blue   { background: radial-gradient(circle at 35% 35%, #7dd3fc, #38bdf8, #0284c7); }
.ws-pin-orb-purple { background: radial-gradient(circle at 35% 35%, #d8b4fe, #a855f7, #7c3aed); }
.ws-pin-orb-green  { background: radial-gradient(circle at 35% 35%, #86efac, #22c55e, #16a34a); }
.ws-pin-orb-amber  { background: radial-gradient(circle at 35% 35%, #fcd34d, #f59e0b, #d97706); }
.ws-pin-orb-rose   { background: radial-gradient(circle at 35% 35%, #fda4af, #f43f5e, #e11d48); }
/* Hover glow */
.ws-pin-orb:hover {
    transform: scale(1.25);
    filter: brightness(1.2);
}
.ws-pin-orb-blue:hover   { box-shadow: 0 0 12px rgba(56,189,248,0.6); }
.ws-pin-orb-purple:hover { box-shadow: 0 0 12px rgba(168,85,247,0.6); }
.ws-pin-orb-green:hover  { box-shadow: 0 0 12px rgba(34,197,94,0.6); }
.ws-pin-orb-amber:hover  { box-shadow: 0 0 12px rgba(245,158,11,0.6); }
.ws-pin-orb-rose:hover   { box-shadow: 0 0 12px rgba(244,63,94,0.6); }
/* Selection ring */
.ws-pin-orb-ring {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.ws-pin-orb.active { transform: scale(1.15); }
.ws-pin-orb.active .ws-pin-orb-ring {
    animation: wsPinOrbPulse 2s ease-in-out infinite;
}
.ws-pin-orb-blue.active .ws-pin-orb-ring   { border-color: rgba(56,189,248,0.7); }
.ws-pin-orb-purple.active .ws-pin-orb-ring { border-color: rgba(168,85,247,0.7); }
.ws-pin-orb-green.active .ws-pin-orb-ring  { border-color: rgba(34,197,94,0.7); }
.ws-pin-orb-amber.active .ws-pin-orb-ring  { border-color: rgba(245,158,11,0.7); }
.ws-pin-orb-rose.active .ws-pin-orb-ring   { border-color: rgba(244,63,94,0.7); }
.ws-pin-orb-blue.active   { box-shadow: 0 0 10px rgba(56,189,248,0.35); }
.ws-pin-orb-purple.active { box-shadow: 0 0 10px rgba(168,85,247,0.35); }
.ws-pin-orb-green.active  { box-shadow: 0 0 10px rgba(34,197,94,0.35); }
.ws-pin-orb-amber.active  { box-shadow: 0 0 10px rgba(245,158,11,0.35); }
.ws-pin-orb-rose.active   { box-shadow: 0 0 10px rgba(244,63,94,0.35); }
@keyframes wsPinOrbPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.6; }
}
.ws-pin-add-btn {
    padding: 10px 18px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white; font-size: 1rem; cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 14px rgba(99,102,241,0.25);
    position: relative;
    overflow: hidden;
}
/* Ripple glow on hover */
.ws-pin-add-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: inherit;
}
.ws-pin-add-btn:hover::before { opacity: 1; }
.ws-pin-add-btn:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 24px rgba(99,102,241,0.4), 0 0 0 2px rgba(99,102,241,0.15);
}
.ws-pin-add-btn:active {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}

/* --- Pin card removal animation --- */
.ws-pin-card.ws-pin-removing {
    animation: wsPinOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes wsPinOut {
    0%   { opacity: 1; transform: scale(1) rotate(0); }
    60%  { opacity: 0.5; transform: scale(0.85) rotate(4deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(8deg) translateY(20px); }
}

/* --- Pin card pop-in for newly added --- */
.ws-pin-card.ws-pin-new {
    animation: wsPinPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes wsPinPop {
    0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
    50%  { opacity: 1; transform: scale(1.08) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Stagger effect for cards loaded in batch */
.ws-pin-card:nth-child(1)  { animation-delay: 0s; }
.ws-pin-card:nth-child(2)  { animation-delay: 0.06s; }
.ws-pin-card:nth-child(3)  { animation-delay: 0.12s; }
.ws-pin-card:nth-child(4)  { animation-delay: 0.18s; }
.ws-pin-card:nth-child(5)  { animation-delay: 0.24s; }
.ws-pin-card:nth-child(6)  { animation-delay: 0.30s; }
.ws-pin-card:nth-child(7)  { animation-delay: 0.36s; }
.ws-pin-card:nth-child(8)  { animation-delay: 0.42s; }
.ws-pin-card:nth-child(9)  { animation-delay: 0.48s; }
.ws-pin-card:nth-child(10) { animation-delay: 0.54s; }

/* Input shake animation for empty submit */
@keyframes wsPinShake {
    0%, 100% { transform: translateX(0); }
    15%  { transform: translateX(-6px); }
    30%  { transform: translateX(5px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    90%  { transform: translateX(1px); }
}

/* ================================================
   SPARK WALL (灵感交流) — Interactive Constellation
   ================================================ */
.ws-spark-section {
    position: relative;
    margin-top: 20px; padding: 0;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px; overflow: hidden;
}

/* ── Header ── */
.ws-spark-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 0; position: relative; z-index: 5;
}
.ws-spark-title-row { display: flex; align-items: center; gap: 10px; }
.ws-spark-glyph {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(245,158,11,0.6));
    animation: sparkGlyphPulse 3s ease-in-out infinite;
}
@keyframes sparkGlyphPulse {
    0%,100% { filter: drop-shadow(0 0 8px rgba(245,158,11,0.6)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 16px rgba(245,158,11,0.9)); transform: scale(1.15) rotate(8deg); }
}
.ws-spark-title { font-size: 1rem; font-weight: 800; color: #f1f5f9; letter-spacing: -0.02em; }
.ws-spark-count {
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25);
    border-radius: 99px; padding: 2px 9px;
    font-size: 0.68rem; font-weight: 800; color: #fbbf24;
}

/* Filter buttons */
.ws-spark-filters { display: flex; gap: 4px; }
.ws-spark-filter {
    padding: 4px 10px; border-radius: 99px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.3);
    cursor: pointer; transition: all 0.25s;
}
.ws-spark-filter:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
.ws-spark-filter.active {
    background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #fbbf24;
}

/* ── Cosmos: Interactive Canvas ── */
.ws-spark-cosmos {
    position: relative; height: 360px; overflow: hidden;
}
.ws-spark-cosmos canvas {
    position: absolute; inset: 0;
    cursor: default;
}
.ws-spark-hint {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.15);
    pointer-events: none;
    animation: sparkHintFade 3s ease-in-out infinite;
}
@keyframes sparkHintFade { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

@media (max-width: 520px) {
    .ws-spark-cosmos { height: 280px; }
}

/* ── Floating Popup (glassmorphic, positioned near node) ── */
.ws-spark-popup {
    position: absolute; z-index: 10;
    width: 300px; max-width: calc(100% - 32px);
    background: rgba(15,18,35,0.92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 16px;
    pointer-events: none; opacity: 0;
    transform: scale(0.85) translateY(8px);
    transition: opacity 0.3s cubic-bezier(.34,1.56,.64,1), transform 0.3s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 32px rgba(245,158,11,0.08);
}
.ws-spark-popup.open {
    pointer-events: auto; opacity: 1;
    transform: scale(1) translateY(0);
}
.ws-spark-popup-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: rgba(255,255,255,0.25);
    font-size: 1.2rem; cursor: pointer; line-height: 1;
    transition: color 0.2s, transform 0.2s;
}
.ws-spark-popup-close:hover { color: #f1f5f9; transform: scale(1.2); }
.ws-spark-popup-tag {
    display: inline-block; padding: 2px 10px; border-radius: 99px;
    font-size: 0.66rem; font-weight: 700;
    background: color-mix(in srgb, var(--tc, #f59e0b) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tc, #f59e0b) 25%, transparent);
    color: var(--tc, #f59e0b);
    margin-bottom: 8px;
}
.ws-spark-popup-body {
    font-size: 0.88rem; color: #e2e8f0; font-weight: 500;
    line-height: 1.6; margin-bottom: 10px; word-break: break-word;
}
.ws-spark-popup-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; color: rgba(255,255,255,0.35); font-weight: 600;
    margin-bottom: 10px;
}
.ws-spark-popup-meta .collab-msg-avatar { width: 18px; height: 18px; font-size: 0.5rem; }
.ws-spark-popup-time { margin-left: auto; font-size: 0.6rem; color: rgba(255,255,255,0.15); }

/* Reactions in popup */
.ws-spark-popup-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.ws-spark-react-btn {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px 7px; border-radius: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
}
.ws-spark-react-btn:hover {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15);
    transform: scale(1.18);
}
.ws-spark-react-btn.reacted {
    background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25);
}
.ws-spark-react-emoji { font-size: 0.78rem; line-height: 1; }
.ws-spark-react-count { font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.4); }

/* Replies in popup */
.ws-spark-popup-replies {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 120px; overflow-y: auto; margin-bottom: 6px;
    padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.04);
}
.ws-spark-reply {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 8px;
    background: rgba(255,255,255,0.02); font-size: 0.72rem; color: rgba(255,255,255,0.4);
}
.ws-spark-reply .collab-msg-avatar { width: 14px; height: 14px; font-size: 0.42rem; flex-shrink: 0; }
.ws-spark-reply strong { color: rgba(255,255,255,0.55); font-weight: 700; flex-shrink: 0; }
.ws-spark-reply-row { margin-top: 4px; }
.ws-spark-reply-input {
    width: 100%; padding: 6px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: #e2e8f0; font-size: 0.72rem;
    transition: all 0.25s; box-sizing: border-box;
}
.ws-spark-reply-input:focus {
    outline: none; border-color: rgba(245,158,11,0.3);
    box-shadow: 0 0 12px rgba(245,158,11,0.1);
    background: rgba(255,255,255,0.05);
}

/* ── Composer ── */
.ws-spark-composer {
    position: relative; padding: 12px 16px 14px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ws-spark-input-glow {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 60px;
    background: radial-gradient(ellipse, rgba(245,158,11,0.12) 0%, transparent 70%);
    filter: blur(20px); pointer-events: none;
    animation: sparkComposerGlow 4s ease-in-out infinite;
}
@keyframes sparkComposerGlow {
    0%,100% { opacity: 0.4; width: 200px; }
    50% { opacity: 0.8; width: 300px; }
}
.ws-spark-textarea {
    width: 100%; padding: 10px 14px; border-radius: 14px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    color: #f1f5f9; font-size: 0.84rem; font-weight: 500;
    resize: none; line-height: 1.5;
    transition: all 0.3s; box-sizing: border-box;
    position: relative; z-index: 1;
}
.ws-spark-textarea:focus {
    outline: none;
    border-color: rgba(245,158,11,0.35);
    box-shadow: 0 0 20px rgba(245,158,11,0.08), inset 0 0 12px rgba(245,158,11,0.03);
    background: rgba(255,255,255,0.05);
}
.ws-spark-textarea::placeholder { color: rgba(255,255,255,0.2); }
.ws-spark-compose-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; position: relative; z-index: 1;
}
.ws-spark-tag-row { display: flex; gap: 4px; flex-wrap: wrap; }
.ws-spark-tag-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 10px; border-radius: 99px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.3);
    cursor: pointer; transition: all 0.25s;
}
.ws-spark-tag-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
.ws-spark-tag-btn.active {
    background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #fbbf24;
}
.ws-spark-send {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 4px 16px rgba(245,158,11,0.3);
    flex-shrink: 0;
}
.ws-spark-send svg { width: 16px; height: 16px; }
.ws-spark-send:hover { transform: scale(1.12) rotate(-6deg); box-shadow: 0 8px 28px rgba(245,158,11,0.45); }
.ws-spark-send:active { transform: scale(0.9); }

/* ── Floating Emoji Animations ── */
.ws-spark-burst {
    position: absolute; font-size: 1.3rem; pointer-events: none; z-index: 100;
    animation: sparkBurstAnim 1s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes sparkBurstAnim {
    0% { opacity: 1; transform: translate(0,0) scale(0.5) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--bx,0), var(--by,-100px)) scale(1.2) rotate(180deg); }
}
.ws-spark-float-emoji {
    position: absolute; font-size: 1.5rem; pointer-events: none; z-index: 100; bottom: 0;
    animation: sparkFloatUp 1.4s ease-out forwards;
}
@keyframes sparkFloatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}

/* ================================================
   PROFESSOR VIEW (教授视角) — Immersive Redesign
   ================================================ */
.collab-prof-overview { animation: pvFadeIn 0.35s ease-out; }

/* ========== PROFESSOR VIEW — HUB CARD GRID ========== */

/* ── Card Grid ── */
.pv-hub-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .pv-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pv-hub-grid { grid-template-columns: 1fr; gap: 12px; } }

/* ── Individual Card ── */
.pv-hub-card {
    position: relative;
    background: rgba(255,255,255,0.035);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 22px 20px 16px;
    cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 220px;
    transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s, border-color 0.3s;
    animation: pvSlideUp 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
.pv-hub-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255,255,255,0.16);
}
/* Orb glow */
.pv-hub-orb {
    position: absolute; width: 150px; height: 150px; border-radius: 50%;
    filter: blur(40px); opacity: 0.5; transition: opacity 0.5s;
    pointer-events: none; top: -40px; right: -30px;
}
.pv-hub-card:hover .pv-hub-orb { opacity: 0.9; }
/* Orb per-card color */
.pv-card-progress .pv-hub-orb { background: radial-gradient(circle, rgba(99,102,241,0.5) 0%, transparent 70%); }
.pv-card-progress:hover { box-shadow: 0 8px 32px rgba(99,102,241,0.18); }
.pv-card-projects .pv-hub-orb { background: radial-gradient(circle, rgba(168,85,247,0.45) 0%, transparent 70%); }
.pv-card-projects:hover { box-shadow: 0 8px 32px rgba(168,85,247,0.18); }
.pv-card-students .pv-hub-orb { background: radial-gradient(circle, rgba(6,182,212,0.45) 0%, transparent 70%); }
.pv-card-students:hover { box-shadow: 0 8px 32px rgba(6,182,212,0.18); }
.pv-card-activity .pv-hub-orb { background: radial-gradient(circle, rgba(16,185,129,0.45) 0%, transparent 70%); }
.pv-card-activity:hover { box-shadow: 0 8px 32px rgba(16,185,129,0.18); }
.pv-card-actions .pv-hub-orb { background: radial-gradient(circle, rgba(245,158,11,0.4) 0%, transparent 70%); }
.pv-card-actions:hover { box-shadow: 0 8px 32px rgba(245,158,11,0.15); }
.pv-card-actions { cursor: default; }
.pv-card-pending .pv-hub-orb { background: radial-gradient(circle, rgba(244,63,94,0.45) 0%, transparent 70%); }
.pv-card-pending:hover { box-shadow: 0 8px 32px rgba(244,63,94,0.18); }

/* Card header: icon/ring + badge */
.pv-hub-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; position: relative; z-index: 1;
}
.pv-hub-icon {
    width: 36px; height: 36px; color: rgba(255,255,255,0.7);
}
.pv-hub-icon svg { width: 100%; height: 100%; }
.pv-hub-ring-badge { width: 40px; height: 40px; }
.pv-hub-ring-badge svg { width: 100%; height: 100%; }
.pv-hub-badge {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 99px; padding: 3px 10px;
    font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.7);
}
.pv-badge-hot {
    background: rgba(244,63,94,0.15); border-color: rgba(244,63,94,0.3);
    color: #fda4af; animation: pvPulse 2s ease-in-out infinite;
}

/* Title + desc */
.pv-hub-title {
    font-size: 1.05rem; font-weight: 800; color: #f1f5f9;
    margin: 0 0 3px; position: relative; z-index: 1; letter-spacing: -0.02em;
}
.pv-hub-desc {
    font-size: 0.72rem; color: rgba(255,255,255,0.3); font-weight: 400;
    margin: 0 0 12px; position: relative; z-index: 1; line-height: 1.4;
}

/* Preview rows */
.pv-hub-preview {
    flex: 1; position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
}
.pv-hub-pv-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.03); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    font-size: 0.76rem; color: rgba(255,255,255,0.55); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-hub-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: #6366f1;
}
.pv-dot-pulse { animation: pvDotPulse 2s ease-in-out infinite; }
@keyframes pvDotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }

/* Footer */
.pv-hub-foot {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 1;
    padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05);
}
.pv-hub-foot span:first-child {
    font-size: 0.7rem; color: rgba(255,255,255,0.35); font-weight: 500;
}
.pv-hub-arrow {
    font-size: 1rem; color: rgba(255,255,255,0.2);
    transition: transform 0.3s, color 0.3s;
}
.pv-hub-card:hover .pv-hub-arrow { transform: translateX(4px); color: rgba(255,255,255,0.6); }

/* ── Quick Action buttons inside Actions card ── */
.pv-hub-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    flex: 1; position: relative; z-index: 1;
}
.pv-hub-act-btn {
    padding: 7px 6px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5); font-size: 0.7rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
    text-align: center;
}
.pv-hub-act-btn:hover {
    background: color-mix(in srgb, var(--ac) 10%, transparent);
    border-color: color-mix(in srgb, var(--ac) 30%, transparent);
    color: var(--ac);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ac) 15%, transparent);
}
.pv-hub-act-btn:active { transform: scale(0.95); }

/* ── Detail Panel ── */
.pv-detail {
    display: none;
    animation: pvFadeIn 0.3s ease-out;
}
.pv-detail.active { display: block; }
.pv-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); font-size: 0.78rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s; margin-bottom: 14px;
}
.pv-detail-back:hover { background: rgba(255,255,255,0.08); color: #f1f5f9; transform: translateX(-3px); }

/* Detail: progress layout */
.pv-det-progress {
    display: flex; align-items: center; gap: 20px;
    padding: 16px; margin-bottom: 16px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
}
.pv-det-ring { width: 100px; height: 100px; flex-shrink: 0; }
.pv-det-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(99,102,241,0.35)); }
.pv-det-bars { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pv-det-bar-row { display: flex; align-items: center; gap: 10px; }
.pv-det-bar-label { width: 40px; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.4); text-align: right; flex-shrink: 0; }
.pv-det-bar-track { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.04); overflow: hidden; }
.pv-det-bar-fill { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 6px rgba(255,255,255,0.08); }
.pv-det-bar-val { width: 24px; font-size: 0.72rem; font-weight: 800; color: rgba(255,255,255,0.4); flex-shrink: 0; }
@media (max-width: 480px) { .pv-det-progress { flex-direction: column; } .pv-det-ring { align-self: center; } }

/* Detail: list rows */
.pv-det-list { display: flex; flex-direction: column; gap: 4px; }
.pv-det-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}
.pv-det-row:hover { background: rgba(255,255,255,0.04); }
.pv-det-row-name { font-size: 0.78rem; font-weight: 600; color: #cbd5e1; min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detail: project cards */
.pv-det-proj {
    padding: 12px 14px; margin-bottom: 8px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px; transition: all 0.25s;
}
.pv-det-proj:hover { background: rgba(255,255,255,0.05); border-color: rgba(99,102,241,0.15); }
.pv-det-proj-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pv-det-proj-name { font-size: 0.88rem; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pv-det-proj-badges { display: flex; gap: 6px; flex-shrink: 0; }
.pv-det-proj-meta { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-bottom: 8px; }
.pv-badge-ok {
    padding: 2px 10px; border-radius: 6px; font-size: 0.68rem; font-weight: 700;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); color: #34d399;
}
.pv-badge-btn {
    padding: 3px 10px; border-radius: 6px; font-size: 0.68rem; font-weight: 700;
    background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.25); color: #c4b5fd;
    cursor: pointer; transition: all 0.25s;
}
.pv-badge-btn:hover { background: rgba(168,85,247,0.18); transform: scale(1.05); box-shadow: 0 4px 12px rgba(168,85,247,0.15); }
.pv-badge-hot-btn {
    padding: 3px 10px; border-radius: 6px; font-size: 0.68rem; font-weight: 700;
    background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.25); color: #fb7185;
    cursor: pointer; transition: all 0.25s; animation: pvPulse 2.5s ease-in-out infinite;
}
.pv-badge-hot-btn:hover { background: rgba(244,63,94,0.18); transform: scale(1.05); }
.pv-overdue { color: #f87171; font-weight: 700; animation: pvPulse 1.5s ease-in-out infinite; }

/* Detail: student rows */
.pv-det-stu {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 12px; margin-bottom: 4px;
    background: rgba(255,255,255,0.02); transition: all 0.25s;
}
.pv-det-stu:hover { background: rgba(255,255,255,0.05); transform: translateX(3px); }
.pv-det-stu-rank { font-size: 0.78rem; font-weight: 900; width: 20px; text-align: center; flex-shrink: 0; }
.pv-det-stu .collab-msg-avatar { width: 30px; height: 30px; font-size: 0.7rem; flex-shrink: 0; }
.pv-det-stu-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pv-det-stu-name { font-size: 0.8rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-det-stu-score { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.pv-det-empty { padding: 32px; text-align: center; color: rgba(255,255,255,0.2); font-size: 0.85rem; }

/* ── Timeline ── */
.pv-timeline { position: relative; padding-left: 24px; min-height: 60px; }
.pv-tl-line { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(99,102,241,0.35), rgba(168,85,247,0.15), transparent); }
.pv-tl-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; position: relative; animation: pvSlideUp 0.4s ease-out both; }
.pv-tl-dot { width: 10px; height: 10px; border-radius: 50%; position: absolute; left: -21px; top: 13px; border: 2px solid rgba(15,23,42,0.8); transition: transform 0.3s, box-shadow 0.3s; }
.pv-tl-item:hover .pv-tl-dot { transform: scale(1.5); box-shadow: 0 0 12px currentColor; }
.pv-tl-content { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 8px 12px; transition: all 0.25s; }
.pv-tl-item:hover .pv-tl-content { background: rgba(255,255,255,0.05); border-color: rgba(99,102,241,0.15); transform: translateX(3px); }
.pv-tl-icon { font-size: 0.85rem; }
.pv-tl-text { flex: 1; font-size: 0.78rem; color: #e2e8f0; }
.pv-tl-text strong { color: #f1f5f9; font-weight: 700; }
.pv-tl-time { font-size: 0.62rem; color: rgba(255,255,255,0.18); white-space: nowrap; }
.pv-tl-empty { padding: 24px; text-align: center; color: rgba(255,255,255,0.2); font-size: 0.82rem; }

/* ── Ring SVG shared ── */
.pv-ring-fg { transition: stroke-dashoffset 1.2s cubic-bezier(.34,1.56,.64,1); }

/* ── Animations ── */
@keyframes pvFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pvSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pvPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* === Professor Modal System === */
.pv-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s;
}
.pv-modal-overlay.active { opacity: 1; pointer-events: auto; }
.pv-modal {
    width: 90%; max-width: 480px;
    background: rgba(13,18,37,0.96);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    box-shadow: 0 32px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 60px rgba(99,102,241,0.05);
    transform: scale(0.88) translateY(24px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.pv-modal-overlay.active .pv-modal { transform: scale(1) translateY(0); }
.pv-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px; font-size: 1.05rem; font-weight: 800; color: #f1f5f9;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pv-modal-close {
    width: 34px; height: 34px; border: none; border-radius: 12px;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4);
    font-size: 1.2rem; cursor: pointer; transition: all 0.25s;
}
.pv-modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; transform: rotate(90deg); }
.pv-modal-body {
    padding: 22px 26px; display: flex; flex-direction: column; gap: 14px;
}
.pv-modal-body label {
    font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.45);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pv-modal-footer {
    padding: 18px 26px; display: flex; justify-content: flex-end; gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pv-select, .pv-input {
    padding: 11px 16px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: #f1f5f9; font-size: 0.88rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.pv-select:focus, .pv-input:focus { border-color: rgba(99,102,241,0.5); outline: none; box-shadow: 0 0 16px rgba(99,102,241,0.1); }
.pv-textarea {
    padding: 14px 16px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: #f1f5f9; font-size: 0.88rem; resize: vertical; font-family: inherit;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.pv-textarea:focus { border-color: rgba(99,102,241,0.5); outline: none; box-shadow: 0 0 16px rgba(99,102,241,0.1); }
.pv-btn-primary {
    padding: 11px 26px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white; font-size: 0.88rem; font-weight: 700; cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(99,102,241,0.3);
    position: relative; overflow: hidden;
}
.pv-btn-primary::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
}
.pv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(99,102,241,0.4); }
.pv-btn-primary:hover::after { animation: pvShimmer 0.6s ease-out; }
.pv-btn-primary:active { transform: translateY(0); }
.pv-btn-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 20px rgba(245,158,11,0.3); }
.pv-btn-amber:hover { box-shadow: 0 8px 28px rgba(245,158,11,0.4); }
.pv-btn-rose { background: linear-gradient(135deg, #f43f5e, #fb7185); box-shadow: 0 4px 20px rgba(244,63,94,0.3); }
.pv-btn-rose:hover { box-shadow: 0 8px 28px rgba(244,63,94,0.4); }
.pv-btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 4px 20px rgba(220,38,38,0.3); }
.pv-btn-danger:hover { box-shadow: 0 8px 28px rgba(220,38,38,0.4); }
.pv-warn-text {
    font-size: 0.82rem; color: #fbbf24; line-height: 1.5;
    padding: 12px 16px; border-radius: 12px;
    background: rgba(251,191,36,0.05); border: 1px solid rgba(251,191,36,0.12);
}
.pv-encourage-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-preset-btn {
    padding: 7px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
}
.pv-preset-btn:hover {
    background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.35);
    color: #fbbf24; transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(245,158,11,0.1);
}

/* ================================================
   APPLICANT MANAGEMENT (申请管理)
   ================================================ */
.collab-applicant-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; margin-bottom: 8px;
    animation: collabFadeIn 0.3s ease-out;
}
.collab-applicant-name {
    font-size: 0.92rem; font-weight: 700; color: #f1f5f9; min-width: 80px;
}
.collab-applicant-info {
    flex: 1; font-size: 0.78rem; color: rgba(255,255,255,0.4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.collab-applicant-actions { display: flex; gap: 6px; flex-shrink: 0; }
.collab-btn-accept {
    padding: 6px 14px; border: none; border-radius: 10px;
    background: rgba(34,197,94,0.15); color: #86efac;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    transition: all 0.2s;
}
.collab-btn-accept:hover {
    background: rgba(34,197,94,0.25); transform: translateY(-1px);
}
.collab-btn-reject {
    padding: 6px 14px; border: none; border-radius: 10px;
    background: rgba(239,68,68,0.12); color: #fca5a5;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    transition: all 0.2s;
}
.collab-btn-reject:hover {
    background: rgba(239,68,68,0.2); transform: translateY(-1px);
}

/* ================================================
   PUBLISH PROJECT MODAL EXTRAS
   ================================================ */
.collab-pub-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .collab-pub-row { grid-template-columns: 1fr; }
}
.collab-pub-field { display: flex; flex-direction: column; }
.collab-pub-field label {
    font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}

/* ================================================
   FANCY NUMBER SPINNER
   ================================================ */
.collab-fancy-spinner {
    display: flex; align-items: center; gap: 0;
    position: relative; border-radius: 14px; overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-fancy-spinner:hover {
    border-color: rgba(56,189,248,0.3);
    box-shadow: 0 0 20px rgba(56,189,248,0.08);
}
.collab-spinner-gold:hover {
    border-color: rgba(251,191,36,0.3);
    box-shadow: 0 0 20px rgba(251,191,36,0.08);
}
.collab-spin-btn {
    width: 44px; height: 44px; border: none;
    background: transparent; color: rgba(255,255,255,0.5);
    font-size: 1.3rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; z-index: 1;
}
.collab-spin-btn:hover {
    color: #38bdf8; background: rgba(56,189,248,0.1);
    transform: scale(1.15);
}
.collab-spinner-gold .collab-spin-btn:hover {
    color: #fbbf24; background: rgba(251,191,36,0.1);
}
.collab-spin-btn:active {
    transform: scale(0.9);
}
.collab-spin-btn span {
    pointer-events: none;
}
.collab-spin-value {
    flex: 1; text-align: center; border: none; background: transparent;
    color: #f1f5f9; font-size: 1.2rem; font-weight: 800;
    padding: 10px 4px; font-family: inherit;
    width: 60px; -moz-appearance: textfield;
}
.collab-spin-value::-webkit-inner-spin-button,
.collab-spin-value::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
.collab-spin-glow {
    position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
    opacity: 0; transition: opacity 0.35s;
    background: radial-gradient(circle at center, rgba(56,189,248,0.15), transparent 70%);
}
.collab-spinner-gold .collab-spin-glow {
    background: radial-gradient(circle at center, rgba(251,191,36,0.15), transparent 70%);
}
.collab-spin-active .collab-spin-glow {
    opacity: 1; animation: spinGlowPulse 0.35s ease-out;
}
@keyframes spinGlowPulse {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1); }
}
.collab-spin-active .collab-spin-value {
    animation: spinValuePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes spinValuePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ================================================
   FIELD TAG INPUT
   ================================================ */
.collab-tag-input-wrap {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 8px 12px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    min-height: 44px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.collab-tag-input-wrap:focus-within {
    border-color: rgba(56,189,248,0.4);
    box-shadow: 0 0 20px rgba(56,189,248,0.1);
}
.collab-tag-list { display: contents; }
.collab-field-tag-item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 9999px;
    background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(168,85,247,0.2));
    border: 1px solid rgba(56,189,248,0.25);
    font-size: 0.78rem; font-weight: 600; color: #7dd3fc;
    animation: tagPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tagPopIn {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}
.collab-field-tag-remove {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 0.7rem; cursor: pointer; padding: 0 2px;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}
.collab-field-tag-remove:hover {
    color: #ef4444; transform: scale(1.3);
}
.collab-tag-text-input {
    flex: 1; min-width: 100px; border: none; background: transparent;
    color: #e2e8f0; font-size: 0.85rem; padding: 4px 0; font-family: inherit;
    outline: none;
}
.collab-tag-text-input::placeholder { color: rgba(255,255,255,0.2); }
.collab-tag-suggestions {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: rgba(15,21,41,0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 8px;
    flex-wrap: wrap; gap: 6px; z-index: 20;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: collabFadeIn 0.2s ease-out;
}
.collab-tag-sug {
    padding: 6px 14px; border-radius: 9999px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6);
    cursor: pointer; transition: all 0.2s;
}
.collab-tag-sug:hover {
    background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.3);
    color: #7dd3fc; transform: translateY(-1px);
}

/* ================================================
   FIELD TAGS IN PROJECT CARDS
   ================================================ */
.collab-field-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
}

/* ================================================
   TASK DETAIL MODAL
   ================================================ */
.task-detail-status { margin-bottom: 16px; }
.task-status-badge {
    display: inline-block; padding: 4px 14px;
    border-radius: 9999px; font-size: 0.78rem; font-weight: 700;
}
.task-detail-section {
    margin-bottom: 16px;
}
.task-detail-section > label {
    display: block; font-size: 0.78rem; font-weight: 700;
    color: rgba(255,255,255,0.55); margin-bottom: 6px;
}

/* Attachments */
.task-attach-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 10px;
}
.task-attach-empty {
    padding: 16px; text-align: center;
    color: rgba(255,255,255,0.2); font-size: 0.82rem;
    background: rgba(255,255,255,0.02); border-radius: 10px;
    border: 1px dashed rgba(255,255,255,0.06);
}
.task-attach-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    animation: collabFadeIn 0.3s ease-out;
    transition: all 0.2s;
}
.task-attach-item:hover {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}
.task-attach-type-code { border-left: 3px solid rgba(56,189,248,0.4); }
.task-attach-type-image { border-left: 3px solid rgba(168,85,247,0.4); }
.task-attach-type-link { border-left: 3px solid rgba(34,197,94,0.4); }
.task-attach-type-file { border-left: 3px solid rgba(251,191,36,0.4); }
.task-attach-icon {
    font-size: 1.1rem; flex-shrink: 0; margin-top: 2px;
}
.task-attach-body {
    flex: 1; min-width: 0; overflow: hidden;
}
.task-attach-text {
    font-size: 0.82rem; color: rgba(255,255,255,0.6);
    word-break: break-all;
}
.task-attach-link {
    font-size: 0.82rem; color: #7dd3fc;
    text-decoration: none; word-break: break-all;
}
.task-attach-link:hover { text-decoration: underline; }
.task-attach-code-block {
    padding: 10px 12px; border-radius: 8px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
    font-family: 'Fira Code', 'SF Mono', monospace;
    font-size: 0.75rem; color: #a5b4fc;
    overflow-x: auto; white-space: pre; margin: 0;
    max-height: 120px; scrollbar-width: thin;
}
.task-attach-img-preview {
    margin-bottom: 4px;
}
.task-attach-img-preview img {
    max-width: 100%; max-height: 100px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}
.task-attach-remove {
    background: none; border: none;
    color: rgba(255,255,255,0.25); font-size: 0.8rem;
    cursor: pointer; padding: 2px 4px; flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}
.task-attach-remove:hover {
    color: #ef4444; transform: scale(1.2);
}
/* Drag & Drop Upload Zone */
.task-attach-dropzone {
    border: 2px dashed rgba(99,102,241,0.2);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    background: rgba(99,102,241,0.03);
}
.task-attach-dropzone:hover {
    border-color: rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.06);
    transform: scale(1.01);
}
.task-attach-dragover {
    border-color: rgba(99,102,241,0.6) !important;
    background: rgba(99,102,241,0.1) !important;
    transform: scale(1.02);
    box-shadow: 0 0 24px rgba(99,102,241,0.15);
}
.task-attach-dropzone-inner {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    pointer-events: none;
}
.task-attach-drop-icon { font-size: 1.6rem; opacity: 0.5; }
.task-attach-drop-text { font-size: 0.82rem; color: rgba(255,255,255,0.5); font-weight: 600; }
.task-attach-drop-sub { font-size: 0.68rem; color: rgba(255,255,255,0.25); }
.task-attach-add {
    display: flex; gap: 8px; align-items: center;
    margin-top: 8px;
}
.task-attach-code-input {
    margin-top: 8px;
    font-family: 'Fira Code', 'SF Mono', monospace;
    font-size: 0.8rem;
}

/* Status controls in task detail */
.task-status-controls label {
    display: block; font-size: 0.78rem; font-weight: 700;
    color: rgba(255,255,255,0.55); margin-bottom: 8px;
}
.task-ctrl-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.task-ctrl-btn {
    padding: 8px 18px; border: none; border-radius: 10px;
    font-size: 0.82rem; font-weight: 700; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-ctrl-btn:hover {
    transform: translateY(-2px);
}
.task-ctrl-todo {
    background: rgba(100,116,139,0.15); color: #94a3b8;
    border: 1px solid rgba(100,116,139,0.25);
}
.task-ctrl-todo:hover { background: rgba(100,116,139,0.25); }
.task-ctrl-doing {
    background: rgba(56,189,248,0.15); color: #7dd3fc;
    border: 1px solid rgba(56,189,248,0.25);
}
.task-ctrl-doing:hover { background: rgba(56,189,248,0.25); }
.task-ctrl-done {
    background: rgba(34,197,94,0.15); color: #86efac;
    border: 1px solid rgba(34,197,94,0.25);
}
.task-ctrl-done:hover { background: rgba(34,197,94,0.25); }

/* ================================================
   KANBAN CARD ENHANCEMENTS
   ================================================ */
.collab-kanban-card {
    cursor: pointer;
}
.collab-kanban-btns {
    display: flex; gap: 4px; align-items: center;
}
.collab-move-back {
    background: linear-gradient(135deg, rgba(100,116,139,0.2), rgba(148,163,184,0.2)) !important;
    color: #94a3b8 !important;
}
.collab-move-back:hover {
    background: linear-gradient(135deg, #64748b, #94a3b8) !important;
    color: white !important;
}
.collab-move-fwd {
    /* default styles already in place */
}
.collab-kanban-review {
    display: flex; gap: 6px; padding: 8px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
}
.collab-review-accept, .collab-review-reject {
    flex: 1; padding: 6px 12px; border: none; border-radius: 8px;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.collab-review-accept {
    background: rgba(34,197,94,0.12); color: #86efac;
    border: 1px solid rgba(34,197,94,0.2);
}
.collab-review-accept:hover {
    background: rgba(34,197,94,0.25); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34,197,94,0.2);
}
.collab-review-reject {
    background: rgba(239,68,68,0.1); color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.2);
}
.collab-review-reject:hover {
    background: rgba(239,68,68,0.2); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,68,68,0.15);
}
.collab-kanban-accepted {
    border-color: rgba(34,197,94,0.2) !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.06);
}
.collab-kanban-rejected {
    border-color: rgba(239,68,68,0.15) !important;
}
.collab-accepted-badge {
    font-size: 0.72rem;
}
.collab-attach-indicator {
    font-size: 0.7rem; color: rgba(255,255,255,0.35);
    display: inline-flex; align-items: center; gap: 2px;
}
.collab-kanban-reject-reason {
    font-size: 0.72rem; color: #fca5a5;
    padding: 4px 8px; margin: 4px 0;
    background: rgba(239,68,68,0.08); border-radius: 6px;
    border-left: 2px solid rgba(239,68,68,0.3);
    line-height: 1.4;
}

/* ================================================
   TASK REJECT MODAL
   ================================================ */
.task-reject-hint {
    font-size: 0.85rem; color: rgba(255,255,255,0.5);
    margin-bottom: 14px; line-height: 1.5;
}

/* ========== User Profile Dropdown ========== */
.app-user-chip-wrap {
    position: relative;
}
.app-user-chip-wrap .app-user-chip {
    /* override the old hover red — now neutral */
}
.app-user-chip-wrap .app-user-chip:hover {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.2);
}
.topbar-dark .app-user-chip-wrap .app-user-chip:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.25);
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: rgba(13,18,37,0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 80px rgba(99,102,241,0.06);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1), visibility 0.25s;
    pointer-events: none;
    overflow: hidden;
}
.user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Arrow */
.user-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: rgba(13,18,37,0.96);
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    z-index: 1;
}
/* Header */
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 12px;
    position: relative;
}
.user-dropdown-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.2), transparent);
}
.udd-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: box-shadow 0.3s, background 0.3s;
}
.udd-info { min-width: 0; }
.udd-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udd-role {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.udd-role-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.udd-role-dot.dot-professor { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.udd-role-dot.dot-student { background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.5); }
.udd-role-dot.dot-guest { background: #64748b; box-shadow: 0 0 8px rgba(100,116,139,0.5); }
/* Signature */
.udd-signature {
    padding: 0 18px;
    margin-top: 10px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    line-height: 1.5;
    display: none;
}
.udd-signature.has-sig {
    display: block;
}
/* Stats */
.udd-stats {
    display: flex;
    gap: 0;
    margin: 12px 18px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.udd-stat {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: rgba(255,255,255,0.03);
    transition: background 0.2s;
}
.udd-stat:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
}
.udd-stat:hover {
    background: rgba(99,102,241,0.06);
}
.udd-stat-val {
    font-size: 0.92rem;
    font-weight: 800;
    color: #f1f5f9;
    display: block;
    line-height: 1;
}
.udd-stat-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 3px;
    display: block;
}
/* Divider */
/* ── Guest Upgrade Button ── */
.udd-upgrade-btn {
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 24px); margin: 10px 12px;
    padding: 12px 14px; border-radius: 14px; border: none;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.10));
    border: 1px solid rgba(99,102,241,0.2);
    cursor: pointer; transition: all 0.3s;
    text-align: left; position: relative; overflow: hidden;
}
.udd-upgrade-btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: udd-upgrade-shimmer 3s ease-in-out infinite;
}
@keyframes udd-upgrade-shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
.udd-upgrade-btn:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.18));
    border-color: rgba(99,102,241,0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,0.15);
}
.udd-upgrade-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 6px rgba(99,102,241,0.4));
}
.udd-upgrade-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.udd-upgrade-title {
    font-size: 0.82rem; font-weight: 700; color: #c4b5fd;
}
.udd-upgrade-desc {
    font-size: 0.65rem; color: rgba(255,255,255,0.35);
}
.udd-upgrade-arrow {
    font-size: 1rem; color: rgba(99,102,241,0.5);
    transition: transform 0.2s;
}
.udd-upgrade-btn:hover .udd-upgrade-arrow { transform: translateX(3px); }

.udd-divider {
    height: 1px;
    margin: 12px 18px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
/* Menu */
.udd-menu {
    padding: 4px 8px 8px;
}
.udd-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
}
.udd-menu-item:hover {
    background: rgba(99,102,241,0.1);
    color: #f1f5f9;
    transform: translateX(2px);
}
.udd-menu-icon {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
    opacity: 0.7;
}
.udd-menu-item:hover .udd-menu-icon {
    opacity: 1;
}
/* Logout specific */
.udd-logout:hover {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
}
.udd-logout:hover .udd-menu-icon {
    transform: translateX(2px);
    transition: transform 0.2s;
}
.udd-security:hover {
    background: rgba(6,182,212,0.12);
    color: #67e8f9;
}
.udd-security:hover .udd-menu-icon {
    animation: securityIconPulse 0.6s ease;
}
@keyframes securityIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ========== Account Security Modal ========== */
.security-modal {
    max-width: 520px;
}
.security-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Security Level Card --- */
.security-level-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(6,182,212,0.08));
    border: 1px solid rgba(99,102,241,0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}
.security-level-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(6,182,212,0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.security-level-card.level-low {
    background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(249,115,22,0.06));
    border-color: rgba(239,68,68,0.15);
}
.security-level-card.level-low::before {
    background: linear-gradient(135deg, rgba(239,68,68,0.3), rgba(249,115,22,0.2));
}
.security-level-card.level-medium {
    background: linear-gradient(135deg, rgba(234,179,8,0.1), rgba(249,115,22,0.06));
    border-color: rgba(234,179,8,0.15);
}
.security-level-card.level-medium::before {
    background: linear-gradient(135deg, rgba(234,179,8,0.3), rgba(249,115,22,0.2));
}
.security-level-card.level-high {
    background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(6,182,212,0.06));
    border-color: rgba(34,197,94,0.15);
}
.security-level-card.level-high::before {
    background: linear-gradient(135deg, rgba(34,197,94,0.3), rgba(6,182,212,0.2));
}

/* Shield */
.security-shield-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.security-shield {
    font-size: 1.8rem;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(99,102,241,0.4));
    animation: shieldFloat 3s ease-in-out infinite;
}
@keyframes shieldFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.security-shield-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(99,102,241,0.2);
    animation: shieldRingPulse 2.5s ease-in-out infinite;
}
@keyframes shieldRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.2; }
}
.level-low .security-shield { filter: drop-shadow(0 0 8px rgba(239,68,68,0.4)); }
.level-low .security-shield-ring { border-color: rgba(239,68,68,0.2); }
.level-medium .security-shield { filter: drop-shadow(0 0 8px rgba(234,179,8,0.4)); }
.level-medium .security-shield-ring { border-color: rgba(234,179,8,0.2); }
.level-high .security-shield { filter: drop-shadow(0 0 8px rgba(34,197,94,0.4)); }
.level-high .security-shield-ring { border-color: rgba(34,197,94,0.2); }

.security-level-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.security-level-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.security-level-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.security-level-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1), background 0.5s;
}
.security-level-fill.level-low { background: linear-gradient(90deg, #ef4444, #f97316); }
.security-level-fill.level-medium { background: linear-gradient(90deg, #f97316, #eab308); }
.security-level-fill.level-high { background: linear-gradient(90deg, #22c55e, #06b6d4); }
.security-level-text {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
}

/* --- Security Sections (Collapsible) --- */
.security-section {
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}
.security-section:hover {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}
.security-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.security-section-header:hover {
    background: rgba(255,255,255,0.03);
}
.security-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #e2e8f0;
}
.security-section-icon {
    font-size: 1.1rem;
}
.security-section-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.security-section-arrow {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    transition: transform 0.3s ease;
}
.security-section.collapsed .security-section-arrow {
    transform: rotate(-90deg);
}
.security-section-body {
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s, opacity 0.3s;
    opacity: 1;
}
.security-section.collapsed .security-section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}
.security-section-error {
    font-size: 0.8rem;
    color: #fca5a5;
    background: rgba(239,68,68,0.08);
    padding: 8px 12px;
    border-radius: 8px;
    display: none;
}

/* Security QA Badge */
.security-qa-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.security-qa-badge.set {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
}
.security-qa-badge.unset {
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
}

/* --- Password Wrap (with eye toggle) --- */
.security-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.security-password-wrap .profile-input {
    width: 100%;
    padding-right: 42px;
}
.security-eye-btn {
    position: absolute;
    right: 4px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.security-eye-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
}

/* --- Password Strength Meter --- */
.security-pwd-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.security-pwd-strength-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.security-pwd-strength-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.4s ease, background 0.4s;
}
.security-pwd-strength-text {
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    transition: color 0.3s;
}

/* --- Security Action Button --- */
.security-action-btn {
    margin-top: 4px;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.security-action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.security-action-btn:hover::after {
    opacity: 1;
}

/* --- Custom Security Question Select --- */
.security-custom-select {
    position: relative;
}
.security-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255,255,255,0.4);
}
.security-select-trigger:hover {
    border-color: rgba(99,102,241,0.3);
    background: rgba(255,255,255,0.06);
}
.security-custom-select.open .security-select-trigger {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.security-select-text {
    font-size: 0.88rem;
    font-family: inherit;
}
.security-select-text.has-value {
    color: #e2e8f0;
}
.security-select-arrow {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    transition: transform 0.3s;
}
.security-custom-select.open .security-select-arrow {
    transform: rotate(180deg);
}
.security-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(15,23,42,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
    padding: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    pointer-events: none;
}
.security-custom-select.open .security-select-dropdown {
    max-height: 320px;
    opacity: 1;
    overflow-y: auto;
    transform: translateY(0);
    pointer-events: auto;
}
.security-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    transition: all 0.15s;
    position: relative;
}
.security-select-option:hover {
    background: rgba(99,102,241,0.1);
    color: #f1f5f9;
    transform: translateX(2px);
}
.security-select-option.selected {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
}
.security-select-option.selected::after {
    content: '\2713';
    position: absolute;
    right: 14px;
    color: #818cf8;
    font-weight: 700;
}
.security-select-option-icon {
    font-size: 1.15rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    flex-shrink: 0;
}
/* Custom scrollbar for select dropdown */
.security-select-dropdown::-webkit-scrollbar { width: 4px; }
.security-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.security-select-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ========== Forgot Password Modal ========== */
.forgot-pwd-modal {
    max-width: 440px;
}
.forgot-step-header {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.forgot-step-indicator {
    display: flex;
    align-items: center;
    gap: 0;
}
.forgot-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.08);
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    z-index: 1;
}
.forgot-step-dot.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--accent, #8b5cf6));
    color: white;
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 16px rgba(99,102,241,0.3), 0 0 32px rgba(99,102,241,0.15);
    transform: scale(1.1);
}
.forgot-step-dot.done {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-color: rgba(34,197,94,0.3);
    box-shadow: 0 0 12px rgba(34,197,94,0.2);
}
.forgot-step-line {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.08);
    transition: background 0.4s;
}
.forgot-step-line.done {
    background: linear-gradient(90deg, #22c55e, rgba(34,197,94,0.3));
}
.forgot-question-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
    border: 1px solid rgba(99,102,241,0.12);
    margin-bottom: 16px;
}
.forgot-question-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 6px rgba(99,102,241,0.3));
}
.forgot-question-text {
    font-size: 0.92rem;
    color: #c7d2fe;
    font-weight: 500;
    line-height: 1.4;
}

/* --- Login Hint Row (side by side) --- */
.login-hint-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========== Profile Edit Modal ========== */
.profile-modal {
    max-width: 480px;
}
.profile-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.profile-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 8px 32px rgba(99,102,241,0.35);
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
}
.profile-avatar-preview:hover {
    transform: scale(1.05) rotate(3deg);
}
.profile-avatar-hint {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    font-style: italic;
}
.profile-avatar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.profile-avatar-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.profile-avatar-text-input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
    font-size: 1rem;
    font-family: inherit;
    text-align: center;
    outline: none;
    transition: all 0.2s;
}
.profile-avatar-text-input:focus {
    border-color: rgba(99,102,241,0.4);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.profile-avatar-text-hint {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
}
.profile-avatar-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.1);
}
.profile-avatar-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-avatar-upload-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #f1f5f9;
    border-color: rgba(255,255,255,0.2);
}
.profile-photo-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-photo-thumb {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.15);
}
.profile-photo-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.profile-photo-remove:hover {
    background: rgba(239,68,68,0.3);
    color: white;
}
/* Field */
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-name-fields {
    flex-direction: row;
    gap: 8px;
}
.profile-name-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.profile-name-col .profile-input {
    padding: 8px 10px;
    font-size: 0.82rem;
}
.profile-label-sm {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.03em;
}
.profile-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-input {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 0.88rem;
    outline: none;
    font-family: inherit;
    transition: all 0.2s;
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
}
.profile-input:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(255,255,255,0.06);
}
.profile-textarea {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 0.88rem;
    resize: none;
    outline: none;
    font-family: inherit;
    transition: all 0.2s;
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
    line-height: 1.5;
}
.profile-textarea:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(255,255,255,0.06);
}
.profile-institution-current {
    font-size: 0.88rem;
    color: #e2e8f0;
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
}
.profile-institution-change {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
.profile-institution-change .profile-input {
    flex: 1;
}
.profile-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    font-style: italic;
}
.profile-pending {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #f59e0b;
    margin-top: 2px;
}
.profile-pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: profilePendingPulse 1.5s ease-in-out infinite;
}
@keyframes profilePendingPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* ========== Institution Request Banner ========== */
.inst-request-banner {
    margin-bottom: 16px;
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 14px;
    padding: 14px 18px;
    animation: modalAppear 0.3s cubic-bezier(0.16,1,0.3,1);
}
.inst-banner-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 10px;
}
.inst-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.3s;
}
.inst-request-item:last-child { margin-bottom: 0; }
.inst-req-info { display: flex; flex-direction: column; gap: 2px; }
.inst-req-name { font-size: 0.84rem; font-weight: 600; color: #f1f5f9; }
.inst-req-arrow { font-size: 0.76rem; color: rgba(255,255,255,0.45); }
.inst-req-actions { display: flex; gap: 6px; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .user-dropdown {
        width: 260px;
        right: -8px;
    }
    .user-dropdown::before {
        right: 16px;
    }
    .inst-request-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ================================================================
   RANKED SYSTEM — Promotion / Decay / Streak
   ================================================================ */

/* --- Promotion Challenge Modal --- */
.promo-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; animation: promoOverlayIn 0.5s ease forwards;
}
@keyframes promoOverlayIn { to { opacity: 1; } }

.promo-box {
    position: relative; width: 420px; max-width: 92vw; padding: 0;
    border-radius: 20px; overflow: hidden;
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 80px rgba(99,102,241,0.15), 0 20px 60px rgba(0,0,0,0.5);
    animation: promoBoxIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: scale(0.85) translateY(30px); opacity: 0;
}
@keyframes promoBoxIn { to { transform: scale(1) translateY(0); opacity: 1; } }

.promo-header {
    position: relative; padding: 32px 28px 20px; text-align: center; overflow: hidden;
}
.promo-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--promo-glow, rgba(99,102,241,0.25)) 0%, transparent 70%);
    pointer-events: none;
}
.promo-particles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.promo-particle {
    position: absolute; border-radius: 50%; opacity: 0;
    animation: promoParticleFloat 3s ease-in-out infinite;
}
@keyframes promoParticleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0); }
    30% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.3); }
}

.promo-tier-icon {
    font-size: 3.2rem; display: block; margin-bottom: 8px;
    animation: promoIconPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--promo-glow, rgba(99,102,241,0.4)));
}
@keyframes promoIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.promo-title {
    font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 4px;
    text-shadow: 0 0 30px var(--promo-glow, rgba(99,102,241,0.5));
}
.promo-subtitle {
    font-size: 0.82rem; color: rgba(255,255,255,0.5); margin: 0;
}

.promo-body { padding: 4px 28px 24px; }

.promo-tasks { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.promo-task {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}
.promo-task.done {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.2);
}
.promo-task-check {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; color: transparent; transition: all 0.4s ease;
    flex-shrink: 0;
}
.promo-task.done .promo-task-check {
    background: linear-gradient(135deg, #22c55e, #4ade80);
    border-color: #22c55e; color: #fff;
    box-shadow: 0 0 12px rgba(34,197,94,0.4);
    animation: promoCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes promoCheckPop {
    0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); }
}
.promo-task-info { flex: 1; min-width: 0; }
.promo-task-label { font-size: 0.88rem; color: rgba(255,255,255,0.85); font-weight: 500; }
.promo-task.done .promo-task-label { color: #4ade80; }
.promo-task-progress {
    font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 2px;
}

.promo-timer {
    text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.4);
    margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.promo-timer-icon { font-size: 0.9rem; }

.promo-progress-bar {
    height: 4px; border-radius: 2px; margin-top: 16px; overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.promo-progress-fill {
    height: 100%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(90deg, var(--promo-color1, #6366f1), var(--promo-color2, #8b5cf6));
    box-shadow: 0 0 10px var(--promo-glow, rgba(99,102,241,0.4));
}

.promo-footer {
    padding: 0 28px 24px; display: flex; justify-content: center;
}
.promo-btn-close {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6); padding: 10px 28px; border-radius: 10px;
    font-size: 0.84rem; cursor: pointer; transition: all 0.2s;
}
.promo-btn-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* --- Rank Up Celebration Overlay --- */
.rankup-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(16px);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    opacity: 0; animation: rankupOverlayIn 0.6s ease forwards;
    cursor: pointer;
}
@keyframes rankupOverlayIn { to { opacity: 1; } }

.rankup-canvas {
    position: absolute; inset: 0; pointer-events: none;
}
.rankup-content {
    position: relative; z-index: 1; text-align: center;
    animation: rankupContentIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes rankupContentIn {
    from { transform: scale(0.5) translateY(40px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.rankup-badge {
    width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; position: relative;
    animation: rankupBadgePulse 2s ease-in-out infinite;
}
.rankup-badge::before {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
    border: 2px solid; border-color: var(--rankup-color, #6366f1);
    opacity: 0.3; animation: rankupRingExpand 2s ease-out infinite;
}
.rankup-badge::after {
    content: ''; position: absolute; inset: -20px; border-radius: 50%;
    border: 1px solid; border-color: var(--rankup-color, #6366f1);
    opacity: 0.15; animation: rankupRingExpand 2s ease-out 0.5s infinite;
}
@keyframes rankupBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes rankupRingExpand {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.rankup-label {
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 4px;
    color: var(--rankup-color, #6366f1); margin-bottom: 8px; font-weight: 700;
    animation: rankupLabelIn 0.6s ease 0.6s both;
}
@keyframes rankupLabelIn { from { opacity: 0; letter-spacing: 12px; } to { opacity: 1; letter-spacing: 4px; } }

.rankup-tier-name {
    font-size: 2.4rem; font-weight: 900; color: #fff; margin: 0 0 8px;
    text-shadow: 0 0 40px var(--rankup-color, rgba(99,102,241,0.6));
    animation: rankupNameIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
@keyframes rankupNameIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.rankup-hint {
    font-size: 0.76rem; color: rgba(255,255,255,0.35); margin-top: 24px;
    animation: rankupHintIn 0.5s ease 1.5s both;
}
@keyframes rankupHintIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Decay Warning Toast --- */
.decay-toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    z-index: 9999; padding: 14px 24px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.1));
    border: 1px solid rgba(239,68,68,0.25);
    backdrop-filter: blur(12px);
    color: #fca5a5; font-size: 0.84rem;
    display: flex; align-items: center; gap: 10px;
    animation: decayToastIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 8px 32px rgba(239,68,68,0.15);
}
@keyframes decayToastIn {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.decay-toast-icon { font-size: 1.3rem; }
.decay-toast-close {
    background: none; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 1.1rem; padding: 0 0 0 8px;
}
.decay-toast-close:hover { color: #fff; }

/* --- Shield Badge --- */
.shield-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 8px; font-size: 0.68rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.1));
    border: 1px solid rgba(59,130,246,0.25);
    color: #93c5fd; font-weight: 600;
    animation: shieldBadgePulse 2s ease-in-out infinite;
}
@keyframes shieldBadgePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(59,130,246,0.15); }
    50% { box-shadow: 0 0 12px rgba(59,130,246,0.3); }
}

/* --- Streak Flame Indicator --- */
.streak-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 8px; font-size: 0.72rem;
    font-weight: 700; white-space: nowrap;
}
.streak-badge.streak-warm {
    background: rgba(251,191,36,0.12); color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.25);
}
.streak-badge.streak-hot {
    background: rgba(249,115,22,0.12); color: #fb923c;
    border: 1px solid rgba(249,115,22,0.3);
    animation: streakHotPulse 1.5s ease-in-out infinite;
}
.streak-badge.streak-fire {
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(249,115,22,0.12));
    color: #f87171; border: 1px solid rgba(239,68,68,0.3);
    animation: streakFirePulse 1s ease-in-out infinite;
}
@keyframes streakHotPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(249,115,22,0.2); }
    50% { box-shadow: 0 0 10px rgba(249,115,22,0.4); }
}
@keyframes streakFirePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(239,68,68,0.2); text-shadow: 0 0 6px rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 16px rgba(239,68,68,0.4); text-shadow: 0 0 12px rgba(239,68,68,0.5); }
}

/* --- Tier-specific Promo Colors --- */
.promo-box[data-tier="bronze"]   { --promo-glow: rgba(217,119,6,0.3); --promo-color1: #b45309; --promo-color2: #d97706; }
.promo-box[data-tier="silver"]   { --promo-glow: rgba(156,163,175,0.3); --promo-color1: #6b7280; --promo-color2: #d1d5db; }
.promo-box[data-tier="gold"]     { --promo-glow: rgba(251,191,36,0.35); --promo-color1: #d97706; --promo-color2: #fbbf24; }
.promo-box[data-tier="platinum"] { --promo-glow: rgba(6,182,212,0.35); --promo-color1: #06b6d4; --promo-color2: #67e8f9; }
.promo-box[data-tier="diamond"]  { --promo-glow: rgba(139,92,246,0.35); --promo-color1: #8b5cf6; --promo-color2: #c4b5fd; }
.promo-box[data-tier="master"]   { --promo-glow: rgba(225,29,72,0.35); --promo-color1: #e11d48; --promo-color2: #fb7185; }
.promo-box[data-tier="legend"]   { --promo-glow: rgba(245,158,11,0.4); --promo-color1: #f59e0b; --promo-color2: #f97316; }

/* Professor tier promo colors */
.promo-box[data-tier="fox"]      { --promo-glow: rgba(168,85,247,0.3); --promo-color1: #a855f7; --promo-color2: #c084fc; }
.promo-box[data-tier="owl"]      { --promo-glow: rgba(124,58,237,0.3); --promo-color1: #7c3aed; --promo-color2: #a78bfa; }
.promo-box[data-tier="dragon"]   { --promo-glow: rgba(109,40,217,0.35); --promo-color1: #6d28d9; --promo-color2: #a855f7; }
.promo-box[data-tier="alchemist"]{ --promo-glow: rgba(124,58,237,0.35); --promo-color1: #7c3aed; --promo-color2: #ec4899; }
.promo-box[data-tier="quantum"]  { --promo-glow: rgba(6,182,212,0.35); --promo-color1: #6d28d9; --promo-color2: #06b6d4; }
.promo-box[data-tier="mad"]      { --promo-glow: rgba(236,72,153,0.4); --promo-color1: #7c3aed; --promo-color2: #ec4899; }

.rankup-overlay[data-tier="bronze"]   { --rankup-color: #d97706; }
.rankup-overlay[data-tier="silver"]   { --rankup-color: #9ca3af; }
.rankup-overlay[data-tier="gold"]     { --rankup-color: #fbbf24; }
.rankup-overlay[data-tier="platinum"] { --rankup-color: #22d3ee; }
.rankup-overlay[data-tier="diamond"]  { --rankup-color: #a78bfa; }
.rankup-overlay[data-tier="master"]   { --rankup-color: #fb7185; }
.rankup-overlay[data-tier="legend"]   { --rankup-color: #f59e0b; }
.rankup-overlay[data-tier="fox"]      { --rankup-color: #c084fc; }
.rankup-overlay[data-tier="owl"]      { --rankup-color: #a78bfa; }
.rankup-overlay[data-tier="dragon"]   { --rankup-color: #a855f7; }
.rankup-overlay[data-tier="alchemist"]{ --rankup-color: #ec4899; }
.rankup-overlay[data-tier="quantum"]  { --rankup-color: #22d3ee; }
.rankup-overlay[data-tier="mad"]      { --rankup-color: #ec4899; }

/* Rank pill in dashboard topbar */
.dash-pill-rank {
    position: relative; overflow: hidden;
    transition: all 0.3s ease;
}
.dash-pill-rank::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: rankPillSweep 3s ease-in-out infinite;
}
@keyframes rankPillSweep {
    0% { transform: translateX(-100%); }
    50%, 100% { transform: translateX(100%); }
}
.dash-pill-rank:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
}

/* ========== Notification System ========== */

/* Avatar rainbow glow when unread notifications */
.avatar-notif-glow {
    animation: avatarRainbowGlow 4s linear infinite, avatarRainbowPulse 2s ease-in-out infinite;
}
@keyframes avatarRainbowGlow {
    0%   { box-shadow: 0 0 0 3px rgba(255,60,60,0.5),  0 0 18px rgba(255,60,60,0.3); }
    16%  { box-shadow: 0 0 0 3px rgba(255,160,40,0.5), 0 0 18px rgba(255,160,40,0.3); }
    33%  { box-shadow: 0 0 0 3px rgba(255,230,50,0.5), 0 0 18px rgba(255,230,50,0.3); }
    50%  { box-shadow: 0 0 0 3px rgba(60,220,120,0.5), 0 0 18px rgba(60,220,120,0.3); }
    66%  { box-shadow: 0 0 0 3px rgba(60,150,255,0.5), 0 0 18px rgba(60,150,255,0.3); }
    83%  { box-shadow: 0 0 0 3px rgba(180,80,255,0.5), 0 0 18px rgba(180,80,255,0.3); }
    100% { box-shadow: 0 0 0 3px rgba(255,60,60,0.5),  0 0 18px rgba(255,60,60,0.3); }
}
@keyframes avatarRainbowPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}
.nav-user-chip.has-notif { animation: navChipRainbowGlow 4s linear infinite; }
@keyframes navChipRainbowGlow {
    0%   { box-shadow: 0 0 0 2px rgba(255,60,60,0.4),  0 0 12px rgba(255,60,60,0.2); }
    16%  { box-shadow: 0 0 0 2px rgba(255,160,40,0.4), 0 0 12px rgba(255,160,40,0.2); }
    33%  { box-shadow: 0 0 0 2px rgba(255,230,50,0.4), 0 0 12px rgba(255,230,50,0.2); }
    50%  { box-shadow: 0 0 0 2px rgba(60,220,120,0.4), 0 0 12px rgba(60,220,120,0.2); }
    66%  { box-shadow: 0 0 0 2px rgba(60,150,255,0.4), 0 0 12px rgba(60,150,255,0.2); }
    83%  { box-shadow: 0 0 0 2px rgba(180,80,255,0.4), 0 0 12px rgba(180,80,255,0.2); }
    100% { box-shadow: 0 0 0 2px rgba(255,60,60,0.4),  0 0 12px rgba(255,60,60,0.2); }
}

/* Notification badge in dropdown */
.udd-notif { position: relative; }
.udd-notif-badge {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff; font-size: 0.6rem; font-weight: 700;
    min-width: 18px; height: 18px; line-height: 18px;
    border-radius: 10px; text-align: center; padding: 0 5px;
    box-shadow: 0 2px 8px rgba(239,68,68,0.4);
    animation: notifBadgePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes notifBadgePop {
    0% { transform: translateY(-50%) scale(0); }
    100% { transform: translateY(-50%) scale(1); }
}

/* ── Notification Center Overlay ── */
.notif-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    display: flex; justify-content: flex-end;
    pointer-events: none; opacity: 0;
    transition: background 0.4s, backdrop-filter 0.4s, opacity 0.3s;
}
.notif-overlay.open {
    pointer-events: auto; opacity: 1;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
}

/* ── Panel (slides from right) ── */
.notif-panel {
    width: min(440px, 92vw); height: 100vh;
    background: rgba(15,18,35,0.95);
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.notif-overlay.open .notif-panel {
    transform: translateX(0);
}

/* ── Header ── */
.notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-title {
    font-size: 1.1rem; font-weight: 700; color: #e2e8f0; margin: 0;
}
.notif-close {
    background: none; border: none; color: #64748b; font-size: 1.5rem;
    cursor: pointer; padding: 4px 8px; border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.notif-close:hover { color: #e2e8f0; background: rgba(255,255,255,0.08); }

/* ── Tabs ── */
.notif-tabs {
    display: flex; gap: 2px; padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 4px 10px; border: none; background: none;
    color: #64748b; cursor: pointer; border-radius: 10px 10px 0 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}
.notif-tab::after {
    content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
    height: 2px; background: transparent; border-radius: 2px;
    transition: background 0.3s, left 0.3s, right 0.3s;
}
.notif-tab:hover { background: rgba(255,255,255,0.04); color: #94a3b8; }
.notif-tab.active { color: #e2e8f0; }
.notif-tab.active::after { background: #6366f1; left: 10%; right: 10%; }
.notif-tab[data-tab="replies"].active::after { background: #6366f1; }
.notif-tab[data-tab="likes"].active::after { background: #ec4899; }
.notif-tab[data-tab="messages"].active::after { background: #06b6d4; }
.notif-tab[data-tab="challenges"].active::after { background: #f59e0b; }
.notif-tab-icon { font-size: 1.2rem; line-height: 1; }
.notif-tab-label { font-size: 0.65rem; font-weight: 600; }
.notif-tab-count {
    position: absolute; top: 6px; right: calc(50% - 18px);
    background: #ef4444; color: #fff; font-size: 0.55rem; font-weight: 700;
    min-width: 14px; height: 14px; line-height: 14px;
    border-radius: 8px; text-align: center; padding: 0 3px;
}

/* ── Body / List ── */
.notif-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.notif-list { padding: 8px 0; }

/* ── Individual notification items ── */
.notif-item {
    display: flex; gap: 12px; padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: background 0.2s;
    opacity: 0; transform: translateX(30px);
    animation: notifItemSlide 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread { background: rgba(99,102,241,0.06); }
.notif-item.unread:hover { background: rgba(99,102,241,0.1); }
@keyframes notifItemSlide {
    to { opacity: 1; transform: translateX(0); }
}
.notif-item.notif-dismiss {
    animation: notifItemDismiss 0.45s cubic-bezier(0.4,0,0.2,1) forwards !important;
    pointer-events: none;
}
@keyframes notifItemDismiss {
    0% { opacity: 1; transform: translateX(0); max-height: 120px; padding-top: 14px; padding-bottom: 14px; }
    50% { opacity: 0; transform: translateX(60px); max-height: 120px; padding-top: 14px; padding-bottom: 14px; }
    100% { opacity: 0; transform: translateX(60px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
}

/* Avatar in notification */
.notif-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0;
}
.notif-avatar-reply { background: linear-gradient(135deg, #6366f1, #818cf8); }
.notif-avatar-like { background: linear-gradient(135deg, #ec4899, #f472b6); }
.notif-avatar-message { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.notif-avatar-challenge { background: linear-gradient(135deg, #f59e0b, #fbbf24); }

/* Content */
.notif-content { flex: 1; min-width: 0; }
.notif-text { font-size: 0.82rem; color: #cbd5e1; line-height: 1.5; }
.notif-text strong { color: #e2e8f0; font-weight: 600; }
.notif-preview {
    font-size: 0.75rem; color: #64748b; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-time {
    font-size: 0.65rem; color: #475569; margin-top: 4px;
}
.notif-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6366f1; flex-shrink: 0; margin-top: 6px;
    animation: notifDotPulse 2s ease-in-out infinite;
}
@keyframes notifDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(99,102,241,0); }
}
.notif-unread-dot.dot-like { background: #ec4899; }
.notif-unread-dot.dot-message { background: #06b6d4; }
.notif-unread-dot.dot-challenge { background: #f59e0b; }

/* ── Quick action buttons ── */
.notif-actions {
    display: flex; gap: 6px; margin-top: 8px;
}
.notif-action-btn {
    padding: 4px 12px; border-radius: 12px; border: none;
    font-size: 0.7rem; font-weight: 600; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.notif-action-btn:hover { transform: translateY(-1px); }
.notif-action-reply {
    background: rgba(99,102,241,0.15); color: #a5b4fc;
}
.notif-action-reply:hover { background: rgba(99,102,241,0.3); }
.notif-action-thank {
    background: rgba(236,72,153,0.15); color: #f9a8d4;
}
.notif-action-thank:hover { background: rgba(236,72,153,0.3); }
.notif-action-view {
    background: rgba(255,255,255,0.06); color: #94a3b8;
}
.notif-action-view:hover { background: rgba(255,255,255,0.12); }

/* ── Inline reply input ── */
.notif-reply-input-wrap {
    display: flex; gap: 6px; margin-top: 8px;
    animation: notifReplyExpand 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes notifReplyExpand {
    0% { opacity: 0; max-height: 0; transform: scaleY(0.5); }
    100% { opacity: 1; max-height: 60px; transform: scaleY(1); }
}
.notif-reply-input {
    flex: 1; padding: 6px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #e2e8f0; font-size: 0.75rem; outline: none;
    transition: border-color 0.2s;
}
.notif-reply-input:focus { border-color: rgba(99,102,241,0.5); }
.notif-reply-send {
    padding: 6px 14px; border-radius: 12px; border: none;
    background: #6366f1; color: #fff; font-size: 0.7rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
.notif-reply-send:hover { background: #4f46e5; }

/* ── Like notification special: heart burst ── */
.notif-like-hearts {
    position: absolute; pointer-events: none;
}
.notif-heart-float {
    position: absolute; font-size: 14px;
    animation: heartFloat 1.2s ease-out forwards;
}
@keyframes heartFloat {
    0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-40px) scale(1.2) rotate(var(--rot, 15deg)); }
}

/* ── Challenge result reveal ── */
.notif-challenge-result {
    text-align: center; padding: 12px;
    background: rgba(245,158,11,0.08); border-radius: 12px; margin-top: 6px;
    border: 1px solid rgba(245,158,11,0.15);
}
.notif-challenge-trophy {
    font-size: 2rem; display: inline-block;
    animation: trophyBounce 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes trophyBounce {
    0% { transform: scale(0) rotate(-20deg); }
    60% { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.notif-challenge-label {
    font-size: 0.8rem; font-weight: 700; color: #fbbf24; margin-top: 4px;
}

/* ── Empty state ── */
.notif-empty {
    text-align: center; padding: 48px 24px; color: #475569;
}
.notif-empty-icon {
    font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5;
    animation: notifEmptyFloat 3s ease-in-out infinite;
}
@keyframes notifEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.notif-empty p { font-size: 0.85rem; margin: 0; }

/* ── Grouped likes ── */
.notif-like-group {
    display: flex; align-items: center; gap: -8px; margin-bottom: 4px;
}
.notif-like-group .notif-avatar {
    width: 26px; height: 26px; font-size: 11px;
    border: 2px solid rgba(15,18,35,0.9);
    margin-right: -6px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .notif-panel { width: 100vw; }
    .notif-item { padding: 12px 14px; }
}

/* ═══════════════════════════════════════════════════════
   ✦ MYSTICAL ANSWERS SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ── 紫色呼吸光效：AI处理中 ── */
.star-input-wrap.asking-ai {
    border-color: rgba(168, 85, 247, 0.7) !important;
    background: rgba(168, 85, 247, 0.06) !important;
    animation: mystBreath 1.6s ease-in-out infinite;
}
@keyframes mystBreath {
    0%, 100% {
        box-shadow: 0 0 20px rgba(168,85,247,0.15),
                    0 0 50px rgba(168,85,247,0.08),
                    0 4px 30px rgba(0,0,0,0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(168,85,247,0.5),
                    0 0 90px rgba(168,85,247,0.25),
                    0 4px 30px rgba(0,0,0,0.3);
    }
}

/* ── 玄学答案弹窗 ── */
.answer-popup {
    position: absolute;
    z-index: 12;
    width: 330px;
    max-width: calc(100% - 32px);
    background: linear-gradient(145deg, rgba(10,6,30,0.97), rgba(20,8,45,0.97));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 22px;
    padding: 24px 22px 18px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.82) translateY(12px);
    transition: opacity 0.38s cubic-bezier(.34,1.56,.64,1),
                transform 0.38s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 24px 70px rgba(0,0,0,0.6),
                0 0 60px rgba(168,85,247,0.15),
                inset 0 1px 0 rgba(255,255,255,0.05);
}
.answer-popup.open {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 顶部装饰：传统图标 + 名称 */
.answer-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.answer-popup-emoji {
    font-size: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(168,85,247,0.7));
}
.answer-popup-tradition {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,148,255,0.9);
}
.answer-popup-close {
    position: absolute;
    top: 12px; right: 14px;
    background: none; border: none;
    color: rgba(255,255,255,0.2);
    font-size: 1.15rem; cursor: pointer;
    transition: color 0.2s;
    padding: 2px 6px;
}
.answer-popup-close:hover { color: rgba(196,148,255,0.9); }

/* 用户原问题 */
.answer-popup-question {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.35);
    font-style: italic;
    margin-bottom: 14px;
    line-height: 1.5;
    padding-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 测算结果展示（牌面/卦象/签文等） */
.answer-popup-divination {
    font-size: 0.68rem;
    color: rgba(168,85,247,0.7);
    background: rgba(168,85,247,0.08);
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
    line-height: 1.6;
    letter-spacing: 0.3px;
    word-break: break-all;
}

/* 分割线 */
.answer-popup-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.35), transparent);
    margin-bottom: 16px;
}

/* 玄学答案正文 */
.answer-popup-text {
    font-size: 1.0rem;
    font-weight: 600;
    color: rgba(240,220,255,0.95);
    line-height: 1.7;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 20px rgba(168,85,247,0.3);
}

/* 按钮组 */
.answer-popup-actions {
    display: flex;
    gap: 10px;
}
.answer-btn-thanks,
.answer-btn-next {
    flex: 1;
    padding: 10px 6px;
    border-radius: 14px;
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(.34,1.56,.64,1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.02em;
}
.answer-btn-thanks {
    background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(99,102,241,0.18));
    border: 1px solid rgba(168,85,247,0.3);
    color: rgba(220,180,255,0.95);
}
.answer-btn-thanks:hover {
    background: linear-gradient(135deg, rgba(168,85,247,0.38), rgba(99,102,241,0.32));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168,85,247,0.25);
}
.answer-btn-next {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.45);
}
.answer-btn-next:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    transform: translateY(-2px);
}
.answer-btn-next.loading {
    pointer-events: none;
    opacity: 0.6;
    animation: nextSpin 0.8s linear infinite;
}
@keyframes nextSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 感谢后显示的确认文字 */
.answer-thanks-msg {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(196,148,255,0.8);
    padding: 8px 0;
    animation: thanksFade 0.5s ease;
}
@keyframes thanksFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 流动答案更新动画 ── */
@keyframes answerReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.answer-popup-text.revealing {
    animation: answerReveal 0.45s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ── 移动端适配 ── */
@media (max-width: 600px) {
    .answer-popup {
        width: calc(100vw - 32px);
        border-radius: 18px;
        /* centered by mobile .star-popup/.answer-popup rule in starfield section */
    }
    .answer-popup-text { font-size: 0.92rem; }
}

/* ════════════════════════════════════════════════════════════
   PROFESSOR AI CONTENT STUDIO
   ════════════════════════════════════════════════════════════ */

/* ── Dark immersive background ── */
.ps-dark {
    min-height: 100vh; position: relative;
    background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.08), transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(168,85,247,0.06), transparent 50%),
                var(--bg-darker);
    padding: 24px;
}
.ps-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ps-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.12;
    animation: psFloat 20s ease-in-out infinite;
}
.ps-orb-1 { width: 400px; height: 400px; background: var(--primary); top: -100px; left: -50px; animation-delay: 0s; }
.ps-orb-2 { width: 300px; height: 300px; background: var(--accent); bottom: -50px; right: -50px; animation-delay: -7s; }
.ps-orb-3 { width: 250px; height: 250px; background: var(--secondary); top: 40%; left: 60%; animation-delay: -14s; }
@keyframes psFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── Container ── */
.ps-container {
    position: relative; z-index: 1;
    max-width: 900px; margin: 0 auto;
}

/* ── Header ── */
.ps-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; margin-bottom: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    backdrop-filter: blur(16px);
}
.ps-header-left { display: flex; align-items: center; gap: 14px; }
.ps-logo {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    box-shadow: 0 8px 24px rgba(99,102,241,0.3);
}
.ps-title {
    font-size: 1.3rem; font-weight: 800; margin: 0;
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ps-subtitle { font-size: 0.78rem; color: rgba(148,163,184,0.6); margin: 2px 0 0; }
.ps-stats { display: flex; gap: 20px; }
.ps-stat { text-align: center; }
.ps-stat-val {
    display: block; font-size: 1.4rem; font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ps-stat-lbl { font-size: 0.68rem; color: rgba(148,163,184,0.5); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Step Indicator ── */
.ps-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 24px; padding: 0 20px;
}
.ps-step {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 10px;
    color: rgba(148,163,184,0.4); font-size: 0.78rem; font-weight: 600;
    transition: all 0.3s;
}
.ps-step.active { color: rgba(226,232,240,0.8); }
.ps-step.current {
    background: rgba(99,102,241,0.12); color: #a5b4fc;
    box-shadow: 0 0 20px rgba(99,102,241,0.1);
}
.ps-step-num {
    width: 24px; height: 24px; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
}
.ps-step.current .ps-step-num { background: var(--primary); color: #fff; border-color: var(--primary); }
.ps-step-line { width: 40px; height: 2px; background: rgba(255,255,255,0.06); margin: 0 4px; }
.ps-step-line.active { background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* ── Config Panel ── */
.ps-config { animation: psReveal 0.4s ease-out; }
@keyframes psReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.ps-section { margin-bottom: 24px; }
.ps-section-title {
    font-size: 0.82rem; font-weight: 700; color: rgba(226,232,240,0.7);
    margin-bottom: 12px; letter-spacing: 0.03em;
    display: flex; align-items: center; gap: 8px;
}
.ps-section-title::before {
    content: ''; width: 3px; height: 14px; border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}

/* ── Selection Cards Grid ── */
.ps-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.ps-grid-style { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ps-grid-depth { grid-template-columns: repeat(3, 1fr); }

.ps-card {
    padding: 16px 14px; border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.25s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
}
.ps-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(99,102,241,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.ps-card.selected {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 24px rgba(99,102,241,0.15), inset 0 0 0 1px rgba(99,102,241,0.2);
}
.ps-card-sm { padding: 12px 10px; }
.ps-card-icon { font-size: 1.6rem; }
.ps-card-sm .ps-card-icon { font-size: 1.3rem; }
.ps-card-label { font-size: 0.76rem; font-weight: 600; color: rgba(226,232,240,0.8); }

/* ── Inputs ── */
.ps-custom-inputs { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ps-input {
    width: 100%; padding: 12px 16px; border-radius: 12px; box-sizing: border-box;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.88rem;
    transition: all 0.25s; outline: none;
}
.ps-input:focus { border-color: rgba(99,102,241,0.4); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.ps-input::placeholder { color: rgba(148,163,184,0.4); }
.ps-textarea {
    width: 100%; padding: 12px 16px; border-radius: 12px; box-sizing: border-box;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.85rem; font-family: inherit;
    resize: vertical; min-height: 80px;
    transition: all 0.25s; outline: none;
}
.ps-textarea:focus { border-color: rgba(99,102,241,0.4); background: rgba(255,255,255,0.06); }
.ps-textarea::placeholder { color: rgba(148,163,184,0.4); }
.ps-textarea-lg { min-height: 180px; }

/* ── Generate Button ── */
.ps-action-row { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.ps-action-split { justify-content: flex-end; }
.ps-btn-generate {
    padding: 14px 36px; border-radius: 14px; border: none;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.3s;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 28px rgba(99,102,241,0.3);
    position: relative; overflow: hidden;
}
.ps-btn-generate::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.ps-btn-generate:hover::after { opacity: 1; }
.ps-btn-generate:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(99,102,241,0.4); }
.ps-btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.ps-btn-generate.btn-loading { opacity: 0.6; pointer-events: none; }
.ps-btn-icon { font-size: 1.1rem; }

.ps-btn-secondary {
    padding: 12px 24px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(226,232,240,0.8); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: all 0.25s;
    display: flex; align-items: center; gap: 6px;
}
.ps-btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }

/* ── Generating State ── */
.ps-generating { animation: psReveal 0.4s ease-out; }
.ps-gen-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; margin-bottom: 16px;
    background: rgba(255,255,255,0.03); border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ps-gen-spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(99,102,241,0.2); border-top-color: var(--primary);
    animation: psSpin 0.8s linear infinite;
}
@keyframes psSpin { to { transform: rotate(360deg); } }
.ps-gen-status { font-size: 0.82rem; color: rgba(165,180,252,0.8); font-weight: 600; }
.ps-gen-status.active { animation: psPulse 1.5s ease-in-out infinite; }
@keyframes psPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.ps-gen-output-wrap {
    background: rgba(0,0,0,0.2); border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 20px; max-height: 400px; overflow-y: auto;
}
.ps-gen-output {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem; line-height: 1.7;
    color: rgba(226,232,240,0.85); white-space: pre-wrap; word-break: break-word;
    margin: 0;
}

/* ── Preview / Edit Step ── */
.ps-preview { animation: psReveal 0.4s ease-out; }
.ps-preview-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 28px 24px; margin-bottom: 20px;
    position: relative; overflow: hidden;
}
.ps-preview-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
}
.ps-preview-badge {
    display: inline-block; padding: 4px 12px; border-radius: 8px;
    background: rgba(99,102,241,0.15); color: #a5b4fc;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    margin-bottom: 14px;
}
.ps-preview-title {
    font-size: 1.2rem; font-weight: 800; color: #f1f5f9;
    margin-bottom: 14px; line-height: 1.4;
}
.ps-preview-content {
    font-size: 0.88rem; color: rgba(226,232,240,0.75);
    line-height: 1.75; white-space: pre-wrap;
}
.ps-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ps-tag {
    padding: 4px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(165,180,252,0.8); font-size: 0.72rem; font-weight: 600;
}

/* ── Edit Section ── */
.ps-edit-section { margin-bottom: 16px; }
.ps-edit-label {
    display: block; margin-bottom: 6px; margin-top: 12px;
    font-size: 0.78rem; font-weight: 600; color: rgba(148,163,184,0.6);
}

/* ── History ── */
.ps-history {
    margin-top: 28px; padding: 20px;
    background: rgba(255,255,255,0.02); border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.04);
}
.ps-history-empty { text-align: center; color: rgba(148,163,184,0.3); font-size: 0.8rem; padding: 20px; }
.ps-history-item {
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    margin-top: 8px; cursor: pointer; transition: all 0.2s;
}
.ps-history-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(99,102,241,0.15); }
.ps-history-title {
    font-size: 0.8rem; font-weight: 600; color: rgba(226,232,240,0.75);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-history-meta { font-size: 0.68rem; color: rgba(148,163,184,0.4); margin-top: 4px; }

/* ── Toast ── */
.ps-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
    padding: 12px 28px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(16,185,129,0.9), rgba(5,150,105,0.9));
    color: #fff; font-size: 0.85rem; font-weight: 700;
    box-shadow: 0 12px 36px rgba(16,185,129,0.3);
    opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
    z-index: 300;
}
.ps-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .ps-dark { padding: 16px 12px; }
    .ps-header { flex-direction: column; gap: 12px; padding: 16px; }
    .ps-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .ps-grid-depth { grid-template-columns: repeat(3, 1fr); }
    .ps-card { padding: 12px 10px; }
    .ps-card-icon { font-size: 1.3rem; }
    .ps-card-label { font-size: 0.7rem; }
    .ps-steps { flex-wrap: wrap; gap: 4px; }
    .ps-step-line { width: 20px; }
    .ps-btn-generate { padding: 12px 24px; font-size: 0.82rem; }
    .ps-preview-card { padding: 20px 16px; }
    .ps-preview-title { font-size: 1rem; }
    .ps-action-split { flex-wrap: wrap; }
}

/* ── Tag Intelligence Panel ── */
.ps-intel-section { margin-top: 8px; }

.ps-intel-panel {
    background: rgba(30,30,50,0.65);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 14px;
    padding: 20px 22px;
    backdrop-filter: blur(12px);
    animation: psIntelFadeIn 0.4s ease;
}
@keyframes psIntelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ps-intel-row {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}
.ps-intel-row:last-child { margin-bottom: 0; }

.ps-intel-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(168,162,255,0.85);
    padding-top: 3px;
    min-width: 72px;
}

/* ── Hot Subject Bars ── */
.ps-intel-bars {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ps-intel-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-intel-bar-name {
    flex: 0 0 80px;
    font-size: 0.72rem;
    color: rgba(226,232,240,0.7);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ps-intel-bar-track {
    flex: 1 1 0;
    height: 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}
.ps-intel-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
    min-width: 2px;
}
.ps-intel-bar-val {
    flex: 0 0 30px;
    font-size: 0.68rem;
    color: rgba(226,232,240,0.5);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Content Gap Tags ── */
.ps-intel-tags {
    flex: 1 1 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ps-intel-gap-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(251,191,36,0.9);
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ps-intel-gap-tag:hover {
    background: rgba(251,191,36,0.16);
    border-color: rgba(251,191,36,0.35);
    transform: translateY(-1px);
}
.ps-gap-arrow {
    font-size: 0.65rem;
    opacity: 0.6;
}

/* ── Trending Keyword Tags ── */
.ps-intel-tags span:not(.ps-intel-gap-tag):not(.ps-gap-arrow) {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.7rem;
    color: rgba(129,230,217,0.85);
    background: rgba(129,230,217,0.07);
    border: 1px solid rgba(129,230,217,0.15);
    border-radius: 16px;
    transition: all 0.2s ease;
}
.ps-intel-tags span:not(.ps-intel-gap-tag):not(.ps-gap-arrow):hover {
    background: rgba(129,230,217,0.14);
}

/* ── Recommendations ── */
.ps-intel-recs {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ps-intel-rec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ps-intel-rec:hover {
    background: rgba(99,102,241,0.14);
    border-color: rgba(99,102,241,0.28);
    transform: translateX(3px);
}
.ps-intel-rec-icon {
    font-size: 1rem;
    flex: 0 0 auto;
}
.ps-intel-rec-subj {
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(226,232,240,0.9);
}
.ps-intel-rec-reason {
    font-size: 0.68rem;
    color: rgba(226,232,240,0.45);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Accuracy ── */
.ps-intel-accuracy {
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ps-intel-acc-val {
    font-size: 0.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Loading State ── */
.ps-intel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ps-intel-load-text {
    font-size: 0.76rem;
    color: rgba(226,232,240,0.4);
    animation: psIntelPulse 1.6s ease-in-out infinite;
}
@keyframes psIntelPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* ── Intel Panel Mobile ── */
@media (max-width: 768px) {
    .ps-intel-panel { padding: 14px 12px; }
    .ps-intel-row { flex-direction: column; gap: 6px; }
    .ps-intel-label { min-width: auto; }
    .ps-intel-bar-name { flex: 0 0 60px; font-size: 0.68rem; }
    .ps-intel-rec { padding: 6px 10px; }
    .ps-intel-rec-reason { display: none; }
}

/* ════════════════════════════════════════════════════
   Batch Publish System
   ════════════════════════════════════════════════════ */

/* ── Batch mode button ── */
.ps-btn-batch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(251,191,36,0.95);
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.08));
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}
.ps-btn-batch:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.16));
    border-color: rgba(251,191,36,0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(251,191,36,0.15);
}

/* ── Batch count selector ── */
.ps-batch-count-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.ps-batch-count-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(226,232,240,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ps-batch-count-btns {
    display: flex;
    gap: 8px;
}
.ps-batch-count-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 800;
    color: rgba(226,232,240,0.6);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ps-batch-count-btn:hover {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.3);
    color: rgba(226,232,240,0.9);
}
.ps-batch-count-btn.selected {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.15));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 12px rgba(99,102,241,0.2);
}

/* ── Batch queue list ── */
.ps-batch-queue {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.ps-batch-queue::-webkit-scrollbar { width: 4px; }
.ps-batch-queue::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.ps-batch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: all 0.3s ease;
}
.ps-batch-item:hover {
    background: rgba(255,255,255,0.06);
}

.ps-batch-item-num {
    flex: 0 0 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(226,232,240,0.5);
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}
.ps-batch-item-subject {
    flex: 1 1 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(226,232,240,0.9);
}
.ps-batch-item-title {
    flex: 1 1 auto;
    font-size: 0.74rem;
    color: rgba(226,232,240,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.ps-batch-item-reason {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: rgba(168,162,255,0.7);
    background: rgba(99,102,241,0.08);
    padding: 2px 10px;
    border-radius: 12px;
}
.ps-batch-reason-icon { font-size: 0.72rem; }
.ps-batch-item-style {
    font-size: 0.66rem;
    color: rgba(226,232,240,0.4);
    text-transform: uppercase;
}
.ps-batch-item-skip {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: rgba(226,232,240,0.3);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ps-batch-item-skip:hover {
    color: rgba(239,68,68,0.8);
    background: rgba(239,68,68,0.1);
}

/* ── Batch item status colors ── */
.ps-batch-item-status {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
}
.ps-batch-status-planned .ps-batch-item-status,
.ps-batch-item-status.ps-batch-status-planned {
    color: rgba(226,232,240,0.5);
    background: rgba(255,255,255,0.05);
}
.ps-batch-status-generating {
    animation: psBatchPulse 1.2s ease-in-out infinite;
}
.ps-batch-status-generating .ps-batch-item-status,
.ps-batch-item-status.ps-batch-status-generating {
    color: rgba(99,102,241,0.9);
    background: rgba(99,102,241,0.12);
}
@keyframes psBatchPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.ps-batch-status-done .ps-batch-item-status,
.ps-batch-item-status.ps-batch-status-done {
    color: rgba(52,211,153,0.9);
    background: rgba(52,211,153,0.1);
}
.ps-batch-status-failed .ps-batch-item-status,
.ps-batch-item-status.ps-batch-status-failed {
    color: rgba(239,68,68,0.9);
    background: rgba(239,68,68,0.1);
}
.ps-batch-status-skipped .ps-batch-item-status,
.ps-batch-item-status.ps-batch-status-skipped {
    color: rgba(226,232,240,0.35);
    background: rgba(255,255,255,0.03);
}
.ps-batch-status-published .ps-batch-item-status,
.ps-batch-item-status.ps-batch-status-published {
    color: rgba(168,85,247,0.9);
    background: rgba(168,85,247,0.1);
}

/* ── Batch progress bar ── */
.ps-batch-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.ps-batch-progress-bar {
    flex: 1 1 0;
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    overflow: hidden;
}
.ps-batch-progress-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ps-batch-progress-publish {
    background: linear-gradient(90deg, rgba(168,85,247,0.9), rgba(99,102,241,0.9));
}
.ps-batch-progress-text {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(226,232,240,0.7);
    font-variant-numeric: tabular-nums;
}

/* ── Batch review item ── */
.ps-batch-review-item {
    flex-wrap: wrap;
    padding: 14px 16px;
}
.ps-batch-review-content {
    flex: 1 1 0;
    min-width: 0;
}
.ps-batch-review-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(226,232,240,0.95);
    margin-bottom: 4px;
}
.ps-batch-review-body {
    font-size: 0.72rem;
    color: rgba(226,232,240,0.5);
    line-height: 1.5;
    margin-bottom: 6px;
}
.ps-batch-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ps-batch-review-tags .ps-tag {
    font-size: 0.65rem;
    padding: 2px 8px;
}
.ps-batch-review-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}
.ps-batch-skip-btn,
.ps-batch-retry-btn {
    padding: 4px 12px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.ps-batch-skip-btn {
    color: rgba(226,232,240,0.5);
    background: rgba(255,255,255,0.05);
}
.ps-batch-skip-btn:hover {
    color: rgba(239,68,68,0.8);
    background: rgba(239,68,68,0.08);
}
.ps-batch-retry-btn {
    color: rgba(99,102,241,0.8);
    background: rgba(99,102,241,0.08);
}
.ps-batch-retry-btn:hover {
    color: rgba(99,102,241,1);
    background: rgba(99,102,241,0.16);
}
.ps-batch-failed-text { color: rgba(239,68,68,0.6); }
.ps-batch-skipped-text { color: rgba(226,232,240,0.3); text-decoration: line-through; }

/* ── Batch planning spinner ── */
.ps-batch-planning {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* ── Batch done screen ── */
.ps-batch-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.ps-batch-done-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: psBatchDonePulse 2s ease-in-out infinite;
}
@keyframes psBatchDonePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
}
.ps-batch-done-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: rgba(226,232,240,0.95);
    margin-bottom: 8px;
}
.ps-batch-done-msg {
    font-size: 0.88rem;
    color: rgba(226,232,240,0.55);
    margin-bottom: 28px;
}

/* ── Batch publish all button ── */
.ps-btn-publish-all {
    background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(99,102,241,0.3));
    border-color: rgba(168,85,247,0.4);
}
.ps-btn-publish-all:hover {
    background: linear-gradient(135deg, rgba(168,85,247,0.45), rgba(99,102,241,0.45));
    box-shadow: 0 4px 24px rgba(168,85,247,0.2);
}

.ps-batch-empty {
    font-size: 0.78rem;
    color: rgba(226,232,240,0.35);
    padding: 12px;
}

/* ── Danger button ── */
.ps-btn-danger {
    color: rgba(239,68,68,0.8) !important;
    border-color: rgba(239,68,68,0.2) !important;
}
.ps-btn-danger:hover {
    background: rgba(239,68,68,0.1) !important;
    border-color: rgba(239,68,68,0.4) !important;
}

/* ── Batch Mobile ── */
@media (max-width: 768px) {
    .ps-batch-count-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ps-batch-item { padding: 8px 10px; gap: 6px; }
    .ps-batch-item-reason { display: none; }
    .ps-batch-item-style { display: none; }
    .ps-batch-review-item { padding: 10px 12px; }
    .ps-batch-review-body { display: none; }
    .ps-btn-batch { padding: 10px 16px; font-size: 0.76rem; }
}

/* ── Wizard page animation ── */
.ps-wizard-page {
    animation: psWizardSlide 0.35s ease-out;
}
@keyframes psWizardSlide {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Content Type Grid ── */
.ps-grid-type {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.ps-card-type {
    flex-direction: column;
    padding: 24px 16px;
    gap: 8px;
    min-height: 120px;
    justify-content: center;
    text-align: center;
}
.ps-card-icon-lg {
    font-size: 2.2rem;
}
.ps-card-desc {
    font-size: 0.68rem;
    color: rgba(226,232,240,0.45);
    line-height: 1.4;
    margin-top: 2px;
}
.ps-card-type.selected .ps-card-desc {
    color: rgba(226,232,240,0.65);
}

/* ── Language Grid ── */
.ps-grid-lang {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ps-card-lang {
    padding: 16px 12px;
    gap: 6px;
    text-align: center;
}
.ps-card-flag {
    font-size: 1.8rem;
}

/* ── Wizard summary badges ── */
.ps-wizard-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ps-wizard-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.25);
    color: rgba(226,232,240,0.85);
}

/* ── Preview badges row ── */
.ps-preview-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ps-badge-type {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.25);
}
.ps-badge-lang {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.25);
}

/* ── Quote cards in preview ── */
.ps-quote-card {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 10px 0;
}
.ps-quote-text {
    font-size: 1rem;
    font-style: italic;
    color: rgba(226,232,240,0.9);
    line-height: 1.6;
    margin-bottom: 8px;
}
.ps-quote-author {
    font-size: 0.82rem;
    color: rgba(99,102,241,0.8);
    font-weight: 600;
}
.ps-quote-context {
    font-size: 0.72rem;
    color: rgba(226,232,240,0.4);
    margin-top: 4px;
}

/* ── Mobile adjustments for wizard ── */
@media (max-width: 768px) {
    .ps-grid-type { grid-template-columns: 1fr; }
    .ps-grid-lang { grid-template-columns: repeat(3, 1fr); }
    .ps-card-type { min-height: 80px; padding: 16px 12px; }
    .ps-card-icon-lg { font-size: 1.6rem; }
    .ps-steps { gap: 4px; }
    .ps-step-label { font-size: 0.58rem; }
    .ps-wizard-summary { margin-bottom: 12px; }
}

@media (max-width: 480px) {
    .ps-grid-lang { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   ECONCODE LAB (ICT) — 代码实验室 / EconCode Lab
   ================================================================ */

/* ── Dark container ── */
.ict-dark {
    min-height: 100vh; position: relative;
    background: #060e14;
    padding: 24px;
}
.ict-bg { display: none; }
.ict-container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

/* ── Hero ── */
.ict-hero {
    position: relative; text-align: center; padding: 48px 24px 32px; margin-bottom: 16px;
}
.ict-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.ict-hero-title {
    font-size: 2rem; font-weight: 800; letter-spacing: -0.5px;
    background: linear-gradient(135deg, #10b981, #6366f1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 10px;
}
.ict-hero-desc {
    color: rgba(255,255,255,0.6); font-size: 0.92rem; max-width: 600px; margin: 0 auto;
}

/* ── Stepper (Canvas-powered) ── */
.ict-stepper {
    position: relative;
    padding: 16px 0 28px;
}
.ict-stepper-canvas {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.ict-stepper-dots {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 0;
    flex-wrap: wrap;
}
.ict-step-dot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; transition: all 0.3s ease; padding: 8px 16px; border-radius: 12px;
    position: relative;
}
.ict-step-dot:hover { background: rgba(255,255,255,0.04); }
.ict-step-icon {
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ict-step-icon svg {
    width: 22px; height: 22px; flex-shrink: 0;
    transition: transform 0.3s ease;
}
.ict-step-dot:hover .ict-step-icon svg { transform: scale(1.1); }
.ict-step-dot.active .ict-step-icon {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(99,102,241,0.15));
    border-color: rgba(16,185,129,0.5);
    color: #10b981;
    box-shadow: 0 0 20px rgba(16,185,129,0.2), 0 0 40px rgba(16,185,129,0.06);
    transform: scale(1.12);
}
.ict-step-dot.active .ict-step-icon svg { transform: scale(1.08); }
.ict-step-dot.completed .ict-step-icon {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.3);
    color: #10b981;
    box-shadow: 0 0 10px rgba(16,185,129,0.08);
}
.ict-step-label {
    font-size: 0.73rem; color: rgba(255,255,255,0.35); font-weight: 500;
    transition: all 0.3s;
}
.ict-step-dot.active .ict-step-label { color: #10b981; font-weight: 700; }
.ict-step-dot.completed .ict-step-label { color: rgba(16,185,129,0.65); }

/* ── Main layout ── */
.ict-main {
    display: grid; grid-template-columns: 1fr 280px; gap: 24px;
}
.ict-content { min-width: 0; }
.ict-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* ── Step panel ── */
.ict-step-panel {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px; padding: 32px; backdrop-filter: blur(10px);
    animation: ictFadeIn 0.4s ease;
}
@keyframes ictFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.ict-step-title {
    font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.ict-step-desc {
    color: rgba(255,255,255,0.55); font-size: 0.88rem; margin-bottom: 28px;
    padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Input Mode Toggle (File / Exam) ── */
.ict-input-mode-toggle {
    display: flex; gap: 6px; margin-bottom: 24px;
    background: rgba(0,0,0,0.2); border-radius: 12px; padding: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}
.ict-mode-toggle-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px; border-radius: 10px; border: none;
    background: transparent; color: rgba(255,255,255,0.4);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s;
}
.ict-mode-toggle-btn:hover { color: rgba(255,255,255,0.6); }
.ict-mode-toggle-btn.active {
    background: rgba(99,102,241,0.15); color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.ict-mode-toggle-btn svg { flex-shrink: 0; }
/* ── Exam Question Section ── */
.ict-exam-section {
    margin-bottom: 24px;
    animation: ictFadeIn 0.3s ease;
}
.ict-exam-header {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 14px;
}
.ict-exam-icon {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2); color: #a5b4fc; flex-shrink: 0;
}
.ict-exam-title { font-size: 0.92rem; font-weight: 700; color: #e2e8f0; }
.ict-exam-hint { font-size: 0.74rem; color: rgba(255,255,255,0.35); margin-top: 2px; line-height: 1.5; }
.ict-exam-textarea {
    width: 100%; padding: 16px; border-radius: 14px;
    background: rgba(0,0,0,0.25); border: 1.5px solid rgba(99,102,241,0.15);
    color: #e2e8f0; font-size: 0.88rem; line-height: 1.8;
    font-family: inherit; resize: vertical; min-height: 160px;
    outline: none; transition: border-color 0.3s;
}
.ict-exam-textarea:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 16px rgba(99,102,241,0.08);
}
.ict-exam-textarea::placeholder { color: rgba(255,255,255,0.2); }

/* ── Fields ── */
.ict-field { margin-bottom: 24px; }
.ict-label {
    display: block; font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
}
.ict-hint { font-size: 0.76rem; color: rgba(255,255,255,0.4); margin: 4px 0 8px; }
.ict-req {
    font-size: 0.68rem; padding: 2px 7px; border-radius: 4px;
    background: rgba(239,68,68,0.15); color: #f87171; font-weight: 500;
}
.ict-opt {
    font-size: 0.68rem; padding: 2px 7px; border-radius: 4px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); font-weight: 500;
}

/* Input */
.ict-input, .ict-textarea, .ict-select {
    width: 100%; padding: 11px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; font-size: 0.88rem; font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.ict-input:focus, .ict-textarea:focus, .ict-select:focus {
    outline: none; border-color: rgba(16,185,129,0.5);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.ict-input::placeholder, .ict-textarea::placeholder { color: rgba(255,255,255,0.25); }
.ict-input-sm { max-width: 220px; }
.ict-textarea { resize: vertical; min-height: 64px; }
.ict-select option { background: #1a1f36; color: #fff; }

/* Radio pills */
.ict-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.ict-radio-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 20px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6); font-size: 0.84rem;
    transition: all 0.2s ease;
}
.ict-radio-pill:hover { background: rgba(255,255,255,0.07); }
.ict-radio-pill.active {
    background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4);
    color: #10b981;
}
.ict-radio-pill input[type="radio"] { display: none; }
.ict-lang-icon { font-size: 1rem; }

/* Check pills */
.ict-check-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ict-check-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 18px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6); font-size: 0.82rem; transition: all 0.2s;
}
.ict-check-pill:hover { background: rgba(255,255,255,0.07); }
.ict-check-pill.active, .ict-check-pill:has(input:checked) {
    background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.4);
    color: #818cf8;
}
.ict-check-pill input[type="checkbox"] { display: none; }

/* Tag input */
.ict-tag-input-wrap {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 10px 14px; border-radius: 12px; min-height: 46px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.2s;
}
.ict-tag-input-wrap:focus-within {
    border-color: rgba(16,185,129,0.5); box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}
.ict-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ict-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 8px; font-size: 0.82rem;
    background: rgba(16,185,129,0.12); color: #10b981; border: 1px solid rgba(16,185,129,0.25);
}
.ict-tag-remove {
    background: none; border: none; color: rgba(16,185,129,0.6); cursor: pointer;
    font-size: 1rem; padding: 0 2px; line-height: 1;
}
.ict-tag-remove:hover { color: #f87171; }
.ict-tag-input {
    border: none; background: transparent; color: #fff; font-size: 0.85rem;
    outline: none; flex: 1; min-width: 150px; padding: 4px 0;
}
.ict-tag-input::placeholder { color: rgba(255,255,255,0.25); }

/* ── Method cards ── */
.ict-method-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.ict-method-card {
    position: relative; padding: 20px 16px; border-radius: 16px; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.08);
    transition: all 0.25s ease;
}
.ict-method-card:hover {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}
.ict-method-card.selected {
    background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.4);
    box-shadow: 0 0 20px rgba(16,185,129,0.1);
}
.ict-method-card.recommended { border-color: rgba(168,85,247,0.3); }
.ict-method-icon { font-size: 1.5rem; margin-bottom: 8px; }
.ict-method-name { font-size: 0.92rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ict-method-desc { font-size: 0.76rem; color: rgba(255,255,255,0.4); line-height: 1.4; }
.ict-method-rec-badge {
    position: absolute; top: 8px; right: 8px; font-size: 0.65rem;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(168,85,247,0.15); color: #c084fc;
}

/* ── Custom method card ── */
.ict-method-card.custom-method {
    border-style: dashed;
    border-color: rgba(168,85,247,0.3);
    background: rgba(168,85,247,0.04);
}
.ict-method-card.custom-method:hover {
    background: rgba(168,85,247,0.08);
    border-color: rgba(168,85,247,0.5);
}
.ict-method-card.custom-method.selected {
    background: rgba(168,85,247,0.12);
    border-color: rgba(168,85,247,0.5);
    border-style: solid;
    box-shadow: 0 0 20px rgba(168,85,247,0.15);
}

/* ── Mode toggle buttons ── */
.ict-method-mode-toggle {
    display: flex; gap: 10px; margin-bottom: 16px;
}
.ict-mode-btn {
    padding: 10px 20px; border-radius: 12px; cursor: pointer;
    font-size: 0.88rem; font-weight: 600; border: 1.5px solid;
    transition: all 0.3s ease; backdrop-filter: blur(6px);
}
.ict-mode-advisor {
    background: rgba(99,102,241,0.08); color: #818cf8;
    border-color: rgba(99,102,241,0.25);
}
.ict-mode-advisor:hover {
    background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5);
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}
.ict-mode-thinking {
    background: rgba(245,158,11,0.08); color: #fbbf24;
    border-color: rgba(245,158,11,0.25);
}
.ict-mode-thinking:hover {
    background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.5);
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.15);
}

/* ── AI Advisor Panel ── */
.ict-advisor-panel {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0; border-radius: 16px;
    background: rgba(99,102,241,0.04);
    border: 1.5px solid rgba(99,102,241,0.15);
}
.ict-advisor-panel.open {
    max-height: 600px; opacity: 1; margin-top: 20px; overflow: visible;
}
.ict-advisor-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid rgba(99,102,241,0.1);
}
.ict-advisor-icon { font-size: 1.3rem; }
.ict-advisor-title {
    flex: 1; font-size: 0.95rem; font-weight: 700; color: #a5b4fc;
}
.ict-advisor-close {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 1.4rem; cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
.ict-advisor-close:hover { color: #fff; }
.ict-advisor-messages {
    max-height: 350px; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.ict-advisor-welcome {
    text-align: center; color: rgba(255,255,255,0.35);
    font-size: 0.85rem; padding: 24px 12px;
    font-style: italic;
}
.ict-advisor-msg {
    display: flex; gap: 10px; max-width: 90%;
    animation: ictMsgFadeIn 0.3s ease;
}
@keyframes ictMsgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.ict-advisor-user { align-self: flex-end; flex-direction: row-reverse; }
.ict-advisor-assistant { align-self: flex-start; }
.ict-advisor-msg-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; background: rgba(255,255,255,0.06);
}
.ict-advisor-msg-content {
    padding: 10px 14px; border-radius: 14px;
    font-size: 0.88rem; line-height: 1.5;
}
.ict-advisor-user .ict-advisor-msg-content {
    background: rgba(99,102,241,0.15); color: #c7d2fe;
    border-bottom-right-radius: 4px;
}
.ict-advisor-assistant .ict-advisor-msg-content {
    background: rgba(16,185,129,0.1); color: #a7f3d0;
    border-bottom-left-radius: 4px;
}
.ict-advisor-thinking {
    animation: ictPulse 1.5s infinite;
    color: rgba(255,255,255,0.4) !important;
}
@keyframes ictPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.ict-advisor-input-row {
    display: flex; gap: 10px; padding: 12px 16px;
    border-top: 1px solid rgba(99,102,241,0.1);
}
.ict-advisor-input {
    flex: 1; resize: none; border-radius: 12px;
    background: rgba(255,255,255,0.05); color: #e0e7ff;
    border: 1px solid rgba(99,102,241,0.15);
    padding: 10px 14px; font-size: 0.88rem;
    font-family: inherit; outline: none;
    transition: border-color 0.2s;
}
.ict-advisor-input:focus { border-color: rgba(99,102,241,0.4); }
.ict-advisor-input::placeholder { color: rgba(255,255,255,0.25); }
.ict-advisor-send {
    padding: 10px 18px; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border: none; font-weight: 600;
    font-size: 0.88rem; transition: all 0.2s;
    white-space: nowrap;
}
.ict-advisor-send:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.ict-advisor-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Independent Thinking Panel ── */
.ict-thinking-panel {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0; border-radius: 16px;
    background: rgba(245,158,11,0.04);
    border: 1.5px solid rgba(245,158,11,0.15);
}
.ict-thinking-panel.open {
    max-height: 400px; opacity: 1; margin-top: 20px; overflow: visible;
}
.ict-thinking-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid rgba(245,158,11,0.1);
}
.ict-thinking-icon { font-size: 1.3rem; }
.ict-thinking-title {
    flex: 1; font-size: 0.95rem; font-weight: 700; color: #fbbf24;
}
.ict-thinking-textarea {
    width: 100%; resize: vertical; border: none; border-radius: 0;
    background: rgba(255,255,255,0.03); color: #fef3c7;
    padding: 16px 18px; font-size: 0.9rem; font-family: inherit;
    outline: none; min-height: 100px; line-height: 1.6;
    box-sizing: border-box;
}
.ict-thinking-textarea:focus { background: rgba(255,255,255,0.05); }
.ict-thinking-textarea::placeholder { color: rgba(245,158,11,0.35); }
.ict-thinking-save {
    display: block; margin: 12px 18px 16px auto;
    padding: 10px 24px; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(217,119,6,0.2));
    color: #fbbf24; border: 1.5px solid rgba(245,158,11,0.3);
    font-weight: 600; font-size: 0.88rem; transition: all 0.2s;
}
.ict-thinking-save:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(217,119,6,0.3));
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .ict-method-mode-toggle { flex-direction: column; }
    .ict-advisor-msg { max-width: 95%; }
    .ict-advisor-input-row { flex-direction: column; }
    .ict-advisor-send { width: 100%; }
}

/* ── Diagnostic cards ── */
.ict-diag-section { margin-bottom: 16px; }
.ict-diag-other { opacity: 0.6; }
.ict-diag-list { display: flex; flex-direction: column; gap: 8px; }
.ict-diag-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}
.ict-diag-card:hover { background: rgba(255,255,255,0.05); }
.ict-diag-card.checked {
    background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3);
}
.ict-diag-card.relevant { border-left: 3px solid rgba(16,185,129,0.5); }
.ict-diag-cb { accent-color: #6366f1; width: 18px; height: 18px; cursor: pointer; }
.ict-diag-info { display: flex; flex-direction: column; gap: 2px; }
.ict-diag-name { font-size: 0.85rem; color: rgba(255,255,255,0.8); font-weight: 500; }
.ict-diag-desc { font-size: 0.74rem; color: rgba(255,255,255,0.35); }

/* ── Code output ── */
.ict-code-panel { max-width: 100%; }
.ict-code-output {
    margin: 16px 0; border-radius: 14px; overflow: hidden;
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08);
}
.ict-code-block {
    padding: 20px; margin: 0; font-size: 0.82rem; line-height: 1.6;
    color: #e2e8f0; overflow-x: auto; white-space: pre; font-family: 'Fira Code', 'Menlo', monospace;
}
.ict-code-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; gap: 16px;
}
.ict-code-loading p { color: rgba(255,255,255,0.5); font-size: 0.88rem; }
.ict-code-placeholder {
    padding: 40px; text-align: center; color: rgba(255,255,255,0.3);
}

/* Spinner */
.ict-spinner {
    width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #10b981; border-radius: 50%;
    animation: ictSpin 0.8s linear infinite;
}
@keyframes ictSpin { to { transform: rotate(360deg); } }

/* Code actions */
.ict-code-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.ict-code-actions .btn { font-size: 0.8rem; }
.ict-download-data-btn {
    background: rgba(16,185,129,0.12) !important;
    border-color: rgba(16,185,129,0.3) !important;
    color: #10b981 !important;
}
.ict-download-data-btn:hover {
    background: rgba(16,185,129,0.2) !important;
}

/* Code explanation */
.ict-code-explanation {
    background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.15);
    border-radius: 14px; padding: 20px; margin-bottom: 16px;
}
.ict-code-explanation h3 { font-size: 0.95rem; color: #818cf8; margin-bottom: 10px; }
.ict-explain-text {
    font-size: 0.85rem; color: rgba(255,255,255,0.65); line-height: 1.7;
}
.ict-explain-text code {
    background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px;
    font-size: 0.82rem; color: #10b981;
}

/* Analysis summary */
.ict-analysis-summary {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 16px 20px; margin-bottom: 16px;
}
.ict-analysis-summary h3 { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-bottom: 10px; }
.ict-summary-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.ict-summary-table td {
    padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ict-summary-table td:first-child { color: rgba(255,255,255,0.4); width: 40%; white-space: nowrap; }
.ict-summary-table td:last-child { color: rgba(255,255,255,0.8); }

/* Feedback */
.ict-feedback {
    text-align: center; padding: 20px;
    background: rgba(255,255,255,0.02); border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05);
}
.ict-feedback p { color: rgba(255,255,255,0.5); font-size: 0.88rem; margin-bottom: 12px; }
.ict-feedback-btns { display: flex; justify-content: center; gap: 12px; }
.ict-fb-yes { background: rgba(16,185,129,0.12) !important; color: #10b981 !important; border: 1px solid rgba(16,185,129,0.3) !important; }
.ict-fb-yes:hover { background: rgba(16,185,129,0.2) !important; }
.ict-fb-no { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.ict-fb-no:hover { background: rgba(239,68,68,0.18) !important; }
.ict-feedback-thanks {
    text-align: center; padding: 16px;
    color: #10b981; font-size: 0.88rem;
}

/* ── Navigation bar ── */
.ict-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0 80px; gap: 16px;
}
.ict-btn-prev, .ict-btn-next {
    padding: 10px 24px; border-radius: 12px; font-size: 0.88rem; font-weight: 600;
}
.ict-progress-mini {
    font-size: 0.78rem; color: rgba(255,255,255,0.35);
}

/* ── Sidebar cards ── */
.ict-tip-card {
    background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15);
    border-radius: 16px; padding: 16px; position: sticky; top: 100px;
}
.ict-tip-header {
    font-size: 0.78rem; font-weight: 600; color: #10b981;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.ict-tip-card p { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }

.ict-summary-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 16px;
}
.ict-sm-title {
    font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.ict-sm-item {
    font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-bottom: 6px;
    word-break: break-all;
}
.ict-sm-item strong { color: rgba(255,255,255,0.7); }

/* ── Responsive ── */
@media (min-width: 1200px) {
    .ict-dark { padding: 24px 48px; }
}
@media (max-width: 900px) {
    .ict-main { grid-template-columns: 1fr; }
    .ict-sidebar { display: none; }
    .ict-method-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 768px) {
    .ict-dark { padding: 16px 12px; }
    .ict-hero { padding: 32px 16px 24px; }
    .ict-hero-title { font-size: 1.5rem; }
    .ict-step-panel { padding: 20px 16px; border-radius: 16px; }
    .ict-stepper { gap: 0; }
    .ict-step-dot { padding: 6px 6px; }
    .ict-step-icon { width: 36px; height: 36px; font-size: 1rem; }
    .ict-step-label { font-size: 0.65rem; }
    .ict-step-line { width: 16px; }
    .ict-nav { padding: 16px 0 72px; }
    .ict-method-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .ict-hero-title { font-size: 1.25rem; }
    .ict-step-label { display: none; }
    .ict-method-grid { grid-template-columns: 1fr; }
    .ict-field { margin-bottom: 20px; }
    .ict-radio-group { gap: 8px; }
    .ict-radio-pill { padding: 7px 12px; font-size: 0.8rem; }
    .ict-check-pill { padding: 7px 12px; font-size: 0.8rem; }
}

/* ── File Picker ── */
.ict-file-row {
    display: flex; gap: 8px; align-items: stretch;
}
.ict-file-input { flex: 1; min-width: 0; }
.ict-file-picker-btn {
    white-space: nowrap; padding: 10px 16px !important; border-radius: 10px !important;
    font-size: 0.85rem !important; font-weight: 600 !important;
    background: rgba(16,185,129,0.1) !important; border: 1px solid rgba(16,185,129,0.3) !important;
    color: #10b981 !important; transition: all 0.2s !important; cursor: pointer;
}
.ict-file-picker-btn:hover {
    background: rgba(16,185,129,0.18) !important; border-color: rgba(16,185,129,0.5) !important;
}

/* ── Bug Report Section ── */
.ict-bug-section {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ict-bug-header { margin-bottom: 16px; }
.ict-bug-header h3 {
    font-size: 1.1rem; font-weight: 700; color: #f59e0b; margin-bottom: 6px;
}
.ict-bug-desc { font-size: 0.84rem; color: rgba(255,255,255,0.45); line-height: 1.5; }

.ict-bug-input-area { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ict-bug-textarea {
    font-family: 'Fira Code', 'Menlo', monospace !important;
    font-size: 0.82rem !important; line-height: 1.5 !important;
    background: rgba(0,0,0,0.3) !important; border-color: rgba(239,68,68,0.2) !important;
    color: #fca5a5 !important;
}
.ict-bug-textarea:focus { border-color: rgba(239,68,68,0.5) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }
.ict-bug-textarea::placeholder { color: rgba(252,165,165,0.35) !important; }
.ict-bug-submit-btn {
    align-self: flex-start; padding: 10px 24px !important;
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
    border: none !important; font-weight: 600 !important;
}
.ict-bug-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ict-bug-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Bug spinner (small inline) */
.ict-spinner-sm {
    display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff; border-radius: 50%; animation: ictSpin 0.7s linear infinite;
    vertical-align: middle; margin-right: 4px;
}

/* Bug Result */
.ict-bug-result {
    animation: ictFadeIn 0.4s ease; margin-bottom: 16px;
}
.ict-bug-cause {
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2);
    border-radius: 14px; padding: 16px 20px; margin-bottom: 12px;
}
.ict-bug-cause h4 { font-size: 0.92rem; color: #f59e0b; margin-bottom: 8px; }
.ict-bug-cause-text { font-size: 0.84rem; color: rgba(255,255,255,0.65); line-height: 1.6; }

.ict-bug-fix { margin-bottom: 12px; }
.ict-bug-fix h4 { font-size: 0.92rem; color: #10b981; margin-bottom: 8px; }
.ict-bug-fix .ict-code-output {
    border-color: rgba(16,185,129,0.2); background: rgba(0,0,0,0.35);
}

/* Bug History */
.ict-bug-history { margin-top: 16px; }
.ict-bug-history h4 { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.ict-bug-history-list { display: flex; flex-direction: column; gap: 6px; }
.ict-bug-history-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
    font-size: 0.78rem;
}
.ict-bug-history-item.latest { border-color: rgba(245,158,11,0.2); }
.ict-bug-history-error {
    color: rgba(252,165,165,0.7); font-family: 'Fira Code', monospace;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ict-bug-fixed-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; white-space: nowrap;
    background: rgba(16,185,129,0.12); color: #10b981;
}
.ict-bug-pending-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; white-space: nowrap;
    background: rgba(245,158,11,0.12); color: #f59e0b;
}

/* ── CPY驱动 全自动运行面板 ── */
.ict-cpy-pill { position: relative; }
.ict-cpy-pill.active { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.15)) !important; border-color: rgba(245,158,11,0.4) !important; }
.ict-cpy-hint {
    margin-top: 8px; padding: 8px 14px; border-radius: 10px; font-size: 0.82rem;
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15);
    color: rgba(245,158,11,0.8); line-height: 1.5;
}
.ict-cpy-panel { animation: ictFadeIn 0.3s ease; }
/* ── Visualization Mode Selector ── */
.ict-viz-selector {
    margin: 16px 0 20px; padding: 14px 16px;
    background: rgba(0,0,0,0.2); border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ict-viz-label {
    font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.ict-viz-options {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.ict-viz-opt {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.5);
    cursor: pointer; transition: all 0.25s; font-size: 0.78rem;
}
.ict-viz-opt:hover {
    background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.2);
    color: rgba(255,255,255,0.8);
}
.ict-viz-opt.selected {
    background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.4);
    color: #c4b5fd; box-shadow: 0 0 12px rgba(99,102,241,0.1);
}
.ict-viz-opt.ict-viz-quick.selected {
    background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35);
    color: #fbbf24; box-shadow: 0 0 12px rgba(245,158,11,0.1);
}
.ict-viz-opt-icon { font-size: 1.3rem; }
.ict-viz-opt-name { font-size: 0.68rem; font-weight: 600; text-align: center; line-height: 1.3; }
@media (max-width: 600px) {
    .ict-viz-options { grid-template-columns: repeat(2, 1fr); }
}
.ict-cpy-start-area { text-align: center; }
.ict-cpy-auto-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
    color: #fbbf24; margin-bottom: 12px;
}
.ict-cpy-start-btn {
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
    box-shadow: 0 4px 20px rgba(245,158,11,0.3) !important;
    font-size: 1.1rem !important; padding: 16px 48px !important;
}
.ict-cpy-start-btn:hover {
    box-shadow: 0 6px 28px rgba(245,158,11,0.5) !important;
}
.ict-cpy-progress {
    margin-top: 16px; animation: ictFadeIn 0.3s ease;
}
/* 5阶段进度条 */
.ict-cpy-stage-bar {
    display: flex; gap: 4px; margin-bottom: 14px; padding: 8px 12px;
    background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid rgba(255,255,255,0.06);
}
.ict-cpy-stage-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border-radius: 8px; transition: all 0.3s ease;
    background: rgba(255,255,255,0.02); border: 1px solid transparent;
}
.ict-cpy-stage-item.active {
    background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3);
    animation: ictPulse 1.5s infinite;
}
.ict-cpy-stage-item.done {
    background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2);
}
.ict-cpy-stage-item.warn {
    background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2);
}
.ict-cpy-stage-num { font-size: 1.1rem; }
.ict-cpy-stage-label {
    font-size: 0.65rem; color: rgba(255,255,255,0.45); text-align: center; line-height: 1.2;
}
.ict-cpy-stage-item.active .ict-cpy-stage-label { color: #a5b4fc; font-weight: 600; }
.ict-cpy-stage-item.done .ict-cpy-stage-label { color: #6ee7b7; }
.ict-cpy-stage-item.warn .ict-cpy-stage-label { color: #fbbf24; }
@keyframes ictPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.2); }
    50% { box-shadow: 0 0 0 4px rgba(99,102,241,0.1); }
}
/* 阶段结果摘要 */
.ict-cpy-stage-results { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.ict-cpy-stage-result {
    padding: 6px 12px; border-radius: 8px; font-size: 0.8rem;
    border: 1px solid rgba(255,255,255,0.04);
}
.ict-cpy-stage-result.success { background: rgba(16,185,129,0.04); border-color: rgba(16,185,129,0.1); color: #6ee7b7; }
.ict-cpy-stage-result.warning { background: rgba(245,158,11,0.04); border-color: rgba(245,158,11,0.1); color: #fbbf24; }
.ict-cpy-stage-output {
    margin-top: 4px; padding: 4px 8px; font-size: 0.72rem;
    background: rgba(0,0,0,0.2); border-radius: 4px; color: rgba(255,255,255,0.5);
    max-height: 60px; overflow-y: auto; font-family: monospace;
}
/* 阶段日志条目 */
.ict-cpy-log-entry.stage {
    background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15);
    font-weight: 600; color: #a5b4fc;
}
.ict-cpy-status-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: 12px; margin-bottom: 12px; font-weight: 600;
}
.ict-cpy-status-header.active {
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); color: #a5b4fc;
}
.ict-cpy-status-header.success {
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); color: #6ee7b7;
}
.ict-cpy-status-header.warning {
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); color: #fbbf24;
}
.ict-cpy-status-text { flex: 1; font-size: 0.92rem; }
.ict-cpy-round-badge {
    padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
}
.ict-cpy-stop-btn {
    margin-bottom: 12px;
    background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important;
    color: #fca5a5 !important;
}
.ict-cpy-stop-btn:hover { background: rgba(239,68,68,0.2) !important; }
.ict-cpy-log { margin-bottom: 16px; }
.ict-cpy-log h4 { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.ict-cpy-log-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 240px; overflow-y: auto; padding-right: 4px;
}
.ict-cpy-log-entry {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 10px; border-radius: 8px; font-size: 0.8rem;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
}
.ict-cpy-log-entry.success { background: rgba(16,185,129,0.04); border-color: rgba(16,185,129,0.1); }
.ict-cpy-log-entry.error { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.1); }
.ict-cpy-log-entry.fix { background: rgba(245,158,11,0.04); border-color: rgba(245,158,11,0.1); }
.ict-cpy-log-entry.learned {
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.05));
    border-color: rgba(139,92,246,0.2);
    animation: ictLearnedPulse 1.5s ease;
}
.ict-cpy-log-entry.memory {
    background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(245,158,11,0.04));
    border-color: rgba(251,191,36,0.2);
}
@keyframes ictLearnedPulse {
    0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.3); }
    50% { box-shadow: 0 0 12px 2px rgba(139,92,246,0.15); }
    100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.ict-cpy-log-icon { flex-shrink: 0; width: 16px; text-align: center; }
.ict-cpy-log-round {
    flex-shrink: 0; font-size: 0.7rem; font-weight: 700; padding: 1px 6px;
    border-radius: 4px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
}
.ict-cpy-log-msg { color: rgba(255,255,255,0.65); line-height: 1.4; }
.ict-cpy-live-code { margin-top: 12px; max-height: 300px; overflow-y: auto; }
.ict-cpy-results {
    margin-top: 20px; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(99,102,241,0.12);
    animation: ictFadeIn 0.4s ease;
}
/* ── Results Hero (Canvas背景) ── */
.ict-cpy-results-hero {
    position: relative; overflow: hidden;
    padding: 28px 24px; text-align: center;
}
.ict-results-canvas {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.ict-cpy-results-hero-content {
    position: relative; z-index: 1;
}
.ict-results-icon {
    font-size: 2.2rem; margin-bottom: 6px;
    filter: drop-shadow(0 0 10px rgba(99,102,241,0.3));
}
.ict-cpy-results-hero h3 {
    font-size: 1.1rem; font-weight: 800; margin-bottom: 4px;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ict-cpy-results-hero p {
    font-size: 0.76rem; color: rgba(255,255,255,0.4);
}
/* ── Results Content (结构化报告) ── */
.ict-cpy-results-content {
    font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.8;
    padding: 20px 24px; max-height: 600px; overflow-y: auto;
}
.ict-cpy-results-content h1, .ict-cpy-results-content h2 {
    color: rgba(255,255,255,0.9); margin: 20px 0 10px;
    font-size: 1rem; font-weight: 700;
    padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ict-cpy-results-content h3 {
    color: #a5b4fc; margin: 18px 0 8px; font-size: 0.95rem; font-weight: 700;
}
.ict-cpy-results-content h4 {
    color: rgba(255,255,255,0.8); margin: 12px 0 6px; font-size: 0.88rem;
}
.ict-cpy-results-content strong { color: #fbbf24; }
.ict-cpy-results-content em { color: #a5b4fc; font-style: italic; }
.ict-cpy-results-content ul, .ict-cpy-results-content ol { padding-left: 20px; }
.ict-cpy-results-content li { margin-bottom: 6px; }
.ict-cpy-results-content code {
    background: rgba(99,102,241,0.1); color: #c4b5fd;
    padding: 1px 5px; border-radius: 4px; font-size: 0.84rem;
}
.ict-cpy-results-content blockquote {
    border-left: 3px solid rgba(99,102,241,0.3); margin: 12px 0;
    padding: 8px 14px; background: rgba(99,102,241,0.04);
    border-radius: 0 8px 8px 0; color: rgba(255,255,255,0.6);
    font-size: 0.84rem;
}
.ict-cpy-results-content table {
    width: 100%; border-collapse: collapse; margin: 12px 0;
    font-size: 0.82rem;
}
.ict-cpy-results-content th {
    background: rgba(99,102,241,0.1); color: #a5b4fc;
    padding: 8px 10px; text-align: left; font-weight: 700;
    border-bottom: 1px solid rgba(99,102,241,0.15);
}
.ict-cpy-results-content td {
    padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ict-cpy-results-content tr:hover td { background: rgba(255,255,255,0.02); }
.ict-cpy-results-meta {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem; color: rgba(255,255,255,0.4);
}
.ict-cpy-final-code { margin-top: 20px; }
.ict-cpy-final-code h3 { font-size: 1rem; font-weight: 700; color: #10b981; margin-bottom: 10px; }

/* --- Continue Mode Panel --- */
/* ── Quick Add Visualization Buttons ── */
.ict-viz-quick-add {
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ict-viz-quick-label {
    font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.35);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.ict-viz-quick-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ict-viz-quick-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px; border-radius: 10px; font-size: 0.76rem; font-weight: 600;
    border: 1px solid rgba(99,102,241,0.2); background: rgba(99,102,241,0.08);
    color: #a5b4fc; cursor: pointer; transition: all 0.25s;
}
.ict-viz-quick-btn:hover {
    background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4);
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}
.ict-viz-quick-btn:active { transform: scale(0.97); }
.ict-cpy-continue-panel {
    margin-top: 20px; padding: 18px 20px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04));
    border: 1px solid rgba(59,130,246,0.15);
}
.ict-cpy-continue-header h3 {
    font-size: 1rem; font-weight: 700; color: #60a5fa; margin-bottom: 4px;
}
.ict-cpy-continue-desc {
    font-size: 0.78rem; color: rgba(255,255,255,0.4); line-height: 1.5; margin-bottom: 12px;
}
.ict-cpy-continue-input-area {
    display: flex; gap: 10px; align-items: flex-end;
}
.ict-cpy-continue-textarea {
    flex: 1; padding: 10px 14px; border-radius: 10px; resize: vertical;
    background: rgba(15,15,30,0.6); border: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0; font-size: 0.85rem; line-height: 1.5;
    font-family: inherit; min-height: 44px;
    transition: border-color 0.2s;
}
.ict-cpy-continue-textarea:focus {
    outline: none; border-color: rgba(59,130,246,0.4);
    box-shadow: 0 0 10px rgba(59,130,246,0.1);
}
.ict-cpy-continue-textarea::placeholder {
    color: rgba(255,255,255,0.25); font-size: 0.8rem;
}
.ict-cpy-continue-btn {
    flex-shrink: 0; padding: 10px 20px; border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; font-weight: 600; font-size: 0.85rem;
    border: none; cursor: pointer; white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}
.ict-cpy-continue-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ict-cpy-continue-btn:active { transform: translateY(0); }
.ict-cpy-continue-badge {
    margin-top: 10px; padding: 4px 12px; border-radius: 8px;
    background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.15);
    color: rgba(139,92,246,0.7); font-size: 0.75rem; display: inline-block;
}

/* --- Continue stage in progress bar --- */
.ict-cpy-stage-item.continue-stage {
    border-left: 2px solid rgba(59,130,246,0.3);
}

/* --- CPY live code header --- */
.ict-cpy-code-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.15);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-size: 0.82rem;
    color: #a5b4fc;
}
.ict-cpy-code-header + .ict-cpy-live-code {
    margin-top: 0;
    border-radius: 0 0 10px 10px;
}
.ict-cpy-code-status { flex: 1; font-weight: 600; }
.ict-cpy-code-status.ict-cpy-fixing { color: #fbbf24; }
.ict-cpy-live-code {
    max-height: 400px;
    overflow-y: auto;
}

/* --- Pyodide execution output: plots --- */
.ict-cpy-stage-plots {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ict-cpy-plot-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    max-width: 100%;
}
.ict-cpy-plot-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.ict-cpy-all-plots {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}
.ict-cpy-all-plots h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin: 0 0 12px;
}
.ict-cpy-plots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.ict-cpy-plots-grid .ict-cpy-plot-wrap {
    width: 100%;
}
.ict-cpy-plots-grid .ict-cpy-plot-img {
    width: 100%;
}

/* --- Pyodide stdout / stderr output --- */
.ict-cpy-stdout {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(16,185,129,0.04);
    border: 1px solid rgba(16,185,129,0.1);
    border-radius: 8px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}
.ict-cpy-stderr {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(239,68,68,0.04);
    border: 1px solid rgba(239,68,68,0.1);
    border-radius: 8px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: #fca5a5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}

/* --- Pyodide loading indicator --- */
.ict-cpy-pyodide-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.84rem;
    color: #a5b4fc;
}
.ict-cpy-pyodide-loading .ict-spinner-tiny {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(165,180,252,0.2);
    border-top-color: #a5b4fc;
    border-radius: 50%;
    animation: ictSpin 0.8s linear infinite;
}
@keyframes ictSpin { to { transform: rotate(360deg); } }

/* Generate button area */
.ict-generate-area {
    text-align: center; padding: 24px 0 8px;
}
.ict-generate-btn {
    font-size: 1.05rem; padding: 14px 40px; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(99,102,241,0.3);
    transition: all 0.2s ease;
}
.ict-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(99,102,241,0.45);
}
.ict-generate-area .ict-hint {
    margin-top: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.4);
}

/* Multi-file list */
.ict-file-list {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.ict-file-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 16px; font-size: 0.8rem;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
    color: #6ee7b7;
}
.ict-file-tag .ict-tag-remove {
    font-size: 0.9rem; cursor: pointer; color: rgba(255,255,255,0.4);
    background: none; border: none; padding: 0 2px; line-height: 1;
}
.ict-file-tag .ict-tag-remove:hover { color: #f87171; }

/* Variable pill-select */
.ict-var-pill-select {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 200px; overflow-y: auto; padding: 4px 0;
}
.ict-var-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 20px; font-size: 0.82rem;
    cursor: pointer; transition: all 0.15s ease;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}
.ict-var-pill:hover {
    background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3);
    color: rgba(255,255,255,0.85);
}
.ict-var-pill.active {
    background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.4);
    color: #a5b4fc;
}
.ict-var-pill input[type="checkbox"] { display: none; }

/* Streaming code display */
.ict-stream-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5); font-size: 0.85rem;
}
.ict-spinner-inline {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #10b981; border-radius: 50%;
    animation: ictSpin 0.8s linear infinite; flex-shrink: 0;
}
.ict-code-block.ict-streaming {
    min-height: 200px; max-height: 500px; overflow-y: auto;
    border-left: 3px solid rgba(16,185,129,0.3);
}
.ict-code-block.ict-streaming code::after {
    content: '▌'; animation: ictBlink 0.8s infinite; color: #10b981;
}
@keyframes ictBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 768px) {
    .ict-file-row { flex-direction: column; }
    .ict-file-picker-btn { align-self: flex-start; }
    .ict-bug-history-item { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ict-var-pill-select { max-height: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════
   AI Smart Search Box — Dashboard
   ═══════════════════════════════════════════════════════════════════ */

.ai-search-wrap {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 28px auto;
    animation: aiSearchAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.2s;
}

@keyframes aiSearchAppear {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ambient glow behind search box */
.ai-search-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 120%;
    background: radial-gradient(ellipse at center,
        rgba(99, 102, 241, 0.18) 0%,
        rgba(139, 92, 246, 0.10) 40%,
        transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    animation: aiGlowPulse 4s ease-in-out infinite;
}

@keyframes aiGlowPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

/* Main search box container */
.ai-search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 6px 6px 6px 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-search-box:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ai-search-box:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 0 0 3px rgba(99, 102, 241, 0.15),
        0 0 60px rgba(99, 102, 241, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Search icon */
.ai-search-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.ai-search-icon {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.3s;
}

.ai-search-box:focus-within .ai-search-icon {
    color: var(--primary);
}

/* Spark particle effect on icon */
.ai-search-spark {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    opacity: 0;
    transition: opacity 0.3s;
}

.ai-search-box:focus-within .ai-search-spark {
    opacity: 1;
    animation: aiSparkPulse 1.5s ease-in-out infinite;
}

@keyframes aiSparkPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* Input field */
.ai-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 400;
    padding: 12px 4px;
    letter-spacing: 0.01em;
}

.ai-search-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.3s;
}

.ai-search-input:focus::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

/* Search button */
.ai-search-btn {
    flex-shrink: 0;
    position: relative;
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 40px;
}

.ai-search-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.ai-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.ai-search-btn:hover::before {
    opacity: 1;
}

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

/* Button loader */
.ai-search-btn-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: aiSearchSpin 0.7s linear infinite;
}

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

/* Powered-by text */
.ai-search-powered {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.22);
    margin-top: 8px;
    letter-spacing: 0.03em;
}

/* ─── Result Panel ─── */
.ai-search-result {
    margin-top: 12px;
    overflow: hidden;
    border-radius: 16px;
}

.ai-search-result:empty {
    display: none;
}

.ai-search-result-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    animation: aiResultSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

/* Tag badge row */
.ai-search-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 0 20px;
    flex-wrap: wrap;
}

.ai-search-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
    border: 1px solid rgba(99,102,241,0.25);
    color: #a5b4fc;
}

.ai-search-tag-chip .ai-tag-icon {
    font-size: 0.9rem;
}

.ai-search-confidence-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 500;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.ai-search-confidence-bar {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.ai-search-confidence-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #10b981, #6ee7b7);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Answer body */
.ai-search-answer {
    padding: 16px 20px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-search-answer code {
    background: rgba(255,255,255,0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: #c4b5fd;
}

.ai-search-answer pre {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 10px 0;
    overflow-x: auto;
    font-size: 0.83rem;
    line-height: 1.5;
}

.ai-search-answer pre code {
    background: none;
    padding: 0;
    color: #e2e8f0;
}

/* Sources section */
.ai-search-sources {
    padding: 0 20px 12px 20px;
}

.ai-search-sources-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-search-source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
}

.ai-search-source-item:hover {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.2);
    color: #a5b4fc;
}

.ai-search-source-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.ai-search-source-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-search-source-category {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}

/* Feedback row */
.ai-search-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.ai-search-fb-group {
    display: flex;
    gap: 8px;
}

.ai-search-fb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.25s;
}

.ai-search-fb-btn:hover {
    border-color: rgba(99,102,241,0.3);
    color: rgba(255,255,255,0.8);
    background: rgba(99,102,241,0.08);
}

.ai-search-fb-btn.fb-positive:hover {
    border-color: rgba(16,185,129,0.3);
    background: rgba(16,185,129,0.08);
    color: #6ee7b7;
}

.ai-search-fb-btn.fb-negative:hover {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.08);
    color: #fca5a5;
}

.ai-search-fb-btn.fb-selected {
    border-color: rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
}

.ai-search-fb-btn.fb-positive.fb-selected {
    border-color: rgba(16,185,129,0.4);
    background: rgba(16,185,129,0.12);
    color: #6ee7b7;
}

.ai-search-fb-btn.fb-negative.fb-selected {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.12);
    color: #fca5a5;
}

.ai-search-fb-thanks {
    font-size: 0.78rem;
    color: rgba(16, 185, 129, 0.7);
    animation: aiFbFadeIn 0.3s ease;
}

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

.ai-search-ask-more {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: color 0.2s;
}

.ai-search-ask-more:hover {
    color: var(--primary);
}

/* Thinking state animation */
.ai-search-thinking {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 0.88rem;
}

.ai-search-thinking-dots {
    display: flex;
    gap: 4px;
}

.ai-search-thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    animation: aiDotBounce 1.2s ease-in-out infinite;
}

.ai-search-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-search-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes aiDotBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-8px); opacity: 1; }
}

/* Streaming text cursor */
.ai-search-streaming .ai-search-answer::after {
    content: '▌';
    color: var(--primary);
    animation: aiCursorBlink 0.7s infinite;
}

@keyframes aiCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ai-search-wrap { margin: 0 0 20px 0; }
    .ai-search-box { border-radius: 12px; padding: 4px 4px 4px 12px; }
    .ai-search-input { font-size: 0.88rem; padding: 10px 4px; }
    .ai-search-btn { padding: 8px 16px; font-size: 0.82rem; min-width: 64px; border-radius: 10px; }
    .ai-search-result-card { border-radius: 12px; }
    .ai-search-answer { padding: 12px 16px; font-size: 0.85rem; }
    .ai-search-tag-row { padding: 12px 16px 0 16px; }
    .ai-search-sources { padding: 0 16px 10px 16px; }
    .ai-search-feedback { padding: 8px 16px 12px 16px; }
}

/* ========================================
   Load More Pagination Button
   ======================================== */
.load-more-container {
    display: flex;
    justify-content: center;
    padding: 24px 0 12px 0;
    width: 100%;
}
.load-more-btn {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
    color: var(--primary, #6366f1);
    border: 1.5px solid rgba(99,102,241,0.25);
    border-radius: 12px;
    padding: 12px 36px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
    letter-spacing: 0.02em;
}
.load-more-btn:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.22));
    border-color: rgba(99,102,241,0.45);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(99,102,241,0.18);
}
.load-more-btn:active {
    transform: translateY(0);
}
.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
@media (max-width: 600px) {
    .load-more-btn {
        padding: 10px 28px;
        font-size: 0.88rem;
        border-radius: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   WEALTH ENGINE — 中央银行 · 财富交易系统 CSS
   ═══════════════════════════════════════════════════════════ */

/* ── Dark Background ── */
/* ── Canvas Background (shared) ── */
.cb-canvas-wrap {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    /* 强制独立合成层，防止页面重排时Canvas层闪烁 */
    will-change: transform;
    transform: translateZ(0);
}
.cb-canvas {
    display: block; width: 100%; height: 100%;
}
/* Canvas背景页面的容器不需要额外样式——玻璃效果由各组件自身控制 */
.wb-dark {
    min-height: 100vh;
    background: #080c18;
    position: relative;
    overflow: clip;
}
.wb-bg { display: none; }

/* ── Container ── */
.wb-container {
    position: relative; z-index: 1;
    max-width: 900px; margin: 0 auto;
    padding: 24px 16px 120px;
}

/* ── Loading ── */
.wb-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 80px 0; color: #94a3b8; font-size: 1rem;
}
.wb-spinner {
    width: 24px; height: 24px;
    border: 3px solid rgba(139,92,246,0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wb-error { color: #ef4444; text-align: center; padding: 80px 0; font-size: 1rem; }

/* ── Hero Banner ── */
.wb-hero {
    position: relative;
    padding: 48px 24px 36px;
    text-align: center;
    margin-bottom: 24px;
}
.wb-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.wb-hero-title {
    font-size: 1.8rem; font-weight: 800;
    background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #f472b6 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.wb-hero-desc {
    color: #94a3b8; font-size: 0.95rem; max-width: 600px; margin: 0 auto;
}

/* ── Section ── */
.wb-section {
    margin-bottom: 28px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 20px;
}
.wb-section-title {
    font-size: 1.1rem; font-weight: 700; color: #e2e8f0;
    margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px;
}

/* ── Wallet Card ── */
.wb-wallet-card {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(139,92,246,0.3);
    border-radius: 16px;
    padding: 24px;
}
.wb-wallet-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.wb-wallet-icon { font-size: 1.5rem; }
.wb-wallet-title { font-size: 1rem; font-weight: 600; color: #e2e8f0; flex: 1; }
.wb-tier-badge {
    padding: 4px 12px; border-radius: 20px; font-size: 0.75rem;
    font-weight: 700; color: #fff;
}
.wb-wallet-balance {
    text-align: center; margin: 16px 0;
}
.wb-balance-num {
    font-size: 3rem; font-weight: 800; color: #e2e8f0;
    letter-spacing: -1px;
}
.wb-balance-label {
    display: block; color: #64748b; font-size: 0.85rem; margin-top: 4px;
}
.wb-wallet-breakdown {
    text-align: center; margin: 8px 0 4px; display: flex; justify-content: center; gap: 16px;
}
.wb-breakdown-item {
    color: #94a3b8; font-size: 0.82rem; background: rgba(255,255,255,0.04);
    padding: 3px 10px; border-radius: 8px;
}
.wb-wallet-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-top: 16px;
}
.wb-wstat {
    text-align: center; padding: 8px 4px;
    background: rgba(255,255,255,0.03); border-radius: 8px;
}
.wb-wstat-val { display: block; font-size: 1.1rem; font-weight: 700; color: #a78bfa; }
.wb-wstat-label { display: block; font-size: 0.7rem; color: #64748b; margin-top: 2px; }

/* ── UBI Button ── */
.wb-ubi-btn {
    display: block; width: 100%; margin-top: 16px;
    padding: 12px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff; font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
}
.wb-ubi-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,92,246,0.3); }
.wb-ubi-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Bank Dashboard Grid ── */
.wb-bank-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.wb-bank-card {
    background: rgba(255,255,255,0.04); border-radius: 12px;
    padding: 16px; text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.2s;
}
.wb-bank-card:hover { transform: translateY(-2px); }
.wb-bcard-icon { font-size: 1.5rem; margin-bottom: 4px; }
.wb-bcard-val { font-size: 1.3rem; font-weight: 800; color: #e2e8f0; }
.wb-bcard-label { font-size: 0.72rem; color: #64748b; margin-top: 2px; }

/* ── Distribution Bars ── */
.wb-dist-grid {
    display: flex; align-items: flex-end; justify-content: space-around;
    gap: 8px; padding: 20px 0; min-height: 120px;
}
.wb-dist-bar { text-align: center; flex: 1; }
.wb-dist-fill {
    border-radius: 6px 6px 0 0; margin: 0 auto; width: 60%;
    transition: height 0.6s ease;
}
.wb-dist-label { font-size: 0.7rem; color: #94a3b8; margin-top: 6px; }
.wb-dist-count { font-size: 0.65rem; color: #64748b; }
.wb-dist-summary {
    display: flex; justify-content: center; gap: 24px;
    padding: 12px 0 0; color: #64748b; font-size: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Price Table ── */
.wb-price-table {
    border-radius: 12px; overflow: hidden;
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(139,92,246,0.15);
}
.wb-price-header {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.1));
    font-weight: 700; letter-spacing: 0.02em;
    color: #c4b5fd; font-size: 0.82rem;
    border-bottom: 1px solid rgba(139,92,246,0.2);
}
.wb-price-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.88rem; color: #e2e8f0;
    transition: background 0.15s;
}
.wb-price-row:hover { background: rgba(139,92,246,0.06); }
.wb-price-row:last-child { border-bottom: none; }
.wb-price-name { font-weight: 600; color: #f1f5f9; }
.wb-price-base { color: #94a3b8; font-weight: 500; }
.wb-price-mul {
    color: #a5b4fc; font-size: 0.82rem; font-weight: 600;
    background: rgba(139,92,246,0.1); border-radius: 4px;
    padding: 2px 6px; text-align: center;
}
.wb-price-note {
    font-size: 0.72rem; color: #64748b; margin-top: 12px; text-align: center;
    line-height: 1.6; padding: 8px 12px; border-radius: 10px;
    background: rgba(15,15,30,0.3); border: 1px solid rgba(255,255,255,0.03);
}

/* ── Formula Banner ── */
.wb-formula-banner {
    padding: 8px 14px; margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.06));
    border: 1px solid rgba(139,92,246,0.15); border-radius: 8px;
    text-align: center;
}
.wb-formula-eq {
    font-size: 0.78rem; color: #c4b5fd; font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── Token Gauge ── */
.wb-token-gauge {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; padding: 10px 14px;
    background: rgba(15,23,42,0.5); border: 1px solid rgba(59,130,246,0.15);
    border-radius: 10px;
}
.wb-token-gauge-left {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.wb-tg-icon { font-size: 1.3rem; }
.wb-tg-info { display: flex; flex-direction: column; }
.wb-tg-title { font-size: 0.7rem; color: #94a3b8; }
.wb-tg-price { font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.wb-token-gauge-right {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.wb-tg-bar-wrap { flex: 1; min-width: 0; }
.wb-tg-bar-track {
    position: relative; height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.06); overflow: visible;
}
.wb-tg-bar-fill {
    height: 100%; border-radius: 4px;
    transition: width 0.6s ease;
}
.wb-tg-bar-neutral {
    position: absolute; top: -3px; width: 2px; height: 14px;
    background: rgba(255,255,255,0.3); border-radius: 1px;
}
.wb-tg-bar-labels {
    display: flex; justify-content: space-between;
    font-size: 0.6rem; color: #475569; margin-top: 2px;
}
.wb-tg-badge {
    font-size: 0.85rem; font-weight: 700;
    padding: 4px 10px; border-radius: 6px;
    border: 1px solid; white-space: nowrap; flex-shrink: 0;
}

/* ── Price Table Detail Layout ── */
.wb-price-hd-detail,
.wb-price-rw-detail {
    grid-template-columns: 1.6fr 0.6fr 2.4fr 0.6fr !important;
}
.wb-ph-center { text-align: center; }
.wb-ph-right { text-align: right; }
.wb-price-factors {
    display: flex; align-items: center; gap: 2px;
    justify-content: center; flex-wrap: nowrap;
}
.wb-fp {
    font-size: 0.68rem; font-weight: 600;
    padding: 1px 5px; border-radius: 4px;
    border: 1px solid; white-space: nowrap;
    background: rgba(0,0,0,0.15);
}
.wb-fx {
    color: #475569; font-size: 0.6rem; margin: 0 1px;
}
.wb-price-final-v {
    font-weight: 700; font-size: 0.95rem; text-align: right;
}

/* ── Council Decision Header ── */
.wb-council-decision-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(236,72,153,0.06));
    border: 1px solid rgba(139,92,246,0.2); border-radius: 10px;
}
.wb-cdh-badge {
    font-size: 0.72rem; font-weight: 700; color: #c4b5fd;
    background: rgba(139,92,246,0.2); padding: 2px 8px; border-radius: 4px;
}
.wb-cdh-by {
    font-size: 0.72rem; color: #94a3b8;
    padding: 2px 8px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
}
.wb-cdh-formula {
    font-size: 0.72rem; color: #a5b4fc; font-weight: 500;
    margin-left: auto;
}

/* ── Council Pricing Sub-sections ── */
.wb-cp-sub-title {
    font-size: 0.82rem; font-weight: 700; color: #c4b5fd;
    margin: 14px 0 8px; padding-bottom: 4px;
    border-bottom: 1px solid rgba(139,92,246,0.15);
}

/* ── Feature Price Grid ── */
.wb-cp-feat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.wb-cp-feat-item {
    background: rgba(15,23,42,0.5); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 8px 10px;
    transition: border-color 0.2s;
}
.wb-cp-feat-item:hover { border-color: rgba(139,92,246,0.25); }
.wb-cp-fi-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.wb-cp-fi-name { font-size: 0.72rem; color: #94a3b8; }
.wb-cp-fi-val { font-size: 0.85rem; font-weight: 700; color: #e2e8f0; }
.wb-cp-fi-bar {
    height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.wb-cp-fi-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    transition: width 0.4s ease;
}

/* ── Tier Multiplier Chart ── */
.wb-cp-tier-chart {
    display: flex; flex-direction: column; gap: 5px;
}
.wb-cp-tier-row {
    display: flex; align-items: center; gap: 8px;
}
.wb-cp-tr-label {
    width: 42px; font-size: 0.72rem; font-weight: 600; text-align: right;
    flex-shrink: 0;
}
.wb-cp-tr-bar {
    flex: 1; height: 18px; border-radius: 4px;
    background: rgba(255,255,255,0.04); position: relative; overflow: hidden;
}
.wb-cp-tr-fill {
    height: 100%; border-radius: 4px;
    transition: width 0.5s ease;
}
.wb-cp-tr-prog {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 0.55rem; color: #f1f5f9; font-weight: 600;
    background: rgba(0,0,0,0.4); padding: 1px 4px; border-radius: 3px;
    border: 1px solid;
}
.wb-cp-tr-val {
    width: 42px; font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}

/* ── Transaction List ── */
.wb-txn-list { max-height: 360px; overflow-y: auto; }
.wb-txn-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wb-txn-icon { font-size: 0.8rem; }
.wb-txn-desc { flex: 1; font-size: 0.85rem; color: #cbd5e1; }
.wb-txn-amount { font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.wb-txn-time { font-size: 0.72rem; color: #475569; min-width: 60px; text-align: right; }
.wb-txn-empty { color: #475569; text-align: center; padding: 24px; font-size: 0.9rem; }
.wb-txn-new { animation: wb-txn-flash 0.6s ease; }
@keyframes wb-txn-flash {
    0% { background: rgba(59,130,246,0.2); transform: translateX(-8px); opacity: 0.5; }
    100% { background: transparent; transform: translateX(0); opacity: 1; }
}

/* ── AI Audit ── */
.wb-audit-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s;
    margin-bottom: 16px;
}
.wb-audit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,130,246,0.3); }
.wb-audit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.wb-audit-result { min-height: 40px; }
.wb-audit-card {
    background: rgba(255,255,255,0.03); border-radius: 12px; padding: 20px;
    border: 1px solid rgba(255,255,255,0.06);
}
.wb-audit-score {
    text-align: center; margin-bottom: 12px;
}
.wb-audit-score-num { font-size: 3rem; font-weight: 800; }
.wb-audit-score-label { display: block; font-size: 0.8rem; color: #64748b; }
.wb-audit-risk { font-size: 0.9rem; color: #94a3b8; margin-bottom: 8px; }
.wb-audit-analysis { font-size: 0.88rem; color: #cbd5e1; line-height: 1.6; margin-bottom: 12px; }
.wb-audit-list { padding-left: 20px; }
.wb-audit-list li { font-size: 0.85rem; color: #94a3b8; margin-bottom: 6px; line-height: 1.5; }
.wb-audit-empty { color: #475569; text-align: center; padding: 16px; }

/* ── Committee Q&A Panel (Premium) ── */
.wb-qa-health-bar {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 20px 24px; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.06) 50%, rgba(236,72,153,0.04) 100%);
    border-radius: 16px;
    border: 1px solid rgba(139,92,246,0.2);
    position: relative; overflow: hidden;
}
.wb-qa-health-bar::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(139,92,246,0.05) 25%, transparent 50%);
    animation: wb-health-rotate 8s linear infinite; pointer-events: none;
}
@keyframes wb-health-rotate { to { transform: rotate(360deg); } }
.wb-health-gauge {
    text-align: center; min-width: 90px; position: relative; z-index: 1;
    padding: 12px 16px; border-radius: 12px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(139,92,246,0.25);
}
.wb-health-num { font-size: 2.4rem; font-weight: 900; display: block; line-height: 1; letter-spacing: -1px; }
.wb-health-label { display: block; font-size: 0.68rem; color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.wb-health-risk { font-size: 0.88rem; color: #94a3b8; flex: 1; position: relative; z-index: 1; }
.wb-checkup-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: all 0.3s; position: relative; z-index: 1;
    box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}
.wb-checkup-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }
.wb-checkup-btn:active { transform: translateY(0); }
.wb-checkup-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Quick-ask pill buttons */
.wb-qa-quick-btns {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    padding: 4px 0;
}
.wb-qa-quick {
    padding: 8px 18px; border: 1px solid rgba(167,139,250,0.25); border-radius: 24px;
    background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(99,102,241,0.06));
    color: #c4b5fd; font-size: 0.82rem; cursor: pointer;
    transition: all 0.3s; white-space: nowrap;
    backdrop-filter: blur(8px); position: relative; overflow: hidden;
}
.wb-qa-quick::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(99,102,241,0.1));
    opacity: 0; transition: opacity 0.3s;
}
.wb-qa-quick:hover { border-color: #a78bfa; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(167,139,250,0.2); color: #ddd6fe; }
.wb-qa-quick:hover::before { opacity: 1; }
.wb-qa-quick:active { transform: translateY(0); }

/* Input row — chat-style */
.wb-qa-input-row {
    display: flex; gap: 10px; margin-bottom: 20px;
    padding: 6px; border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.3s;
}
.wb-qa-input-row:focus-within { border-color: rgba(139,92,246,0.4); background: rgba(255,255,255,0.04); }
.wb-qa-input {
    flex: 1; padding: 12px 16px; border: none; border-radius: 12px;
    background: transparent; color: #e2e8f0; font-size: 0.9rem;
    outline: none;
}
.wb-qa-input::placeholder { color: #475569; }
.wb-qa-send-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 22px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: all 0.3s; box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
.wb-qa-send-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.4); }
.wb-qa-send-btn:active { transform: translateY(0); }

/* Result area */
.wb-qa-result { min-height: 20px; }
.wb-qa-thinking {
    display: flex; align-items: center; gap: 12px;
    padding: 24px 20px; color: #c4b5fd; font-size: 0.9rem;
    background: rgba(139,92,246,0.05); border-radius: 16px;
    border: 1px dashed rgba(139,92,246,0.2);
    animation: wb-qa-pulse 2s ease-in-out infinite;
}
@keyframes wb-qa-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.wb-qa-answer-card {
    background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(59,130,246,0.04));
    border: 1px solid rgba(139,92,246,0.18);
    border-radius: 16px; padding: 20px 24px; margin-bottom: 12px;
    position: relative; overflow: hidden;
    animation: wb-qa-fadein 0.5s ease-out;
}
@keyframes wb-qa-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wb-qa-answer-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #60a5fa, #a78bfa, #7c3aed);
    background-size: 200% 100%; animation: wb-qa-gradient 3s linear infinite;
}
@keyframes wb-qa-gradient { to { background-position: -200% 0; } }

.wb-qa-question-label {
    font-size: 0.82rem; color: #a5b4fc; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
    font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.wb-qa-answer-text {
    font-size: 0.92rem; color: #e2e8f0; line-height: 1.8;
    white-space: pre-wrap; word-break: break-word;
}

/* Q&A History — compact timeline */
.wb-qa-history { margin-top: 12px; }
.wb-qa-history-title {
    font-size: 0.78rem; color: #64748b; font-weight: 700; margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: 1px;
}
.wb-qa-history-item {
    padding: 10px 14px; margin-bottom: 8px;
    background: rgba(255,255,255,0.02); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    border-left: 3px solid rgba(139,92,246,0.3);
    transition: all 0.2s;
}
.wb-qa-history-item:hover { background: rgba(255,255,255,0.04); border-left-color: #a78bfa; }
.wb-qa-hist-q { font-size: 0.78rem; color: #a5b4fc; margin-bottom: 4px; font-weight: 600; }
.wb-qa-hist-a { font-size: 0.78rem; color: #94a3b8; line-height: 1.6; }
.wb-qa-hist-time { font-size: 0.65rem; color: #475569; margin-left: 8px; font-weight: 400; }

/* ── Policy List ── */
.wb-policy-list { max-height: 280px; overflow-y: auto; }
.wb-policy-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wb-policy-type {
    background: rgba(139,92,246,0.15); color: #a78bfa;
    padding: 2px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
    white-space: nowrap;
}
.wb-policy-desc { flex: 1; font-size: 0.85rem; color: #cbd5e1; }
.wb-policy-executor { font-size: 0.72rem; color: #64748b; }
.wb-policy-time { font-size: 0.7rem; color: #475569; white-space: nowrap; }

/* ── Economic Chronicle Timeline ── */
.wb-chronicle-list { max-height: 480px; overflow-y: auto; padding-left: 8px; }
.wb-chronicle-item {
    display: flex; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}
.wb-chronicle-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.wb-chronicle-content { flex: 1; min-width: 0; }
.wb-chronicle-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.wb-chronicle-desc { font-size: 0.82rem; color: #94a3b8; margin: 4px 0 2px; line-height: 1.4; }

/* ── Chart ── */
.wb-chart-wrap {
    background: rgba(255,255,255,0.02); border-radius: 12px;
    padding: 16px; max-height: 350px;
}

/* ── Confirm Modal ── */
.wb-confirm-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}
.wb-confirm-overlay.wb-confirm-show { opacity: 1; }
.wb-confirm-modal {
    background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 28px; max-width: 420px; width: 90%;
    transform: scale(0.9); transition: transform 0.3s;
}
.wb-confirm-show .wb-confirm-modal { transform: scale(1); }
.wb-confirm-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.wb-confirm-header h3 { margin: 0; color: #e2e8f0; font-size: 1.1rem; }
.wb-confirm-icon { font-size: 1.5rem; }
.wb-confirm-body p { color: #94a3b8; font-size: 0.95rem; margin-bottom: 12px; }
.wb-confirm-detail {
    background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px;
}
.wb-confirm-detail > div {
    display: flex; justify-content: space-between; padding: 6px 0;
    font-size: 0.85rem; color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wb-confirm-detail > div:last-child { border-bottom: none; }
.wb-confirm-total { font-weight: 700; color: #e2e8f0 !important; font-size: 0.95rem !important; }
.wb-confirm-actions {
    display: flex; gap: 12px; margin-top: 20px;
}
.wb-confirm-cancel {
    flex: 1; padding: 10px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; background: transparent; color: #94a3b8;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.wb-confirm-cancel:hover { background: rgba(255,255,255,0.05); }
.wb-confirm-pay {
    flex: 1; padding: 10px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.wb-confirm-pay:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,92,246,0.3); }
.wb-confirm-pay:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: #475569; }

/* ── Toast (fallback) ── */
.wb-toast {
    position: fixed; bottom: 100px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 600; color: #fff;
    z-index: 10001; opacity: 0; transition: all 0.3s;
    pointer-events: none;
}
.wb-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wb-toast-success { background: #22c55e; }
.wb-toast-error { background: #ef4444; }
.wb-toast-info { background: #3b82f6; }

/* ── Balance Widget in Topbar ── */
.dash-pill-wealth {
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.15)) !important;
    border: 1px solid rgba(139,92,246,0.25) !important;
}
.wb-widget-icon { font-size: 1rem; }
.wb-widget-balance { font-variant-numeric: tabular-nums; }

/* ── Tab Bar ── */
.wb-tab-bar {
    display: flex; gap: 0; margin: 0 16px 16px; border-radius: 12px;
    background: rgba(30,30,50,0.6); overflow: hidden; border: 1px solid rgba(139,92,246,0.2);
}
.wb-tab-btn {
    flex: 1; padding: 12px 16px; border: none; background: transparent;
    color: #a0a0c0; font-size: 0.95rem; font-weight: 600; cursor: pointer;
    transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wb-tab-btn:hover { background: rgba(139,92,246,0.1); color: #c4b5fd; }
.wb-tab-btn.wb-tab-active {
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2));
    color: #e2e8f0; box-shadow: inset 0 -2px 0 #8b5cf6;
}
/* wbFadeIn动画已移除 — 是闪屏的源头之一 */
.wb-tab-content { }
#wbTabTemple { background: transparent; }

/* ── Sub-Tab Bar (inside Personal / Council) ── */
.wb-subtab-bar {
    display: flex;
    gap: 6px;
    margin: 0 16px 14px;
    padding: 4px;
    background: rgba(20,20,40,0.5);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}
.wb-subtab-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    text-align: center;
}
.wb-subtab-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}
.wb-subtab-btn.wb-subtab-active {
    background: rgba(139,92,246,0.2);
    color: #e2e8f0;
    box-shadow: 0 0 8px rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
}
/* 子面板：默认隐藏，只有 active-panel 可见（单class切换，最小化DOM变更） */
.wb-subtab-panel:not(.wb-subtab-active-panel) { display: none; }
.wb-subtab-active-panel { display: block;
}

/* ── Council Ideology ── */
.wb-council-ideology { padding: 20px; background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(59,130,246,0.08)); border-radius: 12px; border: 1px solid rgba(16,185,129,0.15); }
.wb-council-mission { color: #94a3b8; font-size: 0.85rem; line-height: 1.6; margin: 8px 0 16px; }
.wb-council-goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wb-goal-item {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
    background: rgba(30,30,50,0.5); border-radius: 8px; font-size: 0.8rem; color: #cbd5e1;
}
.wb-goal-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Council Structure ── */
.wb-council-structure { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 12px 0; }
.wb-struct-node {
    width: 100%; max-width: 400px; padding: 14px 16px; border-radius: 10px;
    display: flex; align-items: center; gap: 12px; border: 1px solid rgba(139,92,246,0.2);
}
.wb-struct-ai { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(168,85,247,0.1)); }
.wb-struct-tag { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.1)); }
.wb-struct-safety { background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(251,146,60,0.1)); }
.wb-struct-exec { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.1)); }
.wb-struct-icon { font-size: 1.5rem; flex-shrink: 0; }
.wb-struct-name { font-weight: 600; font-size: 0.85rem; color: #e2e8f0; }
.wb-struct-desc { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }
.wb-struct-arrow { font-size: 1.2rem; color: #6366f1; padding: 4px 0; }

/* ── Workflow ── */
.wb-workflow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 12px 0; }
.wb-wf-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px;
    background: rgba(30,30,50,0.5); border-radius: 8px; border: 1px solid rgba(99,102,241,0.15); min-width: 72px;
}
.wb-wf-num {
    width: 20px; height: 20px; border-radius: 50%; background: #6366f1; color: #fff;
    font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.wb-wf-icon { font-size: 1.1rem; }
.wb-wf-label { font-size: 0.65rem; color: #94a3b8; text-align: center; }
.wb-wf-connector { color: #6366f1; font-size: 1rem; }

/* ── Rules Meta ── */
.wb-rules-meta { display: flex; gap: 16px; margin-bottom: 12px; font-size: 0.78rem; color: #94a3b8; }

/* ── Meeting Cards ── */
.wb-meeting-list { display: flex; flex-direction: column; gap: 12px; }
.wb-meeting-card {
    padding: 14px 16px; border-radius: 10px;
    background: rgba(30,30,50,0.5); border: 1px solid rgba(99,102,241,0.15);
}
.wb-meeting-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wb-meeting-time { font-size: 0.78rem; color: #94a3b8; }
.wb-meeting-changes { font-size: 0.75rem; color: #a5b4fc; background: rgba(99,102,241,0.15); padding: 2px 8px; border-radius: 8px; }
.wb-meeting-metrics { display: flex; gap: 16px; font-size: 0.78rem; margin-bottom: 8px; flex-wrap: wrap; }
.wb-meeting-analysis { font-size: 0.78rem; color: #cbd5e1; line-height: 1.5; margin: 6px 0; }
.wb-meeting-changes-list { margin-top: 8px; }
.wb-change-item { display: flex; justify-content: space-between; padding: 4px 8px; font-size: 0.72rem; color: #94a3b8; background: rgba(0,0,0,0.15); border-radius: 4px; margin-bottom: 3px; }
.wb-change-param { color: #a5b4fc; font-weight: 500; }
.wb-change-vals { color: #cbd5e1; }
.wb-meeting-reclaim { font-size: 0.72rem; color: #fbbf24; margin-top: 6px; }

/* ── Banking Services ── */
.wb-bank-services {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px; margin-top: 16px;
}
.wb-service-card {
    background: rgba(30,30,50,0.6); border: 1px solid rgba(99,102,241,0.15);
    border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.wb-svc-header {
    font-size: 1rem; font-weight: 700; color: #e2e8f0;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(99,102,241,0.1);
}
.wb-svc-stat {
    display: flex; align-items: baseline; gap: 8px; margin: 4px 0;
}
.wb-svc-val {
    font-size: 1.5rem; font-weight: 800; color: #a5b4fc;
    font-variant-numeric: tabular-nums;
}
.wb-svc-label {
    font-size: 0.75rem; color: #94a3b8;
}
.wb-svc-detail {
    font-size: 0.78rem; color: #94a3b8; line-height: 1.5;
}
.wb-svc-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center;
}
.wb-svc-input {
    flex: 1; min-width: 100px; padding: 8px 12px; border-radius: 8px;
    border: 1px solid rgba(99,102,241,0.25); background: rgba(15,15,30,0.6);
    color: #e2e8f0; font-size: 0.85rem; outline: none;
    transition: border-color 0.2s;
}
.wb-svc-input:focus { border-color: #6366f1; }
.wb-svc-input::placeholder { color: #475569; }
.wb-svc-btn {
    padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; color: #fff;
    transition: opacity 0.2s, transform 0.1s; white-space: nowrap;
}
.wb-svc-btn:hover { opacity: 0.85; }
.wb-svc-btn:active { transform: scale(0.97); }
.wb-btn-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.wb-btn-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.wb-btn-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wb-btn-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
/* ─── Suggestion Box (Premium) ─── */
.wb-suggest-desc {
    color: #a5b4fc; font-size: 0.85rem; line-height: 1.6; margin-bottom: 16px;
    padding: 14px 18px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
    border-left: 3px solid rgba(99,102,241,0.4);
}
.wb-suggest-form {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
    padding: 16px; border-radius: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
}
.wb-suggest-textarea {
    width: 100%; min-height: 80px; padding: 14px 16px;
    background: rgba(15,15,30,0.4); border: 1px solid rgba(99,102,241,0.15);
    border-radius: 12px; color: #e2e8f0; font-size: 0.88rem;
    resize: vertical; outline: none; transition: all 0.3s;
    box-sizing: border-box; line-height: 1.6;
}
.wb-suggest-textarea:focus {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    background: rgba(15,15,30,0.6);
}
.wb-suggest-send-btn {
    align-self: flex-end; padding: 10px 24px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff; border: none; border-radius: 12px;
    font-size: 0.88rem; font-weight: 700; cursor: pointer;
    transition: all 0.3s; box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.wb-suggest-send-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.wb-suggest-send-btn:active { transform: translateY(0); }
/* ─── Proposal History Scroll Container ─── */
.wb-suggest-history-title {
    font-size: 0.82rem; font-weight: 700; color: #a5b4fc;
    margin: 16px 0 8px; padding: 0 4px;
    display: flex; align-items: center; gap: 6px;
}
.wb-suggest-history-scroll {
    max-height: 380px; overflow-y: auto; padding: 4px 2px 4px 0;
    scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.25) transparent;
    mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 92%, transparent 100%);
}
.wb-suggest-history-scroll::-webkit-scrollbar { width: 4px; }
.wb-suggest-history-scroll::-webkit-scrollbar-track { background: transparent; }
.wb-suggest-history-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }
.wb-suggest-history-scroll::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }
/* ── Suggestion Cards (液态玻璃) ── */
.wb-suggest-card {
    background: rgba(15,15,30,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 16px 18px; margin-bottom: 12px;
    position: relative; overflow: hidden;
    backdrop-filter: blur(8px);
    transition: transform 0.25s, box-shadow 0.3s, border-color 0.3s;
}
.wb-suggest-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.wb-suggest-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0.8;
}
.wb-suggest-card::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.04; border-radius: 16px;
}
.wb-suggest-card > * { position: relative; z-index: 1; }
/* 采纳 — 翡翠光晕 */
.wb-suggest-card.adopted {
    border-color: rgba(34,197,94,0.15);
    box-shadow: 0 0 20px rgba(34,197,94,0.06), inset 0 1px 0 rgba(34,197,94,0.08);
}
.wb-suggest-card.adopted::before { background: linear-gradient(90deg, rgba(34,197,94,0.6), rgba(74,222,128,0.3), transparent 80%); }
.wb-suggest-card.adopted::after { background: radial-gradient(ellipse at 20% 0%, rgba(34,197,94,0.15), transparent 60%); }
.wb-suggest-card.adopted:hover { border-color: rgba(34,197,94,0.25); box-shadow: 0 8px 30px rgba(34,197,94,0.1); }
/* 部分采纳 — 琥珀光晕 */
.wb-suggest-card.partial {
    border-color: rgba(245,158,11,0.12);
    box-shadow: 0 0 20px rgba(245,158,11,0.05), inset 0 1px 0 rgba(245,158,11,0.06);
}
.wb-suggest-card.partial::before { background: linear-gradient(90deg, rgba(245,158,11,0.5), rgba(251,191,36,0.3), transparent 80%); }
.wb-suggest-card.partial::after { background: radial-gradient(ellipse at 20% 0%, rgba(245,158,11,0.12), transparent 60%); }
.wb-suggest-card.partial:hover { border-color: rgba(245,158,11,0.2); box-shadow: 0 8px 30px rgba(245,158,11,0.08); }
/* 驳回 — 暗红柔光 */
.wb-suggest-card.rejected {
    border-color: rgba(239,68,68,0.10);
    box-shadow: 0 0 16px rgba(239,68,68,0.04), inset 0 1px 0 rgba(239,68,68,0.05);
}
.wb-suggest-card.rejected::before { background: linear-gradient(90deg, rgba(239,68,68,0.4), rgba(248,113,113,0.2), transparent 80%); }
.wb-suggest-card.rejected::after { background: radial-gradient(ellipse at 20% 0%, rgba(239,68,68,0.08), transparent 60%); }
.wb-suggest-card.rejected:hover { border-color: rgba(239,68,68,0.18); box-shadow: 0 8px 24px rgba(239,68,68,0.06); }
/* 待审 — 蓝紫微光 */
.wb-suggest-card.pending {
    border-color: rgba(99,102,241,0.08);
    box-shadow: 0 0 12px rgba(99,102,241,0.04);
}
.wb-suggest-card.pending::before { background: linear-gradient(90deg, rgba(99,102,241,0.3), rgba(148,163,184,0.2), transparent 80%); }
.wb-suggest-card.pending::after { background: radial-gradient(ellipse at 20% 0%, rgba(99,102,241,0.06), transparent 60%); }
.wb-suggest-card-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.wb-suggest-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 20px; font-size: 0.73rem; font-weight: 700;
    backdrop-filter: blur(4px);
}
.wb-badge-adopted {
    background: rgba(34,197,94,0.12); color: #4ade80;
    border: 1px solid rgba(34,197,94,0.2);
    box-shadow: 0 0 8px rgba(34,197,94,0.1);
}
.wb-badge-partial {
    background: rgba(245,158,11,0.12); color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.2);
    box-shadow: 0 0 8px rgba(245,158,11,0.08);
}
.wb-badge-rejected {
    background: rgba(239,68,68,0.10); color: #f87171;
    border: 1px solid rgba(239,68,68,0.15);
}
.wb-badge-pending {
    background: rgba(100,116,139,0.10); color: #94a3b8;
    border: 1px solid rgba(100,116,139,0.15);
}
.wb-suggest-score { font-size: 0.9rem; font-weight: 700; color: #a5b4fc; }
.wb-suggest-score span { font-size: 0.7rem; color: #64748b; }
.wb-suggest-reward-tag { font-size: 0.8rem; font-weight: 700; margin-left: auto; }
.wb-suggest-card-text { color: #cbd5e1; font-size: 0.82rem; line-height: 1.5; margin-bottom: 8px; }
.wb-suggest-card-reply {
    background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.1);
    border-radius: 8px; padding: 10px 12px;
}
.wb-reply-header { font-size: 0.75rem; font-weight: 600; color: #a5b4fc; margin-bottom: 6px; }
.wb-reply-body { font-size: 0.82rem; color: #e2e8f0; line-height: 1.5; }
.wb-reply-reason { font-size: 0.75rem; color: #94a3b8; margin-top: 6px; font-style: italic; }
/* ─── Reviewing Animation ─── */
.wb-review-anim {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 20px; background: rgba(15,15,30,0.5);
    border: 1px solid rgba(99,102,241,0.15); border-radius: 14px;
    animation: wb-pulse-glow 2s ease-in-out infinite;
}
.wb-review-seal { font-size: 2.5rem; margin-bottom: 10px; animation: wb-seal-spin 3s ease-in-out infinite; }
.wb-review-text { color: #a5b4fc; font-size: 0.88rem; font-weight: 600; }
.wb-review-dots { display: flex; gap: 4px; margin-top: 8px; }
.wb-review-dots span {
    font-size: 1.5rem; color: #6366f1; font-weight: 700;
    animation: wb-dot-bounce 1.4s ease-in-out infinite;
}
.wb-review-dots span:nth-child(2) { animation-delay: 0.2s; }
.wb-review-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wb-pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.1); }
    50% { box-shadow: 0 0 40px rgba(99,102,241,0.25); }
}
@keyframes wb-seal-spin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-8deg) scale(1.05); }
    75% { transform: rotate(8deg) scale(1.05); }
}
@keyframes wb-dot-bounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-6px); }
}
/* ─── Verdict Reveal ─── */
.wb-verdict-reveal { animation: wb-verdict-enter 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.wb-verdict-reveal .wb-suggest-badge { animation: wb-badge-stamp 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }
.wb-verdict-reveal .wb-suggest-card-reply { animation: wb-reply-slide 0.5s ease-out 0.6s both; }
.wb-verdict-reveal .wb-suggest-score { animation: wb-score-pop 0.4s ease-out 0.4s both; }
.wb-verdict-reveal .wb-suggest-reward-tag { animation: wb-score-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.5s both; }
@keyframes wb-verdict-enter {
    0% { opacity: 0; transform: translateY(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wb-badge-stamp {
    0% { opacity: 0; transform: scale(2.5) rotate(-15deg); }
    60% { transform: scale(0.9) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes wb-reply-slide {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes wb-score-pop {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
/* ─── Charity Gala (慈善晚宴) ─── */
/* ─── Gala Theme CSS Custom Properties (defaults) ─── */
#wbSubGala {
    --gala-accent: #a5b4fc;
    --gala-glow: #6366f1;
    --gala-bg1: rgba(99,102,241,0.12);
    --gala-bg2: rgba(168,85,247,0.08);
    --gala-particle: #c4b5fd;
}

/* ─── Hero Section ─── */
.wb-gala-hero {
    text-align: center; position: relative; overflow: hidden;
    border-radius: 18px; padding: 0;
    background: linear-gradient(160deg, var(--gala-bg1), var(--gala-bg2), rgba(0,0,0,0.15));
    background-size: 200% 200%;
    animation: wb-gala-aurora 12s ease-in-out infinite;
}
.wb-gala-hero-backdrop {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--gala-bg1) 0%, transparent 70%);
    opacity: 0.6;
    animation: wb-gala-backdrop-pulse 6s ease-in-out infinite;
}
@keyframes wb-gala-aurora {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes wb-gala-backdrop-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}
.wb-gala-header { padding: 24px 16px 8px; position: relative; z-index: 1; }
.wb-gala-emblem {
    font-size: 3.2rem; margin-bottom: 6px;
    animation: wb-gala-float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px var(--gala-glow));
    transition: filter 0.5s;
}
@keyframes wb-gala-float {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    33% { transform: translateY(-8px) rotate(3deg) scale(1.05); }
    66% { transform: translateY(-4px) rotate(-2deg) scale(1.02); }
}
.wb-gala-title-animated {
    background: linear-gradient(90deg, var(--gala-accent), #e2e8f0, var(--gala-accent));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wb-gala-title-shimmer 4s linear infinite;
}
@keyframes wb-gala-title-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.wb-gala-tagline {
    color: var(--gala-accent); font-size: 0.82rem; font-style: italic;
    margin-top: 6px; line-height: 1.5; opacity: 0.85;
    position: relative; z-index: 1;
}

/* ─── Floating Particles ─── */
.wb-gala-particles {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.wb-gala-particle {
    position: absolute; bottom: -10%; display: block;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gala-particle);
    box-shadow: 0 0 6px var(--gala-particle);
    animation: wb-gala-rise linear infinite;
}
.wb-gala-particle:nth-child(3n) { width: 6px; height: 6px; }
.wb-gala-particle:nth-child(5n) { width: 3px; height: 3px; }
.wb-gala-particle:nth-child(7n) { border-radius: 2px; transform: rotate(45deg); }
@keyframes wb-gala-rise {
    0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
    15% { opacity: 1; transform: scale(1); }
    100% { transform: translateY(-420px) translateX(calc(-30px + 60px * var(--drift, 0.5))) scale(0.3); opacity: 0; }
}

/* ─── Story Display Area ─── */
.wb-gala-story-area {
    position: relative; z-index: 1; padding: 0 16px 20px;
}
.wb-gala-story-card {
    background: rgba(0,0,0,0.25); border-radius: 14px; padding: 18px 20px;
    margin: 12px 0 8px; text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.wb-gala-story-ornament {
    color: var(--gala-accent); font-size: 0.7rem; opacity: 0.5;
    margin: 4px 0; letter-spacing: 8px;
}
.wb-gala-story-card .wb-gala-story-text {
    color: #d4d8e8; font-size: 0.84rem; line-height: 2;
    text-indent: 0; text-align: center;
    font-style: italic; letter-spacing: 0.3px;
}
.wb-gala-dresscode-line {
    text-align: center; font-size: 0.76rem; color: #94a3b8; margin: 8px 0;
    padding: 6px 14px; border-radius: 20px;
    background: rgba(0,0,0,0.15); display: inline-block;
    border: 1px dashed rgba(255,255,255,0.06);
}
.wb-gala-dc-icon { font-size: 0.85rem; }

/* ─── Program Timeline Flow ─── */
.wb-gala-program-flow {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0; margin: 14px 0 4px; padding: 0 8px;
}
.wb-gala-prog-node {
    display: flex; align-items: center; gap: 6px; padding: 5px 10px;
    background: rgba(0,0,0,0.2); border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
}
.wb-gala-prog-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--gala-accent);
    box-shadow: 0 0 8px var(--gala-glow);
    animation: wb-gala-dot-pulse 2s ease-in-out infinite;
}
.wb-gala-prog-dot { animation-delay: calc(var(--i, 0) * 0.3s); }
.wb-gala-prog-text { color: #cbd5e1; font-size: 0.72rem; white-space: nowrap; }
.wb-gala-prog-line {
    width: 16px; height: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, var(--gala-accent), transparent);
    opacity: 0.3;
}
@keyframes wb-gala-dot-pulse {
    0%, 100% { box-shadow: 0 0 4px var(--gala-glow); }
    50% { box-shadow: 0 0 12px var(--gala-glow), 0 0 20px var(--gala-glow); }
}

/* ─── Fade-in Animation ─── */
.wb-gala-fadein {
    animation: wb-gala-fadein 0.8s ease-out both;
}
@keyframes wb-gala-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Shimmer Effect for Slogan ─── */
.wb-gala-shimmer {
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 60%, transparent 80%);
    background-size: 250% 100%;
    animation: wb-gala-shimmer-slide 3s ease-in-out infinite;
    border-radius: 8px; padding: 2px 0;
}
@keyframes wb-gala-shimmer-slide {
    0% { background-position: 150% center; }
    100% { background-position: -50% center; }
}
.wb-gala-event-card {
    background: linear-gradient(135deg, var(--gala-bg1), var(--gala-bg2));
    border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px;
    transition: background 0.5s, border-color 0.5s;
}
.wb-gala-event-name {
    font-size: 1.1rem; font-weight: 700; color: #e2e8f0; margin-bottom: 4px;
}
.wb-gala-event-theme { font-size: 0.82rem; color: #94a3b8; margin-bottom: 16px; }
.wb-gala-stats {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px;
}
.wb-gala-stat {
    background: rgba(0,0,0,0.2); border-radius: 12px; padding: 12px 20px;
    text-align: center; min-width: 90px; border: 1px solid rgba(255,255,255,0.05);
}
.wb-gala-stat-val { font-size: 1.2rem; font-weight: 800; color: var(--gala-accent); }
.wb-gala-stat-label { font-size: 0.7rem; color: #64748b; margin-top: 2px; }
.wb-gala-phase { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 16px; }
.wb-gala-phase-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
}
.wb-gala-phase-donation {
    background: rgba(99,102,241,0.15); color: #818cf8;
    border: 1px solid rgba(99,102,241,0.25); animation: wb-pulse-glow 2s ease-in-out infinite;
}
.wb-gala-phase-claim {
    background: rgba(34,197,94,0.15); color: #4ade80;
    border: 1px solid rgba(34,197,94,0.25); animation: wb-pulse-glow 2s ease-in-out infinite;
}
.wb-gala-countdown { font-size: 0.75rem; color: #94a3b8; }
.wb-gala-actions { margin-top: 12px; }
.wb-gala-action-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wb-gala-input {
    flex: 1; min-width: 100px; padding: 10px 14px; border-radius: 10px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(99,102,241,0.2);
    color: #e2e8f0; font-size: 0.88rem; outline: none;
}
.wb-gala-input:focus { border-color: rgba(99,102,241,0.5); box-shadow: 0 0 12px rgba(99,102,241,0.15); }
.wb-gala-donate-btn {
    padding: 10px 20px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #6366f1, #a855f7); color: white;
    font-weight: 700; font-size: 0.88rem; cursor: pointer;
    transition: all 0.3s;
}
.wb-gala-donate-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.wb-gala-claim-btn {
    padding: 10px 20px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #22c55e, #16a34a); color: white;
    font-weight: 700; font-size: 0.88rem; cursor: pointer;
    transition: all 0.3s;
}
.wb-gala-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,0.35); }
.wb-gala-claim-info { font-size: 0.85rem; color: #cbd5e1; }
.wb-gala-hint { font-size: 0.72rem; color: #64748b; margin-top: 8px; line-height: 1.4; }
.wb-gala-done { color: #4ade80; font-weight: 600; font-size: 0.88rem; text-align: center; padding: 12px; }
.wb-gala-wait, .wb-gala-info { color: #94a3b8; font-size: 0.82rem; text-align: center; padding: 12px; line-height: 1.5; }
/* Slogan */
.wb-gala-slogan {
    font-size: 0.92rem; font-weight: 600; color: var(--gala-accent); text-align: center;
    margin: 6px 0 10px; font-style: italic; letter-spacing: 0.5px;
}
/* Story */
.wb-gala-story {
    background: rgba(0,0,0,0.2); border-radius: 12px; padding: 14px 16px;
    margin: 12px 0; border-left: 3px solid rgba(168,85,247,0.4);
}
.wb-gala-story-text {
    color: #cbd5e1; font-size: 0.82rem; line-height: 1.7; text-indent: 2em;
}
/* Dress Code */
.wb-gala-dresscode {
    text-align: center; font-size: 0.78rem; color: #94a3b8; margin: 10px 0;
    padding: 6px 12px; background: rgba(0,0,0,0.15); border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.08);
}
/* Program */
.wb-gala-program { margin: 14px 0; }
.wb-gala-program-title {
    font-size: 0.85rem; font-weight: 700; color: var(--gala-accent); margin-bottom: 10px;
}
.wb-gala-program-step {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 8px 10px;
    background: rgba(0,0,0,0.12); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.03);
}
.wb-gala-step-num {
    min-width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #a855f7); border-radius: 50%;
    font-size: 0.72rem; font-weight: 800; color: white; flex-shrink: 0;
}
.wb-gala-step-text { color: #cbd5e1; font-size: 0.8rem; line-height: 1.5; }
/* Appeal / Message */
.wb-gala-appeal {
    margin: 12px 0; padding: 12px 16px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.08));
    border: 1px solid rgba(99,102,241,0.12); color: #c4b5fd;
    font-size: 0.82rem; line-height: 1.6; font-style: italic; text-align: center;
}
.wb-gala-appeal-warm {
    background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(16,185,129,0.08));
    border-color: rgba(34,197,94,0.12); color: #86efac;
}
.wb-gala-no-event { text-align: center; padding: 30px 20px; color: #64748b; }
.wb-gala-empty-icon { font-size: 3rem; margin-bottom: 10px; opacity: 0.4; }
/* ── Honor Roll (Canvas Liquid Glass) ── */
.wb-gala-honor-canvas-wrap {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.wb-gala-honor-canvas {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.wb-gala-honor-content {
    position: relative; z-index: 1; padding: 20px;
}
.wb-gala-honor-summary {
    text-align: center; margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wb-gala-honor-total {
    font-size: 2rem; font-weight: 900; color: var(--gala-accent);
    letter-spacing: -1px;
    text-shadow: 0 0 20px rgba(165,180,252,0.2);
}
.wb-gala-honor-total-label {
    font-size: 0.7rem; color: rgba(255,255,255,0.35); text-transform: uppercase;
    letter-spacing: 0.1em; margin-top: 2px;
}
.wb-gala-donor-list { display: flex; flex-direction: column; gap: 4px; }
.wb-gala-donor-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 12px; transition: all 0.25s;
    background: rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.03);
}
.wb-gala-donor-item:hover {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
}
.wb-gala-donor-top1 {
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,180,0,0.04)) !important;
    border-color: rgba(255,215,0,0.15) !important;
}
.wb-gala-donor-top2 {
    background: linear-gradient(135deg, rgba(192,192,192,0.06), rgba(160,160,180,0.03)) !important;
    border-color: rgba(192,192,192,0.12) !important;
}
.wb-gala-donor-top3 {
    background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(180,120,60,0.03)) !important;
    border-color: rgba(205,127,50,0.10) !important;
}
.wb-gala-donor-rank { font-size: 1.2rem; min-width: 30px; text-align: center; }
.wb-gala-donor-num {
    font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.25);
}
.wb-gala-donor-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wb-gala-donor-name { color: #e2e8f0; font-weight: 600; font-size: 0.84rem; }
.wb-gala-donor-time { color: rgba(255,255,255,0.25); font-size: 0.65rem; }
.wb-gala-donor-amount {
    color: var(--gala-accent); font-weight: 800; font-size: 0.9rem;
    text-shadow: 0 0 8px rgba(165,180,252,0.15);
}
/* ── Fund Distribution Info ── */
.wb-gala-distribution-info {
    margin-top: 16px; padding: 16px; border-radius: 14px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.05);
}
.wb-gala-dist-title {
    font-size: 0.82rem; font-weight: 700; color: var(--gala-accent);
    margin-bottom: 12px;
}
.wb-gala-dist-flow {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.wb-gala-dist-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    font-size: 0.7rem; color: rgba(255,255,255,0.5);
}
.wb-gala-dist-icon { font-size: 1.2rem; }
.wb-gala-dist-arrow { color: var(--gala-accent); font-size: 1rem; opacity: 0.4; }
.wb-gala-dist-desc {
    font-size: 0.72rem; color: rgba(255,255,255,0.35); line-height: 1.6;
    text-align: center;
}
/* ── Gala History Gallery (画廊风格) ── */
.wb-gala-history-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.wb-gala-history-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 30px; color: rgba(255,255,255,0.25);
    font-size: 0.82rem; font-style: italic;
}
/* 画廊卡片 — 玻璃发光风格 */
.wb-gala-history-card {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 20px 18px;
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.07);
    min-height: 140px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}
/* 主题色光晕（从玻璃背后透出） */
.wb-gala-history-card::before {
    content: ''; position: absolute; top: -60px; left: -60px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, var(--gh-accent, #6366f1) 0%, transparent 65%);
    opacity: 0.08; transition: all 0.5s;
    pointer-events: none; z-index: 0;
}
/* 右下角第二光源 */
.wb-gala-history-card::after {
    content: ''; position: absolute; bottom: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, var(--gh-glow, #a855f7) 0%, transparent 65%);
    opacity: 0.05; transition: all 0.5s;
    pointer-events: none; z-index: 0;
}
.wb-gala-history-card:hover {
    background: rgba(255,255,255,0.05) !important;
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 30px color-mix(in srgb, var(--gh-glow, #6366f1) 8%, transparent);
}
.wb-gala-history-card:hover::before {
    opacity: 0.15; width: 220px; height: 220px;
}
.wb-gala-history-card:hover::after {
    opacity: 0.1; width: 160px; height: 160px;
}
/* 右上角标签 */
.wb-gala-history-badge {
    position: absolute; top: 12px; right: 12px;
    padding: 3px 10px; border-radius: 20px; font-size: 0.62rem; font-weight: 600;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.08);
}
/* 图标 */
.wb-gala-history-icon {
    font-size: 1.8rem; margin-bottom: 10px;
    filter: drop-shadow(0 0 8px var(--gh-glow, #6366f1));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wb-gala-history-card:hover .wb-gala-history-icon {
    transform: scale(1.25) rotate(8deg);
}
/* 文字内容 */
.wb-gala-history-body { position: relative; z-index: 1; }
.wb-gala-history-name {
    font-size: 0.92rem; font-weight: 700; color: #e2e8f0;
    margin-bottom: 4px; line-height: 1.35;
}
.wb-gala-history-slogan {
    font-size: 0.72rem; color: var(--gh-accent, #a5b4fc);
    font-style: italic; opacity: 0.7; margin-bottom: 8px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.wb-gala-history-meta {
    display: flex; gap: 6px; flex-wrap: wrap;
    font-size: 0.66rem; color: rgba(255,255,255,0.4);
}
.wb-gala-history-meta span {
    background: rgba(255,255,255,0.04); padding: 2px 8px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}
/* 捐赠者头像列 */
.wb-gala-history-donors {
    display: flex; gap: 0; margin-top: 10px;
}
.wb-gala-history-donor-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.08); color: var(--gh-accent, #a5b4fc);
    font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.1);
    margin-left: -6px; position: relative;
    box-shadow: 0 0 6px color-mix(in srgb, var(--gh-glow, #6366f1) 15%, transparent);
}
.wb-gala-history-donor-avatar:first-child { margin-left: 0; }
.wb-gala-history-donor-more {
    font-size: 0.58rem; color: rgba(255,255,255,0.6);
    margin-left: 6px; align-self: center;
}
/* 悬停详情浮层 */
.wb-gala-history-expand {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(8,8,20,0.93);
    backdrop-filter: blur(16px);
    border-radius: 18px; padding: 16px;
    opacity: 0; visibility: hidden;
    transform: scale(0.92);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
}
.wb-gala-history-card:hover .wb-gala-history-expand {
    opacity: 1; visibility: visible; transform: scale(1);
}
.wb-gala-history-expand-title {
    font-size: 0.85rem; font-weight: 700; color: var(--gh-accent, #a5b4fc);
    margin-bottom: 8px;
}
.wb-gala-history-story {
    font-size: 0.74rem; color: rgba(255,255,255,0.6); line-height: 1.8;
    font-style: italic; margin-bottom: 8px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--gh-accent, #a5b4fc);
}
.wb-gala-history-dress {
    font-size: 0.68rem; color: rgba(255,255,255,0.4); margin-bottom: 6px;
}
.wb-gala-history-program {
    display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;
}
.wb-gala-history-prog-item {
    font-size: 0.6rem; padding: 3px 8px; border-radius: 10px;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}
.wb-gala-history-appeal {
    font-size: 0.7rem; color: var(--gh-accent, #a5b4fc);
    font-style: italic; opacity: 0.7; text-align: center;
    padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06);
}
.wb-gala-history-fund-flow {
    margin-top: 8px; padding: 8px 10px; border-radius: 8px;
    background: rgba(0,0,0,0.15);
}
.wb-gala-hf-title {
    font-size: 0.66rem; font-weight: 600; color: var(--gh-accent, #a5b4fc);
    margin-bottom: 4px;
}
.wb-gala-hf-steps {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 0.62rem; color: rgba(255,255,255,0.4);
}
.wb-gala-hf-recipients {
    display: flex; flex-direction: column; gap: 3px;
}
.wb-gala-hf-person {
    font-size: 0.65rem; color: rgba(255,255,255,0.5);
    padding: 2px 8px; border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.wb-gala-hf-remaining {
    font-size: 0.64rem; color: rgba(255,255,255,0.35);
    margin-top: 4px; font-style: italic;
}
@media (max-width: 600px) {
    .wb-gala-history-gallery { grid-template-columns: 1fr; }
}
/* ─── Gala Concierge Chat ─── */
.wb-gala-chat-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 0;
    background: linear-gradient(135deg, var(--gala-bg1), var(--gala-bg2));
    border-radius: 14px 14px 0 0; border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
    transition: background 0.5s;
}
.wb-gala-concierge-avatar { font-size: 2rem; }
.wb-gala-concierge-name { font-size: 0.92rem; font-weight: 700; color: var(--gala-accent); }
.wb-gala-concierge-status { font-size: 0.72rem; color: var(--gala-glow); }
.wb-gala-chat-log {
    min-height: 180px; max-height: 380px; overflow-y: auto;
    padding: 16px; display: flex; flex-direction: column; gap: 12px;
    background: rgba(0,0,0,0.2); border-left: 1px solid rgba(99,102,241,0.12);
    border-right: 1px solid rgba(99,102,241,0.12);
}
.wb-gala-chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.wb-gala-chat-concierge { flex-direction: row; }
.wb-gala-chat-guest { flex-direction: row-reverse; }
.wb-gala-chat-avatar { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.wb-gala-chat-bubble {
    max-width: 80%; padding: 10px 14px; border-radius: 14px;
    font-size: 0.84rem; line-height: 1.6; word-break: break-word;
}
.wb-gala-chat-concierge .wb-gala-chat-bubble {
    background: rgba(99,102,241,0.1); color: #e2e8f0;
    border: 1px solid rgba(99,102,241,0.15); border-bottom-left-radius: 4px;
}
.wb-gala-chat-guest .wb-gala-chat-bubble {
    background: rgba(168,85,247,0.12); color: #e2e8f0;
    border: 1px solid rgba(168,85,247,0.15); border-bottom-right-radius: 4px;
}
.wb-gala-chat-input-row {
    display: flex; gap: 8px; padding: 12px 16px;
    background: rgba(0,0,0,0.15); border-radius: 0 0 14px 14px;
    border: 1px solid rgba(99,102,241,0.12); border-top: none;
}
.wb-gala-chat-input {
    flex: 1; padding: 10px 14px; border-radius: 10px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(99,102,241,0.15);
    color: #e2e8f0; font-size: 0.85rem; outline: none;
}
.wb-gala-chat-input:focus { border-color: rgba(99,102,241,0.4); }
.wb-gala-chat-send {
    width: 42px; height: 42px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #6366f1, #a855f7); color: white;
    font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
}
.wb-gala-chat-send:hover { transform: scale(1.08); }
.wb-gala-thinking .wb-gala-chat-bubble { opacity: 0.6; }
.wb-spinner-sm {
    width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.15);
    border-top-color: #818cf8; border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* ─── Token Exchange ─── */
.wb-token-overview {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between;
    margin-bottom: 14px; padding: 12px 14px; border-radius: 14px;
    background: rgba(15,15,30,0.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(99,102,241,0.08);
    transition: border-color 0.3s;
}
.wb-token-overview:hover { border-color: rgba(99,102,241,0.18); }
.wb-token-stat { display: flex; flex-direction: column; align-items: center; min-width: 70px; flex: 1; }
.wb-token-stat-val { font-size: 1.1rem; font-weight: 700; color: #e2e8f0; font-variant-numeric: tabular-nums; }
.wb-token-stat-label { font-size: 0.68rem; color: #64748b; margin-top: 2px; letter-spacing: 0.3px; }
.wb-token-chart-wrap {
    background: rgba(15,15,30,0.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(99,102,241,0.08);
    border-radius: 14px; padding: 10px; height: 260px; margin-bottom: 12px;
    transition: border-color 0.3s;
}
.wb-token-chart-wrap:hover { border-color: rgba(99,102,241,0.18); }
.wb-token-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.wb-token-price { display: flex; flex-direction: column; }
.wb-tp-label { font-size: 0.72rem; color: #64748b; }
.wb-tp-val {
    font-size: 1.2rem; font-weight: 700; color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    transition: color 0.6s ease;
    display: inline-block;
    perspective: 400px;
}
/* 翻牌动画 — 经典交易所数据牌效果 */
.wb-tp-val.wb-flip-up {
    animation: wbFlipUp 0.6s ease-out;
}
.wb-tp-val.wb-flip-down {
    animation: wbFlipDown 0.6s ease-out;
}
@keyframes wbFlipUp {
    0%   { transform: rotateX(0deg); opacity: 1; }
    40%  { transform: rotateX(-90deg); opacity: 0; }
    60%  { transform: rotateX(90deg); opacity: 0; }
    100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes wbFlipDown {
    0%   { transform: rotateX(0deg); opacity: 1; }
    40%  { transform: rotateX(90deg); opacity: 0; }
    60%  { transform: rotateX(-90deg); opacity: 0; }
    100% { transform: rotateX(0deg); opacity: 1; }
}
/* ── 买卖价显示 (Glassmorphism) ── */
.wb-token-bidask {
    display: flex; gap: 8px; justify-content: center; margin: 8px 0;
    font-size: 0.82rem; font-weight: 600;
}
.wb-token-bidask span {
    padding: 5px 14px; border-radius: 8px;
    background: rgba(15,15,30,0.7); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
    text-shadow: 0 0 10px currentColor;
    transition: all 0.3s ease;
}
.wb-token-bidask span:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}
.wb-token-change {
    font-size: 0.88rem; font-weight: 700;
    transition: color 0.3s ease;
}

/* ── API统计条 ── */
.wb-token-api-stats {
    display: flex; gap: 6px; justify-content: center; margin-top: 8px;
    font-size: 0.72rem; color: #64748b; flex-wrap: wrap;
}
.wb-token-api-stats span {
    background: rgba(99,102,241,0.06); padding: 3px 8px; border-radius: 6px;
    border: 1px solid rgba(99,102,241,0.08); transition: all 0.2s;
}
.wb-token-api-stats span:hover { background: rgba(99,102,241,0.12); color: #94a3b8; }

/* ── 现货交易区 ── */
.wb-token-actions {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.wb-token-actions-btns {
    display: flex; gap: 10px; width: 100%; margin-top: 10px;
}
.wb-token-actions .wb-input {
    width: 80px; padding: 7px 10px;
    background: rgba(15,15,30,0.5); border: 1px solid rgba(99,102,241,0.15);
    border-radius: 8px; color: #e2e8f0; font-size: 0.85rem; outline: none;
}

/* ── 通用交易按钮基础 ── */
.wb-btn-buy, .wb-btn-sell,
.wb-btn-long, .wb-btn-short,
.wb-btn-call, .wb-btn-put {
    flex: 1; padding: 10px 0; border: none; border-radius: 10px; color: #fff;
    font-weight: 700; font-size: 0.9rem; cursor: pointer; position: relative;
    overflow: hidden; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    letter-spacing: 0.3px; text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.wb-btn-buy::after, .wb-btn-sell::after,
.wb-btn-long::after, .wb-btn-short::after,
.wb-btn-call::after, .wb-btn-put::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transition: left 0.6s ease;
}
.wb-btn-buy:hover::after, .wb-btn-sell:hover::after,
.wb-btn-long:hover::after, .wb-btn-short:hover::after,
.wb-btn-call:hover::after, .wb-btn-put:hover::after { left: 100%; }
.wb-btn-buy:active, .wb-btn-sell:active,
.wb-btn-long:active, .wb-btn-short:active,
.wb-btn-call:active, .wb-btn-put:active {
    transform: scale(0.97); transition-duration: 0.1s;
}

/* 买入/卖出 */
.wb-btn-buy {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 10px rgba(34,197,94,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-btn-sell {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 10px rgba(239,68,68,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-btn-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,197,94,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.1);
}
.wb-btn-sell:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.1);
}
.wb-transfer-form { flex-direction: column; align-items: stretch; }
.wb-user-results {
    max-height: 140px; overflow-y: auto; border-radius: 8px;
    background: rgba(15,15,30,0.5); border: 1px solid rgba(99,102,241,0.12);
}
.wb-user-results:empty { display: none; }
.wb-user-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    cursor: pointer; font-size: 0.82rem; color: #cbd5e1;
    transition: background 0.15s; border-bottom: 1px solid rgba(99,102,241,0.06);
}
.wb-user-item:hover { background: rgba(99,102,241,0.12); }
.wb-user-item:last-child { border-bottom: none; }
.wb-user-role {
    font-size: 0.68rem; color: #94a3b8; background: rgba(99,102,241,0.12);
    padding: 1px 6px; border-radius: 4px; margin-left: auto;
}
.wb-user-selected {
    padding: 8px 12px; font-size: 0.82rem; color: #22c55e;
    background: rgba(34,197,94,0.08); border-radius: 8px; font-weight: 600;
}
.wb-user-empty {
    padding: 10px 12px; font-size: 0.78rem; color: #64748b; text-align: center;
}

/* ══ §18.10 衍生品 & 期权交易 UI ══ */

/* ── 交易模式标签切换 (现货/合约/期权) ── */
.wb-trade-tabs {
    display: flex; gap: 4px; margin: 0 0 16px 0; padding: 3px;
    border-radius: 12px; overflow: hidden;
    background: rgba(15,15,30,0.8); border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
}
.wb-trade-tab {
    flex: 1; padding: 9px 0; text-align: center; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    color: #6b7280; border: none; background: transparent;
    position: relative; border-radius: 9px; z-index: 1;
}
.wb-trade-tab:hover { color: #d1d5db; }
.wb-trade-tab.wb-trade-tab-active {
    color: #f5f5f5;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    box-shadow: 0 2px 10px rgba(99,102,241,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.wb-trade-panel { display: none; animation: wb-panel-enter 0.4s cubic-bezier(0.4,0,0.2,1); }
.wb-trade-panel.active { display: block; }

@keyframes wb-panel-enter {
    0% { opacity: 0; transform: translateY(8px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 衍生品 - 合约面板 ── */
.wb-deriv-section {
    margin-top: 12px; padding: 14px; border-radius: 14px;
    background: rgba(15,15,30,0.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(245,158,11,0.1);
    transition: border-color 0.3s;
}
.wb-deriv-section:hover { border-color: rgba(245,158,11,0.2); }

/* 合约类型 & 杠杆选择器 — 胶囊pill样式 */
.wb-deriv-type-row, .wb-deriv-lev-row {
    display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; align-items: center;
}
.wb-deriv-type-btn {
    padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(245,158,11,0.15);
    background: rgba(245,158,11,0.04); color: #9ca3af; cursor: pointer; font-size: 0.8rem;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1); font-weight: 500;
}
.wb-deriv-type-btn:hover { color: #fbbf24; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.wb-deriv-type-btn.wb-deriv-type-active {
    background: rgba(245,158,11,0.15); color: #fbbf24; border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245,158,11,0.15);
    text-shadow: 0 0 8px rgba(245,158,11,0.4);
}

.wb-lev-btn {
    padding: 5px 14px; border-radius: 20px; border: 1px solid #374151;
    background: transparent; color: #9ca3af; cursor: pointer; font-weight: 700;
    font-size: 0.85rem; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    min-width: 46px; text-align: center;
}
.wb-lev-btn:hover { color: #fbbf24; border-color: rgba(245,158,11,0.4); transform: translateY(-1px); }
.wb-lev-btn.wb-lev-active {
    background: rgba(245,158,11,0.12); color: #fbbf24; border-color: #f59e0b;
    box-shadow: 0 0 14px rgba(245,158,11,0.2);
    text-shadow: 0 0 8px rgba(245,158,11,0.4);
}

/* ── 做多/做空 ── */
.wb-btn-long {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 10px rgba(34,197,94,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-btn-short {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 10px rgba(239,68,68,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-btn-long:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,197,94,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.1);
}
.wb-btn-short:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.1);
}

/* ── 持仓卡片 ── */
.wb-pos-card {
    background: rgba(15,15,30,0.6); border-radius: 12px; padding: 10px 14px; margin: 6px 0;
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); animation: wb-pos-enter 0.4s ease;
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.04);
}
.wb-pos-card:hover { background: rgba(30,30,50,0.8); transform: translateX(3px); border-color: rgba(255,255,255,0.08); }
.wb-pos-card.pos-long { border-left: 3px solid #22c55e; }
.wb-pos-card.pos-short { border-left: 3px solid #ef4444; }
.wb-pos-card.pos-call { border-left: 3px solid #3b82f6; }
.wb-pos-card.pos-put { border-left: 3px solid #a855f7; }

@keyframes wb-pos-enter {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.wb-pos-pnl { font-weight: 700; font-variant-numeric: tabular-nums; }
.wb-pos-pnl.pnl-positive { color: #22c55e; }
.wb-pos-pnl.pnl-negative { color: #ef4444; }

.wb-pos-close-btn {
    padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: #9ca3af; cursor: pointer; font-size: 0.78rem;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.wb-pos-close-btn:hover {
    background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); color: #f87171;
    box-shadow: 0 0 10px rgba(239,68,68,0.15);
}

/* ── 保证金预览 ── */
.wb-deriv-preview {
    display: flex; gap: 8px; align-items: center; margin: 8px 0;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(15,15,30,0.5); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.04);
    font-size: 0.8rem; color: #94a3b8;
}
.wb-deriv-preview b { color: #e2e8f0; }

/* ── 期权交易面板 ── */
.wb-option-section {
    margin-top: 12px; padding: 14px; border-radius: 14px;
    background: rgba(15,15,30,0.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(99,102,241,0.1);
    transition: border-color 0.3s;
}
.wb-option-section:hover { border-color: rgba(99,102,241,0.2); }

/* 二元/标准期权切换 */
.wb-option-mode-row {
    display: flex; gap: 4px; margin: 8px 0; padding: 3px;
    border-radius: 12px; overflow: hidden;
    background: rgba(15,15,30,0.6); border: 1px solid rgba(99,102,241,0.1);
}
.wb-option-mode-btn, .wb-opt-mode-btn {
    flex: 1; padding: 7px 0; text-align: center; font-size: 0.83rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    color: #6b7280; background: transparent; border: none; border-radius: 9px;
}
.wb-option-mode-btn:hover, .wb-opt-mode-btn:hover { color: #d1d5db; }
.wb-option-mode-btn.active.mode-binary, .wb-opt-mode-btn.wb-opt-mode-active:first-child {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.08));
    color: #fbbf24; box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}
.wb-option-mode-btn.active.mode-standard, .wb-opt-mode-btn.wb-opt-mode-active:last-child {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    color: #a5b4fc; box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}

/* 二元期权行 */
.wb-binary-row { display: flex; gap: 10px; margin: 10px 0; }

/* ── Call/Put 按钮 ── */
.wb-btn-call {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 10px rgba(59,130,246,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-btn-put {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 2px 10px rgba(168,85,247,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wb-btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.1);
}
.wb-btn-put:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168,85,247,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    filter: brightness(1.1);
}

/* 期权到期倒计时进度条 */
.wb-option-timer {
    height: 3px; border-radius: 3px; background: rgba(255,255,255,0.05); overflow: hidden;
    margin: 4px 0;
}
.wb-option-timer-fill {
    height: 100%; border-radius: 3px; transition: width 1s linear;
    background: linear-gradient(90deg, #4ade80, #fbbf24, #f87171);
    box-shadow: 0 0 6px rgba(251,191,36,0.3);
}

/* 行权价选择 — pill按钮 */
.wb-strike-row { display: flex; gap: 5px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.wb-strike-btn {
    padding: 5px 11px; border-radius: 20px; border: 1px solid rgba(99,102,241,0.15);
    background: rgba(99,102,241,0.04); color: #9ca3af; cursor: pointer; font-size: 0.8rem;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1); font-variant-numeric: tabular-nums;
}
.wb-strike-btn:hover { border-color: rgba(129,140,248,0.5); color: #a5b4fc; background: rgba(99,102,241,0.08); }
.wb-strike-btn.wb-strike-active {
    background: rgba(99,102,241,0.15); border-color: #818cf8; color: #c4b5fd;
    box-shadow: 0 0 12px rgba(99,102,241,0.2);
    text-shadow: 0 0 6px rgba(99,102,241,0.3);
}
.wb-strike-btn.wb-strike-itm-call { border-color: rgba(34,197,94,0.25); }
.wb-strike-btn.wb-strike-itm-call:hover { border-color: rgba(34,197,94,0.5); color: #4ade80; }
.wb-strike-btn.wb-strike-itm-put { border-color: rgba(239,68,68,0.25); }
.wb-strike-btn.wb-strike-itm-put:hover { border-color: rgba(239,68,68,0.5); color: #f87171; }

/* 权利金显示 — glass card */
.wb-premium-display {
    padding: 8px 16px; border-radius: 10px; margin: 8px 0;
    background: rgba(15,15,30,0.7); backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.1);
    display: flex; justify-content: center; gap: 20px; align-items: center;
    font-size: 0.83rem; font-weight: 600;
}
.wb-premium-display span {
    text-shadow: 0 0 10px currentColor;
}

/* 资金费率指示器 */
.wb-funding-rate {
    font-size: 0.75rem; color: #64748b; margin: 6px 0;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(15,15,30,0.4); border: 1px solid rgba(255,255,255,0.04);
}
.wb-funding-rate .rate-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-funding-rate .rate-positive { color: #f87171; text-shadow: 0 0 6px rgba(239,68,68,0.3); }
.wb-funding-rate .rate-negative { color: #4ade80; text-shadow: 0 0 6px rgba(34,197,94,0.3); }

/* ── 胶囊数字输入框 ── */
.wb-capsule {
    display: inline-flex; align-items: center; border-radius: 12px; overflow: hidden;
    background: rgba(15,15,30,0.7); backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}
.wb-capsule:hover {
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 2px 12px rgba(99,102,241,0.1);
}
.wb-capsule:focus-within {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1), 0 2px 12px rgba(99,102,241,0.15);
}
.wb-capsule-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: #6b7280; cursor: pointer;
    font-size: 0.95rem; font-weight: 700; transition: all 0.2s; user-select: none;
    flex-shrink: 0;
}
.wb-capsule-btn:hover { color: #a5b4fc; background: rgba(99,102,241,0.12); }
.wb-capsule-btn:active { color: #818cf8; transform: scale(0.85); }
.wb-capsule-btn.wb-capsule-minus { border-radius: 12px 0 0 12px; }
.wb-capsule-btn.wb-capsule-plus { border-radius: 0 12px 12px 0; }
.wb-capsule input[type="number"] {
    width: 48px; padding: 5px 2px; text-align: center; border: none; outline: none;
    background: transparent; color: #f1f5f9; font-size: 0.88rem; font-weight: 600;
    font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.wb-capsule input[type="number"]::-webkit-inner-spin-button,
.wb-capsule input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
.wb-capsule-label {
    padding: 0 8px 0 2px; color: #6b7280; font-size: 0.7rem; font-weight: 500;
    white-space: nowrap; flex-shrink: 0;
}
/* 大号胶囊 (下注金额等) */
.wb-capsule-lg { height: 38px; }
.wb-capsule-lg .wb-capsule-btn { width: 36px; height: 36px; font-size: 1.05rem; }
.wb-capsule-lg input[type="number"] { width: 64px; font-size: 0.95rem; }
/* 快捷金额按钮 */
.wb-capsule-presets {
    display: flex; gap: 4px; margin-left: 6px;
}
.wb-capsule-preset-btn {
    padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(99,102,241,0.1);
    background: rgba(99,102,241,0.05); color: #9ca3af; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
}
.wb-capsule-preset-btn:hover {
    background: rgba(99,102,241,0.12); color: #c4b5fd; border-color: rgba(99,102,241,0.25);
    transform: translateY(-1px);
}

/* ── 追加的布局类 ── */
.wb-lev-row {
    display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; align-items: center;
}
.wb-lev-label {
    color: #64748b; font-size: 0.78rem; margin-right: 4px; font-weight: 500;
    letter-spacing: 0.3px;
}
.wb-deriv-qty-row {
    display: flex; gap: 8px; align-items: center; margin: 8px 0;
}
.wb-deriv-qty-input { width: 80px; }
.wb-deriv-preview-text { color: #94a3b8; font-size: 0.82rem; }
.wb-deriv-action-row {
    display: flex; gap: 10px; margin: 12px 0;
}
.wb-pos-list { margin-top: 12px; }
.wb-pos-header {
    color: #d1d5db; font-size: 0.9em; font-weight: bold; margin-bottom: 6px;
}
.wb-pos-card {
    border-left: 3px solid #6b7280;
    flex-wrap: wrap; position: relative;
}
.wb-pos-info { flex: 1; min-width: 0; }
.wb-pos-right { display: flex; align-items: center; gap: 8px; }
.wb-pos-detail { color: #d1d5db; }
.wb-pos-entry { color: #6b7280; }
.wb-pos-type { color: #6b7280; font-size: 0.8em; }
.wb-pos-pnl { text-align: right; }
.wb-btn-close-pos {
    padding: 5px 10px; border-radius: 6px; border: 1px solid #4b5563;
    background: transparent; color: #d1d5db; cursor: pointer; font-size: 0.8em;
    transition: all 0.2s;
}
.wb-btn-close-pos:hover {
    background: rgba(239,68,68,0.15); border-color: #ef4444; color: #ef4444;
}
.wb-deriv-warning {
    color: #64748b; font-size: 0.72rem; margin-top: 10px;
    padding: 6px 12px; border-radius: 8px;
    background: rgba(15,15,30,0.3); border: 1px solid rgba(255,255,255,0.03);
    line-height: 1.5;
}
.wb-pos-winning { box-shadow: 0 0 14px rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.15); }
.wb-pos-losing { box-shadow: 0 0 14px rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.1); }

/* ── 期权模式切换 ── */
.wb-opt-mode-tabs {
    display: flex; gap: 0; margin: 8px 0; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(59,130,246,0.2);
}
.wb-opt-mode-btn {
    flex: 1; padding: 8px 0; text-align: center; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s; color: #6b7280; background: transparent; border: none;
}
.wb-opt-mode-btn:hover { color: #d1d5db; }
.wb-opt-mode-btn.wb-opt-mode-active {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(168,85,247,0.1));
    color: #818cf8;
}
.wb-opt-expiry-row {
    display: flex; gap: 5px; margin: 8px 0; align-items: center; flex-wrap: wrap;
}
.wb-opt-expiry-btn {
    padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(99,102,241,0.12);
    background: rgba(99,102,241,0.04); color: #9ca3af; cursor: pointer; font-size: 0.8rem;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.wb-opt-expiry-btn:hover { color: #a5b4fc; border-color: rgba(129,140,248,0.4); background: rgba(99,102,241,0.08); }
.wb-opt-expiry-btn.wb-opt-expiry-active {
    background: rgba(99,102,241,0.15); color: #c4b5fd; border-color: #818cf8;
    box-shadow: 0 0 12px rgba(99,102,241,0.2);
    text-shadow: 0 0 6px rgba(99,102,241,0.3);
}
.wb-binary-desc {
    color: #64748b; font-size: 0.78rem; margin: 6px 0 10px; line-height: 1.5;
}
.wb-binary-input-row {
    display: flex; gap: 8px; align-items: center; margin: 8px 0;
}
.wb-opt-amt-input { width: 120px; }
.wb-binary-payout {
    color: #f59e0b; font-weight: 600; font-size: 0.9em;
}
.wb-binary-action-row, .wb-std-opt-action-row {
    display: flex; gap: 10px; margin: 12px 0;
}
.wb-std-opt-row {
    display: flex; gap: 8px; align-items: center; margin: 8px 0;
}
.wb-opt-qty-input { width: 80px; }

/* ── 通用交互动画 ── */
@keyframes wb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
@keyframes wb-liquidation-flash {
    0% { background: rgba(239,68,68,0.3); }
    50% { background: rgba(239,68,68,0); }
    100% { background: rgba(239,68,68,0.3); }
}
@keyframes wb-profit-glow {
    0% { box-shadow: 0 0 0 rgba(34,197,94,0); }
    50% { box-shadow: 0 0 20px rgba(34,197,94,0.3); }
    100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
}
.wb-pos-card.liquidating { animation: wb-liquidation-flash 0.5s ease 3; }
.wb-pos-card.profiting { animation: wb-profit-glow 1s ease; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .wb-hero-title { font-size: 1.3rem; }
    .wb-bank-grid { grid-template-columns: repeat(2, 1fr); }
    .wb-wallet-stats { grid-template-columns: repeat(2, 1fr); }
    .wb-balance-num { font-size: 2.2rem; }
    .wb-price-header, .wb-price-row { grid-template-columns: 1.5fr 1fr 1fr 0.8fr; font-size: 0.75rem; }
    .wb-confirm-modal { padding: 20px; }
    .wb-dist-grid { gap: 4px; }
    .wb-dist-label { font-size: 0.6rem; }
    .wb-tab-btn { font-size: 0.85rem; padding: 10px 12px; }
    .wb-council-goals { grid-template-columns: 1fr; }
    .wb-struct-node { max-width: 100%; }
    .wb-workflow { gap: 2px; }
    .wb-wf-step { min-width: 56px; padding: 6px 4px; }
    .wb-wf-label { font-size: 0.58rem; }
    .wb-bank-services { grid-template-columns: 1fr; }
    .wb-svc-val { font-size: 1.2rem; }
    .wb-svc-actions { flex-direction: column; }
    .wb-svc-input { min-width: unset; }
}

/* ══════════════════════════════════════════════════════════════
   用户喜好模式 (Preference Mode) 样式
   ══════════════════════════════════════════════════════════════ */

/* 喜好排序按钮 — 默认状态 (画像构建中) */
.sort-btn-preference,
.prompt-sort-btn-preference {
    position: relative;
}

.sort-btn-preference.pref-building,
.prompt-sort-btn-preference.pref-building {
    opacity: 0.6;
}

.sort-btn-preference.pref-building::after,
.prompt-sort-btn-preference.pref-building::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: #f7b731;
    border-radius: 50%;
    animation: pref-pulse 2s infinite;
}

/* 画像完成 — 红心闪烁 */
.sort-btn-preference.pref-ready,
.prompt-sort-btn-preference.pref-ready {
    color: #ff6b81 !important;
    border-color: rgba(255, 107, 129, 0.3) !important;
}

.sort-btn-preference.pref-ready::after,
.prompt-sort-btn-preference.pref-ready::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: #ff6b81;
    border-radius: 50%;
    animation: pref-pulse 1.5s infinite;
}

/* 激活状态 */
.sort-btn-dark.sort-btn-preference.active,
.prompt-sort-btn.prompt-sort-btn-preference.active {
    background: linear-gradient(135deg, rgba(255,107,129,0.2), rgba(255,71,87,0.15)) !important;
    color: #ff6b81 !important;
    border-color: rgba(255, 107, 129, 0.4) !important;
    box-shadow: 0 0 12px rgba(255, 107, 129, 0.2);
}

@keyframes pref-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

/* 喜好模式横幅 */
.preference-banner {
    background: linear-gradient(135deg, rgba(255,107,129,0.08), rgba(255,71,87,0.05));
    border: 1px solid rgba(255, 107, 129, 0.15);
    border-radius: 12px;
    padding: 10px 16px;
    margin: 8px 0 12px;
    backdrop-filter: blur(8px);
}

.pref-banner-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pref-banner-icon {
    font-size: 18px;
    animation: pref-heartbeat 1.5s ease-in-out infinite;
}

@keyframes pref-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    56% { transform: scale(1); }
}

.pref-banner-text {
    color: #ff6b81;
    font-size: 13px;
    font-weight: 600;
}

.pref-banner-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.pref-tag {
    background: rgba(255, 107, 129, 0.12);
    color: #ff8fa0;
    border: 1px solid rgba(255, 107, 129, 0.2);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    white-space: nowrap;
}

/* 喜好模式下的帖子卡片 — 匹配度高的帖子微妙高亮 */
.forum-card[data-preference-mode="true"] {
    border-left: 2px solid rgba(255, 107, 129, 0.3);
}

/* 喜好进度弹窗内的进度条 */
.pref-progress-bar {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    height: 20px;
    margin: 0 0 12px;
    overflow: hidden;
    position: relative;
}

.pref-progress-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease;
}

.pref-progress-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: #fff;
    font-weight: 600;
}

/* 移动端适配 */
@media (max-width: 600px) {
    .preference-banner {
        padding: 8px 12px;
        margin: 6px 0 10px;
    }
    .pref-banner-tags {
        margin-left: 0;
        margin-top: 6px;
    }
    .pref-banner-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════
   计量经济学圣殿 — Econometrics Temple v2
   精灵引导 · 隐藏房间 · 沉浸式体验
   ══════════════════════════════════════════════════════════════ */

.et-container {
    --glow-r: 99; --glow-g: 102; --glow-b: 241;
    position: relative; z-index: 1;
    max-width: 900px; margin: 0 auto;
    padding: 12px 0;
}

/* ── Mayan decoration canvas ── */
.et-maya-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Chat glass panel (centered, narrower than canvas) ── */
.et-hall {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    border: 1px solid rgba(var(--glow-r),var(--glow-g),var(--glow-b),0.08);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color 1.5s ease, box-shadow 1.5s ease;
}

/* ── Room transitions ── */
.et-room-exit { animation: etFadeOut 0.3s ease forwards; }
.et-room-enter { animation: etFadeIn 0.6s ease forwards; }
@keyframes etFadeOut { to { opacity: 0; transform: scale(0.97); } }
@keyframes etFadeIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

/* ═══════════════════════════════════════
   主殿 — Main Hall Chat
   ═══════════════════════════════════════ */

/* ── Top bar (matches gala chat-header) ── */
.et-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
    border-radius: 18px 18px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.et-topbar-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    filter: drop-shadow(0 0 8px rgba(99,102,241,0.4));
    flex-shrink: 0;
}
.et-topbar-info { flex: 1; }
.et-topbar-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
}
.et-topbar-sub {
    font-size: 0.68rem;
    color: rgba(165,180,252,0.55);
    margin-top: 1px;
}

/* ── Chat area (matches gala chat-log) ── */
.et-chat-area {
    overflow-y: auto;
    max-height: 420px;
    padding: 14px 16px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0,0,0,0.15);
    border-left: 1px solid rgba(99,102,241,0.1);
    border-right: 1px solid rgba(99,102,241,0.1);
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.12) transparent;
}
.et-chat-area::-webkit-scrollbar { width: 4px; }
.et-chat-area::-webkit-scrollbar-track { background: transparent; }
.et-chat-area::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.18);
    border-radius: 2px;
}

/* ── Messages (matches gala chat-bubble) ── */
.et-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: etMsgIn 0.3s ease;
}
@keyframes etMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.et-msg-spirit { justify-content: flex-start; }
.et-msg-user   { justify-content: flex-end; }
.et-msg-avatar {
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.et-msg-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.6;
    word-break: break-word;
}
.et-msg-spirit-bubble {
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.15);
    color: #e2e8f0;
    border-bottom-left-radius: 4px;
}
.et-msg-spirit-bubble strong { color: #a5b4fc; }
.et-msg-spirit-bubble em { color: rgba(165,180,252,0.5); font-style: italic; }
.et-msg-user-bubble {
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.15);
    color: #e2e8f0;
    border-bottom-right-radius: 4px;
}

/* ── Typing dots ── */
.et-typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px 14px;
}
.et-typing span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(165,180,252,0.6);
    animation: etTypeDot 1.4s ease-in-out infinite;
}
.et-typing span:nth-child(2) { animation-delay: 0.2s; }
.et-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes etTypeDot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* ── Chips ── */
.et-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 16px 6px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.15);
    border-left: 1px solid rgba(99,102,241,0.1);
    border-right: 1px solid rgba(99,102,241,0.1);
}
.et-chip {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
    color: rgba(165,180,252,0.7);
    font-size: 0.74rem;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: etChipIn 0.4s ease backwards;
}
.et-chip:nth-child(2) { animation-delay: 0.08s; }
.et-chip:nth-child(3) { animation-delay: 0.16s; }
.et-chip:nth-child(4) { animation-delay: 0.24s; }
@keyframes etChipIn {
    from { opacity: 0; transform: translateY(6px); }
}
.et-chip:hover {
    border-color: rgba(99,102,241,0.25);
    background: rgba(99,102,241,0.1);
    color: #c4b5fd;
}

/* ── Input bar (matches gala chat-input-row) ── */
.et-inputbar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.15);
    border-radius: 0 0 18px 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-left: 1px solid rgba(99,102,241,0.1);
    border-right: 1px solid rgba(99,102,241,0.1);
    border-bottom: 1px solid rgba(99,102,241,0.1);
}
.et-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(99,102,241,0.15);
    background: rgba(0,0,0,0.3);
    color: #e2e8f0;
    font-size: 0.84rem;
    outline: none;
    transition: border-color 0.2s;
}
.et-input::placeholder { color: rgba(255,255,255,0.2); }
.et-input:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 12px rgba(99,102,241,0.12);
}
.et-sendbtn {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.et-sendbtn:hover { transform: scale(1.08); }
.et-sendbtn svg { display: block; }

/* ═══════════════════════════════════════
   通用房间样式
   ═══════════════════════════════════════ */
.et-room {
    padding: 20px 16px 16px;
    max-width: 760px;
    margin: 0 auto;
}
.et-room-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(96,165,250,0.06);
}
.et-back-btn {
    padding: 7px 16px; border-radius: 20px;
    border: 1px solid rgba(96,165,250,0.12);
    background: linear-gradient(135deg, rgba(15,23,50,0.4), rgba(25,30,60,0.3));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: rgba(150,170,200,0.6); font-size: 0.8rem;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.et-back-btn:hover {
    border-color: rgba(96,165,250,0.35);
    color: #8bb8f8;
    box-shadow: 0 0 12px rgba(96,165,250,0.1);
}
.et-room-title {
    font-size: 1.3rem; font-weight: 600; color: rgba(220,230,245,0.85);
    letter-spacing: 2px;
    text-shadow: 0 0 16px rgba(96,165,250,0.15);
}
.et-room-loading {
    text-align: center; padding: 60px 0;
    color: #64748b; font-size: 0.95rem;
    animation: et-pulse-text 2s ease-in-out infinite;
}
@keyframes et-pulse-text {
    0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
}
.et-room-empty {
    text-align: center; padding: 60px 0;
    color: #475569; font-size: 1rem; font-style: italic;
}

/* ═══════════════════════════════════════
   模型研发科 — Model R&D (Shrine)
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   科长卡片 — Officer Card
   ═══════════════════════════════════════ */
.et-officer-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; margin-bottom: 18px;
    background: rgba(96, 165, 250, 0.06);
    border: 1px solid rgba(96, 165, 250, 0.12);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    position: relative; overflow: hidden;
}
.et-officer-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), transparent);
}
.et-officer-avatar {
    font-size: 2rem; flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(96, 165, 250, 0.08);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.15);
}
.et-officer-info { flex: 1; min-width: 0; }
.et-officer-name {
    font-size: 1.05rem; font-weight: 600;
    color: #e2e8f0; letter-spacing: 0.5px;
}
.et-officer-title {
    font-size: 0.8rem; color: #8bb8f8;
    margin-top: 2px; opacity: 0.8;
}
.et-officer-personality {
    font-size: 0.75rem; color: #64748b;
    margin-top: 4px; font-style: italic;
}

/* ═══════════════════════════════════════
   钱副厅长批示条 — Qian's Remark
   ═══════════════════════════════════════ */
.et-qian-remark {
    margin-top: 18px; padding: 12px 16px;
    background: rgba(251, 146, 60, 0.05);
    border: 1px solid rgba(251, 146, 60, 0.15);
    border-left: 3px solid rgba(251, 146, 60, 0.5);
    border-radius: 8px;
    position: relative;
}
.et-qian-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.et-qian-avatar { font-size: 1.2rem; }
.et-qian-name {
    font-size: 0.82rem; font-weight: 600;
    color: #fb923c;
}
.et-qian-badge {
    font-size: 0.65rem; padding: 1px 6px;
    background: rgba(251, 146, 60, 0.12);
    color: rgba(251, 146, 60, 0.7);
    border: 1px solid rgba(251, 146, 60, 0.15);
    border-radius: 4px; letter-spacing: 1px;
}
.et-qian-text {
    font-size: 0.82rem; color: #94a3b8;
    line-height: 1.5; font-style: italic;
}

/* ═══════════════════════════════════════
   科室对话区 — Officer Chat
   ═══════════════════════════════════════ */
.et-officer-chat {
    margin-top: 24px;
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(96,165,250,0.1);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
}
.et-officer-chat-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(96,165,250,0.06);
}
.et-officer-chat-avatar { font-size: 1.3rem; }
.et-officer-chat-name {
    font-size: 0.85rem; font-weight: 600; color: #8bb8f8;
}
.et-officer-chat-status {
    font-size: 0.7rem; color: #34d399; margin-left: auto;
}
.et-officer-chat-log {
    max-height: 260px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 10px; padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(96,165,250,0.12) transparent;
}
.et-officer-chat-log::-webkit-scrollbar { width: 4px; }
.et-officer-chat-log::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.15); border-radius: 2px; }
.et-ochat-msg { display: flex; gap: 8px; align-items: flex-start; }
.et-ochat-msg-officer { justify-content: flex-start; }
.et-ochat-msg-user { justify-content: flex-end; }
.et-ochat-bubble {
    max-width: 85%; padding: 8px 12px;
    border-radius: 12px; font-size: 0.82rem;
    line-height: 1.5;
}
.et-ochat-officer-bubble {
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.1);
    color: #cbd5e1;
}
.et-ochat-officer-bubble strong { color: #8bb8f8; }
.et-ochat-officer-bubble em { color: rgba(140,170,220,0.5); font-style: italic; }
.et-ochat-user-bubble {
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.15);
    color: #e2e8f0;
}
.et-ochat-inputbar {
    display: flex; gap: 8px; align-items: center;
}
.et-ochat-input {
    flex: 1; padding: 8px 14px;
    border-radius: 20px; border: 1px solid rgba(96,165,250,0.12);
    background: rgba(0,0,0,0.2);
    color: #e2e8f0; font-size: 0.82rem;
    outline: none; transition: border-color 0.3s;
}
.et-ochat-input:focus { border-color: rgba(96,165,250,0.35); }
.et-ochat-input::placeholder { color: rgba(120,150,200,0.3); }
.et-ochat-send {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(96,165,250,0.2);
    background: rgba(96,165,250,0.08);
    color: rgba(96,165,250,0.7);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.et-ochat-send:hover {
    background: rgba(96,165,250,0.15);
    border-color: rgba(96,165,250,0.4);
    color: #8bb8f8;
}
.et-ochat-send svg { display: block; }

.et-room-shrine { --room-hue: 40; }
.et-shrine-content { }
.et-shrine-wing {
    margin-bottom: 24px;
}
.et-shrine-wing-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; padding: 8px 0;
    border-bottom: 1px solid rgba(96,165,250,0.05);
}
.et-shrine-wing-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 6px var(--wing-color, rgba(251,191,36,0.4)));
}
.et-shrine-wing-name {
    font-size: 1rem; font-weight: 600; color: var(--wing-color, #fbbf24);
    text-shadow: 0 0 12px color-mix(in srgb, var(--wing-color, #fbbf24) 30%, transparent);
    letter-spacing: 1px;
}
.et-shrine-wing-count {
    font-size: 0.65rem; color: rgba(150,170,200,0.5);
    background: rgba(96,165,250,0.06);
    padding: 2px 8px; border-radius: 10px;
    border: 1px solid rgba(96,165,250,0.06);
}

.et-altar {
    background: linear-gradient(135deg, rgba(10,16,36,0.45), rgba(15,20,45,0.3));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(96,165,250,0.06);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.02);
}
.et-altar:hover {
    border-color: color-mix(in srgb, var(--wing-color, rgba(251,191,36,0.3)) 40%, transparent);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 0 20px color-mix(in srgb, var(--wing-color, #fbbf24) 8%, transparent);
    transform: translateY(-1px);
}
.et-altar-warn {
    border-left: 2px solid rgba(251,191,36,0.35);
}
.et-altar-flame {
    position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
    background: linear-gradient(to left, color-mix(in srgb, var(--wing-color, #fbbf24) 6%, transparent), transparent);
    border-radius: 0 16px 16px 0;
    opacity: 0.5;
    animation: et-flame 3s ease-in-out infinite;
    pointer-events: none;
}
.et-altar-flame-warn {
    background: linear-gradient(to left, rgba(248,113,113,0.08), transparent);
    animation: et-flame-warn 1.5s ease-in-out infinite;
}
@keyframes et-flame {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}
@keyframes et-flame-warn {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}
.et-altar-content { position: relative; z-index: 1; }
.et-altar-name {
    font-size: 0.95rem; font-weight: 600; color: rgba(220,230,245,0.9); margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.et-altar-desc {
    font-size: 0.78rem; color: rgba(150,170,200,0.6); margin-bottom: 6px; line-height: 1.4;
}
.et-altar-formula {
    background: rgba(0,0,0,0.25); border-radius: 10px;
    padding: 6px 12px; margin-bottom: 8px;
    border: 1px solid rgba(96,165,250,0.04);
}
.et-altar-formula code {
    font-size: 0.7rem; color: rgba(252,211,77,0.7); font-family: 'SF Mono','Fira Code',monospace;
    word-break: break-all;
}
.et-altar-status { margin-top: 6px; }
.et-altar-badge {
    display: inline-block; font-size: 0.72rem; padding: 2px 10px; border-radius: 10px;
    backdrop-filter: blur(4px);
}
.et-badge-ok { background: rgba(52,211,153,0.1); color: rgba(52,211,153,0.8); border: 1px solid rgba(52,211,153,0.1); }
.et-badge-warn { background: rgba(251,191,36,0.1); color: rgba(251,191,36,0.8); border: 1px solid rgba(251,191,36,0.1); }
.et-altar-issue {
    font-size: 0.75rem; color: rgba(251,191,36,0.7); padding: 3px 0;
}
.et-altar-suggestion {
    font-size: 0.75rem; color: rgba(52,211,153,0.7); padding: 3px 0;
}

/* ═══════════════════════════════════════
   先知之池 — Oracle Pool
   ═══════════════════════════════════════ */
.et-room-oracle { --room-hue: 270; }
.et-oracle-pool-wrap {
    display: flex; justify-content: center;
    position: relative; padding: 24px;
    background: rgba(10,8,30,0.35);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 20px;
    border: 1px solid rgba(150,96,250,0.12);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
}
.et-pool-ripple {
    position: absolute; top: 50%; left: 50%;
    width: 300px; height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(150,96,250,0.1);
    animation: et-ripple 4s ease-out infinite;
    pointer-events: none;
}
@keyframes et-ripple {
    0% { width: 200px; height: 200px; opacity: 0.3; }
    100% { width: 500px; height: 500px; opacity: 0; }
}
#etOracleRadar { max-width: 100%; height: auto; position: relative; z-index: 1; }

.et-oracle-visions { margin-top: 20px; }
.et-oracle-subtitle {
    font-size: 1rem; color: #c4b5fd; margin: 0 0 12px;
    font-weight: 600;
}
.et-vision {
    padding: 10px 14px; margin-bottom: 8px;
    border-radius: 12px; font-size: 0.85rem;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.02);
}
.et-vision-ok {
    background: rgba(52,211,153,0.06);
    border: 1px solid rgba(52,211,153,0.12);
}
.et-vision-warn {
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.12);
}
.et-vision-header {
    display: flex; align-items: center; gap: 8px;
}
.et-vision-header strong { color: #e2e8f0; flex: 1; }
.et-vision-dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.et-vision-ok .et-vision-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.et-vision-warn .et-vision-dot { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.et-vision-status { color: #94a3b8; font-size: 0.8rem; }
.et-vision-detail { font-size: 0.8rem; color: #fbbf24; padding: 3px 0 3px 14px; }
.et-vision-suggest { font-size: 0.8rem; color: #34d399; padding: 3px 0 3px 14px; }

/* ═══════════════════════════════════════
   时光回廊 — Time Corridor
   ═══════════════════════════════════════ */
.et-room-corridor { --room-hue: 160; }
.et-corridor-chart-wrap {
    background: rgba(10,20,15,0.3);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 18px; padding: 20px;
    border: 1px solid rgba(52,211,153,0.1);
    overflow-x: auto; margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
}
#etCorridorChart { max-width: 100%; height: auto; }

.et-corridor-stones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.et-stone {
    background: rgba(15,23,42,0.3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(52,211,153,0.1);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
}
.et-stone:hover {
    transform: translateY(-2px);
    border-color: rgba(52,211,153,0.3);
}
.et-stone-date {
    font-size: 0.7rem; color: #64748b; margin-bottom: 6px;
    letter-spacing: 1px;
}
.et-stone-score {
    font-size: 2rem; font-weight: 700;
    text-shadow: 0 0 12px currentColor;
}
.et-stone-label {
    font-size: 0.65rem; color: #475569; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 4px;
}
.et-stone-changes {
    font-size: 0.75rem; color: #94a3b8;
}
.et-stone-text {
    font-size: 0.7rem; color: #475569;
    margin-top: 6px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* ═══════════════════════════════════════
   炼金工坊 — Alchemy Workshop
   ═══════════════════════════════════════ */
.et-room-alchemy { --room-hue: 20; }
.et-alchemy-bench {
    background: rgba(20,12,8,0.3);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(250,130,96,0.12);
    border-radius: 18px; padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
}
.et-alchemy-subtitle {
    font-size: 1rem; font-weight: 600; color: #fdba74;
    margin: 0 0 16px;
}
.et-potion-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.et-potion-icon { font-size: 1.2rem; flex-shrink: 0; }
.et-potion-label {
    width: 80px; font-size: 0.8rem; color: #94a3b8; flex-shrink: 0;
}
.et-potion-slider {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px;
    background: rgba(100,116,139,0.25);
    outline: none;
}
.et-potion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fb923c; cursor: pointer;
    box-shadow: 0 0 8px rgba(251,146,60,0.4);
}
.et-potion-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fb923c; cursor: pointer; border: none;
}
.et-potion-val {
    width: 55px; text-align: right;
    font-size: 0.85rem; color: #fb923c; font-weight: 600;
    font-family: 'SF Mono', monospace;
}

.et-alchemy-furnace { text-align: center; }
.et-brew-btn {
    display: inline-block;
    padding: 12px 32px; border-radius: 24px;
    border: 2px solid rgba(251,146,60,0.4);
    background: linear-gradient(135deg, rgba(180,80,20,0.3), rgba(120,40,10,0.5));
    color: #fdba74; font-size: 1rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
}
.et-brew-btn:hover {
    border-color: rgba(251,146,60,0.7);
    box-shadow: 0 0 24px rgba(251,146,60,0.2);
    transform: scale(1.02);
}

.et-brew-result { margin-top: 20px; text-align: left; }
.et-brew-fire {
    text-align: center; padding: 24px;
    font-size: 1.1rem; color: #fb923c;
    animation: et-pulse-text 1s ease-in-out infinite;
}
.et-brew-summary {
    padding: 12px 16px; margin-bottom: 12px;
    border-radius: 10px; font-size: 0.95rem; font-weight: 600;
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(100,116,139,0.2);
    color: #e2e8f0;
}
.et-brew-model {
    padding: 10px 14px; margin-bottom: 6px;
    border-radius: 10px; font-size: 0.85rem;
}
.et-brew-ok {
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.15);
    color: #6ee7b7;
}
.et-brew-warn {
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.15);
    color: #fde68a;
}
.et-brew-err {
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.15);
    color: #fca5a5;
}
.et-brew-model-head {
    display: flex; justify-content: space-between; align-items: center;
}
.et-brew-model-head strong { color: #e2e8f0; }
.et-brew-issue { font-size: 0.78rem; color: #fbbf24; padding: 2px 0 2px 12px; }
.et-brew-suggest { font-size: 0.78rem; color: #34d399; padding: 2px 0 2px 12px; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .et-container { padding: 8px 0; }
    .et-hall { max-width: 100%; border-radius: 14px; }
    .et-maya-canvas { display: none; }
    .et-topbar { padding: 10px 12px 8px; }
    .et-chat-area { padding: 10px 12px 4px; }
    .et-chips { padding: 4px 12px 4px; }
    .et-inputbar { padding: 6px 12px 8px; }
    .et-msg-bubble { max-width: 90%; }
    .et-corridor-stones { grid-template-columns: 1fr 1fr; }
    .et-potion-row { flex-wrap: wrap; }
    .et-potion-label { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   CONGRESS PANEL — Political System UI (matches wb-* style)
   ══════════════════════════════════════════════════════════════ */

/* ── Dark base (Canvas背景由initCanvasBackground注入) ── */
.cg-dark {
    min-height: 100vh;
    background: #080818;
    position: relative;
    overflow: clip;
}

/* ── Party List ── */
.cg-party-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.cg-party-card:hover {
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 0 20px rgba(139,92,246,0.08), inset 0 0 30px rgba(139,92,246,0.03);
    transform: translateY(-1px);
}
.cg-party-color {
    width: 10px; height: 40px; border-radius: 5px; flex-shrink: 0;
}
.cg-party-info { flex: 1; min-width: 0; }
.cg-party-name {
    font-size: 0.95rem; font-weight: 700; color: #e2e8f0;
    margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
}
.cg-party-meta {
    font-size: 0.78rem; color: #64748b;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.cg-party-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Bill Card ── */
.cg-bill-card {
    padding: 16px; margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    position: relative; overflow: hidden;
}
.cg-bill-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.cg-bill-card:hover {
    border-color: rgba(139,92,246,0.2);
    box-shadow: 0 4px 24px rgba(139,92,246,0.06);
    transform: translateY(-1px);
}
.cg-bill-card:hover::before { opacity: 1; }
.cg-bill-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.cg-bill-id {
    font-size: 0.72rem; font-weight: 700; color: #8b5cf6;
    background: rgba(139,92,246,0.15); padding: 2px 8px; border-radius: 6px;
}
.cg-bill-title {
    font-size: 0.92rem; font-weight: 600; color: #e2e8f0; flex: 1;
}
.cg-bill-status {
    font-size: 0.72rem; font-weight: 700; padding: 3px 10px;
    border-radius: 8px; white-space: nowrap;
}
.cg-bill-status-voting {
    background: rgba(251,191,36,0.15); color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.3);
    box-shadow: 0 0 8px rgba(251,191,36,0.15);
    animation: cg-status-pulse 2s ease-in-out infinite;
}
@keyframes cg-status-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.15); }
    50% { box-shadow: 0 0 14px rgba(251,191,36,0.3); }
}
.cg-bill-status-enacted {
    background: rgba(34,197,94,0.15); color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
    box-shadow: 0 0 8px rgba(34,197,94,0.12);
}
.cg-bill-status-vetoed {
    background: rgba(239,68,68,0.15); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
    box-shadow: 0 0 8px rgba(239,68,68,0.12);
}
.cg-bill-status-committee {
    background: rgba(99,102,241,0.15); color: #818cf8;
    border: 1px solid rgba(99,102,241,0.3);
    box-shadow: 0 0 8px rgba(99,102,241,0.12);
}
.cg-bill-status-expired {
    background: rgba(100,116,139,0.15); color: #94a3b8;
    border: 1px solid rgba(100,116,139,0.3);
}
.cg-bill-body {
    font-size: 0.82rem; color: #94a3b8; line-height: 1.5; margin-bottom: 10px;
}
.cg-bill-votes {
    display: flex; gap: 12px; align-items: center; margin-bottom: 10px;
}
.cg-vote-bar {
    flex: 1; height: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.06); overflow: hidden;
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.cg-vote-yea {
    background: linear-gradient(90deg, #22c55e, #16a34a); height: 100%;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 8px rgba(34,197,94,0.3);
}
.cg-vote-nay {
    background: linear-gradient(90deg, #ef4444, #dc2626); height: 100%;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 8px rgba(239,68,68,0.3);
}
.cg-vote-label { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; }
.cg-bill-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Election ── */
.cg-election-banner {
    padding: 20px; text-align: center;
    background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.05));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 12px; margin-bottom: 16px;
    position: relative; overflow: hidden;
    box-shadow: 0 0 30px rgba(251,191,36,0.06);
}
.cg-election-banner::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.08), transparent);
    animation: cg-election-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cg-election-shimmer {
    0% { left: -60%; }
    50% { left: 100%; }
    100% { left: 100%; }
}
.cg-election-title {
    font-size: 1.1rem; font-weight: 700; color: #fbbf24; margin-bottom: 6px;
    text-shadow: 0 0 20px rgba(251,191,36,0.3);
}
.cg-election-meta { font-size: 0.82rem; color: #94a3b8; }
.cg-candidate-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cg-candidate-row:hover {
    border-color: rgba(251,191,36,0.2);
    box-shadow: 0 0 16px rgba(251,191,36,0.05);
}
.cg-candidate-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: #e2e8f0; }
.cg-candidate-votes { font-size: 0.82rem; color: #94a3b8; margin-right: 8px; }

/* ── My Profile Card ── */
.cg-profile-card {
    padding: 24px; text-align: center;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(139,92,246,0.25);
    border-radius: 16px; margin-bottom: 16px;
    position: relative; overflow: hidden;
    box-shadow: 0 0 40px rgba(139,92,246,0.06), inset 0 0 60px rgba(99,102,241,0.03);
}
.cg-profile-card::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(139,92,246,0.04), transparent, rgba(99,102,241,0.03), transparent);
    animation: cg-profile-glow 12s linear infinite;
    pointer-events: none;
}
@keyframes cg-profile-glow { to { transform: rotate(360deg); } }
.cg-profile-role {
    font-size: 1.4rem; font-weight: 800;
    background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 4px;
}
.cg-profile-party {
    font-size: 0.88rem; color: #94a3b8; margin-bottom: 16px;
}
.cg-profile-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.cg-stat-box {
    padding: 12px 8px;
    background: rgba(30,30,50,0.5);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px; text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cg-stat-box:hover {
    border-color: rgba(139,92,246,0.2);
    box-shadow: 0 0 16px rgba(139,92,246,0.06);
}
.cg-stat-num {
    font-size: 1.3rem; font-weight: 800; color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}
.cg-stat-label {
    font-size: 0.72rem; color: #64748b; margin-top: 2px;
}

/* ── Bill Form ── */
.cg-bill-form {
    padding: 16px;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 12px; margin-bottom: 16px;
    box-shadow: 0 0 20px rgba(99,102,241,0.04);
}
.cg-bill-form input, .cg-bill-form textarea {
    width: 100%; padding: 10px 14px;
    background: rgba(15,15,30,0.4);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 10px; color: #e2e8f0; font-size: 0.85rem;
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box; margin-bottom: 10px;
}
.cg-bill-form input:focus, .cg-bill-form textarea:focus {
    border-color: rgba(99,102,241,0.5);
}
.cg-bill-form textarea { min-height: 60px; resize: vertical; }

/* ── Seat Chart ── */
.cg-seat-chart {
    display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
    padding: 16px; margin-bottom: 16px;
}
.cg-seat-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 6px rgba(255,255,255,0.05);
}
.cg-seat-dot:hover {
    transform: scale(1.6);
    box-shadow: 0 0 12px currentColor;
}

/* ── Adjustments Tag ── */
.cg-adj-tag {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    padding: 2px 8px; border-radius: 6px; margin-right: 4px;
    background: rgba(59,130,246,0.15); color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.25);
    box-shadow: 0 0 6px rgba(59,130,246,0.1);
    text-shadow: 0 0 8px rgba(96,165,250,0.3);
}

/* ── Empty State ── */
.cg-empty {
    text-align: center; padding: 40px 20px;
    color: #64748b; font-size: 0.88rem;
}
.cg-empty-icon { font-size: 2.5rem; margin-bottom: 8px; opacity: 0.5; }

/* ── Clerk Chat Panel (议事厅) ── */
.cg-chat-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(251,191,36,0.06));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cg-chat-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
    box-shadow: 0 0 16px rgba(99,102,241,0.25);
}
.cg-chat-info { flex: 1; min-width: 0; }
.cg-chat-name { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; display: block; }
.cg-chat-title { font-size: 0.72rem; color: #64748b; }
.cg-chat-status { display: flex; gap: 6px; flex-shrink: 0; }
.cg-chat-badge {
    padding: 3px 10px; border-radius: 12px;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}

/* ── Chat Area ── */
.cg-chat-area {
    padding: 16px;
    min-height: 320px; max-height: 480px;
    overflow-y: auto;
    background: rgba(0,0,0,0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.2) transparent;
}
.cg-msg { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.cg-msg-clerk { flex-direction: row; }
.cg-msg-user { flex-direction: row-reverse; }
.cg-msg-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
    border: 1px solid rgba(99,102,241,0.15);
}
.cg-msg-bubble {
    max-width: 80%; padding: 10px 14px;
    border-radius: 14px; font-size: 0.85rem; line-height: 1.6;
}
.cg-msg-clerk-bubble {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
    color: #cbd5e1;
    border-top-left-radius: 4px;
}
.cg-msg-user-bubble {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    border: 1px solid rgba(99,102,241,0.2);
    color: #e2e8f0;
    border-top-right-radius: 4px;
}

/* ── Typing Indicator ── */
.cg-typing {
    display: flex; gap: 4px; padding: 12px 16px; align-items: center;
}
.cg-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #8b5cf6; opacity: 0.4;
    animation: cg-typing-dot 1.2s ease-in-out infinite;
}
.cg-typing span:nth-child(2) { animation-delay: 0.2s; }
.cg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cg-typing-dot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.1); }
}

/* ── Quick Action Chips ── */
.cg-chips {
    display: flex; gap: 6px; padding: 10px 16px;
    overflow-x: auto; flex-wrap: nowrap;
    border-top: 1px solid rgba(255,255,255,0.04);
    scrollbar-width: none;
}
.cg-chips::-webkit-scrollbar { display: none; }
.cg-chip {
    padding: 6px 14px; border-radius: 20px; border: none;
    background: rgba(99,102,241,0.1);
    color: #a5b4fc; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid rgba(99,102,241,0.15);
}
.cg-chip:hover {
    background: rgba(99,102,241,0.2);
    color: #e2e8f0;
    box-shadow: 0 0 12px rgba(99,102,241,0.15);
    transform: translateY(-1px);
}
.cg-chip:active { transform: scale(0.97); }

/* ── Input Bar ── */
.cg-input-bar {
    display: flex; gap: 8px; padding: 10px 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
    background: rgba(0,0,0,0.06);
    border-radius: 0 0 16px 16px;
}
.cg-input {
    flex: 1; padding: 10px 16px;
    background: rgba(15,15,30,0.5);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 24px; color: #e2e8f0;
    font-size: 0.85rem; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cg-input:focus {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
.cg-input::placeholder { color: #475569; }
.cg-send-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(99,102,241,0.25);
}
.cg-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(99,102,241,0.35);
}
.cg-send-btn:active { transform: scale(0.95); }

/* ── History Log ── */
.cg-history-scroll {
    max-height: 300px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.25) transparent;
}
.cg-history-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.78rem; color: #94a3b8;
}
.cg-history-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #8b5cf6; flex-shrink: 0; margin-top: 4px;
}
.cg-history-time {
    font-size: 0.7rem; color: #475569; white-space: nowrap;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .cg-profile-stats { grid-template-columns: repeat(2, 1fr); }
    .cg-bill-actions { flex-direction: column; }
    .cg-party-card { flex-direction: column; align-items: flex-start; }
    .cg-party-actions { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════ */
/* ██ Compute Lab (算力实验室) — chat micro-compute Python kernel ██ */
/* ════════════════════════════════════════════════════════════════ */
.cl-dark {
    min-height: 100vh; position: relative;
    background: radial-gradient(ellipse at top, #0c1624 0%, #060a12 60%, #03060a 100%);
    padding: 24px;
    color: #e6edf3;
}
.cl-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cl-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35;
    animation: clOrb 18s ease-in-out infinite;
}
.cl-orb-1 { top: 10%; left: 8%; width: 320px; height: 320px; background: #4c7dff; }
.cl-orb-2 { bottom: 10%; right: 12%; width: 280px; height: 280px; background: #b45cff; animation-delay: -6s; }
.cl-orb-3 { top: 40%; right: 30%; width: 220px; height: 220px; background: #2fe0b8; animation-delay: -12s; }
@keyframes clOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -30px) scale(1.1); }
}
.cl-container {
    position: relative; z-index: 1; max-width: 1600px; margin: 0 auto;
    height: calc(100vh - 48px - 70px); /* leave space for dock */
}

/* ── Two-column layout: sidebar (status) + main (chat) ── */
.cl-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    height: 100%;
}
.cl-sidebar {
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
    min-width: 0;
}
.cl-sidebar::-webkit-scrollbar { width: 6px; }
.cl-sidebar::-webkit-scrollbar-thumb { background: rgba(122, 168, 255, 0.2); border-radius: 3px; }
.cl-main {
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0; min-height: 0;
    overflow: hidden;
}
.cl-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 8px;
    border-bottom: 1px solid rgba(122, 168, 255, 0.12);
}
.cl-side-title {
    font-size: 1rem; font-weight: 800; letter-spacing: -0.3px;
    background: linear-gradient(90deg, #7aa8ff 0%, #c088ff 50%, #64e9c9 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Kernel status bar ── */
.cl-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: rgba(18, 28, 42, 0.7);
    border: 1px solid rgba(122, 168, 255, 0.15);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    font-size: 0.82rem;
}
.cl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cl-dot-cold    { background: #555; }
.cl-dot-loading { background: #ffb347; animation: clPulse 1.2s infinite; }
.cl-dot-ready   { background: #3fd47c; box-shadow: 0 0 10px #3fd47c; }
@keyframes clPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.cl-kernel-label { font-size: 0.88rem; color: #c4cdd9; }
.cl-file-tag {
    font-size: 0.82rem; color: #7aa8ff;
    padding: 3px 10px; background: rgba(122, 168, 255, 0.1);
    border-radius: 8px; border: 1px solid rgba(122, 168, 255, 0.25);
}
.cl-bar-sp { flex: 1; }
.cl-upload-btn {
    cursor: pointer; padding: 6px 14px; border-radius: 8px;
    background: linear-gradient(135deg, #4c7dff, #7a5cff);
    color: #fff; font-size: 0.85rem; font-weight: 600;
    border: none; transition: transform 0.15s;
}
.cl-upload-btn:hover { transform: translateY(-1px); }
.cl-reset-btn {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #c4cdd9; cursor: pointer; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.cl-reset-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ── Variable chips ── */
.cl-vars {
    padding: 10px 14px;
    background: rgba(18, 28, 42, 0.5);
    border: 1px solid rgba(122, 168, 255, 0.1);
    border-radius: 12px;
    max-height: 110px; overflow-y: auto;
}
.cl-vars-empty { font-size: 0.82rem; color: #6b7a8f; font-style: italic; }
.cl-vars-title { font-size: 0.72rem; color: #8b9bb0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.cl-vars-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-var-chip {
    font-size: 0.78rem; padding: 4px 10px; border-radius: 6px;
    background: rgba(122, 168, 255, 0.08);
    border: 1px solid rgba(122, 168, 255, 0.2);
    color: #c4cdd9; cursor: default; white-space: nowrap;
}
.cl-var-chip b { color: #7aa8ff; font-weight: 700; margin-right: 4px; }

/* ── Messages area (大聊天区) ── */
.cl-messages {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 24px 28px;
    background: rgba(6, 10, 18, 0.55);
    border: 1px solid rgba(122, 168, 255, 0.1);
    border-radius: 16px;
    display: flex; flex-direction: column; gap: 18px;
}
.cl-messages::-webkit-scrollbar { width: 8px; }
.cl-messages::-webkit-scrollbar-thumb { background: rgba(122, 168, 255, 0.25); border-radius: 4px; }
.cl-welcome {
    text-align: center; padding: 64px 28px; color: #8b9bb0;
    font-size: 1.02rem; line-height: 1.7;
    max-width: 560px; margin: auto;
}
.cl-msg { display: flex; max-width: 100%; }
.cl-msg-user { justify-content: flex-end; }
.cl-msg-user .cl-bubble {
    background: linear-gradient(135deg, #4c7dff 0%, #7a5cff 100%);
    color: #fff; padding: 14px 18px; border-radius: 18px 18px 4px 18px;
    max-width: 82%; word-wrap: break-word; font-size: 0.98rem; line-height: 1.6;
    box-shadow: 0 4px 16px rgba(76, 125, 255, 0.18);
}
.cl-msg-asst {
    flex-direction: column; gap: 10px; width: 100%;
    background: rgba(18, 28, 42, 0.55);
    border: 1px solid rgba(122, 168, 255, 0.14);
    border-radius: 18px 18px 18px 4px;
    padding: 18px 22px;
}
.cl-asst-text { font-size: 0.98rem; color: #d4dce6; line-height: 1.7; white-space: pre-wrap; }
.cl-thinking { color: #8b9bb0; font-style: italic; font-size: 0.92rem; }
.cl-code {
    margin: 0; padding: 14px 16px;
    background: #080d16; border: 1px solid rgba(122, 168, 255, 0.22);
    border-radius: 10px; overflow-x: auto;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.88rem; color: #b8c7e0; line-height: 1.62;
}
.cl-code code { font-family: inherit; color: inherit; }
.cl-stdout {
    margin: 0; padding: 12px 14px;
    background: #0d1a12; border-left: 3px solid #3fd47c;
    border-radius: 6px; color: #b8e0c5;
    font-family: 'SF Mono', Consolas, monospace; font-size: 0.85rem;
    max-height: 420px; overflow: auto; white-space: pre-wrap; line-height: 1.55;
}
.cl-stderr {
    margin: 0; padding: 12px 14px;
    background: #1a0d12; border-left: 3px solid #ff6b6b;
    border-radius: 6px; color: #ffb4b4;
    font-family: 'SF Mono', Consolas, monospace; font-size: 0.85rem;
    max-height: 340px; overflow: auto; white-space: pre-wrap; line-height: 1.55;
}
.cl-plot {
    max-width: 100%; border-radius: 10px; border: 1px solid rgba(122, 168, 255, 0.18);
    background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.cl-hint {
    font-size: 0.82rem; color: #ffb347; padding: 6px 10px;
    background: rgba(255, 179, 71, 0.08); border-radius: 6px;
}

/* ── Fill-in Answer (inline, subtle) ── */
.cl-answer {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    padding: 2px 0 4px;
}
.cl-answer-label {
    font-size: 0.78rem; color: #3fd47c; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.cl-answer-value {
    font-size: 1rem; color: #ecfff4; font-weight: 600;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    word-break: break-word;
}

/* ── Auto-fix blocks (内联在 assistant bubble 底部) ── */
.cl-fix {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 179, 71, 0.3);
    background: rgba(255, 179, 71, 0.04);
    display: flex; flex-direction: column; gap: 8px;
}
.cl-fix-ok { border-color: rgba(63, 212, 124, 0.35); background: rgba(63, 212, 124, 0.05); }
.cl-fix-fail { border-color: rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.05); }
.cl-fix-pending { border-color: rgba(122, 168, 255, 0.3); background: rgba(122, 168, 255, 0.05); }
.cl-fix-head {
    font-size: 0.82rem; color: #c4cdd9; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    text-transform: none; letter-spacing: 0.2px;
}
.cl-fix-ok .cl-fix-head { color: #3fd47c; }
.cl-fix-fail .cl-fix-head { color: #ff8b8b; }
.cl-fix-pending .cl-fix-head { color: #7aa8ff; }
.cl-msg-actions { display: flex; gap: 4px; margin-top: 4px; }
.cl-msg-btn {
    width: 28px; height: 28px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8b9bb0; cursor: pointer; font-size: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.cl-msg-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ── Input bar (大输入框, ChatGPT 风格) ── */
.cl-input-wrap { flex-shrink: 0; }
.cl-input-bar {
    display: flex; gap: 10px; align-items: stretch;
    padding: 14px;
    background: rgba(18, 28, 42, 0.8);
    border: 1px solid rgba(122, 168, 255, 0.24);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.cl-input-bar textarea {
    flex: 1; min-height: 52px; max-height: 180px;
    background: rgba(6, 10, 18, 0.65);
    border: 1px solid rgba(122, 168, 255, 0.18);
    border-radius: 12px;
    color: #e6edf3; font-size: 1rem; line-height: 1.6;
    padding: 14px 16px; resize: none; outline: none;
    font-family: inherit;
}
.cl-input-bar textarea:focus { border-color: #7aa8ff; box-shadow: 0 0 0 2px rgba(122, 168, 255, 0.15); }
.cl-input-bar textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.cl-send-btn {
    padding: 0 24px;
    background: linear-gradient(135deg, #4c7dff 0%, #7a5cff 100%);
    color: #fff; border: none; border-radius: 12px;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform 0.12s, box-shadow 0.12s;
    min-width: 88px; justify-content: center;
}
.cl-send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(76, 125, 255, 0.4); }
.cl-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cl-spin {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%;
    animation: clSpin 0.8s linear infinite;
}
@keyframes clSpin { to { transform: rotate(360deg); } }

/* ── Quick chips ── */
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-chip {
    padding: 5px 12px; border-radius: 16px;
    background: rgba(122, 168, 255, 0.08);
    border: 1px solid rgba(122, 168, 255, 0.2);
    color: #c4cdd9; font-size: 0.8rem; cursor: pointer;
    transition: all 0.15s;
}
.cl-chip:hover {
    background: rgba(122, 168, 255, 0.2);
    border-color: rgba(122, 168, 255, 0.5);
    color: #fff;
}

/* ── Data profile card (persistent under the kernel bar) ── */
.cl-data-card {
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(76, 125, 255, 0.08), rgba(122, 92, 255, 0.05));
    border: 1px solid rgba(122, 168, 255, 0.22);
    border-radius: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.cl-dc-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 0.85rem; color: #c4cdd9;
}
.cl-dc-file { font-weight: 700; color: #7aa8ff; }
.cl-dc-shape { font-family: 'SF Mono', monospace; color: #8b9bb0; }
.cl-dc-tag {
    font-size: 0.72rem; padding: 2px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.cl-dc-panel { background: rgba(255, 179, 71, 0.15); color: #ffb347; border: 1px solid rgba(255, 179, 71, 0.3); }
.cl-dc-method { background: rgba(63, 212, 124, 0.15); color: #3fd47c; border: 1px solid rgba(63, 212, 124, 0.3); }
.cl-dc-cols { display: flex; flex-wrap: wrap; gap: 4px; max-height: 96px; overflow-y: auto; }
.cl-dc-col {
    font-size: 0.76rem; padding: 3px 8px; border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: help; color: #c4cdd9; white-space: nowrap;
}
.cl-dc-col b { color: #e6edf3; font-weight: 600; margin: 0 2px; }
.cl-dc-miss { color: #ffb347; font-style: normal; font-size: 0.72rem; }
.cl-dc-role-continuous     { border-color: rgba(76, 125, 255, 0.4); }
.cl-dc-role-binary         { border-color: rgba(255, 179, 71, 0.4); }
.cl-dc-role-ordinal_or_cat { border-color: rgba(122, 92, 255, 0.4); }
.cl-dc-role-categorical    { border-color: rgba(122, 92, 255, 0.4); }
.cl-dc-role-time           { border-color: rgba(63, 212, 124, 0.4); }
.cl-dc-role-id_like        { border-color: rgba(255, 107, 107, 0.35); }
.cl-dc-role-text_high_card { border-color: rgba(139, 155, 176, 0.3); }

/* ── Stale kernel warning ── */
.cl-data-card.cl-dc-stale {
    border-color: rgba(255, 179, 71, 0.5);
    background: linear-gradient(135deg, rgba(255, 179, 71, 0.12), rgba(255, 107, 107, 0.06));
}
.cl-dc-stale-banner {
    padding: 8px 12px;
    background: rgba(255, 179, 71, 0.18);
    border: 1px solid rgba(255, 179, 71, 0.4);
    border-radius: 6px;
    color: #ffb347; font-size: 0.82rem; font-weight: 600;
    line-height: 1.45;
}
.cl-data-card.cl-dc-stale .cl-dc-head,
.cl-data-card.cl-dc-stale .cl-dc-cols { opacity: 0.55; }

/* ── Step log card ── */
.cl-steps-card {
    padding: 8px 12px;
    background: rgba(18, 28, 42, 0.4);
    border: 1px solid rgba(122, 168, 255, 0.1);
    border-radius: 10px;
    font-size: 0.82rem;
}
.cl-steps-head {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; color: #8b9bb0; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 1px; user-select: none;
    padding: 2px 0;
}
.cl-steps-head:hover { color: #e6edf3; }
.cl-steps-toggle { font-size: 0.7rem; }
.cl-steps-list {
    margin: 6px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 3px;
}
.cl-steps-list li {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 3px 0; font-size: 0.78rem; color: #c4cdd9;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.cl-step-n {
    font-family: 'SF Mono', monospace; color: #7aa8ff;
    background: rgba(122, 168, 255, 0.08); padding: 0 6px; border-radius: 3px;
    font-weight: 600; flex-shrink: 0;
}
.cl-step-q { flex: 1; min-width: 120px; opacity: 0.92; }
.cl-step-badge {
    font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; font-weight: 600;
    font-family: 'SF Mono', monospace;
}
.cl-step-badge.cl-new  { background: rgba(63, 212, 124, 0.18); color: #3fd47c; }
.cl-step-badge.cl-add  { background: rgba(63, 212, 124, 0.12); color: #6fe09a; }
.cl-step-badge.cl-mut  { background: rgba(255, 179, 71, 0.15); color: #ffb347; }
.cl-step-badge.cl-del  { background: rgba(255, 107, 107, 0.15); color: #ff8b8b; }
.cl-step-badge.cl-note { background: rgba(139, 155, 176, 0.1); color: #8b9bb0; }

/* ── Drag-drop highlight ── */
.cl-container.cl-drop-active::after {
    content: '\02193 Drop to upload'; /* ↓ */
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(76, 125, 255, 0.15);
    border: 2px dashed #7aa8ff; border-radius: 14px;
    color: #e6edf3; font-size: 1.4rem; font-weight: 700;
    pointer-events: none; z-index: 10;
    backdrop-filter: blur(4px);
}

/* ── Tablet: stack but keep sidebar on top ── */
@media (max-width: 1024px) {
    .cl-layout { grid-template-columns: 260px 1fr; gap: 12px; }
    .cl-dc-cols { max-height: 120px; }
}

/* ── Mobile: single column, sidebar collapses above messages ── */
@media (max-width: 768px) {
    .cl-layout { grid-template-columns: 1fr; }
    .cl-sidebar {
        max-height: 38vh; overflow-y: auto;
        border-bottom: 1px solid rgba(122, 168, 255, 0.12);
        padding-bottom: 8px;
    }
    .cl-dark { padding: 12px; }
    .cl-container { height: calc(100vh - 24px - 60px); }
    .cl-msg-user .cl-bubble { max-width: 92%; font-size: 0.94rem; }
    .cl-asst-text { font-size: 0.94rem; }
    .cl-messages { padding: 16px 14px; }
    .cl-input-bar { padding: 10px; }
    .cl-input-bar textarea { font-size: 0.95rem; min-height: 44px; }
    .cl-send-btn { padding: 0 16px; min-width: 68px; font-size: 0.88rem; }
}