/* Shared product-suite refinement. Each surface opts in with a body class so
   the large legacy applications can evolve without selector collisions. */
:root{--suite-pink:#d71786;--suite-ink:#0f0b0e;--suite-cream:#fff9f4}
.suite-member,.suite-affiliate,.suite-admin,.suite-business{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.suite-member button,.suite-affiliate button,.suite-admin button,.suite-business button{touch-action:manipulation}
.suite-member :focus-visible,.suite-affiliate :focus-visible,.suite-admin :focus-visible,.suite-business :focus-visible{
  outline:2px solid rgba(215,23,134,.85)!important;outline-offset:2px
}

/* Member + affiliate: a desktop interpretation of the installed app. */
.suite-member,.suite-affiliate{background:#070507}
.suite-member #shell,.suite-affiliate #shell{max-width:none;grid-template-columns:276px minmax(0,1fr)}
.suite-member #nav,.suite-affiliate #nav{
  padding:24px 18px;background:rgba(13,8,12,.88);border-right:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(24px)
}
.suite-member #nav .brand,.suite-affiliate #nav .brand{font-size:26px;padding:8px 12px 30px}
.suite-member .navitem,.suite-affiliate .navitem{min-height:48px;border-radius:15px;padding-inline:15px}
.suite-member .navitem.on,.suite-affiliate .navitem.on{background:linear-gradient(110deg,rgba(215,23,134,.3),rgba(215,23,134,.07))}
.suite-member .content,.suite-affiliate .content{max-width:1180px;padding:48px clamp(28px,5vw,76px) 100px;margin-inline:auto}
.suite-member .page-h,.suite-affiliate .page-h{font-size:clamp(38px,4vw,54px);line-height:1;letter-spacing:-.045em}
.suite-member .page-sub,.suite-affiliate .page-sub{font-size:16px;line-height:1.6;max-width:680px}
.suite-member .card,.suite-affiliate .card,.suite-affiliate .aff-stat,.suite-affiliate .aff-linkbox,
.suite-affiliate .aff-trend,.suite-affiliate .aff-breakdown,.suite-affiliate .aff-payout-form{
  border-color:rgba(255,255,255,.1);background:linear-gradient(150deg,rgba(28,17,26,.96),rgba(14,9,13,.96));
  box-shadow:0 24px 60px -38px rgba(0,0,0,.9)
}
.suite-member .acct-hero,.suite-affiliate .aff-welcome{border-radius:28px;padding:34px}
.suite-member .srow{min-height:84px;border-radius:20px}
.suite-member .gate-photo,.suite-affiliate .gate-photo{content:url('/assets/img/hero-lagos-v2.webp')}
.suite-member .gate-visual-line,.suite-affiliate .gate-visual-line{font-size:clamp(34px,4vw,58px);line-height:1.02;max-width:12ch}
.suite-member .gate-panel,.suite-affiliate .gate-panel{background:#090608}
.suite-member .gate-card,.suite-affiliate .gate-card{max-width:420px}
.suite-member .ifield input,.suite-affiliate .ifield input{height:58px;border-radius:16px;font-size:16px}
.suite-member .btn,.suite-affiliate .btn{min-height:52px;border-radius:16px}

/* Affiliate data density stays useful without feeling like a spreadsheet. */
.suite-affiliate .aff-stats{gap:12px}
.suite-affiliate .aff-stat{min-height:132px;padding:24px;border-radius:22px}
.suite-affiliate .aff-stat b{font-size:34px}
.suite-affiliate .aff-table{min-width:680px}
.suite-affiliate .card:has(.aff-table){overflow-x:auto}

/* Admin: operational, calm and unmistakably separate from the consumer app. */
.suite-admin{background:#f5f1f3;color:#1b1519}
.suite-admin .shell{background:#f5f1f3}
.suite-admin .side{width:272px;background:#110d10;border-right:1px solid rgba(255,255,255,.08);padding:10px}
.suite-admin .side .brand{border:0;padding:18px 14px 22px}
.suite-admin .side .brand img{content:url('/assets/wordmark-white.png');height:22px}
.suite-admin .side .brand .tag{background:rgba(215,23,134,.2);color:#ff87c8}
.suite-admin .side nav{padding:4px}
.suite-admin .nav-group-label{color:rgba(255,255,255,.38);padding:18px 12px 7px}
.suite-admin .navitem{min-height:40px;border-radius:11px;color:rgba(255,255,255,.68);padding-inline:12px}
.suite-admin .navitem:hover{background:rgba(255,255,255,.07);color:#fff}
.suite-admin .navitem.active{background:rgba(215,23,134,.2);color:#ff9bd2}
.suite-admin .main{max-width:1500px;padding:38px clamp(28px,4vw,64px) 90px}
.suite-admin .main h1{font-size:34px;letter-spacing:-.035em}
.suite-admin .stats,.suite-admin .kpi-grid{gap:12px}
.suite-admin .stat,.suite-admin .kpi,.suite-admin .card{border-color:#e4dce1;border-radius:18px;box-shadow:0 10px 30px -26px rgba(40,20,32,.45)}
.suite-admin .toolbar{padding:12px;background:#fff;border:1px solid #e4dce1;border-radius:16px}
.suite-admin input,.suite-admin select,.suite-admin textarea{font-size:16px}
.suite-admin table{min-width:720px}
.suite-admin .card:has(table){overflow-x:auto}
.suite-admin .gate-visual{background:#110d10}
.suite-admin .gate-mesh{opacity:.55}
.suite-admin .gate-card{border-radius:24px;box-shadow:0 34px 90px -45px rgba(47,18,36,.55)}
.suite-admin .side nav{min-height:0;overscroll-behavior:contain}
.suite-admin .nav-search{width:calc(100% - 8px);margin:0 4px 8px;min-height:42px;background:#251d23;color:#fff;border:1px solid #493441;border-radius:10px;padding:10px}
.suite-admin .navitem[hidden],.suite-admin .nav-group[hidden]{display:none}
.suite-admin .admin-menu-toggle,.suite-admin .admin-menu-backdrop{display:none}
.suite-admin .main{min-width:0;flex:1}
.suite-admin .main>div:has(>table),.suite-admin .table-scroll{max-width:100%;overflow-x:auto}
.suite-admin .table-scroll .cell-1{display:table-cell;max-width:280px;white-space:normal;overflow-wrap:anywhere}
.suite-admin .side{height:100dvh}
.suite-admin .u-email{display:block;margin-top:4px}
@media(max-width:760px){
  .suite-admin .records-table{display:block;min-width:0}
  .suite-admin .records-table thead{display:none}
  .suite-admin .records-table tbody{display:grid;gap:16px}
  .suite-admin .records-table tr{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e4dce1;border-radius:12px;padding:8px}
  .suite-admin .records-table td,.suite-admin .records-table .cell-1{display:block;border:0;max-width:none;min-width:0;padding:8px;white-space:normal;overflow-wrap:anywhere}
  .suite-admin .records-table td[data-label]::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;color:#70616b;letter-spacing:.05em;margin-bottom:6px}
  .suite-admin .records-table td:last-child{grid-column:1/-1}
  .suite-admin .records-table td:last-child button{width:100%;min-height:40px}
}
@media(max-width:900px){
  .suite-admin .shell{display:block;padding-top:60px}
  .suite-admin .admin-menu-toggle{display:block;position:fixed;top:10px;left:16px;z-index:42;min-height:42px;padding:10px 16px;border:1px solid #493441;background:#110d10;color:#fff;border-radius:12px}
  .suite-admin .side{position:fixed;left:0;top:60px;height:calc(100dvh - 60px);z-index:41;transform:translateX(-100%);visibility:hidden;transition:transform .15s ease}
  .suite-admin .menu-open .side{transform:none;visibility:visible}
  .suite-admin .menu-open .admin-menu-backdrop{display:block;position:fixed;inset:0;z-index:40;border:0;background:rgba(0,0,0,.45)}
  .suite-admin .main{width:100%;box-sizing:border-box}
}

/* Business: clearer hierarchy, more breathing room and more stable grids. */
.suite-business{--r:16px;background:#f4f1f2}
.suite-business .shell{grid-template-columns:260px minmax(0,1fr)}
.suite-business .side{padding:18px 14px;background:#fff}
.suite-business .side-top{padding:8px 10px 22px}
.suite-business .nav{gap:4px}
.suite-business .nav-item{height:42px;border-radius:11px;padding-inline:12px}
.suite-business .nav-item.on{background:rgba(215,23,134,.09);color:#8e0b5a}
.suite-business .tbar{height:64px;padding-inline:36px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px)}
.suite-business .main{max-width:1440px;margin-inline:auto;padding:36px clamp(26px,4vw,64px) 90px}
.suite-business .topbar{margin-bottom:28px}
.suite-business .topbar .tt{font-family:'Fraunces',Georgia,serif;font-size:34px;letter-spacing:-.035em}
.suite-business .topbar .ts{font-size:14px;line-height:1.55}
.suite-business .card,.suite-business .stat,.suite-business .mcard,.suite-business .vcard{border-radius:18px;border-color:#e4dce1;box-shadow:0 12px 34px -30px rgba(41,18,32,.42)}
.suite-business .card{padding:22px 24px;margin-bottom:16px}
.suite-business .grid3{gap:14px}
.suite-business .stat{padding:20px;min-height:124px}
.suite-business .stat .num{font-size:32px}
.suite-business .field input,.suite-business .field select,.suite-business .field textarea{min-height:46px;border-radius:11px;font-size:16px}
.suite-business .btn{min-height:44px;border-radius:11px}
.suite-business .gate-brand{background:
  linear-gradient(100deg,rgba(12,8,12,.96),rgba(12,8,12,.44)),
  url('/assets/img/hero-lagos-v2.webp') center/cover}
.suite-business .gate-brand::before,.suite-business .gate-brand::after{display:none}
.suite-business .gate-brand h2{font:600 clamp(44px,5vw,70px)/.98 'Fraunces',Georgia,serif;letter-spacing:-.045em;max-width:9ch}

@media(max-width:900px){
  .suite-member #shell,.suite-affiliate #shell,.suite-business .shell{grid-template-columns:1fr}
  .suite-member .content,.suite-affiliate .content{padding:34px 18px 118px}
  .suite-member .app-banner{padding-inline:18px}
  .suite-member .acct-hero,.suite-affiliate .aff-welcome{padding:24px;border-radius:22px}
  .suite-affiliate .aff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite-admin .side{width:min(290px,86vw)}
  .suite-admin .main{padding:28px 18px 90px}
  .suite-business .main{padding:26px 18px 84px}
  .suite-business .gate{grid-template-columns:1fr}
  .suite-business .gate-brand{display:none}
}

@media(max-width:540px){
  .suite-member .gate-visual,.suite-affiliate .gate-visual{filter:saturate(.8)}
  .suite-member .gate-panel,.suite-affiliate .gate-panel{padding:22px 18px;background:linear-gradient(0deg,rgba(7,5,7,.98),rgba(7,5,7,.62))}
  .suite-member .app-banner span{display:none}
  .suite-member .app-banner{justify-content:center}
  .suite-affiliate .aff-stats{grid-template-columns:1fr}
  .suite-admin .main h1,.suite-business .topbar .tt{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  .suite-member *,.suite-affiliate *,.suite-admin *,.suite-business *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}