/* universal box‑sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================
   Modern UI Styles for Synthetic ICP Tester
   -------------------------------------------
   • Soft neutral palette + accent blue
   • Light elevation, rounded corners
   • Responsive layout
   ============================================ */

:root {
  --brand-bg: #f2f2f2;
  --brand-surface: #ffffff;
  --brand-border: #D1D9E6;
  --brand-text: #1f2d3d;
  --brand-accent: #2563eb;       /* royal blue */
  --brand-accent-hover: #1e4fc7;
  --brand-danger: #d62728;
  --brand-success: #2ca02c;
  --radius: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.08);
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1100px;
  margin: 5px auto;
  padding: 0 20px;
  padding-top: 10px; /* leave room for sticky nav */
}

h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  color: var(--brand-accent);
}

select, textarea, button {
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  padding: 15px 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background: #fff;
  margin: 10px 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* match login inputs to master control styles */
.input,
input[type="text"].input,
input[type="password"].input {
  width: 100%;
  font-size: 1rem;
  padding: 15px 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background: #fff;
  margin: 10px 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

select:focus, textarea:focus, button:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

button {
  cursor: pointer;
  background: var(--brand-accent);
  color: #fff;
  font-weight: 600;
  margin-top: 12px;
  border: none;
  border-radius: 30px;
  box-shadow: var(--shadow-sm);
}

button:hover {
  background: var(--brand-accent-hover);
}

#loader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--brand-accent);
 
}

/* simple dots animation */
#dots {
  display: inline-block;
  animation: blink 1s infinite steps(3);
}

@keyframes blink {
  0%, 20% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

#sentimentBadge {
  margin-top: 0px;
  padding: 24px;
  margin-bottom: 32px;
  background: var(--brand-surface);
  border-left: 4px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  line-height: 1.4;
}

/* tables */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--brand-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

thead {
  background: #eef2f7;
}

th, td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5eaf1;
  vertical-align: top;
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
}

tr:last-child td {
  border-bottom: none;
}

/* badge colors */
.badge-up   { color: var(--brand-success); font-weight: 600; }
.badge-down { color: var(--brand-danger);  font-weight: 600; }
.badge-flat { color: #666;               font-weight: 600; }

/* download link */
#downloadLink {
  display: inline-block;
  margin-top: 14px;
  color: var(--brand-accent);
  text-decoration: none;
  font-weight: 600;
}
#downloadLink:hover { text-decoration: underline; }
.logo {
  
  border-radius: 30px;
  margin: 5px 0;
  max-width: 50%;
}

.response_container{
  background-color: #D1D9E6;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;                 /* breathing room between logo & text */
  padding: 0.6rem 2rem;      /* symmetric left/right padding */
  background: #ffffff;
  border-bottom: 1px solid var(--brand-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
}

/* Header groups for responsive layout */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;          /* let text wrap instead of forcing overflow */
  flex: 1 1 auto;        /* let left side take available space */
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  flex-wrap: wrap;        /* buttons can wrap to a new line if needed */
}
/* prevent org switcher from shrinking too small */
.org-switcher { min-width: 180px; }

/* Make the middle title/descriptor flex‑item expand, and keep text left‑aligned */
.app-header .app-titles {
  flex: 1 1 auto;             /* take remaining space */
  text-align: left;
}

/* Allow a little margin so text isn’t glued to the logo */
.app-header .app-titles .descriptor {
  margin-left: 4px;           /* subtle indent */
}

/* Push Clerk <user-button> flush right with comfortable margin */
user-button,
.cl-userButton-root {
  margin-left: auto;          /* push to far right */
  margin-right: 16px;         /* extra breathing room */
}

.app-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.app-titles h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-text);
}

.tagline {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: #475467;
  max-width: 540px;
}

.descriptor {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: #667085;
  max-width: 520px;
}

/* ===== Enhanced “dashboard” look ===================================== */

/* Soft gradient page background */
body {
  background: linear-gradient(180deg, #f8f9fb 0%, #f1f3f6 60%, #ebeef3 100%);
}

/* Translucent card/glass surfaces */
.card,
#sentimentBadge,
.table-wrapper table {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
}

/* Inputs: pill-like controls with consistent spacing */
select,
textarea,
button {
  padding: 14px 18px;
  margin: 13px 0;
  border-radius: 14px;
}

button {
  border-radius: 40px;
  font-size: 0.95rem;
  letter-spacing: 0.03rem;
}

/* Table: remove thick borders, subtle row divider */
table,
th,
td {
  border: none;
}

thead {
  background: transparent;
  color: #98a2b3;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}

tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ─── Receptivity Rubric & Gauge ─────────────────────────── */
.rubric-section {
  padding: 24px;
  margin-bottom: 32px;
}

.rubric-section h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 600;
}

.rubric-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 14px;
  font-size: 0.9rem;
}
.rubric-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* colour chips */
.band-negative  { background:#d92d20; }  /* red */
.band-neutral   { background:#9ca3af; }  /* grey */
.band-positive  { background:#16a34a; }  /* green */

/* gauge */
.gauge-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
}
.gauge {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
  align-items: centre; /* half‑doughnut: 0 at left, 100 at right */
}
.g-bg  { fill:none; stroke:#e6e8ec; stroke-width:3; }
.g-fill{ fill:none; stroke:#2563eb; stroke-width:3; stroke-linecap:round; }
.gauge text {
  font-size: 0.38rem;
  font-weight: 600;
  fill:#2563eb;
  transform: rotate(90deg);
}

/* === Receptivity distribution stacked bar =========================== */
.bands-bar{
  display:flex;
  width:100%;
  height:40px;
  margin:12px 0 12px;
  border-radius:8px;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
/* segments share rubric colours */
.negativeSeg { background:#d92d20; }
.neutralSeg  { background:#9ca3af; }
.positiveSeg { background:#16a34a; }

/* === σ (standard‑deviation) badge =================================== */
.sd-badge{
  display:inline-block;
  margin-left:8px;
  padding:4px 8px;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:600;
  line-height:1;
  background:#eef2f7;
  color:#475467;
}
.sd-badge.low    { background:#ecfdf5; color:#16a34a; } /* green */
.sd-badge.medium { background:#fefce8; color:#d97706; } /* amber */
.sd-badge.high   { background:#fef2f2; color:#d92d20; } /* red */

/* Re-use global container spacing */
.centered-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;   /* full viewport height */
  padding: 0 16px;     /* gutter */
}

/* Limit the login card width */
#loginForm.card {
  max-width: 420px;    /* or match your app’s .container max-width */
  width: 100%;
  padding: 50px;
}
.logout-link,
.nav-link {
  padding: 0.45rem 1rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background: var(--brand-light, #f9fafb);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-text);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  margin-left: auto;   /* push to the far right */
  margin-right: 2.5rem;  /* optional breathing room */
}
.logout-link:hover,
.nav-link:hover {
  background: var(--brand-accent);
  color: #ffffff;
  border-color: var(--brand-accent);
}
.input-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;               /* allow wrap on narrow screens */
  margin-top: 20px;
}

/* make both cards share space evenly on desktop */
.input-row .card {
  flex: 1 1 0;                   /* grow, shrink, base 0 */
  min-width: 160px;              /* keeps cards from collapsing too small */
}

/* make Net Receptivity card wider than sentiment panel */
.input-row .response_container{
  flex: 1 1 0;          /* 1 part of total */
}
.input-row .rubric-section{
  flex: 3 1 0;          /* 3 parts of total => ~75% width */
}

/* consistent inside spacing */
.response_container,
.message-card {
  padding: 24px;
  margin: 0;                     /* remove extra top margin on response_container from earlier */
}

/* mobile: stack cards vertically for <= 640px */
@media (max-width: 640px) {
  .input-row {
    flex-direction: column;
  }
}

/* === Override: enlarge receptivity gauge =============================== */
.gauge {
  width: 220px;   /* was 140px */
  height: 220px;
  align-items: center;  /* was 140px */
}

.gauge text {
  font-size: 0.55rem; /* bigger numeric readout */
}

/* === Intro Card – standout brand styling ================================= */
.intro-card {
  padding: 24px;                     /* same inner spacing as other cards   */
  margin-bottom: 28px;               /* breathing room below                */
  border-radius: var(--radius);
  background: linear-gradient(135deg,
              var(--brand-accent) 0%,
              var(--brand-accent-hover) 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.intro-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
}

.intro-card p {
  margin: 6px 0 0;
  line-height: 1.55;
  font-size: 0.95rem;
}

/* === Intro steps with icons =========================================== */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
}

.step-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
/* === Functional card icons (selector & message) ====================== */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  background: rgba(37, 99, 235, 0.12); /* brand-accent tint */
  color: var(--brand-accent);
  border-radius: 50%;
}
.intro-graphic {
  flex: 0 0 140px;        /* fixed width block */
  margin-left: auto;      /* push to right of card */
  display: inline-flex;
  align-items: right; /* center vertically */
  justify-content: right;
}

@media (max-width: 640px) {
  .intro-graphic {
    flex: 0 0 auto;
    margin-left: 0;
    margin-top: 12px;     /* space below text when stacked */
  }
}
select:focus, textarea:focus, button:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* button-based persona mode toggle */
.persona-mode {
  display: flex;
  gap: 12px;
  margin: 10px 0;
}

.persona-mode button {
  padding: 10px 18px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid var(--brand-border);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: var(--brand-text);
}

.persona-mode button:hover {
  border-color: var(--brand-accent);
}

.persona-mode button.active {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #ffffff;
}
/* === Footer ========================================================= */
.footer {
  text-align: center;
  padding: 16px;
  font-size: 0.85rem;
  color: #667085;
  background: #f9fafb;
  border-top: 1px solid var(--brand-border);
  margin-top: 20px;
}
.footer p {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  color: #475467;
}

/* legend swatches */
.bar-key .swatch {
  display: inline-block;
  width: 24px;
  height: 14px;
  margin-right: 6px;
  border-radius: 8px;
  vertical-align: middle;
}
.bar-key .negativeSeg { background:#d92d20; }
.bar-key .neutralSeg  { background:#9ca3af; }
.bar-key .positiveSeg { background:#16a34a; }

/* === Panel distribution key – match gauge key style =================== */
.bar-key{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:6px 0 10px;
  padding:0;
  list-style:none;
  font-size:0.8rem;         /* same as .gauge-key */
}
.bar-key li{
  display:flex;
  align-items:center;
}
.bar-key .swatch{
  display:inline-block;
  width:18px;               /* match gauge key */
  height:12px;
  border-radius:3px;
  margin-right:6px;
}

/* === Gauge colour key =========================================== */
.gauge-key{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:6px 0 10px;
  padding:0;
  list-style:none;
  font-size:0.8rem;
}
.gauge-key li{
  display:flex;
  align-items:center;
}
.gauge-key .band{
  display:inline-block;
  width:18px;
  height:12px;
  border-radius:3px;
  margin-right:6px;
}
.gauge-key-title{
  margin:4px 0 2px;
  font-size:0.9rem;
  font-weight:600;
  color:#334155;
}

/* mean / median / sd line */
.detail-stats{
  margin-top:6px;
  display:inline-block;
  padding:30px 6px;
  border-radius:12px;
  background:rgba(37,99,235,0.10);     /* soft brand‑blue tint */
  color:#1e40af;                       /* deeper accent blue */
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.03rem;
  text-align:center;
}
/* --- Clerk widget fix: prevent the show‑password toggle from blocking the input --- */
.cl-formFieldInputShowPasswordButton  {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;             /* center the eye icon */
  align-items: center;
  justify-content: center;
  width: 2rem;               /* tight hit‑area but big enough for icon */
  height: 2rem;
  padding: 0;
  background: transparent;   /* keep Clerk’s SVG visible */
  border: none;
  cursor: pointer;
  z-index: 3;
}

#sign-in input[type="password"] {
  position: relative;
  z-index: 2;                /* ensure keystrokes reach the field */
  padding-right: 2.5rem;     /* leave space for the toggle icon */
}
/* ---------------------------------------------
   Login page layout tweaks
   - Keep the SentimIQ logo neatly centered
   - Stack logo above Clerk widget
   ---------------------------------------------*/

.centered-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;    /* center vertically in viewport */
  gap: 1.5rem;                /* space between logo and widget */
  min-height: 100vh;          /* take full viewport height */
  padding: 0 16px;            /* side gutters on small screens */
  margin: 0;                  /* remove extra top margin */
}

/* Logo size scales with viewport but never overwhelms the form */
.centered-page .logo {
  width: min(220px, 40vw); /* 220 px max; 40 vw on small screens */
  height: auto;
}

/* Make sure the Clerk widget doesn’t exceed its natural width */
#sign-in {
  max-width: 420px;
  width: 100%;
}

/* Clerk Sign‑In Button Override – match primary app styling */
/* Clerk renders its primary action button with class .cl-button and data-variant="primary". Increase specificity so our theme wins. */
button.cl-formButton [data-variant="primary"] {
  background-color: var(--brand-accent) !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.2s ease-in-out;
}
#sign-in .cl-button[data-variant="primary"]:hover {
  background-color: var(--brand-accent-hover) !important;
}
/* === Rubric card action buttons =================================== */


.card-actions {
  position: absolute;
  top: 10px;
  right: 50px;
  display: flex;
  gap: 8px;
  z-index: 2;                         /* sit above card content */
}

.icon-btn {
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: none;}
  
  .icon-btn:hover {
    background-color: #ffffff; /* no hover effect */
    box-shadow: none; /* no shadow */
  }
   .icon-btn:focus {
    background-color: #ffffff; /* no hover effect */
    box-shadow: none; /* no shadow */
  }



.icon-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
  fill: none;                /* ensure no unwanted fill */
}
.icon-btn svg path {
  fill: none;                 /* paths are outlines only */
  stroke: #9ca3af;            /* neutral grey stroke */
  transition: stroke 0.2s ease-in-out;
}

.nav-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  line-height: 1;
  padding: 6px 10px;
  margin-left: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08); /* light border */
  background: transparent;
  text-decoration: none;
  color: inherit;            /* matches header text */
  opacity: 0.85;             /* subtle by default */
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease;
  white-space: nowrap;
}
.nav-link-cta:hover,
.nav-link-cta:focus {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.12); /* light outline on hover */
  outline: none;
}



/* —— Disabled / gated button styling ——————————— */
button.disabled,
button:disabled {
  background: #9ca3af;          /* soft grey */
  color: #ffffff;               /* keep text readable */
  opacity: 0.6;                 /* subtle fade */
  cursor: not-allowed;
  border-color: #9ca3af;
  filter: none;                 /* no colour shift needed */
  pointer-events: none;         /* block hover / clicks */
}

button.disabled:hover,
button:disabled:hover {
  background: #9ca3af;          /* lock colour on hover */
  color: #ffffff;
}

/* ===== Quick Response Modal ========================================= */
#singleResp.response.card {
  position: fixed;                    /* overlay the viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* perfect centering */
  width: min(90vw, 480px);            /* responsive width */
  max-height: 80vh;                   /* prevent overflow on small screens */
  overflow-y: auto;
  padding: 28px 30px;                 /* comfortable inner spacing */
  background: var(--brand-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 2000;                      /* above nav & banners */
}

/* Optional semi‑transparent backdrop (include in HTML if desired) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  z-index: 1990;                      /* just below modal */
}

/* ===== Plans & Pricing Page ====================================== */
.plans-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 48px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
  align-items: center;  /* vertically center both columns */
}

@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.plans-copy .plans-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 10 0 12px 0;
}

.plans-copy .plans-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brand-text-muted, #475467);
  margin-bottom: 26px;
}

.testimonial.card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-left: 0;
  margin-bottom: 30px;
}

.testimonial .author {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  color: #6b7280;
}

/* emphasise primary CTA */
#continue-to-app.primary-button {
  background: transparent;
  color: var(--brand-accent);
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 40px;
  box-shadow: none;
  display: inline-block;
  border: 2px solid var(--brand-accent);
}
#continue-to-app:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-accent);
}

/* Clerk pricing wrapper */
.pricing-wrapper {
  max-width: 760px;
  margin: 0 auto;
}

/* Highlight “Pro” card stronger – assumed Clerk gives data-plan-id attr */
.cl-pricingTablePlan[data-plan-id*="monthly_single_user_subscription"] {
  transform: scale(1.05);
  border: 2px solid var(--brand-accent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
  position: relative;
}

/* Small “Most popular” ribbon */
.cl-pricingTablePlan[data-plan-id*="monthly_single_user_subscription"]::before {
  content: "Most popular";
  position: absolute;
  top: -10px;
  left: -10px;
  background: var(--brand-accent);
  color: #fff;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
}

/* —— Clerk Pricing‑Table CTA button ———————————— */
.cl-pricingTableCardFooterButton,
.cl-pricingTableCardFooterButton:visited,
.cl-pricingTableButton,
.cl-pricingTableButton:visited {
  background: var(--brand-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  width: 100%;
  display: inline-block;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, opacity 0.18s ease;
}

.cl-pricingTableCardFooterButton:hover,
.cl-pricingTableCardFooterButton:focus,
.cl-pricingTableButton:hover,
.cl-pricingTableButton:focus {
  background: var(--brand-accent-hover) !important;
  color: #ffffff !important;
  opacity: 0.95;
}

.cl-pricingTableCardFooterButton:disabled,
.cl-pricingTableButton:disabled {
  background: #9ca3af !important;
  cursor: not-allowed;
  opacity: 0.65;
}
/*Clerk form button styles*/
.cl-formButtonPrimary,
.cl-formButtonPrimary:visited,
.cl-formButtonPrimary,
.cl-formButtonPrimary:visited  {
  background: var(--brand-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  width: 100%;
  display: inline-block;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, opacity 0.18s ease;
}

.cl-formButtonPrimary:hover,
.cl-formButtonPrimary:focus,
.cl-formButtonPrimary:hover,
.cl-formButtonPrimary:focus {
  background: var(--brand-accent-hover) !important;
  color: #ffffff !important;
  opacity: 0.95;
}

.cl-formButtonPrimary:disabled,
.cl-formButtonPrimary:disabled {
  background: #9ca3af !important;
  cursor: not-allowed;
  opacity: 0.65;
}
.custom-empty-msg {
  margin-top: 10px;
  padding: 14px 18px;
  background-color: var(--brand-accent); /* brand blue */
  color: white;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.secondary-link-button {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 0.9rem;
  color: #555;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  transition: background-color 0.2s, color 0.2s;
}
.secondary-link-button:hover {
  background-color: #eee;
  color: #000;
}
.upgrade-btn {
  display: inline-block;
  margin-left: 10px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  background-color: transparent;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.upgrade-btn:hover,
.upgrade-btn:focus {
  background-color: rgba(37,99,235,0.08);
  color: var(--brand-accent);
  border-color: var(--brand-accent-hover);
  outline: none;
}

/* Small screens: stack header actions under title */
@media (max-width: 720px) {
  .header-left { width: 100%; }
  .header-right { width: 100%; justify-content: flex-start; }
  .app-logo { width: 48px; height: 48px; }
  .app-titles .descriptor { max-width: none; }
}