.portal-main{min-height:70vh;background:#f7faf8}
.portal-shell{width:min(1180px,92%);margin:0 auto;padding:52px 0 72px}
.portal-card{background:#fff;border:1px solid #e0ebe3;border-radius:24px;box-shadow:0 14px 34px rgba(15,61,34,.07);padding:28px}
.portal-card h1,.portal-card h2,.portal-card h3{margin-top:0}
.auth-wrap{min-height:72vh;display:grid;place-items:center;padding:54px 18px;background:linear-gradient(135deg,#f2f9f4,#fff)}
.auth-card{width:min(460px,100%);background:#fff;border:1px solid #dfeae2;border-radius:28px;padding:34px;box-shadow:0 20px 50px rgba(15,61,34,.1)}
.auth-logo{width:90px;height:auto;display:block;margin:0 auto 12px}
.auth-card h1{text-align:center;font-size:2rem;margin:8px 0}
.auth-card .muted{text-align:center;color:#68776f;margin-bottom:24px}
.form-grid{display:grid;gap:16px}
.form-row{display:grid;gap:7px}
.form-row label{font-weight:700;color:#173c28}
.form-row input,.form-row select,.form-row textarea{
 width:100%;box-sizing:border-box;border:1px solid #cfded3;border-radius:13px;padding:12px 13px;font:inherit;background:#fff
}
.form-row textarea{min-height:130px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid rgba(23,107,53,.16);border-color:#2b7d49}
.form-help{font-size:.85rem;color:#728079}
.alert{padding:12px 14px;border-radius:13px;margin-bottom:16px}
.alert-error{background:#fff2f2;color:#8e2424;border:1px solid #f0cccc}
.alert-success{background:#eff9f1;color:#23683a;border:1px solid #d2ead8}
.dashboard-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}
.dashboard-head p{margin:6px 0 0;color:#6b786f}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.portal-stat{background:#fff;border:1px solid #e0ebe3;border-radius:20px;padding:22px;box-shadow:0 10px 28px rgba(15,61,34,.05)}
.portal-stat strong{display:block;font-family:Poppins,sans-serif;color:#176b35;font-size:1.8rem}
.portal-stat span{color:#65736b}
.progress-list{display:grid;gap:16px;margin-top:22px}
.progress-item{background:#fff;border:1px solid #e0ebe3;border-radius:20px;padding:20px}
.progress-top{display:flex;justify-content:space-between;gap:16px;align-items:center}
.progress-top h3{margin:0;font-size:1.05rem}
.progress-track{height:10px;border-radius:999px;background:#edf3ef;overflow:hidden;margin:12px 0}
.progress-bar{height:100%;background:linear-gradient(90deg,#2e8a4f,#176b35);border-radius:999px}
.progress-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.88rem;color:#6a776f}
.note-box{margin-top:10px;padding:12px 14px;background:#f7faf8;border-radius:12px;color:#56645b}
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.admin-tabs a{padding:9px 13px;border-radius:999px;border:1px solid #d8e6dc;color:#1a6738;font-weight:700;background:#fff}
.table-wrap{overflow:auto;background:#fff;border:1px solid #e0ebe3;border-radius:18px}
.portal-table{width:100%;border-collapse:collapse;min-width:760px}
.portal-table th,.portal-table td{padding:13px 14px;text-align:left;border-bottom:1px solid #edf2ee;vertical-align:top}
.portal-table th{background:#f6faf7;font-size:.86rem;color:#516159}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf7ef;color:#1d6a39;font-size:.78rem;font-weight:700}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-small{display:inline-flex;padding:7px 10px;border-radius:10px;border:1px solid #cfe0d4;color:#176b35;font-weight:700;background:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{background:#fff;border:1px solid #e0ebe3;border-radius:22px;overflow:hidden;box-shadow:0 12px 28px rgba(15,61,34,.06)}
.blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.blog-copy{padding:20px}
.blog-copy h2{font-size:1.2rem;margin:0 0 10px}
.blog-copy p{color:#627067}
.blog-meta{font-size:.82rem;color:#7a877f;margin-bottom:8px}
.blog-article{width:min(820px,92%);margin:0 auto;padding:54px 0 80px}
.blog-article h1{font-size:clamp(2.2rem,5vw,4rem)}
.blog-body{font-size:1.03rem;line-height:1.8;color:#4f5f56}
.blog-body p{margin:0 0 1.2em}
.blog-hero{width:100%;border-radius:24px;margin:22px 0 30px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.portal-grid,.blog-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}
@media(max-width:680px){.portal-grid,.blog-grid{grid-template-columns:1fr}.dashboard-head{align-items:flex-start;flex-direction:column}.auth-card{padding:26px 20px}}

/* ===== V11 Class / Stage + Program ===== */
.profile-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:12px;
}
.profile-info-item{
  padding:16px 18px;
  background:#f8fbf9;
  border:1px solid #e3eee6;
  border-radius:16px;
}
.profile-info-item strong{
  display:block;
  color:#173c28;
  margin-bottom:7px;
}
.profile-info-item p{
  margin:0;
  color:#53635a;
}
@media(max-width:680px){
  .profile-info-grid{grid-template-columns:1fr;}
}


/* ===== V11.2 Progress Dashboard ===== */
.section-head-inline{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:18px}
.section-head-inline h2,.section-label h2{margin:0}
.section-head-inline p,.section-label p{margin:5px 0 0;color:#6b786f}
.category-progress-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.category-progress-card{
  border:1px solid #dfeae2;
  background:#fbfdfb;
  border-radius:17px;
  padding:16px;
}
.category-progress-card.is-empty{opacity:.72;background:#f8faf9}
.category-progress-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.category-progress-head strong{color:#173c28}
.category-progress-head span{font-family:Poppins,sans-serif;font-weight:700;color:#176b35}
.category-progress-card small{display:block;color:#6b786f;margin-top:7px}
.mentor-highlight{
  margin-top:22px;
  padding:26px 28px;
  border-radius:22px;
  background:linear-gradient(135deg,#edf8f0,#ffffff);
  border:1px solid #d7eadc;
  box-shadow:0 12px 30px rgba(15,61,34,.06);
}
.mentor-highlight h2{margin:6px 0 8px}
.mentor-highlight p{font-size:1.02rem;line-height:1.7;color:#4f5f56;margin:0 0 10px}
.mentor-highlight small{color:#6a776f}
.section-label{margin:28px 2px 2px}
@media(max-width:900px){
  .category-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .category-progress-grid{grid-template-columns:1fr}
}


/* ===== V11.3 Achievements / Certificates ===== */
.records-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:22px;
}
.records-grid{display:grid;gap:12px}
.record-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border:1px solid #dfeae2;
  background:#fbfdfb;
  border-radius:16px;
}
.record-icon,.student-record-icon{
  flex:0 0 auto;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#e7f5eb;
  color:#176b35;
  font-weight:800;
}
.record-body{flex:1}
.record-body h3{margin:0 0 6px}
.record-body p{margin:4px 0;color:#59675e}
.record-delete{
  border:0;background:transparent;color:#a63a3a;
  font-weight:700;cursor:pointer;padding:5px
}
.record-count{
  min-width:38px;height:38px;padding:0 10px;
  display:grid;place-items:center;border-radius:20px;
  background:#e7f5eb;color:#176b35;font-weight:800
}
.student-record-list{display:grid;gap:12px}
.student-record-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid #edf1ee
}
.student-record-row:last-child{border-bottom:0}
.student-record-row strong{display:block;color:#173c28}
.student-record-row p{margin:4px 0;color:#66736b;font-size:.94rem}
.student-record-row small{color:#7a867f}
.empty-record{padding:20px 0;color:#7a867f}
@media(max-width:800px){.records-two-col{grid-template-columns:1fr}}


/* ===== V11.4 Blog Management + Public Blog ===== */
.blog-editor{min-height:320px;line-height:1.6}
.blog-admin-list{display:grid;gap:12px}
.blog-admin-row{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:14px;
  border:1px solid #dfeae2;border-radius:16px;background:#fbfdfb
}
.blog-admin-thumb{
  width:86px;height:68px;border-radius:12px;overflow:hidden;
  background:#eaf5ed;display:grid;place-items:center;color:#176b35;font-weight:800
}
.blog-admin-thumb img{width:100%;height:100%;object-fit:cover}
.blog-admin-main h3{margin:7px 0 5px;color:#173c28}
.blog-admin-meta{display:flex;gap:7px;flex-wrap:wrap}
.badge-published{background:#e6f5eb;color:#176b35}
.badge-draft{background:#f2f3f2;color:#68736c}
.blog-admin-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.current-blog-image{display:flex;gap:16px;align-items:center;padding:14px;border:1px solid #dfeae2;border-radius:14px;background:#fbfdfb}
.current-blog-image img{width:150px;height:90px;object-fit:cover;border-radius:10px}

.blog-public-shell{padding-top:26px}
.blog-public-hero{text-align:center;max-width:820px;margin:0 auto 22px}
.blog-public-hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.05;margin:10px 0 14px;color:#123b28}
.blog-public-hero p{font-size:1.08rem;color:#68766e;margin:0 auto;max-width:680px}
.blog-category-nav{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:28px 0 30px}
.blog-category-nav a{
  text-decoration:none;padding:9px 14px;border-radius:999px;border:1px solid #d6e6db;
  color:#28563a;background:#fff;font-weight:700;font-size:.92rem
}
.blog-category-nav a.active,.blog-category-nav a:hover{background:#176b35;color:#fff;border-color:#176b35}
.blog-public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.blog-public-card{
  background:#fff;border:1px solid #dce9e0;border-radius:20px;overflow:hidden;
  box-shadow:0 12px 30px rgba(19,61,37,.06);display:flex;flex-direction:column
}
.blog-public-image{display:block;height:220px;background:#edf7f0;overflow:hidden}
.blog-public-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.blog-public-card:hover .blog-public-image img{transform:scale(1.035)}
.blog-image-placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#e7f5eb,#f8fbf9)}
.blog-image-placeholder span{font-size:2rem;font-weight:900;color:#176b35}
.blog-public-copy{padding:20px;display:flex;flex-direction:column;flex:1}
.blog-public-meta{display:flex;justify-content:space-between;gap:12px;color:#718078;font-size:.82rem;font-weight:700}
.blog-public-copy h2{font-size:1.35rem;line-height:1.3;margin:10px 0}
.blog-public-copy h2 a{text-decoration:none;color:#163b28}
.blog-public-copy p{color:#65736b;line-height:1.65;margin:0 0 16px}
.blog-read-link{margin-top:auto;text-decoration:none;color:#176b35;font-weight:800}

.blog-article-v2{max-width:860px;margin:20px auto 70px}
.blog-back-link{text-decoration:none;color:#176b35;font-weight:800}
.blog-article-header{text-align:center;padding:34px 0 24px}
.blog-article-header h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.08;margin:12px 0;color:#133b28}
.blog-article-lead{font-size:1.15rem;line-height:1.7;color:#65736b;max-width:720px;margin:0 auto 16px}
.blog-article-date{color:#7b8880;font-weight:700}
.blog-article-hero{width:100%;max-height:500px;object-fit:cover;border-radius:24px;box-shadow:0 15px 40px rgba(19,61,37,.08)}
.blog-article-body{max-width:760px;margin:34px auto}
.blog-article-body p{font-size:1.08rem;line-height:1.9;color:#354b3d;margin:0 0 24px}
.blog-article-footer{max-width:760px;margin:45px auto 0;padding:26px;border-radius:20px;background:#edf8f0;text-align:center}
.blog-article-footer p{color:#617067}
@media(max-width:980px){.blog-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .blog-public-grid{grid-template-columns:1fr}
  .blog-admin-row{grid-template-columns:70px minmax(0,1fr)}
  .blog-admin-thumb{width:70px;height:58px}
  .blog-admin-actions{grid-column:1/-1}
  .current-blog-image{align-items:flex-start;flex-direction:column}
  .current-blog-image img{width:100%;height:auto;max-height:240px}
}


/* ===== V11.6 Blog Language Filter ===== */
.blog-language-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:4px 0 18px;
}
.blog-language-tabs a{
  text-decoration:none;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #cfe1d4;
  background:#fff;
  color:#24543a;
  font-weight:800;
}
.blog-language-tabs a.active,
.blog-language-tabs a:hover{
  background:#176b35;
  color:#fff;
  border-color:#176b35;
}
.three-col{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
@media(max-width:850px){
  .three-col{grid-template-columns:1fr}
}