@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#050914;
  --side:#070f1e;
  --card:#0b1322;
  --card2:#101827;
  --line:#1d2a42;
  --line2:#263653;
  --text:#f8fafc;
  --muted:#9aa6bb;
  --purple:#8b5cf6;
  --purple2:#4c1d95;
  --green:#43d66f;
  --red:#ff4d6d;
  --yellow:#f5c542;
  --blue:#38bdf8;
  --orange:#f59e0b;
  --shadow:0 20px 55px rgba(0,0,0,.32);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(circle at 18% 0%, rgba(139,92,246,.18), transparent 30%),
    radial-gradient(circle at 80% 18%, rgba(56,189,248,.10), transparent 28%),
    linear-gradient(135deg,#030712,#07111f 58%,#050914);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}

button,input,select{font-family:inherit}

button{cursor:pointer}

small{color:var(--muted)}

.loginPage{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.08fr .92fr;
}

.loginLeft{
  position:relative;
  overflow:hidden;
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.glowOrb{
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  right:-170px;
  top:-150px;
  background:radial-gradient(circle, rgba(139,92,246,.25), transparent 65%);
}

.loginLogo{
  width:230px;
  border-radius:24px;
  box-shadow:var(--shadow);
}

.loginLeft h1{
  margin:30px 0 12px;
  font-size:66px;
  line-height:.95;
  letter-spacing:-2px;
}

.loginLeft p{
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  max-width:720px;
}

.chips{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.chips span{
  border:1px solid var(--line);
  background:rgba(11,19,34,.72);
  padding:11px 14px;
  border-radius:999px;
  color:#dbe3f2;
  font-weight:700;
}

.loginRight{
  display:grid;
  place-items:center;
  padding:34px;
}

.loginCard{
  width:100%;
  max-width:460px;
  background:rgba(11, 19, 34, 0.65);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:32px;
  padding:40px;
  box-shadow: 
    0 40px 100px -20px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(180%);
}

.loginIcon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
  border:1px solid rgba(139, 92, 246, 0.3);
  color:var(--purple);
  margin-bottom:24px;
  box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.2);
}

.loginCard h2{font-size:34px;margin:0 0 10px; font-weight: 900; letter-spacing: -1px;}

.loginCard p{margin:0 0 28px;color:var(--muted);line-height:1.6; font-size: 15px;}

.loginCard label{display:block;margin:18px 0 10px;font-weight:800;color:#d8deea;font-size:13px; text-transform: uppercase; letter-spacing: 1.5px;}

.inputIcon input, .loginCard select{
  width:100%;
  border:1px solid rgba(255, 255, 255, 0.05);
  background:rgba(7, 13, 25, 0.5) !important;
  color:var(--text);
  border-radius:16px;
  padding:16px 16px 16px 52px !important; /* Padding esquerdo forçado para garantir espaço do ícone */
  outline:0;
  transition: all 0.2s ease;
  font-size: 15px;
}

.inputIcon input:focus, .loginCard select:focus{
  border-color:var(--purple);
  background:rgba(139, 92, 246, 0.05) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.inputIcon{position:relative; width: 100%;}

.inputIcon svg{
  position:absolute;
  left:18px; /* Ajustado posição do ícone */
  top:50%;
  transform:translateY(-50%);
  color:var(--purple); /* Ícone com a cor do tema para ficar mais bonito */
  opacity: 0.7;
  pointer-events: none;
  z-index: 10;
}

/* Removida regra duplicada que estava sobrescrevendo */

.primary{
  width:100%;
  border:0;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:white;
  border-radius:15px;
  padding:14px 16px;
  margin:20px 0 12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 14px 32px rgba(139,92,246,.22);
}

.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:288px 1fr;
}

.sidebar{
  height:100vh;
  position:sticky;
  top:0;
  padding:22px;
  background:rgba(7,15,30,.92);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  backdrop-filter:blur(18px);
}

.brand{
  text-align:center;
  padding:4px 0 21px;
  border-bottom:1px solid rgba(29,42,66,.55);
  margin-bottom:18px;
}

.brand img{
  width:168px;
  display:block;
  margin:0 auto 12px;
  border-radius:18px;
}

.brand b{
  color:var(--purple);
  font-size:13px;
  letter-spacing:.08em;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nav a, .nav button{
  border:0;
  background:transparent !important;
  color:#cbd5e1 !important;
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  border-radius:13px;
  padding:14px 15px;
  font-weight:750;
  transition:.18s;
  text-decoration:none !important;
}

.nav a:hover, .nav button:hover{
  color:white !important;
  background:#101827 !important;
}

.nav a.active, .nav button.active{
  color:white !important;
  background:linear-gradient(90deg, rgba(139,92,246,.48), rgba(139,92,246,.12)) !important;
  box-shadow:inset 3px 0 0 var(--purple) !important;
}

.userBox{
  margin-top:auto;
  border-top:1px solid rgba(29,42,66,.65);
  padding-top:20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--purple);
  color:white;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:18px;
}

/* Utilitários Básicos (Substituindo Tailwind) */

.flex { display: flex; }

.grid { display: grid; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.flex-1 { flex: 1 1 0%; }

.gap-1 { gap: 0.25rem; }

.gap-2 { gap: 0.5rem; }

.gap-3 { gap: 0.75rem; }

.gap-4 { gap: 1rem; }

.gap-6 { gap: 1.5rem; }

.w-full { width: 100%; }

.h-full { height: 100%; }

.min-h-screen { min-height: 100vh; }

.w-12 { width: 3rem; }

.h-12 { height: 3rem; }

.w-10 { width: 2.5rem; }

.h-10 { height: 2.5rem; }

.w-8 { width: 2rem; }

.h-8 { height: 2rem; }

.mt-1 { margin-top: 0.25rem; }

.mt-2 { margin-top: 0.5rem; }

.mt-3 { margin-top: 0.75rem; }

.mt-4 { margin-top: 1rem; }

.mt-6 { margin-top: 1.5rem; }

.mt-8 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.25rem; }

.mb-2 { margin-bottom: 0.5rem; }

.mb-4 { margin-bottom: 1rem; }

.mb-6 { margin-bottom: 1.5rem; }

.mb-8 { margin-bottom: 2rem; }

.p-1 { padding: 0.25rem; }

.p-2 { padding: 0.5rem; }

.p-3 { padding: 0.75rem; }

.p-4 { padding: 1rem; }

.p-5 { padding: 1.25rem; }

.p-6 { padding: 1.5rem; }

.p-8 { padding: 2rem; }

.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.rounded-xl { border-radius: 0.75rem; }

.rounded-2xl { border-radius: 1rem; }

.rounded-3xl { border-radius: 1.5rem; }

.rounded-full { border-radius: 9999px; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }

.text-\[10px\] { font-size: 10px; }

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.font-bold { font-weight: 700; }

.font-black { font-weight: 900; }

.uppercase { text-transform: uppercase; }

.tracking-tight { letter-spacing: -0.025em; }

.tracking-wider { letter-spacing: 0.05em; }

.tracking-widest { letter-spacing: 0.1em; }

.text-purple { color: var(--purple); }

.text-green { color: var(--green); }

.text-red { color: var(--red); }

.text-white { color: white; }

.bg-purple { background-color: var(--purple); }

.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }

.border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }

.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(139, 92, 246, 0.1);
  border-top-color: var(--purple);
  border-radius: 50%;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.userBox .avatar{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,#1f2937,var(--purple));
  border:2px solid rgba(139,92,246,.4);
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  color:white;
}

.userBox strong,.userBox span,.userBox em{display:block}

.userBox span,.userBox em{color:var(--muted);font-size:13px;margin-top:3px}

.userBox em{color:#c8a9ff;font-style:normal}

.logout{
  margin-top:18px;
  border:1px solid var(--line);
  background:#0b1322;
  color:#e5e9f3;
  border-radius:13px;
  padding:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
}

.content{
  padding:30px;
  overflow:hidden;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:35px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}

.topMain{flex:1}

.topActions{
  display:flex;
  align-items:center;
  gap:16px;
}

.clock{
  background:var(--card2);
  padding:10px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
}

.clock strong{font-size:16px;display:block}

.clock span{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700}

.profile{
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:20px;
  border-left:1px solid var(--line);
}

.profileInfo{text-align:right}

.profileInfo strong{display:block;font-size:14px;color:white}

.profileInfo span{display:block;font-size:10px;text-transform:uppercase;color:var(--purple);font-weight:900;letter-spacing:1px}

.profileAvatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--purple), var(--purple2));
  display:grid;
  place-items:center;
  font-weight:900;
  color:white;
  box-shadow:0 8px 20px rgba(139, 92, 246, 0.3);
}

.bell-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--card2);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  position:relative;
  color:var(--muted);
  transition:.2s;
}

.bell-btn:hover{color:white;border-color:var(--purple);background:rgba(139, 92, 246, 0.1)}

.bell-btn i{
  position:absolute;
  top:-5px;
  right:-5px;
  background:var(--red);
  color:white;
  font-size:10px;
  font-style:normal;
  font-weight:900;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid var(--bg);
}

.stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(160px,1fr));
  gap:18px;
  margin-bottom:20px;
}

.stat{
  min-height:134px;
  background:rgba(11,19,34,.82);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.statIcon{
  width:54px;
  height:54px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(139,92,246,.17);
  color:var(--purple);
  flex:0 0 auto;
}

.stat.green .statIcon{color:var(--green);background:rgba(67,214,111,.12)}

.stat.red .statIcon{color:var(--red);background:rgba(255,77,109,.12)}

.stat.yellow .statIcon{color:var(--yellow);background:rgba(245,197,66,.12)}

.stat h3{font-size:13px;margin:2px 0 9px;color:#dbe3f2}

.stat strong{font-size:31px}

.stat p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.35}

.mainGrid{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:18px;
  margin-bottom:18px;
}

.bottomGrid{
  display:grid;
  grid-template-columns:1.55fr .8fr;
  gap:18px;
}

.stack{display:grid;gap:18px}

.panel{
  background:rgba(11,19,34,.82);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.panelHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}

.panelHead h2{
  font-size:18px;
  margin:0;
}

.panelHead h2 small{font-weight:500;color:#cbd5e1}

.panelHead button,.manage{
  border:1px solid #2b3652;
  background:#111a2c;
  color:#dbe3f2;
  border-radius:10px;
  padding:9px 12px;
  font-weight:800;
}

.classItem{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:15px 0;
  border-top:1px solid var(--line);
}

.classItem:first-of-type{border-top:0}

.classIcon{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:rgba(139,92,246,.18);
  color:var(--purple);
}

.classItem strong,.classItem span{display:block}

.classItem span{color:var(--muted);font-size:14px;margin-top:5px}

.room{text-align:right}

.room span{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}

.room em,.scheduleItem em{
  margin-top:8px;
  display:inline-block;
  background:rgba(139,92,246,.22);
  border:1px solid rgba(139,92,246,.35);
  color:#eadcff;
  border-radius:10px;
  padding:7px 10px;
  font-size:13px;
  font-style:normal;
  font-weight:900;
}

.progressBlock{margin:20px 0}

.progressBlock>div:first-child{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px;
}

.progressBlock span{font-weight:900}

.track{
  height:8px;
  background:#182235;
  border-radius:999px;
  overflow:hidden;
}

.track div{
  height:100%;
  background:linear-gradient(90deg,var(--green),#22c55e);
  border-radius:999px;
  box-shadow:0 0 16px rgba(67,214,111,.35);
}

.tableWrap{overflow:auto}

table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}

th,td{
  text-align:left;
  padding:14px;
  border-top:1px solid var(--line);
  white-space:nowrap;
}

th{color:var(--muted);font-weight:700;font-size:13px}

.good{color:var(--green)}

.warn{color:var(--yellow)}

.bad{color:var(--red)}

.wideBtn{
  width:100%;
  margin-top:14px;
  border:1px solid var(--line);
  background:#0d1627;
  color:#d7bfff;
  border-radius:12px;
  padding:12px;
  font-weight:900;
}

.notice{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--line);
}

.notice:first-of-type{border-top:0}

.noticeIcon{
  width:43px;
  height:43px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:rgba(139,92,246,.16);
  color:var(--purple);
}

.noticeIcon.green{background:rgba(67,214,111,.12);color:var(--green)}

.noticeIcon.orange{background:rgba(245,158,11,.13);color:var(--orange)}

.noticeIcon.yellow{background:rgba(245,197,66,.13);color:var(--yellow)}

.noticeIcon.blue{background:rgba(56,189,248,.13);color:var(--blue)}

.notice strong,.notice span{display:block}

.notice span{font-size:13px;color:var(--muted);margin-top:4px}

.days{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  margin-bottom:14px;
}

.days button{
  border:1px solid var(--line);
  background:#091120;
  color:#cbd5e1;
  border-radius:9px;
  padding:9px 6px;
  font-weight:900;
}

.days button.active{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:white;
}

.scheduleItem{
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--line);
}

.scheduleItem span{display:block;color:var(--muted);font-size:13px;margin-top:5px}

.quickGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.quickGrid button{
  border:1px solid var(--line);
  background:#101827;
  color:white;
  border-radius:14px;
  padding:15px 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-weight:850;
}

.quickGrid svg{color:var(--purple)}

.fullPage{min-height:680px}

.cardsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.formCard{
  background:#0a1120;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}

.formCard h3{margin:0 0 14px}

.formCard p{color:var(--muted);line-height:1.6}

.formCard label{
  display:block;
  color:#dbe3f2;
  font-weight:800;
  margin:12px 0 8px;
}

.formCard input,.formCard select{
  width:100%;
  border:1px solid var(--line2);
  background:#070d19;
  color:white;
  border-radius:12px;
  padding:12px;
}

.primarySmall{
  border:0;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:white;
  border-radius:12px;
  padding:12px 15px;
  margin-top:14px;
  font-weight:900;
}

.summaryNumbers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.summaryNumbers span{
  background:#101827;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}

.summaryNumbers b{display:block;font-size:28px}

.summaryNumbers small{display:block}

.extraTable{margin-top:18px}

@media(max-width:1250px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .mainGrid,.bottomGrid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .loginPage{grid-template-columns:1fr}
  .loginLeft{padding:35px}
  .loginLeft h1{font-size:42px}
  .app{grid-template-columns:1fr}
  .sidebar{height:auto;position:relative}
  .content{padding:18px}
  .topbar{flex-direction:column}
  .topCards{justify-content:flex-start}
  .cardsGrid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .stats,.quickGrid{grid-template-columns:1fr}
  .classItem,.notice,.scheduleItem{grid-template-columns:1fr}
  .room{text-align:left}
  .room span{justify-content:flex-start}
}

/* Cursos / Matérias */

.courseGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:24px;
  margin-top:24px;
}

.courseCard{
  background:rgba(11,19,34,.65);
  border:1px solid var(--line);
  border-radius:28px;
  padding:24px;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.courseCard:hover{
  transform:translateY(-5px);
  background:rgba(11,19,34,.85);
  border-color:rgba(139,92,246,0.4);
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}

.courseCard.active{
  border-color:var(--purple);
  background:linear-gradient(180deg, rgba(139,92,246,0.1) 0%, rgba(11,19,34,0.8) 100%);
}

.courseTop{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:20px;
}

.courseIcon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(139,92,246,0.2), rgba(139,92,246,0.05));
  border:1px solid rgba(139,92,246,0.2);
  color:var(--purple);
  box-shadow:0 8px 16px rgba(139,92,246,0.1);
}

.courseCard.active .courseIcon{
  background:var(--purple);
  color:white;
  box-shadow:0 10px 20px rgba(139,92,246,0.3);
}

.courseTop h3{margin:0;font-size:20px;letter-spacing:-0.02em}

.courseTop p{margin:4px 0 0;color:var(--muted);font-size:13px;font-weight:500}

.courseCard h4{
  margin:20px 0 12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  font-weight:800;
}

.subjectList{display:flex;flex-wrap:wrap;gap:8px}

.subjectList span{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:#dbe3f2;
  padding:6px 12px;
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  transition:all 0.2s;
}

.courseCard:hover .subjectList span{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.12);
}

@media(max-width:900px){.courseGrid{grid-template-columns:1fr}}

/* Modal & Functional UI */

/* Componentes Base Restaurados */

.manage.outline{border:1px solid var(--line);background:transparent}

.manage.outline:hover{border-color:var(--purple);background:rgba(139,92,246,0.1)}

.manage.danger{border:1px solid rgba(255,77,109,0.3);color:var(--red);background:rgba(255,77,109,0.05)}

.manage.danger:hover{background:var(--red);color:white;border-color:var(--red)}

/* Modal & Popups */

.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(5,9,20,0.85);
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  z-index:9999;
  padding:20px;
}

.modal{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:35px;
  width:100%;
  max-width:550px;
  box-shadow:0 40px 100px rgba(0,0,0,0.6);
  position:relative;
}

.modal h3{margin:0 0 8px;font-size:24px;font-weight:800}

/* Notificações Fix */

.notif-item{
  padding:15px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex;
  gap:15px;
  transition:.2s;
}

.notif-item:hover{background:rgba(255,255,255,0.03)}

.notif-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.notif-body{flex:1;min-width:0}

.notif-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}

.notif-head strong{font-size:14px;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.notif-time{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}

.notif-text{font-size:12px;color:var(--muted);line-height:1.4}

.modal p{color:var(--muted);margin-bottom:20px}

.formGroup{margin-bottom:18px}

.formGroup label{display:block;margin-bottom:8px;font-weight:700;font-size:14px;color:#d8deea}

.formGroup input,.formGroup select{
  width:100%;
  border:1px solid var(--line2);
  background:#070d19;
  color:white;
  border-radius:12px;
  padding:12px;
  outline:0;
}

.formGroup input:focus{border-color:var(--purple)}

.modalActions{display:flex;gap:12px;margin-top:24px}

.modalActions button{flex:1;padding:12px;border-radius:12px;font-weight:800;border:1px solid var(--line);background:transparent;color:white}

.modalActions button.primary{background:var(--purple);border:0;margin:0}

.badge{
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.badge.green{background:rgba(67,214,111,.15);color:var(--green)}

.badge.red{background:rgba(255,77,109,.15);color:var(--red)}

.freqCell{display:flex;align-items:center;gap:12px}

.track.mini{width:100px;margin:0}

.attendanceList{display:grid;gap:12px;margin:20px 0}

.attendanceItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:rgba(255,255,255,.03);
  border-radius:12px;
}

.toggle{display:flex;gap:8px}

.toggle button{
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#101827;
  color:var(--muted);
  font-weight:900;
}

.toggle button.present:hover{background:var(--green);color:white;border-color:var(--green)}

.toggle button.absent:hover{background:var(--red);color:white;border-color:var(--red)}

.fullPageWrapper{
  min-height:100%;
}

/* Utilities */

.flex{display:flex}

.flex-col{flex-direction:column}

.items-center{align-items:center}

.items-start{align-items:flex-start}

.justify-between{justify-content:space-between}

.justify-center{justify-content:center}

.justify-end{justify-content:flex-end}

.gap-1{gap:0.25rem}

.gap-2{gap:0.5rem}

.gap-3{gap:0.75rem}

.gap-4{gap:1rem}

.gap-6{gap:1.5rem}

.gap-8{gap:2rem}

.m-0{margin:0}

.mt-1{margin-top:0.25rem}

.mt-2{margin-top:0.5rem}

.mt-4{margin-top:1rem}

.mt-6{margin-top:1.5rem}

.mb-1{margin-bottom:0.25rem}

.mb-2{margin-bottom:0.5rem}

.mb-4{margin-bottom:1rem}

.mb-6{margin-bottom:1.5rem}

.mb-8{margin-bottom:2rem}

.p-4{padding:1rem}

.py-4{padding-top:1rem;padding-bottom:1rem}

.py-20{padding-top:5rem;padding-bottom:5rem}

.w-full{width:100%}

.w-8{width:2rem}

.w-12{width:3rem}

.w-16{width:4rem}

.w-24{width:6rem}

.h-auto{height:auto}

.h-3{height:0.75rem}

.h-4{height:1rem}

.h-8{height:2rem}

.h-10{height:2.5rem}

.h-12{height:3rem}

.h-14{height:3.5rem}

.h-16{height:4rem}

.text-xs{font-size:0.75rem}

.text-sm{font-size:0.875rem}

.text-lg{font-size:1.125rem}

.text-2xl{font-size:1.5rem}

.text-3xl{font-size:1.875rem}

.text-6xl{font-size:3.75rem}

.font-bold{font-weight:700}

.font-extrabold{font-weight:800}

.font-medium{font-weight:500}

.text-muted{color:var(--muted)}

.text-purple{color:var(--purple)}

.text-white{color:white}

.uppercase{text-transform:uppercase}

.tracking-tight{letter-spacing:-0.025em}

.tracking-wider{letter-spacing:0.05em}

.opacity-20{opacity:0.2}

.opacity-50{opacity:0.5}

.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}

.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}

.rounded-xl{border-radius:0.75rem}

.z-1000{z-index:1000}

.z-2000{z-index:2000}

.fixed{position:fixed}

.bottom-6{bottom:1.5rem}

.right-6{right:1.5rem}

.inset-0{top:0;right:0;bottom:0;left:0}

.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.animate-spin{animation:spin 1s linear infinite}

/* Professional UI Classes */

.bg-gradient-to-br{background-image:linear-gradient(135deg,var(--purple),var(--purple2))}

.from-\[\#8b5cf6\]{--tw-gradient-from:#8b5cf6;--tw-gradient-to:rgb(139 92 246 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}

.to-\[\#4c1d95\]{--tw-gradient-to:#4c1d95}

.shadow-\[0_10px_20px_-5px_rgba\(139\,92\,246\,0\.3\)\]{box-shadow:0 10px 20px -5px rgba(139,92,246,0.3)}

.hover\:shadow-\[0_15px_25px_-5px_rgba\(139\,92\,246\,0\.4\)\]:hover{box-shadow:0 15px 25px -5px rgba(139,92,246,0.4)}

.hover\:-translate-y-0\.5:hover{transform:translateY(-0.125rem)}

.inline-flex{display:inline-flex}

.group-focus-within\:text-purple:focus-within{color:var(--purple)}

.placeholder\:text-muted\/50::placeholder{color:var(--muted);opacity:0.5}

.backdrop-blur-xl{backdrop-filter:blur(24px)}

.backdrop-blur-2xl{backdrop-filter:blur(40px)}

.tracking-widest{letter-spacing:0.1em}

.duration-300{transition-duration:300ms}

.duration-500{transition-duration:500ms}

.active\:scale-95:active{transform:scale(0.95)}

.bg-purple\/5{background-color:rgba(139,92,246,0.05)}

.bg-purple\/10{background-color:rgba(139,92,246,0.1)}

.bg-white\/5{background-color:rgba(255,255,255,0.05)}

.border-purple\/10{border-color:rgba(139,92,246,0.1)}

.border-purple\/20{border-color:rgba(139,92,246,0.2)}

.border-white\/10{border-color:rgba(255,255,255,0.1)}

.focus\:ring-4:focus{box-shadow:0 0 0 4px rgba(139,92,246,0.1)}

.focus\:ring-purple\/10:focus{box-shadow:0 0 0 4px rgba(139,92,246,0.1)}

.focus\:border-purple:focus{border-color:var(--purple)}

.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.noticesList{display:grid;gap:16px;margin-top:20px}

.noticeCard{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  display:flex;
  gap:20px;
  align-items:flex-start;
  transition:.2s;
}

.noticeCard:hover{background:rgba(255,255,255,.04);border-color:var(--purple)}

.noticeContent{flex:1}

.noticeHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

.noticeHeader strong{font-size:18px}

.noticeMeta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}

.noticeContent p{color:var(--muted);line-height:1.6;margin:0}

.deleteBtn{
  background:transparent;
  border:0;
  color:rgba(255,77,109,.5);
  padding:8px;
  border-radius:10px;
  transition:.2s;
}

.deleteBtn:hover{background:rgba(255,77,109,.1);color:var(--red)}

.settingsGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}

.settingItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
  border-top:1px solid var(--line);
}

.settingItem:first-of-type{border-top:0;padding-top:0}

.settingItem strong{display:block;margin-bottom:4px}

.settingItem span{font-size:13px;color:var(--muted)}

.settingLabel{display:flex;align-items:center;gap:12px}

.settingLabel strong{margin:0}

@media(max-width:1100px){
  .settingsGrid{grid-template-columns:1fr}
}

.classesGrid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:20px;margin-top:20px}

.classCard{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  transition:.2s;
}

.classCard:hover{background:rgba(255,255,255,.04);border-color:var(--purple);transform:translateY(-4px)}

.classCardHeader{display:flex;gap:16px;align-items:center;margin-bottom:20px}

.classCardHeader h3{margin:0;font-size:18px}

.classCardHeader span{color:var(--muted);font-size:14px}

.classCardBody{display:grid;gap:12px;margin-bottom:20px}

.classInfoRow{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}

.classInfoRow svg{color:var(--purple)}

.searchBar{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(7,13,25,0.6);
  border:1px solid var(--line);
  padding:0 18px;
  border-radius:16px;
  height:44px;
  width:280px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

.searchBar:hover{
  border-color: rgba(255,255,255,0.15);
  background:rgba(7,13,25,0.8);
}

.searchBar:focus-within{
  border-color: var(--purple);
  background:rgba(7,13,25,0.9);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.15);
  width: 320px;
}

.searchBar svg{
  color: var(--muted);
  transition: color 0.3s;
}

.searchBar:focus-within svg{
  color: var(--purple);
}

.searchBar input{
  background:transparent;
  border:0;
  color:white;
  outline:0;
  width:100%;
  font-size:14px;
  font-weight:500;
}

.searchBar input::placeholder{
  color: #4b5563;
}