html {
  font-size: 14px;
  font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.settings-hero {
  align-items: stretch;
}

.settings-hero-panel {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 260px;
  align-content: center;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
}

.settings-hero-panel span,
.settings-hero-panel small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.settings-hero-panel strong {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.2;
}

.settings-form {
  display: block;
}

.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.settings-summary-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.settings-summary-card small,
.settings-actions span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.settings-summary-card strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-summary-icon,
.settings-card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-weight: 900;
}

.settings-summary-icon {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 1rem;
  font-size: 0.82rem;
}

.settings-summary-icon-green,
.settings-card-icon-green {
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.settings-summary-icon-purple,
.settings-card-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.settings-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.62);
}

.settings-card::after {
  content: "";
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.07);
  pointer-events: none;
}

.settings-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.settings-card-head-compact {
  margin-bottom: 1rem;
}

.settings-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  box-shadow: 0 0.9rem 1.8rem rgba(37, 99, 235, 0.18);
  font-size: 0.78rem;
}

.settings-card-icon-blue {
  background: linear-gradient(135deg, #0284c7, #2563eb);
}

.settings-card-icon-orange {
  background: linear-gradient(135deg, #f97316, #f59e0b);
}

.settings-status-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.14), transparent 18rem),
    rgba(255, 255, 255, 0.88);
}

.settings-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.settings-status-ready {
  color: #047857;
  background: #d1fae5;
}

.settings-status-waiting {
  color: #92400e;
  background: #fef3c7;
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.settings-agency-card {
  padding: 1.25rem;
}

.settings-section-stack {
  display: grid;
  gap: 1.25rem;
}

.settings-section-card {
  padding: 1.35rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 1.15rem 2.6rem rgba(15, 23, 42, 0.09);
}

.settings-section-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 1.2rem;
  align-items: stretch;
}

.settings-section-main {
  min-width: 0;
}

.settings-guide-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.12), transparent 8rem),
    rgba(248, 250, 252, 0.92);
}

.settings-guide-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 900;
}

.settings-guide-card ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.1rem;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}

.settings-guide-card code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.45rem;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
}

.settings-guide-badge {
  justify-self: start;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  font-size: 0.72rem;
  font-weight: 900;
}

.settings-guide-blue {
  border-color: rgba(2, 132, 199, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.14), transparent 8rem),
    rgba(240, 249, 255, 0.9);
}

.settings-guide-green {
  border-color: rgba(5, 150, 105, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.16), transparent 8rem),
    rgba(240, 253, 250, 0.9);
}

.settings-guide-purple {
  border-color: rgba(124, 58, 237, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.14), transparent 8rem),
    rgba(245, 243, 255, 0.9);
}

.settings-guide-orange {
  border-color: rgba(249, 115, 22, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.14), transparent 8rem),
    rgba(255, 247, 237, 0.9);
}

.settings-mini-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.25rem;
}

.settings-mini-map span {
  display: grid;
  min-height: 2.35rem;
  place-items: center;
  padding: 0.45rem;
  border-radius: 0.85rem;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.settings-mini-map i {
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid rgba(37, 99, 235, 0.48);
  border-right: 2px solid rgba(37, 99, 235, 0.48);
  transform: rotate(45deg);
}

.agency-create-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

@media (max-width: 991.98px) {
  .settings-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-hero-panel {
    width: 100%;
  }

  .settings-summary-grid {
    grid-template-columns: 1fr;
  }

  .agency-create-form {
    grid-template-columns: 1fr;
  }

  .settings-section-layout {
    grid-template-columns: 1fr;
  }

  .settings-mini-map {
    grid-template-columns: 1fr;
  }

  .settings-mini-map i {
    justify-self: center;
    transform: rotate(135deg);
  }
}

.public-home {
  display: grid;
  gap: 4rem;
  padding-bottom: 3rem;
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
  gap: 1.5rem;
  align-items: stretch;
  overflow: hidden;
  padding: 2.6rem;
  color: #fff;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.34), transparent 20rem),
    radial-gradient(circle at 30% 100%, rgba(196, 181, 253, 0.36), transparent 24rem),
    linear-gradient(135deg, #172554 0%, #2563eb 46%, #7c3aed 100%);
  box-shadow: 0 1.8rem 4rem rgba(37, 99, 235, 0.22);
}

.public-hero-copy {
  align-self: center;
  max-width: 760px;
}

.public-hero h1 {
  max-width: 820px;
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  font-weight: 900;
  line-height: 1.02;
}

.public-hero p {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.08rem;
}

.public-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.public-hero-preview {
  align-self: center;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

.preview-window-head {
  display: flex;
  gap: 0.45rem;
  padding: 0.35rem 0.35rem 0.85rem;
}

.preview-window-head span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.preview-main-card,
.preview-metric-grid div {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.12);
}

.preview-main-card {
  padding: 1rem;
}

.preview-main-card small,
.preview-metric-grid span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.preview-main-card strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
}

.preview-main-card p {
  margin: 0;
  font-size: 0.9rem;
}

.preview-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.preview-metric-grid div {
  padding: 0.9rem;
}

.preview-metric-grid strong {
  color: #fff;
  font-size: 1rem;
}

.public-section,
.public-split {
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.public-section-head {
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.public-section-head h2,
.public-split h2 {
  color: #0f172a;
  font-weight: 900;
}

.public-section-head p,
.public-split p {
  color: #64748b;
}

.public-feature-grid,
.public-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.public-feature-card,
.public-step-card {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 0.8rem 1.8rem rgba(15, 23, 42, 0.06);
}

.public-feature-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-weight: 900;
}

.public-feature-icon-green {
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.public-feature-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.public-feature-icon-orange {
  background: linear-gradient(135deg, #f97316, #f59e0b);
}

.public-feature-card h3,
.public-step-card h3 {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
}

.public-feature-card p,
.public-step-card p {
  margin: 0;
  color: #64748b;
  font-size: 0.92rem;
}

.public-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.8fr);
  gap: 2rem;
  align-items: center;
}

.public-check-list {
  display: grid;
  gap: 0.75rem;
}

.public-check-list span {
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  color: #0f172a;
  background: #f8fafc;
  font-weight: 800;
}

.public-step-card strong {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #4338ca;
  background: #eef2ff;
  font-size: 0.8rem;
}

@media (max-width: 991.98px) {
  .public-hero,
  .public-split {
    grid-template-columns: 1fr;
  }

  .public-feature-grid,
  .public-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .public-hero,
  .public-section,
  .public-split {
    padding: 1.25rem;
  }

  .public-feature-grid,
  .public-step-grid,
  .preview-metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background:
    radial-gradient(circle at 8% 0%, rgba(79, 70, 229, 0.16), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(14, 165, 233, 0.13), transparent 22rem),
    radial-gradient(circle at 50% 95%, rgba(236, 72, 153, 0.08), transparent 22rem),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 54%, #f8fafc 100%);
  color: #162033;
  font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

a {
  text-decoration: none;
}

.navbar {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px);
}

.navbar-brand {
  color: #4338ca !important;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.app-nav {
  gap: 0.35rem;
}

.app-nav .nav-link {
  border-radius: 999px;
  font-weight: 800;
}

.app-nav .nav-link:hover {
  color: #4338ca !important;
  background: #eef2ff;
}

.release-notes-menu { position: relative; }
.release-notes-toggle { border: 0; background: transparent; cursor: pointer; }
.app-topbar-actions { display: flex; align-items: center; gap: 0.55rem; }
.app-topbar .release-notes-toggle { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(124, 58, 237, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.8); font-size: 1rem; }
.release-notes-panel { position: absolute; z-index: 30; top: calc(100% + 0.55rem); right: 0; width: min(24rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 1rem 2.5rem rgba(16, 24, 40, 0.15); }
.release-notes-panel > strong { display: block; margin-bottom: 0.75rem; color: #101828; font-size: 0.9rem; }
.release-notes-list { display: grid; gap: 0.7rem; color: #667085; font-size: 0.82rem; }
.release-note-lines { display:grid; gap:.25rem; margin:.4rem 0 0; padding:0; list-style:none; }.release-note-lines li { display:flex; gap:.45rem; color:inherit; }.release-note-lines li::before { content:"•"; color:#7c3aed; font-weight:900; }.commerce-pulse-notes .release-note-lines li::before { color:#c8bbff; }
.release-note-item { padding-top: 0.7rem; border-top: 1px solid #eaecf0; }
.release-note-item:first-child { padding-top: 0; border-top: 0; }
.release-note-item strong { color: #344054; font-size: 0.84rem; }
.release-note-item p { margin: 0.25rem 0; color: #667085; }
.release-note-item small { color: #98a2b3; }
.dashboard-release-notes { width: 100%; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,.18); }
.dashboard-release-notes > strong { display: block; margin-bottom: .4rem; color: #fff; font-size: .82rem; }
.dashboard-release-notes .release-notes-list { max-height: 9rem; overflow: auto; color: rgba(255,255,255,.72); font-size: .74rem; }
.dashboard-release-notes .release-note-item { border-color: rgba(255,255,255,.15); }
.dashboard-release-notes .release-note-item strong { color: #fff; }
.dashboard-release-notes .release-note-item p, .dashboard-release-notes .release-note-item small { color: rgba(255,255,255,.7); }
.dashboard-loading-cards .metric-panel { position: relative; overflow: hidden; opacity: .72; }
.dashboard-loading-cards .metric-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 45%, transparent 65%); transform: translateX(-100%); animation: dashboard-skeleton 1.4s infinite; }
@keyframes dashboard-skeleton { to { transform: translateX(100%); } }
.commerce-pulse { display: grid; gap: 1.25rem; }
.commerce-pulse-head { display: flex; justify-content: space-between; gap: 1rem; align-items: stretch; padding: 1.4rem; border-radius: 1.25rem; color: #fff; background: linear-gradient(130deg, #151b38, #3b257c); }
.commerce-pulse-head > div > span, .commerce-panel-head span { color: #a9b4d0; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.commerce-pulse-head h1 { margin: .25rem 0 0; font-size: 1.45rem; font-weight: 900; }
.commerce-pulse-notes { width: min(23rem, 42%); padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.18); }
.commerce-pulse-notes > strong { font-size: .82rem; }
.commerce-pulse-notes .release-notes-list { max-height: 7rem; margin-top: .4rem; overflow: auto; color: #d4daf0; }
.commerce-pulse-notes .release-note-item { border-color: rgba(255,255,255,.15); }.commerce-pulse-notes .release-note-item strong { color:#fff; }.commerce-pulse-notes .release-note-item p { color:#d4daf0; }
.commerce-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem; }
.commerce-kpi-card { display: grid; gap: .5rem; min-height: 8.5rem; padding: 1rem; border: 1px solid #e7eaf0; border-radius: 1rem; background: #fff; box-shadow: 0 .4rem 1.2rem rgba(16,24,40,.04); }.commerce-kpi-card span { color:#667085; font-size:.78rem; font-weight:800; }.commerce-kpi-card strong { color:#101828; font-size:1.35rem; font-weight:900; }.commerce-kpi-card small { color:#98a2b3; font-size:.73rem; }.commerce-kpi-primary { border-color:#d8ccff; background:#f8f6ff; }
.commerce-dashboard-grid { display:grid; grid-template-columns: minmax(0,1.5fr) minmax(18rem,.8fr); gap:1rem; }.commerce-panel { padding:1.2rem; border:1px solid #e7eaf0; border-radius:1rem; background:#fff; }.commerce-panel-head h2 { margin:.2rem 0 0; color:#101828; font-size:1.05rem; font-weight:900; }.commerce-bar-list { display:grid; gap:.9rem; margin-top:1.3rem; }.commerce-bar-list > div { display:grid; grid-template-columns:7rem minmax(2rem,1fr) 5rem; align-items:center; gap:.7rem; font-size:.78rem; }.commerce-bar-list i { height:.65rem; border-radius:99px; background:linear-gradient(90deg,#7c3aed,#38bdf8); }.commerce-bar-list strong { text-align:right; color:#344054; }.commerce-stat-list { display:grid; gap:.7rem; margin:1.3rem 0 0; }.commerce-stat-list div { display:flex; justify-content:space-between; padding-bottom:.65rem; border-bottom:1px solid #eef2f6; }.commerce-stat-list dt { color:#667085; font-weight:700; }.commerce-stat-list dd { margin:0; color:#101828; font-weight:900; }
@media (max-width: 1200px) { .commerce-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width: 720px) { .commerce-pulse-head,.commerce-dashboard-grid { grid-template-columns:1fr; display:grid; }.commerce-pulse-notes { width:auto; padding:1rem 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.18); }.commerce-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.commerce-bar-list > div { grid-template-columns:5.5rem minmax(2rem,1fr) 4.5rem; } }

.dashboard-release-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:1.1rem 1.25rem; border:1px solid #e7eaf0; border-radius:1rem; background:#fff; }.dashboard-release-head > div > span { color:#667085; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }.dashboard-release-head .release-notes-list { margin-top:.35rem; color:#344054; }.dashboard-release-head .release-note-item { border:0; padding:0; }.dashboard-release-head .release-note-item p { margin:.25rem 0 0; }.dashboard-release-head a { color:#5b43d6; font-size:.84rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.commerce-kpi-grid-primary { grid-template-columns:repeat(4,minmax(0,1fr)); }.revenue-distribution-panel { display:grid; grid-template-columns:minmax(15rem,.7fr) minmax(16rem,1fr); align-items:center; gap:1.5rem; }.revenue-distribution-panel .commerce-panel-head { grid-row:1; }.revenue-pie-wrap { grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:2rem; }.revenue-pie { display:grid; position:relative; width:10.5rem; height:10.5rem; place-items:center; border-radius:50%; }.revenue-pie::before { content:""; position:absolute; width:6.9rem; height:6.9rem; border-radius:50%; background:#fff; }.revenue-pie span { position:relative; z-index:1; display:grid; gap:.15rem; color:#101828; font-size:.95rem; font-weight:900; text-align:center; }.revenue-pie small { color:#667085; font-size:.65rem; font-weight:700; }.revenue-pie-legend { display:grid; gap:1rem; min-width:15rem; }.revenue-pie-legend div { display:grid; grid-template-columns:.6rem 1fr; column-gap:.55rem; font-size:.8rem; }.revenue-pie-legend i { grid-row:span 2; width:.6rem; height:.6rem; margin-top:.2rem; border-radius:50%; }.site-dot { background:#6956e8; }.marketplace-dot { background:#23b5a7; }.revenue-pie-legend span { color:#667085; }.revenue-pie-legend strong { color:#344054; }
.commerce-ads-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.ads-summary-panel .commerce-panel-head { display:flex; justify-content:space-between; align-items:start; }.roas-chip { padding:.4rem .6rem; border-radius:.55rem; color:#4935ba; background:#f0edff; font-size:.77rem; }.ads-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1.15rem; }.ads-metrics div,.social-audience-grid div,.seo-metrics div { display:grid; gap:.3rem; padding:.85rem; border-radius:.75rem; background:#f8fafc; }.ads-metrics span,.social-audience-grid span,.seo-metrics span { color:#667085; font-size:.72rem; font-weight:700; }.ads-metrics strong,.social-audience-grid strong,.seo-metrics strong { color:#101828; font-size:1.05rem; font-weight:900; }.social-audience-grid,.seo-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1.1rem; }.analytics-distribution-panel,.seo-summary-panel,.social-summary-panel { display:grid; gap:1rem; }.commerce-empty-text { margin:0; color:#98a2b3; }.traffic-distribution-list { display:grid; gap:.8rem; }.traffic-distribution-list > div { display:grid; grid-template-columns:8rem minmax(2rem,1fr) 7rem; gap:.6rem; align-items:center; }.traffic-distribution-list i { height:.55rem; border-radius:99px; background:linear-gradient(90deg,#6956e8,#8b7af0); }.traffic-distribution-list span,.traffic-distribution-list small { color:#667085; font-size:.76rem; }.traffic-distribution-list strong { color:#344054; font-size:.78rem; text-align:right; }.traffic-distribution-list small { grid-column:2 / 4; }.seo-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.release-history-head { padding:1.6rem; border-radius:1rem; color:#fff; background:linear-gradient(130deg,#151b38,#3b257c); }.release-history-head span { color:#c8d0ee; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.release-history-head h1 { margin:.3rem 0; font-size:1.7rem; font-weight:900; }.release-history-head p { margin:0; color:#d4daf0; }.release-history-list { display:grid; gap:1rem; }.release-history-item { display:grid; grid-template-columns:7rem 1fr; gap:1.25rem; padding:1.25rem; border:1px solid #e7eaf0; border-radius:1rem; background:#fff; }.release-history-item time { color:#667085; font-size:.8rem; font-weight:800; }.release-history-item span { color:#5b43d6; font-size:.78rem; font-weight:900; }.release-history-item h2 { margin:.25rem 0; color:#101828; font-size:1.05rem; font-weight:900; }.release-history-item p { margin:0; color:#667085; }
@media (max-width: 900px) { .commerce-kpi-grid-primary,.commerce-ads-grid,.revenue-distribution-panel { grid-template-columns:1fr 1fr; }.revenue-pie-wrap { grid-column:span 2; grid-row:2; justify-content:start; }.social-audience-grid,.seo-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width: 620px) { .dashboard-release-head,.revenue-pie-wrap { align-items:start; flex-direction:column; }.commerce-kpi-grid-primary,.commerce-ads-grid,.social-audience-grid,.seo-metrics { grid-template-columns:1fr; }.revenue-distribution-panel { grid-template-columns:1fr; }.revenue-pie-wrap { grid-column:auto; }.traffic-distribution-list > div { grid-template-columns:5.5rem minmax(2rem,1fr) 5.5rem; }.release-history-item { grid-template-columns:1fr; gap:.45rem; } }

.empty-home {
  min-height: 52vh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 3rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 18% 12%, rgba(79, 70, 229, 0.14), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86));
  box-shadow: 0 1.5rem 3.5rem rgba(15, 23, 42, 0.1);
  text-align: center;
}

.empty-home h1 {
  margin: 0.45rem 0;
  color: #0f172a;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
}

.empty-home p {
  max-width: 620px;
  margin: 0;
  color: #64748b;
  font-size: 1.05rem;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.7fr);
  gap: 1.5rem;
  min-height: calc(100vh - 190px);
  align-items: stretch;
}

.auth-hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  align-items: flex-end;
  padding: 3rem;
  color: #fff;
  border-radius: 2rem;
  background:
    linear-gradient(135deg, rgba(20, 31, 57, 0.92), rgba(37, 99, 235, 0.86)),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.2), transparent 18rem);
  box-shadow: 0 2rem 4rem rgba(15, 23, 42, 0.18);
}

.auth-hero::after {
  content: "";
  position: absolute;
  inset: auto -5rem -9rem auto;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.auth-card {
  align-self: center;
  padding: 2.25rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1.5rem 3.5rem rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
}

.auth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.auth-stats div {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
}

.auth-stats strong,
.auth-stats span {
  display: block;
}

.auth-stats span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.85rem;
}

.brand-pill,
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
}

.brand-pill {
  display: inline-flex;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.section-eyebrow {
  color: #64748b;
}

.modern-input {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.95rem;
  background-color: rgba(255, 255, 255, 0.92);
}

.modern-button {
  border: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 1rem 2rem rgba(37, 99, 235, 0.24);
}

.dashboard-shell {
  padding-bottom: 2rem;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .app-sidebar,
  .app-topbar,
  .filter-panel,
  .youtube-actions,
  [data-pdf-export],
  .creative-detail-button,
  .deferred-loading-panel {
    display: none !important;
  }

  .app-shell,
  .app-content,
  .dashboard-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dashboard-command,
  .dashboard-hero,
  .tool-overview,
  .metric-panel,
  .instagram-panel,
  .campaign-card,
  .sc-performance-card {
    break-inside: avoid;
  }
}

.dashboard-command,
.dashboard-hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 2.2rem;
  color: #fff;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 88% 18%, rgba(125, 211, 252, 0.34), transparent 18rem),
    radial-gradient(circle at 42% 110%, rgba(196, 181, 253, 0.34), transparent 20rem),
    linear-gradient(135deg, #172554 0%, #2563eb 46%, #7c3aed 100%);
  box-shadow: 0 1.8rem 4rem rgba(37, 99, 235, 0.22);
}

.dashboard-command::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  pointer-events: none;
}

.command-copy,
.filter-panel {
  position: relative;
  z-index: 1;
}

.command-copy {
  max-width: 680px;
}

.filter-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
}

.filter-panel .form-select,
.filter-panel .form-control {
  min-width: 170px;
}

.date-range-fields {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.date-range-fields span {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 900;
}

.insight-banner,
.modern-card,
.metric-card,
.comment-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.insight-banner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.3rem;
  border-radius: 1.35rem;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(255, 255, 255, 0.94));
}

.insight-icon {
  flex: 0 0 auto;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  color: #1d4ed8;
  background: #dbeafe;
  font-weight: 800;
}

.tool-overview {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.9fr 1fr;
  gap: 1rem;
}

.overview-card {
  position: relative;
  overflow: hidden;
  min-height: 164px;
  padding: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.55rem;
  color: #fff;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.14);
}

.overview-card::after {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  right: -4rem;
  bottom: -5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.overview-card span {
  display: inline-flex;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overview-card strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: 0.6rem;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.12;
}

.overview-card p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.overview-card-main {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.overview-card-purple {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.overview-card-green {
  background: linear-gradient(135deg, #059669, #14b8a6);
}

.overview-card-estimate {
  background: linear-gradient(135deg, #15803d, #22c55e);
}

.overview-card-orange {
  background: linear-gradient(135deg, #ea580c, #f59e0b);
}

.tsoft-monthly-analysis .tool-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tsoft-monthly-analysis .ecommerce-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tsoft-monthly-analysis .filter-panel {
  max-width: 100%;
}

.tsoft-monthly-analysis .overview-card strong,
.tsoft-monthly-analysis .campaign-type-card strong,
.tsoft-monthly-analysis .ecommerce-status-row span,
.tsoft-monthly-analysis .ecommerce-status-row strong,
.tsoft-monthly-analysis .workbench-badge {
  overflow-wrap: anywhere;
}

.tsoft-monthly-analysis .ecommerce-status-row {
  gap: 0.75rem;
}

.tsoft-monthly-analysis .ecommerce-status-row strong {
  min-width: 7rem;
}

.monthly-analysis-insight {
  margin: 0 1.25rem 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
}

.monthly-analysis-insight > span {
  display: block;
  margin-bottom: 0.35rem;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-analysis-insight p {
  margin: 0;
  color: #1e293b;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.6;
}

.customer-behavior-detail {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.45;
}

.customer-behavior-detail b {
  color: #0f172a;
}

.monthly-heatmap {
  min-width: 42rem;
}

.monthly-heatmap-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.monthly-heatmap-hours,
.monthly-heatmap-row {
  display: grid;
  grid-template-columns: 2.5rem repeat(24, minmax(0, 1fr));
  gap: 0.2rem;
  align-items: center;
}

.monthly-heatmap-hours {
  margin-bottom: 0.35rem;
  color: #64748b;
  font-size: 0.62rem;
  text-align: center;
}

.monthly-heatmap-row + .monthly-heatmap-row {
  margin-top: 0.2rem;
}

.monthly-heatmap-row > span:first-child {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
}

.monthly-heatmap-cell {
  display: block;
  aspect-ratio: 1;
  min-height: 0.85rem;
  border-radius: 0.2rem;
  background: rgba(34, 197, 94, calc(0.08 + var(--heat-intensity) * 0.82));
}

@media (max-width: 767.98px) {
  .tsoft-monthly-analysis .ecommerce-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .tsoft-monthly-analysis .ecommerce-status-row strong {
    min-width: 0;
  }
}

.tsoft-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 24rem;
}

.tsoft-status-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.65rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.tsoft-status-options input {
  accent-color: #8b5cf6;
}

.ecommerce-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.85fr);
  gap: 1rem;
}

.app-content,
.dashboard-shell,
.campaign-workbench,
.instagram-panel,
.ecommerce-dashboard-grid {
  min-width: 0;
}

.ecommerce-revenue-chart {
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  gap: 0.6rem;
  padding: 1rem 1rem 0.25rem;
  overflow: hidden;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #f8fbff, #eef2ff);
}

.ecommerce-chart-column {
  position: relative;
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  height: 12.5rem;
  grid-template-rows: 1fr auto;
  gap: 0.45rem;
  text-align: center;
}

.ecommerce-chart-column::before {
  position: absolute;
  z-index: 2;
  bottom: calc(100% - 0.4rem);
  left: 50%;
  width: max-content;
  max-width: 14rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.55rem;
  color: #fff;
  background: #172033;
  box-shadow: 0 0.65rem 1.5rem rgba(15, 23, 42, 0.22);
  content: attr(data-tooltip);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.ecommerce-chart-column:hover::before,
.ecommerce-chart-column:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ecommerce-chart-bar-wrap {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
}

.ecommerce-chart-bar {
  width: min(2.4rem, 78%);
  min-height: 0.45rem;
  border-radius: 0.65rem 0.65rem 0.2rem 0.2rem;
  background: linear-gradient(180deg, #8b5cf6, #2563eb);
  box-shadow: 0 0.45rem 0.9rem rgba(79, 70, 229, 0.2);
}

.ecommerce-chart-column small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
}

.ecommerce-status-list {
  display: grid;
  gap: 0.6rem;
}

.ecommerce-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  background: #f8fafc;
}

.ecommerce-status-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ecommerce-status-row strong {
  flex: 0 1 auto;
  text-align: right;
  white-space: normal;
}

.ecommerce-status-row strong {
  color: #0f172a;
}

.tsoft-product-list {
  display: grid;
  gap: 0.75rem;
}

.tsoft-product-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}

.tsoft-product-image {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.8rem;
  object-fit: cover;
  background: #f1f5f9;
}

.tsoft-product-placeholder {
  display: grid;
  place-items: center;
  color: #4f46e5;
  font-size: 0.75rem;
  font-weight: 900;
}

.tsoft-product-meta,
.tsoft-campaign-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.tsoft-product-meta span,
.tsoft-campaign-list span {
  padding: 0.23rem 0.45rem;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 700;
}

.tsoft-campaign-list span {
  color: #5b21b6;
  background: #ede9fe;
}

.tsoft-product-prices {
  display: grid;
  gap: 0.35rem;
  text-align: right;
  color: #64748b;
  font-size: 0.78rem;
}

.tsoft-product-prices strong,
.tsoft-conversion-grid strong {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
}

.tsoft-conversion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.tsoft-conversion-grid span {
  padding: 0.7rem;
  border-radius: 0.8rem;
  color: #64748b;
  background: #f8fafc;
  font-size: 0.75rem;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  .ecommerce-dashboard-grid { grid-template-columns: 1fr; }
  .tsoft-product-card { grid-template-columns: 4rem minmax(0, 1fr); }
  .tsoft-product-prices { grid-column: 1 / -1; text-align: left; }
  .tsoft-conversion-grid { grid-template-columns: 1fr; }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.grouped-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.metric-card {
  padding: 1.25rem;
  border-radius: 1.25rem;
}

.metric-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.metric-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 1.55rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1.2rem 2.8rem rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(18px);
}

.metric-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.metric-panel-head span {
  display: block;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.analytics-metric-card .metric-panel-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  line-height: 1.15;
}

.metric-panel-head strong {
  display: block;
  margin-top: 0.18rem;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
}

.panel-icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 1rem;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0.8rem 1.5rem rgba(15, 23, 42, 0.16);
}

.panel-blue .panel-icon {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.panel-cyan .panel-icon {
  background: linear-gradient(135deg, #0891b2, #22d3ee);
}

.panel-orange .panel-icon {
  background: linear-gradient(135deg, #f97316, #facc15);
}

.panel-pink .panel-icon {
  background: linear-gradient(135deg, #db2777, #a855f7);
}

.panel-blue {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.94));
}

.panel-cyan {
  background: linear-gradient(180deg, rgba(236, 254, 255, 0.96), rgba(255, 255, 255, 0.94));
}

.panel-orange {
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.94));
}

.panel-pink {
  background: linear-gradient(180deg, rgba(253, 242, 248, 0.98), rgba(255, 255, 255, 0.94));
}

.metric-group-primary {
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.metric-group-accent {
  background: linear-gradient(135deg, #f5f3ff, #ffffff);
}

.metric-group-header {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.metric-group-header span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-group-header strong {
  display: block;
  margin-top: 0.15rem;
  color: #0f172a;
}

.mini-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.7);
}

.mini-metric:last-child {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.mini-metric span {
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 700;
}

.metric-label,
.table-head-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.info-tip {
  position: relative;
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border-radius: 999px;
  color: #2563eb;
  background: #dbeafe;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  outline: none;
}

.metric-panel-head .info-tip {
  display: inline-grid;
  vertical-align: middle;
}

.info-tip::before,
.info-tip::after {
  position: absolute;
  left: 50%;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.35rem);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.info-tip::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 0.55rem);
  width: max-content;
  max-width: min(17rem, 72vw);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.8rem;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.22);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
}

.info-tip::after {
  content: "";
  bottom: calc(100% + 0.2rem);
  border: 0.35rem solid transparent;
  border-top-color: rgba(15, 23, 42, 0.96);
}

.info-tip:hover::before,
.info-tip:hover::after,
.info-tip:focus::before,
.info-tip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.analytics-overview .overview-card {
  overflow: visible;
}

.analytics-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin-left: 0.15rem;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 999px;
  color: #0369a1;
  background: #e0f2fe;
  box-shadow: 0 0.35rem 0.9rem rgba(14, 165, 233, 0.16);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  text-transform: none;
  vertical-align: text-top;
  outline: none;
}

.overview-card .analytics-info-tip {
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.7);
}

.analytics-info-tip::before,
.analytics-info-tip::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.analytics-info-tip::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 0.65rem);
  z-index: 120;
  width: min(19rem, 72vw);
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.9rem;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.18);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
  transform: translate(-50%, 0.35rem);
}

.analytics-info-tip::after {
  content: "";
  bottom: calc(100% + 0.35rem);
  z-index: 121;
  width: 0.65rem;
  height: 0.65rem;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.98);
  transform: translate(-50%, 0.35rem) rotate(-45deg);
}

.analytics-info-tip:hover::before,
.analytics-info-tip:hover::after,
.analytics-info-tip:focus::before,
.analytics-info-tip:focus::after {
  opacity: 1;
}

.analytics-info-tip:hover::before,
.analytics-info-tip:focus::before {
  transform: translate(-50%, 0);
}

.analytics-info-tip:hover::after,
.analytics-info-tip:focus::after {
  transform: translate(-50%, 0) rotate(-45deg);
}

.table-info-tip::before {
  top: calc(100% + 0.55rem);
  bottom: auto;
}

.table-info-tip::after {
  top: calc(100% + 0.2rem);
  bottom: auto;
  border-top-color: transparent;
  border-bottom-color: rgba(15, 23, 42, 0.96);
}

.mini-metric div,
.table-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.table-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.table-metric-row:last-child {
  border-bottom: 0;
}

.table-metric-row > span {
  min-width: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  overflow-wrap: anywhere;
}

.table-metric-row > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  min-width: 5rem;
  text-align: right;
}

.mini-metric strong {
  color: #0f172a;
  font-size: 1.18rem;
  font-weight: 800;
}

.metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.metric-card span,
.compare-box span {
  display: block;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin: 0.45rem 0;
  color: #0f172a;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
}

.metric-card small,
.compare-box small {
  color: #64748b;
}

.audience-panel {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.08);
}

.audience-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.audience-head > span {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  color: #4338ca;
  background: #eef2ff;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.audience-stat {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  border-radius: 1.15rem;
  color: #ffffff;
}

.audience-stat span,
.audience-stat small {
  position: relative;
  z-index: 1;
  display: block;
}

.audience-stat span {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}

.audience-stat strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0.25rem 0;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1;
}

.audience-stat small {
  opacity: 0.82;
  font-weight: 800;
}

.instagram-stat {
  background: linear-gradient(135deg, #f97316, #d946ef, #4f46e5);
}

.facebook-stat {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.audience-chart {
  position: relative;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}

.audience-chart canvas {
  display: block;
  width: 100%;
  height: 220px;
  cursor: crosshair;
}

.audience-chart-tooltip {
  position: absolute;
  z-index: 5;
  display: none;
  min-width: 11rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.95rem;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1rem 2.2rem rgba(15, 23, 42, 0.16);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.75rem));
}

.audience-chart-tooltip strong,
.audience-chart-tooltip span {
  display: block;
}

.audience-chart-tooltip strong {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}

.audience-chart-tooltip span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.audience-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.75rem;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.audience-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.audience-legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
}

.legend-instagram {
  background: #d946ef;
}

.legend-facebook {
  background: #2563eb;
}

.instagram-workbench {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.08);
}

.instagram-summary-grid,
.instagram-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.instagram-summary-card {
  padding: 1rem;
  border-radius: 1.15rem;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.instagram-summary-card:nth-child(2) {
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
}

.instagram-summary-card span,
.instagram-summary-card small {
  display: block;
  opacity: 0.82;
  font-weight: 800;
}

.instagram-summary-card strong {
  display: block;
  margin: 0.25rem 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1;
}

.instagram-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.instagram-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.instagram-panel-head strong {
  color: #0f172a;
  font-size: 1rem;
}

.instagram-panel-head span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
}

.instagram-post-list,
.instagram-comment-list {
  display: grid;
  gap: 0.75rem;
}

.instagram-post-card,
.instagram-comment-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.05);
}

.instagram-post-card {
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: stretch;
  color: inherit;
}

.instagram-post-card:hover {
  border-color: rgba(124, 58, 237, 0.32);
  transform: translateY(-1px);
}

.instagram-post-card span,
.instagram-post-card small,
.instagram-comment-card span,
.instagram-comment-card small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.instagram-post-card strong {
  display: block;
  margin: 0.2rem 0;
  color: #0f172a;
  font-size: 0.92rem;
}

.instagram-post-media {
  overflow: hidden;
  border-radius: 0.85rem;
  background: #e2e8f0;
  aspect-ratio: 1 / 1;
}

.instagram-post-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.instagram-post-media span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 900;
}

.instagram-post-copy {
  min-width: 0;
}

.instagram-post-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 0.5rem;
  text-align: left;
}

.instagram-post-metric {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.85rem;
  background: #f8fafc;
}

.instagram-post-metric span,
.instagram-post-metric small {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.instagram-post-metric strong {
  display: block;
  margin: 0.15rem 0;
  color: #7c3aed;
  font-size: 1rem;
  font-weight: 900;
}

.instagram-comment-card > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.instagram-comment-card strong {
  color: #7c3aed;
}

.instagram-comment-card p {
  margin: 0;
  color: #0f172a;
  font-size: 0.92rem;
}

.analytics-hero {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 26%),
    linear-gradient(135deg, #0f766e, #0f172a 58%, #1d4ed8);
}

.analytics-workbench {
  margin-top: 0.25rem;
}

.analytics-channel-grid,
.analytics-detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-channel-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.92));
}

.analytics-channel-chart {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(14, 165, 233, 0.14);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.06);
}

.analytics-channel-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.analytics-channel-chart-head div {
  display: grid;
  gap: 0.2rem;
}

.analytics-channel-chart-head strong,
.analytics-channel-bar-meta strong {
  color: #0f172a;
}

.analytics-channel-chart-head span,
.analytics-channel-bar-meta span,
.analytics-empty-note {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 700;
}

.analytics-channel-chart-head b {
  flex: 0 0 auto;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  color: #0369a1;
  background: #e0f2fe;
  font-size: 0.86rem;
}

.analytics-channel-chart-head .change-badge,
.analytics-channel-bar-meta .change-badge,
.analytics-channel-card .change-badge {
  margin-top: 0;
  font-size: 0.72rem;
}

.analytics-channel-chart-head .change-good,
.analytics-channel-bar-meta .change-good,
.analytics-channel-card .change-good {
  color: #047857;
}

.analytics-channel-chart-head .change-bad,
.analytics-channel-bar-meta .change-bad,
.analytics-channel-card .change-bad {
  color: #be123c;
}

.analytics-channel-chart-head .change-neutral,
.analytics-channel-bar-meta .change-neutral,
.analytics-channel-card .change-neutral {
  color: #475569;
}

.analytics-channel-bars {
  display: grid;
  gap: 0.85rem;
}

.analytics-channel-bar-row {
  display: grid;
  gap: 0.42rem;
}

.analytics-channel-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.analytics-channel-bar-track {
  position: relative;
  overflow: hidden;
  height: 0.8rem;
  border-radius: 999px;
  background: #e2e8f0;
}

.analytics-channel-bar-fill {
  min-width: 0.45rem;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #10b981);
  box-shadow: 0 0.45rem 1rem rgba(37, 99, 235, 0.2);
}

.analytics-empty-note {
  padding: 0.85rem;
  border-radius: 0.9rem;
  background: rgba(248, 250, 252, 0.82);
}

.analytics-metric-card .metric-row strong {
  max-width: 180px;
  text-align: right;
  font-size: 0.92rem;
}

.analytics-product-list,
.analytics-insight-list {
  display: grid;
  gap: 0.75rem;
}

.analytics-product-card,
.analytics-insight-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.88);
}

.analytics-product-card {
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.analytics-product-link:hover {
  border-color: rgba(14, 118, 110, 0.32);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.analytics-product-media {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  overflow: hidden;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #ccfbf1, #dbeafe);
  color: #0f766e;
  font-size: 0.92rem;
  font-weight: 900;
}

.analytics-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.analytics-product-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.analytics-product-card span,
.analytics-insight-card p {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
}

.analytics-product-card strong,
.analytics-insight-card strong {
  color: #0f172a;
}

.analytics-product-stats {
  display: grid;
  gap: 0.2rem;
  text-align: right;
}

.analytics-product-stats b {
  color: #0f766e;
}

.analytics-product-stats small {
  color: #475569;
  font-weight: 700;
}

.analytics-compare-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.analytics-compare-line .change-badge {
  margin-top: 0;
}

.change-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  margin-top: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.metric-top .change-badge {
  margin-top: 0;
}

.modern-table .change-badge {
  display: flex;
  width: fit-content;
  margin-left: auto;
}

.change-good {
  color: #047857;
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
}

.change-bad {
  color: #be123c;
  background: linear-gradient(135deg, #ffe4e6, #fff1f2);
}

.change-neutral {
  color: #475569;
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}

.metric-card-primary {
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.metric-card-accent {
  background: linear-gradient(135deg, #f5f3ff, #ffffff);
}

.section-heading,
.modern-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.comment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.action-board {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.2rem 2.8rem rgba(15, 23, 42, 0.1);
}

.action-board-head,
.workbench-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.action-board-head span,
.workbench-badge {
  display: inline-flex;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: #334155;
  background: #f1f5f9;
  font-size: 0.8rem;
  font-weight: 800;
}

.action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.conversion-funnel {
  padding: 1.25rem;
  border: 1px solid rgba(125, 211, 252, 0.42);
  border-radius: 1.6rem;
  background: linear-gradient(135deg, #f0f9ff, #ffffff 54%, #f5f3ff);
  box-shadow: 0 1.2rem 2.8rem rgba(15, 23, 42, 0.08);
}

.conversion-funnel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.conversion-funnel-head > span {
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.conversion-funnel-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.conversion-funnel-step {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.86);
}

.conversion-funnel-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.conversion-funnel-label > span {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  font-size: 0.72rem;
  font-weight: 900;
}

.conversion-funnel-label strong,
.conversion-funnel-label small,
.conversion-funnel-label b {
  display: block;
}

.conversion-funnel-label strong { color: #0f172a; font-size: 0.84rem; line-height: 1.15; }
.conversion-funnel-label small { margin-top: 0.2rem; color: #64748b; font-size: 0.7rem; font-weight: 700; }
.conversion-funnel-label b { grid-column: 1 / -1; margin-top: 0.3rem; color: #0f172a; font-size: 1.35rem; }

.conversion-funnel-track {
  height: 0.48rem;
  margin-top: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.conversion-funnel-bar {
  height: 100%;
  min-width: 0.45rem;
  border-radius: inherit;
  background: linear-gradient(90deg, #06b6d4, #4f46e5);
}

.conversion-funnel-rate { display: block; min-height: 2.1em; margin-top: 0.55rem; color: #475569; font-size: 0.72rem; font-weight: 800; }

@media (max-width: 991.98px) {
  .conversion-funnel-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .conversion-funnel {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .conversion-funnel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .conversion-funnel-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .conversion-funnel-step {
    padding: 0.8rem;
    border-radius: 0.95rem;
  }
}

@media (max-width: 575.98px) {
  .conversion-funnel-steps {
    grid-template-columns: 1fr;
  }

  .conversion-funnel-label {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .conversion-funnel-label b {
    grid-column: auto;
    grid-row: 1 / span 2;
    margin-top: 0;
    text-align: right;
  }

  .conversion-funnel-track {
    margin-top: 0.8rem;
  }

  .conversion-funnel-rate {
    min-height: 0;
  }
}

.action-card {
  display: flex;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #fff;
}

.action-card p {
  margin: 0.35rem 0 0;
  color: #475569;
}

.action-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.8rem;
  color: #fff;
  font-weight: 900;
}

.action-success .action-icon {
  background: linear-gradient(135deg, #10b981, #22c55e);
}

.action-warning .action-icon {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.action-danger .action-icon {
  background: linear-gradient(135deg, #ef4444, #e11d48);
}

.action-neutral .action-icon {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.comment-card {
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 1.2rem;
}

.comment-card p {
  margin: 0.3rem 0 0;
  color: #475569;
}

.comment-dot {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: #94a3b8;
}

.comment-success .comment-dot {
  background: #22c55e;
}

.comment-warning .comment-dot {
  background: #f59e0b;
}

.comment-danger .comment-dot {
  background: #ef4444;
}

.modern-card {
  padding: 1.25rem;
  border-radius: 1.35rem;
  overflow: hidden;
}

.campaign-workbench {
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 1.65rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.12);
}

.workbench-head {
  padding: 1.25rem 1.25rem 0;
}

.campaign-type-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  overflow-x: visible;
  padding: 0 1.25rem 1rem;
}

.return-reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  padding: 0 1.25rem 1rem;
}

.customer-city-chart {
  display: grid;
  gap: 0.7rem;
  padding: 0 1.25rem 1.25rem;
}

.customer-city-chart-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 3fr) auto;
  align-items: center;
  gap: 0.8rem;
}

.customer-city-name,
.customer-city-count {
  color: #1e293b;
  font-size: 0.86rem;
}

.customer-city-bar-track {
  height: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf8;
}

.customer-city-bar {
  height: 100%;
  min-width: 0.35rem;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
}

.daily-registration-chart {
  display: grid;
  grid-template-columns: repeat(30, minmax(1.45rem, 1fr));
  align-items: end;
  gap: 0.35rem;
  min-width: 48rem;
  padding: 1.25rem;
  overflow-x: auto;
}

.daily-registration-chart-item {
  display: grid;
  grid-template-rows: auto 10rem auto;
  align-items: end;
  gap: 0.45rem;
  min-width: 1.45rem;
  text-align: center;
}

.daily-registration-chart-item strong {
  color: #334155;
  font-size: 0.7rem;
}

.daily-registration-chart-item span {
  color: #64748b;
  font-size: 0.63rem;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.daily-registration-chart-bar-track {
  display: flex;
  align-items: end;
  height: 10rem;
  overflow: hidden;
  border-radius: 0.45rem 0.45rem 0.2rem 0.2rem;
  background: #eef2ff;
}

.daily-registration-chart-bar {
  width: 100%;
  min-height: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #818cf8, #4f46e5);
}

.campaign-type-card {
  flex: 1 1 9.5rem;
  min-width: 9.5rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  box-shadow: 0 0.75rem 1.6rem rgba(15, 23, 42, 0.06);
}

.campaign-type-card span,
.campaign-type-row span {
  display: block;
  color: #4f46e5;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-type-card strong,
.campaign-type-row strong {
  display: block;
  color: #0f172a;
  font-size: 1.2rem;
}

.campaign-type-card small,
.campaign-type-row small {
  color: #64748b;
  font-weight: 700;
}

.campaign-name {
  color: #0f172a;
  font-weight: 800;
  line-height: 1.25;
}

.campaign-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.campaign-type-pill {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: #4338ca;
  background: #e0e7ff;
  font-size: 0.72rem;
  font-weight: 900;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.status-active {
  color: #047857;
  background: #d1fae5;
}

.status-passive {
  color: #475569;
  background: #e2e8f0;
}

.status-learning-complete {
  color: #047857;
  background: #d1fae5;
}

.status-learning-active {
  color: #b45309;
  background: #fef3c7;
}

.status-learning-limited {
  color: #b91c1c;
  background: #fee2e2;
}

.compare-box {
  padding: 1rem;
  border-radius: 1rem;
  background: #f8fafc;
}

.compare-box strong {
  display: block;
  margin: 0.25rem 0;
  font-size: 1.35rem;
}

.campaign-group-list {
  display: grid;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}

.campaign-group-section {
  display: grid;
  gap: 0.9rem;
}

.campaign-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #eef2ff, #ffffff);
}

.campaign-group-heading span {
  display: block;
  color: #4f46e5;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-group-heading strong {
  display: block;
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 800;
}

.campaign-group-heading small {
  color: #64748b;
  font-weight: 800;
}

.campaign-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.campaign-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.08);
}

.campaign-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: flex-start;
  gap: 0.8rem;
}

.campaign-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.creative-detail-button {
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  color: #1d4ed8;
  background: #dbeafe;
  box-shadow: 0 0.55rem 1.2rem rgba(37, 99, 235, 0.14);
  font-size: 0.78rem;
  font-weight: 900;
}

.creative-detail-button:hover,
.creative-detail-button:focus {
  color: #ffffff;
  background: #2563eb;
}

.campaign-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.campaign-metric-block {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.campaign-metric-block h3 {
  margin: 0 0 0.45rem;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-metric strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}

.creative-detail-panel {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.creative-detail-panel[hidden] {
  display: none;
}

.creative-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.creative-detail-head h3 {
  margin: 0.1rem 0 0.25rem;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
}

.creative-detail-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 700;
}

.creative-detail-head > span {
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #4338ca;
  background: #e0e7ff;
  font-size: 0.75rem;
  font-weight: 900;
}

.creative-summary-grid,
.creative-performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}

.creative-summary-metric {
  min-width: 0;
  min-height: 5.35rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.82);
}

.creative-summary-metric span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
}

.creative-summary-metric strong {
  display: block;
  margin-top: 0.15rem;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 900;
}

.creative-summary-metric small {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

.creative-performance-list {
  display: grid;
  gap: 0.75rem;
}

.creative-performance-card {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.15rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 1.6rem rgba(15, 23, 42, 0.06);
}

.creative-media {
  overflow: hidden;
  min-height: 18rem;
  border-radius: 1rem;
  background: #e2e8f0;
  aspect-ratio: 4 / 5;
}

.creative-image-button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.creative-media img,
.creative-image-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.creative-image-placeholder,
.creative-loading-state,
.creative-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: #f8fafc;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.creative-image-placeholder {
  width: 100%;
  height: 100%;
  padding: 0.75rem;
}

.creative-performance-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.creative-performance-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.creative-performance-head strong,
.creative-performance-head span {
  display: block;
}

.creative-performance-head strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.creative-performance-head span {
  margin-top: 0.15rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
}

.creative-detail-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
  gap: 0.75rem;
  align-items: start;
}

.creative-ad-copy {
  display: grid;
  gap: 0.35rem;
  min-height: 100%;
  padding: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.9rem;
  background: #f8fafc;
}

.creative-ad-copy strong {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 900;
}

.creative-ad-copy p,
.creative-ad-copy small {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.creative-ad-copy a {
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.creative-ad-copy a:hover {
  text-decoration: underline;
}

.creative-ad-copy-empty {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.creative-performance-head small {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.creative-status-active {
  color: #047857;
  background: #d1fae5;
}

.creative-status-passive {
  color: #475569;
  background: #e2e8f0;
}

.creative-loading-state,
.creative-empty-state {
  min-height: 5rem;
  gap: 0.75rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 1rem;
}

.creative-modal-open {
  overflow: hidden;
}

.creative-image-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.creative-image-modal[hidden] {
  display: none;
}

.creative-image-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
}

.creative-image-modal-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  width: min(96vw, 86rem);
  max-height: 94vh;
  padding: 0.85rem;
  border-radius: 1.1rem;
  background: #ffffff;
  box-shadow: 0 2rem 5rem rgba(15, 23, 42, 0.35);
}

.creative-image-modal-dialog img {
  max-width: 100%;
  max-height: calc(94vh - 4.75rem);
  margin: 0 auto;
  border-radius: 0.85rem;
  object-fit: contain;
  image-rendering: auto;
}

.creative-image-modal-close {
  justify-self: end;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  color: #0f172a;
  background: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 900;
}

.creative-image-modal-close:hover,
.creative-image-modal-close:focus {
  color: #ffffff;
  background: #2563eb;
}

.empty-campaign-state {
  margin: 0 1.25rem 1.25rem;
  padding: 1.4rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 1.1rem;
  color: #64748b;
  background: #f8fafc;
  font-weight: 800;
  text-align: center;
}

.modern-alert {
  border-radius: 1rem;
}

.deferred-loading-panel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.06);
}

.deferred-loading-panel strong,
.deferred-loading-panel span {
  display: block;
}

.deferred-loading-panel strong {
  color: #0f172a;
  font-weight: 900;
}

.deferred-loading-panel span {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
}

.deferred-spinner {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border: 0.28rem solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 999px;
  animation: deferred-spin 0.8s linear infinite;
}

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

@media (max-width: 991.98px) {
  .auth-shell {
    display: block;
  }

  .auth-card {
    max-width: 560px;
    margin: 0 auto;
  }

  .dashboard-command,
  .dashboard-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-panel {
    justify-content: stretch;
  }

  .date-range-fields {
    width: 100%;
  }

  .date-range-fields .form-control {
    min-width: 0;
  }

  .filter-panel .form-select,
  .filter-panel .form-control,
  .filter-panel .btn {
    width: 100%;
  }

  .metric-grid,
  .grouped-metrics,
  .dashboard-grid,
  .tool-overview,
  .action-list,
  .comment-grid,
  .audience-grid,
  .instagram-summary-grid,
  .instagram-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creative-summary-grid,
  .creative-performance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .creative-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .auth-card,
  .dashboard-command,
  .dashboard-hero {
    padding: 1.25rem;
    border-radius: 1.25rem;
  }

  .metric-grid,
  .grouped-metrics,
  .dashboard-grid,
  .tool-overview,
  .action-list,
  .comment-grid {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .modern-card-header,
  .action-board-head,
  .workbench-head,
  .audience-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .instagram-summary-grid,
  .instagram-content-grid,
  .instagram-post-card {
    grid-template-columns: 1fr;
  }

  .instagram-post-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-channel-grid,
  .analytics-detail-grid,
  .analytics-product-card {
    grid-template-columns: 1fr;
  }

  .analytics-channel-chart-head,
  .analytics-channel-bar-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-product-media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .campaign-card-head {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .campaign-card-actions,
  .creative-detail-head,
  .creative-performance-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .campaign-group-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .campaign-metric-grid {
    grid-template-columns: 1fr;
  }

  .creative-summary-grid,
  .creative-performance-grid,
  .creative-detail-grid,
  .creative-performance-card {
    grid-template-columns: 1fr;
  }

  .creative-media {
    min-height: 20rem;
    max-height: 32rem;
  }

  .creative-image-modal {
    padding: 0.75rem;
  }
}
/* Pixelarix Pulse public landing */
.public-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: 0 !important;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.04);
}

.public-navbar .container-fluid {
  max-width: 1280px;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #101828 !important;
  font-size: 1.12rem;
}

.pulse-brand-logo {
  display: block;
  width: 10.5rem;
  max-width: 100%;
  height: auto;
  border-radius: 0.95rem;
  object-fit: contain;
}

.navbar-brand .pulse-brand-logo {
  width: 9.75rem;
}

.public-brand .pulse-brand-logo {
  width: 11.5rem;
}

.public-brand strong,
.pulse-page span,
.pulse-footer span {
  color: #7c3aed;
}

.brand-pulse-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.8rem;
  color: #7c3aed;
  background: #f2eaff;
  font-size: 1.35rem;
  line-height: 1;
}

.public-nav-links {
  justify-content: center;
  gap: 1.15rem;
}

.public-nav-links .nav-link,
.public-nav-actions .nav-link {
  color: #111827 !important;
  font-size: 0.9rem;
  font-weight: 900;
}

.public-nav-links .nav-link:hover {
  color: #7c3aed !important;
  background: transparent;
}

.public-nav-actions {
  align-items: center;
  gap: 0.65rem;
}

.public-login-link {
  padding: 0.65rem 1rem !important;
  border: 1px solid #e5e7eb;
  border-radius: 0.8rem;
  background: #fff;
}

.public-nav-primary {
  padding: 0.72rem 1.05rem !important;
  border-radius: 0.8rem;
  color: #fff !important;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 0.85rem 1.7rem rgba(124, 58, 237, 0.22);
}

.legal-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 3.5rem 1rem 4.5rem;
}

.legal-hero {
  margin-bottom: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 92% 10%, rgba(124, 58, 237, 0.14), transparent 12rem),
    linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.06);
}

.legal-hero span {
  color: #7c3aed;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-hero h1 {
  margin: 0.65rem 0;
  color: #101828;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
}

.legal-hero p {
  max-width: 760px;
  margin: 0;
  color: #667085;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.legal-card,
.legal-note {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.045);
}

.legal-card {
  padding: 1.35rem;
}

.legal-card h2 {
  margin: 0 0 0.65rem;
  color: #101828;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.legal-card p,
.legal-note {
  color: #667085;
  font-weight: 700;
  line-height: 1.7;
}

.legal-card p {
  margin: 0 0 0.8rem;
}

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

.legal-card ul {
  margin: 0.35rem 0 0.9rem;
  padding-left: 1.25rem;
  color: #667085;
  font-weight: 700;
  line-height: 1.7;
}

.legal-card li + li {
  margin-top: 0.25rem;
}

.legal-card strong {
  color: #101828;
}

.legal-note {
  margin-top: 1rem;
  padding: 1.15rem 1.35rem;
}

.legal-note strong {
  color: #101828;
}

@media (max-width: 768px) {
  .legal-page {
    padding: 2rem 0 3rem;
  }

  .legal-hero {
    padding: 1.35rem;
  }

  .legal-grid {
    grid-template-columns: 1fr;
  }
}

.pulse-page {
  overflow: hidden;
  margin-top: -1rem;
  color: #111827;
  background:
    radial-gradient(circle at 18% 4%, rgba(124, 58, 237, 0.13), transparent 28rem),
    radial-gradient(circle at 86% 7%, rgba(167, 139, 250, 0.16), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 18%, #ffffff 46%, #f8fafc 100%);
}

.pulse-page h1,
.pulse-page h2,
.pulse-page h3,
.pulse-page p {
  letter-spacing: -0.035em;
}

.pulse-hero,
.pulse-section,
.pulse-showcase,
.pulse-comparison,
.pulse-timeline,
.pulse-testimonials,
.pulse-faq,
.pulse-final-cta,
.pulse-footer,
.pulse-trust,
.pulse-integrations {
  width: min(1220px, calc(100% - 2rem));
  margin-right: auto;
  margin-left: auto;
}

.pulse-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap: 3rem;
  align-items: center;
  min-height: 720px;
  padding: 5.5rem 0 4.5rem;
}

.pulse-eyebrow,
.pulse-section-head span,
.pulse-final-cta span {
  display: inline-flex;
  margin-bottom: 1.2rem;
  color: #6d28d9;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pulse-hero h1 {
  max-width: 620px;
  margin-bottom: 1.25rem;
  color: #0b1020;
  font-size: clamp(3.4rem, 7vw, 5.9rem);
  font-weight: 900;
  line-height: 0.98;
}

.pulse-hero p {
  max-width: 560px;
  color: #667085;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.pulse-actions,
.pulse-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.pulse-actions {
  margin-top: 2rem;
}

.pulse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.35rem;
  border-radius: 0.95rem;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pulse-btn:hover {
  transform: translateY(-2px);
}

.pulse-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 1.1rem 2.4rem rgba(124, 58, 237, 0.24);
}

.pulse-btn-secondary {
  color: #111827;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.9rem 2rem rgba(15, 23, 42, 0.05);
}

.pulse-proof-row {
  margin-top: 3rem;
  color: #667085;
  font-size: 0.84rem;
  font-weight: 800;
}

.pulse-proof-row span::before {
  content: "✧";
  margin-right: 0.45rem;
  color: #7c3aed;
}

.pulse-hero-visual {
  perspective: 1400px;
}

.pulse-dashboard-mock {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2rem 6rem rgba(109, 40, 217, 0.14), 0 1rem 3rem rgba(15, 23, 42, 0.08);
  transform: rotateY(-8deg) rotateX(3deg);
  transform-origin: left center;
  animation: pulseFloat 6s ease-in-out infinite;
}

.pulse-dashboard-live-preview {
  display: block;
  grid-template-columns: none;
}

.pulse-dashboard-live-preview .mock-content {
  padding: 1.6rem;
}

@keyframes pulseFloat {
  0%, 100% { transform: rotateY(-8deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}

.mock-sidebar {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.2rem;
  border-right: 1px solid #eef2f7;
  background: #fbfaff;
}

.mock-brand {
  margin-bottom: 1rem;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 900;
}

.mock-brand i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: #7c3aed;
}

.mock-brand b {
  color: #7c3aed;
}

.mock-sidebar span {
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 900;
}

.mock-sidebar .active {
  color: #6d28d9;
  background: #f0e7ff;
}

.mock-content {
  padding: 1.45rem;
}

.mock-topbar,
.mock-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock-topbar strong {
  display: block;
  color: #111827;
  font-weight: 900;
}

.mock-topbar small,
.mock-kpis small,
.mock-channel-row small {
  color: #98a2b3;
  font-size: 0.72rem;
  font-weight: 900;
}

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.mock-kpis div,
.mock-chart-card,
.mock-channel-row div {
  border: 1px solid #eef2f7;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 0.8rem 1.8rem rgba(15, 23, 42, 0.04);
}

.mock-kpis div {
  padding: 0.9rem;
}

.mock-kpis strong {
  display: block;
  color: #111827;
  font-size: 1rem;
  font-weight: 900;
}

.mock-kpis em,
.showcase-floating small {
  color: #12b76a;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
}

.mock-chart-card {
  margin-top: 0.9rem;
  padding: 1rem;
}

.mock-card-head {
  justify-content: flex-start;
  gap: 0.75rem;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 900;
}

.mock-card-head strong {
  margin-right: auto;
  color: #111827;
  font-size: 0.82rem;
}

.mock-card-head div small {
  display: block;
  margin-bottom: 0.2rem;
  color: #98a2b3;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mock-card-head span::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  background: #8b5cf6;
}

.mock-chart,
.showcase-chart {
  position: relative;
  overflow: hidden;
  height: 190px;
  margin-top: 1rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(#eef2f7 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, #eef2f7 1px, transparent 1px) 0 0 / 14.2% 100%;
}

.mock-chart i,
.mock-chart b,
.showcase-chart i,
.showcase-chart b {
  position: absolute;
  right: -5%;
  left: -5%;
  height: 60px;
  border: solid #8b5cf6;
  border-width: 3px 0 0;
  border-radius: 50%;
}

.mock-chart i,
.showcase-chart i {
  top: 64px;
  transform: rotate(-3deg);
}

.mock-chart b,
.showcase-chart b {
  top: 112px;
  opacity: 0.45;
  transform: rotate(5deg);
}

.mock-live-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 0.7rem;
  height: 190px;
  margin-top: 1rem;
  padding: 1rem 0.8rem 0;
  border-bottom: 1px solid #e8edf5;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #eef2f7 calc(25% - 1px), #eef2f7 25%);
}

.mock-live-chart i {
  display: block;
  min-height: 1.5rem;
  border-radius: 0.55rem 0.55rem 0.18rem 0.18rem;
  background: linear-gradient(180deg, #a78bfa, #6d28d9);
  box-shadow: 0 -0.5rem 1rem rgba(124, 58, 237, 0.12);
}

.mock-live-chart-axis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.55rem;
  color: #98a2b3;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
}

.mock-channel-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.mock-channel-row div {
  padding: 0.85rem;
}

.mock-channel-row span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  margin-bottom: 0.5rem;
  border-radius: 0.7rem;
  color: #6d28d9;
  background: #f4ecff;
  font-size: 0.8rem;
  font-weight: 900;
}

.mock-channel-row strong {
  display: block;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 900;
}

.pulse-trust {
  padding: 2rem 0 4rem;
  text-align: center;
}

.pulse-trust p,
.pulse-integrations h2 {
  color: #111827;
  font-weight: 900;
}

.pulse-trust div {
  display: flex;
  flex-wrap: wrap;
  gap: 2.7rem;
  justify-content: center;
  margin-top: 1.7rem;
  color: #98a2b3;
  font-size: 1.15rem;
  font-weight: 900;
}

.pulse-section,
.pulse-showcase,
.pulse-comparison,
.pulse-timeline,
.pulse-testimonials,
.pulse-faq {
  padding: 5rem 0;
}

.pulse-section-head {
  max-width: 720px;
  margin: 0 auto 2.2rem;
  text-align: center;
}

.pulse-section-head h2,
.pulse-final-cta h2 {
  color: #101828;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
}

.pulse-section-head p,
.pulse-final-cta p {
  color: #667085;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
}

.pulse-problem-grid,
.pulse-feature-grid,
.pulse-audience-grid,
.pulse-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

.pulse-problem-grid article,
.pulse-feature-grid article,
.pulse-bento-grid article,
.pulse-audience-grid article,
.pulse-testimonial-grid article,
.pulse-compare-grid article {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.1rem 2.4rem rgba(15, 23, 42, 0.06);
}

.pulse-problem-grid article,
.pulse-feature-grid article {
  padding: 1.45rem;
}

.pulse-problem-grid div,
.pulse-feature-grid i {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 1rem;
  color: #7c3aed;
  background: #f2eaff;
  font-style: normal;
  font-weight: 900;
}

.pulse-problem-grid h3,
.pulse-feature-grid h3,
.pulse-timeline h3 {
  color: #101828;
  font-size: 1.05rem;
  font-weight: 900;
}

.pulse-problem-grid p,
.pulse-feature-grid p,
.pulse-bento-grid p,
.pulse-timeline p,
.pulse-testimonial-grid p {
  margin: 0;
  color: #667085;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -0.015em;
}

.pulse-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
  margin: 0 auto;
}

.pulse-pricing {
  padding-bottom: 5.5rem;
}

.pulse-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  max-width: 1100px;
  margin: 0 auto;
}

.pulse-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.7rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.1rem 2.4rem rgba(15, 23, 42, 0.06);
}

.pulse-pricing-card.featured {
  border-color: rgba(124, 58, 237, 0.35);
  background: linear-gradient(160deg, #f7f1ff, #ffffff 48%);
  box-shadow: 0 1.4rem 3rem rgba(124, 58, 237, 0.15);
}

.pulse-pricing-card h3 {
  margin: 0;
  color: #101828;
  font-size: 1.35rem;
  font-weight: 900;
}

.pulse-plan-summary {
  min-height: 3.2rem;
  margin: 0.75rem 0 1.25rem;
  color: #667085;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
}

.pulse-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.35rem;
  color: #667085;
}

.pulse-plan-price strong {
  color: #6d28d9;
  font-size: 2rem;
  font-weight: 900;
}

.pulse-plan-annual {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: -0.75rem 0 1.35rem;
  color: #12b76a;
  font-size: 0.85rem;
  font-weight: 750;
}

.pulse-plan-annual strong {
  color: #067647;
  font-size: 1rem;
  font-weight: 900;
}

.pulse-pricing-card ul {
  display: grid;
  gap: 0.75rem;
  min-height: 12.2rem;
  margin: 0 0 1.5rem;
  padding: 0;
  color: #475467;
  font-size: 0.9rem;
  font-weight: 750;
  list-style: none;
}

.pulse-pricing-card li::before {
  content: "✓";
  margin-right: 0.55rem;
  color: #12b76a;
  font-weight: 900;
}

.pulse-pricing-card .pulse-btn {
  width: 100%;
  margin-top: auto;
}

.pulse-credit-pricing {
  margin: 1.5rem auto 0;
  padding: 1.5rem;
  border: 1px solid #e9dfff;
  border-radius: 1.35rem;
  background: linear-gradient(135deg, #fbf8ff, #ffffff);
  max-width: 1100px;
}

.pulse-credit-intro {
  max-width: 720px;
}

.pulse-credit-intro > span {
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pulse-credit-intro h3 {
  margin: 0.45rem 0 0.55rem;
  color: #101828;
  font-size: 1.35rem;
  font-weight: 900;
}

.pulse-credit-intro p,
.pulse-credit-pricing > small {
  color: #667085;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}

.pulse-credit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.2rem 0 0.9rem;
}

.pulse-credit-grid article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e9e3f5;
  border-radius: 0.9rem;
  background: #fff;
}

.pulse-credit-grid strong {
  color: #101828;
  font-size: 0.95rem;
  font-weight: 900;
}

.pulse-credit-grid span {
  color: #6d28d9;
  font-weight: 900;
}

.pulse-plan-badge {
  display: inline-flex;
  align-self: flex-start;
  margin: -0.25rem 0 0.9rem;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  color: #6d28d9;
  background: #ede3ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pulse-contact-page {
  display: grid;
  min-height: calc(100vh - 150px);
  place-items: center;
  padding: 4rem 1rem;
  background: radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.14), transparent 25rem), #fbfaff;
}

.pulse-contact-card {
  width: min(100%, 640px);
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid #e9dfff;
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.09);
  text-align: center;
}

.pulse-contact-card > span {
  color: #6d28d9;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pulse-contact-card h1 {
  margin: 1rem 0;
  color: #101828;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
}

.pulse-contact-card p,
.pulse-contact-card small {
  display: block;
  color: #667085;
  font-weight: 700;
  line-height: 1.7;
}

.pulse-contact-card .pulse-btn {
  margin: 1.5rem auto;
}

.pulse-integrations {
  padding: 4.5rem 0;
  text-align: center;
}

.pulse-logo-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1.8rem auto 1.6rem;
  max-width: 960px;
}

.pulse-logo-cloud span {
  display: grid;
  min-width: 6.2rem;
  min-height: 4.2rem;
  place-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  color: #111827;
  background: #fff;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.06);
  font-size: 0.86rem;
  font-weight: 900;
  animation: logoFloat 5s ease-in-out infinite;
}

.pulse-logo-cloud span:nth-child(2n) {
  animation-delay: -1.7s;
}

.pulse-logo-cloud span:nth-child(3n) {
  animation-delay: -3s;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.pulse-showcase-screen {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 76% 20%, rgba(124, 58, 237, 0.13), transparent 20rem),
    linear-gradient(135deg, #ffffff, #f8f5ff);
  box-shadow: 0 2rem 5rem rgba(15, 23, 42, 0.08);
}

.showcase-dashboard-frame {
  width: min(100% - 5rem, 1040px);
  margin: 2.5rem auto;
  padding: 1.45rem;
  border: 1px solid #e7eaf0;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1.5rem 3.5rem rgba(15, 23, 42, 0.08);
}

.showcase-dashboard-head,
.showcase-dashboard-head > div,
.showcase-dashboard-chart .commerce-panel-head {
  display: flex;
  align-items: center;
}

.showcase-dashboard-head,
.showcase-dashboard-chart .commerce-panel-head {
  justify-content: space-between;
}

.showcase-dashboard-head > div {
  align-items: baseline;
  gap: 0.7rem;
}

.showcase-dashboard-head span,
.showcase-dashboard-chart .commerce-panel-head span {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 850;
}

.showcase-dashboard-head h3,
.showcase-dashboard-chart h2 {
  margin: 0;
  color: #101828;
  font-size: 1rem;
  font-weight: 900;
}

.showcase-dashboard-head > small {
  color: #98a2b3;
  font-size: 0.72rem;
  font-weight: 800;
}

.showcase-dashboard-kpis,
.showcase-dashboard-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.showcase-dashboard-kpis {
  margin-top: 1rem;
}

.showcase-dashboard-kpis .commerce-kpi-card {
  min-height: auto;
  padding: 0.9rem;
}

.showcase-dashboard-kpis .commerce-kpi-card strong {
  font-size: 1.05rem;
}

.showcase-dashboard-chart {
  margin-top: 0.9rem;
  padding: 1rem;
}

.showcase-dashboard-bars {
  min-height: 178px;
  margin-top: 0.75rem;
}

.showcase-dashboard-bars .ecommerce-chart-bar-wrap {
  min-height: 132px;
}

.showcase-dashboard-channel-grid {
  margin-top: 0.9rem;
}

.showcase-dashboard-channel-grid article {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  border: 1px solid #e7eaf0;
  border-radius: 0.85rem;
  background: #fff;
}

.showcase-dashboard-channel-grid span,
.showcase-dashboard-channel-grid small {
  color: #667085;
  font-size: 0.7rem;
  font-weight: 750;
}

.showcase-dashboard-channel-grid strong {
  color: #101828;
  font-size: 0.9rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .pulse-showcase-screen {
    min-height: auto;
    padding: 1rem 0;
  }

  .showcase-dashboard-frame {
    width: calc(100% - 2rem);
    margin: 0 auto;
    padding: 1rem;
  }

  .showcase-dashboard-kpis,
  .showcase-dashboard-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-dashboard-head > div {
    display: grid;
    gap: 0.2rem;
  }
}

.showcase-main {
  position: absolute;
  inset: 5rem 7rem 4rem;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1rem;
}

.showcase-map,
.showcase-chart {
  border: 1px solid #e5e7eb;
  border-radius: 1.35rem;
  background-color: #fff;
  box-shadow: 0 1.2rem 2.6rem rgba(15, 23, 42, 0.07);
}

.showcase-map {
  background:
    radial-gradient(circle at 32% 42%, #8b5cf6 0 0.45rem, transparent 0.5rem),
    radial-gradient(circle at 58% 38%, #a78bfa 0 0.38rem, transparent 0.44rem),
    radial-gradient(circle at 48% 62%, #7c3aed 0 0.42rem, transparent 0.5rem),
    linear-gradient(135deg, #fff, #f9fafb);
}

.showcase-floating {
  position: absolute;
  padding: 1.1rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.4rem 3rem rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(18px);
}

.showcase-floating strong,
.showcase-floating span {
  display: block;
  color: #101828;
  font-weight: 900;
}

.showcase-floating span {
  font-size: 1.5rem;
}

.showcase-card-one { top: 3rem; left: 3rem; }
.showcase-card-two { right: 3rem; bottom: 4rem; }
.showcase-card-three { bottom: 3rem; left: 7rem; max-width: 250px; }

.pulse-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.pulse-compare-grid article {
  padding: 1.8rem;
}

.pulse-compare-grid .active {
  border-color: rgba(124, 58, 237, 0.28);
  background: linear-gradient(135deg, #ffffff, #f5efff);
}

.pulse-compare-grid h3,
.pulse-bento-grid strong,
.pulse-testimonial-grid strong {
  color: #101828;
  font-size: 1.15rem;
  font-weight: 900;
}

.pulse-compare-grid p {
  margin: 0.8rem 0 0;
  color: #667085;
  font-weight: 800;
}

.pulse-compare-grid p::before {
  content: "×";
  margin-right: 0.6rem;
  color: #ef4444;
}

.pulse-compare-grid .active p::before {
  content: "✓";
  color: #12b76a;
}

.pulse-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

.pulse-bento-grid article {
  min-height: 170px;
  padding: 1.45rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.1), transparent 10rem),
    #fff;
}

.pulse-bento-grid .wide {
  grid-column: span 2;
}

.pulse-audience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pulse-audience-grid article {
  padding: 1.4rem;
  color: #101828;
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
}

.pulse-timeline-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
}

.pulse-timeline-row::before {
  content: "";
  position: absolute;
  top: 2rem;
  right: 8%;
  left: 8%;
  height: 1px;
  background: #e5e7eb;
}

.pulse-timeline-row article {
  position: relative;
  padding: 0 1rem;
  text-align: center;
}

.pulse-timeline-row span {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  margin: 0 auto 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 1.2rem;
  color: #7c3aed;
  background: #fff;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.07);
  font-weight: 900;
}

.pulse-testimonial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pulse-testimonial-grid article {
  padding: 1.45rem;
}

.pulse-testimonial-grid div {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  font-weight: 900;
}

.pulse-testimonial-grid p {
  margin-bottom: 1.1rem;
  color: #101828;
  font-size: 1rem;
}

.pulse-testimonial-grid span {
  display: block;
  color: #667085;
  font-size: 0.88rem;
  font-weight: 800;
}

.pulse-accordion {
  max-width: 820px;
  margin: 0 auto;
}

.pulse-accordion .accordion-item {
  overflow: hidden;
  margin-bottom: 0.8rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.04);
}

.pulse-accordion .accordion-button {
  color: #101828;
  background: #fff;
  font-weight: 900;
}

.pulse-accordion .accordion-button:not(.collapsed) {
  color: #6d28d9;
  background: #fbf8ff;
}

.pulse-accordion .accordion-body {
  color: #667085;
  font-weight: 700;
}

.pulse-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.8fr);
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
  padding: 3rem;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 83% 24%, rgba(124, 58, 237, 0.18), transparent 18rem),
    linear-gradient(135deg, #f1e9ff, #ffffff);
}

.pulse-orbit {
  position: relative;
  min-height: 260px;
}

.pulse-orbit b,
.pulse-orbit i {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.12);
}

.pulse-orbit b {
  inset: 50% auto auto 50%;
  width: 5rem;
  height: 5rem;
  color: #fff;
  background: #7c3aed;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

.pulse-orbit i {
  width: 3.7rem;
  height: 3.7rem;
  color: #6d28d9;
  background: #fff;
  font-style: normal;
  font-weight: 900;
}

.pulse-orbit i:nth-child(1) { top: 1rem; left: 28%; }
.pulse-orbit i:nth-child(2) { top: 1.5rem; right: 22%; }
.pulse-orbit i:nth-child(3) { right: 6%; top: 45%; }
.pulse-orbit i:nth-child(4) { bottom: 1rem; right: 30%; }
.pulse-orbit i:nth-child(5) { bottom: 1.5rem; left: 18%; }

.pulse-footer {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 0.75fr);
  gap: 2rem;
  padding: 3.5rem 0 2rem;
}

.pulse-footer strong {
  color: #101828;
  font-size: 1.1rem;
  font-weight: 900;
}

.pulse-footer p,
.pulse-footer a {
  display: block;
  max-width: 330px;
  margin-top: 0.7rem;
  color: #667085;
  font-size: 0.9rem;
  font-weight: 800;
}

.pulse-footer b {
  color: #101828;
  font-weight: 900;
}

.pulse-auth-shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.68fr);
  gap: 1.25rem;
  min-height: calc(100vh - 150px);
}

.pulse-auth-hero {
  isolation: isolate;
  align-items: stretch;
  padding: 0;
  color: #101828;
  border: 1px solid rgba(226, 232, 240, 0.82);
  background:
    radial-gradient(circle at 18% 16%, rgba(124, 58, 237, 0.18), transparent 21rem),
    radial-gradient(circle at 85% 15%, rgba(167, 139, 250, 0.16), transparent 18rem),
    linear-gradient(135deg, #ffffff, #faf7ff 52%, #f8fafc);
}

.pulse-auth-hero::after {
  z-index: -1;
  inset: auto -4rem -8rem auto;
  width: 23rem;
  height: 23rem;
  background: rgba(124, 58, 237, 0.09);
}

.pulse-auth-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 3rem;
}

.pulse-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  padding: 0.35rem;
  border: 1px solid #ede9fe;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.04);
}

.pulse-auth-brand .pulse-brand-logo {
  width: 14rem;
}

.pulse-auth-brand span,
.pulse-auth-logo span {
  display: grid;
  place-items: center;
  color: #7c3aed;
  background: #f2eaff;
}

.pulse-auth-brand span {
  width: 2rem;
  height: 2rem;
  border-radius: 0.8rem;
  font-size: 1.25rem;
}

.pulse-auth-brand strong {
  color: #101828;
  font-weight: 900;
}

.pulse-auth-brand b {
  color: #7c3aed;
}

.pulse-auth-copy h1 {
  max-width: 720px;
  margin: 2.4rem 0 1rem;
  color: #0b1020;
  font-size: clamp(3rem, 5.5vw, 5.35rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.pulse-auth-copy p {
  max-width: 620px;
  color: #667085;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.pulse-auth-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.58fr);
  gap: 1rem;
  margin: 2.3rem 0 1.25rem;
}

.preview-card-large,
.preview-card-stack div,
.pulse-google-note {
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1.2rem 2.7rem rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px);
}

.preview-card-large {
  min-height: 170px;
  padding: 1.35rem;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 90% 8%, rgba(124, 58, 237, 0.12), transparent 10rem),
    rgba(255, 255, 255, 0.88);
}

.preview-card-large small,
.preview-card-large span,
.preview-card-stack span {
  display: block;
  color: #98a2b3;
  font-size: 0.8rem;
  font-weight: 900;
}

.preview-card-large strong {
  display: block;
  margin: 1.1rem 0 0.25rem;
  color: #101828;
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.preview-card-stack {
  display: grid;
  gap: 0.75rem;
}

.preview-card-stack div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 1rem;
}

.preview-card-stack strong {
  color: #12b76a;
  font-size: 0.86rem;
  font-weight: 900;
}

.pulse-auth-stats div {
  border-color: rgba(124, 58, 237, 0.11);
  background: rgba(255, 255, 255, 0.72);
}

.pulse-auth-stats strong {
  color: #101828;
  font-size: 1.25rem;
}

.pulse-auth-stats span {
  color: #667085;
}

.pulse-auth-card {
  position: relative;
  overflow: hidden;
  align-self: center;
  padding: 2rem;
  border-color: rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.1), transparent 12rem),
    rgba(255, 255, 255, 0.92);
}

.pulse-auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.pulse-auth-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}

.pulse-auth-logo span {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  font-size: 1.55rem;
  box-shadow: 0 1rem 2rem rgba(124, 58, 237, 0.14);
}

.pulse-auth-logo .pulse-brand-logo {
  width: 7.5rem;
  box-shadow: 0 1rem 2rem rgba(124, 58, 237, 0.14);
}

.pulse-auth-card h1 {
  margin: 0.25rem 0;
  color: #101828;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.pulse-auth-card p {
  margin: 0;
  color: #667085;
  font-weight: 700;
}

.pulse-login-form {
  position: relative;
  z-index: 1;
}

.pulse-login-form .form-label {
  color: #344054;
  font-size: 0.9rem;
  font-weight: 900;
}

.pulse-auth-input {
  min-height: 3.35rem;
  border-color: #e5e7eb;
  background: rgba(255, 255, 255, 0.92);
  font-weight: 800;
}

.pulse-auth-input:focus {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.1);
}

.pulse-auth-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.35rem 0 1.35rem;
  color: #667085;
  font-size: 0.86rem;
  font-weight: 800;
}

.pulse-auth-options .form-check-label {
  color: #344054;
  font-weight: 900;
}

.pulse-auth-options span {
  color: #7c3aed;
}

.pulse-auth-options a {
  color: #7c3aed;
  font-weight: 900;
}

.pulse-auth-submit {
  min-height: 3.35rem;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 1.1rem 2.4rem rgba(124, 58, 237, 0.24);
}

.pulse-google-note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 1rem;
}

.pulse-google-note div {
  display: grid;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 0.8rem;
  color: #7c3aed;
  background: #f2eaff;
  font-weight: 900;
}

.pulse-google-note p {
  color: #667085;
  font-size: 0.83rem;
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  .pulse-auth-shell {
    grid-template-columns: 1fr;
  }

  .pulse-auth-card {
    width: min(100%, 520px);
    margin: 2rem auto;
  }
}

@media (max-width: 1199.98px) {
  .pulse-hero {
    grid-template-columns: 1fr;
  }

  .pulse-dashboard-mock {
    transform: none;
  }

  .pulse-problem-grid,
  .pulse-feature-grid,
  .pulse-bento-grid,
  .pulse-pricing-grid,
  .pulse-credit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .public-navbar {
    padding: 0.85rem 1rem;
  }

  .public-nav-links {
    align-items: flex-start;
    padding-top: 1rem;
  }

  .pulse-hero {
    min-height: auto;
    padding-top: 4rem;
  }

  .pulse-dashboard-mock,
  .mock-kpis,
  .mock-channel-row,
  .pulse-final-cta,
  .pulse-footer,
  .showcase-main,
  .pulse-compare-grid,
  .pulse-audience-grid,
  .pulse-testimonial-grid,
  .pulse-timeline-row {
    grid-template-columns: 1fr;
  }

  .mock-sidebar {
    display: none;
  }

  .showcase-main {
    inset: 6rem 1rem 6rem;
  }

  .pulse-timeline-row::before {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .pulse-hero h1 {
    font-size: 3rem;
  }

  .pulse-section,
  .pulse-showcase,
  .pulse-comparison,
  .pulse-timeline,
  .pulse-testimonials,
  .pulse-faq {
    padding: 3.25rem 0;
  }

  .pulse-problem-grid,
  .pulse-feature-grid,
  .pulse-bento-grid,
  .pulse-pricing-grid,
  .pulse-credit-grid {
    grid-template-columns: 1fr;
  }

  .pulse-bento-grid .wide {
    grid-column: auto;
  }

  .pulse-final-cta {
    padding: 1.5rem;
  }
}

.app-body {
  margin-bottom: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
}

.app-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  height: 100vh;
  overflow-y: auto;
  padding: 1.25rem;
  border-right: 1px solid rgba(226, 232, 240, 0.86);
  background:
    radial-gradient(circle at 18% 10%, rgba(124, 58, 237, 0.15), transparent 15rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 1.4rem 0 4rem rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
}

.app-mobile-menu-toggle,
.app-mobile-menu-close,
.app-mobile-menu-backdrop {
  display: none;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.35rem 0.85rem;
  color: #101828;
}

.app-sidebar-brand .pulse-brand-logo {
  width: 12rem;
  box-shadow: 0 1rem 2rem rgba(124, 58, 237, 0.12);
}

.app-sidebar-brand:hover {
  color: #6d28d9;
}

.brand-pulse-mark {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 0.9rem;
  color: #7c3aed;
  background: #f2eaff;
  font-size: 1.3rem;
  font-weight: 900;
  box-shadow: 0 1rem 2rem rgba(124, 58, 237, 0.12);
}

.app-sidebar-brand strong {
  font-weight: 900;
}

.app-sidebar-brand b {
  color: #7c3aed;
}

.app-sidebar-section {
  display: grid;
  gap: 0.75rem;
}

.app-sidebar-section > span {
  padding: 0 0.75rem;
  color: #98a2b3;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.app-sidebar-nav {
  display: grid;
  gap: 0.4rem;
}

.app-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 3rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: #667085;
  font-weight: 900;
}

.app-sidebar-nav a:hover,
.app-sidebar-nav a.active {
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.12);
  background: #f4ecff;
  box-shadow: 0 0.8rem 1.8rem rgba(124, 58, 237, 0.08);
}

.app-sidebar-nav i {
  display: grid;
  flex: 0 0 auto;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  border-radius: 0.7rem;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.09);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.app-sidebar-nav a.active i,
.app-sidebar-nav a:hover i {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.app-sidebar-menu-group {
  display: grid;
  gap: 0.45rem;
}

.app-sidebar-menu-parent {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: transparent;
  color: #667085;
  text-align: left;
  font-weight: 900;
}

.app-sidebar-menu-toggle {
  cursor: pointer;
}

.app-sidebar-menu-toggle:hover,
.app-sidebar-menu-toggle[aria-expanded="true"] {
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.12);
  background: #f4ecff;
}

.app-sidebar-menu-parent i {
  display: grid;
  flex: 0 0 auto;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  border-radius: 0.7rem;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.09);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.app-sidebar-menu-toggle b {
  margin-left: auto;
  color: currentColor;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.app-sidebar-menu-toggle[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.app-sidebar-submenu {
  display: grid;
  gap: 0.15rem;
  margin-left: 1.72rem;
  padding-left: 1.05rem;
  border-left: 1px solid rgba(124, 58, 237, 0.16);
}

.app-sidebar-submenu span {
  padding: 0.3rem 0;
  color: #7b8494;
  font-size: 0.82rem;
  font-weight: 800;
}

.app-sidebar-submenu-parent {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.38rem 0.45rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: #667085;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 900;
}

.app-sidebar-submenu-parent i {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 0.55rem;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.09);
  font-size: 0.62rem;
  font-style: normal;
}

.app-sidebar-submenu-nested {
  margin-left: 1rem;
}

.app-sidebar-submenu-nested a {
  padding: 0.3rem 0;
  color: #7b8494;
  font-size: 0.82rem;
  font-weight: 800;
}

.app-sidebar-submenu-nested a:hover { color: #6d28d9; }

.content-calendar-legend { display: flex; flex-wrap: wrap; gap: 1rem; color: #fff; font-size: 0.85rem; font-weight: 800; }
.content-calendar-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.content-calendar-legend i { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.content-calendar-legend .published { background: #22a06b; }
.content-calendar-legend .scheduled { background: #eab308; }

.content-calendar-card { overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 1.4rem; background: #fff; box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.06); }
.content-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid #edf0f4; }
.content-calendar-toolbar h2 { margin: 0; color: #1d2939; font-size: 1.15rem; font-weight: 900; text-transform: capitalize; }
.content-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.content-calendar-weekday { padding: 0.75rem; border-bottom: 1px solid #edf0f4; color: #98a2b3; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.content-calendar-day { display: flex; min-height: 8.8rem; flex-direction: column; gap: 0.35rem; padding: 0.55rem; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.content-calendar-day:nth-child(7n) { border-right: 0; }
.content-calendar-day.is-empty { background: #fafbfc; }
.content-calendar-date { color: #475467; font-size: 0.78rem; font-weight: 900; }
.content-calendar-item { display: grid; gap: 0.16rem; width: 100%; padding: 0.45rem; border: 1px solid #b7e5c8; border-radius: 0.7rem; background: #e8f8ee; color: #146c43; cursor: pointer; text-align: left; }
.content-calendar-item:hover { border-color: #22a06b; box-shadow: 0 0.45rem 1rem rgba(34, 160, 107, 0.14); }
.content-calendar-item.is-scheduled { border-color: #f4d36a; background: #fff8db; color: #9a6700; }
.content-calendar-item.is-scheduled:hover { border-color: #eab308; box-shadow: 0 0.45rem 1rem rgba(234, 179, 8, 0.14); }
.content-calendar-item span { font-size: 0.66rem; font-weight: 800; }
.content-calendar-item strong { display: -webkit-box; overflow: hidden; font-size: 0.72rem; font-weight: 900; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.content-calendar-modal[hidden] { display: none; }
.content-calendar-modal { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(16, 24, 40, 0.55); }
.content-calendar-modal-card { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 1.1fr); width: min(100%, 50rem); max-height: min(42rem, calc(100vh - 2rem)); overflow: auto; border-radius: 1.25rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28); }
.content-calendar-modal-media { display: grid; min-height: 18rem; place-items: center; background: #f2f4f7; }
.content-calendar-modal-media img { width: 100%; height: 100%; max-height: 38rem; object-fit: cover; }
.content-calendar-modal-copy { display: grid; align-content: start; gap: 0.85rem; padding: 2.4rem 1.5rem 1.5rem; }
.content-calendar-modal-copy h2, .content-calendar-modal-copy p { margin: 0; }
.content-calendar-modal-meta { display: grid; gap: 0.45rem; color: #667085; font-size: 0.86rem; }
.content-calendar-modal-close { position: absolute; z-index: 1; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #fff; color: #344054; font-size: 1.25rem; }

.new-content-form { display: grid; gap: 1rem; }
.new-content-card { padding: 1.35rem; border: 1px solid #e7eaf0; border-radius: 1.25rem; background: #fff; box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.05); }
.new-content-section-head { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.2rem; }
.new-content-section-head > span { display: grid; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 0.7rem; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); font-size: 0.74rem; font-weight: 900; }
.new-content-section-head h2, .new-content-section-head p { margin: 0; }
.new-content-section-head h2 { color: #1d2939; font-size: 1.05rem; font-weight: 900; }
.new-content-section-head p, .new-content-card small { color: #667085; font-size: 0.86rem; }
.new-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.new-content-grid label, .new-content-date { display: grid; gap: 0.45rem; color: #344054; font-size: 0.84rem; font-weight: 900; }
.new-content-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.new-content-ai-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.36rem 0.6rem; border: 1px solid #d8ccff; border-radius: 0.65rem; background: #f5f3ff; color: #6d28d9; font-size: 0.74rem; font-weight: 900; opacity: 0.75; }
.new-content-ai-button.is-available { cursor: pointer; opacity: 1; }
.new-content-ai-button b { padding: 0.08rem 0.25rem; border-radius: 0.28rem; background: #6d28d9; color: #fff; font-size: 0.6rem; letter-spacing: 0.05em; }
.new-content-full { grid-column: 1 / -1; }
.new-content-options, .new-content-types, .new-content-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.new-content-check, .new-content-types label { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.9rem; border: 1px solid #e4e7ec; border-radius: 0.9rem; cursor: pointer; }
.new-content-check span { display: grid; }
.new-content-check small { font-size: 0.75rem; }
.new-content-types { margin-top: 0.9rem; }
.new-content-types input { position: absolute; opacity: 0; }
.new-content-types label:has(input:checked) { border-color: #8b5cf6; background: #f4ecff; color: #6d28d9; }
.new-content-date { max-width: 22rem; }
.new-content-schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); gap: 1rem; }
.new-content-format-note, .new-content-active-times { display: grid; gap: 0.2rem; margin-top: 1rem; padding: 0.8rem 0.9rem; border-radius: 0.9rem; background: #f5f3ff; color: #5b21b6; font-size: 0.84rem; }
.new-content-format-note span, .new-content-active-times span { color: #667085; }
.new-content-dropzone { display: grid; min-height: 10rem; place-items: center; gap: 0.35rem; padding: 1.25rem; border: 2px dashed #c4b5fd; border-radius: 1rem; background: #faf8ff; color: #5b21b6; cursor: pointer; text-align: center; }
.new-content-dropzone:hover, .new-content-dropzone.is-dragging { border-color: #7c3aed; background: #f3eeff; }
.new-content-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.new-content-dropzone strong { font-size: 0.95rem; font-weight: 900; }
.new-content-dropzone span, .new-content-dropzone small { color: #667085; font-size: 0.82rem; }
.new-content-copyright { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: 1rem; color: #475467; font-size: 0.86rem; }
.new-content-actions { margin-top: 1.2rem; }
.new-content-action-note { margin: 0.85rem 0 0; color: #667085; font-size: 0.85rem; }
.social-content-list-card { overflow: hidden; border: 1px solid #e7eaf0; border-radius: 1.25rem; background: #fff; box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.05); }
.social-content-list-card > header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #eef0f4; color: #667085; font-size: 0.85rem; font-weight: 800; }
.social-content-status { padding: 0.35rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 900; }
.social-content-status-taslak { color: #475467; background: #eaecf0; }
.social-content-status-planlandı { color: #9a6700; background: #fff8db; }
.social-content-status-yayınlandı { color: #146c43; background: #e8f8ee; }
.social-content-status-başarısız { color: #b42318; background: #ffebe9; }
.social-content-empty { display: grid; place-items: center; gap: 0.6rem; min-height: 16rem; padding: 2rem; text-align: center; }
.social-content-empty strong { color: #1d2939; font-size: 1.05rem; }
.social-content-empty p { max-width: 30rem; margin: 0; color: #667085; }
.analytics-channel-detail summary { cursor: pointer; list-style: none; }
.analytics-channel-detail summary::-webkit-details-marker { display: none; }
.analytics-channel-detail summary::after { content: "⌄"; margin-left: auto; color: #7c3aed; font-size: 1rem; }
.analytics-channel-detail[open] summary::after { transform: rotate(180deg); }
.analytics-channel-extra { display: grid; grid-template-columns: 1fr auto; gap: 0.55rem 1rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid #eef0f4; color: #667085; font-size: 0.84rem; }
.analytics-channel-extra strong { color: #344054; text-align: right; }
.analytics-channel-extra small { grid-column: 1 / -1; color: #98a2b3; }
.analytics-channel-order-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 0.45rem 1rem; padding-top: 0.2rem; }
.analytics-channel-order-list span { color: #475467; }
.analytics-channel-order-list small { margin-left: 0.35rem; }
.nav-new-badge, .analytics-new-badge { display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 0.12rem 0.38rem; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; vertical-align: middle; }
.analytics-new-badge { background: #dcfae6; color: #087443; }
.youtube-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.pdf-export-button,
.app-content .filter-panel .pdf-export-button {
  color: #5b21b6 !important;
  border: 1px solid #c4b5fd !important;
  background: #ffffff !important;
  box-shadow: 0 0.45rem 1rem rgba(76, 29, 149, 0.16);
}
.pdf-export-button:hover,
.pdf-export-button:focus,
.app-content .filter-panel .pdf-export-button:hover,
.app-content .filter-panel .pdf-export-button:focus {
  color: #ffffff !important;
  border-color: #6d28d9 !important;
  background: #6d28d9 !important;
}
.youtube-channel-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1.15rem; padding: 1.15rem; border: 1px solid #e7eaf0; border-radius: 1.15rem; background: linear-gradient(135deg, #fff 0%, #fff7f7 100%); }
.youtube-channel-profile > img { width: 5.25rem; height: 5.25rem; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.12); object-fit: cover; }
.youtube-channel-profile h2, .youtube-channel-profile p { margin: 0; }
.youtube-channel-profile h2 { color: #1d2939; font-size: 1.25rem; font-weight: 900; }
.youtube-channel-profile > div:nth-child(2) > span { display: block; margin: 0.12rem 0 0.4rem; color: #667085; font-size: 0.84rem; font-weight: 800; }
.youtube-channel-profile p { display: -webkit-box; overflow: hidden; max-width: 50rem; color: #667085; font-size: 0.84rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.youtube-channel-profile-stats { display: grid; justify-items: end; gap: 0.15rem; text-align: right; }
.youtube-channel-profile-stats strong { color: #b42318; font-size: 1.25rem; }
.youtube-channel-profile-stats span { color: #667085; font-size: 0.78rem; font-weight: 800; }
.youtube-channel-profile-stats a { margin-top: 0.35rem; color: #b42318; font-size: 0.8rem; font-weight: 900; text-decoration: none; }
.youtube-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.youtube-video-card { display: grid; overflow: hidden; border: 1px solid #e7eaf0; border-radius: 1rem; background: #fff; color: inherit; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.youtube-video-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 0.9rem 1.8rem rgba(15, 23, 42, 0.1); }
.youtube-video-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #101828; }
.youtube-video-media img { width: 100%; height: 100%; object-fit: cover; }
.youtube-video-media span { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.22rem 0.45rem; border-radius: 0.45rem; background: rgba(16, 24, 40, 0.82); color: #fff; font-size: 0.7rem; font-weight: 900; }
.youtube-video-copy { display: grid; gap: 0.3rem; padding: 0.85rem 0.9rem 0.65rem; }
.youtube-video-copy strong { display: -webkit-box; min-height: 2.7rem; overflow: hidden; color: #1d2939; font-size: 0.9rem; font-weight: 900; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.youtube-video-copy small { color: #98a2b3; font-size: 0.75rem; }
.youtube-video-metrics { display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; padding: 0 0.9rem 0.9rem; color: #667085; font-size: 0.74rem; }
.youtube-video-metrics b { margin-left: 0.2rem; color: #344054; }
.youtube-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #eaecf0; color: #667085; font-size: 0.84rem; font-weight: 800; text-align: center; }
.youtube-pagination a:last-child { justify-self: end; }

@media (max-width: 767.98px) {
  .youtube-channel-profile { grid-template-columns: auto minmax(0, 1fr); }
  .youtube-channel-profile-stats { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .content-calendar-toolbar { align-items: stretch; flex-direction: column; }
  .content-calendar-day { min-height: 6.3rem; padding: 0.35rem; }
  .content-calendar-weekday { padding: 0.45rem 0.15rem; font-size: 0.62rem; }
  .content-calendar-item { padding: 0.3rem; }
  .content-calendar-item strong { font-size: 0.62rem; }
  .content-calendar-modal-card { grid-template-columns: 1fr; }
  .new-content-grid { grid-template-columns: 1fr; }
  .new-content-full { grid-column: auto; }
  .new-content-schedule-grid { grid-template-columns: 1fr; }
}

.app-company-switcher {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.05);
}

.app-company-switcher label {
  color: #98a2b3;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-company-switcher select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 0.9rem;
  color: #101828;
  background: #fff;
  font-weight: 900;
}

.app-user-card {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.06);
}

.app-user-card small {
  color: #98a2b3;
  font-weight: 900;
}

.app-user-card strong {
  overflow: hidden;
  color: #101828;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-plan-pill {
  width: fit-content;
  padding: 0.36rem 0.62rem;
  border-radius: 999px;
  color: #6d28d9;
  background: #f4ecff;
  font-size: 0.76rem;
  font-weight: 900;
}

.app-user-card button {
  width: fit-content;
  padding: 0;
  border: 0;
  color: #7c3aed;
  background: transparent;
  font-weight: 900;
}

.app-main {
  min-width: 0;
}

.app-topbar {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
  padding: 1rem 1.7rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.74);
  background: rgba(248, 251, 255, 0.82);
  backdrop-filter: blur(18px);
}

.app-topbar span {
  display: block;
  color: #98a2b3;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-topbar strong {
  display: block;
  color: #101828;
  font-size: 1.05rem;
  font-weight: 900;
}

.app-topbar a {
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 999px;
  color: #6d28d9;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.86rem;
  font-weight: 900;
}

.app-ai-credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.68rem;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #f5efff, #fff);
  cursor: help;
}

.app-topbar .app-action-icon {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: 0.48rem;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  font-size: 0.86rem;
  font-weight: 900;
}

.app-topbar .app-ai-credit strong {
  color: #4c1d95;
  font-size: 0.9rem;
  line-height: 1.2;
}

.app-topbar .app-topbar-icon-link,
.app-topbar .app-topbar-icon-button {
  position: relative;
  display: grid !important;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 0.85rem;
  color: #6d28d9;
  background: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  line-height: 1;
}

.app-topbar .app-topbar-icon-button {
  cursor: pointer;
}

.app-topbar .app-calendar-link {
  animation: calendarAttention 1.8s ease-in-out infinite;
}

@keyframes calendarAttention {
  0%, 100% { border-color: rgba(124, 58, 237, 0.14); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); transform: translateY(0); }
  50% { border-color: rgba(124, 58, 237, 0.48); box-shadow: 0 0 0 0.35rem rgba(124, 58, 237, 0.12); transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .app-topbar .app-calendar-link { animation: none; }
}

.app-topbar-actions [data-tooltip]::after {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.55rem);
  right: 0;
  padding: 0.42rem 0.62rem;
  border-radius: 0.5rem;
  color: #fff;
  background: #1f2937;
  box-shadow: 0 0.6rem 1.4rem rgba(15, 23, 42, 0.16);
  content: attr(data-tooltip);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.2rem);
  transition: opacity 150ms ease, transform 150ms ease;
}

.app-topbar-actions [data-tooltip]:hover::after,
.app-topbar-actions [data-tooltip]:focus::after,
.app-topbar-actions [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.app-content {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 1.55rem;
}

.app-content .dashboard-shell {
  padding-bottom: 1rem;
}

.recommendation-status-panel { position: relative; z-index: 1; min-width: 9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.25); border-radius: 1rem; background: rgba(255,255,255,.12); text-align: center; }
.recommendation-status-panel span { display: block; color: rgba(255,255,255,.72); font-size: .75rem; font-weight: 700; }
.recommendation-status-panel strong { display: block; margin-top: .2rem; color: #fff; font-size: 1.08rem; }
.recommendation-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.recommendation-metric-grid article, .rule-safety-grid > div { padding: 1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 .55rem 1.3rem rgba(15,23,42,.05); }
.recommendation-metric-grid span, .recommendation-metric-grid small, .rule-safety-grid span { display: block; color: #64748b; font-size: .76rem; }
.recommendation-metric-grid strong { display: block; margin: .32rem 0; color: #1e293b; font-size: 1.12rem; }
.rule-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.rule-card { padding: 1.1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; }
.rule-card-head { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.rule-card-head span { padding: .28rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.rule-card-head small { color: #64748b; font-weight: 700; }
.rule-card h3 { margin: .85rem 0; color: #1e293b; font-size: 1rem; font-weight: 800; }
.rule-card-row { padding-top: .7rem; border-top: 1px solid #edf2f7; }
.rule-card-row + .rule-card-row { margin-top: .7rem; }
.rule-card-row span, .rule-card-row strong { display: block; }
.rule-card-row span { margin-bottom: .18rem; color: #64748b; font-size: .72rem; font-weight: 700; }
.rule-card-row strong { color: #334155; font-size: .83rem; line-height: 1.45; }
.rule-state-danger { color: #b91c1c; background: #fee2e2; }
.rule-state-warning { color: #b45309; background: #fef3c7; }
.rule-state-neutral { color: #475569; background: #e2e8f0; }
.rule-state-success { color: #047857; background: #d1fae5; }
.rule-safety-panel { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(24rem, 1.2fr); gap: 1.5rem; align-items: center; padding: 1.35rem; border: 1px solid #c7d2fe; border-radius: 1.2rem; background: #f8faff; }
.rule-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rule-safety-grid strong { display: block; margin-top: .25rem; color: #312e81; font-size: .92rem; }

@media (max-width: 767.98px) {
  .recommendation-metric-grid, .rule-safety-panel { grid-template-columns: 1fr; }
}

.app-content .dashboard-command,
.app-content .dashboard-hero {
  border-radius: 1.6rem;
}

.app-content .dashboard-shell {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.72);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 88% 4%, rgba(124, 58, 237, 0.1), transparent 18rem),
    radial-gradient(circle at 8% 22%, rgba(37, 99, 235, 0.08), transparent 16rem),
    #fbfaff;
}

.ecommerce-calendar {
  display: grid;
  gap: 1.25rem;
}

.calendar-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.45rem, 4vw, 2.25rem);
  border-radius: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, #34206d, #6d28d9 60%, #8b5cf6);
  box-shadow: 0 1.2rem 2.8rem rgba(91, 33, 182, 0.2);
}

.calendar-command > div:first-child {
  max-width: 760px;
}

.calendar-command > div:first-child > span,
.calendar-focus-row span {
  display: block;
  margin-bottom: 0.45rem;
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calendar-command h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 900;
}

.calendar-command p {
  max-width: 680px;
  margin: 0.65rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 650;
  line-height: 1.6;
}

.calendar-command-badge {
  display: grid;
  min-width: 8.5rem;
  place-items: center;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
}

.calendar-command-badge i { font-size: 1.35rem; font-style: normal; }
.calendar-command-badge strong { font-size: 1.55rem; font-weight: 900; }
.calendar-command-badge small { color: #ddd6fe; font-weight: 800; }

.calendar-year-chart {
  padding: 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.8rem 2rem rgba(15, 23, 42, 0.05);
}

.calendar-year-chart > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.calendar-year-chart header span {
  display: block;
  color: #7c3aed;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-year-chart h2 { margin: 0.25rem 0 0; color: #101828; font-size: 1.1rem; font-weight: 900; }
.calendar-year-chart header small { max-width: 350px; color: #667085; font-size: 0.76rem; font-weight: 650; line-height: 1.45; text-align: right; }

.calendar-chart-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: end;
  min-height: 190px;
  padding: 1.15rem 0.35rem 0;
  border-bottom: 1px solid #e4e7ec;
  background: linear-gradient(#f5f3ff 1px, transparent 1px) bottom / 100% 33.33%;
}

.calendar-chart-bar {
  display: grid;
  grid-template-rows: auto 142px auto;
  gap: 0.4rem;
  align-items: end;
  min-width: 0;
  text-align: center;
}

.calendar-chart-bar strong { color: #475467; font-size: 0.72rem; font-weight: 900; }
.calendar-chart-bar i { display: block; width: min(100%, 2.4rem); min-height: 0.55rem; margin: 0 auto; border-radius: 0.55rem 0.55rem 0.12rem 0.12rem; background: linear-gradient(180deg, #a78bfa, #6d28d9); box-shadow: 0 -0.4rem 0.8rem rgba(124, 58, 237, 0.12); }
.calendar-chart-bar:nth-child(11) i { background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 -0.4rem 0.8rem rgba(217, 119, 6, 0.16); }
.calendar-chart-bar span { color: #667085; font-size: 0.7rem; font-weight: 850; }

.calendar-focus-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.calendar-focus-row article,
.calendar-month-card {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.8rem 2rem rgba(15, 23, 42, 0.05);
}

.calendar-focus-row article { padding: 1.15rem 1.25rem; }
.calendar-focus-row span { color: #7c3aed; }
.calendar-focus-row strong,
.calendar-focus-row small { display: block; }
.calendar-focus-row strong { color: #101828; font-size: 1rem; font-weight: 900; }
.calendar-focus-row small { margin-top: 0.35rem; color: #667085; font-weight: 650; line-height: 1.5; }

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.calendar-month-card { overflow: hidden; }

.calendar-month-card > header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(135deg, #fcfaff, #f6f2ff);
}

.calendar-month-card > header > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.65rem;
  color: #fff;
  background: #7c3aed;
  font-size: 0.75rem;
  font-weight: 900;
}

.calendar-month-card h2 { margin: 0; color: #101828; font-size: 1.05rem; font-weight: 900; }
.calendar-month-card > header small { margin-left: auto; color: #98a2b3; font-size: 0.72rem; font-weight: 800; }

.calendar-event-list { display: grid; padding: 0.35rem 1.15rem 0.75rem; }

.calendar-event {
  position: relative;
  display: grid;
  gap: 0.28rem;
  padding: 0.85rem 0 0.85rem 0.7rem;
  border-bottom: 1px solid #f0f2f5;
}

.calendar-event:last-child { border-bottom: 0; }
.calendar-event::before { content: ""; position: absolute; top: 1.05rem; left: 0; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #8b5cf6; }
.calendar-event strong { color: #344054; font-size: 0.86rem; font-weight: 850; line-height: 1.4; }
.calendar-priority { color: #f59e0b; font-size: 0.72rem; letter-spacing: 0.02em; }
.calendar-event small { display: flex; gap: 0.35rem; color: #667085; font-size: 0.75rem; font-weight: 650; }
.calendar-event small b { color: #475467; font-weight: 850; }

.ai-settings-page {
  display: grid;
  gap: 1rem;
}

.ai-settings-intro {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 1rem;
  color: #5b21b6;
  background: #f7f3ff;
}

.ai-settings-intro span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.65rem;
  color: #fff;
  background: #7c3aed;
  font-weight: 900;
}

.ai-settings-intro p {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.55;
}

.ai-settings-section {
  margin-top: 1rem;
}

.ai-settings-guardrails {
  border-color: rgba(217, 119, 6, 0.2);
}

.platform-admin-page { display: grid; gap: 1rem; }

.platform-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.platform-admin-summary article,
.platform-admin-roadmap article {
  padding: 1.2rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.8rem 2rem rgba(15, 23, 42, 0.05);
}

.platform-admin-summary span,
.platform-admin-roadmap span {
  display: block;
  color: #7c3aed;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platform-admin-summary strong { display: block; margin: 0.35rem 0; color: #101828; font-size: 2rem; font-weight: 900; }
.platform-admin-summary small { color: #667085; font-weight: 650; }
.platform-admin-table-card { margin-top: 0.25rem; }
.platform-admin-table td > strong,
.platform-admin-table td > small { display: block; }
.platform-admin-table td > small { margin-top: 0.2rem; color: #667085; font-size: 0.75rem; }
.platform-admin-plan,
.platform-admin-status { display: inline-flex; padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 850; }
.platform-admin-plan { color: #5b21b6; background: #f0e7ff; }
.platform-admin-status.active { color: #027a48; background: #ecfdf3; }
.platform-admin-status.trial { color: #b54708; background: #fffaeb; }

.platform-admin-roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.platform-admin-roadmap h2 { margin: 0.5rem 0; color: #101828; font-size: 1rem; font-weight: 900; }
.platform-admin-roadmap p { margin: 0; color: #667085; font-size: 0.86rem; font-weight: 650; line-height: 1.55; }

@media (max-width: 1199.98px) {
  .calendar-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .calendar-command,
  .calendar-focus-row { grid-template-columns: 1fr; }

  .calendar-command { display: grid; }
  .calendar-command-badge { justify-self: start; }
  .calendar-year-chart > header { display: grid; align-items: start; }
  .calendar-year-chart header small { text-align: left; }
  .calendar-chart-bars { gap: 0.3rem; }
  .calendar-chart-bar { grid-template-rows: auto 118px auto; }
  .platform-admin-summary,
  .platform-admin-roadmap { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .calendar-month-grid { grid-template-columns: 1fr; }
  .calendar-command { padding: 1.35rem; }
}

.app-content .dashboard-command {
  min-height: 20rem;
  padding: 3rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #0b1020;
  background:
    radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.18), transparent 18rem),
    radial-gradient(circle at 18% 110%, rgba(37, 99, 235, 0.12), transparent 20rem),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 2rem 6rem rgba(109, 40, 217, 0.12), 0 1rem 3rem rgba(15, 23, 42, 0.06);
}

.app-content .dashboard-command::before {
  border-color: rgba(124, 58, 237, 0.08);
}

.app-content .dashboard-command .section-eyebrow,
.app-content .dashboard-command .text-white-50 {
  color: #667085 !important;
}

.app-content .dashboard-command h1 {
  max-width: 680px;
  color: #0b1020;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}

.app-content .dashboard-command p {
  max-width: 620px;
  color: #667085 !important;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.app-content .filter-panel {
  flex-direction: column;
  min-width: 17rem;
  padding: 1.2rem;
  border-color: rgba(226, 232, 240, 0.92);
  color: #111827;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1.2rem 2.4rem rgba(15, 23, 42, 0.08);
}

.app-content .filter-panel strong {
  color: #111827 !important;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.app-content .filter-panel span {
  color: #667085 !important;
}

.app-content .report-filter-panel {
  align-items: stretch;
}

.app-content .report-filter-panel .date-range-fields span {
  color: #667085 !important;
}

.app-content .report-filter-panel .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  margin: 0;
  color: #111827 !important;
}

.app-content .report-filter-panel .form-check-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-color: #cbd5e1;
  background-color: #ffffff;
}

.app-content .report-filter-panel .form-check-input:checked {
  border-color: #7c3aed;
  background-color: #7c3aed;
}

.app-content .report-filter-panel .form-check-label {
  color: #111827;
  font-weight: 800;
}

.app-content .report-filter-panel .btn {
  width: 100%;
  min-height: 2.6rem;
  border-radius: 0.9rem;
  font-weight: 900 !important;
}

.app-content .report-filter-panel .btn-light {
  color: #111827;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 0.8rem 1.6rem rgba(15, 23, 42, 0.06);
}

.app-content .report-filter-panel .btn-light:hover,
.app-content .report-filter-panel .btn-light:focus {
  color: #ffffff;
  border-color: #7c3aed;
  background: #7c3aed;
}

.app-content .report-filter-panel .btn-outline-light {
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(245, 243, 255, 0.92);
}

.app-content .report-filter-panel .btn-outline-light:hover,
.app-content .report-filter-panel .btn-outline-light:focus {
  color: #ffffff;
  border-color: #6d28d9;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.dashboard-channel-section {
  padding: 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: 1.7rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.06);
}

.dashboard-channel-head {
  max-width: 760px;
  margin-bottom: 1.25rem;
}

.dashboard-channel-head span {
  display: inline-flex;
  margin-bottom: 0.7rem;
  color: #6d28d9;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-channel-head h2 {
  margin-bottom: 0.45rem;
  color: #0b1020;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.dashboard-channel-head p {
  margin: 0;
  color: #667085;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -0.02em;
}

.app-content .overview-card {
  min-height: 176px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 1.35rem;
  box-shadow: 0 1.2rem 2.7rem rgba(15, 23, 42, 0.08);
}

.app-content .overview-card-main {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.2), transparent 12rem),
    linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.app-content .overview-card-purple {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.18), transparent 12rem),
    linear-gradient(135deg, #2563eb, #7c3aed);
}

.app-content .overview-card-green {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.18), transparent 12rem),
    linear-gradient(135deg, #0f172a, #2563eb);
}

.app-content .metric-panel {
  border-color: #eef2f7;
  border-radius: 1.15rem;
  background: #ffffff;
  box-shadow: 0 0.9rem 2rem rgba(15, 23, 42, 0.05);
}

.app-content .metric-panel-head {
  border-bottom-color: #eef2f7;
}

.app-content .metric-panel-head span {
  color: #6d28d9;
  letter-spacing: 0.1em;
}

.app-content .metric-panel-head strong {
  color: #111827;
  font-weight: 900;
}

.app-content .metric-row {
  border-color: #eef2f7;
  background: #fbfaff;
}

.app-content .panel-blue,
.app-content .panel-cyan,
.app-content .panel-orange,
.app-content .panel-pink {
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.08), transparent 8rem),
    #ffffff;
}

@media (max-width: 1199.98px) {
  .app-shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .app-sidebar {
    padding: 1rem;
  }
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    width: min(21rem, calc(100vw - 2.5rem));
    height: 100dvh;
    overflow-y: auto;
    border-right: 1px solid rgba(226, 232, 240, 0.86);
    border-bottom: 0;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
  }

  .app-shell.app-menu-open .app-sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  .app-mobile-menu-backdrop {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: block;
    width: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.45);
  }

  .app-mobile-menu-close {
    display: grid;
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 0.8rem;
    color: #6d28d9;
    background: #fff;
    font-size: 1.55rem;
    line-height: 1;
  }

  .app-mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 999px;
    color: #6d28d9;
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
    font-weight: 900;
  }

  .app-mobile-menu-toggle span {
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
  }

  .app-body.app-menu-open {
    overflow: hidden;
  }

  .app-sidebar-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-user-card {
    max-width: none;
  }

  .app-topbar {
    position: relative;
  }

  .app-ai-credit {
    margin-left: auto;
  }
}

@media (max-width: 575.98px) {
  .app-sidebar-nav {
    grid-template-columns: 1fr;
  }

  .app-content,
  .app-topbar {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .app-topbar-actions {
    gap: 0.35rem;
  }

  .app-ai-credit {
    padding: 0.35rem 0.52rem;
  }

  .app-topbar .app-ai-credit strong {
    font-size: 0.75rem;
  }

  .app-content .dashboard-shell,
  .dashboard-channel-section {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .app-content .dashboard-command {
    min-height: auto;
    padding: 1.35rem;
  }

  .app-content .filter-panel {
    min-width: 0;
  }
}

.search-console-page .sc-legacy-analytics-hero {
  background:
    radial-gradient(circle at 10% 15%, rgba(59, 130, 246, 0.32), transparent 28%),
    linear-gradient(135deg, #0f172a, #312e81 55%, #0f766e);
}

.sc-performance-card,
.sc-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.search-console-page .dashboard-command { border-radius: 1.55rem; }
.search-console-page .sc-performance-card { box-shadow: 0 1.35rem 3.25rem rgba(15, 23, 42, .1); }
.search-console-page .sc-section-grid { gap: 1.25rem; }
.sc-query-page-workbench { padding: 1.35rem; }
.sc-query-page-map { display: grid; gap: .8rem; }
.sc-query-page-group { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 1rem; background: linear-gradient(135deg,#fff,#f8fbff); }
.sc-query-page-group summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.sc-query-page-group summary::-webkit-details-marker { display: none; }
.sc-query-page-group summary strong { display: block; color: #0f172a; font-size: .92rem; }
.sc-query-page-group summary span { display: block; margin-top: .22rem; color: #64748b; font-size: .74rem; font-weight: 700; }
.sc-query-page-group summary b { padding: .32rem .55rem; border-radius: 999px; color: #9a3412; background: #ffedd5; font-size: .68rem; font-weight: 850; }
.sc-query-page-list { display: grid; gap: .55rem; padding: .2rem 1rem 1rem; border-top: 1px solid #e8eef6; }
.sc-query-page-list article { display: grid; grid-template-columns: minmax(13rem, 1.8fr) repeat(4, minmax(5.5rem, auto)); gap: .75rem; align-items: center; padding: .7rem .8rem; border-radius: .72rem; background: #fff; }
.sc-query-page-list article > div { min-width: 0; }
.sc-query-page-list article strong { display: block; overflow: hidden; color: #1e293b; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.sc-query-page-list article small { display: block; overflow: hidden; margin-top: .16rem; color: #94a3b8; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.sc-query-page-list article > span { color: #475569; font-size: .72rem; font-weight: 800; text-align: right; white-space: nowrap; }

.sc-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.sc-metric-tile {
  min-height: 112px;
  padding: 20px 24px;
  color: #fff;
}

.sc-metric-tile label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 700;
}

.sc-metric-tile strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.sc-metric-tile .change-badge {
  display: inline-flex;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.sc-metric-blue { background: #4285f4; }
.sc-metric-purple { background: #673ab7; }
.sc-metric-green { background: #00897b; }
.sc-metric-orange { background: #ef6c00; color: #111827; }

.sc-chart-wrap {
  position: relative;
  padding: 28px 34px 22px;
}

.sc-chart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  color: #64748b;
  font-size: 0.86rem;
  margin-bottom: 10px;
}

.sc-chart-actions button,
.sc-chart-granularity {
  border: 1px solid #94a3b8;
  background: #fff;
  border-radius: 9px;
  padding: 7px 16px;
  color: #334155;
  font-weight: 700;
}

.sc-chart-granularity { width: auto; min-width: 105px; }

.sc-line-chart {
  display: block;
  width: 100%;
  height: 280px;
  overflow: visible;
}

.sc-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-line-blue { stroke: #3b82f6; }
.sc-line-purple { stroke: #5b2fd1; }
.sc-line-green { stroke: #009688; }
.sc-line-orange { stroke: #ef6c00; }

.sc-chart-dates {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 0.78rem;
  padding: 0 4px;
}

.sc-chart-dates span { white-space: nowrap; }

.sc-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sc-section-grid .sc-panel:nth-child(3) {
  grid-column: span 2;
}

.sc-panel { padding: 22px; }

.sc-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.sc-panel-head span,
.sc-panel-head small {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sc-panel-head strong {
  display: block;
  color: #0f172a;
  font-size: 1.08rem;
}

.sc-table-wrap { overflow-x: auto; }

.sc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}

.sc-table th {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 12px;
  white-space: nowrap;
}

.sc-sort-button { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.sc-sort-button i { width: 0; height: 0; border-right: .28rem solid transparent; border-bottom: .38rem solid currentColor; border-left: .28rem solid transparent; opacity: .32; }
.sc-sort-button.is-sorted { color: #2563eb; }
.sc-sort-button.is-sorted i { opacity: 1; }
.sc-sort-button.is-sorted.is-ascending i { transform: rotate(180deg); }

.sc-table td {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 700;
  border-bottom: 1px solid #eef2f7;
  padding: 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.sc-table tr:last-child td { border-bottom: 0; }

.sc-query-cell {
  max-width: 300px;
  white-space: normal !important;
  word-break: break-word;
  font-weight: 800 !important;
}

.sc-empty-cell {
  padding: 18px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 16px;
}

.sc-panel-foot {
  margin-top: 14px;
  padding: 12px 14px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 14px;
  font-size: 0.86rem;
}

.sc-page-list,
.sc-country-list,
.sc-device-list {
  display: grid;
  gap: 12px;
}

.sc-page-row,
.sc-country-row,
.sc-device-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fbfdff;
}

.sc-page-row div,
.sc-country-row div,
.sc-device-main {
  min-width: 0;
  flex: 1;
}

.sc-page-row strong,
.sc-country-row strong,
.sc-device-row strong {
  display: block;
  color: #0f172a;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-page-row span,
.sc-country-row small,
.sc-device-row small {
  display: block;
  color: #64748b;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-page-row aside {
  min-width: 82px;
  text-align: right;
}

.sc-page-row aside b,
.sc-country-row b {
  display: block;
  color: #2563eb;
  font-size: 1.1rem;
}

.sc-page-row aside small {
  color: #64748b;
  font-size: 0.75rem;
}

.sc-flag,
.sc-device-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eef2ff;
  font-size: 1.35rem;
}

.sc-device-icon { background: #ecfeff; }

.sc-device-track {
  height: 9px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin: 8px 0 6px;
}

.sc-device-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #14b8a6);
}

.sc-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sc-insight-panel { min-height: 250px; }

.sc-opportunity-list,
.sc-cannibal-list,
.sc-appearance-list,
.sc-technical-list,
.sc-hour-list {
  display: grid;
  gap: 10px;
}

.sc-opportunity-list article,
.sc-cannibal-list article,
.sc-appearance-list article,
.sc-technical-list article {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #e7edf5;
  border-radius: 13px;
  background: #fbfdff;
}

.sc-opportunity-list strong,
.sc-cannibal-list strong,
.sc-technical-list strong {
  display: block;
  color: #0f172a;
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-opportunity-list span,
.sc-cannibal-list span,
.sc-technical-list span,
.sc-appearance-list small {
  display: block;
  color: #64748b;
  font-size: .76rem;
}

.sc-opportunity-list b { color: #15803d; text-align: right; white-space: nowrap; }
.sc-opportunity-list b small { display: block; color: #64748b; font-size: .7rem; font-weight: 600; }

.sc-mover-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sc-mover-columns > div + div { border-left: 1px solid #e2e8f0; padding-left: 22px; }
.sc-mover-columns small { display: block; margin-bottom: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sc-mover-good { color: #15803d; }
.sc-mover-bad { color: #dc2626; }
.sc-mover-columns p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: .82rem; }
.sc-mover-columns span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.sc-mover-columns b { color: #0f172a; white-space: nowrap; }

.sc-appearance-list article { display: grid; grid-template-columns: 1fr auto; }
.sc-appearance-list span { color: #0f172a; font-weight: 800; }
.sc-appearance-list b { color: #2563eb; font-size: .82rem; }
.sc-appearance-list small { grid-column: 1 / -1; }

.sc-hour-list article { display: grid; grid-template-columns: 44px 1fr 52px; align-items: center; gap: 10px; font-size: .82rem; }
.sc-hour-list span { display: block; height: 9px; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #38bdf8); }
.sc-hour-list b { text-align: right; color: #334155; }

@media (max-width: 991.98px) {
  .sc-metric-strip,
  .sc-section-grid,
  .sc-insight-grid {
    grid-template-columns: 1fr;
  }

  .sc-section-grid .sc-panel:nth-child(3) {
    grid-column: auto;
  }

  .sc-chart-wrap {
    padding: 22px 18px;
  }

  .sc-query-page-list { overflow-x: auto; }
  .sc-query-page-list article { min-width: 48rem; }
}

.search-console-page .sc-legacy-filter-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.search-console-page .sc-legacy-filter-panel .form-check-label,
.search-console-page .sc-legacy-filter-panel .date-range-fields span {
  color: #334155;
  font-weight: 700;
}

.search-console-page .sc-legacy-filter-panel .btn-light {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.sc-line {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sc-line.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.sc-metric-tile.is-muted {
  filter: grayscale(0.35);
  opacity: 0.72;
}

.sc-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.sc-pagination button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 800;
}

.sc-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.sc-pagination span {
  min-width: 58px;
  text-align: center;
  color: #64748b;
  font-weight: 800;
}

.sc-chart-tooltip {
  position: absolute;
  z-index: 5;
  top: 28px;
  left: 16px;
  display: none;
  width: min(280px, calc(100% - 32px));
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dbe2ea;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  color: #6b7280;
  pointer-events: none;
}

.sc-chart-tooltip strong {
  display: block;
  margin-bottom: 14px;
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 800;
}

.sc-chart-tooltip div {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  font-size: 0.94rem;
}

.sc-chart-tooltip i {
  display: block;
  width: 11px;
  height: 4px;
  border-radius: 999px;
}

.sc-chart-tooltip span {
  color: #6b7280;
}

.sc-chart-tooltip b {
  color: #6b7280;
  font-weight: 800;
}

.sc-dot-blue { background: #3b82f6; }
.sc-dot-purple { background: #5b2fd1; }
.sc-dot-green { background: #009688; }
.sc-dot-orange { background: #ef6c00; }

.analytics-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.analytics-report-panel { padding: 1.2rem; border: 1px solid #e2e8f0; border-radius: 1.35rem; background: rgba(255,255,255,.94); box-shadow: 0 .8rem 2rem rgba(15,23,42,.06); }
.analytics-lifecycle-chart { display: flex; align-items: center; gap: 1.35rem; min-height: 10rem; }
.analytics-lifecycle-pie { display: grid; flex: 0 0 9rem; width: 9rem; height: 9rem; place-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1.05rem #fff, 0 .5rem 1.25rem rgba(15,23,42,.08); text-align: center; }
.analytics-lifecycle-pie strong { color: #0f172a; font-size: 1.25rem; }
.analytics-lifecycle-pie small { color: #64748b; font-size: .69rem; font-weight: 800; }
.analytics-lifecycle-legend { display: grid; flex: 1; gap: .7rem; }
.analytics-lifecycle-legend > div { display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto; align-items: center; column-gap: .45rem; }
.analytics-lifecycle-legend i { grid-row: span 2; width: .62rem; height: .62rem; border-radius: 50%; }
.analytics-lifecycle-legend .lifecycle-new { background: #2563eb; }
.analytics-lifecycle-legend .lifecycle-returning { background: #8b5cf6; }
.analytics-lifecycle-legend span { color: #334155; font-size: .8rem; font-weight: 800; }
.analytics-lifecycle-legend strong { color: #0f172a; font-size: .9rem; }
.analytics-lifecycle-legend small { grid-column: 2 / -1; color: #64748b; font-size: .7rem; font-weight: 700; }
.analytics-time-heatmap-scroll { overflow-x: auto; padding-bottom: .4rem; }
.analytics-time-heatmap { display: grid; min-width: 55rem; gap: .22rem; align-items: center; }
.analytics-time-hour { color: #64748b; font-size: .65rem; font-weight: 800; text-align: center; }
.analytics-time-day { color: #475569; font-size: .72rem; font-weight: 850; white-space: nowrap; }
.analytics-time-cell { min-height: 1.65rem; border-radius: .32rem; background: rgba(37,99,235,var(--heat-intensity)); outline: 1px solid rgba(37,99,235,.05); cursor: help; transition: transform .15s ease, outline-color .15s ease; }
.analytics-time-cell:hover { outline: 2px solid #1d4ed8; transform: scale(1.12); }
.analytics-time-legend { display: flex; justify-content: flex-end; align-items: center; gap: .45rem; margin-top: .8rem; color: #64748b; font-size: .7rem; font-weight: 800; }
.analytics-time-legend i { width: 5.5rem; height: .5rem; border-radius: 999px; background: linear-gradient(90deg,rgba(37,99,235,.12),#2563eb); }
.google-ads-full-report { width: 100%; }
.google-ads-trend-scroll { overflow-x: auto; padding-bottom: .35rem; }
.google-ads-trend-chart { display: flex; align-items: flex-end; gap: .65rem; min-width: 38rem; height: 15rem; padding: 1rem .75rem .15rem; border-bottom: 1px solid #e2e8f0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 24%, #f1f5f9 24.5%, transparent 25%); }
.google-ads-trend-day { display: grid; flex: 1 0 2.3rem; gap: .45rem; min-width: 2.3rem; color: #64748b; font-size: .68rem; font-weight: 800; text-align: center; }
.google-ads-trend-bars { display: flex; align-items: flex-end; justify-content: center; gap: .22rem; height: 12rem; }
.google-ads-trend-bar-wrap { position: relative; display: flex; align-items: flex-end; width: .56rem; outline: 0; }
.google-ads-trend-bar-wrap > i { display: block; width: 100%; height: 100%; min-height: .3rem; border-radius: .35rem .35rem .12rem .12rem; cursor: help; }
.google-ads-trend-tooltip { position: absolute; z-index: 5; bottom: calc(100% + .45rem); left: 50%; width: max-content; max-width: 11rem; padding: .4rem .5rem; border-radius: .45rem; color: #fff; background: #0f172a; box-shadow: 0 .4rem 1rem rgba(15,23,42,.22); font-size: .67rem; font-weight: 800; line-height: 1.25; opacity: 0; pointer-events: none; transform: translate(-50%, .25rem); transition: opacity .16s ease, transform .16s ease; }
.google-ads-trend-bar-wrap:hover .google-ads-trend-tooltip, .google-ads-trend-bar-wrap:focus-visible .google-ads-trend-tooltip { opacity: 1; transform: translate(-50%, 0); }
.google-ads-trend-bar-wrap:focus-visible > i { outline: 2px solid #0f172a; outline-offset: 2px; }
.trend-spend { background: #2563eb; }
.trend-purchase { background: #0f9d72; }
.google-ads-trend-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; color: #475569; font-size: .76rem; font-weight: 800; }
.google-ads-trend-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.google-ads-trend-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.analytics-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.analytics-report-head > div { min-width: 0; }
.analytics-report-head > div > span { display: block; margin-bottom: .28rem; color: #64748b; font-size: .72rem; font-weight: 900; letter-spacing: .075em; line-height: 1.15; text-transform: uppercase; }
.analytics-report-head strong { display: block; color: #0f172a; font-size: 1.02rem; font-weight: 850; line-height: 1.28; }
.analytics-report-head strong .info-tip { display: inline-grid; width: 1.05rem; height: 1.05rem; margin-left: .35rem; vertical-align: .06rem; color: #2563eb; background: #dbeafe; font-size: .68rem; font-weight: 900; letter-spacing: normal; line-height: 1; text-transform: none; }
.analytics-report-head > small { flex: 0 0 auto; padding: .36rem .55rem; border-radius: .6rem; color: #64748b; background: #f1f5f9; font-size: .72rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.campaign-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }
.campaign-guidance span { padding: .55rem .65rem; border-radius: .7rem; color: #475569; background: #f8fafc; font-size: .75rem; line-height: 1.38; }
.campaign-guidance strong { color: #1e293b; }
.ads-detail-reports { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; overflow: hidden; }
.ads-detail-reports summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; color: #0f172a; cursor: pointer; list-style: none; }
.ads-detail-reports summary::-webkit-details-marker { display: none; }
.ads-detail-reports summary span { font-weight: 850; }
.ads-detail-reports summary small { color: #64748b; font-size: .78rem; }
.ads-detail-reports[open] summary { border-bottom: 1px solid #e2e8f0; }
.ads-detail-reports .analytics-report-grid { padding: 0 1rem; }
.analytics-funnel-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
.analytics-funnel-steps > div { padding: .75rem; border-radius: .9rem; background: linear-gradient(135deg,#eff6ff,#f5f3ff); }
.analytics-funnel-steps span,.analytics-funnel-steps strong,.analytics-funnel-steps small { display:block; }
.analytics-funnel-steps span { color:#475569; font-size:.72rem; font-weight:800; }
.analytics-funnel-steps strong { margin:.25rem 0; color:#1e1b4b; font-size:1.25rem; }
.analytics-funnel-steps small { color:#64748b; font-size:.68rem; font-weight:700; }
.analytics-kpi-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.analytics-kpi-row span { padding:.7rem; border-radius:.85rem; color:#64748b; background:#f8fafc; font-size:.74rem; font-weight:800; }
.analytics-kpi-row strong { display:block; margin-top:.25rem; color:#0f172a; font-size:1rem; }
.analytics-mini-list { display:grid; gap:.55rem; }
.analytics-mini-list > div { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid #eef2f6; }
.analytics-mini-list > div:last-child { border-bottom:0; }
.analytics-mini-list strong { color:#1e293b; font-size:.82rem; overflow-wrap:anywhere; }
.analytics-mini-list span { color:#64748b; font-size:.76rem; font-weight:700; text-align:right; }
@media (max-width: 991.98px) { .analytics-funnel-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } .campaign-guidance { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .analytics-report-grid,.analytics-kpi-row,.analytics-funnel-steps { grid-template-columns:1fr; } .analytics-mini-list > div { display:grid; gap:.25rem; } .analytics-mini-list span { text-align:left; } .ads-detail-reports summary { align-items:flex-start; flex-direction:column; } .google-ads-trend-chart { min-width: 32rem; height: 13rem; } .google-ads-trend-bars { height: 10rem; } .analytics-lifecycle-chart { align-items:flex-start; flex-direction:column; } .analytics-lifecycle-pie { flex-basis: 8rem; width: 8rem; height: 8rem; } }

/* Meta rapor filtreleri */
.app-content .meta-dashboard-command {
  min-height: 0;
  padding: 1.55rem 1.75rem;
}

.app-content .meta-dashboard-command .command-copy {
  max-width: 42rem;
}

.app-content .meta-dashboard-command h1 {
  margin-bottom: 0.4rem !important;
  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
}

.app-content .meta-dashboard-command p {
  line-height: 1.5;
}

.app-content .meta-report-filter {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  min-width: min(100%, 31rem);
  gap: 0.65rem;
  padding: 0.85rem;
}

.meta-filter-label {
  grid-column: 1 / -1;
  margin: 0;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.app-content .meta-report-filter .form-select {
  min-width: 0;
}

.app-content .meta-report-filter .date-range-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  transition: opacity 160ms ease;
}

.app-content .meta-report-filter .date-range-fields.is-disabled {
  opacity: 0.45;
}

.app-content .meta-report-filter .date-range-fields input:disabled {
  cursor: not-allowed;
  background: #f8fafc;
}

.meta-compare-control {
  display: flex;
  grid-column: 1 / 2;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #ddd6fe;
  border-radius: 0.9rem;
  color: #312e81;
  background: #f5f3ff;
  cursor: pointer;
}

.meta-compare-control .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

.meta-compare-control strong,
.meta-compare-control small {
  display: block;
}

.meta-compare-control strong {
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
}

.meta-compare-control small {
  margin-top: 0.15rem;
  color: #6b7280;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.app-content .meta-report-filter [data-meta-custom-submit] {
  grid-column: 2 / 3;
  width: auto;
  min-width: 6.75rem;
  align-self: stretch;
}

.app-content .meta-report-filter [data-meta-custom-submit]:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.report-secondary-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

.report-secondary-actions .pdf-export-button {
  color: #64748b !important;
  border-color: #cbd5e1 !important;
  background: transparent !important;
  box-shadow: none;
}

.report-secondary-actions .pdf-export-button:hover,
.report-secondary-actions .pdf-export-button:focus {
  color: #334155 !important;
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

@media (max-width: 767.98px) {
  .app-content .meta-dashboard-command {
    padding: 1.35rem;
  }

  .app-content .meta-report-filter {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .meta-compare-control,
  .app-content .meta-report-filter [data-meta-custom-submit] {
    grid-column: auto;
    width: 100%;
  }

  .report-secondary-actions {
    justify-content: stretch;
  }

  .report-secondary-actions .pdf-export-button {
    width: 100%;
  }
}

/* Instagram rapor filtreleri */
.app-content .instagram-dashboard-command {
  min-height: 0;
  padding: 1.55rem 1.75rem;
}

.app-content .instagram-dashboard-command .command-copy {
  max-width: 42rem;
}

.app-content .instagram-dashboard-command h1 {
  margin-bottom: 0.4rem !important;
  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
}

.app-content .instagram-dashboard-command p {
  line-height: 1.5;
}

.app-content .instagram-report-filter {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  min-width: min(100%, 31rem);
  gap: 0.65rem;
  padding: 0.85rem;
}

.app-content .instagram-report-filter .form-select {
  min-width: 0;
}

.app-content .instagram-report-filter .date-range-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  transition: opacity 160ms ease;
}

.app-content .instagram-report-filter .date-range-fields.is-disabled {
  opacity: 0.45;
}

.app-content .instagram-report-filter .date-range-fields input:disabled {
  cursor: not-allowed;
  background: #f8fafc;
}

.app-content .instagram-report-filter [data-instagram-custom-submit] {
  grid-column: 2 / 3;
  width: auto;
  min-width: 6.75rem;
  align-self: stretch;
}

.app-content .instagram-report-filter [data-instagram-custom-submit]:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .app-content .instagram-dashboard-command {
    padding: 1.35rem;
  }

  .app-content .instagram-report-filter {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .app-content .instagram-report-filter [data-instagram-custom-submit] {
    grid-column: auto;
    width: 100%;
  }

  .campaign-type-strip {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .campaign-type-card {
    flex-basis: min(100%, 12rem);
    min-width: 0;
  }

  .ecommerce-status-row {
    align-items: flex-start;
  }

  .ecommerce-status-row strong {
    max-width: 48%;
  }
}

@media (max-width: 575.98px) {
  .ecommerce-revenue-chart {
    min-height: 12rem;
    gap: 0.2rem;
    padding: 0.75rem 0.55rem 0.2rem;
  }

  .ecommerce-chart-column {
    height: 10rem;
  }

  .ecommerce-chart-column:nth-child(n + 2):not(:nth-child(5n + 1)):not(:last-child) small {
    visibility: hidden;
  }

  .ecommerce-chart-column::before {
    max-width: min(14rem, calc(100vw - 2rem));
    white-space: normal;
  }

  .instagram-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .instagram-panel-head span {
    overflow-wrap: anywhere;
  }
}