@import url('https://cdn.jsdelivr.net/gh/mirazmac/bengali-webfont-cdn@master/solaimanlipi/style.css');

:root{
  --green:#0F6E56; --green-d:#085041; --green-dd:#04342C;
  --mint:#5DCAA5; --pale:#9FE1CB; --wash:#E1F5EE;
  --bg:#F4F6F4; --card:#FFFFFF; --line:#E3E6E2; --line-2:#CFD4CE;
  --ink:#1C1F1C; --ink-2:#5C625C; --ink-3:#8A8F8A;
  --red-bg:#FCEBEB; --red-tx:#501313; --red:#A32D2D;
  --amber-bg:#FAEEDA; --amber-tx:#412402; --amber:#854F0B;
  --coffee:#BA7517;
  --r:10px; --r-lg:14px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'SolaimanLipi','Noto Sans Bengali',system-ui,sans-serif;
  font-size:16px; line-height:1.7;
}
img,svg,video{max-width:100%;}
a{color:var(--green); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-weight:500; line-height:1.45; margin:0 0 10px;}
h1{font-size:24px;} h2{font-size:20px;} h3{font-size:17px;}
p{margin:0 0 12px;}
.wrap{max-width:760px; margin:0 auto; padding:0 12px;}
.hide{display:none !important;}
.muted{color:var(--ink-2);}
.small{font-size:14px;}
.tiny{font-size:13px; color:var(--ink-3);}
.center{text-align:center;}
.mt{margin-top:16px;} .mb{margin-bottom:16px;}

/* ---------- হেডার ---------- */
.top{background:var(--green); color:#E1F5EE; padding:14px 0 16px;}
.top a{color:#E1F5EE;}
.brandline{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--mint);color:var(--green-dd);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;}
.brand b{display:block; font-size:19px; font-weight:500; line-height:1.2;}
.brand span{display:block; font-size:13px; color:var(--pale);}
.topicons{display:flex; gap:16px; font-size:22px; color:var(--pale);}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px;}
.stat{background:var(--green-d); border-radius:var(--r); padding:9px 12px;}
.stat i{display:block; font-size:13px; color:var(--pale); font-style:normal;}
.stat b{font-size:22px; font-weight:500;}

/* ---------- নেভিগেশন ---------- */
.navbar{background:var(--card); border-bottom:1px solid var(--line);}
.navgrid{display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:11px 0 8px;}
.navbtn{display:flex; align-items:center; justify-content:space-between; gap:6px;
  border:1px solid var(--line-2); border-radius:22px; padding:7px 12px;
  font-size:15px; color:var(--ink-2); background:var(--card); cursor:pointer; width:100%;
  font-family:inherit; text-align:left;}
.navbtn.on{background:var(--wash); border-color:var(--mint); color:var(--green-dd);}
.navnote{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; font-size:13px; color:var(--ink-3);}
.chips{display:flex; gap:7px; overflow-x:auto; padding:10px 0; -webkit-overflow-scrolling:touch;}
.chips::-webkit-scrollbar{display:none;}
.chip{white-space:nowrap; font-size:15px; padding:5px 14px; border-radius:20px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--card);}
.chip.on{background:var(--green); border-color:var(--green); color:#E1F5EE;}
.chip:hover{text-decoration:none;}
.sortbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0;
  border-top:1px solid var(--line); font-size:14px; color:var(--ink-2);}
.sortbar a{font-size:14px; padding:3px 11px; border-radius:16px; color:var(--ink-3);}
.sortbar a.on{background:var(--card); border:1px solid var(--line-2); color:var(--ink);}

/* ---------- কার্ড ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); margin:14px 0; overflow:hidden;}
.card .pad{padding:14px;}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px;}
.badge{font-size:13px; padding:3px 9px; border-radius:6px; background:#F1EFE8; color:#2C2C2A;}
.badge.ok{background:var(--wash); color:var(--green-dd);}
.badge.money{background:var(--red-bg); color:var(--red-tx);}
.badge.wait{background:var(--amber-bg); color:var(--amber-tx);}
.title{font-size:19px; font-weight:500; line-height:1.5; margin:0 0 8px; color:var(--ink);}
a.title:hover{text-decoration:none; color:var(--green);}
.excerpt{font-size:15px; color:var(--ink-2); margin-bottom:11px;}
.place{display:flex; align-items:flex-start; gap:8px; background:#F7F8F6; border-radius:var(--r);
  padding:9px 11px; font-size:14px; color:var(--ink-2); margin-bottom:11px;}
.place i{color:var(--green); font-size:17px;}
.place b{display:block; font-weight:500; color:var(--ink);}
.meta{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:11px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3);}
.meta .acts{display:flex; gap:14px; align-items:center;}
.meta .acts a,.meta .acts button{color:var(--ink-2); font-size:13px; background:none; border:0;
  font-family:inherit; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:4px;}
.meta .acts .voted{color:var(--green);}

/* ---------- মিডিয়া ---------- */
.gallery{display:grid; grid-template-columns:2fr 1fr; gap:6px; margin-bottom:11px;}
.gallery .main{grid-row:span 2;}
.gallery figure{margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:#E8EAE7; cursor:pointer;}
.gallery img{display:block; width:100%; height:100%; object-fit:cover;}
.gallery .main img{min-height:140px;}
.gallery .more{position:absolute; inset:0; background:rgba(28,31,28,.62); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;}
.playbtn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.playbtn span{width:46px;height:46px;border-radius:50%;background:rgba(15,110,86,.92);color:#E1F5EE;
  display:flex;align-items:center;justify-content:center;font-size:22px;}
.vidwrap video{width:100%; border-radius:var(--r); display:block; background:#000;}
.audio{border:1px solid var(--line); border-radius:var(--r); padding:11px 12px; margin-bottom:11px;}
.audio audio{width:100%;}
.audio .lbl{font-size:13px; color:var(--ink-3); margin-bottom:6px;}

/* ---------- প্রমাণপত্র ---------- */
.docs{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:12px;}
.docs .head{display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#F7F8F6; border-bottom:1px solid var(--line); font-size:15px; font-weight:500;}
.doc{display:flex; align-items:center; gap:11px; padding:11px 12px; border-bottom:1px solid var(--line);
  cursor:pointer; background:none; width:100%; border-left:0; border-right:0; border-top:0; font-family:inherit; text-align:left;}
.doc:last-child{border-bottom:0;}
.doc .ic{width:38px;height:46px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:19px;flex:0 0 auto; background:#F1EFE8; color:#5F5E5A;}
.doc .ic.pdf{background:var(--red-bg); color:var(--red);}
.doc .ic.img{background:#E6F1FB; color:#185FA5;}
.doc .nm{flex:1; min-width:0;}
.doc .nm b{display:block; font-weight:400; font-size:15px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.doc .nm span{font-size:13px; color:var(--ink-3);}

/* ---------- মোডাল ---------- */
.modal{position:fixed; inset:0; background:rgba(20,22,20,.72); z-index:80;
  display:flex; align-items:center; justify-content:center; padding:12px;}
.modal[hidden]{display:none;}
.modal .box{background:var(--card); border-radius:var(--r-lg); width:100%; max-width:640px;
  max-height:92vh; display:flex; flex-direction:column; overflow:hidden;}
.modal .mh{display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--line);}
.modal .mh .t{flex:1; min-width:0;}
.modal .mh b{display:block; font-weight:500; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.modal .mh span{font-size:12px; color:var(--ink-3);}
.modal .mb{flex:1; overflow:auto; background:#3E413E; display:flex; align-items:center; justify-content:center; min-height:220px;}
.modal .mb img{max-height:70vh; width:auto;}
.modal .mb iframe{width:100%; height:70vh; border:0; background:#fff;}
.modal .mf{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 13px;}
.modal .note{display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--wash);
  color:var(--green-dd); font-size:13px;}
.iconbtn{background:none; border:0; font-size:21px; color:var(--ink-2); cursor:pointer; font-family:inherit;}

/* ---------- ফর্ম ---------- */
label{display:block; font-size:14px; color:var(--ink-2); margin-bottom:6px;}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=password],select,textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--r); padding:10px 12px; margin-bottom:14px;}
textarea{line-height:1.7; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--mint); outline-offset:1px; border-color:var(--mint);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--green); color:#E1F5EE; border:0; border-radius:var(--r); padding:12px 18px;
  font-family:inherit; font-size:16px; font-weight:500; cursor:pointer; width:100%;}
.btn:hover{background:var(--green-d); text-decoration:none; color:#E1F5EE;}
.btn.ghost{background:none; color:var(--ink); border:1px solid var(--line-2);}
.btn.ghost:hover{background:#F1F3F0; color:var(--ink);}
.btn.danger{background:none; color:var(--red); border:1px solid #F0A5A5;}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn.sm{padding:8px 12px; font-size:14px;}
.steps{display:flex; gap:5px; margin-bottom:6px;}
.steps span{flex:1; height:3px; border-radius:2px; background:var(--line-2);}
.steps span.on{background:var(--green);}
.uploadgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;}
.upbox{border:1px dashed var(--mint); background:var(--wash); border-radius:var(--r);
  padding:14px 8px; text-align:center; color:var(--green); font-size:14px; cursor:pointer;}
.upbox i{display:block; font-size:20px; margin-bottom:5px;}
.filelist{font-size:14px; color:var(--ink-2); margin-bottom:14px;}
.filelist div{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line);}
.note{display:flex; gap:9px; border-radius:var(--r); padding:10px 12px; font-size:13px; line-height:1.6; margin-bottom:14px;}
.note.green{background:var(--wash); color:var(--green-dd);}
.note.amber{background:var(--amber-bg); color:var(--amber-tx);}
.note.red{background:var(--red-bg); color:var(--red-tx);}
.note i{font-size:17px; flex:0 0 auto;}
.pills{display:flex; gap:7px; flex-wrap:wrap; margin:-6px 0 14px;}
.pill{font-size:14px; padding:4px 12px; border-radius:20px; background:#F1F3F0; color:var(--ink-2); cursor:pointer;}
.opt4{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;}
.opt4 label{display:flex; align-items:center; justify-content:center; gap:6px; margin:0;
  border:1px solid var(--line-2); border-radius:var(--r); padding:10px; font-size:15px; cursor:pointer; color:var(--ink-2);}
.opt4 input{position:absolute; opacity:0; width:0;}
.opt4 input:checked + span{color:var(--green-dd);}
.opt4 label:has(input:checked){background:var(--wash); border-color:var(--mint); color:var(--green-dd);}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin-bottom:16px;}
.check input{margin-top:5px;}
.otpbox{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start;}

/* ---------- তালিকা ---------- */
.listrow{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);
  background:var(--card); color:var(--ink);}
.listrow:hover{text-decoration:none; background:#F7F8F6;}
.listrow .nm{flex:1;}
.listrow .nm b{font-weight:500; font-size:16px; display:block;}
.bar{height:4px; border-radius:2px; background:#EDEFEC; margin-top:6px;}
.bar span{display:block; height:4px; border-radius:2px; background:var(--green);}
.count{text-align:right; font-size:15px; color:var(--ink-2);}
.count small{display:block; font-size:12px; color:var(--ink-3);}
.sub{background:#F7F8F6;}
.sub .listrow{padding-left:30px; background:transparent; font-size:15px;}

/* ---------- মন্তব্য ---------- */
.cmt{border-top:1px solid var(--line); padding:12px 0;}
.cmt b{font-weight:500; font-size:14px;}
.cmt .who{font-size:13px; color:var(--ink-3); margin-bottom:4px;}
.cmt.official{background:var(--wash); border-radius:var(--r); padding:12px; border-top:0;}

/* ---------- কফি বাটন ---------- */
.coffee{position:fixed; right:14px; bottom:78px; z-index:60;
  display:flex; align-items:center; gap:9px; background:var(--coffee); color:#412402;
  padding:10px 16px 10px 12px; border-radius:28px; box-shadow:0 6px 20px rgba(65,36,2,.28);
  font-size:15px; font-weight:500;}
.coffee:hover{text-decoration:none; color:#412402; filter:brightness(1.05);}
.coffee svg{flex:0 0 auto;}

/* ---------- নিচের নেভ ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--card);
  border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:center;
  padding:8px 0 max(8px, env(safe-area-inset-bottom));}
.tabbar a{color:var(--ink-3); font-size:23px; display:flex; flex-direction:column; align-items:center; gap:2px;}
.tabbar a b{font-size:11px; font-weight:400;}
.tabbar a.on{color:var(--green);}
.tabbar .fab{width:46px;height:46px;margin-top:-14px;border-radius:14px;background:var(--green);color:#E1F5EE;
  display:flex;align-items:center;justify-content:center;font-size:24px;}
.tabbar .fab b{display:none;}
body{padding-bottom:86px;}

/* ---------- ফুটার ---------- */
footer{padding:22px 0 10px; color:var(--ink-3); font-size:13px; line-height:1.8;}
footer a{color:var(--ink-2);}

.empty{text-align:center; padding:40px 16px; color:var(--ink-3);}
.empty i{font-size:34px; display:block; margin-bottom:10px; color:var(--line-2);}
.pager{display:flex; gap:8px; justify-content:center; margin:18px 0;}
.pager a,.pager span{padding:7px 14px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--card); font-size:15px;}
.pager span{color:var(--ink-3);}
.flash{border-radius:var(--r); padding:11px 13px; margin:14px 0; font-size:15px;}
.flash.ok{background:var(--wash); color:var(--green-dd);}
.flash.err{background:var(--red-bg); color:var(--red-tx);}

/* ---------- ডেস্কটপ নেভিগেশন ---------- */
.desknav{display:none; align-items:center; gap:6px;}
.desknav a{padding:7px 12px; border-radius:20px; font-size:15px; color:var(--pale);}
.desknav a:hover{background:var(--green-d); color:#E1F5EE; text-decoration:none;}
.desknav a.on{background:var(--green-d); color:#E1F5EE;}
.desknav .deskcta{background:var(--mint); color:var(--green-dd); font-weight:500; margin-left:6px;}
.desknav .deskcta:hover{background:#7FD8B9; color:var(--green-dd);}
.feed{display:block;}

/* লম্বা শব্দ বা লিংক যেন বক্স ভেঙে বেরিয়ে না যায় */
body,.title,.excerpt,.doc .nm b{overflow-wrap:anywhere;}


/* ফর্ম ও তথ্য পেজে এলাকা-ফিল্টার দরকার নেই */
.pg-submit .navbar,.pg-about .navbar,.pg-search .navbar,.pg-donate .navbar{display:none;}
.pg-submit main.wrap,.pg-about main.wrap{max-width:680px;}

/* ====================================================================
   রেসপন্সিভ স্তর
   ==================================================================== */

/* ছোট ফোন (৩৬০px এর নিচে) */
@media (max-width:380px){
  body{font-size:15px;}
  .wrap{padding:0 10px;}
  h1{font-size:21px;} h2{font-size:18px;}
  .title{font-size:17px;}
  .brand b{font-size:17px;}
  .brand span{font-size:12px;}
  .stat b{font-size:19px;}
  .card .pad{padding:12px;}
  .navgrid{gap:6px;}
  .navbtn{font-size:14px; padding:7px 10px;}
  .chip{font-size:14px; padding:5px 12px;}
  .coffee span{display:none;}
  .coffee{padding:12px; border-radius:50%;}
  .modal{padding:0;}
  .modal .box{max-height:100vh; border-radius:0;}
}

/* বড় ফোন ও ছোট ট্যাব */
@media (min-width:560px){
  .wrap{padding:0 16px;}
  .navgrid{grid-template-columns:repeat(4,1fr);}
  .stats{grid-template-columns:repeat(4,1fr);}
  .uploadgrid,.opt4{grid-template-columns:repeat(4,1fr);}
  .card .pad{padding:18px;}
}

/* ট্যাব ও ল্যাপটপ — নিচের ট্যাববার সরিয়ে উপরে নেভিগেশন */
@media (min-width:820px){
  .desknav{display:flex;}
  .chips{flex-wrap:wrap; overflow:visible;}
  .topicons{display:none;}
  .tabbar{display:none;}
  body{padding-bottom:16px;}
  .coffee{bottom:22px; right:22px;}
  .top{padding:16px 0 18px;}
  .brand .mark{width:40px;height:40px;font-size:22px;}
  .brand b{font-size:21px;}
  .card{margin:18px 0;}
  .title{font-size:20px;}
  .btn{width:auto; min-width:180px;}
  .btn.full{width:100%;}
  .modal .box{max-height:88vh;}
}

/* বড় স্ক্রিন — হোম ফিড দুই কলামে */
@media (min-width:1060px){
  .pg-home .wrap{max-width:1080px;}
  .pg-browse .wrap,.pg-stats .wrap{max-width:900px;}
  .feed{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
  .feed .card{margin:0;}
  .gallery .main img{min-height:170px;}
}

/* একদম বড় মনিটর */
@media (min-width:1440px){
  .pg-home .wrap{max-width:1180px;}
  body{font-size:17px;}
}

/* প্রিন্ট */
@media print{
  .top,.navbar,.tabbar,.coffee,.modal,footer,.desknav{display:none !important;}
  .card{border:0; page-break-inside:avoid;}
  body{padding:0; background:#fff;}
}

@media (prefers-reduced-motion:no-preference){
  .coffee{transition:filter .2s;}
}