/* Light Azure Glass — Chinese University Course Portal */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* 1. Reset & Tokens */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--primary-50:#eef5ff;--primary-100:#dbeaff;--primary-200:#bed8ff;--primary-300:#91bfff;
--primary-400:#5e9bff;--primary-500:#3370ff;--primary-600:#1d56f5;--primary-700:#1743e1;--primary-800:#1835b6;
--neutral-0:#fff;--neutral-50:#f8fafd;--neutral-100:#f0f4f9;--neutral-200:#e4e9f1;--neutral-300:#cdd5e0;
--neutral-400:#9aa5b8;--neutral-500:#6b7a90;--neutral-600:#4a5568;--neutral-700:#374151;--neutral-800:#1f2937;--neutral-900:#111827;
--success:#10b981;--success-bg:#ecfdf5;--warning:#f59e0b;--warning-bg:#fffbeb;--danger:#ef4444;--danger-bg:#fef2f2;
--glass-bg:rgba(255,255,255,.72);--glass-bg-s:rgba(255,255,255,.88);--glass-border:rgba(51,112,255,.10);--blur:16px;--blur-lg:24px;
--sh-xs:0 1px 2px rgba(51,112,255,.04);--sh-sm:0 2px 8px rgba(51,112,255,.06),0 1px 3px rgba(0,0,0,.04);
--sh-md:0 4px 16px rgba(51,112,255,.08),0 2px 6px rgba(0,0,0,.04);--sh-lg:0 8px 32px rgba(51,112,255,.10),0 4px 12px rgba(0,0,0,.04);
--sh-xl:0 16px 48px rgba(51,112,255,.12),0 8px 24px rgba(0,0,0,.06);--sh-glow:0 4px 20px rgba(51,112,255,.25);
--r-sm:8px;--r-md:14px;--r-lg:20px;--r-full:9999px;
--font-h:'Noto Serif SC','Songti SC',serif;--font-b:'DM Sans','PingFang SC',-apple-system,sans-serif;
--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--fast:.2s;--norm:.35s;--slow:.5s;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-b);font-size:15px;line-height:1.7;color:var(--neutral-800);background:#f0f5ff;
background-image:radial-gradient(ellipse 80% 60% at 10% 20%,rgba(51,112,255,.06) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 90% 80%,rgba(91,163,255,.05) 0%,transparent 50%),radial-gradient(ellipse 40% 40% at 50% 10%,rgba(29,86,245,.04) 0%,transparent 40%);min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-500);text-decoration:none;transition:color var(--fast) ease}a:hover{color:var(--primary-700)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);font-weight:600;line-height:1.35;color:var(--neutral-900)}
input,select,textarea,button{font-family:var(--font-b);font-size:inherit}
ul,ol{list-style:none}

/* 2. Keyframes */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 3. Container */
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}

/* 4. Header */
header{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,rgba(51,112,255,.92),rgba(29,86,245,.90));
backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border-bottom:1px solid rgba(255,255,255,.18);
box-shadow:0 2px 20px rgba(51,112,255,.15),0 1px 4px rgba(0,0,0,.06);animation:slideDown var(--slow) var(--ease) both}
header .container{display:flex;align-items:center;justify-content:space-between;min-height:60px}
header h1,header .site-title{font-family:var(--font-h);font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}

/* 5. Nav */
nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;padding:6px 16px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.85);border-radius:var(--r-full);transition:all var(--fast) ease;text-decoration:none}
nav a:hover{color:#fff;background:rgba(255,255,255,.16)}
nav a.active{color:var(--primary-600);background:rgba(255,255,255,.92);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.08)}
nav span{color:rgba(255,255,255,.75);font-size:.88rem;padding:6px 12px;display:inline-flex;align-items:center}

/* 6. Main */
main{min-height:calc(100vh - 180px);padding:40px 0;animation:fadeIn var(--slow) var(--ease) both}

/* 7. Welcome */
.welcome-section{text-align:center;padding:64px 24px;position:relative;overflow:hidden}
.welcome-section::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(51,112,255,.07) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:float 6s ease-in-out infinite}
.welcome-section::after{content:'';position:absolute;bottom:-20%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(91,163,255,.06) 0%,transparent 60%);border-radius:50%;pointer-events:none;animation:float 8s ease-in-out infinite reverse}
.welcome-section h2{font-family:var(--font-h);font-size:2.2rem;font-weight:700;color:var(--neutral-900);margin-bottom:16px;position:relative;z-index:1}
.welcome-section p{font-size:1.1rem;color:var(--neutral-500);max-width:600px;margin:0 auto;position:relative;z-index:1}

/* 8. Modules Grid */
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:32px}
.module-card{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:32px 24px;text-align:center;transition:all var(--norm) var(--ease);box-shadow:var(--sh-sm);animation:fadeInUp var(--slow) var(--ease) both;cursor:pointer;position:relative;overflow:hidden}
.module-card:nth-child(1){animation-delay:.05s}.module-card:nth-child(2){animation-delay:.12s}
.module-card:nth-child(3){animation-delay:.19s}.module-card:nth-child(4){animation-delay:.26s}
.module-card:nth-child(5){animation-delay:.33s}.module-card:nth-child(6){animation-delay:.40s}
.module-card:nth-child(7){animation-delay:.47s}.module-card:nth-child(8){animation-delay:.54s}
.module-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(51,112,255,.04) 0%,transparent 60%);opacity:0;transition:opacity var(--norm) ease}
.module-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:rgba(51,112,255,.18)}
.module-card:hover::before{opacity:1}
.module-card h3{font-family:var(--font-h);font-size:1.15rem;font-weight:600;color:var(--neutral-800);margin-bottom:8px}
.module-card p{font-size:.9rem;color:var(--neutral-500);line-height:1.6}
.module-card a{color:inherit;text-decoration:none;display:block}

/* 9. Recent Notifications */
.recent-notifications{margin-top:48px;animation:fadeInUp var(--slow) var(--ease) .3s both}
.recent-notifications h3{font-family:var(--font-h);font-size:1.3rem;font-weight:600;color:var(--neutral-800);margin-bottom:20px}
.recent-notifications ul{display:flex;flex-direction:column;gap:12px}
.recent-notifications li{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-md);padding:16px 20px;transition:all var(--fast) ease;box-shadow:var(--sh-xs)}
.recent-notifications li:hover{box-shadow:var(--sh-sm);border-color:rgba(51,112,255,.16)}
.recent-notifications a{font-weight:500}

/* 10. Form Container & Group */
.form-container{max-width:480px;margin:32px auto;background:var(--glass-bg-s);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:40px 32px;box-shadow:var(--sh-md);animation:fadeInUp var(--slow) var(--ease) both}
.form-container h2{font-family:var(--font-h);font-size:1.6rem;font-weight:700;color:var(--neutral-900);text-align:center;margin-bottom:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.88rem;font-weight:600;color:var(--neutral-700);margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;font-size:.95rem;color:var(--neutral-800);background:rgba(255,255,255,.8);border:1.5px solid var(--neutral-200);border-radius:var(--r-sm);transition:all var(--fast) ease;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-400);box-shadow:0 0 0 3px rgba(51,112,255,.10);background:#fff}
.form-group textarea{min-height:120px;resize:vertical}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--neutral-400)}

/* 11. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;font-family:var(--font-b);font-size:.92rem;font-weight:600;line-height:1.4;color:var(--neutral-700);background:var(--glass-bg-s);border:1.5px solid var(--neutral-200);border-radius:var(--r-sm);cursor:pointer;transition:all var(--fast) var(--ease);text-decoration:none;white-space:nowrap;user-select:none}
.btn:hover{background:var(--neutral-50);border-color:var(--neutral-300);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-xs)}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border:none;box-shadow:var(--sh-glow)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-400),var(--primary-500));box-shadow:0 6px 24px rgba(51,112,255,.30);transform:translateY(-2px);color:#fff}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 12px rgba(51,112,255,.20)}
.btn-secondary{color:var(--primary-600);background:var(--primary-50);border:1.5px solid rgba(51,112,255,.18)}
.btn-secondary:hover{background:var(--primary-100);border-color:rgba(51,112,255,.28);color:var(--primary-700)}
.btn-danger{color:#fff;background:linear-gradient(135deg,var(--danger),#dc2626);border:none;box-shadow:0 4px 16px rgba(239,68,68,.20)}
.btn-danger:hover{background:linear-gradient(135deg,#f87171,var(--danger));box-shadow:0 6px 24px rgba(239,68,68,.28);color:#fff;transform:translateY(-2px)}
.btn-warning{color:#fff;background:linear-gradient(135deg,var(--warning),#d97706);border:none;box-shadow:0 4px 16px rgba(245,158,11,.20)}
.btn-warning:hover{background:linear-gradient(135deg,#fbbf24,var(--warning));box-shadow:0 6px 24px rgba(245,158,11,.28);color:#fff;transform:translateY(-2px)}
.btn-success{color:#fff;background:linear-gradient(135deg,var(--success),#059669);border:none;box-shadow:0 4px 16px rgba(16,185,129,.20)}
.btn-success:hover{background:linear-gradient(135deg,#34d399,var(--success));box-shadow:0 6px 24px rgba(16,185,129,.28);color:#fff;transform:translateY(-2px)}
.btn-disabled,.btn:disabled{color:var(--neutral-400);background:var(--neutral-100);border-color:var(--neutral-200);cursor:not-allowed;box-shadow:none;pointer-events:none;opacity:.7}
.btn-sm{padding:6px 14px;font-size:.82rem;border-radius:var(--r-sm)}

/* 12. Messages */
.message{padding:16px 20px;border-radius:var(--r-sm);font-size:.92rem;font-weight:500;margin-bottom:20px;background:var(--primary-50);color:var(--primary-700);border:1px solid rgba(51,112,255,.15);animation:fadeIn var(--fast) ease both}
.message.error{background:var(--danger-bg);color:var(--danger);border-color:rgba(239,68,68,.15)}
.message.success{background:var(--success-bg);color:#065f46;border-color:rgba(16,185,129,.15)}
.error-message{color:var(--danger);font-size:.85rem;font-weight:500;margin-top:4px}

/* 13. Courses */
.courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:24px}
.course-card{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);transition:all var(--norm) var(--ease);animation:fadeInUp var(--slow) var(--ease) both;position:relative;overflow:hidden}
.course-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-400),var(--primary-600));opacity:0;transition:opacity var(--fast) ease}
.course-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:rgba(51,112,255,.16)}
.course-card:hover::after{opacity:1}
.course-card h3{font-family:var(--font-h);font-size:1.12rem;font-weight:600;margin-bottom:8px;color:var(--neutral-800)}
.course-card p{font-size:.9rem;color:var(--neutral-500);margin-bottom:12px;line-height:1.6}
.course-card .btn{margin-top:12px}

/* 14. Enroll Section */
.enroll-section{background:var(--glass-bg-s);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:32px;margin-top:24px;text-align:center;box-shadow:var(--sh-sm)}
.enroll-section h3{font-family:var(--font-h);font-size:1.2rem;margin-bottom:16px}
.enroll-section p{color:var(--neutral-500);margin-bottom:20px}

/* 15. Admin */
.admin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.admin-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}
.admin-menu a{display:flex;align-items:center;justify-content:center;padding:20px 16px;background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-md);font-weight:600;color:var(--neutral-700);text-decoration:none;transition:all var(--fast) var(--ease);box-shadow:var(--sh-xs)}
.admin-menu a:hover{background:var(--primary-50);border-color:rgba(51,112,255,.18);color:var(--primary-600);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.admin-container h2{font-family:var(--font-h);font-size:1.5rem;font-weight:700;color:var(--neutral-900);margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--primary-100)}
.admin-container h3{font-family:var(--font-h);font-size:1.15rem;font-weight:600;color:var(--neutral-800);margin-bottom:16px}

/* 16. Data Table */
.data-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass-bg-s);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--glass-border);margin-bottom:24px}
.data-table thead tr{background:linear-gradient(135deg,var(--primary-500),var(--primary-700))}
.data-table thead th{padding:14px 20px;font-size:.85rem;font-weight:600;color:#fff;text-align:left;text-transform:uppercase;letter-spacing:.04em}
.data-table tbody tr{transition:background var(--fast) ease;border-bottom:1px solid var(--neutral-100)}
.data-table tbody tr:hover{background:var(--primary-50)}
.data-table tbody tr:last-child{border-bottom:none}
.data-table td{padding:12px 20px;font-size:.9rem;color:var(--neutral-700);vertical-align:middle}
.data-table td a{font-weight:500}

/* 17. Users Table */
.users-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass-bg-s);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--glass-border);margin-bottom:24px}
.users-table thead tr{background:linear-gradient(135deg,var(--primary-500),var(--primary-700))}
.users-table thead th{padding:14px 20px;font-size:.85rem;font-weight:600;color:#fff;text-align:left;text-transform:uppercase;letter-spacing:.04em}
.users-table tbody tr{transition:background var(--fast) ease;border-bottom:1px solid var(--neutral-100)}
.users-table tbody tr:hover{background:var(--primary-50)}
.users-table tbody tr:last-child{border-bottom:none}
.users-table td{padding:12px 20px;font-size:.9rem;color:var(--neutral-700);vertical-align:middle}

/* 18. Action Buttons */
.action-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.action-buttons .btn{padding:6px 14px;font-size:.82rem}

/* 19. Checkbox */
.checkbox-group{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.checkbox-label{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--neutral-700);cursor:pointer;padding:8px 12px;border-radius:var(--r-sm);transition:background var(--fast) ease}
.checkbox-label:hover{background:var(--primary-50)}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;accent-color:var(--primary-500);cursor:pointer}

/* 20. Login Prompt & Hint */
.login-prompt{text-align:center;padding:48px 24px;background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-lg);max-width:480px;margin:40px auto;box-shadow:var(--sh-md)}
.login-prompt h2{font-family:var(--font-h);margin-bottom:12px}
.login-prompt p{color:var(--neutral-500);margin-bottom:20px}
.login-hint{text-align:center;margin-top:16px;font-size:.88rem;color:var(--neutral-500)}
.login-hint a{font-weight:600;color:var(--primary-500)}

/* 21. Footer */
footer{margin-top:48px;padding:24px 0;border-top:1px solid var(--neutral-200);background:var(--neutral-50);text-align:center;color:var(--neutral-500);font-size:.85rem}
footer a{color:var(--primary-500);font-weight:500}
footer p{margin:4px 0}

/* 22. Notification Cards */
.notification-card-link{display:block;text-decoration:none;color:inherit}
.notification-card{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--sh-sm);transition:all var(--fast) ease;animation:fadeInUp var(--slow) var(--ease) both;cursor:pointer}
.notification-card:hover{box-shadow:var(--sh-md);border-color:rgba(51,112,255,.16)}
.notification-card h3{font-family:var(--font-h);font-size:1.05rem;font-weight:600;margin-bottom:6px}
.notification-card p{font-size:.9rem;color:var(--neutral-500)}
.notification-detail{max-width:800px;margin:0 auto;background:var(--glass-bg-s);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-md)}
.notification-detail h2{font-family:var(--font-h);font-size:1.5rem;margin-bottom:16px}
.notification-image img{border-radius:var(--r-md);margin:16px 0;box-shadow:var(--sh-sm)}
.notification-content{font-size:.95rem;line-height:1.8;color:var(--neutral-700)}
.notification-content p{margin-bottom:12px}

/* 23. Resources */
.resources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:24px}
.resource-card-link{display:block;text-decoration:none;color:inherit}
.resource-card{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:all var(--norm) var(--ease);animation:fadeInUp var(--slow) var(--ease) both;cursor:pointer}
.resource-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:rgba(51,112,255,.16)}
.resource-image{width:100%;height:180px;object-fit:cover;background:var(--primary-50)}
.resource-image img{width:100%;height:100%;object-fit:cover}
.resource-date{font-size:.8rem;color:var(--neutral-400);margin-bottom:6px;padding:16px 20px 0}
.resource-content{padding:8px 20px 20px}
.resource-content h3{font-family:var(--font-h);font-size:1.05rem;font-weight:600;margin-bottom:8px}
.resource-content p{font-size:.88rem;color:var(--neutral-500);line-height:1.6}
.resource-detail{max-width:800px;margin:0 auto;background:var(--glass-bg-s);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-md)}
.resource-detail h2{font-family:var(--font-h);font-size:1.5rem;margin-bottom:16px}
.resource-video{margin:20px 0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.resource-video video,.resource-video iframe{width:100%;border-radius:var(--r-md);display:block}

/* 24. Comments */
.comments-list{margin-top:32px}
.comments-list h3{font-family:var(--font-h);font-size:1.15rem;font-weight:600;margin-bottom:16px}
.comment-item{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-md);padding:16px 20px;margin-bottom:12px;box-shadow:var(--sh-xs);transition:all var(--fast) ease}
.comment-item:hover{box-shadow:var(--sh-sm)}
.comment-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.comment-author{font-weight:600;font-size:.9rem;color:var(--neutral-800)}
.comment-time{font-size:.8rem;color:var(--neutral-400)}
.comment-content{font-size:.92rem;color:var(--neutral-700);line-height:1.7}
.comment-form{margin-top:24px;background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-md);padding:20px 24px;box-shadow:var(--sh-xs)}
.comment-form h4{font-family:var(--font-h);font-size:1rem;font-weight:600;margin-bottom:12px}
.comment-form textarea{width:100%;min-height:80px;padding:10px 14px;border:1.5px solid var(--neutral-200);border-radius:var(--r-sm);font-size:.92rem;resize:vertical;outline:none;transition:all var(--fast) ease}
.comment-form textarea:focus{border-color:var(--primary-400);box-shadow:0 0 0 3px rgba(51,112,255,.10);background:#fff}
.comment-form .btn{margin-top:12px}

/* 25. Forum Posts */
.forum-posts-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.forum-post-link{display:block;text-decoration:none;color:inherit}
.forum-post-item{background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--r-md);padding:20px 24px;box-shadow:var(--sh-sm);transition:all var(--fast) ease;animation:fadeInUp var(--slow) var(--ease) both;cursor:pointer}
.forum-post-item:hover{box-shadow:var(--sh-md);border-color:rgba(51,112,255,.16)}
.post-header{margin-bottom:8px}
.post-header h3{font-family:var(--font-h);font-size:1.08rem;font-weight:600;color:var(--neutral-800)}
.post-header h3:hover{color:var(--primary-600)}
.post-meta{display:flex;align-items:center;gap:16px;font-size:.82rem;color:var(--neutral-400);margin-bottom:8px;flex-wrap:wrap}
.post-meta span{display:inline-flex;align-items:center;gap:4px}
.post-content{font-size:.92rem;color:var(--neutral-600);line-height:1.7}
.post-content p{margin-bottom:10px}
.post-image{margin:16px 0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
.post-image img{width:100%;display:block;border-radius:var(--r-md)}
.post-detail{max-width:800px;margin:0 auto;background:var(--glass-bg-s);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-md)}
.post-detail h2{font-family:var(--font-h);font-size:1.5rem;font-weight:700;margin-bottom:12px}
.post-detail .post-meta{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--neutral-200)}
.post-detail .post-content{font-size:.95rem;line-height:1.8}
.post-detail-image{margin:20px 0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.post-detail-image img{width:100%;display:block}
.post-detail-video{margin:20px 0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-md)}
.post-detail-video video,.post-detail-video iframe{width:100%;display:block;border-radius:var(--r-md)}

/* 26. Like and Comment System */
.like-section{margin:20px 0}
.like-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-full);cursor:pointer;transition:all var(--fast) ease}
.like-button:hover{transform:scale(1.05);box-shadow:var(--sh-sm)}
.like-button.liked{background:var(--primary-100);border-color:var(--primary-300);color:var(--primary-600)}
.like-button.liked .like-icon{transform:scale(1.1);animation:heartBeat 0.3s ease}
.like-icon{font-size:1.2rem}
.like-count{font-size:.9rem;font-weight:500}
.like-count-display{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;color:var(--neutral-500)}
.post-likes{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;color:var(--neutral-400)}
.attachment-section{margin:20px 0}
.attachment-section .btn{display:inline-flex;align-items:center;gap:8px}

.comments-section{margin-top:32px}
.comments-section h3{font-family:var(--font-h);font-size:1.2rem;font-weight:600;margin-bottom:20px}
.comment-form{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:20px;margin-bottom:24px;box-shadow:var(--sh-sm)}
.comment-form .form-group{margin-bottom:16px}
.comment-form textarea{width:100%;padding:12px;border:1.5px solid var(--neutral-200);border-radius:var(--r-md);background:var(--glass-bg-s);resize:vertical;min-height:100px}
.comment-form textarea:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(51,112,255,.1)}

.comments-list{display:flex;flex-direction:column;gap:16px}
.comment-item{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-sm);animation:fadeInUp var(--slow) var(--ease) both}
.comment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.comment-author{font-weight:600;color:var(--neutral-800)}
.comment-time{font-size:.82rem;color:var(--neutral-400);margin-left:8px}
.comment-delete{font-size:.8rem;color:var(--danger-500);text-decoration:none}
.comment-delete:hover{text-decoration:underline}
.comment-content{font-size:.92rem;color:var(--neutral-600);line-height:1.6}

@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

/* 26. Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin:32px 0;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;font-size:.88rem;font-weight:500;color:var(--neutral-600);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-sm);transition:all var(--fast) ease;text-decoration:none}
.pagination a:hover{background:var(--primary-50);border-color:rgba(51,112,255,.18);color:var(--primary-600)}
.pagination a.active,.pagination span.current{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-color:transparent;box-shadow:var(--sh-glow)}
.pagination .disabled{opacity:.4;pointer-events:none}

/* 27. Form Note */
.form-note{font-size:.84rem;color:var(--neutral-400);margin-top:6px;font-style:italic}

/* 28. Notifications List */
.notifications-list{display:flex;flex-direction:column;gap:12px;margin-top:20px}

/* 29. Pending Badge */
.pending-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;font-size:.72rem;font-weight:700;border-radius:var(--r-full);margin-left:6px;vertical-align:middle;transition:all var(--fast) ease}
.pending-badge.has-pending{background:var(--danger);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,.30);animation:fadeIn var(--fast) ease both}
.pending-badge.no-pending{background:var(--neutral-200);color:var(--neutral-400)}

/* 30. QQ Group Info */
.qq-group-info{background:var(--glass-bg) !important;border:1px solid var(--glass-border) !important;border-radius:var(--r-md) !important;padding:16px 20px !important;margin:16px 0 !important;box-shadow:var(--sh-xs) !important;font-size:.92rem !important;color:var(--neutral-700) !important}

/* 31. Responsive */
@media(max-width:768px){
.container{padding:0 16px}
header .container{flex-direction:column;gap:8px;padding:12px 16px}
nav{justify-content:center}
nav a{padding:5px 12px;font-size:.82rem}
.welcome-section{padding:40px 16px}
.welcome-section h2{font-size:1.6rem}
.modules-grid{grid-template-columns:1fr 1fr;gap:16px}
.courses{grid-template-columns:1fr}
.resources-grid{grid-template-columns:1fr}
.admin-menu{grid-template-columns:1fr 1fr}
.form-container{margin:20px 16px;padding:28px 20px}
.data-table,.users-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.notification-detail,.resource-detail,.post-detail{padding:24px 20px;margin:0 8px}
main{padding:24px 0}
footer{margin-top:32px}
}
@media(max-width:480px){
.modules-grid{grid-template-columns:1fr}
.admin-menu{grid-template-columns:1fr}
nav{gap:2px}
nav a{padding:4px 10px;font-size:.78rem}
.welcome-section h2{font-size:1.3rem}
.form-container{padding:24px 16px}
header h1,header .site-title{font-size:1rem}
.post-meta{flex-direction:column;gap:4px}
.action-buttons{flex-direction:column}
.action-buttons .btn{width:100%;justify-content:center}
}

/* 32. Selection */
::selection{background:rgba(51,112,255,.18);color:var(--neutral-900)}
::-moz-selection{background:rgba(51,112,255,.18);color:var(--neutral-900)}

/* 33. Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--neutral-50);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb{background:var(--primary-200);border-radius:var(--r-full);border:2px solid var(--neutral-50)}
::-webkit-scrollbar-thumb:hover{background:var(--primary-300)}
html{scrollbar-width:thin;scrollbar-color:var(--primary-200) var(--neutral-50)}