*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#2a90d8,#07c7ee);min-height:100vh;padding:15px}.container{max-width:1400px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.header{background:linear-gradient(90deg,#345a8a,#2f5074);color:#fff;padding:20px 30px;text-align:center}.header h1{font-size:1.8rem;margin-bottom:5px}.header p{opacity:.9;font-size:.9rem}.stats{display:flex;justify-content:center;gap:30px;margin-top:15px;flex-wrap:wrap}.stat-item{text-align:center}.stat-value{font-size:1.6rem;font-weight:700}.stat-label{font-size:.85rem;opacity:.8}.controls{padding:15px 30px;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;gap:15px;flex-wrap:wrap;align-items:center}.search-box{flex:1;min-width:200px;position:relative}.search-box input{width:100%;padding:10px 16px 10px 40px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;transition:all .3s}.search-box input:focus{outline:none;border-color:#4f46e5}.search-box:before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%)}.filter-group{display:flex;gap:10px;align-items:center}.filter-group label{font-size:14px;color:#64748b;font-weight:500}.filter-group select{padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:all .3s}.filter-group select:focus{outline:none;border-color:#4f46e5}.column-toggle-btn{padding:8px 12px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;cursor:pointer;transition:all .3s}.column-toggle-btn:hover{border-color:#4f46e5;background:#f1f5f9}.column-dropdown{position:relative;display:inline-block}.column-dropdown-content{display:none;position:absolute;right:0;top:100%;margin-top:5px;background:#fff;min-width:180px;box-shadow:0 10px 25px #00000026;border-radius:8px;z-index:100;padding:10px 0;max-height:400px;overflow-y:auto}.column-dropdown-content.show{display:block}.column-dropdown-item{padding:8px 15px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#334155}.column-dropdown-item:hover{background:#f1f5f9}.column-dropdown-item input[type=checkbox]{cursor:pointer}.table-container{overflow-x:auto;max-height:70vh;overflow-y:auto}table{width:100%;border-collapse:collapse;font-size:13px}thead{position:sticky;top:0;z-index:10}th{background:#f1f5f9;padding:0;text-align:left;font-weight:600;color:#475569;border-bottom:2px solid #e2e8f0;white-space:nowrap;vertical-align:top}.th-content{padding:10px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:5px;transition:background .2s;height:40px}.th-content:hover{background:#e2e8f0}.sort-arrow{font-size:10px;color:#94a3b8;transition:color .2s}.th-content.sort-asc .sort-arrow,.th-content.sort-desc .sort-arrow{color:#4f46e5}td{padding:12px;border-bottom:1px solid #f1f5f9;color:#334155}tr:hover{background:#f8fafc}.school-tag{position:relative;display:inline-flex;align-items:center;padding:3px 8px 3px 40px;background:#fef3c7;color:#92400e;border-radius:6px;font-size:11px;font-weight:500}.school-logo{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:3px;object-fit:contain}.loading{text-align:center;padding:60px;color:#64748b}.loading-spinner{display:inline-block;width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#4f46e5;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}.error{text-align:center;padding:60px;color:#dc2626}.empty{text-align:center;padding:60px;color:#64748b}.footer{padding:15px 30px;background:#f8fafc;border-top:1px solid #e2e8f0;text-align:center;font-size:12px;color:#64748b}.footer a{color:#4f46e5;text-decoration:none}.footer a:hover{text-decoration:underline}td[data-col=student_id],th[data-col=student_id],td[data-col=page_id],th[data-col=page_id],td[data-col=spine_id],th[data-col=spine_id]{max-width:80px;width:40px;text-align:center}.col-hidden{display:none!important}@media (max-width: 768px){.header h1{font-size:1.5rem}.stats{gap:20px}.stat-value{font-size:1.5rem}.controls{flex-direction:column;align-items:stretch}.search-box{min-width:100%}.filter-group{justify-content:space-between}th,td{padding:10px 8px;font-size:12px}}.students-container{padding:20px 30px;max-height:70vh;overflow-y:auto}.students-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px}@media (max-width: 768px){.students-grid{grid-template-columns:1fr}.students-container{padding:15px}}.student-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden;transition:all .3s ease;border:1px solid #e2e8f0}.student-card:hover{box-shadow:0 4px 16px #0000001f;transform:translateY(-2px)}.student-card.expanded{box-shadow:0 4px 20px #00000026}.student-header{display:flex;align-items:center;gap:15px;padding:15px;cursor:pointer;background:linear-gradient(135deg,#f8fafc,#f1f5f9);transition:background .2s}.student-header:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0)}.student-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid white;box-shadow:0 2px 8px #00000026;flex-shrink:0}.student-info{flex:1;min-width:0}.student-name{font-size:1.1rem;font-weight:600;color:#1e293b;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-name-sub{font-size:.85rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-meta{font-size:.75rem;color:#94a3b8;margin-top:4px}.student-school{display:flex;align-items:center;gap:6px;flex-shrink:0}.student-school-logo{width:36px;height:36px;object-fit:contain}.expand-icon{font-size:1.2rem;color:#94a3b8;transition:transform .3s;margin-left:10px}.student-card.expanded .expand-icon{transform:rotate(180deg)}.student-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.student-card.expanded .student-content{max-height:2000px}.pages-container{padding:15px;background:#fafafa}.pages-title{font-size:.85rem;color:#64748b;margin-bottom:12px;font-weight:500}.page-item{background:#fff;border-radius:8px;padding:12px;margin-bottom:10px;border:1px solid #e2e8f0;transition:all .2s}.page-item:last-child{margin-bottom:0}.page-item:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0000000d}.page-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.page-avatar{width:45px;height:45px;border-radius:6px;object-fit:cover;flex-shrink:0}.page-info{flex:1;min-width:0}.page-name{font-weight:600;color:#334155;font-size:.95rem}.page-id{font-size:.75rem;color:#94a3b8}.page-link{color:#4f46e5;text-decoration:none}.page-link:hover{text-decoration:underline}.page-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:4px;font-size:.75rem;font-weight:500}.tag-install-jp{background:#fee2e2;color:#991b1b}.tag-install-jp.not-installed{background:#f3f4f6;color:#6b7280}.tag-install-cn{background:#dcfce7;color:#166534}.tag-install-cn.not-installed{background:#f3f4f6;color:#6b7280}.tag-install-global{background:#dbeafe;color:#1e40af}.tag-install-global.not-installed,.tag-npc{background:#f3f4f6;color:#6b7280}.tag-rarity{background:#fef3c7;color:#92400e}.tag-limited{background:#fce7f3;color:#be185d}.spines-section{margin-top:8px;padding-top:10px;border-top:1px dashed #e2e8f0}.spines-label{font-size:.75rem;color:#64748b;margin-bottom:6px}.spines-list{display:flex;flex-wrap:wrap;gap:6px}.spine-id{display:inline-block;padding:4px 10px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;font-size:.8rem;font-family:Courier New,monospace;color:#475569}.controls-extra{display:flex;gap:10px;flex-wrap:wrap}.btn{padding:8px 16px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:500}.btn-secondary{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}.btn-secondary:hover{background:#e2e8f0}.empty-state{text-align:center;padding:60px 20px;color:#64748b}.empty-state-icon{font-size:3rem;margin-bottom:15px}.nav-links{display:flex;justify-content:center;gap:20px;margin-top:10px}.nav-links a{color:#ffffffe6;text-decoration:none;font-size:.9rem;padding:5px 12px;border-radius:6px;transition:all .2s}.nav-links a:hover{background:#ffffff26;color:#fff}.nav-links a.active{background:#fff3;color:#fff;font-weight:500}