/* ========================================
   Study Anik Mahmud - Shared Stylesheet
   MBBS Study Material Platform
   ======================================== */

/* ===== CSS RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f0f2f5;
  color: #1a1a2e;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ===== READING PROGRESS BAR ===== */
.progress { width: 100%; height: 3px; background: #e0e0e0; position: fixed; top: 0; left: 0; z-index: 9999; }
.pfill { height: 100%; background: linear-gradient(90deg, #1a237e, #e53935); width: 0%; transition: width .1s; }

/* ===== HOMEPAGE HERO ===== */
.hero-home {
  background: linear-gradient(135deg, #0d1b3e 0%, #1a237e 40%, #1565c0 100%);
  color: #fff;
  padding: 60px 20px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-home::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
  animation: heroPulse 6s ease-in-out infinite;
}
@keyframes heroPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

.hero-home h1 {
  font-size: 2.6em;
  font-weight: 800;
  position: relative;
  text-shadow: 1px 1px 4px rgba(0,0,0,.3);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.hero-home .tagline {
  font-size: 1.15em;
  opacity: .9;
  position: relative;
  margin-bottom: 18px;
  font-weight: 300;
}
.hero-home .hero-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.hero-badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: .82em;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ===== CONTAINER ===== */
.container { max-width: 1060px; margin: 0 auto; padding: 15px; }

/* ===== NAVIGATION BAR ===== */
.nav {
  background: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  margin: 10px auto 18px;
  max-width: 1060px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  position: sticky;
  top: 8px;
  z-index: 100;
}
.nav a {
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 18px;
  font-size: .8em;
  font-weight: 600;
  transition: .3s;
  white-space: nowrap;
}
.nav a.blue { background: #e3f2fd; color: #1565c0; }
.nav a.blue:hover { background: #1565c0; color: #fff; }
.nav a.red { background: #fce4ec; color: #c62828; }
.nav a.red:hover { background: #c62828; color: #fff; }
.nav a.green { background: #e8f5e9; color: #2e7d32; }
.nav a.green:hover { background: #2e7d32; color: #fff; }
.nav a.purple { background: #f3e5f5; color: #6a1b9a; }
.nav a.purple:hover { background: #6a1b9a; color: #fff; }
.nav a.orange { background: #fff3e0; color: #e65100; }
.nav a.orange:hover { background: #e65100; color: #fff; }

/* ===== SEARCH BOX ===== */
.search-box {
  width: 100%;
  max-width: 480px;
  margin: 15px auto;
  display: block;
  padding: 11px 18px;
  border: 2px solid #ccc;
  border-radius: 22px;
  font-size: 1em;
  outline: none;
  transition: .3s;
}
.search-box:focus { border-color: #1a237e; box-shadow: 0 0 0 3px rgba(26,35,126,.1); }

/* ===== SUBJECT CARDS (HOMEPAGE) ===== */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 25px 0;
}
.subject-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: .3s;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 2px solid transparent;
}
.subject-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  border-color: #1a237e;
}
.subject-card-header {
  padding: 20px 20px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.subject-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
}
.subject-card-body { padding: 0 20px 18px; }
.subject-card-body h2 {
  font-size: 1.2em;
  font-weight: 700;
  color: #1a237e;
  margin-bottom: 6px;
}
.subject-card-body p {
  font-size: .88em;
  color: #616161;
  line-height: 1.5;
}
.subject-card-footer {
  padding: 10px 20px;
  background: #f8f9ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8em;
  color: #1565c0;
  font-weight: 600;
  border-top: 1px solid #e8eaf6;
}
.subject-card-footer .arrow { transition: .3s; }
.subject-card:hover .subject-card-footer .arrow { transform: translateX(5px); }

/* ===== CHAPTER LIST (SUBJECT PAGES) ===== */
.chapter-list { margin: 20px 0; }
.chapter-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: .3s;
  border-left: 4px solid #1a237e;
}
.chapter-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.chapter-num {
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: #fff;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9em;
  flex-shrink: 0;
}
.chapter-info h3 { font-size: 1em; color: #1a237e; margin-bottom: 2px; }
.chapter-info p { font-size: .82em; color: #757575; }
.chapter-arrow { margin-left: auto; color: #1a237e; font-size: 1.2em; transition: .3s; }
.chapter-item:hover .chapter-arrow { transform: translateX(5px); }

/* ===== PAGE HEADER (SUBJECT/CHAPTER PAGES) ===== */
.page-header {
  background: linear-gradient(135deg, #1a237e, #0d47a1);
  color: #fff;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 60%);
  animation: heroPulse 5s ease-in-out infinite;
}
.page-header h1 {
  font-size: 2em;
  position: relative;
  text-shadow: 1px 1px 3px rgba(0,0,0,.3);
}
.page-header .sub {
  font-size: 1em;
  opacity: .85;
  position: relative;
  margin-top: 6px;
}
.page-header.red-header { background: linear-gradient(135deg, #c62828, #6a1b9a); }

/* ===== BREADCRUMBS ===== */
.breadcrumb {
  padding: 10px 0;
  font-size: .82em;
  color: #757575;
}
.breadcrumb a { color: #1565c0; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }

/* ===== Q&A ACCORDION ===== */
.item-hdr { text-align: center; padding: 30px 15px 15px; }
.item-hdr h2 { font-size: 1.5em; display: inline-block; padding: 8px 22px; border-radius: 10px; color: #fff; }
.hdr2 h2 { background: linear-gradient(135deg, #1565c0, #1a237e); }
.hdr3 h2 { background: linear-gradient(135deg, #c62828, #6a1b9a); }

.qa {
  background: #fff;
  border-radius: 14px;
  margin: 14px 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  overflow: hidden;
  border-left: 5px solid #1a237e;
  transition: .3s;
}
.qa:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.qa.case { border-left-color: #ff6f00; }

.qa .q {
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, #e8eaf6, #c5cae9);
  transition: .3s;
  user-select: none;
}
.qa .q:hover { background: linear-gradient(135deg, #c5cae9, #9fa8da); }

.qn {
  background: #1a237e;
  color: #fff;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82em;
  flex-shrink: 0;
}
.qt { flex: 1; font-weight: 600; font-size: .98em; color: #1a237e; }
.ti { font-size: 1.2em; transition: transform .3s; color: #1a237e; flex-shrink: 0; }
.qa.open .ti { transform: rotate(180deg); }

.a { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.qa.open .a { max-height: 12000px; }

.ac { padding: 18px; border-top: 2px solid #e0e0e0; }
.ac h3 { color: #1a237e; margin: 16px 0 8px; font-size: 1.08em; border-bottom: 2px solid #e8eaf6; padding-bottom: 4px; }
.ac h3:first-child { margin-top: 0; }
.ac h4 { color: #3949ab; margin: 12px 0 6px; font-size: 1em; }
.ac p { margin: 6px 0; text-align: justify; }
.ac ul, .ac ol { margin: 6px 0 6px 22px; }
.ac li { margin: 3px 0; }
.ac strong { color: #1a237e; }
.ac em { color: #c62828; font-style: normal; font-weight: 600; }

/* ===== SPECIAL BOXES ===== */
.hb { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-left: 4px solid #1565c0; padding: 12px 15px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.wb { background: linear-gradient(135deg, #fff3e0, #ffe0b2); border-left: 4px solid #ff6f00; padding: 12px 15px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.db { background: linear-gradient(135deg, #fce4ec, #f8bbd0); border-left: 4px solid #c62828; padding: 12px 15px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.sb { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-left: 4px solid #2e7d32; padding: 12px 15px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.cbox { background: linear-gradient(135deg, #fff8e1, #ffecb3); border: 2px solid #ffc107; border-radius: 10px; padding: 16px; margin: 12px 0; }
.cbox h4 { color: #f57f17; margin-bottom: 8px; }
.abox { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border: 2px solid #4caf50; border-radius: 10px; padding: 16px; margin: 12px 0; }
.abox h4 { color: #2e7d32; margin-bottom: 8px; }
.dbox { background: #fafafa; border: 2px dashed #ccc; border-radius: 10px; padding: 16px; margin: 12px 0; text-align: center; }

/* ===== TABLES ===== */
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .9em; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
table th { background: linear-gradient(135deg, #1a237e, #283593); color: #fff; padding: 10px 12px; text-align: left; font-weight: 600; }
table td { padding: 8px 12px; border-bottom: 1px solid #eee; }
table tr:nth-child(even) { background: #f8f9ff; }
table tr:hover { background: #e8eaf6; }

/* ===== FLOW CHARTS ===== */
.fc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 12px 0; }
.fi { background: linear-gradient(135deg, #1565c0, #1a237e); color: #fff; padding: 8px 13px; border-radius: 8px; font-size: .8em; font-weight: 600; text-align: center; min-width: 100px; }
.fa { font-size: 1.3em; color: #1a237e; font-weight: 700; }
.fi.r { background: linear-gradient(135deg, #c62828, #e53935); }
.fi.g { background: linear-gradient(135deg, #2e7d32, #43a047); }
.fi.o { background: linear-gradient(135deg, #e65100, #ff6f00); }
.fi.p { background: linear-gradient(135deg, #6a1b9a, #8e24aa); }
.fi.t { background: linear-gradient(135deg, #00695c, #00897b); }

/* ===== STAT GRIDS ===== */
.sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.sc { background: linear-gradient(135deg, #1a237e, #3949ab); color: #fff; padding: 12px; border-radius: 10px; text-align: center; }
.sc .n { font-size: 1.5em; font-weight: 700; }
.sc .d { font-size: .76em; opacity: .9; }

/* ===== CARD GRIDS ===== */
.cg { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.cc { background: #fff; border: 2px solid #e0e0e0; border-radius: 10px; padding: 12px; text-align: center; transition: .3s; }
.cc:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,0,0,.1); border-color: #1a237e; }
.cc .ic { font-size: 1.7em; margin-bottom: 5px; }
.cc .tt { font-weight: 700; color: #1a237e; margin-bottom: 3px; }
.cc .dt { font-size: .8em; color: #616161; }

/* ===== COMPARISON ===== */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.cmc { background: #fff; border-radius: 10px; padding: 13px; border: 2px solid #e0e0e0; }
.cmc h4 { text-align: center; padding: 6px; border-radius: 6px; color: #fff; margin-bottom: 8px; }
.cmc:first-child h4 { background: #1565c0; }
.cmc:last-child h4 { background: #c62828; }

/* ===== BUTTONS ===== */
.btn {
  display: block;
  margin: 18px auto;
  padding: 10px 26px;
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: .93em;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(26,35,126,.3); }

/* ===== SCROLL TO TOP ===== */
.top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 44px;
  height: 44px;
  background: #1a237e;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.3em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  display: none;
  z-index: 999;
  transition: .3s;
}
.top:hover { background: #283593; transform: scale(1.1); }

/* ===== FOOTER ===== */
.site-footer {
  background: linear-gradient(135deg, #0d1b3e, #1a237e);
  color: #c5cae9;
  padding: 30px 20px 15px;
  margin-top: 40px;
}
.footer-content {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.footer-col h3 {
  color: #fff;
  font-size: 1em;
  margin-bottom: 12px;
  font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin: 5px 0; }
.footer-col ul li a { color: #9fa8da; text-decoration: none; font-size: .88em; transition: .3s; }
.footer-col ul li a:hover { color: #fff; padding-left: 4px; }
.footer-col p { font-size: .85em; line-height: 1.6; }
.footer-bottom {
  max-width: 1060px;
  margin: 20px auto 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  font-size: .82em;
}
.footer-bottom a { color: #7c4dff; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 14px;
  border-radius: 20px;
  margin-top: 8px;
  font-size: .82em;
  color: #c5cae9;
}
.owner-badge a { color: #7c4dff; font-weight: 600; }

/* ===== OWNERSHIP WATERMARK ===== */
.watermark {
  position: fixed;
  bottom: 8px;
  left: 8px;
  background: rgba(26,35,126,.88);
  color: #c5cae9;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .7em;
  z-index: 998;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.1);
}
.watermark a { color: #7c4dff; text-decoration: none; font-weight: 600; }
.watermark a:hover { text-decoration: underline; color: #b388ff; }

/* ===== VISUAL PANEL STYLES ===== */
.vis-section { margin: 18px 0; border-radius: 12px; overflow: hidden; }
.vis-tabs { display: flex; gap: 0; border-radius: 12px 12px 0 0; overflow: hidden; }
.vis-tab { flex: 1; padding: 10px 8px; text-align: center; font-size: .85em; font-weight: 700; cursor: pointer; transition: .3s; border: none; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.vis-tab:nth-child(1) { background: #1565c0; }
.vis-tab:nth-child(2) { background: #6a1b9a; }
.vis-tab:nth-child(3) { background: #e65100; }
.vis-tab.active { opacity: 1; filter: brightness(1.2); }
.vis-tab:not(.active) { opacity: .6; filter: brightness(.7); }
.vis-panels { background: #fff; border: 2px solid #e0e0e0; border-top: none; border-radius: 0 0 12px 12px; padding: 20px; min-height: 200px; }
.vis-content { display: none; animation: fadeIn .4s; }
.vis-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.vis-label { display: inline-block; background: linear-gradient(135deg, #1a237e, #3949ab); color: #fff; padding: 3px 12px; border-radius: 15px; font-size: .75em; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.vis-label.mnem { background: linear-gradient(135deg, #6a1b9a, #8e24aa); }
.vis-label.rat { background: linear-gradient(135deg, #1565c0, #1e88e5); }
.vis-label.viz { background: linear-gradient(135deg, #e65100, #ff6f00); }

.mnemonic-card { background: linear-gradient(135deg, #f3e5f5, #e1bee7); border: 3px solid #9c27b0; border-radius: 14px; padding: 18px; text-align: center; margin: 8px 0; }
.mnemonic-card h4 { color: #6a1b9a; font-size: 1.2em; margin-bottom: 8px; }
.mnemonic-card .big-letter { display: inline-block; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #6a1b9a, #9c27b0); color: #fff; font-size: 1.5em; font-weight: 900; line-height: 50px; margin: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.2); }

.rational-box { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border: 2px solid #42a5f5; border-radius: 12px; padding: 16px; margin: 10px 0; }
.rational-box h4 { color: #1565c0; margin-bottom: 8px; font-size: 1em; }
.rational-box p { font-size: .9em; margin: 4px 0; }
.rational-box ul { margin: 6px 0 6px 18px; }
.rational-box li { margin: 3px 0; font-size: .9em; }

.anatomy-svg { background: linear-gradient(135deg, #fafafa, #f0f0f0); border: 2px solid #ddd; border-radius: 12px; padding: 15px; margin: 10px 0; }
.anatomy-svg .title { font-weight: 700; color: #1a237e; text-align: center; margin-bottom: 8px; font-size: .95em; }

.emoji-row { display: flex; justify-content: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.emoji-item { text-align: center; padding: 8px; background: #fff; border-radius: 10px; border: 2px solid #e0e0e0; min-width: 80px; transition: .3s; }
.emoji-item:hover { transform: scale(1.05); border-color: #1a237e; }
.emoji-item .em { font-size: 1.8em; display: block; }
.emoji-item .lab { font-size: .72em; font-weight: 600; color: #333; margin-top: 3px; }
.emoji-item .det { font-size: .65em; color: #666; }

.cmp-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.cmp-vis-card { border-radius: 10px; padding: 12px; text-align: center; border: 2px solid #e0e0e0; }
.cmp-vis-card:first-child { border-color: #1565c0; background: #e3f2fd; }
.cmp-vis-card:last-child { border-color: #c62828; background: #fce4ec; }
.cmp-vis-card h5 { margin-bottom: 6px; }

.progress-rings { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin: 10px 0; }
.ring { text-align: center; }
.ring svg { width: 80px; height: 80px; }
.ring .ring-label { font-size: .75em; font-weight: 600; color: #333; margin-top: 3px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero-home h1 { font-size: 1.7em; }
  .hero-home .tagline { font-size: .95em; }
  .page-header h1 { font-size: 1.4em; }
  .cmp { grid-template-columns: 1fr; }
  .fc { flex-direction: column; }
  .fa { transform: rotate(90deg); }
  .sg { grid-template-columns: repeat(2, 1fr); }
  .subjects-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; }
  .cmp-visual { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-home { padding: 40px 15px 30px; }
  .hero-home h1 { font-size: 1.4em; }
  .nav a { font-size: .72em; padding: 4px 8px; }
}