* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, sans-serif; }
body { background:#f1f5f9; color:#1e293b; }
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f766e 0%,#0891b2 100%); }
.login-box { background:white; padding:40px; border-radius:16px; width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.login-box h1 { color:#0f766e; text-align:center; margin-bottom:8px; font-size:28px; }
.login-box .subtitle { text-align:center; color:#64748b; margin-bottom:30px; font-size:14px; }
.login-box label { display:block; margin-bottom:6px; font-weight:600; font-size:13px; color:#334155; }
.login-box input, .login-box select { width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:8px; margin-bottom:16px; font-size:14px; }
.login-box button { width:100%; padding:12px; background:#0f766e; color:white; border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size:15px; }
.login-box button:hover { background:#115e59; }
.role-info { background:#f0fdfa; border-left:4px solid #0f766e; padding:10px; font-size:12px; color:#134e4a; border-radius:4px; }
.app { display:flex; min-height:100vh; }
.sidebar { width:260px; background:#0f766e; color:white; padding:20px 0; position:fixed; height:100vh; overflow-y:auto; }
.sidebar .logo { padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,0.15); }
.sidebar .logo h2 { font-size:22px; }
.sidebar .user-info { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.15); }
.sidebar .user-info .avatar { width:40px; height:40px; border-radius:50%; background:#fbbf24; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; color:#0f766e; }
.sidebar .user-info .name { font-weight:600; margin-left:10px; }
.sidebar .user-info .role { font-size:11px; opacity:0.8; margin-left:10px; display:block; }
.sidebar nav a { display:block; padding:12px 20px; color:white; text-decoration:none; border-left:3px solid transparent; cursor:pointer; font-size:14px; }
.sidebar nav a:hover { background:rgba(255,255,255,0.1); }
.sidebar nav a.active { background:rgba(255,255,255,0.15); border-left-color:#fbbf24; }
.sidebar nav a i { width:20px; margin-right:10px; }
.sidebar .logout-btn { margin:20px; padding:10px; background:#dc2626; color:white; border:none; border-radius:6px; cursor:pointer; width:calc(100% - 40px); }
.main { margin-left:260px; flex:1; padding:24px; }
.topbar { background:white; padding:16px 24px; border-radius:10px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.topbar h1 { font-size:22px; color:#0f766e; }
.topbar .breadcrumb { font-size:12px; color:#64748b; }
.card { background:white; padding:20px; border-radius:10px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.card h3 { margin-bottom:16px; color:#0f766e; font-size:16px; padding-bottom:10px; border-bottom:2px solid #f0fdfa; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card { background:white; padding:20px; border-radius:10px; border-left:4px solid #0f766e; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.stat-card .label { font-size:12px; color:#64748b; text-transform:uppercase; }
.stat-card .value { font-size:28px; font-weight:bold; color:#0f766e; margin:6px 0; }
.stat-card .sub { font-size:12px; color:#10b981; }
table { width:100%; border-collapse:collapse; }
table th { background:#f0fdfa; padding:12px; text-align:left; font-size:13px; color:#0f766e; border-bottom:2px solid #0f766e; }
table td { padding:12px; border-bottom:1px solid #e2e8f0; font-size:13px; }
table tr:hover { background:#f8fafc; }
.badge { padding:4px 10px; border-radius:12px; font-size:11px; font-weight:600; display:inline-block; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-info { background:#dbeafe; color:#1e40af; }
.badge-danger { background:#fee2e2; color:#991b1b; }
.btn { padding:8px 16px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; text-decoration:none; display:inline-block; }
.btn-primary { background:#0f766e; color:white; }
.btn-primary:hover { background:#115e59; }
.btn-secondary { background:#e2e8f0; color:#334155; }
.btn-danger { background:#dc2626; color:white; }
.btn-sm { padding:5px 10px; font-size:12px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:6px; font-weight:600; font-size:13px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:9px 12px; border:1px solid #cbd5e1; border-radius:6px; font-size:13px; }
.form-group textarea { resize:vertical; min-height:70px; }
.alert { padding:12px; border-radius:6px; margin-bottom:14px; font-size:13px; }
.alert-info { background:#dbeafe; color:#1e40af; border-left:4px solid #1e40af; }
.alert-success { background:#dcfce7; color:#166534; border-left:4px solid #166534; }
.alert-warning { background:#fef3c7; color:#92400e; border-left:4px solid #92400e; }
.alert-danger { background:#fee2e2; color:#991b1b; border-left:4px solid #991b1b; }
.note-card { background:#fffbeb; border-left:4px solid #f59e0b; padding:12px; border-radius:6px; margin-bottom:10px; font-size:13px; }
.note-card .meta { font-size:11px; color:#92400e; margin-bottom:6px; }
.profile-header { display:flex; align-items:center; padding:20px; background:linear-gradient(135deg,#0f766e,#0891b2); color:white; border-radius:10px; margin-bottom:20px; }
.profile-header .avatar-big { width:80px; height:80px; border-radius:50%; background:#fbbf24; color:#0f766e; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:32px; margin-right:20px; }
.progress-bar { background:#e2e8f0; height:8px; border-radius:4px; overflow:hidden; margin-top:4px; }
.progress-bar .fill { background:linear-gradient(90deg,#0f766e,#0891b2); height:100%; }
.student-card { display:flex; align-items:center; padding:14px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:10px; cursor:pointer; text-decoration:none; color:inherit; }
.student-card:hover { border-color:#0f766e; background:#f0fdfa; }
.student-card .avatar { width:50px; height:50px; border-radius:50%; background:#0f766e; color:white; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:18px; margin-right:14px; }