/* AfriSeat shared chrome: header, drawer, footer, mobile tab bar */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 0 rgba(16,24,32,.06);transition:box-shadow .3s,background .3s}
.nav.scrolled{background:rgba(255,255,255,.98);box-shadow:0 8px 24px -14px rgba(16,24,32,.25)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:64px;max-width:1360px;margin:0 auto;padding:0 28px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink,#101820);font-weight:800;font-size:22px;letter-spacing:-.4px;flex:none}
.logo .mark{color:#fff;width:34px;height:34px;border-radius:50%;background:var(--accent,#0180ff);display:grid;place-items:center}
.logo .mark svg{width:20px;height:20px}
.logo b{color:var(--accent-ink,#0066cc);font-weight:800}
.nav-links{display:flex;gap:2px;margin-left:8px}
.nav-links>a,.nav-links .dd>button{color:var(--ink,#101820);font-size:14px;font-weight:500;padding:8px 13px;border-radius:8px;transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:inherit}
.nav-links>a:hover,.nav-links .dd>button:hover,.nav-links .dd.open>button{background:var(--soft,#f3f4f6);color:var(--accent-ink,#0066cc)}
.nav-links a[aria-current],.nav-links .dd.cur>button{color:var(--accent-ink,#0066cc);font-weight:700}
.nav-links .dd{position:relative}
.nav-links .dd>button svg{width:14px;height:14px;transition:transform .2s}
.nav-links .dd.open>button svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;border-radius:16px;box-shadow:0 18px 50px -12px rgba(16,24,32,.28),0 0 0 1px rgba(16,24,32,.05);padding:8px;display:none;z-index:70}
.dd.open>.menu,.av-wrap.open>.menu{display:block;animation:mfade .18s}
@keyframes mfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu a,.menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink,#101820);text-align:left;background:none;border:0;cursor:pointer;font-family:inherit}
.menu a:hover,.menu button:hover{background:var(--accent-tint-2,#eaf3ff);color:var(--accent-ink,#0066cc)}
.menu small{color:var(--muted,#6b7280);font-size:12px;font-weight:600}
.menu hr{border:0;height:1px;background:#eef0f4;margin:6px 4px}
.menu.cats{min-width:300px;display:none;grid-template-columns:1fr 1fr;gap:2px}
.dd.open>.menu.cats{display:grid}
.menu.cats hr,.menu.cats .all{grid-column:1/-1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{position:relative;display:flex;align-items:center;gap:8px;height:40px;width:210px;padding:0 14px;border-radius:999px;background:var(--soft,#f3f4f6);color:var(--muted,#6b7280);font-size:13px;transition:width .3s,background .2s,box-shadow .2s}
.search:focus-within{width:290px;background:#fff;box-shadow:0 0 0 2px rgba(var(--accent-rgb,1,128,255),.4)}
.search input{background:none;border:0;outline:0;font:inherit;width:100%;color:var(--ink,#101820);min-width:0}
.search input::placeholder{color:#8b909a}
.search>svg{width:15px;height:15px;flex:none}
.sugg{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:300px;background:#fff;border-radius:16px;box-shadow:0 18px 50px -12px rgba(16,24,32,.3),0 0 0 1px rgba(16,24,32,.05);padding:6px;display:none;z-index:80}
.sugg.on{display:block}
.sugg a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;color:var(--ink,#101820)}
.sugg a:hover,.sugg a.hl{background:var(--accent-tint-2,#eaf3ff)}
.sugg img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none;background:var(--soft,#f3f4f6)}
.sugg b{display:block;font-size:13.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.sugg small{font-size:12px;color:var(--muted,#6b7280)}
.sugg .all{justify-content:center;font-size:13px;font-weight:700;color:var(--accent-ink,#0066cc)}
.sugg .none{padding:12px;font-size:13px;color:var(--muted,#6b7280)}
.ic-link{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft,#f3f4f6);color:var(--ink,#101820);transition:background .2s;flex:none}
.ic-link:hover{background:var(--accent-tint-2,#eaf3ff);color:var(--accent-ink,#0066cc)}
.ic-link svg{width:19px;height:19px}
.badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent,#0180ff);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;font-variant-numeric:tabular-nums}
.badge[hidden]{display:none}
.signin{font-size:14px;font-weight:600;color:var(--ink,#101820);padding:8px 12px;border-radius:999px;transition:background .2s}
.signin:hover{background:var(--soft,#f3f4f6)}
.av-wrap{position:relative}
.av-btn{width:40px;height:40px;border-radius:50%;background:var(--accent-grad,linear-gradient(135deg,#4db0ff,#0180ff));color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;border:0;cursor:pointer;font-family:inherit}
.av-wrap>.menu{left:auto;right:0;min-width:230px}
.menu .who{padding:10px 12px 8px;font-size:13px}
.menu .who b{display:block;font-size:14px}
.menu .who span{color:var(--muted,#6b7280);word-break:break-all}
.m-actions{display:none;align-items:center;gap:10px;margin-left:auto}
.burger{width:40px;height:40px;border-radius:50%;background:var(--soft,#f3f4f6);display:grid;place-items:center;border:0;cursor:pointer;color:var(--ink,#101820)}
.burger svg{width:20px;height:20px}
/* drawer */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.drawer.on{visibility:visible;pointer-events:auto}
.drawer .scrim{position:absolute;inset:0;background:rgba(8,18,40,.5);opacity:0;transition:opacity .25s;backdrop-filter:blur(3px)}
.drawer.on .scrim{opacity:1}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.2)}
.drawer.on .panel{transform:none}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;height:58px;flex:none}
.dr-head .x{width:40px;height:40px;border-radius:50%;background:var(--soft,#f3f4f6);display:grid;place-items:center;border:0;cursor:pointer;color:var(--ink,#101820)}
.dr-head .x svg{width:18px;height:18px}
.dr-body{overflow-y:auto;padding:0 16px 24px;flex:1;-webkit-overflow-scrolling:touch}
.dr-body .search{width:100%;height:46px;background:var(--soft,#f3f4f6)}
.dr-body .search:focus-within{width:100%}
.dr-body .sugg{min-width:0}
.dr-user{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--accent-tint,#f1f7ff);margin:14px 0 6px}
.dr-user .av-btn{pointer-events:none}
.dr-user b{display:block;font-size:14.5px}
.dr-user small{color:var(--muted,#6b7280);font-size:12.5px}
.dr-user .btns{margin-left:auto;display:flex;gap:6px}
.dr-sec{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted,#6b7280);margin:20px 4px 6px}
.dr-links a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink,#101820)}
.dr-links a svg{width:20px;height:20px;color:var(--accent,#0180ff);flex:none}
.dr-links a:hover,.dr-links a[aria-current]{background:var(--accent-tint-2,#eaf3ff);color:var(--accent-ink,#0066cc)}
.dr-links a em{margin-left:auto;font-style:normal;background:var(--accent,#0180ff);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.dr-cats{display:flex;flex-wrap:wrap;gap:8px}
.dr-cats a{padding:8px 14px;border-radius:999px;background:var(--soft,#f3f4f6);font-size:13.5px;font-weight:600;color:var(--ink,#101820)}
.dr-cats a:hover{background:var(--accent-tint-2,#eaf3ff);color:var(--accent-ink,#0066cc)}
.dr-cta{display:grid;gap:8px;margin-top:18px}
/* footer */
footer.sitefoot{background:var(--deep-900,#0d243c);color:#c9d6ea;margin-top:64px;box-shadow:none}
.sitefoot .fwrap{max-width:1360px;margin:0 auto;padding:54px 28px 0;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px}
.sitefoot .brand p{font-size:14px;line-height:1.6;margin:14px 0 18px;max-width:300px;color:#a9bad4}
.sitefoot .logo{color:#fff}.sitefoot .logo b{color:var(--accent-2,#4db0ff)}
.sitefoot h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px}
.sitefoot ul{list-style:none;display:grid;gap:10px}
.sitefoot li a{font-size:14px;color:#c9d6ea;transition:color .2s}
.sitefoot li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;transition:background .2s,transform .2s}
.socials a:hover{background:var(--accent,#0180ff);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.sitefoot .fbot{max-width:1360px;margin:40px auto 0;padding:20px 28px 26px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8fa3c4}
.sitefoot .fbot a{color:#c9d6ea;text-decoration:underline;text-underline-offset:2px}
.sitefoot .nl{display:flex;gap:8px;margin-top:4px}
.sitefoot .nl input{flex:1;min-width:0;height:42px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;padding:0 16px;font:inherit;font-size:14px;outline:0}
.sitefoot .nl input::placeholder{color:#8fa3c4}
.sitefoot .nl input:focus{background:rgba(255,255,255,.16);box-shadow:0 0 0 2px var(--accent-2,#4db0ff)}
/* mobile */
.m-tabbar{display:none}
@media (max-width:1180px){.nav-links>a,.nav-links .dd>button{padding:8px 10px}.search{width:170px}.search:focus-within{width:220px}.nav .wrap{gap:14px}}
@media (max-width:1000px){.sitefoot .fwrap{grid-template-columns:repeat(4,1fr)}.sitefoot .brand{grid-column:1/-1}}
@media (max-width:920px){.nav-links,.nav-right{display:none!important}.m-actions{display:flex}}
@media (max-width:768px){
  .nav .wrap{height:58px;gap:10px;padding:0 16px}
  .sitefoot .fwrap{grid-template-columns:1fr 1fr;gap:28px 20px;padding:36px 16px 0}
  .sitefoot .fbot{padding:18px 16px 24px;margin-top:28px}
  footer.sitefoot{margin-top:36px}
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;align-items:stretch;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 -10px 28px -14px rgba(16,24,32,.28);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .m-tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;color:#8b909a;font-size:11px;font-weight:600;border-radius:14px;transition:color .2s}
  .m-tab svg{width:24px;height:24px;padding:3px 14px;box-sizing:content-box;border-radius:999px;transition:background .2s}
  .m-tab[aria-current="page"]{color:var(--accent,#0180ff);font-weight:700}
  .m-tab[aria-current="page"] svg{background:#edf6ff}
  .m-tab .badge{top:0;right:calc(50% - 26px)}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.sitefoot .fwrap{grid-template-columns:1fr 1fr}.sitefoot .brand{grid-column:1/-1}}
@media print{.nav,.m-tabbar,footer.sitefoot,.drawer{display:none!important}}
[hidden]{display:none!important}