:root{
  --bg: #0b0f14;
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text: #e6eef6;
  --muted: #9fb3c8;
  --accent: #7dd3fc;
  --b1: #86efac; 
  --b2: #c7d2fe; 
  --bx: #fca5a5; 
}

*{ box-sizing: border-box; }
html, body{
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, #0d1b2a 0%, #0b0f14 45%, #07090c 100%) fixed;
  min-height: 100%;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px) saturate(120%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

header.topbar{
  display:flex; 
  align-items:center;
   justify-content:space-between;
  padding: 16px 20px; margin: 16px;
}
.brand{ display:flex; gap:12px; align-items:center;}
.logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg,#60a5fa, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;  
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.titles h1 { 
  margin:0; 
  font-family:Poppins, Inter; 
  font-weight:700; 
  letter-spacing:.3px;
 }
.subtitle{ margin:2px 0 0; color:var(--muted); font-size:12.5px;}

.profile{ text-align:right; }
.profile .name{ font-weight:700;}
.profile .nim{ color:var(--muted); font-size:12px;}

main{ margin: 0 16px 16px; display:grid; gap:16px; }

.controls{
  display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:14px;
}
.control{ display:grid; gap:6px; min-width:180px;}
.control.grow{ flex:1; min-width:240px;}
label{ color:var(--muted); font-size:12px; }
select, input{
  background:#0e141b; border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:12px; outline:none;
}
select:hover, input:hover{ border-color:#2a3a4d; }
.layout-toggle{ margin-left:auto; display:flex; gap:8px;}
.layout-toggle button{
  border:1px solid var(--border); background:#0e141b; color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.layout-toggle button.active{ background:linear-gradient(135deg,#22d3ee22,#60a5fa22); border-color:#3a556a; }

.week{ padding: 14px; }
.week-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.day-col{ display:flex; flex-direction:column; gap:10px; }
.day-col h3{ margin:0; padding:8px 10px; font-family:Poppins; font-size:16px; border-left:4px solid #1f2f3f; color:#cfe6ff; background:#0e141b; border-radius:10px; }
.day-col .slots{ display:grid; gap:10px; }

.card{
  border:1px solid var(--border); background:#0c1218; border-radius:14px; padding:12px; position:relative;
}
.card .top{
  display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
}
.tag{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:#0b1016; color:var(--muted); }
.badge{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); }
.badge.b1{ background: color-mix(in oklab, var(--b1) 25%, transparent); border-color: color-mix(in oklab, var(--b1) 50%, var(--border)); }
.badge.b2{ background: color-mix(in oklab, var(--b2) 25%, transparent); border-color: color-mix(in oklab, var(--b2) 50%, var(--border)); }
.badge.bx{ background: color-mix(in oklab, var(--bx) 25%, transparent); border-color: color-mix(in oklab, var(--bx) 50%, var(--border)); }

.title{ font-weight:800; font-family:Poppins; margin:4px 0 6px; font-size:15px; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }
.meta .pill{
  display:inline-flex; gap:6px; align-items:center; background:#0e141b; border:1px solid var(--border); padding:6px 8px; border-radius:999px;
}
.time{ font-weight:700; letter-spacing:.5px; }
.room{ color: #a5d8ff;}
.lect{ color: #ffd6a5;
  font-style: italic;}
.sks{ color: #b5f5ec;
  font-weight: 600;}

footer{
  display:flex; justify-content:space-between; align-items:center; padding: 12px 16px; margin: 0 16px 16px;
}

.list{ padding:14px; }
.courses{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.course-card{ padding:14px; border:1px solid var(--border); background:#0c1218; border-radius:14px; }
.course-card h4{ margin:0 0 8px; font-family:Poppins; }
.course-card .sessions{ display:grid; gap:6px; }
.session{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted);}
.session .dot{ width:8px; height:8px; border-radius:999px; background:#3a93ff; }

.hidden{ display:none !important; }

@media (max-width: 980px){
  .week-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px){
  .week-grid{ grid-template-columns: repeat(1,1fr); }
  header.topbar{ flex-direction:column; align-items:flex-start; gap:8px;}
}