.app-layout[data-v-4e8118b1]{display:flex;width:100%;height:100%}.sidebar[data-v-4e8118b1]{width:var(--sidebar-width);height:100%;background:var(--color-sidebar-bg);border-right:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;transition:var(--transition);z-index:100}.sidebar-header[data-v-4e8118b1]{display:flex;align-items:center;gap:10px;padding:0 20px;height:var(--header-height);border-bottom:1px solid var(--color-border)}.sidebar-header .logo[data-v-4e8118b1]{font-size:24px}.sidebar-title[data-v-4e8118b1]{font-size:16px;font-weight:700;color:var(--color-lavender-dark);white-space:nowrap}.sidebar-nav[data-v-4e8118b1]{flex:1;overflow-y:auto;padding:12px 0}.nav-group[data-v-4e8118b1]{margin-bottom:8px}.nav-group-title[data-v-4e8118b1]{display:flex;align-items:center;gap:8px;padding:10px 20px;font-size:13px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--transition)}.nav-group-title[data-v-4e8118b1]:hover{background:#c3b1e126}.nav-group-title .arrow[data-v-4e8118b1]{margin-left:auto;font-size:18px;transition:transform .2s ease;transform:rotate(90deg)}.nav-group-title .arrow.expanded[data-v-4e8118b1]{transform:rotate(-90deg)}.nav-item[data-v-4e8118b1]{display:flex;align-items:center;gap:10px;padding:10px 20px 10px 36px;font-size:14px;color:var(--color-text-primary);text-decoration:none;transition:var(--transition);border-left:3px solid transparent}.nav-item.home-item[data-v-4e8118b1]{padding-left:20px;font-weight:600}.nav-item[data-v-4e8118b1]:hover{background:#87ceeb1f}.nav-item.router-link-active[data-v-4e8118b1]{background:#87ceeb33;border-left-color:var(--color-primary);color:var(--color-primary-dark);font-weight:600}.nav-icon[data-v-4e8118b1]{font-size:16px;width:20px;text-align:center;flex-shrink:0}.nav-text[data-v-4e8118b1]{white-space:nowrap}.main-area[data-v-4e8118b1]{flex:1;height:100%;display:flex;flex-direction:column;overflow:hidden}.mobile-header[data-v-4e8118b1]{display:none;align-items:center;gap:12px;height:var(--header-height);padding:0 16px;background:var(--color-card-bg);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.menu-toggle[data-v-4e8118b1]{font-size:20px;background:none;border:none;cursor:pointer;padding:4px 8px;color:var(--color-text-primary)}.mobile-title[data-v-4e8118b1]{font-size:16px;font-weight:600;color:var(--color-text-primary)}.main-content[data-v-4e8118b1]{flex:1;overflow-y:auto;padding:24px}.mobile-overlay[data-v-4e8118b1]{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:99}.class-switcher[data-v-4e8118b1]{padding:12px 16px;border-top:1px solid var(--color-border);background:var(--color-card-bg);display:flex;flex-direction:column;gap:6px}.switcher-label[data-v-4e8118b1]{font-size:12px;font-weight:600;color:var(--color-text-secondary)}.switcher-select[data-v-4e8118b1]{width:100%;padding:6px 8px;font-size:13px;color:var(--color-text-primary);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);outline:none}.switcher-select[data-v-4e8118b1]:hover{border-color:var(--color-lavender)}.switcher-select[data-v-4e8118b1]:focus{border-color:var(--color-lavender);box-shadow:0 0 0 2px #c3b1e140}.switcher-hint[data-v-4e8118b1]{font-size:11px;color:var(--color-text-secondary);margin:0;line-height:1.4}.user-panel[data-v-4e8118b1]{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--color-border);background:var(--color-card-bg)}.user-info[data-v-4e8118b1]{flex:1;display:flex;align-items:center;gap:10px;min-width:0}.user-avatar[data-v-4e8118b1]{font-size:20px;flex-shrink:0}.user-meta[data-v-4e8118b1]{display:flex;flex-direction:column;min-width:0}.user-name[data-v-4e8118b1]{font-size:13px;font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role[data-v-4e8118b1]{font-size:12px;color:var(--color-text-secondary)}.logout-btn[data-v-4e8118b1]{flex-shrink:0;padding:4px 12px;font-size:12px;border:none;border-radius:var(--radius-sm);background:var(--color-sakura-light);color:var(--color-sakura-dark);cursor:pointer;transition:var(--transition)}.logout-btn[data-v-4e8118b1]:hover{background:var(--color-sakura);color:#fff}@media (max-width: 1023px){.sidebar[data-v-4e8118b1]{width:var(--sidebar-width-tablet)}.sidebar-title[data-v-4e8118b1]{font-size:14px}}@media (max-width: 767px){.sidebar[data-v-4e8118b1]{position:fixed;left:0;top:0;transform:translate(-100%);box-shadow:var(--shadow-lg)}.sidebar.mobile-open[data-v-4e8118b1]{transform:translate(0)}.mobile-header[data-v-4e8118b1]{display:flex}.mobile-overlay[data-v-4e8118b1]{display:block}.main-content[data-v-4e8118b1]{padding:16px}}:root{--color-mint: #B5EAD7;--color-mint-light: #D4F0E4;--color-mint-dark: #8FD4B9;--color-sakura: #FFB6C1;--color-sakura-light: #FFD1DC;--color-sakura-dark: #FF9FAE;--color-sky: #87CEEB;--color-sky-light: #B0E0E6;--color-sky-dark: #6BB6D9;--color-lavender: #C3B1E1;--color-lavender-light: #E6D5F5;--color-lavender-dark: #A78BC9;--color-peach: #FFDAB9;--color-peach-light: #FFE5C4;--color-peach-dark: #FFC090;--color-lemon: #FFF3B0;--color-lemon-light: #FFF8D6;--color-lemon-dark: #F0E060;--color-primary: #87CEEB;--color-primary-dark: #6BB6D9;--color-boy: #87CEEB;--color-girl: #FFB6C1;--color-bg: #F8F6FE;--color-card-bg: #FFFFFF;--color-sidebar-bg: #EFEAFB;--color-text-primary: #3D3D4E;--color-text-secondary: #8E8E9E;--color-text-light: #BCBCBC;--color-border: #E8E4F3;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--sidebar-width: 240px;--sidebar-width-tablet: 200px;--header-height: 60px;--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Microsoft YaHei,PingFang SC,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-lavender);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-lavender-dark)}.card{background:var(--color-card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px}.card-title{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-bottom:16px;padding-left:12px;border-left:4px solid var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 20px;border:none;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:var(--transition);white-space:nowrap}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-lavender-light);color:var(--color-lavender-dark)}.btn-secondary:hover{background:var(--color-lavender)}.btn-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary)}.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}.input{width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;color:var(--color-text-primary);background:var(--color-card-bg);transition:var(--transition);outline:none}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #87ceeb26}.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:500}.tag-mint{background:var(--color-mint-light);color:var(--color-mint-dark)}.tag-sakura{background:var(--color-sakura-light);color:var(--color-sakura-dark)}.tag-sky{background:var(--color-sky-light);color:var(--color-sky-dark)}.tag-lavender{background:var(--color-lavender-light);color:var(--color-lavender-dark)}.tag-peach{background:var(--color-peach-light);color:var(--color-peach-dark)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--color-text-light);text-align:center}.empty-state .empty-icon{font-size:48px;margin-bottom:12px}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}