:root{
    --navy-950:#081226; --navy-900:#0B1B36; --navy-800:#122B52; --navy-700:#1B3A6B;
    --green-600:#15924A; --green-500:#1EA855; --green-400:#3DC172; --green-100:#E4F7EA; --green-700:#0F7A3D;
    --off:#F5F8F6; --white:#FFFFFF; --ink:#0E1524; --muted:#5B6B7C; --line:#E4EAE7;
    --radius:18px; --shadow-soft:0 20px 50px -25px rgba(11,27,54,0.35); --ease:cubic-bezier(.22,.85,.31,1);
  }
  
  
  body{margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--off); -webkit-font-smoothing:antialiased; overflow-x:hidden; font-size:13.5px;}
  h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.02em; margin:0;}
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  .desktop-nav a:hover::after, .desktop-nav a.active::after{width:100%;}
  .desktop-nav a.active{color:var(--green-600);}
  
  
  
  
  
  

  
  
  
  
  
  .mobile-menu-close:hover{background:var(--off);}
  
  
  
  
  
  
  
  .mobile-menu-foot-bar{display:flex; align-items:center; font-size:12px; color:var(--muted); gap:0;}
  .mobile-menu-foot-bar .mmf-divider{width:2px; height:16px; background:var(--green-500); border-radius:2px; flex-shrink:0; margin-right:8px;}
  

  @media(min-width:900px){
    nav.desktop-nav{display:block;}
    .hamburger, .mobile-menu{display:none;}
  }

  /* ============ HERO (opportunities page) ============ */
  .op-hero{
    position:relative; background:var(--navy-950); color:#fff; overflow:hidden;
  }
  .op-hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease;}
  .op-hero-slide.active{opacity:1;}
  .op-hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,18,38,.96) 30%, rgba(8,18,38,.55) 75%, rgba(8,18,38,.25) 100%);}
  .op-hero-inner{position:relative; z-index:2; padding:44px 22px 40px; max-width:1180px; margin:0 auto;}
  .op-hero h1{font-size:26px; font-weight:800; margin-bottom:12px;}
  .op-hero p{font-size:13.5px; color:rgba(255,255,255,.75); max-width:480px; line-height:1.65; margin-bottom:22px;}
  .op-hero-badges{display:flex; flex-direction:column; gap:13px;}
  .op-hero-badge{display:flex; align-items:center; gap:9px; font-size:12.5px; color:rgba(255,255,255,.9);}
  .op-hero-badge .ic{width:28px; height:28px; border-radius:50%; background:rgba(30,168,85,.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--green-400);}
  .op-hero-badge b{display:block; font-size:13px; color:#fff;}
  .op-hero-badge span.sub{font-size:11.5px; color:rgba(255,255,255,.55);}

  /* ============ CONTENT ============ */
  .op-wrap{max-width:820px; margin:0 auto; padding:20px 18px 70px;}

  .op-cat-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .op-cat-head h3{font-family:'Plus Jakarta Sans'; font-size:14.5px; font-weight:800; color:var(--navy-900);}
  .op-cat-head .op-swipe-hint{font-size:11px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:4px;}
  .op-pills{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px; margin-bottom:10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 4px;}
  .op-pills::-webkit-scrollbar{display:none;}
  .op-pill{flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:86px; padding:14px 8px; border-radius:16px; border:1px solid var(--line); background:#fff; font-weight:800; font-size:11px; color:var(--navy-900); cursor:pointer; text-align:center; line-height:1.25; transition:background .25s, border-color .25s, color .25s, transform .25s;}
  .op-pill span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;}
  .op-pill .op-pill-ic{width:34px; height:34px; border-radius:50%; background:var(--green-100); color:var(--green-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .25s, color .25s;}
  .op-pill.active{background:var(--green-500); border-color:var(--green-500); color:#fff;}
  .op-pill.active .op-pill-ic{background:rgba(255,255,255,.2); color:#fff;}
  .op-pill svg{width:16px; height:16px; flex-shrink:0;}
  .op-cat-dots{display:none; justify-content:center; gap:5px; margin-bottom:16px;}
  .op-cat-dots .d{width:6px; height:6px; border-radius:50%; background:var(--line); transition:width .25s, background .25s;}
  .op-cat-dots .d.active{width:16px; border-radius:4px; background:var(--green-500);}
  @media(max-width:639px){.op-cat-dots{display:flex;}}

  .op-list-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
  .op-list-head h2{font-size:15px; font-weight:800; color:var(--navy-900);}
  .op-sort-select{border:none; background:none; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:4px;}

  .op-search-row{display:flex; gap:8px; margin-bottom:18px;}
  .op-search-wrap{position:relative; flex:1;}
  .op-search-wrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.5;}
  .op-search-wrap input{width:100%; padding:11px 14px 11px 38px; border-radius:11px; border:1.5px solid var(--line); font-size:13px; font-family:'Inter',sans-serif; outline:none;}
  .op-search-wrap input:focus{border-color:var(--green-500);}
  .op-filter-btn{width:42px; height:42px; flex-shrink:0; border-radius:11px; border:1.5px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer;}
  .op-filter-btn:hover{border-color:var(--green-500); color:var(--green-600);}

  #opportunitiesList{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .ol-row{display:flex; gap:11px; padding:14px 15px; border-bottom:1px solid #F0F3F1; align-items:flex-start; position:relative; cursor:pointer; transition:background .2s;}
  .ol-row:hover{background:#FAFCFB;}
  .ol-row:last-child{border-bottom:none;}
  .ol-row-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px;}
  .ol-row-body{flex:1; min-width:0;}
  .ol-row-title-line{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
  .ol-row-title{font-weight:700; font-size:13px; color:var(--navy-900); text-decoration:none; line-height:1.4;}
  .ol-row-title:hover{color:var(--green-600);}
  .ol-badge-new{background:var(--green-500); color:#fff; font-size:9px; font-weight:800; padding:2.5px 7px; border-radius:20px; letter-spacing:.03em;}
  .ol-row-meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; margin-top:4px;}
  .ol-row-cat{font-weight:700;}
  .ol-row-time{color:#8A97A3;}
  .ol-row-url{font-size:11px; color:#9AA6B2; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .ol-row-actions{display:flex; gap:6px; flex-shrink:0; position:relative;}
  .ol-icon-btn{width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s, color .2s;}
  .ol-icon-btn:hover{border-color:var(--green-500); color:var(--green-600);}
  .ol-empty{padding:50px 20px; text-align:center; color:var(--muted); font-size:13px;}

  /* ---- Loading states: spinner then skeleton ---- */
  .ol-loading-spinner{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:60px 20px;}
  .ol-spin{width:34px; height:34px; border-radius:50%; border:3px solid var(--green-100); border-top-color:var(--green-500); animation:olspin .7s linear infinite;}
  @keyframes olspin{to{transform:rotate(360deg);}}
  .ol-loading-spinner span{font-size:12.5px; color:var(--muted); font-weight:600;}
  .ol-skel-row{display:flex; gap:11px; padding:14px 15px; border-bottom:1px solid #F0F3F1; align-items:flex-start;}
  .ol-skel-dot{width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0;}
  .ol-skel-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;}
  .ol-skel-line{height:11px; border-radius:6px;}
  .ol-skel-dot, .ol-skel-line{background:linear-gradient(90deg, #EDF1EF 25%, #E2E8E5 37%, #EDF1EF 63%); background-size:400% 100%; animation:olshimmer 1.4s ease infinite;}
  @keyframes olshimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}
  .ol-skel-line.w60{width:60%;}
  .ol-skel-line.w38{width:38%;}
  .ol-skel-line.w80{width:80%;}
  .ol-skel-actions{display:flex; gap:8px; flex-shrink:0;}
  .ol-skel-actions span{width:26px; height:26px; border-radius:8px; background:linear-gradient(90deg, #EDF1EF 25%, #E2E8E5 37%, #EDF1EF 63%); background-size:400% 100%; animation:olshimmer 1.4s ease infinite;}

  #loadMoreWrap{text-align:center; margin-top:18px;}
  .op-loadmore-btn{padding:12px 26px; border-radius:11px; border:1.5px solid var(--green-500); background:#fff; color:var(--green-600); font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
  .op-loadmore-btn:hover{background:var(--green-100);}
  .op-loadmore-btn:disabled{opacity:.6; cursor:default;}

  .ol-share-pop{position:absolute; right:0; top:36px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-soft); padding:8px; z-index:20; display:none; min-width:170px;}
  .ol-share-pop.open{display:block;}
  .ol-share-pop button{display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border:none; background:none; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--navy-900); cursor:pointer; text-align:left;}
  .ol-share-pop button:hover{background:var(--off);}

  .op-toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy-900); color:#fff; padding:11px 18px; border-radius:30px; font-size:12.5px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:900; box-shadow:0 20px 40px -15px rgba(0,0,0,.4);}
  .op-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .footer-statement{max-width:640px; margin:28px auto 0; text-align:center; font-size:12.5px; color:rgba(255,255,255,.4); line-height:1.7; padding:0 12px;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:32px; padding:20px 0; font-size:12.5px;}
  
  
  
  .footer-credit{text-align:center; font-size:11.5px; color:rgba(255,255,255,.3); padding-top:14px; margin-top:4px; border-top:1px solid rgba(255,255,255,.06); padding-bottom:20px;}
  
  

  .footer-admin-btn{
    position:absolute; bottom:16px; right:18px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:13px;
    color:rgba(255,255,255,.35); transition:background .3s, color .3s, border-color .3s; z-index:5;
  }
  .footer-admin-btn:hover{background:rgba(255,255,255,.14); color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.3);}

  @media(min-width:900px){
    .op-hero-inner{padding:64px 24px 56px;}
    .op-hero h1{font-size:34px;}
    .op-hero-badges{flex-direction:row; gap:30px;}
    .op-wrap{padding:36px 24px 90px;}
    .op-pills{gap:12px; overflow-x:visible; flex-wrap:wrap;}
    .op-pill{width:96px; padding:16px 10px; font-size:11.5px;}
    .footer-top{grid-template-columns:1.2fr 2fr; gap:60px;}
    .footer-cols{grid-template-columns:repeat(3,1fr);}
  }