/* ========== GLOBAL ========== */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f4f6f9;
  color:#0f172a;
}

/* ========== LOGIN ========== */
.login-body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#e5e7eb;
}

.login-box{
  background:#fff;
  padding:30px;
  width:320px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.login-box h2{text-align:center;margin-bottom:20px}

.login-box input,
.login-box button{
  width:100%;
  padding:12px;
  margin-top:12px;
  border-radius:6px;
  border:1px solid #cbd5e1;
  font-size:15px;
}

.login-box button{
  background:#2563eb;
  color:white;
  border:none;
  cursor:pointer;
}

.login-box button:hover{background:#1d4ed8}

/* ========== START / MODALITY ========== */
.modality-container{text-align:center;margin-top:120px}

.modality{
  display:inline-block;
  padding:20px 50px;
  background:#2563eb;
  color:white;
  margin:15px;
  border-radius:10px;
  font-size:20px;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.modality:hover{background:#1d4ed8}

/* ========== TOP BAR ========== */
.topbar{
  height:60px;
  background:#0f172a;
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.topbar a{
  color:#93c5fd;
  text-decoration:none;
  margin-left:12px;
}

.menu-btn{
  margin-left:22px;
  cursor:pointer;
  color:#e5e7eb;
  font-weight:500;
}

.menu-btn:hover{color:#60a5fa}

/* ========== APP LAYOUT ========== */
.app-layout{
  display:flex;
  height:calc(100vh - 60px);
}

/* ========== SIDEBAR ========== */
.sidebar{
  width:240px;
  background:#f1f5f9;
  border-right:1px solid #cbd5e1;
  overflow:auto;
}

.category{
  padding:14px;
  font-weight:bold;
  cursor:pointer;
  border-bottom:1px solid #cbd5e1;
  background:#f8fafc;
}

.category:hover{background:#e5e7eb}

.subs .sub{
  font-weight:normal;
  padding:8px 28px;
  color:#1d4ed8;
  cursor:pointer;
}

.subs .sub:hover{
  background:#dbeafe;
}

/* ========== MAIN CONTENT ========== */
.main-content{
  flex:1;
  background:#ffffff;
  padding:20px;
  overflow:auto;
}

.main-content h2{margin-top:0}

/* ========== MEDIA & IFRAME ========== */
video{
  max-width:100%;
  border-radius:10px;
  margin-top:10px;
}

.iframe-view{
  width:100%;
  height:85vh;
  border:none;
  border-radius:10px;
  background:white;
}

/* ========== MOBILE ========== */
@media(max-width:900px){
  .app-layout{flex-direction:column}
  .sidebar{width:100%;height:auto}
}

/* MAIN CONTENT SPLIT */
.main-content{
  flex:1;
  display:flex;
  flex-direction:column;
  background:#ffffff;
  overflow:hidden;
}

/* 🔴 RED STRIP */
.content-header{
  height:55px;
  border-bottom:1px solid #cbd5e1;
  display:flex;
  align-items:center;
  padding:0 20px;
  background:#f8fafc;
  gap:25px;
}

/* HEADER BUTTONS */
.section-btn{
  cursor:pointer;
  font-weight:600;
  color:#334155;
  padding:6px 4px;
  border-bottom:3px solid transparent;
}

.section-btn:hover{
  color:#2563eb;
}

.section-btn.active{
  color:#2563eb;
  border-bottom:3px solid #2563eb;
}

/* 🟡 YELLOW CONTENT ZONE */
.content-body{
  flex:1;
  padding:20px;
  overflow:auto;
  background:white;
}
.option-box{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
  margin-bottom:20px;
}

.tick{
  background:#f1f5f9;
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  border:1px solid #cbd5e1;
}

.category.active{
  background:#dbeafe;
  border-left:4px solid #2563eb;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

.video-card{
  background:#f8fafc;
  padding:15px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.video-card h4{margin:5px 0}
.video-card small{color:#475569}


.tick:hover{background:#e0f2fe}

.tick input{margin-right:8px}