/* People Media / Givemefi visual system 2026 */

.auth-gate{--auth-navy:#082e41;--auth-navy-2:#031d2b;--auth-teal:#079e9a;--auth-cyan:#23f5ef;background:radial-gradient(circle at 10% 10%,rgba(157,78,178,.52),transparent 32%),radial-gradient(circle at 88% 14%,rgba(35,245,239,.35),transparent 29%),radial-gradient(circle at 62% 92%,rgba(80,89,195,.34),transparent 32%),linear-gradient(145deg,#020f1c 0%,#031d2b 46%,#12294d 100%);color:#082e41;font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif}
.auth-shell{width:min(1120px,100%);min-height:min(680px,calc(100vh - 84px));border-color:rgba(255,255,255,.62);border-radius:34px;box-shadow:0 42px 110px rgba(3,29,43,.25),0 3px 12px rgba(20,61,83,.08)}
.auth-showcase{background:linear-gradient(138deg,#031d2b 0%,#082e41 44%,#51356f 74%,#087c86 124%)!important}
.auth-showcase:after{width:360px;height:360px;background:radial-gradient(circle,rgba(157,78,178,.48),transparent 68%)!important}
.auth-glow{filter:blur(3px);background:linear-gradient(90deg,transparent,rgba(35,245,239,.58),rgba(157,78,178,.48),transparent)!important}
.auth-proof-icon{width:42px;height:42px;flex-basis:42px;border-color:rgba(255,255,255,.2);border-radius:14px;background:linear-gradient(145deg,rgba(35,245,239,.18),rgba(157,78,178,.22));color:#bdfdfa;backdrop-filter:blur(10px)}
.auth-panel h1{color:#082e41}.auth-kicker{border-color:rgba(157,78,178,.2);background:linear-gradient(135deg,rgba(157,78,178,.09),rgba(35,245,239,.12));color:#6f2f91}
.auth-panel button{background:linear-gradient(115deg,#082e41 0%,#6f2f91 47%,#9d4eb2 70%,#23f5ef 125%);box-shadow:0 16px 34px rgba(111,47,145,.24)}

body.commercial-page{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;color:#082e41}
body.commercial-page .app{position:relative;z-index:1;max-width:1360px;padding-top:22px}
body.commercial-page .hero{padding:38px;border-radius:30px}
body.commercial-page .hero h2{letter-spacing:-.045em}
body.commercial-page .summary article,
body.commercial-page .panel,
body.commercial-page .data-card{border-radius:21px}
body.commercial-page .dialog-head{background:linear-gradient(125deg,#031d2b,#082e41 52%,#6f2f91 118%)}
body.commercial-page .button.teal,
body.commercial-page button.teal{background:linear-gradient(105deg,#082e41 0%,#9d4eb2 62%,#23f5ef 140%)}
body.commercial-page .toolbar h2{color:#fff}
body.commercial-page .toolbar p,
body.commercial-page .fine-print{color:rgba(235,246,251,.74)}

body.admin-page{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;color:#082e41}
body.admin-page #adminApp{max-width:1320px;padding-top:22px}
body.admin-page .summary article,
body.admin-page .panel{border-radius:21px}
body.admin-page button{background:linear-gradient(105deg,#082e41 0%,#9d4eb2 78%,#23f5ef 150%)}
body.admin-page button:disabled{background:#8da0ad}

body.intelligence-page .insight-icon{width:38px;height:38px;border-radius:13px}
body.intelligence-page .insight{overflow:hidden;position:relative}
body.intelligence-page .insight:after{content:"";position:absolute;right:-40px;bottom:-55px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(35,245,239,.12),rgba(157,78,178,.05),transparent 70%);pointer-events:none}
body.intelligence-page{overflow-x:hidden}
body.intelligence-page .topbar>*{min-width:0}
body.intelligence-page .top-actions{min-width:0}

/* Shared return control */
body.brand-app .portal-back{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;
  border:1px solid rgba(157,78,178,.2);border-radius:999px;color:#fff!important;
  background:linear-gradient(112deg,#082e41 0%,#6f2f91 62%,#23f5ef 145%);
  box-shadow:0 10px 24px rgba(54,30,92,.22),0 0 20px rgba(35,245,239,.08);
  font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease;
}
body.brand-app .portal-back:hover{color:#fff!important;transform:translateY(-1px);box-shadow:0 14px 30px rgba(54,30,92,.3),0 0 24px rgba(35,245,239,.16)}
body.brand-app .portal-back:focus-visible{outline:3px solid rgba(35,245,239,.42);outline-offset:3px}
body.brand-app .portal-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Readable content over the shared dark canvas */
body.portal-page .note{color:rgba(235,246,251,.72)}
body.campaign-page .section-title h2{color:#fff}
body.campaign-page .section-title p{color:rgba(235,246,251,.72)}
body.campaign-page > .note,
body.campaign-page .shell > .note{color:rgba(235,246,251,.68)!important}
body.campaign-page .section-nav{border-color:rgba(255,255,255,.15)!important;background:rgba(3,29,43,.78)!important}

/* Givemefi Insights: People Media dark environment and accessible hero contrast */
body.audience-page.brand-app{
  background:
    radial-gradient(ellipse at 12% 12%,rgba(157,78,178,.48) 0%,rgba(157,78,178,.14) 24%,transparent 48%),
    radial-gradient(ellipse at 88% 8%,rgba(35,245,239,.34) 0%,rgba(19,145,165,.16) 26%,transparent 50%),
    radial-gradient(ellipse at 68% 82%,rgba(75,67,178,.36) 0%,transparent 46%),
    linear-gradient(145deg,#020f1c 0%,#031d2b 42%,#092f47 72%,#171b3c 100%)!important;
  background-attachment:fixed!important;
}
body.audience-page .brand-backdrop::before{
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
}
body.audience-page .brand-orb.one{opacity:.72;background:rgba(157,78,178,.52)}
body.audience-page .brand-orb.two{opacity:.64;background:rgba(35,245,239,.38)}
body.audience-page .brand-orb.three{opacity:.58;background:rgba(83,74,206,.42)}
body.audience-page .topbar{border-color:rgba(255,255,255,.72)!important;background:rgba(255,255,255,.91)!important;box-shadow:0 18px 52px rgba(0,10,24,.34)!important}
body.audience-page .audience-back{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;
  border:1px solid rgba(157,78,178,.2);border-radius:999px;color:#fff;
  background:linear-gradient(112deg,#082e41 0%,#6f2f91 62%,#23f5ef 145%);
  box-shadow:0 10px 24px rgba(54,30,92,.22),0 0 20px rgba(35,245,239,.08);
  font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease;
}
body.audience-page .audience-back:hover{color:#fff!important;transform:translateY(-1px);box-shadow:0 14px 30px rgba(54,30,92,.3),0 0 24px rgba(35,245,239,.16)}
body.audience-page .audience-back:focus-visible{outline:3px solid rgba(35,245,239,.42);outline-offset:3px}
body.audience-page .audience-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.audience-page .hero.card{
  border-color:rgba(255,255,255,.16)!important;
  background:radial-gradient(circle at 78% 18%,rgba(157,78,178,.48),transparent 30%),radial-gradient(circle at 96% 78%,rgba(35,245,239,.3),transparent 34%),linear-gradient(125deg,#031d2b 0%,#082e41 46%,#24315f 74%,#087b89 126%)!important;
  box-shadow:0 28px 74px rgba(0,9,22,.46),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.audience-page .hero.card::before{background:linear-gradient(118deg,transparent 0 62%,rgba(35,245,239,.5) 62% 62.45%,transparent 62.45% 100%),radial-gradient(circle at 74% 24%,rgba(157,78,178,.34),transparent 30%)!important}
body.audience-page .hero.card::after{background:radial-gradient(circle,rgba(35,245,239,.35),rgba(157,78,178,.2) 42%,transparent 70%)!important}
body.audience-page .hero h2,
body.audience-page .hero p,
body.audience-page .hero-badge,
body.audience-page .hero-mini b,
body.audience-page .hero-mini span{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.26)}
body.audience-page .hero p,
body.audience-page .hero-mini span{color:rgba(244,252,255,.82)!important}
body.audience-page .hero-badge{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.1)!important}
body.audience-page .hero-watermark{opacity:.1!important;filter:brightness(0) invert(1)!important}
body.audience-page .sidebar,
body.audience-page .card:not(.hero){border-color:rgba(255,255,255,.58)!important;box-shadow:0 22px 58px rgba(0,10,24,.28)!important}
body.audience-page.brand-preview main.main{display:block!important}

@media(max-width:620px){
  body.commercial-page .hero{padding:28px 24px}
  .auth-shell{border-radius:26px}
  body.campaign-page .topbar{align-items:stretch;flex-direction:column;gap:12px}
  body.campaign-page .topbar .brand{width:100%}
  body.campaign-page .top-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  body.campaign-page .top-actions .portal-back{grid-column:1/-1;width:100%}
  body.campaign-page .top-actions .badge{grid-column:1/-1;justify-content:center;max-width:100%;white-space:normal;text-align:center}
  body.campaign-page .top-actions .btn{width:100%;min-width:0;white-space:normal}
  body.campaign-page .hero-grid{min-width:0}
  body.campaign-page .hero-score{grid-template-columns:1fr 1fr;min-width:0}
  body.campaign-page .hero-meta{max-width:100%}
  body.campaign-page .hero-chip{max-width:100%;white-space:normal}
  body.campaign-page .filters>*{min-width:0}
  body.audience-page .topbar{align-items:stretch;flex-direction:column}
  body.audience-page .top-actions{display:flex;width:100%;justify-content:space-between}
  body.audience-page .audience-back{min-height:40px}
}