*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Poppins, sans-serif;
}

html, body{
  width:100%;
  height:100%;
  overflow-x:hidden;
}

/* ==========================
   BACKGROUND (WHITE)
========================== */
body{
  background:#ffffff;
  color:#111827;
  min-height:100vh;
}

/* Wrapper */
.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:18px 18px 40px;
}

/* ==========================
   TOP SECTION
========================== */
.top{
  text-align:center;
  margin-top:12px;
  margin-bottom:18px;
}

.top h1{
  font-size:30px;
  font-weight:900;
  letter-spacing:0.2px;
  color:#111827;
}

.top p{
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  color:rgba(17,24,39,0.65);
}

/* ==========================
   GRID
========================== */
.grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:18px;
}

/* ==========================
   CARD
========================== */
.box{
  width:100%;
  min-height:110px;
  padding:16px 16px;
  border-radius:20px;
  cursor:pointer;
  transition:0.25s ease;

  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 18px 55px rgba(0,0,0,0.10);

  position:relative;
  overflow:hidden;
}

/* Shine effect */
.box::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, rgba(0,0,0,0.05), transparent 60%);
  pointer-events:none;
}

.box:hover{
  transform:translateY(-6px);
  border-color:rgba(0,0,0,0.14);
  box-shadow:0 24px 70px rgba(0,0,0,0.14);
}

/* ==========================
   LOGO + TEXT ROW
========================== */
.card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Prep logo */
.ch-logo{
  width:52px;
  height:52px;
  border-radius:18px;
  object-fit:cover;

  background:#f3f4f6; /* light gray */
  border:1px solid rgba(0,0,0,0.08);
  padding:6px;

  flex-shrink:0;
}

/* Text */
.ch-text{
  flex:1;
  min-width:0;
}

.ch-text h2{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.2px;
  color:#111827;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ch-text p{
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:rgba(17,24,39,0.65);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Arrow */
.ch-arrow{
  font-size:22px;
  font-weight:900;
  color:rgba(0,0,0,0.35);
  transition:0.25s;
}

.box:hover .ch-arrow{
  transform:translateX(4px);
  color:#111827;
}

/* ==========================
   NOTE
========================== */
.note{
  text-align:center;
  margin-top:22px;
  font-size:13px;
  font-weight:600;
  color:rgba(17,24,39,0.65);
}

/* ==========================
   BACK BUTTON
========================== */
.top-actions{
  position:fixed;
  top:14px;
  left:14px;
  z-index:9999;
}

.back-btn{
  border:none;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;

  background:#ffffff;
  border:1px solid rgba(0,0,0,0.10);
  color:#111827;

  font-weight:800;
  font-size:13px;

  transition:0.2s;
  box-shadow:0 14px 35px rgba(0,0,0,0.10);
}

.back-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,0.16);
}

/* ==========================
   MOBILE
========================== */
@media(max-width:900px){

  .wrap{
    padding:16px 14px 35px;
  }

  .top h1{
    font-size:24px;
  }

  .grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .box{
    min-height:100px;
    border-radius:18px;
  }

  .ch-logo{
    width:48px;
    height:48px;
    border-radius:16px;
  }
}
/* =====================================================
   UNIVERSAL MOBILE RESPONSIVE FIX
   Paste this at the END of every CSS file
===================================================== */

/* 1) Prevent horizontal scroll */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

/* 2) Universal container safe padding */
body{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Images & videos never overflow */
img, video, iframe{
  max-width:100%;
  height:auto;
  display:block;
}

/* 4) Long text wrap (no overflow) */
*{
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 5) Buttons + inputs mobile friendly */
button, input, select, textarea{
  max-width:100%;
  font-size:16px; /* iPhone zoom fix */
}

/* 6) Universal section padding */
section, .section, .container, .wrap, .main{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding-left:14px;
  padding-right:14px;
}

/* 7) Any 2-3 column layout becomes 1 column on phone */
@media (max-width: 900px){
  .layout, .grid, .row, .mainGrid, .cardsGrid{
    display:block !important;
  }

  .leftPanel, .rightPanel, .centerPanel,
  .sidebar, .content, .panel{
    width:100% !important;
    max-width:100% !important;
  }
}

/* 8) Any grid becomes auto responsive */
@media (max-width: 700px){
  .grid, .cards, .cardGrid, .courseGrid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:12px !important;
  }
}

/* 9) Tables become scrollable on mobile */
.tableWrap{
  width:100%;
  overflow:auto;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}

/* 10) Navbar / Topbar mobile */
@media (max-width: 700px){
  nav, .topbar, .navbar{
    flex-direction:column !important;
    gap:10px !important;
    align-items:flex-start !important;
  }

  .navLinks, .menu, .links{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
}

/* 11) Card padding smaller on phone */
@media (max-width: 520px){
  .panel, .card, .box, .item{
    border-radius:14px !important;
  }

  .panelHead, .cardHead{
    padding:12px !important;
  }

  .panelBody, .cardBody{
    padding:12px !important;
  }

  h1{ font-size:20px !important; }
  h2{ font-size:17px !important; }
  h3{ font-size:15px !important; }
  p, li{ font-size:14px !important; line-height:1.6 !important; }
}