/* Afghan Portal — Main CSS */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --g:#1D9E75;--gd:#0a3d2b;--gl:#e1f5ee;--gm:#a7d9c5;
  --b:#1d4ed8;--bl:#dbeafe;
  --r:#b91c1c;--rl:#fee2e2;
  --a:#d97706;--al:#fef3c7;
  --p:#7c3aed;--pl:#ede9fe;
  --bg:#f0f2f5;--card:#fff;--bdr:#e2e6ea;
  --t1:#111827;--t2:#6b7280;--t3:#9ca3af;
  --rad:12px;--rsm:8px;
}
body{font-family:'Vazirmatn',sans-serif;direction:rtl;background:var(--bg);color:var(--t1);font-size:15px;line-height:1.6;min-height:100vh}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;transition:.15s}
input,select,textarea{font-family:inherit;outline:none}

/* HEADER */
#hdr{background:var(--gd);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.hrow{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:58px;gap:12px}
.logo-m{font-size:21px;font-weight:900;color:#fff;line-height:1}
.logo-m em{color:#4ecb95;font-style:normal}
.logo-s{font-size:9px;color:rgba(255,255,255,.5);margin-top:2px;font-weight:500}
.hnav{display:flex;gap:2px;flex:1;justify-content:center}
.hnav a{font-size:12px;font-weight:700;color:rgba(255,255,255,.7);padding:6px 10px;border-radius:6px;cursor:pointer}
.hnav a:hover,.hnav a.on{background:rgba(255,255,255,.15);color:#fff}
.srch{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:5px 12px}
.srch input{border:none;background:transparent;color:#fff;width:130px;font-size:12px}
.srch input::placeholder{color:rgba(255,255,255,.4)}

/* DATEBAR */
.datebar{background:linear-gradient(90deg,#051f14,var(--gd));display:flex;align-items:stretch;border-bottom:3px solid var(--g)}
.dbi{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 16px;border-left:1px solid rgba(255,255,255,.1);flex:1}
.dbi span{font-size:9px;font-weight:700;color:rgba(255,255,255,.45);margin-bottom:2px}
.dbi strong{font-size:16px;font-weight:900;color:#fff;white-space:nowrap}
.clkbox{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 22px;background:var(--g);flex-shrink:0}
.clkbox small{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:1px}
#clk{font-size:26px;font-weight:900;color:#fff;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1}

/* PAGE */
.page{max-width:1240px;margin:0 auto;padding:14px 16px 80px;display:grid;grid-template-columns:1fr 290px;gap:14px}

/* CARD */
.card{background:var(--card);border-radius:var(--rad);border:1px solid var(--bdr);margin-bottom:14px;overflow:hidden}
.card:last-child{margin-bottom:0}
.ch{padding:10px 14px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:#fafbfc}
.cht{font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px}
.cht::before{content:'';width:4px;height:15px;border-radius:2px;background:var(--ac,var(--g));display:inline-block;flex-shrink:0}
.mbtn{font-size:11px;font-weight:700;color:var(--g);background:var(--gl);border:none;padding:4px 11px;border-radius:20px}
.mbtn:hover{background:var(--g);color:#fff}

/* TOOLS */
.twrap{padding:14px}
.tcat{font-size:11px;font-weight:900;color:var(--t2);letter-spacing:.3px;margin:14px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--bdr)}
.tcat:first-child{margin-top:0}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:4px}
.tool{background:#f5f7fb;border-radius:12px;padding:20px 10px;text-align:center;border:1.5px solid transparent;cursor:pointer;transition:.15s}
.tool:hover{background:var(--gl);border-color:var(--g);transform:translateY(-2px)}
.tool.hi{background:var(--gl);border-color:var(--gm)}
.ti{font-size:34px;margin-bottom:8px;line-height:1}
.tl{font-size:13px;font-weight:800;color:var(--t1);line-height:1.3}

/* SIDEBAR */
.fxc{padding:12px}
.fxrow{display:flex;gap:6px;margin-bottom:6px}
.fxrow input,.fxrow select{flex:1;border:1.5px solid var(--bdr);border-radius:var(--rsm);padding:8px 10px;font-size:14px;font-weight:700;background:#fff;color:var(--t1)}
.fxrow input:focus,.fxrow select:focus{border-color:var(--g)}
.fxres{background:var(--gl);border-radius:var(--rsm);padding:9px 14px;font-size:20px;font-weight:900;color:var(--gd);text-align:center;border:1.5px solid var(--gm);margin-bottom:6px}
.fxgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.fxbtn{padding:5px;border:1.5px solid var(--bdr);border-radius:6px;font-size:11px;font-weight:700;background:#f5f7fb;color:var(--t2)}
.fxbtn:hover{background:var(--g);color:#fff;border-color:var(--g)}
.mkt{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:12px}
.mi{background:#f5f7fb;border-radius:var(--rsm);padding:7px 9px;display:flex;justify-content:space-between;align-items:center}
.min{font-size:11px;font-weight:700;color:var(--t3)}
.miv{font-size:14px;font-weight:900}
.up{color:#15803d}.dn{color:var(--r)}
.badge{font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px}
.upbg{background:#dcfce7;color:#15803d}.dnbg{background:#fee2e2;color:var(--r)}
.wxcard{padding:12px}
.wxmain{background:linear-gradient(135deg,var(--b),#60a5fa);border-radius:10px;padding:12px;color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.wxt{font-size:34px;font-weight:900}
.wxd{font-size:11px;opacity:.85;margin-top:2px}
.wxcities{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.wc{background:#f5f7fb;border-radius:var(--rsm);padding:5px;text-align:center}
.wcn{font-size:9px;font-weight:700;color:var(--t3)}
.wct{font-size:12px;font-weight:800}
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:12px}
.svc{background:#f5f7fb;border-radius:var(--rsm);padding:8px 9px;display:flex;align-items:center;gap:6px;border:1.5px solid transparent;cursor:pointer}
.svc:hover{border-color:var(--g);background:var(--gl)}
.svc i{font-size:15px}
.svc span{font-size:11px;font-weight:700;color:var(--t2)}

/* PANEL */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;align-items:flex-end;justify-content:center}
.ov.open{display:flex}
.panel{background:#fff;width:100%;max-width:700px;border-radius:16px 16px 0 0;max-height:88vh;overflow-y:auto;animation:su .22s ease}
@keyframes su{from{transform:translateY(100%)}to{transform:translateY(0)}}
.phd{background:var(--gd);color:#fff;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;border-radius:16px 16px 0 0;position:sticky;top:0;z-index:1}
.phd h3{font-size:16px;font-weight:800}
.pcls{background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:7px;font-size:16px;display:flex;align-items:center;justify-content:center}
.pcls:hover{background:rgba(255,255,255,.3)}
.pb{padding:15px}
.fl{font-size:11px;font-weight:800;color:var(--t3);margin-bottom:5px}
.fr{margin-bottom:12px}
.fi{width:100%;border:1.5px solid var(--bdr);border-radius:var(--rsm);padding:9px 11px;font-size:14px;font-weight:600;color:var(--t1);background:#fff}
.fi:focus{border-color:var(--g)}
.nrow{display:flex;gap:5px;flex-wrap:wrap}
.nb{padding:6px 12px;border:1.5px solid var(--bdr);border-radius:7px;font-size:12px;font-weight:700;background:#f5f7fb;color:var(--t2)}
.nb:hover,.nb.s{background:var(--g);color:#fff;border-color:var(--g)}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ab{padding:8px;border:1.5px solid var(--bdr);border-radius:7px;font-size:12px;font-weight:700;text-align:center;background:#f5f7fb;color:var(--t2)}
.ab:hover,.ab.s{background:var(--g);color:#fff;border-color:var(--g)}
.sbtn{width:100%;padding:11px;background:var(--g);color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:900}
.sbtn:hover{background:var(--gd)}
.sbtn:disabled{background:#aaa;cursor:not-allowed}
.blnk{display:block;text-align:center;font-size:12px;color:var(--t3);margin-top:8px;cursor:pointer}
.blnk:hover{color:var(--g)}
.feenote{font-size:11px;color:var(--t3);background:#f5f7fb;padding:8px 11px;border-radius:7px;margin-bottom:11px}
.ctabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}
.ctab{padding:5px 11px;border:1.5px solid var(--bdr);border-radius:20px;font-size:12px;font-weight:700;background:#f5f7fb;color:var(--t2)}
.ctab:hover,.ctab.on{background:var(--g);color:#fff;border-color:var(--g)}
.gbtn{background:var(--g);color:#fff;border:none;border-radius:var(--rsm);padding:9px 18px;font-size:14px;font-weight:800;margin-top:8px}
.gbtn:hover{background:var(--gd)}
.res-box{background:var(--gl);border-radius:9px;padding:14px;text-align:center;border:1.5px solid var(--gm);margin-top:10px;display:none}
.res-lbl{font-size:11px;font-weight:700;color:var(--t3);margin-bottom:5px}
.res-val{font-size:24px;font-weight:900;color:var(--gd)}
.res-sub{font-size:12px;color:var(--t2);margin-top:3px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:11px}
.pm{padding:9px 11px;border:1.5px solid var(--bdr);border-radius:9px;display:flex;align-items:center;gap:7px;cursor:pointer}
.pm:hover,.pm.s{border-color:var(--g);background:#f0faf5}
.pmic{font-size:18px}
.pminf{font-size:12px;font-weight:700;color:var(--t1)}
.pmsub{font-size:10px;color:var(--t3)}
.cform{display:none;background:#f5f7fb;border-radius:9px;padding:11px;margin-bottom:11px;border:1.5px solid var(--bdr)}
.crow{display:flex;gap:6px}
.crow .fr{flex:1}
.steps{display:flex;padding:11px 15px;border-bottom:1px solid var(--bdr);background:#fafbfc}
.step{flex:1;text-align:center;font-size:10px;font-weight:700;color:#bbb;padding-bottom:5px;position:relative}
.step::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--bdr);border-radius:2px}
.step.on{color:var(--g)}.step.on::after{background:var(--g)}.step.done{color:var(--g)}
.stepn{display:block;font-size:14px;font-weight:900;margin-bottom:2px}
.sumbox{background:var(--gl);border-radius:9px;padding:11px 13px;margin-bottom:11px;border:1px solid var(--gm)}
.sumr{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:3px}
.sumr:last-child{font-size:14px;font-weight:900;margin-bottom:0;padding-top:7px;border-top:1px solid var(--gm)}
.sucwrap{padding:26px 15px;text-align:center}
.sucwrap .sc{font-size:52px;margin-bottom:8px}
.sucwrap h4{font-size:19px;font-weight:900;margin-bottom:5px}
.sucwrap p{font-size:13px;color:var(--t2);line-height:1.6}
.codebox{background:var(--gl);border-radius:8px;padding:7px 14px;font-size:17px;font-weight:900;color:var(--gd);display:inline-block;margin:9px 0}
.newbtn{padding:8px 22px;background:var(--gl);color:var(--gd);border:none;border-radius:8px;font-size:13px;font-weight:800;margin-top:5px}

/* AI */
.aibox{background:#f0faf5;border-radius:10px;border:1.5px solid var(--gm);padding:13px}
.aihd{font-size:13px;font-weight:800;color:var(--gd);display:flex;align-items:center;gap:7px;margin-bottom:9px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--g);animation:pulse 1.8s infinite;display:inline-block;flex-shrink:0}
@keyframes pulse{50%{transform:scale(1.5);opacity:.4}}
.aiinp{width:100%;border:1.5px solid var(--gm);border-radius:var(--rsm);padding:8px 12px;font-size:14px;background:#fff;color:var(--t1);min-height:60px;resize:none;display:block}
.aiinp:focus{border-color:var(--g)}
.chips{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;border:1.5px solid var(--gm);background:#fff;color:var(--gd);cursor:pointer}
.chip:hover{background:var(--g);color:#fff;border-color:var(--g)}
.ald{display:none;font-size:12px;font-weight:700;color:var(--g);margin-top:7px;align-items:center;gap:5px}
.dots span{animation:db 1.2s infinite;font-size:15px}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes db{40%{opacity:1}0%,80%,100%{opacity:.1}}
.aans{display:none;font-size:13px;line-height:1.75;margin-top:8px;padding:11px 13px;background:#fff;border-radius:var(--rsm);border:1px solid var(--gm);white-space:pre-wrap;color:var(--t1)}
.asbtn{background:var(--g);color:#fff;border:none;border-radius:var(--rsm);padding:8px 16px;font-size:13px;font-weight:800;margin-top:8px;float:left}
.asbtn:hover{background:var(--gd)}

/* CALC */
.calc{background:#1a1a2e;border-radius:10px;overflow:hidden}
.calcdisp{background:#0d0d1a;padding:14px 16px;direction:ltr}
.calcexpr{font-size:13px;color:#666;min-height:18px}
.calcval{font-size:32px;font-weight:900;color:#fff;word-break:break-all}
.calcbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#111}
.cb{padding:18px 8px;border:none;font-size:17px;font-weight:700;cursor:pointer;text-align:center}
.cb.num{background:#2a2a3e;color:#fff}.cb.num:hover{background:#3a3a4e}
.cb.op{background:#374151;color:#e5e7eb}.cb.op:hover{background:#4b5563}
.cb.eq{background:var(--g);color:#fff}.cb.eq:hover{background:var(--gd)}
.cb.fn{background:#1e293b;color:#94a3b8}.cb.fn:hover{background:#334155}
.cb.zero{grid-column:span 2}

/* PRAYER */
.prgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pri{background:#f5f7fb;border-radius:var(--rsm);padding:11px;text-align:center;border:1.5px solid transparent}
.pri.now{background:var(--gl);border-color:var(--g)}
.prn{font-size:11px;font-weight:700;color:var(--t2);margin-bottom:3px}
.prt{font-size:19px;font-weight:900;color:var(--gd)}
.pri.now .prt{color:var(--g)}
.prx{font-size:9px;color:var(--g);font-weight:700;margin-top:2px}

/* COMPASS */
.comp-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0}
.comp-outer{position:relative;width:250px;height:250px;margin-bottom:14px}
.cn{position:absolute;top:50%;left:50%;width:4px;height:105px;margin-left:-2px;margin-top:-95px;transform-origin:bottom center;transition:transform .25s ease;z-index:2}
.cn-n{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:80px solid #e74c3c;margin-left:-6px}
.cn-s{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:22px solid #bdc3c7;margin-left:-6px}
.qa{position:absolute;top:50%;left:50%;width:4px;height:105px;margin-left:-2px;margin-top:-95px;transform-origin:bottom center;z-index:3;display:none}
.qa-h{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:80px solid #f0c040;margin-left:-5px}
.qa-t{width:4px;height:18px;background:#f0c040;margin-left:-1px}
.cc{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);z-index:4;box-shadow:0 0 6px rgba(0,0,0,.5)}

/* MAP */
.prov{fill:#a8d5a2;stroke:#fff;stroke-width:1.5;cursor:pointer;transition:fill .2s}
.prov:hover,.prov.sel{fill:#1D9E75}
.pl{font-size:8px;fill:#1a3a1a;font-weight:700;pointer-events:none;text-anchor:middle}

/* DOWNLOAD */
.dlfmt{background:#fff;border-radius:8px;padding:9px 12px;border:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dlfmt:hover{border-color:var(--g);background:var(--gl)}
.dlget{background:var(--g);color:#fff;border:none;border-radius:6px;padding:5px 11px;font-size:12px;font-weight:800;cursor:pointer}

/* FOOTER */
#ftr{background:var(--gd);color:#fff;text-align:center;padding:18px}
.ftn{font-size:20px;font-weight:900}
.ftn em{color:#4ecb95;font-style:normal}
.fts{font-size:13px;color:rgba(255,255,255,.6);margin-top:3px}
.ftc{font-size:10px;color:rgba(255,255,255,.3);margin-top:6px}

/* MOBILE NAV */
.mobnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;background:#fff;border-top:2px solid var(--bdr);padding:6px 0 max(8px,env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,.1)}
.mnin{display:flex;justify-content:space-around;align-items:center;padding:0 4px}
.mnb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border:none;background:transparent;flex:1;cursor:pointer;border-radius:10px;min-width:0}
.mnb.on .mni,.mnb.on .mnl{color:var(--g)}
.mni{font-size:22px;line-height:1;color:var(--t3)}
.mnl{font-size:10px;font-weight:800;color:var(--t3);white-space:nowrap}
.mnb.sp{background:var(--gl);border-radius:12px;margin:0 4px}
.mnb.sp .mni,.mnb.sp .mnl{color:var(--gd);font-weight:900}

/* RESPONSIVE */
@media(max-width:768px){
  html,body{overflow-x:hidden;width:100%;max-width:100vw}
  .page{grid-template-columns:1fr;padding:10px 12px 100px;gap:12px;width:100%;box-sizing:border-box}
  .hrow{padding:0 14px;height:54px}
  .hnav,.hdr-srch{display:none}
  .logo-m{font-size:19px}
  .logo-s{font-size:10px}
  .datebar{flex-wrap:wrap;width:100%}
  .dbi{flex:1;min-width:30%;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.1)}
  .dbi span{font-size:9px}
  .dbi strong{font-size:14px;font-weight:900}
  .clkbox{width:100%;flex-direction:row;justify-content:center;gap:10px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.12)}
  .clkbox small{font-size:10px;margin-bottom:0;align-self:center}
  #clk{font-size:24px;letter-spacing:1px}
  .card{border-radius:12px;margin-bottom:12px;width:100%;overflow:hidden}
  .ch{padding:12px 14px}
  .cht{font-size:15px;font-weight:900}
  .mbtn{font-size:11px}
  .twrap{padding:14px 12px}
  .tcat{font-size:11px;margin:14px 0 8px;font-weight:900;color:var(--t2);border-bottom:1px solid var(--bdr);padding-bottom:6px}
  .tcat:first-child{margin-top:0}
  .tgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tool{border-radius:12px;padding:20px 10px 16px;text-align:center}
  .ti{font-size:34px;margin-bottom:8px}
  .tl{font-size:13px;font-weight:800;color:var(--t1)}
  .tool.hi .tl{color:var(--gd)}
  .fxc{padding:12px}
  .fxrow{flex-direction:column;gap:8px}
  .fxrow input,.fxrow select{width:100%;font-size:15px;padding:10px 12px}
  .fxres{font-size:20px;padding:11px 14px}
  .fxgrid{grid-template-columns:repeat(4,1fr);gap:5px}
  .fxbtn{font-size:12px;padding:7px 4px}
  .mkt{gap:6px;padding:12px}
  .mi{padding:9px 10px;border-radius:9px}
  .min{font-size:11px}
  .miv{font-size:14px;font-weight:900}
  .wxcard{padding:12px}
  .wxmain{padding:13px;margin-bottom:8px}
  .wxt{font-size:36px;font-weight:900}
  .wxcities{grid-template-columns:repeat(3,1fr);gap:5px}
  .wc{padding:6px 4px}
  .wcn{font-size:9px}
  .wct{font-size:12px;font-weight:900}
  .svcs{grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}
  .svc{padding:10px 6px;flex-direction:column;text-align:center;gap:4px;border-radius:10px}
  .svc i{font-size:20px}
  .svc span{font-size:10px;font-weight:800;color:var(--t1)}
  .panel{max-width:100%;border-radius:20px 20px 0 0;max-height:92vh}
  .phd{border-radius:20px 20px 0 0;padding:14px 15px}
  .phd h3{font-size:16px}
  .pb{padding:14px 12px}
  .fi{font-size:14px;padding:10px 12px}
  .nb{font-size:12px;padding:7px 12px}
  .ab{font-size:12px;padding:9px}
  .sbtn{font-size:15px;padding:12px}
  .ctab{font-size:12px;padding:6px 12px}
  .mobnav{display:block;width:100%}
  .mnin{padding:0 4px}
  #ftr{padding:18px 14px 22px}
  .ftn{font-size:20px}
  .fts{font-size:12px}
}
@media(max-width:400px){
  .tgrid{gap:8px}
  .ti{font-size:30px}
  .tl{font-size:12px}
  #clk{font-size:20px}
}