:root{
    --navy:#20375c;
    --navy-dark:#172a49;
    --orange:#f74904;
    --orange-dark:#df3e00;
    --ink:#17233a;
    --muted:#667085;
    --bg:#f6f8fb;
    --line:#e7ebf1;
    --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.portal-nav{
    background:var(--navy);
    color:#fff;
    min-height:72px;
    box-shadow:0 3px 16px rgba(23,42,73,.15);
    border-bottom:3px solid var(--orange);
}
.portal-nav .navbar-brand{color:#fff}
.brand-logo{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.brand-logo img{width:50px;height:50px;object-fit:contain}
.portal-brand-text{display:flex;flex-direction:column;line-height:1}
.portal-brand-text strong{font-size:18px;letter-spacing:.4px}
.portal-brand-text small{font-size:9px;letter-spacing:1.8px;opacity:.72;margin-top:5px}
.portal-nav .nav-link{color:rgba(255,255,255,.82);font-weight:600}
.portal-nav .nav-link:hover{color:#fff}
.portal-nav .btn-light{color:var(--navy);font-weight:700}
.portal-nav .btn-outline-light:hover{color:var(--navy)}
.navbar-toggler{color:#fff;border-color:rgba(255,255,255,.35)}

.portal-main{min-height:calc(100vh - 145px)}
.directory-head{
    background:#fff;
    border-bottom:1px solid var(--line);
}
.directory-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}
.section-kicker{
    display:inline-block;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
    color:var(--orange);
    margin-bottom:6px;
}
.directory-title h1{
    margin:0;
    font-size:clamp(30px,4vw,42px);
    line-height:1.1;
    font-weight:800;
    letter-spacing:-1px;
    color:var(--navy-dark);
}
.directory-title p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
}
.directory-total{
    min-width:145px;
    padding:12px 16px;
    border-left:3px solid var(--orange);
    background:#fafafa;
    border-radius:0 10px 10px 0;
    text-align:left;
}
.directory-total strong{
    display:block;
    font-size:25px;
    line-height:1;
    color:var(--navy);
}
.directory-total span{font-size:12px;color:var(--muted)}

.directory-tools{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:24px;
}
.compact-search{
    height:46px;
    width:min(340px,100%);
    flex:0 0 340px;
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #dfe4eb;
    border-radius:10px;
    padding:0 13px;
    transition:.2s;
}
.compact-search:focus-within{
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(32,55,92,.08);
}
.compact-search>i{color:var(--navy);font-size:17px}
.compact-search input{
    width:100%;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    padding:0 10px;
    font-size:14px;
    color:var(--ink);
}
.compact-search button{
    border:0;
    background:transparent;
    color:#98a2b3;
    padding:4px;
}
.filter-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    flex:1;
}
.filter-btn{
    border:1px solid #dfe4eb;
    background:#fff;
    border-radius:8px;
    padding:8px 13px;
    color:#475467;
    font-size:12px;
    font-weight:700;
    transition:.18s;
}
.filter-btn:hover{
    border-color:var(--orange);
    color:var(--orange);
}
.filter-btn.active{
    background:var(--orange);
    color:#fff;
    border-color:var(--orange);
    box-shadow:0 5px 14px rgba(247,73,4,.18);
}

.portal-content{min-height:600px}
.app-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.app-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 3px 14px rgba(23,42,73,.045);
    transition:transform .2s,box-shadow .2s,border-color .2s;
    display:flex;
    flex-direction:column;
}
.app-card:hover{
    transform:translateY(-4px);
    border-color:#d7dde6;
    box-shadow:0 12px 28px rgba(23,42,73,.11);
}
.app-thumb{
    height:155px;
    background:#eef2f7;
    position:relative;
    overflow:hidden;
}
.app-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s;
}
.app-card:hover .app-thumb img{transform:scale(1.035)}
.app-category{
    position:absolute;
    left:11px;
    top:11px;
    background:rgba(255,255,255,.94);
    color:var(--navy);
    border-left:3px solid var(--orange);
    border-radius:6px;
    padding:5px 8px;
    font-size:9px;
    font-weight:800;
}
.app-body{
    padding:16px;
    display:flex;
    flex-direction:column;
    flex:1;
}
.app-body h3{
    font-size:17px;
    font-weight:800;
    margin:0 0 7px;
    color:var(--navy-dark);
}
.app-body p{
    font-size:12.5px;
    line-height:1.6;
    color:var(--muted);
    margin:0 0 16px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.app-open{
    margin-top:auto;
    text-decoration:none;
    font-weight:800;
    color:var(--orange);
    font-size:12.5px;
}
.app-open:hover{color:var(--orange-dark)}
.app-open i{margin-left:4px}
.empty-state{text-align:center;padding:65px 20px;color:var(--muted)}
.empty-state i{font-size:40px;color:#98a2b3}
.empty-state h3{color:#344054;font-size:20px;margin-top:12px}
.empty-state p{font-size:13px}

.pagination .page-link{
    color:var(--navy);
    border-color:#dfe4eb;
}
.pagination .active .page-link{
    background:var(--orange);
    border-color:var(--orange);
    color:#fff;
}

.portal-footer{
    background:var(--navy-dark);
    color:#fff;
    margin-top:20px;
    border-top:3px solid var(--orange);
}
.portal-footer span{color:rgba(255,255,255,.58);font-size:13px}
.admin-page{min-height:calc(100vh - 72px)}
.admin-thumb{width:76px;height:44px;object-fit:cover;border-radius:7px}
.card{border-radius:14px}
.btn-primary{background:var(--orange);border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--navy-dark),var(--navy));
}
.login-card{
    width:min(430px,92vw);
    background:#fff;
    border-radius:18px;
    padding:36px;
    box-shadow:0 24px 65px rgba(0,0,0,.2);
}
.login-card h3{font-weight:800;color:var(--navy-dark)}

@media(max-width:1199px){
    .app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:991px){
    .directory-title{align-items:flex-start;flex-direction:column}
    .directory-total{border-left:0;border-top:3px solid var(--orange);border-radius:0 0 8px 8px}
    .directory-tools{align-items:stretch;flex-direction:column}
    .compact-search{width:100%;flex-basis:auto}
}
@media(max-width:767px){
    .portal-nav{min-height:64px}
    .directory-title h1{font-size:30px}
    .app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
    .app-thumb{height:140px}
    .app-body{padding:13px}
    .app-body h3{font-size:15px}
    .filter-wrap{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
    .filter-btn{white-space:nowrap}
}
@media(max-width:480px){
    .app-grid{grid-template-columns:1fr}
    .app-thumb{height:185px}
    .directory-title p{font-size:13px}
}