:root{
  --primary:#1E5AAE; /* close to your screenshot */
  --yellow:#F2C200;
  --bg:#ffffff;
  --muted:#f2f4f7;
  --shadow:0 10px 25px rgba(0,0,0,.12);
  --radius:26px;
}

html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#0b1a33;
}

/* Top bar */
.app-topbar{
  position: sticky;
  top:0;
  z-index: 1030;
  height: 72px;
  background: var(--primary);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.app-logo{height:28px; width:auto;}
.app-brand{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 30px;
  line-height: 1;
}
.brand-white{color:#fff;}
.brand-yellow{color:var(--yellow);}
.app-icon-btn{width:42px;height:42px; display:flex; align-items:center; justify-content:center; border-radius:14px;}
.app-icon-btn:active{background: rgba(255,255,255,.12);}

.app-badge{
  position:absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  background:#ff3b30; color:#fff;
  border-radius: 999px;
  font-size: 11px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--primary);
}

/* Main layout */
.app-main{
  padding-bottom: 28px;
}

/* Offcanvas sidebar */
.app-offcanvas{width: 330px;}
.app-side-profile{padding: 22px 18px 10px; background:#fff;}
.app-avatar{width:92px; height:92px; border: 6px solid #fff; box-shadow: var(--shadow);}
.app-avatar img{width:100%; height:100%; object-fit: cover;}
.app-side-line{height:4px; width: 150px; background: var(--primary); border-radius: 10px; margin-top: 8px;}
.app-side-links .list-group-item{
  border:0;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 700;
}
.app-side-links .list-group-item:hover{background:#f6f8ff;}
.app-side-ico{
  width: 42px; height: 42px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex:0 0 auto;
}
.bg-indigo{background:#4b47c3;}
.bg-teal{background:#0d9488;}
.app-side-ico i{font-size: 20px;}

/* Tabs */
.app-tabs{
  background:#fff;
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  gap: 10px;
  overflow:auto;
}
.app-tab{
  white-space: nowrap;
  display:flex; align-items:center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  color:#2a3d66;
  text-decoration:none;
}
.app-tab i{opacity:.85;}
.app-tab.active{
  background: var(--primary);
  color:#fff;
}

/* Page headers */
.app-page-title{
  margin: 18px 0 14px;
  display:flex; align-items:center; justify-content:center;
  gap: 12px;
  color: var(--primary);
}
.app-page-title .ico{
  width: 42px; height: 42px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background:#e8f0ff;
  color: var(--primary);
}
.app-page-title h1{
  margin:0;
  font-weight: 1000;
  letter-spacing: 1px;
}

/* Cards (committee list) */
.card-sdg{
  position:relative;
  border:0;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 138px;
}

.card-sdg .bgimg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: grayscale(.2) contrast(1.05);
  opacity: .28;
}

.card-sdg .overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,0));
  opacity:.15;
}

.card-sdg .content{
  position:relative;
  padding: 18px 20px;
  color:#fff;
}

.card-sdg .meta{
  font-size: 14px;
  opacity: .92;
}

.card-sdg .title{
  font-weight: 1000;
  font-size: 28px;
  line-height: 1.08;
  margin: 4px 0 10px;
}

.card-sdg .dots{
  position:absolute; top: 12px; right: 14px;
  display:flex; gap: 6px;
}
.card-sdg .dot{
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.9);
}

.pill-file{
  background:#fff;
  color:#111827;
  border-radius: 999px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  max-width: 100%;
  overflow:hidden;
  text-decoration:none;
}
.pill-file .label{
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; font-size: 13px;
}
.pill-file i{color:#e11d48; font-size: 18px;}

.badge-check{
  width: 42px; height: 42px;
  border-radius: 999px;
  background:#22c55e;
  display:flex; align-items:center; justify-content:center;
  position:absolute; right: 16px; bottom: 16px;
  box-shadow: 0 10px 20px rgba(34,197,94,.35);
}
.badge-check i{font-size: 24px; color:#fff;}

/* Home big info card */
.home-hero{
  border-radius: 28px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--primary);
  color:#fff;
  position:relative;
}
.home-hero .hero-img{
  position:absolute; inset:0;
  background-image: url('../img/index.php.png');
  background-size: cover;
  background-position: center;
  opacity: .16;
}
.home-hero .hero-body{
  position:relative;
  padding: 26px 22px;
}
.home-hero h2{
  margin:0 0 12px;
  font-weight: 1000;
  font-size: 34px;
  line-height: 1.05;
}
.home-hero p{margin:0; opacity:.95; font-size: 15px; line-height: 1.5;}
.home-hero .accent{color: var(--yellow); font-weight: 900;}

/* Small blocks (Bisyon/Misyon/SDG) */
.block-grid{display:grid; gap: 16px;}
@media (min-width: 420px){
  .block-grid{grid-template-columns: 1fr 1fr;}
}
.block{
  border-radius: 26px;
  padding: 18px;
  color:#fff;
  box-shadow: var(--shadow);
}
.block h3{margin:0 0 8px; font-weight: 1000; letter-spacing:1px;}
.block p{margin:0; font-size: 13.5px; opacity: .95; line-height: 1.45;}
.block.red{background:#a31214;}
.block.green{background:#556b2f;}
.block.purple{background:#5b4db1;}
.block .accent{color: var(--yellow); font-weight: 900;}

/* Activity post style */
.post-card{
  border:0;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.post-head{
  padding: 18px 20px;
  color:#fff;
}
.post-head h2{margin:0; font-weight:1000; font-size: 32px; line-height: 1.05;}
.post-head .sub{opacity:.9; margin-top: 6px;}
.post-media{
  position:relative;
  background:#111827;
}
.post-media img{width:100%; height: auto; display:block;}
.post-arrow{
  position:absolute; top:50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.post-arrow.left{left: 12px;}
.post-arrow.right{right: 12px;}
.post-body{padding: 18px 20px;}
.post-body p{margin:0 0 10px; line-height: 1.55;}
.post-actions{
  display:flex; gap: 18px;
  opacity:.9;
  font-weight: 800;
}
.comment-card{
  border-radius: 22px;
  padding: 12px 14px;
  background:#fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  display:flex; gap: 12px;
  align-items:flex-start;
}
.comment-avatar{
  width: 44px; height: 44px; border-radius: 999px;
  overflow:hidden; flex:0 0 auto;
}
.comment-avatar img{width:100%; height:100%; object-fit: cover;}
.comment-bubble{
  flex:1;
  border-radius: 18px;
  padding: 10px 12px;
  background:#f3f4f6;
}
.comment-bubble .name{font-weight: 1000;}
.comment-bubble .text{margin-top: 2px;}
.comment-bubble .meta{margin-top: 6px; font-size: 12px; color:#6b7280; font-weight: 800;}

/* Utility */
.safe-bottom{
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* Splash page */
.splash{
  min-height: 100vh;
  background: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.splash .center{
  text-align:center;
  color:#fff;
  transform: translateY(-40px);
}
.splash .center img{width: 150px; height:auto;}
.splash .center .brand{
  margin-top: 12px;
  font-weight: 1000;
  font-size: 40px;
}
.splash .wheel{
  position:absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  max-width: 820px;
  opacity: 1;
}