.htp-front, .htp-front * { box-sizing:border-box; }
.htp-front { --htp-ink:#1c2b40; --htp-secondary:#7b8da0; --htp-teal:#197f74; --htp-border:#e7edf1; font-family:'Yekan Bakh','YekanBakh','Vazirmatn',Tahoma,sans-serif; width:100%; direction:rtl; color:var(--htp-ink); text-align:right; font-size:14px; line-height:1.7; }
.htp-front button,.htp-front input,.htp-front select { font:inherit; }
.htp-front a { text-decoration:none; }
.htp-front-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; background:linear-gradient(110deg,#152236,#223b4b 70%,#285c61); border-radius:21px; color:#fff; padding:30px 34px; margin-bottom:18px; overflow:hidden; position:relative; }
.htp-front-hero:before { position:absolute; bottom:-150px; left:25%; width:290px; height:290px; border-radius:50%; border:1px solid rgba(255,255,255,.07); box-shadow:0 0 0 50px rgba(255,255,255,.02), 0 0 0 110px rgba(255,255,255,.015); content:""; pointer-events:none; }
.htp-front-hero-copy { position:relative; z-index:1; }
.htp-front-eyebrow { color:#a7e2d5; font-size:12px; font-weight:650; display:flex; align-items:center; gap:7px; }
.htp-online-dot { width:7px; height:7px; background:#74dbc7; border-radius:50%; display:inline-block; box-shadow:0 0 0 4px rgba(113,217,196,.14); }
.htp-front-hero h2 { color:#fff !important; font-size:clamp(20px,2.1vw,29px) !important; line-height:1.4; font-weight:800; margin:14px 0 9px !important; }
.htp-front-hero p { font-size:13px; color:#d1dee4; margin:0; line-height:1.95; }
.htp-front-tally { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.065); border-radius:17px; padding:14px 24px; min-width:130px; flex:none; }
.htp-front-tally span,.htp-front-tally small { color:#d6e6e9; font-size:11px; }
.htp-front-tally strong { color:#fff; font-size:33px; line-height:1.3; font-weight:800; }
.htp-front-filterbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; border:1px solid var(--htp-border); border-radius:15px; padding:17px 19px; background:#fff; margin-bottom:12px; }
.htp-front-filtertitle { display:flex; align-items:center; gap:10px; }
.htp-front-ico { display:grid; place-items:center; border-radius:10px; background:#edf7f5; color:#218579; width:38px; height:38px; font-size:22px; }
.htp-front-filtertitle strong { display:block; font-size:13px; color:var(--htp-ink); }
.htp-front-filtertitle small { display:block; color:var(--htp-secondary); font-size:11px; margin-top:1px; }
.htp-front-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.htp-front-filters label { margin:0; padding:0; display:block; }
.htp-front-filters input,.htp-front-filters select { min-width:125px; width:auto; height:41px; background:#fafcfd; border:1px solid #e1e9ee; border-radius:9px; padding:7px 11px; color:#52667a; font-size:12px; outline:none; transition:border-color .2s,box-shadow .2s; box-shadow:none; margin:0; }
.htp-front-filters input:focus,.htp-front-filters select:focus { border-color:#59a69a; box-shadow:0 0 0 3px rgba(64,151,137,.1); }
.htp-front-filters select { cursor:pointer; }
.htp-front-filters input::placeholder { color:#a0acb7; }
.htp-front-search { position:relative; }
.htp-front-filters .htp-front-search input { padding-right:31px; width:207px; min-width:170px; }
.htp-front-search-icon { position:absolute; top:2px; right:10px; color:#8c9da9; font-size:22px; pointer-events:none; }
.htp-front-list { display:flex; flex-direction:column; gap:10px; }
.htp-slip-card { display:flex; align-items:center; background:#fff; border:1px solid var(--htp-border); border-radius:14px; gap:17px; padding:16px 19px; transition:box-shadow .2s,border-color .2s; }
.htp-slip-card:hover { box-shadow:0 8px 28px rgba(22,41,60,.045); border-color:#d6e4e2; }
.htp-slip-card[hidden] { display:none !important; }
.htp-doc-icon { display:flex; flex:none; align-items:center; justify-content:center; width:50px; height:56px; color:#237b74; background:#eaf5f3; border-radius:12px; font-family:Arial,sans-serif; font-size:12px; font-weight:800; letter-spacing:.2px; }
.htp-slip-info { min-width:0; flex:1; }
.htp-slip-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.htp-slip-title-row h3 { margin:0 !important; color:#22354b !important; font-size:14px !important; font-weight:750 !important; line-height:1.6 !important; }
.htp-new-label { font-size:10px; color:#1e8376; background:#e9f7f2; border-radius:6px; padding:3px 8px; font-weight:750; }
.htp-slip-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:7px; color:#8797a6; font-size:11px; }
.htp-meta-dot { width:3px; height:3px; background:#c3cdd6; border-radius:50%; }
.htp-slip-notes { font-size:11.5px; color:#6d8194; margin:7px 0 0 !important; overflow-wrap:anywhere; }
.htp-slip-buttons { display:flex; flex-wrap:wrap; gap:7px; flex:none; }
.htp-front .htp-front-primary,.htp-front .htp-front-secondary { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:9px; min-height:39px; padding:7px 14px; font-size:12px; font-weight:750; line-height:1.5; transition:.2s background,.2s color,.2s border-color; white-space:nowrap; text-decoration:none !important; cursor:pointer; }
.htp-front .htp-front-primary { background:#207f76; border-color:#207f76; color:#fff !important; }
.htp-front .htp-front-primary:hover { background:#15675f; border-color:#15675f; }
.htp-front .htp-front-secondary { color:#546e7f !important; background:#f7fafb; border-color:#e3ebef; }
.htp-front .htp-front-secondary:hover { color:#226f66 !important; background:#edf6f3; border-color:#d2e7df; }
.htp-front-primary span,.htp-front-secondary span { font-size:15px; }
.htp-front-foot { text-align:center; color:#8796a4; font-size:11.5px; margin:18px 0 0; }
.htp-front-visible-count { display:block; margin-top:5px; color:#a4adb8; font-size:10.5px; }
.htp-front-empty,.htp-front-filter-empty { text-align:center; padding:65px 25px; border:1px dashed #dce5e8; border-radius:17px; background:#fcfefd; }
.htp-front-filter-empty[hidden] { display:none !important; }
.htp-empty-symbol,.htp-front-filter-empty > span { display:flex; margin:0 auto 14px; justify-content:center; align-items:center; width:67px; height:67px; border-radius:16px; color:#72a99f; background:#eef6f5; font-size:35px; }
.htp-front-empty h3,.htp-front-filter-empty strong { display:block; color:#34475b !important; font-size:16px !important; font-weight:750; margin:0 0 8px !important; }
.htp-front-empty p,.htp-front-filter-empty p { color:#8999a7; font-size:12px; margin:0; }
.htp-login { background:#fff; border:1px solid #e7edf1; border-radius:18px; text-align:center; padding:45px 25px; }
.htp-login .htp-front-symbol { margin:0 auto 15px; display:grid; place-items:center; background:#eff8f5; border-radius:16px; width:62px; height:62px; font-size:27px; }
.htp-login h3 { font-size:19px !important; color:#2b3c4e; margin:0 0 5px !important; }
.htp-login p { font-size:13px; color:#7b8fa0; margin:0 0 22px; }
.htp-front .screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }
@media(max-width:860px) { .htp-front-filterbar { align-items:stretch; } .htp-front-filters { width:100%; } .htp-front-filters label { flex:1; } .htp-front-filters input,.htp-front-filters select,.htp-front-filters .htp-front-search input { min-width:100%; width:100%; } }
@media(max-width:640px) { .htp-front-hero { padding:23px; gap:12px; } .htp-front-tally { min-width:84px; padding:11px; } .htp-front-tally strong { font-size:24px; } .htp-front-hero p { font-size:11px; } .htp-front-filterbar { padding:14px; } .htp-front-filters label { flex:1 1 calc(50% - 5px); } .htp-front-filters .htp-front-search { flex:1 1 100%; } .htp-slip-card { flex-wrap:wrap; gap:12px; padding:14px; } .htp-doc-icon { width:44px; height:48px; } .htp-slip-info { flex:1 1 calc(100% - 60px); } .htp-slip-buttons { flex:1 1 100%; border-top:1px solid #edf2f4; padding-top:11px; } .htp-slip-buttons a { flex:1; } }
@media(max-width:390px) { .htp-front-hero { display:block; } .htp-front-tally { flex-direction:row; gap:10px; margin-top:16px; width:100%; } .htp-front-tally small { display:none; } }