*  {
  font-family: "Public Sans", arial;
}

/* Navy theme. A deep blue ground and a single blue accent read as a
   financial product; pure black with a purple gradient does not. */
[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-bg: #0B1220;
  --bs-body-color: #E7EEF8;
  --bs-emphasis-color: #F4F7FB;
  --bs-secondary-color: rgba(231, 238, 248, 0.64);
  --bs-tertiary-color: rgba(231, 238, 248, 0.45);
  --bs-secondary-bg: #121A2B;
  --bs-tertiary-bg: #1A2438;
  --bs-border-color: #2A3852;
  --bs-card-bg: #131C2E;
  --bs-card-cap-bg: #131C2E;
  --bs-card-border-color: #2A3852;
  --bs-heading-color: #F4F7FB;
  --bs-primary: #2F6FED;
  --bs-link-color: #8EB4FF;
  --bs-link-hover-color: #B7D0FF;
}

a {
  text-decoration: none;
}

main>.container,
main>.container-fluid {
  padding: 70px 15px 20px;
}

.admin-tool {
  padding-top: 128px;
  padding-bottom: 64px;
}

.footer {
  background-color: #f5f5f5;
  font-size: .9em;
  height: 60px;
}

.footer>.container,
.footer>.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}


/* Small (≥576px) */
@media (min-width: 576px) {
  .container-sm {
    max-width: 540px;
  }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
  .container-md {
    max-width: 720px;
  }
}

/* Large (≥992px) */
@media (min-width: 992px) {
  .container-lg {
    max-width: 960px;
  }
}

/* Extra Large (≥1200px) */
@media (min-width: 1200px) {
  .container-xl {
    max-width: 1140px;
  }
}

/* Extra Extra Large (≥1400px) */
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1320px;
  }
}

.container-xxxl {
    max-width: 1920px;
}


.not-set {
  color: #c55;
  font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after {
  content: '';
  left: 3px;
  display: inline-block;
  width: 0;
  height: 0;
  border: solid 5px transparent;
  margin: 4px 4px 2px 4px;
  background: transparent;
}

a.asc:after {
  border-bottom: solid 7px #212529;
  border-top-width: 0;
}

a.desc:after {
  border-top: solid 7px #212529;
  border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
  white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
  min-width: 50px;
}

.hint-block {
  display: block;
  margin-top: 5px;
  color: #999;
}

.error-summary {
  color: #a94442;
  background: #fdf7f7;
  border-left: 3px solid #eed3d7;
  padding: 10px 20px;
  margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form>button.logout {
  padding-top: 7px;
}

@media(max-width:767px) {
  .navbar form>button.logout {
    display: block;
    text-align: left;
    width: 100%;
    padding: 10px 0;
  }
}

.navbar form>button.logout:focus,
.navbar form>button.logout:hover {
  text-decoration: none;
}

.navbar form>button.logout:focus {
  outline: none;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
  background-color: var(--bs-tertiary-bg);
  border-radius: .25rem;
  padding: .75rem 1rem;
}

.breadcrumb-item>a {
  text-decoration: none;
}


.form-control {
  border-radius: 6px;
}

.bg-light {
  background: #0B1220 !important;
}

/*******************************
************ Toasts ************
*******************************/
.toastify {
  font-weight: bold;
  border-radius: 5px;
}

.toast-info {
  background-image: -webkit-linear-gradient(40deg, rgb(29, 62, 222) 0%, rgb(3, 218, 246) 100%);
}

.toast-success {
  background: #e3f3be;
  color: rgb(123, 146, 68);
}

.toast-danger {
  background: #ffd6c9;
}


/**************************************
************ Content Section **********
***************************************/

.content-section {
  box-sizing: border-box;
  padding: 40px 50px;
  background-color: #131C2E;
  color: #E7EEF8;

  border-radius: 5px;
  border: 1px solid #2A3852;
  box-shadow: rgba(62, 66, 85, 0.08) 0px 15px 35px 0px, rgba(0, 0, 0, 0.13) 0px 5px 15px 0px;

  margin: auto;
  max-width: 550px;
}

@media (max-width: 991px) {

  .content-section {
    padding: 30px;
  }
}

@media (max-width: 550px) {

  .content-section {
    margin: auto 5px;
  }
}

/* Contact uses the same centered card as login, offset below the fixed navbar. */
.site-contact {
  box-sizing: border-box;
  min-height: 100%;
  padding: 128px 0 64px;
}

/****************************
************ Login **********
*****************************/
.site-login .btn-google {
  width: 100%;
}

.btn-google {
  border: 1px solid #ccc;
  padding: 10px;
  font-family: "Roboto";
  font-weight: 500;
  font-weight: bold;
  color: #838c96;
  font-size: 14px;
}

.btn-google svg {
  margin-bottom: -4px;
  margin-right: 5px;
  float: left;
}

.or {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 11px;
  color: #aaa;
  font-weight: bold;
}

.or::before,
.or::after {
  position: absolute;
  width: 130px;
  height: 1px;
  top: 24px;
  background-color: #ccc;
  content: '';
}

.or::before {
  left: 0;
}

.or::after {
  right: 0;
}


.hide-scrollbar {
  scrollbar-width: none;
  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.search-window {
  max-width: 600px;
  width: 100%;
  z-index: 10;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.navbar-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.navbar-mascot {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.navbar-wordmark {
  height: 22px;
  display: block;
}

.navbar-floating {
  background: #10192C;
  border: 1px solid #2A3852;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 10px;
}


.next-circle-button {
  background: #1A2438;
  color: #fff;
  border-radius: 60px;
  width: 45px;
  height: 45px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  border: none;
  position: absolute;
  z-index: 1;

  margin-top: 220px;

  transform: scale(2);
}

.next-circle-button.next-circle-button-right {
  margin-right: 50px;
  right: 0;
}

.next-circle-button.next-circle-button-left {
  margin-left: 50px;
  left: 0;
}

.bookmark-badge {
  position: relative;
  top: 0;
  left: 0;
  background: #323232;
  /* amber-400 */
  color: #fff;
  /* gray-800 */
  width: 40px;
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding-top: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
  margin-top: -384px;
  margin-left: 20px;
   box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.bookmark-badge-gold {
  background: #facc15;
  color: #323232;
  /* amber-400 */
}

.bookmark-badge-bronze {
  background: #f0ad6b;
   color: #323232;
  /* amber-400 */
}

.bookmark-badge-silver {
  background: #C0C0C0;
   color: #323232;
  /* amber-400 */
}

.workflow-card, .card-overlay {
  height:480px;
  overflow: hidden;
}

.workflow-card .card-overlay {
  display: none;
  position: relative;
  top:0;
  background:  linear-gradient(0deg,rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 70%);
  z-index: 200;
  margin-top: -480px;
  height:600px;
  
}
.workflow-card:hover .card-overlay {
  display: block;
}

.section-separator {
  height: 1px;
  background-color: #1C2740;
  width: 100%;
}
/******************************
************ Sign Up **********
*******************************/

.bullet-list-entry {
  margin: 0;
  margin-bottom: 20px;
}

.bullet-list ul li {
  padding: 20px 0;
}

.bullet-list ul li span {
  font-weight: bold;
}

.bullet-list-entry .content {
  display: block;
  float: left;
  flex-grow: 1;
  max-width: 90%;
  padding: 0;
}

.bullet-list-entry .icon {
  margin-right: 10px;
  background: #0072e4;
  height: 20px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  overflow: hidden;
  margin-top: 5px;
  text-align: center;
  border-radius: 50%;
  padding: 0;
}

.bullet-list-entry .icon.default {
  background: #e1e1e1;
}

.bullet-list-entry .icon.success {
  background: #7FB301;
}

.bullet-list-entry i {
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  padding: 0;
  display: block;
  margin-top: 5px;
}

@media (max-width: 991px) {
  .sign-up-reasons {
    display: block !important;
    margin: auto;
    padding: 25px 30px;
  }

  .site-signup .content-section {
    max-width: 94%;
    margin: auto;
    padding: 25px 30px;
  }

  .site-signup .device-image,
  .site-signup .notification {
    display: none;
  }

}

@media (max-width: 768px) {
  .sign-up-reasons {
    display: none !important;
  }

  .site-signup .device,
  .site-signup .notification {
    display: none;
  }
}

.site-signup h1 {
  font-size: 30px;
}

.help-block-error,
.help-block {
  color: #f56636;
}

.help-block {
  font-size: 11px;
  font-weight: bold;
  position: absolute;
}

.site-signup .btn {
  width: 100%;
  padding: 10px 10px;
}

.site-signup .content-section {
  max-width: 550px;
}

.site-signup .device-image {
  width: 700px;
  margin-left: 220px;
  margin-top: 380px;
  position: absolute;
}

.site-signup .notification {
  position: absolute;
  width: 450px;
  margin-top: 540px;
}

.site-signup .logo {
  margin-top: -400px;
}


.card-result {
  border: none;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  box-sizing: border-box;
}

.text-active {
  color: #c5d8f2;
}

.text-primary {
  background: none;
  -webkit-text-fill-color: #8EB4FF;
  color: #8EB4FF;
}

.nav-link {
  font-size: 14px;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.75);
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.nav-link.active {
  font-size: 14px;
  background-color: rgba(47, 111, 237, 0.22);
  border-radius: 20px;
  color: #E8F0FF !important;
}


/***************************
********** Teaser **********
****************************/
.teaser {
  margin: auto;
}
.main-headline {
  font-size: 70px;
  font-weight: bold;
  font-family: "Public Sans", arial;
}

/* Fits "People’s predictions," and wraps before "confirmed". */
.teaser .main-headline {
  max-width: 12em;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet (widths up to 1024px) */
@media (max-width: 1024px) {
  .main-headline {
    font-size: 50px;
  }
}

/* Mobile (widths up to 768px) */
@media (max-width: 768px) {
  .main-headline {
    font-size: 36px;
  }
}

/* Small mobile (widths up to 480px) */
@media (max-width: 480px) {
  .main-headline {
    font-size: 28px;
  }
}

.sub-headline {
 font-size: 24px;
}

/************************************
********** Styling Upgrade **********
*************************************/
.btn.btn-primary,
.bg-primary {
  background: #2F6FED;
  background-image: none;
  border-color: transparent;
}

.btn.btn-primary:hover {
  background: #3B7BFF;
  background-image: none;
}

.btn.btn-outline:hover {
  background: #1A2438;
}


.bg-white {
  background: #1A2438 !important;
}

.active-light {
  background: #EFF6FF;
}

.btn.btn-sm {
  padding: 0.25rem 0.5rem;
  /* smaller vertical & horizontal padding */
  font-size: 0.830rem;
  /* ~14px */
  line-height: 1.5;
  border-radius: 0.3rem;
  /* slightly less rounded */
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.card {
  --bs-border-radius: 1.2rem;
  border-radius: var(--bs-border-radius) !important;
  overflow: hidden;
}

.card.card-shadow {
  border: 1px solid #2A3852;
  box-shadow: 0 12px 32px rgba(4, 10, 24, 0.45);
}

.border-lighter {
  border-color: #e0e6ec;
}


/* Tailwind default font families */
.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* Tailwind font sizes and line-heights */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  /* text-sm */
  font-weight: 500;
  /* font-medium */
  padding: 0.5rem 1rem;
  /* py-2 px-4 */
  border-radius: 0.375rem;
  /* rounded-md */
  border: 1px solid transparent;
  /* border */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  line-height: 1.25rem;
}

/* Primary (e.g. blue) */
.btn-blue {
  background-color: #3b82f6;
  /* Tailwind's blue-500 */
  color: white;
}

.btn-blue:hover {
  background-color: #2563eb;
  /* blue-600 */
}

.btn-blue:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Secondary (gray outline) */
.btn-outline {
  background-color: transparent;
  color: #E7EEF8;
  border-color: #3A4C6A;
}

.btn-outline:hover {
  background-color: #1A2438;
  color: #fff;
  border-color: #4A6080;
}

/* Disabled state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Base styles for inputs and textareas */
.input,
textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* py-2 px-3 */
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.25rem;
  color: #E7EEF8;
  background-color: #121A2B;
  border: 1px solid #2A3852;
  /* border-gray-300 */
  border-radius: 0.375rem;
  /* rounded-md */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* shadow-sm */
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

/* Focus state */
.input:focus,
textarea:focus {
  border-color: #3b82f6;
  /* blue-500 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
  /* ring-1 ring-blue-500/40 */
}

/* Disabled state */
.input:disabled,
textarea:disabled {
  background-color: #0a0a0a;
  color: #666;
  cursor: not-allowed;
}

/* Read-only state */
.input[readonly],
textarea[readonly] {
  background-color: #0a0a0a;
  cursor: default;
}



/************************************
********** Styling Upgrade **********
*************************************/

.hoverable:hover {
  background-color: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.hoverable-popup {
  transition: transform 0.6s ease;
}

.hoverable-popup:hover {
  cursor: pointer;
  transform: scale(1.02);
}

/***************************
********** Toggle **********
****************************/

.toggle-switch {
  border: 1px solid #2A3852;
  background: #121A2B;
  display: inline-block;
  border-radius: 30px;
  margin: auto;
  width: auto;
  padding: 3px;
}

.toggle-switch button {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.toggle-switch button.active {
  background-color: #2F6FED;
  border-radius: 30px;
  color: #fff;
}



/***************************
******* Button Sizes *******
****************************/

.btn-xl {
  padding: 20px;
  font-size: 20px;
}



/******************************
******* Workflow Output *******
*******************************/
code {
    background: #1A2438;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
}
pre code {
    display: block;
    padding: 10px;
    overflow-x: auto;
}

#prompt-editor textarea, #prompt-editor input {
  font-size: 14px;
}


/**********************************
******* Bootstrap extenstion ******
***********************************/

.py-6 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pb-6 {
  padding-bottom: 100px;
}

.pt-6 {
  padding-top: 100px;
}

.px-6 {
  padding-left: 100px;
  padding-right: 100px;
}



/*******************************
************ Success Page ******
*******************************/
@keyframes scaleAnimation {
	0% {
		opacity: 0;
		transform: scale(2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.success-animation-circle, .success-animation-check {
	stroke-dasharray: circle-length circle-length;
	stroke: #7FB301;
}
.success-animation {
	color: #7FB301;
}

.success-animation.animated {
	animation: 1s ease-out 0s 1 both scaleAnimation;
}

.success-animation.large {
	font-size: 100px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.success-animation.medium {
	font-size: 60px;
	margin-bottom: 20px;
}


/*******************************
************ Footer ************
*******************************/

footer {
  color: #fff;
}

footer.bg-primary {
  background-color: #0B1220 !important;
  background-image: none !important;
  border-top: 1px solid #1C2740;
}

.footer-link {
  display: block;
  color:#e9e9e9 !important;
}

.made-in-germany p, .made-in-germany img {
  display: inline-block;
}

.founder-quote {
  font-size: 30px;
  font-style: italic;
  line-height: 1.8;
  color: #ccc;
}

.mission {
  scroll-margin-top: 120px;
}

.mission-portrait {
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 24px;
  border: 3px solid #2A3852;
  box-shadow: 0 12px 32px rgba(4, 10, 24, 0.45);
}

.mission-quote {
  position: relative;
  margin: 12px 0 0;
  padding: 8px 0 0 10px;
}

.mission-quote-mark {
  position: absolute;
  top: -18px;
  left: -6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 92px;
  line-height: 1;
  color: #2F6FED;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.mission-quote-text {
  position: relative;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.55;
  color: #F1F5FB;
}

@media (max-width: 768px) {
  .mission-quote-text {
    font-size: 22px;
  }
}

.footer-logo {
  display: block;
}

/*******************************
********** Front page **********
*******************************/
:root {
  --mp-hit: #2FBF71;
  --mp-miss: #E15B64;
  --mp-pending: #D4A24C;
  --mp-neutral: #8EA0BA;
}

.mascot {
  object-fit: cover;
  border: 3px solid #2A3852;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.stat-strip strong {
  color: #fff;
}

.stat-dot {
  margin: 0 10px;
}

/* Search */
.influencer-search-box {
  max-width: 680px;
  margin: auto;
  background: #1A2438 !important;
  border-color: #2A3852 !important;
}

.influencer-search-box .btn-primary {
  flex-shrink: 0;
  color: #fff;
}

.influencer-search-window {
  max-width: 680px;
  margin-top: 10px;
  max-height: 70vh;
  overflow-y: auto;
  border: none;
}

.influencer-collect {
  max-width: 680px;
  border: none;
}

.platform-badge,
.in-db-badge,
.collecting-badge {
  font-weight: 600;
  font-size: 11px;
  vertical-align: middle;
}

.platform-badge {
  background: #243044;
  color: #d6deea;
}

.in-db-badge {
  background: #dcfce7;
  color: #166534;
}

.collecting-badge {
  background: #1e3a5f;
  color: #93c5fd;
}

.collect-posts {
  border-top: 1px solid #2A3852;
}

.collect-post {
  padding: 12px 0;
  border-bottom: 1px solid #2A3852;
}

.collect-post-text {
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.45;
}

.collect-stats-note {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
}

.collect-stats-note i {
  color: #8EB4FF;
}

.collect-fetched-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: #D6E4FF;
  font-size: 13px;
}

.collect-fetched-status .spinner-border {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.search-result-row {
  border-top: 1px solid #2A3852;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.search-result-row:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.search-result-row:first-of-type {
  border-top: none;
}

.empty-search-icon {
  width: 56px;
  height: 56px;
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: #2F6FED;
}

.tracked-badge {
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 20px;
}

.track-portrait {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}

.track-portrait-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#2563eb, #22d3ee, #9333ea, #2563eb);
  animation: track-spin 1.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.track-portrait.is-drawing .track-portrait-ring {
  animation-duration: 0.7s;
  filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.65));
}

.track-portrait-face {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
  overflow: hidden;
}

.track-portrait-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: track-shimmer 1.6s ease-in-out infinite;
}

.track-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-step {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6b7280;
  font-size: 14px;
}

.track-step.active {
  color: #fff;
  font-weight: 600;
}

.track-step.done {
  color: #86efac;
}

.track-step.failed {
  color: #fca5a5;
  font-weight: 600;
}

.track-step-mark {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.track-step-mark .bi-circle {
  font-size: 8px;
}

.track-step-mark .spinner-border {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

@keyframes track-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes track-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

/* Avatars */
.influencer-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.influencer-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.influencer-avatar-sm {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.influencer-avatar-md {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.influencer-avatar-lg {
  width: 96px;
  height: 96px;
  font-size: 30px;
}

/* Influencer scorecards */
.influencer-card {
  --sc-tone: var(--mp-neutral);
  --sc-tone-soft: rgba(142, 160, 186, 0.16);
  position: relative;
  color: #E7EEF8;
  background: linear-gradient(180deg, #16203A 0%, #111A2E 100%);
  border: 1px solid #263452;
  transition: transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.influencer-card.tone-good {
  --sc-tone: var(--mp-hit);
  --sc-tone-soft: rgba(47, 191, 113, 0.16);
}

.influencer-card.tone-mid {
  --sc-tone: var(--mp-pending);
  --sc-tone-soft: rgba(212, 162, 76, 0.16);
}

.influencer-card.tone-bad {
  --sc-tone: var(--mp-miss);
  --sc-tone-soft: rgba(225, 91, 100, 0.16);
}

/* performance glow in the top-right corner */
.influencer-card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sc-tone-soft) 0%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}

.influencer-card:hover {
  border-color: #34466B;
  box-shadow: 0 18px 44px rgba(4, 10, 24, 0.6);
}

.influencer-card .card-body {
  position: relative;
  padding: 26px 26px 20px;
}

/* head: identity + hit rate */
.sc-avatar .influencer-avatar {
  box-shadow: 0 0 0 2px #131C2E, 0 0 0 4px var(--sc-tone);
}

.sc-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.sc-handle {
  font-size: 13px;
  color: #8EA0BA;
  margin-top: 3px;
}

.sc-sep {
  margin: 0 6px;
  color: #4A5A78;
}

.sc-rate-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--sc-tone);
  font-variant-numeric: tabular-nums;
}

.influencer-card.tone-none .sc-rate-value {
  color: #6C7A93;
}

.sc-rate-caption {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #8EA0BA;
  margin-top: 4px;
}

/* pull-quote */
.sc-quote {
  position: relative;
  margin: 26px 0 22px;
  padding: 0 0 0 4px;
}

.sc-quote-mark {
  position: absolute;
  top: -22px;
  left: -8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 84px;
  line-height: 1;
  color: #2F6FED;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.sc-quote-text {
  position: relative;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: #F1F5FB;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sc-quote-empty {
  color: #5F6E88;
}

.sc-quote-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.sc-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: #1E2A44;
  color: #B7C6DF;
}

.sc-chip-up {
  background: rgba(47, 191, 113, 0.14);
  color: var(--mp-hit);
}

.sc-chip-down {
  background: rgba(225, 91, 100, 0.14);
  color: var(--mp-miss);
}

.sc-quote-time {
  font-size: 11px;
  color: #6C7A93;
  margin-left: 4px;
}

/* KPI strip */
.sc-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(8, 13, 26, 0.55);
  border: 1px solid #1F2B44;
  border-radius: 14px;
  padding: 12px 6px;
}

.sc-kpi {
  text-align: center;
  min-width: 0;
}

.sc-kpi + .sc-kpi {
  border-left: 1px solid #1F2B44;
}

.sc-kpi-value {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  color: #E7EEF8;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sc-kpi-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #6C7A93;
  margin-top: 4px;
}

.sc-kpi-hit .sc-kpi-value {
  color: var(--mp-hit);
}

.sc-kpi-miss .sc-kpi-value {
  color: var(--mp-miss);
}

.sc-kpi-pending .sc-kpi-value {
  color: var(--mp-pending);
}

.sc-foot {
  margin-top: 12px;
  font-size: 11px;
  color: #4F5F7B;
  text-align: center;
}

/* tone colours (also used by the search dropdown) */
.tone-good {
  color: var(--mp-hit);
}

.tone-mid {
  color: var(--mp-pending);
}

.tone-bad {
  color: var(--mp-miss);
}

.tone-none {
  color: #9ca3af;
}

.empty-leaderboard {
  max-width: 520px;
  border: none;
}

/* Most-successful carousel: one scorecard at a time, arrows sit beside it */
.spotlight-carousel {
  position: relative;
  max-width: 760px;
  margin: 2rem auto 0;
  padding: 0 64px;
}

.spotlight-carousel.is-single {
  padding: 0;
}

.spotlight-card {
  min-height: 100%;
}

.spotlight-rank {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(47, 111, 237, 0.18);
  color: #B7D0FF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.spotlight-carousel .carousel-control-prev,
.spotlight-carousel .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 42%;
  bottom: auto;
  border-radius: 50%;
  background: #16203A;
  border: 1px solid #263452;
  opacity: 1;
}

.spotlight-carousel .carousel-control-prev {
  left: 0;
}

.spotlight-carousel .carousel-control-next {
  right: 0;
}

.spotlight-carousel .carousel-control-prev:hover,
.spotlight-carousel .carousel-control-next:hover {
  background: #1C2944;
  border-color: #34466B;
}

.spotlight-carousel .carousel-indicators {
  position: static;
  margin: 22px 0 0;
}

.spotlight-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border: 0;
  border-radius: 50%;
  background-color: #4A5A78;
}

.spotlight-carousel .carousel-indicators .active {
  background-color: #2F6FED;
}

@media (max-width: 576px) {
  .spotlight-carousel {
    padding: 0 48px;
  }
}

/* How it works
   Three steps stacked. The example (profile, quote, or chart) is the only box;
   the step label and explanation sit beside it. No animation. */
.hiw-steps {
  --hiw-tone: #2F6FED;
  --hiw-path-h: 84px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1080px;
  margin: 48px auto 8px;
}

.hiw-step {
  display: grid;
  grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr);
  gap: 20px 40px;
  align-items: center;
}

.hiw-step:not(:last-child) {
  margin-bottom: var(--hiw-path-h);
}

.hiw-visual {
  position: relative;
  min-width: 0;
}

.hiw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2F6FED;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 5px rgba(47, 111, 237, 0.28);
}

.hiw-step-copy h5 {
  font-size: 26px;
  margin-bottom: 8px;
  color: #fff;
}

.hiw-step-copy p {
  font-size: 16px;
  line-height: 1.55;
}

/* Curve in the graphics column, from the bottom of one box to the top of the next. */
.hiw-path {
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  width: 180px;
  height: calc(var(--hiw-path-h) + 2px);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.hiw-path.is-return {
  transform: translateX(-50%) scaleX(-1);
}

.hiw-path-glow,
.hiw-path-line {
  fill: none;
  stroke-linecap: round;
}

.hiw-path-glow {
  stroke: #D4A24C;
  stroke-width: 8;
  opacity: 0.35;
}

.hiw-path-line {
  stroke: #F0C14A;
  stroke-width: 2;
}

.hiw-path-node {
  fill: #F0C14A;
  stroke: #0B1220;
  stroke-width: 3;
}

/* shared miniature surface */
.hiw-profile,
.hiw-ticket,
.hiw-chart {
  position: relative;
  border-radius: 14px;
  border: 1px solid #263452;
  background: linear-gradient(180deg, #16203A 0%, #121B30 100%);
  box-shadow: 0 14px 30px rgba(4, 10, 24, 0.55);
}

/* --- Step 01: one profile, and what was saved from each source --- */
.hiw-profile {
  padding: 28px 28px 24px;
}

.hiw-profile-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #8EB4FF;
}

.hiw-profile-kicker i {
  font-size: 15px;
}

.hiw-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.hiw-avatar {
  width: 64px;
  height: 64px;
  font-size: 18px;
  box-shadow: 0 0 0 2px #121B30, 0 0 0 4px var(--hiw-tone);
}

.hiw-profile-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.hiw-profile-who strong {
  font-size: 22px;
  color: #fff;
}

.hiw-profile-who small {
  margin-top: 3px;
  color: #8EA0BA;
  font-size: 13px;
}

.hiw-saved {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #1F2B44;
}

.hiw-saved-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hiw-saved-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  border-radius: 10px;
  background: #1A2742;
  color: #C5D4EA;
  font-size: 18px;
  flex-shrink: 0;
}

.hiw-saved-icon.is-youtube {
  color: #FF4D4D;
}

.hiw-saved-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.hiw-saved-body small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8EB4FF;
}

.hiw-saved-body strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #E7EEF8;
}

/* --- Step 02: the extracted prediction --- */
.hiw-ticket {
  padding: 32px 36px;
}

.hiw-ticket-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #8EB4FF;
}

.hiw-ticket-head i {
  font-size: 18px;
}

.hiw-ticket-quote {
  margin: 18px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 32px;
  line-height: 1.45;
  color: #E7EEF8;
}

.hiw-mark {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(142, 180, 255, 0.16);
  color: #E8F0FF;
  font-style: normal;
  font-family: "Public Sans", arial;
  font-size: inherit;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hiw-mark-up {
  background: rgba(47, 191, 113, 0.16);
  color: #BFEFD4;
}

/* --- Step 03: the chart --- */
.hiw-chart {
  padding: 24px 24px 20px;
}

.hiw-chart-head {
  padding-right: 110px; /* room for the stamp */
  font-size: 16px;
  font-weight: 700;
}

.hiw-chart-asset {
  color: #fff;
  letter-spacing: 0.3px;
}

.hiw-chart-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--mp-pending);
  font-size: 13px;
  font-weight: 600;
}

.hiw-chart-target i {
  display: inline-block;
  width: 14px;
  border-top: 2px dashed var(--mp-pending);
}

.hiw-chart-svg {
  display: block;
  width: 100%;
  height: 170px;
  margin-top: 18px;
  overflow: visible;
}

.hiw-chart-targetline {
  stroke: var(--mp-pending);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.8;
}

.hiw-chart-deadline {
  stroke: #4A5A78;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.hiw-chart-line {
  fill: none;
  stroke: var(--mp-hit);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hiw-chart-point {
  fill: var(--mp-hit);
  stroke: #121B30;
  stroke-width: 2.5;
}

.hiw-chart-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: #6C7A93;
}

.hiw-chart-due {
  color: #8EA0BA;
  font-weight: 600;
}

.hiw-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: var(--mp-hit);
  color: #07130B;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(47, 191, 113, 0.35);
}

.hiw-stamp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 19, 11, 0.18);
  font-size: 15px;
}

@media (max-width: 767px) {
  .hiw-step {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
  }

  .hiw-profile,
  .hiw-ticket,
  .hiw-chart {
    grid-column: 1 / -1;
  }

  .hiw-saved {
    grid-template-columns: 1fr;
  }

  .hiw-ticket {
    padding: 24px 22px;
  }

  .hiw-ticket-quote {
    font-size: 24px;
  }

  .hiw-chart-svg {
    height: 130px;
  }

  .hiw-step-copy h5 {
    font-size: 22px;
  }
}

@media (max-width: 575px) {
  .influencer-search-box .btn-primary {
    display: none;
  }

  .influencer-card .card-body {
    padding: 22px 20px 18px;
  }

  .sc-rate-value {
    font-size: 34px;
  }

  .sc-quote-text {
    font-size: 18px;
  }

  .sc-kpi-value {
    font-size: 15px;
  }
}

/*******************************
******* Influencer profile *****
*******************************/
.influencer-profile > .container {
  padding-top: 128px;
  padding-bottom: 88px;
}

.profile-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #8EA0BA;
  font-size: 14px;
  font-weight: 600;
}

.profile-back:hover {
  color: #fff;
}

.profile-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(47, 111, 237, 0.12);
  border: 1px solid rgba(47, 111, 237, 0.35);
  color: #D6E4FF;
  font-size: 14px;
  line-height: 1.45;
}

.profile-hero.influencer-card:hover {
  border-color: #263452;
  box-shadow: 0 12px 32px rgba(4, 10, 24, 0.45);
}

.profile-hero {
  color: #E7EEF8;
}

.profile-hero .card-body {
  padding: 32px 32px 24px;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-avatar-img {
  width: 88px;
  height: 88px;
  font-size: 28px;
}

.profile-identity {
  flex: 1;
  min-width: 0;
}

.profile-name {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: #fff;
}

.profile-paused {
  display: inline-block;
  margin-left: 10px;
  transform: translateY(-3px);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #3A4C6A;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8EA0BA;
  vertical-align: middle;
}

.profile-handle {
  margin-top: 4px;
  font-size: 15px;
  color: #8EA0BA;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #1E2A44;
  color: #C5D4EA;
  font-size: 13px;
  font-weight: 600;
}

.profile-link:hover {
  background: #263656;
  color: #fff;
}

.profile-followers {
  font-size: 13px;
  color: #8EA0BA;
  padding: 0 2px;
}

.profile-rate {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}

.profile-rate-value {
  font-size: 64px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -2px;
  color: var(--sc-tone);
  font-variant-numeric: tabular-nums;
}

.profile-hero.tone-none .profile-rate-value {
  color: #6C7A93;
}

.profile-rate-caption {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: #8EA0BA;
}

.profile-rate-detail {
  margin-top: 6px;
  font-size: 12px;
  color: #8EA0BA;
}

.profile-stats-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  max-width: 380px;
  margin-left: auto;
  padding: 14px 16px;
  border: 1px solid rgba(47, 111, 237, 0.35);
  border-radius: 14px;
  background: rgba(47, 111, 237, 0.1);
  color: #E7EEF8;
}

.profile-stats-progress {
  min-width: 0;
}

.profile-stats-loading strong,
.profile-stats-loading small {
  display: block;
}

.profile-stats-loading strong {
  font-size: 14px;
}

.profile-stats-loading small {
  margin-top: 3px;
  color: #8EA0BA;
  font-size: 12px;
  line-height: 1.4;
}

.profile-live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}

.profile-live-stats span {
  color: #8EA0BA;
  font-size: 11px;
  white-space: nowrap;
}

.profile-live-stats strong {
  display: inline;
  margin-right: 3px;
  color: #E7EEF8;
  font-size: 13px;
}

.profile-stats-spinner {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 3px solid rgba(142, 180, 255, 0.25);
  border-top-color: #8EB4FF;
  border-radius: 50%;
  animation: track-spin 0.8s linear infinite;
}

.profile-live-posts {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #1F2B44;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.profile-live-posts.is-updating {
  opacity: 0;
  transform: translateY(4px);
}

.profile-live-posts-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #8EA0BA;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.profile-live-post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-live-post {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #1F2B44;
  border-radius: 12px;
  background: rgba(8, 13, 26, 0.45);
}

.profile-live-post p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #C8D2E1;
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-live-post time,
.profile-live-post-empty {
  color: #6C7A93;
  font-size: 11px;
}

.profile-live-post time {
  display: block;
  margin-top: 7px;
}

.profile-live-post-empty {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

.influencer-card-loading {
  width: 100%;
  max-width: none;
  margin: 26px 0 0;
}

.profile-outcome {
  margin-top: 28px;
}

.profile-outcome-bar {
  display: flex;
  height: 10px;
  gap: 3px;
}

.profile-outcome-bar span {
  display: block;
  min-width: 6px;
  border-radius: 99px;
}

.profile-outcome-bar .is-hit,
.profile-dot.is-hit {
  background: var(--mp-hit);
}

.profile-outcome-bar .is-miss,
.profile-dot.is-miss {
  background: var(--mp-miss);
}

.profile-outcome-bar .is-pending,
.profile-dot.is-pending {
  background: var(--mp-pending);
}

.profile-outcome-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: #8EA0BA;
}

.profile-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}

.profile-hero .profile-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  padding: 0;
  background: transparent;
  border: none;
}

.profile-hero .profile-kpis .sc-kpi {
  padding: 14px 4px;
  background: rgba(8, 13, 26, 0.55);
  border: 1px solid #1F2B44;
  border-radius: 14px;
}

.profile-hero .profile-kpis .sc-kpi + .sc-kpi {
  border-left: 1px solid #1F2B44;
}

.profile-hero .profile-kpis .sc-kpi-value {
  font-size: 22px;
}

.profile-hero .profile-kpis .sc-kpi-label {
  font-size: 10px;
  letter-spacing: 0.8px;
}

.profile-foot {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #6C7A93;
  text-align: center;
}

.profile-claims {
  margin-top: 48px;
}

.profile-claims-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;
}

.profile-section-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #fff;
}

.profile-count {
  margin-left: 8px;
  color: #8EA0BA;
  font-size: 0.72em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile-section-lead {
  margin: 6px 0 0;
  color: #8EA0BA;
  font-size: 15px;
}

.profile-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-filters button {
  appearance: none;
  border: 1px solid #2A3852;
  background: #121A2B;
  color: rgba(231, 238, 248, 0.8);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.profile-filters button span {
  margin-left: 6px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.profile-filters button:hover {
  border-color: #4A6080;
  color: #fff;
}

.profile-filters button.active {
  background: #2F6FED;
  border-color: #2F6FED;
  color: #fff;
}

.profile-filters button.active span {
  opacity: 0.9;
}

.profile-filters button:focus-visible {
  outline: 2px solid #8EB4FF;
  outline-offset: 2px;
}

.claim-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.claim-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.claim-more .btn {
  min-width: 150px;
}

.card.claim-card {
  --claim-tone: var(--mp-pending);
  padding: 0;
  color: #E7EEF8;
  background: linear-gradient(180deg, #16203A 0%, #111A2E 100%);
  border: 1px solid #263452;
  border-left: 3px solid var(--claim-tone);
}

.card.claim-card.is-hit {
  --claim-tone: var(--mp-hit);
}

.card.claim-card.is-miss {
  --claim-tone: var(--mp-miss);
}

.card.claim-card.is-pending {
  --claim-tone: var(--mp-pending);
}

.card.claim-card:hover {
  border-color: #34466B;
  border-left-color: var(--claim-tone);
}

.claim-layout {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 154px;
}

.claim-content {
  min-width: 0;
  padding: 22px 26px 20px;
}

.claim-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.claim-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.claim-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  border-right: 1px solid #263452;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-align: center;
}

.claim-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 25px;
  line-height: 1;
}

.claim-due {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-pending);
  font-variant-numeric: tabular-nums;
}

.claim-due.is-overdue {
  color: #E7A08A;
}

.claim-status.is-hit {
  background: rgba(47, 191, 113, 0.08);
  color: var(--mp-hit);
}

.claim-status.is-miss {
  background: rgba(225, 91, 100, 0.08);
  color: var(--mp-miss);
}

.claim-status.is-pending {
  background: rgba(212, 162, 76, 0.08);
  color: var(--mp-pending);
}

.claim-latest {
  background: rgba(47, 111, 237, 0.16);
  color: #B7D0FF;
}

.claim-when {
  flex-shrink: 0;
  padding-top: 3px;
  font-size: 13px;
  color: #8EA0BA;
  font-variant-numeric: tabular-nums;
}

.claim-quote {
  position: relative;
  margin: 18px 0 0;
  padding: 2px 0 0 6px;
}

.claim-quote-mark {
  position: absolute;
  top: -18px;
  left: -6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: 1;
  color: #2F6FED;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.claim-text {
  position: relative;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: #F4F7FB;
  overflow-wrap: anywhere;
}

.claim-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  font-size: 14px;
  color: #8EA0BA;
}

.claim-meta > * + *::before {
  content: "·";
  margin: 0 8px;
  color: #4A5A78;
}

.claim-meta a {
  color: #8EB4FF;
  font-weight: 600;
}

.claim-meta a:hover {
  color: #B7D0FF;
}

.card.profile-empty {
  padding: 48px 24px;
  text-align: center;
  border: none;
  background: linear-gradient(180deg, #16203A 0%, #111A2E 100%);
}

.profile-empty-icon {
  margin-bottom: 8px;
  font-size: 28px;
  color: #2F6FED;
}

.profile-empty h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.profile-empty p {
  max-width: 440px;
  margin: 0 auto;
  color: #8EA0BA;
}

.profile-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 36px;
  font-size: 13px;
  color: #6C7A93;
}

.profile-admin a {
  color: #8EB4FF;
}

.profile-admin a:hover {
  color: #B7D0FF;
}

.influencer-manage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 16px 60px;
}

@media (max-width: 900px) {
  .profile-hero .profile-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .influencer-profile > .container {
    padding-top: 108px;
  }

  .profile-hero .card-body {
    padding: 22px 18px 18px;
  }

  .profile-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .profile-avatar-img {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }

  .profile-name {
    font-size: 26px;
  }

  .profile-rate {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .profile-stats-loading {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .profile-live-post-list {
    grid-template-columns: 1fr;
  }

  .profile-rate-value {
    grid-row: 1 / span 2;
    font-size: 44px;
  }

  .profile-rate-caption,
  .profile-rate-detail {
    margin-top: 0;
  }

  .profile-hero .profile-kpis .sc-kpi-value {
    font-size: 18px;
  }

  .profile-section-title {
    font-size: 24px;
  }

  .card.claim-card {
    padding: 0;
  }

  .claim-layout {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .claim-content {
    padding: 18px 16px 16px;
  }

  .claim-status {
    gap: 8px;
    padding: 16px 8px;
    font-size: 13px;
    letter-spacing: 0.6px;
  }

  .claim-status-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .claim-text {
    font-size: 20px;
  }

  .claim-quote-mark {
    font-size: 60px;
  }
}

/*******************************
********** Legal pages *********
*******************************/

.legal-page {
  padding: 140px 0 80px;
}

.legal-page h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 8px;
}

.legal-page .legal-updated {
  margin-bottom: 28px;
}

.legal-prose {
  max-width: 42rem;
}

.legal-prose h2 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.legal-prose p,
.legal-prose li {
  color: rgba(231, 238, 248, 0.82);
  line-height: 1.7;
}

.legal-prose ul {
  padding-left: 1.2rem;
}

.legal-card {
  background: #131C2E;
  border: 1px solid #2A3852;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0 8px;
}

.legal-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .legal-page {
    padding-top: 120px;
  }

  .legal-page h1 {
    font-size: 34px;
  }
}