:root{--sidebar-width:250px;--header-height:56px;--primary:#2563eb;--primary-light:#dbeafe;--bg:#f8fafc;--bg-white:#fff;--text:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--shadow:0 1px 3px rgba(0,0,0,.08);--radius:8px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-width);background:var(--bg-white);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .2s}
.sidebar-header{padding:16px 20px;border-bottom:1px solid var(--border)}
.logo{font-size:16px;font-weight:700;color:var(--primary)}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px}
.nav-item{display:block;padding:10px 14px;color:var(--text);text-decoration:none;border-radius:var(--radius);font-size:14px;transition:background .15s}
.nav-item:hover{background:var(--primary-light);color:var(--primary)}
.nav-home{font-weight:600;margin-bottom:4px}
.nav-group{margin-top:4px}
.nav-group-title{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;border:none;background:none;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;border-radius:var(--radius);transition:background .15s}
.nav-group-title:hover{background:var(--bg)}
.nav-group-title .arrow{font-size:12px;transition:transform .2s}
.nav-group-title.collapsed .arrow{transform:rotate(-90deg)}
.nav-group-items{padding-left:12px;overflow:hidden;max-height:500px;transition:max-height .2s}
.nav-group-title.collapsed+.nav-group-items{max-height:0}
.sidebar-footer{padding:12px 20px;border-top:1px solid var(--border);text-align:center}
.version{font-size:12px;color:var(--text-muted)}
.main-content{flex:1;margin-left:var(--sidebar-width);min-height:100vh}
.top-header{height:var(--header-height);background:var(--bg-white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:16px;position:sticky;top:0;z-index:50}
.menu-toggle{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}
.page-title{font-size:18px;font-weight:600;flex:1}
.header-right{display:flex;align-items:center;gap:12px}
.user-info{font-size:14px;color:var(--text-muted)}
.content-area{padding:24px}
.department-section{margin-bottom:32px}
.department-title{font-size:16px;font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.program-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 12px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);transition:all .15s;box-shadow:var(--shadow)}
.program-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(37,99,235,.15);transform:translateY(-2px)}
.card-icon{font-size:28px}
.card-name{font-size:14px;font-weight:500;text-align:center}
@media(max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.menu-toggle{display:block}}