/* ============================================================
   MIA Optimize — Unified Design System
   Black · White · Red
   Applies to both public marketing pages and app dashboard
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  /* Core palette */
  --red:         #e3000f;
  --red-dark:    #b8000b;
  --red-light:   rgba(227,0,15,0.08);
  --black:       #0f0f0f;
  --white:       #ffffff;
  --off-white:   #f8f8f6;
  --grey-1:      #f2f2f0;   /* lightest surface */
  --grey-2:      #e8e8e5;   /* borders, dividers */
  --grey-3:      #c0c0bc;   /* muted borders */
  --grey-4:      #888884;   /* muted text */
  --grey-5:      #555551;   /* body text */

  /* App-specific surfaces */
  --app-bg:      #f5f5f3;
  --app-surface: #ffffff;
  --app-border:  #e4e4e1;
  --app-muted:   #888884;

  /* Status colours */
  --success:     #16a34a;
  --success-bg:  rgba(22,163,74,0.08);
  --warn:        #d97706;
  --warn-bg:     rgba(217,119,6,0.08);
  --danger:      #dc2626;
  --danger-bg:   rgba(220,38,38,0.08);
  --info:        #2563eb;
  --info-bg:     rgba(37,99,235,0.08);

  /* Score colours */
  --score-good:  #16a34a;
  --score-warn:  #d97706;
  --score-bad:   #dc2626;

  /* Typography */
  --font:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   24px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow:      0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.12);

  /* Transition */
  --t:       0.18s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}
.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Public Navigation ───────────────────────────────────── */
.pub-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--grey-2);
  height: 66px;
}
.pub-nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.pub-nav-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--black);
  flex-shrink: 0;
}
.pub-nav-logo span { color: var(--red); }

.pub-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.pub-nav-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-4);
  letter-spacing: 0.1px;
  transition: color var(--t);
}
.pub-nav-links a:hover,
.pub-nav-links a.nav-active { color: var(--black); }

.pub-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pub-nav-login {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-4);
  transition: color var(--t);
}
.pub-nav-login:hover { color: var(--black); }

.pub-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--black);
  padding: 9px 20px;
  border-radius: var(--r-sm);
  border: none;
  transition: background var(--t);
}
.pub-nav-btn:hover { background: var(--red); color: var(--white); }

.pub-nav-hamburger {
  display: none;
  background: none;
  border: 1.5px solid var(--grey-2);
  border-radius: var(--r-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--black);
  transition: border-color var(--t);
}
.pub-nav-hamburger:hover { border-color: var(--grey-3); }

/* ── Mobile Menu ─────────────────────────────────────────── */
.pub-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 9999;
  padding: 88px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.pub-mobile-menu.open { transform: translateX(0); }
.pub-mobile-close {
  position: absolute;
  top: 20px;
  right: 22px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--black);
  line-height: 1;
}
.pub-mobile-menu a {
  font-size: 24px;
  font-weight: 800;
  color: var(--black);
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-1);
  letter-spacing: -0.5px;
  transition: color var(--t);
}
.pub-mobile-menu a:hover { color: var(--red); }
.pub-mobile-divider {
  height: 1px;
  background: var(--grey-2);
  margin: 16px 0;
}
.pub-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pub-mobile-cta .pub-nav-btn {
  text-align: center;
  padding: 14px;
  font-size: 15px;
  border-radius: var(--r);
  justify-content: center;
}
.pub-mobile-cta .pub-nav-login {
  text-align: center;
  font-size: 14px;
  padding: 10px;
  display: block;
}

/* ── Public Footer ───────────────────────────────────────── */
.pub-footer {
  background: var(--black);
  color: rgba(255,255,255,0.85);
  padding: 64px 0 0;
}
.pub-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.pub-footer-logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--white);
  margin-bottom: 12px;
}
.pub-footer-logo span { color: var(--red); }
.pub-footer-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  max-width: 260px;
  margin-bottom: 20px;
}
.pub-footer-payments {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.pub-footer-socials {
  display: flex;
  gap: 8px;
}
.pub-footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  transition: all var(--t);
}
.pub-footer-social-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}
.pub-footer-col-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.pub-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pub-footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color var(--t);
}
.pub-footer-links a:hover { color: var(--white); }
.pub-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.pub-footer-legal {
  display: flex;
  gap: 20px;
}
.pub-footer-legal a {
  color: rgba(255,255,255,0.3);
  transition: color var(--t);
}
.pub-footer-legal a:hover { color: rgba(255,255,255,0.6); }

/* ── App Header ──────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--app-border);
  height: 62px;
}
.app-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.app-logo {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--black);
  flex-shrink: 0;
  margin-right: 16px;
}
.app-logo span { color: var(--red); }

.app-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.app-nav-item {
  position: relative;
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-4);
  transition: all var(--t);
  border: none;
  background: none;
  white-space: nowrap;
}
.app-nav-link:hover,
.app-nav-link.active {
  background: var(--grey-1);
  color: var(--black);
}
.app-nav-link .nav-chevron {
  font-size: 10px;
  opacity: 0.5;
  transition: transform var(--t);
}
.app-nav-item.open .nav-chevron { transform: rotate(180deg); }

/* App nav dropdown */
.app-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r);
  padding: 6px;
  min-width: 180px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 300;
}
.app-nav-item.open .app-nav-dropdown { display: block; }
.app-nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-5);
  transition: all var(--t);
}
.app-nav-dropdown a:hover {
  background: var(--grey-1);
  color: var(--black);
}
.app-nav-dropdown a .dd-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.tier-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tier-free    { background: var(--grey-1); color: var(--grey-4); }
.tier-starter { background: var(--info-bg); color: var(--info); }
.tier-pro     { background: var(--red-light); color: var(--red); }
.tier-agency  { background: rgba(0,0,0,0.06); color: var(--black); }

.app-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  background: var(--red);
  color: var(--white);
  border: none;
  transition: background var(--t);
}
.app-upgrade-btn:hover { background: var(--red-dark); color: var(--white); }

.user-menu { position: relative; }
.user-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r);
  padding: 8px;
  min-width: 190px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 300;
}
.user-menu.open .user-dropdown { display: block; }
.dropdown-name {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px 8px;
  color: var(--grey-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dropdown-link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-5);
  transition: all var(--t);
}
.dropdown-link:hover { background: var(--grey-1); color: var(--black); }
.dropdown-divider {
  height: 1px;
  background: var(--app-border);
  margin: 4px 0;
}
.dropdown-logout { color: var(--danger) !important; }
.dropdown-logout:hover { background: var(--danger-bg) !important; }

/* ── App Footer ──────────────────────────────────────────── */
.app-footer {
  background: var(--white);
  border-top: 1px solid var(--app-border);
  padding: 20px 24px;
  margin-top: auto;
}
.app-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--grey-4);
}
.app-footer-links {
  display: flex;
  gap: 16px;
}
.app-footer-links a {
  font-size: 12px;
  color: var(--grey-4);
  transition: color var(--t);
}
.app-footer-links a:hover { color: var(--black); }

/* ── App Layout ──────────────────────────────────────────── */
.app-body {
  background: var(--app-bg);
  min-height: calc(100vh - 62px - 57px);
}
.app-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px;
}
.page-header {
  margin-bottom: 28px;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--black);
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: 14px;
  color: var(--grey-4);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  border: none;
  transition: all var(--t);
  white-space: nowrap;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: -0.1px;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); color: var(--white); }

.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: #333; color: var(--white); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--grey-2);
  color: var(--grey-5);
}
.btn-outline:hover { border-color: var(--black); color: var(--black); }

.btn-ghost { background: transparent; color: var(--grey-5); }
.btn-ghost:hover { background: var(--grey-1); color: var(--black); }

.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: #b91c1c; }

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn-xl { padding: 16px 40px; font-size: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card-sm { padding: 16px; }
.card-lg { padding: 32px; }

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.card-subtitle {
  font-size: 13px;
  color: var(--grey-4);
  margin-bottom: 20px;
}

/* Stat card */
.stat-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -1px;
  line-height: 1;
}
.stat-sub {
  font-size: 12px;
  color: var(--grey-4);
  margin-top: 4px;
}

/* ── Score Components ────────────────────────────────────── */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.score-badge-lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.score-good { background: var(--success-bg); color: var(--success); }
.score-warn { background: var(--warn-bg);    color: var(--warn); }
.score-bad  { background: var(--danger-bg);  color: var(--danger); }

/* Score ring (SVG) */
.score-ring { position: relative; width: 80px; height: 80px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--grey-4);
  margin-bottom: 7px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--grey-2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  transition: border-color var(--t), box-shadow var(--t);
  font-family: var(--font);
}
.form-input::placeholder { color: var(--grey-3); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-error { color: var(--danger); font-size: 12px; margin-top: 5px; font-weight: 600; }
.form-hint  { color: var(--grey-4); font-size: 12px; margin-top: 5px; }

/* URL input (large, hero style) */
.url-input-wrap {
  display: flex;
  gap: 0;
  background: var(--white);
  border: 2px solid var(--grey-2);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.url-input-wrap:focus-within {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.url-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  font-family: var(--font);
}
.url-input-wrap input:focus { outline: none; }
.url-input-wrap input::placeholder { color: var(--grey-3); }
.url-input-wrap button {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t);
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
}
.url-input-wrap button:hover { background: var(--red); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  padding: 14px 18px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-error   { background: var(--danger-bg);  border: 1px solid rgba(220,38,38,0.2);  color: #991b1b; }
.alert-success { background: var(--success-bg); border: 1px solid rgba(22,163,74,0.2);  color: #14532d; }
.alert-warn    { background: var(--warn-bg);    border: 1px solid rgba(217,119,6,0.2);  color: #92400e; }
.alert-info    { background: var(--info-bg);    border: 1px solid rgba(37,99,235,0.2);  color: #1e3a8a; }

/* ── Tables ──────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
  background: var(--grey-1);
  border-bottom: 1px solid var(--app-border);
}
.data-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-border);
  color: var(--grey-5);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--grey-1); }

/* ── Loading ─────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--grey-2);
  border-top-color: var(--black);
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}
.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.spinner-red { border-top-color: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading bar (horizontal progress) */
.loading-bar {
  height: 2px;
  background: var(--grey-2);
  border-radius: 2px;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  animation: loadbar 1.5s ease infinite;
}
@keyframes loadbar {
  0% { width: 0%; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ── Empty States ────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 12px;
}
.empty-icon {
  font-size: 40px;
  opacity: 0.3;
  margin-bottom: 4px;
}
.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}
.empty-desc {
  font-size: 13px;
  color: var(--grey-4);
  max-width: 320px;
  line-height: 1.6;
}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--app-border);
  margin-bottom: 24px;
}
.tab-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font);
}
.tab-btn:hover { color: var(--black); }
.tab-btn.active { color: var(--black); border-bottom-color: var(--red); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Progress Bar ────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--grey-1);
  border-radius: 6px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--red);
  transition: width 0.4s ease;
}
.progress-fill.green { background: var(--success); }

/* BIP intelligence progress */
.bip-progress { display: flex; flex-direction: column; gap: 6px; }
.bip-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-4);
}
.bip-progress-label span:last-child { color: var(--black); }

/* ── Tag / Pill ──────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--grey-1);
  color: var(--grey-5);
  gap: 4px;
}
.tag-red   { background: var(--red-light);    color: var(--red); }
.tag-green { background: var(--success-bg);   color: var(--success); }
.tag-warn  { background: var(--warn-bg);      color: var(--warn); }

/* ── Issue priority indicators ───────────────────────────── */
.issue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--app-border);
  gap: 12px;
}
.issue-row:last-child { border-bottom: none; }
.issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.issue-dot.high   { background: var(--danger); }
.issue-dot.medium { background: var(--warn); }
.issue-dot.low    { background: var(--success); }
.issue-text { font-size: 13px; font-weight: 500; color: var(--grey-5); flex: 1; }
.issue-pts {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
}

/* ── Content cards (create page) ─────────────────────────── */
.create-card {
  background: var(--white);
  border: 2px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--t);
  text-align: center;
}
.create-card:hover { border-color: var(--black); }
.create-card.selected { border-color: var(--red); background: var(--red-light); }
.create-card-icon { font-size: 28px; margin-bottom: 8px; }
.create-card-label { font-size: 13px; font-weight: 700; color: var(--black); }

/* ── Billing / Pricing ───────────────────────────────────── */
.plan-card {
  background: var(--white);
  border: 1.5px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.plan-card.popular {
  border-color: var(--black);
  border-width: 2px;
}
.plan-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--grey-4); }
.plan-price { font-size: 36px; font-weight: 900; color: var(--black); letter-spacing: -1.5px; line-height: 1; margin: 8px 0; }
.plan-price sup { font-size: 18px; letter-spacing: 0; }
.plan-price span { font-size: 14px; font-weight: 500; color: var(--grey-4); letter-spacing: 0; }
.plan-desc { font-size: 13px; color: var(--grey-4); margin-bottom: 20px; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--grey-5);
}
.plan-check { color: var(--success); font-weight: 700; flex-shrink: 0; }

/* ── Success / Error pages ───────────────────────────────── */
.center-page {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.center-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-xl);
  padding: 48px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow);
}
.center-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 24px;
}
.center-icon.success { background: var(--success-bg); }
.center-icon.error   { background: var(--danger-bg); }
.error-code { font-size: 80px; font-weight: 900; color: var(--grey-2); line-height: 1; }

/* ── Legal pages ─────────────────────────────────────────── */
.legal-page { padding: 48px 0 80px; }
.legal-page h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.legal-page .last-updated { color: var(--grey-4); font-size: 13px; margin-bottom: 40px; }
.legal-page h2 { font-size: 17px; font-weight: 700; margin: 32px 0 10px; }
.legal-page p  { color: var(--grey-5); margin-bottom: 14px; line-height: 1.75; font-size: 14px; }
.legal-page ul { color: var(--grey-5); padding-left: 20px; margin-bottom: 14px; }
.legal-page li { margin-bottom: 6px; font-size: 14px; }

/* ── Utility ─────────────────────────────────────────────── */
.text-red    { color: var(--red); }
.text-muted  { color: var(--grey-4); }
.text-small  { font-size: 12px; }
.text-center { text-align: center; }
.font-bold   { font-weight: 700; }
.font-black  { font-weight: 900; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.w-full { width: 100%; }

/* ── Flash notification ──────────────────────────────────── */
#mia-flash {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 9999;
  min-width: 280px;
  max-width: 420px;
  animation: slideIn 0.2s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pub-nav-links { gap: 18px; }
}

@media (max-width: 768px) {
  .pub-nav-links,
  .pub-nav-login,
  .pub-nav-btn { display: none; }
  .pub-nav-hamburger { display: flex; }

  .app-nav { display: none; }
  .app-header-inner { padding: 0 16px; }

  .container, .container-wide, .container-narrow { padding: 0 16px; }
  .app-page { padding: 20px 16px; }

  .pub-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pub-footer-grid > div:first-child { grid-column: 1 / -1; }
  .pub-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .card { padding: 16px; }
  .center-card { padding: 28px 20px; }

  .stat-value { font-size: 22px; }
}

@media (max-width: 480px) {
  .pub-footer-grid { grid-template-columns: 1fr; }
  .pub-footer-grid > div:first-child { grid-column: auto; }
}

/* ============================================================
   MIA Optimize — Dashboard Override CSS
   Replaces all dark theme remnants with clean light theme
   ============================================================ */

/* ── Layout: full width, no wasted space ─────────────────── */
body {
  display: block !important;
  background: var(--app-bg) !important;
  color: var(--black) !important;
}

.main {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 28px 36px !important;
  box-sizing: border-box !important;
}

/* Sidebar gone */
.sidebar, .sb-logo, .sb-nav, .sb-section,
.sb-link, .sb-user, .sb-badge, .sb-logout {
  display: none !important;
}

/* ── All dark surfaces → white ───────────────────────────── */
.card, .panel, .audit-bar, .comp-form, .bk-card,
.report-card, .monitor-card, .stat-card, .stat-block,
.upgrade-banner, .results-panel, .analysis-card,
.content-card, .gen-card, .prev-card, .hist-card,
[class*="card"], [class*="panel"], [class*="block"],
[class*="wrap"]:not(.pub-):not(body) {
  background: var(--white) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--black) !important;
}

/* Score rings track */
.score-ring svg circle:first-child {
  stroke: var(--grey-2) !important;
}

/* ── Text colours ────────────────────────────────────────── */
h1, h2, h3, h4, .page-title, .card-title,
.ph h1, .section-title {
  color: var(--black) !important;
}
.page-sub, .card-sub, .ph p, .sub,
.analysis-date, .analysis-kw, .card-muted,
.section-header-sm, .stat-label, .bk-label,
.ph .sub, small, .hint, .note {
  color: var(--grey-4) !important;
}
.analysis-url, .analysis-table a, td a {
  color: var(--black) !important;
  font-weight: 600;
}

/* ── Inputs everywhere ───────────────────────────────────── */
input, select, textarea,
.audit-input, .audit-kw, .comp-input, .url-input,
input[type=text], input[type=url], input[type=email] {
  background: var(--white) !important;
  border: 1.5px solid var(--grey-2) !important;
  color: var(--black) !important;
  border-radius: var(--r-sm) !important;
}
input::placeholder, textarea::placeholder,
.audit-input::placeholder, .audit-kw::placeholder {
  color: var(--grey-3) !important;
}
input:focus, select:focus, textarea:focus,
.audit-input:focus, .audit-kw:focus {
  border-color: var(--black) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

/* ── Tables ──────────────────────────────────────────────── */
table, .analysis-table, .data-table {
  width: 100%;
  border-collapse: collapse;
}
th, .analysis-table th {
  background: var(--grey-1) !important;
  color: var(--grey-4) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--app-border) !important;
}
td, .analysis-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--app-border) !important;
  color: var(--grey-5) !important;
  font-size: 13px !important;
}
tr:last-child td { border-bottom: none !important; }
tr:hover td { background: var(--grey-1) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.audit-btn, .btn-red, [class*="btn-primary"],
button[style*="background:var(--red)"],
button[style*="background:#e5"],
button[style*="background: var(--red)"] {
  background: var(--red) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
}
.btn-outline, .btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--grey-2) !important;
  color: var(--grey-5) !important;
}

/* ── Tags / pills ────────────────────────────────────────── */
.bk-tag {
  background: var(--red-light) !important;
  color: var(--red) !important;
  border: 1px solid rgba(227,0,15,0.15) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}

/* ── Score rings ─────────────────────────────────────────── */
.sr-good, .score-good-bg { background: var(--success-bg) !important; color: var(--success) !important; border-color: rgba(22,163,74,0.2) !important; }
.sr-mid,  .score-warn-bg { background: var(--warn-bg)    !important; color: var(--warn)    !important; border-color: rgba(217,119,6,0.2) !important; }
.sr-bad,  .score-bad-bg  { background: var(--danger-bg)  !important; color: var(--danger)  !important; border-color: rgba(220,38,38,0.2) !important; }

/* ── Stats row ───────────────────────────────────────────── */
.stats-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}
.stat-card {
  padding: 18px 20px !important;
  border-radius: var(--r-lg) !important;
}
.stat-value { color: var(--black) !important; font-size: 28px !important; font-weight: 900 !important; letter-spacing: -1px !important; }

/* ── Grid layouts ────────────────────────────────────────── */
.two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* ── Previously generated / history items ───────────────── */
.prev-item, .gen-item, .hist-item,
[class*="gen-card"], [class*="prev-card"],
[class*="hist-"] {
  background: var(--white) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--black) !important;
  border-radius: var(--r-lg) !important;
}

/* ── Upgrade banner ──────────────────────────────────────── */
.upgrade-banner {
  background: var(--red-light) !important;
  border: 1px solid rgba(227,0,15,0.15) !important;
  border-radius: var(--r-lg) !important;
}
.ub-text, .ub-text strong, .ub-text * {
  color: var(--black) !important;
}

/* ── Platform select cards (Social) ─────────────────────── */
.plat-card, .platform-card, [class*="plat"] {
  background: var(--white) !important;
  border: 1.5px solid var(--app-border) !important;
  color: var(--black) !important;
  border-radius: var(--r-lg) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.plat-card:hover { border-color: var(--black) !important; }
.plat-card.active, .plat-card.selected {
  border-color: var(--red) !important;
  background: var(--red-light) !important;
}

/* ── Mode cards (Content Writer) ─────────────────────────── */
.mode-card, .type-card {
  background: var(--white) !important;
  border: 2px solid var(--app-border) !important;
  color: var(--black) !important;
  border-radius: var(--r-lg) !important;
}
.mode-card.active, .mode-card.selected,
.type-card.active, .type-card.selected {
  border-color: var(--red) !important;
  background: var(--red-light) !important;
}
.mode-card h3, .mode-card p,
.type-card h3, .type-card p {
  color: var(--black) !important;
}

/* ── Overlay / modal panels ──────────────────────────────── */
#results-overlay { background: rgba(0,0,0,0.5) !important; }
.results-panel {
  background: var(--white) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--black) !important;
}
.sc-block, .sc-card, [class*="sc-"] {
  background: var(--grey-1) !important;
  color: var(--black) !important;
}
.sc-label { color: var(--grey-4) !important; }
.sc-num   { color: var(--black) !important; }

/* ── Issue items ─────────────────────────────────────────── */
.issue-item {
  background: var(--grey-1) !important;
  border-radius: var(--r-sm) !important;
  color: var(--grey-5) !important;
}

/* ── Loading spinner ─────────────────────────────────────── */
.spinner {
  border-color: var(--grey-2) !important;
  border-top-color: var(--red) !important;
}

/* ── Page header spacing ─────────────────────────────────── */
.page-header, .ph {
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main { padding: 20px 24px !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .main { padding: 16px !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}
}
.pub-footer-payments {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.pub-footer-socials {
  display: flex;
  gap: 8px;
}
.pub-footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  transition: all var(--t);
}
.pub-footer-social-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
}
.pub-footer-col-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.pub-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pub-footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color var(--t);
}
.pub-footer-links a:hover { color: var(--white); }
.pub-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.pub-footer-legal {
  display: flex;
  gap: 20px;
}
.pub-footer-legal a {
  color: rgba(255,255,255,0.3);
  transition: color var(--t);
}
.pub-footer-legal a:hover { color: rgba(255,255,255,0.6); }

/* ── App Header ──────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--app-border);
  height: 62px;
}
.app-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.app-logo {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--black);
  flex-shrink: 0;
  margin-right: 16px;
}
.app-logo span { color: var(--red); }

.app-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.app-nav-item {
  position: relative;
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-4);
  transition: all var(--t);
  border: none;
  background: none;
  white-space: nowrap;
}
.app-nav-link:hover,
.app-nav-link.active {
  background: var(--grey-1);
  color: var(--black);
}
.app-nav-link .nav-chevron {
  font-size: 10px;
  opacity: 0.5;
  transition: transform var(--t);
}
.app-nav-item.open .nav-chevron { transform: rotate(180deg); }

/* App nav dropdown */
.app-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r);
  padding: 6px;
  min-width: 180px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 300;
}
.app-nav-item.open .app-nav-dropdown { display: block; }
.app-nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-5);
  transition: all var(--t);
}
.app-nav-dropdown a:hover {
  background: var(--grey-1);
  color: var(--black);
}
.app-nav-dropdown a .dd-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.tier-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tier-free    { background: var(--grey-1); color: var(--grey-4); }
.tier-starter { background: var(--info-bg); color: var(--info); }
.tier-pro     { background: var(--red-light); color: var(--red); }
.tier-agency  { background: rgba(0,0,0,0.06); color: var(--black); }

.app-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  background: var(--red);
  color: var(--white);
  border: none;
  transition: background var(--t);
}
.app-upgrade-btn:hover { background: var(--red-dark); color: var(--white); }

.user-menu { position: relative; }
.user-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r);
  padding: 8px;
  min-width: 190px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 300;
}
.user-menu.open .user-dropdown { display: block; }
.dropdown-name {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px 8px;
  color: var(--grey-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dropdown-link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-5);
  transition: all var(--t);
}
.dropdown-link:hover { background: var(--grey-1); color: var(--black); }
.dropdown-divider {
  height: 1px;
  background: var(--app-border);
  margin: 4px 0;
}
.dropdown-logout { color: var(--danger) !important; }
.dropdown-logout:hover { background: var(--danger-bg) !important; }

/* ── App Footer ──────────────────────────────────────────── */
.app-footer {
  background: var(--white);
  border-top: 1px solid var(--app-border);
  padding: 20px 24px;
  margin-top: auto;
}
.app-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--grey-4);
}
.app-footer-links {
  display: flex;
  gap: 16px;
}
.app-footer-links a {
  font-size: 12px;
  color: var(--grey-4);
  transition: color var(--t);
}
.app-footer-links a:hover { color: var(--black); }

/* ── App Layout ──────────────────────────────────────────── */
.app-body {
  background: var(--app-bg);
  min-height: calc(100vh - 62px - 57px);
}
.app-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px;
}
.page-header {
  margin-bottom: 28px;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--black);
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: 14px;
  color: var(--grey-4);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  border: none;
  transition: all var(--t);
  white-space: nowrap;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: -0.1px;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); color: var(--white); }

.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: #333; color: var(--white); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--grey-2);
  color: var(--grey-5);
}
.btn-outline:hover { border-color: var(--black); color: var(--black); }

.btn-ghost { background: transparent; color: var(--grey-5); }
.btn-ghost:hover { background: var(--grey-1); color: var(--black); }

.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: #b91c1c; }

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn-xl { padding: 16px 40px; font-size: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card-sm { padding: 16px; }
.card-lg { padding: 32px; }

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.card-subtitle {
  font-size: 13px;
  color: var(--grey-4);
  margin-bottom: 20px;
}

/* Stat card */
.stat-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -1px;
  line-height: 1;
}
.stat-sub {
  font-size: 12px;
  color: var(--grey-4);
  margin-top: 4px;
}

/* ── Score Components ────────────────────────────────────── */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.score-badge-lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.score-good { background: var(--success-bg); color: var(--success); }
.score-warn { background: var(--warn-bg);    color: var(--warn); }
.score-bad  { background: var(--danger-bg);  color: var(--danger); }

/* Score ring (SVG) */
.score-ring { position: relative; width: 80px; height: 80px; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--grey-4);
  margin-bottom: 7px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--grey-2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  transition: border-color var(--t), box-shadow var(--t);
  font-family: var(--font);
}
.form-input::placeholder { color: var(--grey-3); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-error { color: var(--danger); font-size: 12px; margin-top: 5px; font-weight: 600; }
.form-hint  { color: var(--grey-4); font-size: 12px; margin-top: 5px; }

/* URL input (large, hero style) */
.url-input-wrap {
  display: flex;
  gap: 0;
  background: var(--white);
  border: 2px solid var(--grey-2);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.url-input-wrap:focus-within {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.url-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  font-family: var(--font);
}
.url-input-wrap input:focus { outline: none; }
.url-input-wrap input::placeholder { color: var(--grey-3); }
.url-input-wrap button {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t);
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
}
.url-input-wrap button:hover { background: var(--red); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  padding: 14px 18px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-error   { background: var(--danger-bg);  border: 1px solid rgba(220,38,38,0.2);  color: #991b1b; }
.alert-success { background: var(--success-bg); border: 1px solid rgba(22,163,74,0.2);  color: #14532d; }
.alert-warn    { background: var(--warn-bg);    border: 1px solid rgba(217,119,6,0.2);  color: #92400e; }
.alert-info    { background: var(--info-bg);    border: 1px solid rgba(37,99,235,0.2);  color: #1e3a8a; }

/* ── Tables ──────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
  background: var(--grey-1);
  border-bottom: 1px solid var(--app-border);
}
.data-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-border);
  color: var(--grey-5);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--grey-1); }

/* ── Loading ─────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--grey-2);
  border-top-color: var(--black);
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}
.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.spinner-red { border-top-color: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading bar (horizontal progress) */
.loading-bar {
  height: 2px;
  background: var(--grey-2);
  border-radius: 2px;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  animation: loadbar 1.5s ease infinite;
}
@keyframes loadbar {
  0% { width: 0%; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ── Empty States ────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 12px;
}
.empty-icon {
  font-size: 40px;
  opacity: 0.3;
  margin-bottom: 4px;
}
.empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}
.empty-desc {
  font-size: 13px;
  color: var(--grey-4);
  max-width: 320px;
  line-height: 1.6;
}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--app-border);
  margin-bottom: 24px;
}
.tab-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font);
}
.tab-btn:hover { color: var(--black); }
.tab-btn.active { color: var(--black); border-bottom-color: var(--red); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Progress Bar ────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--grey-1);
  border-radius: 6px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--red);
  transition: width 0.4s ease;
}
.progress-fill.green { background: var(--success); }

/* BIP intelligence progress */
.bip-progress { display: flex; flex-direction: column; gap: 6px; }
.bip-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-4);
}
.bip-progress-label span:last-child { color: var(--black); }

/* ── Tag / Pill ──────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--grey-1);
  color: var(--grey-5);
  gap: 4px;
}
.tag-red   { background: var(--red-light);    color: var(--red); }
.tag-green { background: var(--success-bg);   color: var(--success); }
.tag-warn  { background: var(--warn-bg);      color: var(--warn); }

/* ── Issue priority indicators ───────────────────────────── */
.issue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--app-border);
  gap: 12px;
}
.issue-row:last-child { border-bottom: none; }
.issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.issue-dot.high   { background: var(--danger); }
.issue-dot.medium { background: var(--warn); }
.issue-dot.low    { background: var(--success); }
.issue-text { font-size: 13px; font-weight: 500; color: var(--grey-5); flex: 1; }
.issue-pts {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
}

/* ── Content cards (create page) ─────────────────────────── */
.create-card {
  background: var(--white);
  border: 2px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px;
  cursor: pointer;
  transition: all var(--t);
  text-align: center;
}
.create-card:hover { border-color: var(--black); }
.create-card.selected { border-color: var(--red); background: var(--red-light); }
.create-card-icon { font-size: 28px; margin-bottom: 8px; }
.create-card-label { font-size: 13px; font-weight: 700; color: var(--black); }

/* ── Billing / Pricing ───────────────────────────────────── */
.plan-card {
  background: var(--white);
  border: 1.5px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.plan-card.popular {
  border-color: var(--black);
  border-width: 2px;
}
.plan-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--grey-4); }
.plan-price { font-size: 36px; font-weight: 900; color: var(--black); letter-spacing: -1.5px; line-height: 1; margin: 8px 0; }
.plan-price sup { font-size: 18px; letter-spacing: 0; }
.plan-price span { font-size: 14px; font-weight: 500; color: var(--grey-4); letter-spacing: 0; }
.plan-desc { font-size: 13px; color: var(--grey-4); margin-bottom: 20px; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--grey-5);
}
.plan-check { color: var(--success); font-weight: 700; flex-shrink: 0; }

/* ── Success / Error pages ───────────────────────────────── */
.center-page {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.center-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-xl);
  padding: 48px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow);
}
.center-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 24px;
}
.center-icon.success { background: var(--success-bg); }
.center-icon.error   { background: var(--danger-bg); }
.error-code { font-size: 80px; font-weight: 900; color: var(--grey-2); line-height: 1; }

/* ── Legal pages ─────────────────────────────────────────── */
.legal-page { padding: 48px 0 80px; }
.legal-page h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.legal-page .last-updated { color: var(--grey-4); font-size: 13px; margin-bottom: 40px; }
.legal-page h2 { font-size: 17px; font-weight: 700; margin: 32px 0 10px; }
.legal-page p  { color: var(--grey-5); margin-bottom: 14px; line-height: 1.75; font-size: 14px; }
.legal-page ul { color: var(--grey-5); padding-left: 20px; margin-bottom: 14px; }
.legal-page li { margin-bottom: 6px; font-size: 14px; }

/* ── Utility ─────────────────────────────────────────────── */
.text-red    { color: var(--red); }
.text-muted  { color: var(--grey-4); }
.text-small  { font-size: 12px; }
.text-center { text-align: center; }
.font-bold   { font-weight: 700; }
.font-black  { font-weight: 900; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.w-full { width: 100%; }

/* ── Flash notification ──────────────────────────────────── */
#mia-flash {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 9999;
  min-width: 280px;
  max-width: 420px;
  animation: slideIn 0.2s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pub-nav-links { gap: 18px; }
}

@media (max-width: 768px) {
  .pub-nav-links,
  .pub-nav-login,
  .pub-nav-btn { display: none; }
  .pub-nav-hamburger { display: flex; }

  .app-nav { display: none; }
  .app-header-inner { padding: 0 16px; }

  .container, .container-wide, .container-narrow { padding: 0 16px; }
  .app-page { padding: 20px 16px; }

  .pub-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pub-footer-grid > div:first-child { grid-column: 1 / -1; }
  .pub-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .card { padding: 16px; }
  .center-card { padding: 28px 20px; }

  .stat-value { font-size: 22px; }
}

@media (max-width: 480px) {
  .pub-footer-grid { grid-template-columns: 1fr; }
  .pub-footer-grid > div:first-child { grid-column: auto; }
}
/* ============================================================
   MIA Optimize — Phase 11 Design Upgrade
   New tokens, components, and layout patterns
   ============================================================ */

/* ── New design tokens ───────────────────────────────────── */
:root {
  --r-pill:       50px;
  --shadow-xs:    0 2px 8px rgba(0,0,0,0.04);
  --shadow-card:  0 8px 32px rgba(0,0,0,0.06);
  --shadow-float: 0 16px 48px rgba(0,0,0,0.12);
}

/* ── Score ring — XL (100px, dashboard strip) ────────────── */
.score-ring-xl {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.score-ring-xl svg { transform: rotate(-90deg); }
.score-ring-xl .score-val-xl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.score-ring-xl .score-num {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}
.score-ring-xl .score-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
}

/* ── Pill buttons ─────────────────────────────────────────── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-pill);
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
}
.btn-pill-primary {
  background: var(--black);
  color: var(--white);
}
.btn-pill-primary:hover { background: var(--red); color: var(--white); }
.btn-pill-red {
  background: var(--red);
  color: var(--white);
}
.btn-pill-red:hover { background: var(--red-dark); color: var(--white); }
.btn-pill-outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--app-border);
}
.btn-pill-outline:hover { border-color: var(--black); }
.btn-pill-sm {
  padding: 8px 18px;
  font-size: 12px;
}

/* ── Mobile sidebar ──────────────────────────────────────── */
.mob-hamburger {
  display: none;
  background: none;
  border: 1.5px solid var(--app-border);
  border-radius: var(--r-sm);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--black);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--t);
}
.mob-hamburger:hover { border-color: var(--grey-3); }

.mob-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  backdrop-filter: blur(2px);
}
.mob-sidebar-overlay.open { display: block; }

.mob-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--black);
  z-index: 2001;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mob-sidebar.open { transform: translateX(0); }

.mob-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mob-sidebar-logo {
  font-size: 17px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.5px;
}
.mob-sidebar-logo span { color: var(--red); }
.mob-sidebar-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.mob-sidebar-close:hover { color: var(--white); }

.mob-sidebar-body { flex: 1; padding: 12px 0; }
.mob-sidebar-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.3);
  padding: 12px 20px 6px;
}
.mob-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all var(--t);
}
.mob-sidebar-link:hover,
.mob-sidebar-link.active {
  background: rgba(255,255,255,0.05);
  color: var(--white);
}
.mob-sidebar-link.active { color: var(--red); }
.mob-sidebar-link .msb-icon { font-size: 15px; width: 20px; text-align: center; }

.mob-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mob-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.mob-sidebar-user .mob-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .mob-hamburger { display: flex; }
  .app-nav,
  .app-upgrade-btn { display: none !important; }
}

/* ── Audit context banner ─────────────────────────────────── */
.audit-ctx-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--info-bg);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--info);
}
.audit-ctx-banner strong { color: var(--black); }
.audit-ctx-banner .acb-use {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--info);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.audit-ctx-banner .acb-use:hover { text-decoration: underline; }

/* ── Brand DNA context panel ─────────────────────────────── */
.brand-ctx-panel {
  background: var(--grey-1);
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--red);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 16px;
}
.brand-ctx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.brand-ctx-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--red);
}
.brand-ctx-toggle {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-4);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}
.brand-ctx-toggle:hover { color: var(--black); }
.brand-ctx-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .brand-ctx-fields { grid-template-columns: 1fr; }
}
.brand-ctx-field label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
  display: block;
  margin-bottom: 4px;
}
.brand-ctx-field input,
.brand-ctx-field textarea {
  width: 100%;
  border: 1.5px solid var(--grey-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  resize: none;
}
.brand-ctx-field input:focus,
.brand-ctx-field textarea:focus {
  outline: none;
  border-color: var(--black);
}

/* ── Chat clarification panel ─────────────────────────────── */
.chat-wrap {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  display: none;
}
.chat-wrap.active { display: block; }
.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--grey-1);
}
.chat-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.chat-header-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
}
.chat-header-sub {
  font-size: 11px;
  color: var(--grey-4);
  margin-left: auto;
}
.chat-messages {
  padding: 20px;
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 80%;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
}
.chat-msg-mia {
  background: var(--grey-1);
  border: 1px solid var(--app-border);
  color: var(--black);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-msg-user {
  background: var(--black);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--app-border);
  background: var(--grey-1);
}
.chat-input {
  flex: 1;
  border: 1.5px solid var(--app-border);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  outline: none;
}
.chat-input:focus { border-color: var(--black); }
.chat-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--black);
  border: none;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t);
}
.chat-send-btn:hover { background: var(--red); }

/* ── Content output — editorial sections ─────────────────── */
.content-output-wrap {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  display: none;
}
.content-output-wrap.active { display: block; }
.content-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--app-border);
  background: var(--grey-1);
}
.content-output-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
}
.content-output-actions {
  display: flex;
  gap: 8px;
}
.content-output-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 40px;
}
@media (max-width: 600px) {
  .content-output-body { padding: 20px 16px; }
}

.content-section-block {
  margin-bottom: 32px;
  position: relative;
}
.content-section-block:last-child { margin-bottom: 0; }
.csb-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.csb-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--grey-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 28px;
  padding-top: 3px;
}
.csb-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--red);
  margin-bottom: 4px;
}
.csb-heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.3;
}
.csb-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--grey-5);
  padding-left: 44px;
  white-space: pre-wrap;
}
.csb-divider {
  height: 1px;
  background: var(--grey-2);
  margin: 24px 0;
}

/* Content section toolbar (floating on hover) */
.csb-toolbar {
  display: none;
  position: absolute;
  top: -14px;
  right: 0;
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-pill);
  padding: 4px 8px;
  gap: 2px;
  box-shadow: var(--shadow-float);
  z-index: 10;
  align-items: center;
}
.content-section-block:hover .csb-toolbar { display: flex; }
.csb-tool-btn {
  background: none;
  border: none;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-4);
  cursor: pointer;
  border-radius: 20px;
  font-family: var(--font);
  white-space: nowrap;
  transition: all var(--t);
}
.csb-tool-btn:hover {
  background: var(--grey-1);
  color: var(--black);
}
.csb-tool-sep {
  width: 1px;
  height: 14px;
  background: var(--app-border);
  margin: 0 2px;
}

/* ── History drawer ───────────────────────────────────────── */
.history-drawer {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.history-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: var(--font);
  transition: background var(--t);
}
.history-drawer-toggle:hover { background: var(--grey-1); }
.history-drawer-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
}
.history-drawer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  padding: 0 6px;
}
.history-drawer-chevron {
  font-size: 12px;
  color: var(--grey-4);
  transition: transform 0.2s ease;
}
.history-drawer.open .history-drawer-chevron { transform: rotate(180deg); }
.history-drawer-body {
  display: none;
  border-top: 1px solid var(--app-border);
}
.history-drawer.open .history-drawer-body { display: block; }
.history-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--grey-1);
  transition: background var(--t);
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: var(--grey-1); }
.hi-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--grey-1);
  color: var(--grey-4);
  border: 1px solid var(--app-border);
  flex-shrink: 0;
  white-space: nowrap;
}
.hi-body { flex: 1; min-width: 0; }
.hi-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hi-meta { font-size: 11px; color: var(--grey-4); margin-top: 2px; }
.hi-scores {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.hi-score-before { color: var(--grey-4); }
.hi-score-arrow { color: var(--grey-3); }
.hi-score-after-good { color: var(--success); }
.hi-score-after-bad  { color: var(--danger); }
.hi-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.hi-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--app-border);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
}
.hi-btn:hover { border-color: var(--black); }
.hi-btn-primary {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.hi-btn-primary:hover { background: var(--red); border-color: var(--red); }

/* ── Social — platform + format selectors ─────────────────── */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
}
.platform-tile {
  background: var(--white);
  border: 1.5px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 16px 10px;
  cursor: pointer;
  text-align: center;
  transition: all var(--t);
  user-select: none;
}
.platform-tile:hover {
  border-color: var(--grey-3);
  box-shadow: var(--shadow-xs);
}
.platform-tile.selected {
  border-color: var(--black);
  background: var(--black);
}
.platform-tile.selected .pt-name { color: var(--white); }
.platform-tile.selected .pt-tip  { color: rgba(255,255,255,0.5); }
.pt-icon { font-size: 22px; margin-bottom: 6px; }
.pt-name { font-size: 12px; font-weight: 700; color: var(--black); }
.pt-tip  { font-size: 10px; color: var(--grey-4); margin-top: 2px; }

.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .format-grid { grid-template-columns: repeat(2, 1fr); }
}
.format-tile {
  background: var(--white);
  border: 1.5px solid var(--app-border);
  border-radius: var(--r);
  padding: 14px 12px;
  cursor: pointer;
  transition: all var(--t);
  user-select: none;
}
.format-tile:hover { border-color: var(--grey-3); box-shadow: var(--shadow-xs); }
.format-tile.selected {
  border-color: var(--red);
  background: var(--red-light);
}
.ft-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.ft-structure {
  font-size: 10px;
  color: var(--grey-4);
  line-height: 1.5;
}
.ft-structure span {
  display: block;
}

/* ── Competitor — Bain-style matrix ───────────────────────── */
.bain-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 32px; }

.bain-matrix {
  display: grid;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--app-border);
  margin-bottom: 20px;
}
.bain-matrix-header {
  display: grid;
  background: var(--grey-1);
  border-bottom: 1px solid var(--app-border);
}
.bain-matrix-row {
  display: grid;
  border-bottom: 1px solid var(--app-border);
}
.bain-matrix-row:last-child { border-bottom: none; }
.bain-cell {
  padding: 14px 16px;
  border-right: 1px solid var(--app-border);
}
.bain-cell:last-child { border-right: none; }
.bain-cell-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-4);
}
.bain-cell-site {
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bain-score-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.bain-you { background: var(--white); }
.bain-comp { background: var(--grey-1); }

.bain-insight-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .bain-insight-cards { grid-template-columns: 1fr; }
}
.bain-insight-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.bain-insight-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--grey-4);
  margin-bottom: 12px;
}
.bain-gap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--grey-1);
  font-size: 12px;
  color: var(--grey-5);
  line-height: 1.5;
}
.bain-gap-item:last-child { border-bottom: none; }
.bain-gap-icon { font-size: 14px; flex-shrink: 0; }

.bain-recommendation {
  background: var(--black);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.bain-rec-icon { font-size: 24px; flex-shrink: 0; }
.bain-rec-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--red);
  margin-bottom: 6px;
}
.bain-rec-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.7;
}

/* ── Quick-chip suggestions (Copilot entry) ───────────────── */
.quick-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.quick-chip {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--app-border);
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-5);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font);
}
.quick-chip:hover {
  border-color: var(--black);
  color: var(--black);
  box-shadow: var(--shadow-xs);
}

/* ── Copilot entry state ──────────────────────────────────── */
.copilot-entry {
  text-align: center;
  padding: 48px 32px 32px;
  max-width: 600px;
  margin: 0 auto;
}
.copilot-greeting {
  font-size: 24px;
  font-weight: 900;
  color: var(--black);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.copilot-sub {
  font-size: 14px;
  color: var(--grey-4);
  margin-bottom: 24px;
}
.copilot-input-wrap {
  position: relative;
  margin-bottom: 16px;
}
.copilot-input {
  width: 100%;
  border: 1.5px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 16px 52px 16px 20px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  box-shadow: var(--shadow-card);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.copilot-input:focus {
  border-color: var(--black);
  box-shadow: var(--shadow-float);
}
.copilot-send {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--black);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--white);
  transition: background var(--t);
}
.copilot-send:hover { background: var(--red); }

/* Recent content jump-back cards */
.recent-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 32px;
  text-align: left;
}
@media (max-width: 640px) {
  .recent-content-grid { grid-template-columns: 1fr; }
}
.rcg-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 16px;
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
  color: var(--black);
  display: block;
}
.rcg-card:hover {
  border-color: var(--grey-3);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.rcg-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--grey-4);
  margin-bottom: 6px;
}
.rcg-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.rcg-meta { font-size: 11px; color: var(--grey-4); }

/* ── Social output — format-aware blocks ──────────────────── */
.social-output-wrap {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  display: none;
}
.social-output-wrap.active { display: block; }
.social-output-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--app-border);
  background: var(--grey-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-output-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}
.slide-block {
  border-bottom: 1px solid var(--app-border);
  padding: 16px 20px;
}
.slide-block:last-child { border-bottom: none; }
.slide-num {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
  margin-bottom: 4px;
}
.slide-content {
  font-size: 13px;
  color: var(--grey-5);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ── Advanced prompt toggle ───────────────────────────────── */
.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-4);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  padding: 0;
  transition: color var(--t);
}
.advanced-toggle:hover { color: var(--black); }
.advanced-panel {
  display: none;
  margin-top: 12px;
  background: var(--grey-1);
  border: 1px solid var(--app-border);
  border-radius: var(--r);
  padding: 14px;
}
.advanced-panel.open { display: block; }
.advanced-panel textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--app-border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 12px;
  font-family: monospace;
  color: var(--grey-5);
  background: var(--white);
  resize: vertical;
  outline: none;
}

/* ── Step indicator ───────────────────────────────────────── */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid var(--app-border);
  color: var(--grey-4);
  background: var(--white);
  transition: all var(--t);
}
.step-dot.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.step-dot.done {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.step-line {
  flex: 1;
  height: 2px;
  background: var(--app-border);
}
.step-line.done { background: var(--success); }

/* ── Dashboard home v2 extras ─────────────────────────────── */
.db-score-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.db-score-card {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t);
}
.db-score-card:hover { box-shadow: var(--shadow-card); }
.db-score-delta {
  font-size: 11px;
  font-weight: 700;
}
.db-score-delta.up   { color: var(--success); }
.db-score-delta.down { color: var(--danger); }
.db-score-delta.flat { color: var(--grey-4); }

/* stat cards v2 — icon box */
.stat-card-v2 {
  background: var(--white);
  border: 1px solid var(--app-border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}
.stat-card-v2-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--grey-1);
  border: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 12px;
}
.stat-card-v2-num {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--black);
  margin-bottom: 4px;
}
.stat-card-v2-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--grey-4);
  margin-bottom: 2px;
}
.stat-card-v2-sub {
  font-size: 11px;
  color: var(--grey-4);
}

@media (max-width: 1024px) {
  .db-score-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .db-score-strip { grid-template-columns: repeat(2, 1fr); }
  .bain-wrap { padding: 16px; }
}