@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");

:root {
  --brand-navy: #082e41;
  --brand-navy-deep: #031d2b;
  --brand-navy-soft: #123c59;
  --brand-purple: #9d4eb2;
  --brand-purple-deep: #6f2f91;
  --brand-cyan: #23f5ef;
  --brand-teal: #079e9a;
  --brand-aurora: linear-gradient(118deg, #9d4eb2 0%, #5f62d8 44%, #23f5ef 100%);
  --brand-night: linear-gradient(135deg, #031d2b 0%, #082e41 54%, #173b68 100%);
  --brand-night-aurora: linear-gradient(125deg, #031d2b 0%, #082e41 42%, #463067 74%, #087b89 116%);
  --bg: #eef2f8;
  --panel: rgba(255, 255, 255, .94);
  --ink: #082e41;
  --muted: #607285;
  --line: rgba(160, 184, 205, .43);
  --navy: #082e41;
  --navy2: #031d2b;
  --teal: #079e9a;
  --cyan: #23f5ef;
  --purple: #9d4eb2;
  --violet: #9d4eb2;
  --accent: #9d4eb2;
  --accent-dark: #6f2f91;
  --accent2: #079e9a;
  --soft: #eafbf9;
  --shadow: 0 20px 58px rgba(8, 46, 65, .12);
  --brand-shadow: 0 24px 70px rgba(4, 31, 45, .16);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body.brand-app {
  position: relative;
  min-height: 100vh;
  color: var(--brand-navy);
  background:
    radial-gradient(ellipse at 9% 9%, rgba(157, 78, 178, .46) 0%, rgba(157, 78, 178, .13) 25%, transparent 48%),
    radial-gradient(ellipse at 91% 5%, rgba(35, 245, 239, .32) 0%, rgba(18, 137, 157, .14) 27%, transparent 50%),
    radial-gradient(ellipse at 69% 84%, rgba(77, 69, 190, .34) 0%, transparent 45%),
    linear-gradient(145deg, #020f1c 0%, #031d2b 42%, #092f47 72%, #171b3c 100%) !important;
  background-attachment: fixed !important;
}

.brand-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.brand-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 78%);
}

.brand-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(20px);
  opacity: .42;
  animation: brand-float 16s ease-in-out infinite alternate;
}

.brand-orb.one { width: 34vw; height: 34vw; left: -17vw; top: 22vh; background: rgba(157, 78, 178, .48); }
.brand-orb.two { width: 30vw; height: 30vw; right: -14vw; top: 8vh; background: rgba(35, 245, 239, .34); animation-delay: -5s; }
.brand-orb.three { width: 24vw; height: 24vw; right: 18vw; bottom: -14vw; background: rgba(68, 73, 184, .34); animation-delay: -9s; }

@keyframes brand-float {
  to { transform: translate3d(2.5vw, -2vh, 0) scale(1.08); }
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.portal-logo,
.brand img,
.brand-logo,
.auth-logo,
.admin-brand img,
.hero-watermark {
  display: block;
  object-fit: contain;
  filter: none !important;
  text-shadow: none !important;
}

.portal-logo { width: 168px; max-height: 58px; }
.portal-label { color: var(--brand-navy); font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.topbar .brand img,
.admin-brand img { width: 136px; height: auto; max-height: 54px; }

.brand,
.admin-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand h1,
.admin-brand h1,
.portal-label { letter-spacing: -.035em; }
.admin-brand h1 { margin: 0 0 4px !important; }

/* Shared glass navigation */
body.brand-app .topbar,
body.brand-app .top {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 24px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 14px 42px rgba(8, 46, 65, .1);
  backdrop-filter: blur(22px) saturate(1.2);
}

body.intelligence-page .topbar {
  position: sticky;
  top: 10px;
  margin: 10px 18px 0;
  z-index: 30;
}

.badge,
.role-badge,
.status,
.top-chip,
.tag {
  border-color: rgba(157, 78, 178, .22) !important;
  background: linear-gradient(135deg, rgba(157, 78, 178, .1), rgba(35, 245, 239, .13)) !important;
  color: #63337b !important;
}

.back,
.link-button,
.cta {
  color: #087d79 !important;
  transition: color .18s ease, transform .18s ease;
}

.back:hover,
.link-button:hover,
.cta:hover { color: var(--brand-purple-deep) !important; }

/* Dark aurora headers */
body.brand-app .hero {
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: var(--brand-night-aurora) !important;
  box-shadow: 0 26px 72px rgba(3, 29, 43, .24) !important;
}

body.brand-app .hero::before,
body.brand-app .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

body.brand-app .hero::after {
  width: 44%;
  height: 150%;
  right: -8%;
  top: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 245, 239, .32), rgba(157, 78, 178, .16) 42%, transparent 70%) !important;
  filter: blur(8px);
}

body.brand-app .hero::before {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255, 255, 255, .06) 62% 63%, transparent 63% 100%),
    radial-gradient(circle at 74% 24%, rgba(157, 78, 178, .28), transparent 28%);
}

.eyebrow { color: var(--brand-cyan) !important; }
.hero h1,
.hero h2 { letter-spacing: -.045em !important; }
.hero p { color: rgba(244, 250, 252, .82) !important; }

.hero-stats article,
.hero-mini,
.score-card {
  border: 1px solid rgba(255, 255, 255, .17) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 30px rgba(2, 19, 30, .12) !important;
  backdrop-filter: blur(15px);
}

/* Panels and data surfaces */
body.brand-app .card,
body.brand-app .panel,
body.brand-app .sidebar,
body.brand-app .summary article,
body.brand-app .filters,
body.brand-app .data-card,
body.brand-app .pricing-widget,
body.brand-app .denied {
  border-color: rgba(154, 180, 202, .42) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(249, 249, 255, .9)) !important;
  box-shadow: var(--brand-shadow) !important;
  backdrop-filter: blur(18px);
}

body.brand-app .card::before,
body.brand-app .sidebar::before {
  background: var(--brand-aurora) !important;
}

.summary article,
.kpi,
.metric {
  position: relative;
  overflow: hidden;
}

.summary article::after,
.kpi::after,
.metric::after {
  content: "";
  position: absolute;
  width: 108px !important;
  height: 108px !important;
  right: -48px !important;
  bottom: -54px !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 245, 239, .18), rgba(157, 78, 178, .09) 52%, transparent 70%) !important;
}

.summary strong,
.metric-value,
.kpi .value { letter-spacing: -.045em; }

table tbody tr { transition: background .16s ease, transform .16s ease; }
table tbody tr:hover td { background: rgba(157, 78, 178, .04) !important; }

input,
select,
textarea,
.compact-select {
  border-color: rgba(146, 175, 198, .52) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-purple) !important;
  box-shadow: 0 0 0 4px rgba(157, 78, 178, .12) !important;
}

.button.teal,
button.teal,
.btn.primary,
.pricing-calculate,
.auth-panel button {
  border: 0 !important;
  background: var(--brand-aurora) !important;
  color: #fff !important;
  box-shadow: 0 13px 28px rgba(111, 47, 145, .2), 0 0 22px rgba(35, 245, 239, .1) !important;
}

.tabs button.active {
  border-color: transparent !important;
  background: var(--brand-night-aurora) !important;
  box-shadow: 0 10px 24px rgba(8, 46, 65, .16);
}

/* Futuristic vector icon system */
.brand-icon,
.icon,
.fun-icon,
.kpi-icon,
.insight-icon {
  position: relative;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
  color: var(--brand-navy) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .95), transparent 34%),
    linear-gradient(145deg, rgba(35, 245, 239, .35), rgba(157, 78, 178, .34)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 28px rgba(39, 48, 96, .15) !important;
}

.brand-icon::after,
.icon::after,
.fun-icon::after,
.kpi-icon::after,
.insight-icon::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: inherit;
  pointer-events: none;
}

.brand-icon svg,
.icon svg,
.fun-icon svg,
.kpi-icon svg,
.insight-icon svg {
  position: relative;
  z-index: 1;
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fun-icon,
.kpi-icon { transform: none !important; }
.fun-icon.alt,
.fun-icon.teal,
.fun-icon.purple { background: linear-gradient(145deg, rgba(35, 245, 239, .3), rgba(157, 78, 178, .34)) !important; }

.pricing-result {
  background: var(--brand-night-aurora) !important;
  box-shadow: 0 18px 40px rgba(3, 29, 43, .18);
}

.pricing-tag {
  background: linear-gradient(135deg, rgba(157, 78, 178, .13), rgba(35, 245, 239, .14)) !important;
  color: #6f2f91 !important;
}

/* Intelligence modules */
body.intelligence-page .shell,
body.audience-page .layout { position: relative; z-index: 1; }

body.intelligence-page .section-nav {
  top: 88px !important;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 18px;
  padding: 10px !important;
  background: rgba(239, 244, 250, .78) !important;
  box-shadow: 0 12px 30px rgba(8, 46, 65, .08);
  backdrop-filter: blur(18px);
}

body.intelligence-page .platform-card,
body.intelligence-page .platform,
body.intelligence-page .insight,
body.intelligence-page .reco-card,
body.intelligence-page .thumb-card,
body.intelligence-page .channel-option {
  border-color: rgba(154, 180, 202, .42) !important;
  background: linear-gradient(145deg, #fff, #f8f6fc) !important;
  box-shadow: 0 12px 30px rgba(8, 46, 65, .07);
}

body.intelligence-page .bar-fill,
body.intelligence-page .bar i,
body.intelligence-page .track i,
body.intelligence-page .meter i,
body.intelligence-page .platform-meter i {
  background: var(--brand-aurora) !important;
}

body.audience-page .sidebar {
  top: 104px !important;
  height: calc(100dvh - 122px) !important;
  max-height: calc(100dvh - 122px) !important;
}

body.audience-page .hero-watermark { opacity: .08 !important; }

/* Admin */
body.admin-page #adminApp { position: relative; z-index: 1; }
body.admin-page .topbar { align-items: center; }
body.admin-page .mini-row { background: linear-gradient(135deg, rgba(236, 243, 248, .9), rgba(244, 238, 249, .82)) !important; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .brand-orb { animation: none; }
}

@media (max-width: 900px) {
  body.intelligence-page .topbar { margin: 8px 10px 0; }
  .portal-logo { width: 145px; }
  .portal-label { font-size: 15px; }
  .topbar .brand img,
  .admin-brand img { width: 122px; }
}

@media (max-width: 650px) {
  body.brand-app .topbar,
  body.brand-app .top { border-radius: 19px; padding: 12px 14px; }
  .brand,
  .admin-brand { align-items: flex-start; }
  .portal-logo { width: 132px; }
  body.audience-page .sidebar { position: relative !important; top: auto !important; height: auto !important; max-height: none !important; }
}