:root {
    --violet-50: #f5f3ff;
    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-300: #c4b5fd;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-900: #3b0764;

    --ink: #16121f;
    --ink-soft: #2a2440;
    --muted: #6b7280;
    --muted-2: #9ca3af;
    --line: #e9e6f0;
    --bg: #ffffff;
    --bg-soft: #faf9fc;
    --bg-lav: #f3f1fb;

    --green-bg: #dcfce7;
    --green-fg: #15803d;
    --blue-bg: #dbeafe;
    --blue-fg: #1d4ed8;
    --orange-bg: #ffedd5;
    --orange-fg: #c2410c;
    --red-bg: #fee2e2;
    --red-fg: #dc2626;
    --amber-bg: #fef3c7;
    --amber-fg: #b45309;
    --teal-bg: #ccfbf1;
    --teal-fg: #0d9488;
    --pink-bg: #fce7f3;
    --pink-fg: #db2777;
    --indigo-bg: #e0e7ff;
    --indigo-fg: #4f46e5;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 3px rgba(24, 18, 43, .06), 0 1px 2px rgba(24, 18, 43, .04);
    --shadow-md: 0 10px 30px -10px rgba(76, 29, 149, .18);
    --shadow-lg: 0 30px 60px -20px rgba(76, 29, 149, .28);
    --container: 1160px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; scroll-padding-top: 92px; }

  body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }

  .container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
  }

  .section { padding: 88px 0; }

  .eyebrow {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--violet-600);
    margin-bottom: 14px;
  }

  .section-title {
    text-align: center;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    max-width: 720px;
    margin: 0 auto 56px;
    line-height: 1.2;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
  }
  .btn svg { width: 18px; height: 18px; }
  .btn-primary {
    background: linear-gradient(180deg, var(--violet-600), var(--violet-700));
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .55);
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -8px rgba(124, 58, 237, .6); }
  .btn-ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
  }
  .btn-ghost:hover { transform: translateY(-1px); border-color: var(--violet-300); }
  .btn-light {
    background: #fff;
    color: var(--violet-700);
  }
  .btn-light:hover { transform: translateY(-1px); }
  .btn-block { width: 100%; }
  .btn-danger { background: #fff; color: var(--red-fg); border-color: #fbcfcf; box-shadow: var(--shadow-sm); }
  .btn-danger:hover { transform: translateY(-1px); background: var(--red-bg); }

  /* ---------- Badges / pills ---------- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    line-height: 1;
  }
  .pill svg { width: 14px; height: 14px; }
  .pill-violet { background: var(--violet-100); color: var(--violet-700); }
  .pill-green { background: var(--green-bg); color: var(--green-fg); }
  .pill-blue { background: var(--blue-bg); color: var(--blue-fg); }
  .pill-orange { background: var(--orange-bg); color: var(--orange-fg); }
  .pill-red { background: var(--red-bg); color: var(--red-fg); }
  .pill-amber { background: var(--amber-bg); color: var(--amber-fg); }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .site-header .container.header-inner {
    max-width: 100%;
    padding: 0 clamp(18px, 3vw, 40px);
  }
  .header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 74px;
  }
  .brand { display: flex; align-items: center; gap: 10px; flex: none; }
  .brand-mark {
    height: 50px;
    width: auto;
    flex: none;
    object-fit: contain;
  }
  .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
  .brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
  .brand-name span { color: var(--violet-600); }
  .brand-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

  .nav-wrap {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-left: auto;
  }
  .main-nav { display: flex; align-items: center; gap: 28px; }
  .main-nav a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: color .15s ease;
  }
  .main-nav a:hover { color: var(--violet-600); }
  .header-actions { display: flex; align-items: center; gap: 16px; }
  .nav-login {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    transition: color .15s ease;
  }
  .nav-login:hover { color: var(--violet-600); }
  .lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 6px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
  }
  .lang-switch a,
  .lang-switch button {
    color: var(--muted-2);
    transition: color .15s ease;
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    letter-spacing: inherit;
  }
  .lang-switch a:hover,
  .lang-switch button:hover { color: var(--violet-600); }
  .lang-switch a.lang-active,
  .lang-switch button.lang-active { color: var(--violet-600); }
  .lang-switch .lang-sep { color: var(--line); font-weight: 400; }
  .btn-sm { padding: 9px 17px; font-size: 14px; border-radius: 10px; }
  .nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle .ico-close { display: none; }
  .header-inner.open .nav-toggle .ico-open { display: none; }
  .header-inner.open .nav-toggle .ico-close { display: block; }

  @media (max-width: 1080px) {
    .nav-toggle { display: flex; }
    .nav-wrap {
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      margin-left: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: #fff;
      border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      padding: 8px 24px 20px;
      display: none;
    }
    .header-inner.open .nav-wrap { display: flex; }
    .main-nav { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav a { padding: 13px 2px; border-bottom: 1px solid var(--line); }
    .header-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-top: 16px;
    }
    .nav-login { padding: 8px 0; text-align: center; }
    .lang-switch {
      justify-content: center;
      margin: 4px 0;
      padding: 10px 0;
      border-left: none;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .header-actions .btn { width: 100%; }
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    background:
      radial-gradient(900px 500px at 78% -8%, rgba(139, 92, 246, .14), transparent 60%),
      radial-gradient(700px 500px at -6% 10%, rgba(124, 58, 237, .08), transparent 55%),
      var(--bg);
    padding: 60px 0 96px;
    overflow: hidden;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 56px;
    align-items: center;
  }
  .hero-grid > * { min-width: 0; }
  .checklist li { overflow-wrap: anywhere; }
  .hero h1 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 900;
    margin-bottom: 22px;
  }
  .hero h1 .accent { color: var(--violet-600); display: block; }
  .hero-lead {
    font-size: 17.5px;
    color: var(--ink-soft);
    max-width: 30em;
    margin-bottom: 26px;
  }
  .checklist { list-style: none; display: grid; gap: 13px; margin-bottom: 30px; }
  .checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--ink-soft); font-weight: 500; }
  .check-ico {
    width: 22px; height: 22px; flex: none; margin-top: 1px;
    color: var(--violet-600);
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }

  .social-proof { display: flex; align-items: center; gap: 14px; }
  .avatars { display: flex; }
  .avatars img,
  .avatars span {
    width: 38px; height: 38px; border-radius: 999px;
    border: 2.5px solid #fff; object-fit: cover; margin-left: -12px;
    background: var(--violet-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--violet-700);
  }
  .avatars :first-child { margin-left: 0; }
  .social-proof p { font-size: 13.5px; color: var(--muted); font-weight: 500; line-height: 1.35; }

  /* ---------- Dashboard mock ---------- */
  .hero-visual { position: relative; }

  .float-tag {
    position: absolute;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
  }
  .float-tag svg { width: 16px; height: 16px; }
  .float-tag.t-find { top: -18px; left: 4%; color: var(--green-fg); }
  .float-tag.t-analysis { top: -30px; right: 8%; color: var(--blue-fg); }
  .float-tag.t-extract { bottom: -20px; left: 6%; color: var(--violet-700); }
  .float-tag.t-score { bottom: -26px; right: 4%; color: var(--orange-fg); }

  .dashboard {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
  }
  .dash-rail {
    width: 52px;
    flex: none;
    background: linear-gradient(180deg, var(--violet-700), var(--violet-900));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
  }
  .dash-rail .logo { width: 24px; height: 24px; color: #fff; opacity: .95; }
  .dash-rail .dot { width: 22px; height: 22px; border-radius: 8px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; }
  .dash-rail .dot svg { width: 13px; height: 13px; }
  .dash-rail .dot.active { background: rgba(255,255,255,.28); color: #fff; }

  .dash-body { flex: 1; min-width: 0; padding: 16px 18px 20px; }
  .dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .dash-top h3 { font-size: 14.5px; font-weight: 700; }
  .dash-search {
    display: flex; align-items: center; gap: 7px;
    background: var(--bg-lav); border-radius: 8px;
    padding: 6px 10px; font-size: 11.5px; color: var(--muted-2);
    min-width: 120px;
  }
  .dash-search svg { width: 12px; height: 12px; }
  .dash-icons { display: flex; gap: 10px; align-items: center; color: var(--muted-2); }
  .dash-icons svg { width: 15px; height: 15px; }
  .dash-avatar { width: 22px; height: 22px; border-radius: 999px; background: var(--violet-200); }

  .stat-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 18px;
  }
  .stat {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 10px;
    background: var(--bg-soft);
  }
  .stat .n { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
  .stat .l { font-size: 9.5px; color: var(--muted); font-weight: 600; line-height: 1.25; margin-top: 2px; }
  .stat .k { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-bottom: 3px; }
  .k.v { background: var(--violet-500); }
  .k.b { background: #3b82f6; }
  .k.o { background: #f59e0b; }
  .k.r { background: #ef4444; }
  .k.g { background: #22c55e; }

  .dash-body h4 { font-size: 12px; font-weight: 700; margin-bottom: 10px; }

  .lead-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .lead-table th {
    text-align: left;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-2);
    font-weight: 700;
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--line);
  }
  .lead-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--bg-lav);
    color: var(--ink-soft);
    vertical-align: middle;
  }
  .lead-table tr:last-child td { border-bottom: none; }
  .lead-table .biz { font-weight: 700; color: var(--ink); }
  .lead-table .score { font-weight: 800; }
  .mini-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .mini-pill.hot { background: var(--red-bg); color: var(--red-fg); }
  .mini-pill.warm { background: var(--amber-bg); color: var(--amber-fg); }

  /* ---------- Logo strip ---------- */
  .logos { padding: 46px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
  .logos p { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-bottom: 26px; }
  .logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
  }
  .logo-row span {
    font-size: 22px;
    font-weight: 800;
    color: var(--muted-2);
    letter-spacing: -.02em;
    opacity: .8;
    flex: 1;
    text-align: center;
    white-space: nowrap;
  }

  /* ---------- How it works ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    position: relative;
  }
  .step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .step-ico {
    width: 40px; height: 40px;
    margin: 0 auto 16px;
    color: var(--violet-600);
  }
  .step h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .step p { font-size: 13px; color: var(--muted); }

  /* ---------- Features ---------- */
  .features-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
  }
  .feature-list { display: grid; gap: 10px; }
  .feature {
    display: flex;
    gap: 16px;
    padding: 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background .16s ease, border-color .16s ease;
  }
  .feature:hover { background: var(--violet-50); border-color: var(--violet-100); }
  .feature-ico {
    width: 42px; height: 42px;
    flex: none;
    border-radius: 11px;
    background: var(--violet-100);
    color: var(--violet-700);
    display: flex; align-items: center; justify-content: center;
  }
  .feature-ico svg { width: 21px; height: 21px; }
  .feature h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
  .feature p { font-size: 13.5px; color: var(--muted); }

  /* Lead card */
  .lead-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 24px;
  }
  .lead-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .lead-card-head h3 { font-size: 18px; font-weight: 800; }
  .lead-card-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
  }
  .score-box .label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .score-box .big { font-size: 40px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
  .score-box .big small { font-size: 15px; font-weight: 700; color: var(--muted-2); }
  .score-box .hint { font-size: 12.5px; color: var(--violet-700); font-weight: 600; margin-top: 6px; }

  .contact-box .label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
  .contact-line { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
  .contact-line svg { width: 15px; height: 15px; color: var(--violet-500); flex: none; }

  .ai-analysis h4,
  .opps h4 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
  .ai-analysis p { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
  .opps-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .opp {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600;
    background: var(--green-bg); color: var(--green-fg);
    padding: 5px 10px; border-radius: 999px;
  }
  .opp svg { width: 12px; height: 12px; }
  .lead-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .lead-card-actions .btn { font-size: 13px; padding: 10px 16px; }

  /* ---------- CTA / Pricing ---------- */
  .cta {
    background:
      radial-gradient(600px 400px at 12% 0%, rgba(139, 92, 246, .35), transparent 60%),
      linear-gradient(135deg, #2a0f5c, #4c1d95 55%, #3b1178);
    color: #fff;
    padding: 88px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 56px;
    align-items: center;
  }
  .cta h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .cta > .container > .cta-grid > .cta-copy > p { color: rgba(255,255,255,.8); font-size: 16px; margin-bottom: 24px; max-width: 26em; }
  .cta-checklist { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; }
  .cta-checklist li { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.92); }
  .cta-checklist svg { width: 20px; height: 20px; color: var(--violet-300); flex: none; }
  .cta-mascot { width: 190px; max-width: 45%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }

  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .plan {
    background: #fff;
    color: var(--ink);
    border-radius: 16px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .plan.featured {
    transform: translateY(-14px);
    box-shadow: 0 40px 70px -20px rgba(0,0,0,.5);
    border: 2px solid var(--violet-500);
  }
  .plan-flag {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--violet-500), var(--violet-700));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .plan h3 { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 3px; }
  .plan .who { font-size: 12.5px; color: var(--muted); text-align: center; margin-bottom: 16px; }
  .plan .price { text-align: center; margin-bottom: 18px; }
  .plan .price .amt { font-size: 34px; font-weight: 900; letter-spacing: -.03em; }
  .plan .price .per { font-size: 13px; color: var(--muted); font-weight: 600; }
  .plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; flex: 1; }
  .plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-soft); }
  .plan li svg { width: 16px; height: 16px; color: var(--violet-600); flex: none; margin-top: 2px; }

  /* ---------- Footer benefits ---------- */
  .foot {
    background: var(--ink);
    color: #fff;
    padding: 32px 0 44px;
  }
  .foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
  }
  .foot-item { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px; }
  .foot-item svg { width: 26px; height: 26px; color: var(--violet-300); flex: none; }
  .foot-item .t { font-size: 13.5px; font-weight: 700; }
  .foot-item .d { font-size: 12px; color: rgba(255,255,255,.6); }

  /* footer columns */
  .foot-cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .foot-col h4 {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 15px;
  }
  .foot-col a {
    display: block;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .6);
    padding: 6px 0;
    transition: color .15s ease;
  }
  .foot-col a:hover { color: #fff; }
  .foot-brand .fc-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .foot-brand .fc-logo img { height: 42px; width: auto; flex: none; }
  .foot-brand .fc-logo .brand-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
  .foot-brand .fc-logo .brand-name span { color: var(--violet-300); }
  .fc-tag { font-size: 13.5px; color: rgba(255, 255, 255, .58); line-height: 1.6; margin-bottom: 18px; max-width: 24em; }
  .fc-social { display: flex; gap: 10px; }
  .fc-social a {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8);
    padding: 0;
    transition: background .15s ease, color .15s ease;
  }
  .fc-social a:hover { background: var(--violet-600); color: #fff; }
  .fc-social svg { width: 17px; height: 17px; }

  @media (max-width: 760px) {
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
    .foot-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 440px) {
    .foot-cols { grid-template-columns: 1fr; }
  }

  .copyright { text-align: center; font-size: 12.5px; color: var(--muted-2); padding: 22px 0 30px; background: var(--ink); }

  /* ---------- FAQ ---------- */
  .faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
  .faq-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 0 22px;
    box-shadow: var(--shadow-sm);
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-ico {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--violet-100);
    color: var(--violet-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    transition: transform .2s ease;
  }
  .faq-item[open] .faq-ico { transform: rotate(45deg); }
  .faq-item p {
    margin: 0;
    padding: 0 0 20px;
    font-size: 14px;
    color: var(--muted);
    max-width: 62ch;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 64px; }
    .cta-grid { grid-template-columns: 1fr; gap: 44px; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .features-wrap { grid-template-columns: 1fr; gap: 36px; }
    .plan.featured { transform: none; }
  }

  @media (max-width: 760px) {
    .section { padding: 64px 0; }
    .hero { padding: 40px 0 72px; }
    .stat-row { grid-template-columns: repeat(3, 1fr); }
    .stat:nth-child(4), .stat:nth-child(5) { display: none; }
    .plans { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .lead-card-grid { grid-template-columns: 1fr; }
    .logo-row span { flex: 0 0 40%; font-size: 18px; }
    .float-tag { display: none; }
    .hero-actions .btn { flex: 1; }
    .lead-table .cat-col, .lead-table td:nth-child(2) { display: none; }
  }

  @media (max-width: 480px) {
    .brand-tag { display: none; }
    .header-inner { height: 64px; }
    .brand-mark { height: 42px; }
  }

  @media (max-width: 420px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3) { display: none; }
  }

  /* ===================================================
     HOW IT WORKS — detail page (kak-raboti.html)
     =================================================== */

  .page-hero {
    text-align: center;
    padding: 66px 0 34px;
    background:
      radial-gradient(760px 380px at 50% -12%, rgba(139, 92, 246, .13), transparent 62%),
      var(--bg);
  }
  .page-hero h1 {
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: 14px;
  }
  .page-hero h1 span { color: var(--violet-600); }
  .page-hero .lead {
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--ink-soft);
  }
  .page-hero .lead b { color: var(--violet-600); font-weight: 700; }

  /* overview strip */
  .flow-strip {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 26px 0 46px;
  }
  .flow-item { flex: 1 1 0; min-width: 128px; max-width: 168px; text-align: center; }
  .flow-ico {
    width: 58px; height: 58px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-600);
  }
  .flow-ico svg { width: 26px; height: 26px; }
  .flow-item h3 { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
  .flow-item p { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
  .flow-arrow { align-self: flex-start; margin-top: 20px; color: var(--violet-300); flex: none; }
  .flow-arrow svg { width: 22px; height: 22px; }

  /* alternating detail rows */
  .hiw { display: grid; gap: 26px; padding-bottom: 20px; }
  .hiw-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 36px;
    box-shadow: var(--shadow-sm);
  }
  .hiw-row.reverse .hiw-text { order: 2; }
  .hiw-row.reverse .hiw-visual { order: 1; }
  .hiw-text h2 {
    font-size: clamp(19px, 2.3vw, 26px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.22;
    margin-bottom: 12px;
  }
  .hiw-text h2 .sub { display: block; color: var(--muted); }
  .hiw-text > p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
  .hiw-check { list-style: none; display: grid; gap: 11px; }
  .hiw-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); }
  .hiw-check svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--violet-600); }

  /* ---- mockups ---- */
  .mk { position: relative; }
  .mk-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 20px;
  }
  .mk-card-title { font-size: 14px; font-weight: 800; margin-bottom: 14px; }
  .mk-label { font-size: 11px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 5px; }
  .mk-field {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--ink-soft);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    margin-bottom: 12px;
    background: var(--bg-soft);
  }
  .mk-field svg { width: 13px; height: 13px; color: var(--muted-2); flex: none; }
  .mk-field.kw { color: var(--violet-700); font-weight: 600; }

  /* search + map */
  .mk-map {
    margin-top: 14px;
    height: 150px;
    border-radius: 14px;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(0deg, rgba(124,58,237,.05), rgba(124,58,237,.05)),
      repeating-linear-gradient(0deg, #eef0f4 0 22px, #f6f7f9 22px 44px),
      repeating-linear-gradient(90deg, #eef0f4 0 22px, #f6f7f9 22px 44px);
  }
  .mk-map-tag {
    position: absolute; top: 14px; right: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 11px; font-size: 10.5px; color: var(--muted);
    box-shadow: var(--shadow-sm); line-height: 1.3;
  }
  .mk-map-tag b { display: block; color: var(--ink); font-size: 12px; }
  .mk-pin { position: absolute; width: 14px; height: 14px; color: var(--violet-600); }
  .mk-city { position: absolute; left: 16px; bottom: 12px; font-size: 10px; font-weight: 700; color: var(--muted); }

  /* browser window + score */
  .mk-browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
  .mk-bbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
  .mk-bbar i { width: 8px; height: 8px; border-radius: 999px; background: #d7d3e0; display: block; }
  .mk-url { margin-left: 8px; font-size: 10.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; flex: 1; }
  .mk-bbody { display: flex; gap: 16px; padding: 18px; align-items: center; }
  .gauge {
    flex: none;
    width: 78px; height: 78px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 900; color: var(--ink);
    background: conic-gradient(#f59e0b calc(62% * 1), var(--line) 0);
    position: relative;
  }
  .gauge small { font-size: 9px; font-weight: 700; color: var(--muted-2); }
  .gauge::after { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 999px; }
  .gauge span { position: relative; z-index: 1; }
  .mk-checks { list-style: none; display: grid; gap: 7px; flex: 1; }
  .mk-checks li { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--ink-soft); gap: 10px; }
  .mk-checks svg { width: 14px; height: 14px; flex: none; }
  .s-x { color: var(--red-fg); }
  .s-warn { color: var(--amber-fg); }
  .s-ok { color: var(--green-fg); }
  .mk-phone {
    position: absolute; right: -6px; bottom: -22px;
    width: 116px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 14px 12px; text-align: center;
  }
  .mk-phone .ph-brand { font-size: 8px; font-weight: 800; letter-spacing: .1em; color: var(--violet-600); margin-bottom: 8px; }
  .mk-phone .ph-face { width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 999px; background: var(--violet-100); display: flex; align-items: center; justify-content: center; color: var(--violet-600); }
  .mk-phone .ph-face svg { width: 22px; height: 22px; }
  .mk-phone h4 { font-size: 10px; font-weight: 700; margin-bottom: 8px; }
  .mk-phone .ph-btn { font-size: 9px; font-weight: 700; color: #fff; background: var(--violet-600); border-radius: 7px; padding: 5px 0; }

  /* opportunity 3-col */
  .mk-opp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; }
  .opp-col { padding: 18px 16px; }
  .opp-col + .opp-col { border-left: 1px solid var(--line); }
  .opp-h { font-size: 11px; font-weight: 800; margin-bottom: 12px; }
  .opp-score { font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: var(--green-fg); line-height: 1; }
  .opp-score small { font-size: 13px; font-weight: 700; color: var(--muted-2); }
  .opp-hot { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--orange-fg); }
  .opp-pill { display: block; font-size: 11px; font-weight: 600; color: var(--green-fg); background: var(--green-bg); border-radius: 7px; padding: 6px 9px; margin-bottom: 6px; }
  .opp-why { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

  /* contact card */
  .mk-contact .c-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; flex-wrap: wrap; }
  .mk-contact .c-line svg { width: 15px; height: 15px; color: var(--violet-500); flex: none; }
  .mk-contact .pill { padding: 2px 8px; font-size: 10px; }
  .c-social { display: flex; gap: 10px; margin-top: 4px; }
  .c-social span { width: 30px; height: 30px; border-radius: 8px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .c-social svg { width: 15px; height: 15px; }
  .mk-shield {
    position: absolute; right: -10px; bottom: -14px;
    width: 52px; height: 52px; border-radius: 999px;
    background: var(--green-bg); color: var(--green-fg);
    display: flex; align-items: center; justify-content: center;
    border: 4px solid #fff; box-shadow: var(--shadow-md);
  }
  .mk-shield svg { width: 24px; height: 24px; }

  /* email compose */
  .mk-email .em-row { display: flex; gap: 8px; font-size: 12px; color: var(--ink-soft); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .mk-email .em-row span { color: var(--muted); font-weight: 700; flex: none; }
  .mk-email .em-body { font-size: 12px; color: var(--ink-soft); line-height: 1.6; padding-top: 12px; }
  .em-plane { position: absolute; right: 8px; top: -18px; width: 34px; color: var(--violet-500); }
  .em-bot { position: absolute; right: -14px; bottom: -20px; width: 78px; }

  /* campaigns dashboard */
  .camp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
  .camp-stats > div { border: 1px solid var(--line); border-radius: 9px; padding: 8px 6px; text-align: center; background: var(--bg-soft); }
  .camp-stats b { display: block; font-size: 14px; font-weight: 800; }
  .camp-stats span { font-size: 8.5px; color: var(--muted); font-weight: 600; }
  .camp-h { font-size: 11px; font-weight: 800; margin-bottom: 10px; }
  .camp-row { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 8px 0; border-bottom: 1px solid var(--bg-lav); }
  .camp-row:last-child { border-bottom: none; }
  .camp-row b { font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }
  .camp-row .act { color: var(--muted); flex: none; }
  .camp-row .ago { color: var(--muted-2); flex: none; }
  .camp-row .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
  .camp-row .dot.g { background: #22c55e; }
  .camp-row .dot.o { background: #f59e0b; }
  .camp-row .dot.b { background: #3b82f6; }

  @media (max-width: 960px) {
    .flow-arrow { display: none; }
  }
  @media (max-width: 900px) {
    .hiw-row { grid-template-columns: 1fr; gap: 30px; padding: 26px; }
    .hiw-row.reverse .hiw-text { order: 1; }
    .hiw-row.reverse .hiw-visual { order: 2; }
    .mk-phone { position: relative; right: auto; bottom: auto; margin: 16px auto 0; }
    .em-bot { display: none; }
  }
  @media (max-width: 560px) {
    .mk-bbody { flex-direction: column; }
    .mk-opp { grid-template-columns: 1fr; }
    .opp-col + .opp-col { border-left: none; border-top: 1px solid var(--line); }
    .camp-stats { grid-template-columns: repeat(3, 1fr); }
  }

  /* soft CTA band */
  .cta-soft {
    background: linear-gradient(180deg, var(--violet-50), #efe9fc);
    border-top: 1px solid var(--violet-100);
    border-bottom: 1px solid var(--violet-100);
    padding: 44px 0;
  }
  .cta-soft-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr auto;
    gap: 32px;
    align-items: center;
  }
  .cta-soft h2 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
  .cta-soft ul { list-style: none; display: grid; gap: 9px; }
  .cta-soft li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
  .cta-soft li svg { width: 17px; height: 17px; color: var(--violet-600); flex: none; }
  @media (max-width: 860px) {
    .cta-soft-grid { grid-template-columns: 1fr; gap: 22px; }
    .cta-soft .btn { width: 100%; }
  }

  /* ===================================================
     WHAT YOU GET — detail page (kakvo-poluchavate.html)
     =================================================== */

  /* green mini tags in the hero dashboard table */
  .tag-g {
    display: inline-block;
    font-size: 9px; font-weight: 600;
    background: var(--green-bg); color: var(--green-fg);
    padding: 3px 7px; border-radius: 6px;
    margin: 2px 4px 2px 0;
    white-space: nowrap;
  }

  /* tools grid */
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .tool-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
  }
  .tool-ico {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--violet-100);
    color: var(--violet-700);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .tool-ico svg { width: 23px; height: 23px; }
  .tool-ico.t-blue   { background: var(--blue-bg);   color: var(--blue-fg); }
  .tool-ico.t-green  { background: var(--green-bg);  color: var(--green-fg); }
  .tool-ico.t-orange { background: var(--orange-bg); color: var(--orange-fg); }
  .tool-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
  .tool-card > p { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
  .tool-check { list-style: none; display: grid; gap: 9px; margin-bottom: 18px; }
  .tool-check li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); }
  .tool-check svg { width: 17px; height: 17px; color: var(--violet-600); flex: none; margin-top: 1px; }
  .tool-mock { margin-top: auto; }
  .tm-box {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    background: var(--bg-soft);
  }
  .tm-flex { display: flex; gap: 14px; align-items: center; }
  .tm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tm-grid2 .opp-score { color: var(--ink); font-size: 30px; }
  .tm-map { position: relative; height: 138px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden;
    background:
      linear-gradient(0deg, rgba(124,58,237,.05), rgba(124,58,237,.05)),
      repeating-linear-gradient(0deg, #eef0f4 0 22px, #f6f7f9 22px 44px),
      repeating-linear-gradient(90deg, #eef0f4 0 22px, #f6f7f9 22px 44px);
  }

  /* pipeline rows (card 6) */
  .pipe-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-soft); padding: 7px 4px; border-bottom: 1px solid var(--bg-lav); }
  .pipe-row:last-child { border-bottom: none; }
  .pipe-row b { margin-left: auto; font-weight: 800; color: var(--ink); }
  .pipe-row .pd { width: 8px; height: 8px; border-radius: 999px; flex: none; }
  .pd.v { background: var(--violet-500); }
  .pd.b { background: #3b82f6; }
  .pd.g { background: #22c55e; }
  .pd.o { background: #f59e0b; }

  /* all-in-one band */
  .allinone {
    background: linear-gradient(180deg, var(--violet-50), #efe9fc);
    border-top: 1px solid var(--violet-100);
    border-bottom: 1px solid var(--violet-100);
    padding: 58px 0;
  }
  .allinone .a-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
  .aio-item { text-align: center; padding: 6px 16px; border-right: 1px solid var(--violet-200); }
  .aio-item:last-child { border-right: none; }
  .aio-ico { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--violet-600); }
  .aio-item h3 { font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
  .aio-item p { font-size: 12px; color: var(--muted); line-height: 1.4; }

  /* final dark CTA */
  .cta-final { display: grid; grid-template-columns: auto 1fr auto; gap: 44px; align-items: center; }
  .cta-final .cta-mascot { width: 150px; max-width: none; margin: 0; flex: none; }
  .cta-final .cta-copy h2 { margin-bottom: 10px; }
  .cta-final .cta-copy p { color: rgba(255, 255, 255, .8); font-size: 15px; max-width: 30em; }
  .cta-final-right { display: grid; gap: 18px; justify-items: start; }
  .cta-final-right .cta-checklist { margin: 0; }

  @media (max-width: 1000px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .allinone .a-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .aio-item { border-right: none; }
    .cta-final { grid-template-columns: 1fr; gap: 26px; text-align: center; }
    .cta-final .cta-mascot { margin: 0 auto; }
    .cta-final .cta-copy p { margin: 10px auto 0; }
    .cta-final-right { justify-items: center; }
    .cta-final-right .cta-checklist li { justify-content: center; }
    .cta-final-right .btn { width: 100%; }
  }
  @media (max-width: 620px) {
    .tools-grid { grid-template-columns: 1fr; }
    .allinone .a-grid { grid-template-columns: 1fr; }
    .tm-grid2 { grid-template-columns: 1fr; }
  }

  /* ===================================================
     PRICING — detail page (ceni.html)
     =================================================== */

  /* billing toggle */
  .billing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
  .bt-label { font-size: 14px; font-weight: 600; color: var(--muted); transition: color .15s ease; }
  .bt-label.active { color: var(--ink); }
  .bt-switch {
    width: 46px; height: 26px;
    border-radius: 999px;
    background: var(--violet-600);
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    flex: none;
  }
  .bt-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
  }
  .bt-switch[aria-checked="true"] .bt-knob { transform: translateX(20px); }

  /* pricing cards (detailed) */
  .plan-desc { font-size: 12.5px; color: var(--muted); text-align: center; margin-bottom: 18px; line-height: 1.5; min-height: 2.9em; }
  .plan-trial {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 11.5px; color: var(--muted); line-height: 1.5;
  }
  .plan-trial svg { width: 16px; height: 16px; color: var(--violet-500); flex: none; margin-top: 1px; }

  /* comparison table */
  .compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    background: #fff;
  }
  .compare-table { width: 100%; border-collapse: collapse; min-width: 660px; }
  .compare-table th, .compare-table td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--ink-soft);
  }
  .compare-table th:first-child, .compare-table td:first-child { text-align: left; }
  .compare-table thead th { background: var(--bg-soft); }
  .compare-table thead th.ct-pro { background: var(--violet-50); }
  .ct-feat { display: flex; align-items: center; gap: 10px; font-weight: 500; }
  .ct-feat svg { width: 16px; height: 16px; color: var(--violet-500); flex: none; }
  .ct-plan { display: block; font-weight: 800; color: var(--violet-700); font-size: 14px; }
  .ct-price { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
  .ct-yes svg, .ct-no svg { width: 18px; height: 18px; }
  .ct-yes svg { color: var(--violet-600); }
  .ct-no svg { color: var(--muted-2); }
  .compare-table tbody tr:last-child td { border-bottom: none; }

  /* FAQ grid (2 columns) */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 940px; margin: 0 auto; }
  .faq-chev { width: 20px; height: 20px; color: var(--muted-2); flex: none; transition: transform .2s ease; }
  .faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--violet-600); }

  /* final CTA variant with inline checklist + caption */
  .cta-checklist-row { display: flex !important; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px !important; }
  .cta-checklist-row li { font-size: 13.5px; }
  .cta-caption { font-size: 12px; color: rgba(255, 255, 255, .65); margin-top: 10px; }

  /* trust bar (light) */
  .trustbar { padding: 52px 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
  .trust-title { text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 34px; }
  .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .trust-item { text-align: center; }
  .trust-item svg { width: 30px; height: 30px; color: var(--violet-600); margin: 0 auto 12px; }
  .trust-item h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
  .trust-item p { font-size: 12.5px; color: var(--muted); }

  @media (max-width: 760px) {
    .faq-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .cta-checklist-row { justify-content: center; }
  }

  /* ===================================================
     FAQ — detail page (faq.html)
     =================================================== */

  .faq-hero {
    position: relative;
    text-align: center;
    padding: 60px 0 26px;
    overflow: hidden;
    background:
      radial-gradient(700px 360px at 50% -14%, rgba(139, 92, 246, .13), transparent 62%),
      var(--bg);
  }
  .faq-hero-badge { display: table; margin: 0 auto 20px; }
  .faq-hero-deco-circle {
    position: absolute;
    top: 34px; left: 6%;
    width: 84px; height: 84px;
    border-radius: 999px;
    border: 14px solid var(--violet-100);
    opacity: .7;
  }
  .faq-hero-deco-arrow { position: absolute; top: 42px; right: 9%; width: 92px; height: 92px; color: var(--violet-200); }
  .faq-h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.16;
    margin-bottom: 16px;
  }
  .faq-h1 span { display: block; color: var(--violet-600); }
  .faq-sub { max-width: 620px; margin: 0 auto; font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }

  /* layout: sidebar + accordion list */
  .faq-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 36px;
    align-items: start;
  }
  .faq-sidebar { position: sticky; top: 100px; display: grid; gap: 20px; }
  .faq-mascot-wrap { position: relative; text-align: center; padding-top: 10px; }
  .faq-bubble {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
    margin-bottom: 8px;
  }
  .faq-mascot { width: 165px; margin: 0 auto; display: block; }
  .faq-contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
  }
  .faq-contact-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
  .faq-contact-card p { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }

  .faq-full-list { display: grid; gap: 12px; }
  .faq-full-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 20px;
    box-shadow: var(--shadow-sm);
  }
  .faq-full-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .faq-full-item summary::-webkit-details-marker { display: none; }
  .faq-full-ico {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--violet-100);
    color: var(--violet-700);
    display: flex; align-items: center; justify-content: center;
  }
  .faq-full-ico svg { width: 18px; height: 18px; }
  .faq-full-q { flex: 1; }
  .faq-full-item .faq-chev { margin-left: auto; }
  .faq-full-item[open] .faq-chev { transform: rotate(180deg); color: var(--violet-600); }
  .faq-full-item p { margin: 0 0 20px 50px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

  /* extra info cards */
  .faq-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .faq-info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
  }
  .faq-info-card .tool-ico { margin: 0 auto 14px; }
  .faq-info-card h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 8px; }
  .faq-info-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

  /* slim trust bar */
  .mini-bar { background: var(--ink); padding: 20px 0; }
  .mini-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
  }
  .mini-bar-row span.item { display: inline-flex; align-items: center; gap: 7px; }
  .mini-bar-row svg { width: 15px; height: 15px; color: var(--violet-300); flex: none; }
  .mini-bar-row .dot { color: rgba(255, 255, 255, .25); }

  @media (max-width: 900px) {
    .faq-layout { grid-template-columns: 1fr; }
    .faq-sidebar { position: static; max-width: 360px; margin: 0 auto; }
    .faq-info-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .faq-info-grid { grid-template-columns: 1fr; }
    .faq-full-item p { margin-left: 0; }
    .mini-bar-row .dot { display: none; }
    .mini-bar-row { flex-direction: column; gap: 10px; }
  }

  /* ===================================================
     LOGIN / AUTH — page (vhod.html)
     =================================================== */

  .auth-page {
    position: relative;
    min-height: calc(100vh - 74px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
      radial-gradient(620px 420px at 100% 0%, rgba(139, 92, 246, .10), transparent 60%),
      radial-gradient(520px 420px at 0% 100%, rgba(139, 92, 246, .07), transparent 60%),
      linear-gradient(135deg, #f6f5fc, #eef0fb);
  }
  .auth-dots {
    position: absolute;
    width: 130px; height: 130px;
    background-image: radial-gradient(var(--violet-200) 1.6px, transparent 1.6px);
    background-size: 17px 17px;
    opacity: .55;
    pointer-events: none;
  }
  .auth-dots.tr { top: 26px; right: 26px; }
  .auth-dots.bl { bottom: 70px; left: 26px; }

  .auth-main {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 44px 24px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  /* --- left column --- */
  .auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 40px; }
  .auth-brand .brand-mark { height: 50px; width: auto; flex: none; }
  .auth-brand > span { display: flex; flex-direction: column; }
  .auth-brand .bn { font-weight: 800; font-size: 21px; letter-spacing: -.01em; line-height: 1.15; }
  .auth-brand .bn i { font-style: normal; color: var(--violet-600); }
  .auth-brand .bt { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

  .auth-intro h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1.14; margin-bottom: 16px; }
  .auth-intro h1 span { display: block; color: var(--violet-600); }
  .auth-intro > p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 30px; max-width: 30em; }

  .auth-features { display: grid; gap: 20px; margin-bottom: 30px; }
  .auth-feature { display: flex; gap: 16px; }
  .auth-feature .fi {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--violet-100);
    color: var(--violet-700);
    display: flex; align-items: center; justify-content: center;
  }
  .auth-feature .fi svg { width: 22px; height: 22px; }
  .auth-feature h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
  .auth-feature p { font-size: 13px; color: var(--muted); line-height: 1.5; }

  .auth-mascot { width: 100%; max-width: 430px; margin: 6px 0 24px; display: block; }

  .auth-quote {
    background: var(--violet-50);
    border-left: 3px solid var(--violet-500);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 500;
    line-height: 1.55;
    max-width: 32em;
  }
  .auth-quote .q { color: var(--violet-300); font-size: 24px; font-weight: 800; margin-right: 5px; vertical-align: -6px; line-height: 0; }

  /* --- right column: card --- */
  .auth-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 44px 90px -34px rgba(76, 29, 149, .30);
    padding: 44px 40px;
    width: 100%;
    max-width: 470px;
    margin-left: auto;
  }
  .auth-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
  .auth-card .sub { font-size: 14px; color: var(--muted); margin-bottom: 26px; }

  .auth-field { margin-bottom: 18px; }
  .auth-field > label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
  .auth-input { position: relative; }
  .auth-input > .ai-lead { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted-2); pointer-events: none; }
  .auth-input input {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 13px 44px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--bg-soft);
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .auth-input input:focus { border-color: var(--violet-400); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); background: #fff; }
  .auth-input input::placeholder { color: var(--muted-2); }
  .auth-eye {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--muted-2);
    padding: 6px;
    display: flex;
  }
  .auth-eye svg { width: 18px; height: 18px; }
  .auth-eye svg.is-hidden { display: none; }

  .auth-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; flex-wrap: wrap; gap: 8px; }
  .auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
  .auth-remember input { width: 16px; height: 16px; accent-color: var(--violet-600); }
  .auth-link { font-size: 13.5px; font-weight: 600; color: var(--violet-600); }
  .auth-link:hover { text-decoration: underline; }

  .auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted-2); font-size: 12.5px; white-space: nowrap; }
  .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  .auth-social { display: grid; gap: 12px; }
  .auth-social .btn { justify-content: center; gap: 12px; font-weight: 600; padding: 12px 18px; }
  .auth-social .btn svg { width: 18px; height: 18px; }

  .auth-signup { text-align: center; font-size: 13.5px; color: var(--muted); margin: 22px 0 16px; }
  .auth-secure { display: flex; align-items: flex-start; justify-content: center; gap: 7px; font-size: 12px; color: var(--muted-2); text-align: center; line-height: 1.45; }
  .auth-secure svg { width: 15px; height: 15px; color: var(--green-fg); flex: none; margin-top: 1px; }

  .auth-foot { text-align: center; padding: 22px 24px 30px; font-size: 12.5px; color: var(--muted-2); position: relative; z-index: 1; }
  .auth-foot .links { margin-top: 7px; }
  .auth-foot .links a { color: var(--muted); }
  .auth-foot .links a:hover { color: var(--violet-600); }
  .auth-foot .sep { margin: 0 9px; color: var(--violet-300); }

  @media (max-width: 900px) {
    .auth-main { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
    .auth-card { margin: 0 auto; }
    .auth-mascot { max-width: 340px; margin: 4px auto 20px; }
    .auth-quote { margin: 0 auto; }
    .auth-dots { display: none; }
  }
  @media (max-width: 460px) {
    .auth-card { padding: 32px 22px; }
  }

  /* ===================================================
     REGISTER — page (zapochni.html)
     =================================================== */

  .reg-wrap {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(620px 420px at 100% 0%, rgba(139, 92, 246, .10), transparent 60%),
      radial-gradient(520px 420px at 0% 100%, rgba(139, 92, 246, .07), transparent 60%),
      linear-gradient(135deg, #f6f5fc, #eef0fb);
    padding-bottom: 30px;
  }
  .auth-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 24px;
  }
  .tb-login { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
  .tb-login a { color: var(--violet-600); font-weight: 700; white-space: nowrap; }
  .tb-login a:hover { text-decoration: underline; }

  .auth-benefits { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
  .auth-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); font-weight: 500; }
  .auth-benefits li svg { width: 19px; height: 19px; flex: none; color: var(--violet-600); margin-top: 1px; }

  .auth-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 2px 0 20px; cursor: pointer; }
  .auth-terms input { width: 16px; height: 16px; accent-color: var(--violet-600); flex: none; margin-top: 1px; }
  .auth-terms a { color: var(--violet-600); font-weight: 600; }
  .auth-terms a:hover { text-decoration: underline; }

  .reg-safe {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
  }
  .rs-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; margin-bottom: 12px; }
  .rs-head svg { width: 17px; height: 17px; color: var(--green-fg); flex: none; }
  .reg-safe .rs-item { padding: 10px 0; border-top: 1px solid var(--line); }
  .reg-safe .rs-item:first-of-type { border-top: none; padding-top: 0; }
  .reg-safe .rs-item b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
  .reg-safe .rs-item span { font-size: 12.5px; color: var(--muted); }

  .reg-get { padding: 56px 0; background: var(--bg); border-top: 1px solid var(--line); }
  .reg-get h2 { text-align: center; font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 34px; }
  .reg-get-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .rg-item { text-align: center; padding: 22px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
  .rg-item svg { width: 30px; height: 30px; color: var(--violet-600); margin: 0 auto 12px; }
  .rg-item h3 { font-size: 14px; font-weight: 800; margin-bottom: 2px; }
  .rg-item p { font-size: 12.5px; color: var(--muted); }

  @media (max-width: 900px) {
    .reg-get-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 560px) {
    .reg-get-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-topbar { justify-content: center; text-align: center; }
  }

  /* ===================================================
     LEGAL / DOCUMENT — page (politika-poveritelnost.html …)
     =================================================== */

  .doc-hero {
    text-align: center;
    padding: 56px 0 24px;
    background:
      radial-gradient(680px 340px at 50% -14%, rgba(139, 92, 246, .12), transparent 62%),
      var(--bg);
  }
  .doc-hero h1 {
    font-size: clamp(27px, 3.6vw, 40px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
  }
  .doc-hero .doc-updated { font-size: 13px; color: var(--muted); margin-top: 12px; }

  .doc-body { max-width: 820px; margin: 0 auto; padding: 26px 24px 72px; }
  .doc-body > .doc-lead { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 26px; }

  .doc-toc {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 34px;
  }
  .doc-toc h2 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
  }
  .doc-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
  .doc-toc li { font-size: 13.5px; }
  .doc-toc a { color: var(--violet-700); font-weight: 600; }
  .doc-toc a:hover { text-decoration: underline; }

  .doc-body h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 36px 0 12px;
    scroll-margin-top: 92px;
  }
  .doc-body h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
  .doc-body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.72; margin-bottom: 12px; }
  .doc-body ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 7px; }
  .doc-body li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
  .doc-body a { color: var(--violet-600); font-weight: 600; }
  .doc-body a:hover { text-decoration: underline; }
  .doc-body strong { font-weight: 700; color: var(--ink); }

  .doc-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0 20px; }
  .doc-table table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; }
  .doc-table th, .doc-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .doc-table tr:last-child td { border-bottom: none; }
  .doc-table thead th { background: var(--bg-soft); font-weight: 800; color: var(--ink); white-space: nowrap; }
  .doc-table td { color: var(--ink-soft); line-height: 1.55; }
  .doc-table td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }

  /* cookie settings panel */
  .cookie-groups { display: grid; gap: 12px; margin: 10px 0 26px; }
  .cookie-group {
    display: flex; align-items: center; gap: 20px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 20px; box-shadow: var(--shadow-sm);
  }
  .cg-info { flex: 1; min-width: 0; }
  .cg-info h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
  .cg-info p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55; }
  .cg-locked {
    font-size: 12px; font-weight: 700; color: var(--green-fg);
    background: var(--green-bg); padding: 5px 11px; border-radius: 999px;
    white-space: nowrap; flex: none;
  }
  .cg-switch {
    flex: none;
    width: 46px; height: 26px; border-radius: 999px;
    background: var(--line); border: none; cursor: pointer; padding: 0;
    position: relative; transition: background .18s ease;
  }
  .cg-switch[aria-checked="true"] { background: var(--violet-600); }
  .cg-knob {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 999px; background: #fff;
    box-shadow: var(--shadow-sm); transition: transform .18s ease;
  }
  .cg-switch[aria-checked="true"] .cg-knob { transform: translateX(20px); }

  .cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .cookie-saved {
    display: none; align-items: center; gap: 8px;
    margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--green-fg);
  }
  .cookie-saved.show { display: flex; }
  .cookie-saved::before { content: "✓"; font-weight: 800; }

  @media (max-width: 560px) {
    .cookie-group { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cookie-actions .btn { flex: 1; }
  }

  /* ============================================================
     Dashboard app shell
     ============================================================ */
  .app-body { background: var(--bg-soft); }

  .app-shell { display: flex; align-items: stretch; min-height: 100vh; }

  /* ---------- Sidebar ---------- */
  .app-sidebar {
    width: 250px;
    flex: none;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    /* Keep the settings flyout above page fields and the sticky topbar. */
    z-index: 60;
    height: 100vh;
    overflow-y: auto;
  }
  .app-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 20px 16px;
  }
  .app-brand svg, .app-brand img { width: 30px; height: 40px; flex: none; }
  .app-brand svg { color: var(--violet-600); }
  .app-brand-name { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
  .app-brand-tag { display: block; font-size: 10.5px; color: var(--muted-2); font-weight: 600; margin-top: 2px; }

  .app-nav { flex: 1; padding: 4px 12px 16px; }
  .app-nav-group { margin-top: 18px; }
  .app-nav-group:first-child { margin-top: 4px; }
  .app-nav-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-2);
    padding: 0 10px 8px;
  }
  .app-nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13.5px; font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 2px;
    transition: background .14s ease, color .14s ease;
  }
  .app-nav-link svg { width: 18px; height: 18px; flex: none; color: var(--muted-2); transition: color .14s ease; }
  .app-nav-link:hover { background: var(--bg-lav); }
  .app-nav-link.active {
    background: linear-gradient(180deg, var(--violet-600), var(--violet-700));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(124, 58, 237, .5);
  }
  .app-nav-link.active svg { color: #fff; }

  .app-sidebar-foot { border-top: 1px solid var(--line); padding: 12px; }
  .app-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 12px;
  }
  .app-user-card:hover { background: var(--bg-lav); }
  .app-avatar {
    width: 36px; height: 36px; flex: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-700));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
  }
  .app-user-card .name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
  .app-user-card .plan {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; color: var(--violet-600);
  }

  /* ---------- Topbar ---------- */
  .app-main { flex: 1; min-width: 0; }
  .app-topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 16px;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 14px 28px;
  }
  .app-search {
    flex: 1; max-width: 420px;
    display: flex; align-items: center; gap: 9px;
    background: var(--bg-lav); border-radius: 10px;
    padding: 10px 14px;
    color: var(--muted-2);
  }
  .app-search svg { width: 17px; height: 17px; flex: none; }
  .app-search input {
    border: none; background: none; outline: none;
    font-family: inherit; font-size: 13.5px; color: var(--ink);
    width: 100%;
  }
  .app-search input::placeholder { color: var(--muted-2); }

  .sidebar-toggle {
    display: none;
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink); cursor: pointer;
    align-items: center; justify-content: center;
  }
  .sidebar-toggle svg { width: 19px; height: 19px; }

  .app-topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
  .app-bell { position: relative; color: var(--muted); width: 20px; height: 20px; }
  .app-bell svg { width: 100%; height: 100%; }
  .app-bell::after {
    content: ""; position: absolute; top: -1px; right: -1px;
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--red-fg); border: 2px solid #fff;
  }
  .app-user-chip { display: flex; align-items: center; gap: 10px; }
  .app-user-chip .app-avatar { width: 34px; height: 34px; font-size: 12px; }
  .app-user-chip .name { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .app-user-chip .plan { font-size: 10.5px; font-weight: 700; color: var(--violet-600); }
  .app-user-chip svg.chev { width: 15px; height: 15px; color: var(--muted-2); }

  /* ---------- Content grid ---------- */
  .app-content { padding: 24px 28px 64px; max-width: 1280px; }
  .app-row { display: grid; gap: 18px; margin-bottom: 18px; min-width: 0; }
  .app-row > * { min-width: 0; }
  .app-row.split { grid-template-columns: 1.7fr 1fr; align-items: start; }

  /* ---------- Welcome banner ---------- */
  .welcome-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--violet-50), var(--bg-lav));
    border: 1px solid var(--violet-100);
    border-radius: var(--radius);
    padding: 30px 34px;
  }
  .welcome-card h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
  .welcome-card h1 .wave { display: inline-block; margin-right: 2px; }
  .welcome-card .sub { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
  .welcome-card .hint { font-size: 13px; color: var(--muted); margin-top: 14px; }
  .welcome-visual {
    position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
    width: 150px; height: 150px;
    color: var(--violet-300);
    opacity: .9;
  }
  .welcome-visual svg { width: 100%; height: 100%; }

  /* ---------- Stat cards ---------- */
  .stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .stat-cards.cols-6 { grid-template-columns: repeat(6, 1fr); }
  .stat-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm);
  }
  .stat-card.highlight { background: var(--red-bg); border-color: #fbcfcf; }
  .stat-card .ico {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .stat-card .ico svg { width: 17px; height: 17px; }
  .stat-card .ico.violet { background: var(--violet-100); color: var(--violet-700); }
  .stat-card .ico.red { background: #fde0e0; color: var(--red-fg); }
  .stat-card .ico.blue { background: var(--blue-bg); color: var(--blue-fg); }
  .stat-card .ico.green { background: var(--green-bg); color: var(--green-fg); }
  .stat-card .ico.purple { background: var(--violet-100); color: var(--violet-600); }
  .stat-card .n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
  .stat-card .l { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 5px; }
  .stat-card .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--green-fg); margin-top: 10px; }
  .stat-card .delta-sub { font-size: 11px; color: var(--muted-2); font-weight: 500; margin-top: 2px; }

  /* ---------- Panels ---------- */
  .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
  .panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
  }
  .panel-head h2 { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
  .panel-head h2 svg { width: 18px; height: 18px; color: var(--red-fg); }
  .panel-head .view-all { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--violet-600); display: inline-flex; align-items: center; gap: 4px; }
  .panel-head .view-all svg { width: 13px; height: 13px; }
  .panel-body { padding: 6px 10px 14px; }
  .panel-body.pad { padding: 18px 22px 22px; }

  /* ---------- Opportunities table ---------- */
  .opp-table { width: 100%; border-collapse: collapse; }
  .opp-table th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted-2); font-weight: 700; padding: 10px 12px;
  }
  .opp-table td { padding: 11px 12px; border-top: 1px solid var(--bg-lav); font-size: 13px; vertical-align: middle; }
  .opp-biz { display: flex; align-items: center; gap: 11px; }
  .opp-biz .avatar { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .opp-biz .name { font-weight: 700; color: var(--ink); }
  .opp-biz .domain { font-size: 11.5px; color: var(--muted-2); }
  .opp-score { font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
  .opp-table .chev { width: 15px; height: 15px; color: var(--muted-2); }
  .status-pill { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
  .status-pill.new { background: var(--violet-100); color: var(--violet-700); }
  .status-pill.analyzed { background: var(--blue-bg); color: var(--blue-fg); }

  /* ---------- AI Insights ---------- */
  .ai-insights-head { background: linear-gradient(135deg, var(--violet-50), #fff); }
  .insight-list { display: grid; gap: 10px; padding: 16px 18px 20px; }
  .insight-item { display: flex; gap: 11px; padding: 12px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); }
  .insight-item .ico { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .insight-item .ico svg { width: 15px; height: 15px; }
  .insight-item p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
  .insight-item.tip { background: var(--violet-50); border-color: var(--violet-100); }
  .insight-item.tip .label { font-size: 11.5px; font-weight: 800; color: var(--violet-700); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; display: block; }

  /* ---------- Chart ---------- */
  .chart-toggle { display: inline-flex; gap: 2px; background: var(--bg-lav); border-radius: 9px; padding: 3px; margin-left: auto; }
  .chart-toggle button {
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--muted);
    border: none; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  }
  .chart-toggle button.active { background: var(--violet-600); color: #fff; }
  .chart-wrap { padding: 18px 22px 6px; }
  .chart-svg { width: 100%; height: auto; display: block; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 22px; padding: 14px 22px 20px; border-top: 1px solid var(--line); margin-top: 6px; }
  .chart-legend .item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
  .chart-legend .dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
  .chart-legend b { color: var(--ink); font-size: 13.5px; margin-right: 3px; }

  /* ---------- Activity feed ---------- */
  .activity-list { display: grid; padding: 8px 8px 10px; }
  .activity-item { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; }
  .activity-item:hover { background: var(--bg-soft); }
  .activity-item .ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
  .activity-item .ico svg { width: 15px; height: 15px; }
  .activity-item .time { font-size: 10.5px; color: var(--muted-2); font-weight: 600; margin-bottom: 2px; }
  .activity-item .title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .activity-item .sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

  /* ---------- Quick actions ---------- */
  .qa-panel { padding: 22px; }
  .qa-panel h2 { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
  .qa-panel h2 svg { width: 18px; height: 18px; color: #f59e0b; }
  .qa-panel .sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 16px; }
  .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .qa-btn {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 14px; font-size: 13px; font-weight: 700; color: var(--ink);
    background: #fff;
    transition: border-color .14s ease, transform .14s ease;
  }
  .qa-btn:hover { border-color: var(--violet-300); transform: translateY(-1px); }
  .qa-btn svg.lead { width: 17px; height: 17px; color: var(--muted-2); flex: none; }
  .qa-btn svg.chev { width: 13px; height: 13px; color: var(--muted-2); margin-left: auto; }
  .qa-btn.primary { background: linear-gradient(180deg, var(--violet-600), var(--violet-700)); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -8px rgba(124, 58, 237, .5); }
  .qa-btn.primary svg { color: #fff; }

  /* ---------- CTA banner ---------- */
  .app-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--violet-700), var(--violet-900));
    border-radius: var(--radius);
    padding: 28px 30px;
    color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100%;
  }
  .app-cta .bot { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .app-cta .bot svg { width: 28px; height: 28px; }
  .app-cta h2 { font-size: 19px; font-weight: 800; margin-bottom: 8px; line-height: 1.25; }
  .app-cta p { font-size: 13px; color: var(--violet-100); margin-bottom: 18px; line-height: 1.55; }
  .app-cta .btn-light { align-self: flex-start; }

  .app-footer { display: flex; align-items: center; gap: 8px; padding: 18px 28px 30px; font-size: 12px; color: var(--muted-2); }
  .app-footer .fdot { width: 3px; height: 3px; border-radius: 999px; background: var(--muted-2); }
  .app-footer-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

  @media (max-width: 1180px) {
    .stat-cards, .stat-cards.cols-6 { grid-template-columns: repeat(3, 1fr); }
    .app-row.split { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .app-sidebar { position: fixed; left: -250px; top: 0; z-index: 60; transition: left .2s ease; box-shadow: var(--shadow-lg); }
    .app-sidebar.open { left: 0; }
    .sidebar-toggle { display: flex; }
    .stat-cards, .stat-cards.cols-6 { grid-template-columns: repeat(2, 1fr); }
    .app-search { max-width: none; }
    .welcome-visual { display: none; }
    .qa-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .app-topbar { padding: 12px 16px; }
    .app-content { padding: 18px 16px 48px; }
    .stat-cards, .stat-cards.cols-6 { grid-template-columns: 1fr; }
    .welcome-card { padding: 22px; }
  }

  /* ============================================================
     Business search page
     ============================================================ */

  /* ---------- Hero ---------- */
  .search-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--violet-600), var(--violet-800, #581c87) 60%, var(--violet-900));
    border-radius: var(--radius);
    padding: 32px 34px;
    color: #fff;
  }
  .search-hero h1 { font-size: 25px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; max-width: 560px; }
  .search-hero .sub { font-size: 14px; color: var(--violet-100); max-width: 480px; line-height: 1.55; margin-bottom: 18px; }
  .quota-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    color: #fff;
  }
  .search-hero-visual {
    position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
    width: 170px; height: 140px;
  }
  .sh-bot { position: absolute; right: 8px; bottom: -4px; width: 110px; height: 130px; color: #fff; }
  .sh-pin { position: absolute; color: #fff; opacity: .9; }
  .sh-pin.p1 { top: 6px; left: 6px; width: 26px; height: 26px; }
  .sh-pin.p2 { top: -2px; right: 0; width: 22px; height: 22px; opacity: .75; }
  .sh-bars { position: absolute; left: 18px; bottom: 14px; display: flex; align-items: flex-end; gap: 4px; opacity: .85; }
  .sh-bars span { display: block; width: 6px; background: rgba(255,255,255,.55); border-radius: 2px; }

  /* ---------- Layout grid ---------- */
  .search-grid { grid-template-columns: 2.3fr 1fr; }
  .search-grid > * { min-width: 0; }
  .search-col { display: grid; gap: 18px; min-width: 0; }
  .search-col > * { min-width: 0; }
  .search-col-side { align-content: start; }

  /* ---------- Form ---------- */
  .form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
  .form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .form-field.full { margin-bottom: 18px; }
  .form-field label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
  .form-select, .form-input {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit; font-size: 13.5px; color: var(--ink);
    background: #fff;
    position: relative;
    min-width: 0;
  }
  .form-select svg.lead, .form-input svg.lead { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
  .form-select select {
    appearance: none; border: none; outline: none; background: none;
    font-family: inherit; font-size: 13.5px; color: var(--ink); flex: 1; min-width: 0;
  }
  .form-select svg.chev { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
  .form-input input {
    border: none; outline: none; background: none; font-family: inherit;
    font-size: 13.5px; color: var(--ink); flex: 1; width: 100%;
  }
  .form-input input::placeholder { color: var(--muted-2); }

  .section-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }

  .check-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 14px; margin-bottom: 22px; }
  .check-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
  .check-item input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
  .check-item .box {
    width: 18px; height: 18px; flex: none; border-radius: 6px;
    border: 1.5px solid var(--line); background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s ease, border-color .12s ease;
  }
  .check-item .box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .12s ease; }
  .check-item input:checked ~ .box { background: var(--violet-600); border-color: var(--violet-600); }
  .check-item input:checked ~ .box svg { opacity: 1; }

  .score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
  .score-row input[type="range"] {
    flex: 1; appearance: none; height: 5px; border-radius: 999px;
    background: linear-gradient(90deg, var(--violet-600) var(--_p, 65%), var(--line) var(--_p, 65%));
    outline: none;
  }
  .score-row input[type="range"]::-webkit-slider-thumb {
    appearance: none; width: 18px; height: 18px; border-radius: 999px;
    background: var(--violet-600); border: 3px solid #fff; box-shadow: var(--shadow-md); cursor: pointer;
  }
  .score-row input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 999px; border: 3px solid #fff;
    background: var(--violet-600); box-shadow: var(--shadow-md); cursor: pointer;
  }
  .score-row .val { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 30px; }
  .score-row .val.max { color: var(--muted-2); font-weight: 600; }

  .filters-toggle {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 16px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink);
    cursor: pointer; margin-bottom: 0;
  }
  .filters-toggle svg.lead { width: 16px; height: 16px; color: var(--violet-600); }
  .filters-toggle svg.chev { width: 16px; height: 16px; color: var(--muted-2); margin-left: auto; transition: transform .15s ease; }
  .filters-toggle[aria-expanded="true"] svg.chev { transform: rotate(180deg); }
  .filters-body {
    border: 1px solid var(--line); border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 20px 16px 4px;
    margin-top: -1px;
    margin-bottom: 20px;
  }
  .filters-body[hidden] { display: none; }
  .filters-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; margin-bottom: 14px; }
  .radio-group { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
  .radio-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
  .radio-item input { accent-color: var(--violet-600); width: 14px; height: 14px; margin: 0; cursor: pointer; }
  .show-more-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--violet-600);
    margin-bottom: 16px; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0;
  }
  .show-more-link svg { width: 14px; height: 14px; }

  .criteria-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

  /* ---------- Why panel ---------- */
  .why-panel { padding: 20px 20px 6px; }
  .why-panel h2 { font-size: 15px; font-weight: 800; margin-bottom: 16px; line-height: 1.3; }
  .why-item { display: flex; gap: 12px; margin-bottom: 18px; }
  .why-item .ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .why-item .ico svg { width: 18px; height: 18px; }
  .why-item h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
  .why-item p { font-size: 12px; color: var(--muted); line-height: 1.45; }

  /* ---------- Help CTA ---------- */
  .help-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--violet-600), var(--violet-800, #581c87));
    border-radius: var(--radius);
    padding: 20px 22px;
    color: #fff;
  }
  .help-cta h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 14px; }
  .help-video-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #fff;
  }
  .help-video-btn .play { width: 22px; height: 22px; border-radius: 999px; background: #fff; color: var(--violet-700); display: flex; align-items: center; justify-content: center; flex: none; }
  .help-video-btn .play svg { width: 10px; height: 10px; }
  .help-cta .deco { position: absolute; right: -6px; bottom: -10px; width: 56px; height: 56px; color: rgba(255,255,255,.18); }

  /* ---------- Lead detail panel ---------- */
  .lead-detail { padding: 20px; position: relative; }
  .lead-detail-close {
    position: absolute; top: 16px; right: 16px;
    width: 26px; height: 26px; border-radius: 999px;
    border: none; background: var(--bg-soft); color: var(--muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .lead-detail-close svg { width: 13px; height: 13px; }
  .lead-detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding-right: 26px; }
  .lead-detail-head .avatar { width: 42px; height: 42px; border-radius: 11px; background: var(--blue-bg); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
  .lead-detail-head h3 { font-size: 15px; font-weight: 800; }
  .lead-detail-head .loc { font-size: 12px; color: var(--muted); }
  .lead-detail-score { margin-left: auto; text-align: right; flex: none; }
  .lead-detail-score .big { font-size: 17px; font-weight: 800; color: var(--red-fg); }
  .lead-detail-score .lbl { font-size: 10.5px; color: var(--muted-2); font-weight: 600; }

  .mini-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
  .mini-score { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
  .mini-score .n { font-size: 15px; font-weight: 800; }
  .mini-score .l { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

  .lead-detail h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
  .lead-detail-list { display: grid; gap: 8px; margin-bottom: 18px; }
  .lead-detail-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
  .lead-detail-list svg { width: 15px; height: 15px; color: var(--green-fg); flex: none; }
  .contact-rows { display: grid; gap: 9px; margin-bottom: 18px; }
  .contact-rows .row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft); }
  .contact-rows svg { width: 15px; height: 15px; color: var(--violet-500); flex: none; }
  .ai-box { background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: 10px; padding: 12px; font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; }
  .lead-detail-actions { display: grid; gap: 8px; }
  .lead-detail-actions .btn { width: 100%; font-size: 13px; padding: 11px 14px; }

  /* ---------- Results header / tabs ---------- */
  .results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
  .results-header h2 { font-size: 18px; font-weight: 800; }
  .results-header h2 b { color: var(--violet-600); }
  .sort-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
  .sort-select .form-select { padding: 8px 12px; }

  .result-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .result-tab {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); cursor: pointer;
  }
  .result-tab svg { width: 15px; height: 15px; }
  .result-tab.active { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
  .result-tab .n { opacity: .75; font-weight: 600; }

  /* ---------- Leads table ---------- */
  .leads-table-wrap { overflow-x: auto; }
  .leads-table { width: 100%; border-collapse: collapse; min-width: 720px; }
  .leads-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); font-weight: 700; padding: 10px 12px; white-space: nowrap; }
  .leads-table td { padding: 12px; border-top: 1px solid var(--bg-lav); font-size: 13px; vertical-align: middle; }
  .leads-table .chk-col { width: 34px; }
  .leads-table tbody tr { cursor: pointer; }
  .leads-table tbody tr:hover { background: var(--bg-soft); }
  .leads-table tbody tr.selected { background: var(--violet-50); }
  .lt-biz { display: flex; align-items: center; gap: 11px; }
  .lt-biz .avatar { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .lt-biz .name { font-weight: 700; color: var(--ink); display: block; }
  .lt-biz .loc { font-size: 11px; color: var(--muted-2); }
  .lt-site { display: inline-flex; align-items: center; gap: 5px; color: var(--violet-600); font-weight: 600; font-size: 12.5px; }
  .lt-site svg { width: 12px; height: 12px; }
  .lt-score { font-weight: 800; }
  .lt-tags { display: flex; gap: 5px; flex-wrap: wrap; max-width: 180px; }
  .lt-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg-lav); color: var(--ink-soft); white-space: nowrap; }
  .checkbox-plain { width: 17px; height: 17px; accent-color: var(--violet-600); cursor: pointer; }

  /* ---------- Bulk bar / pagination ---------- */
  .bulk-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 22px; border-top: 1px solid var(--line);
  }
  .bulk-bar .sel { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
  .bulk-bar .sel svg { width: 16px; height: 16px; color: var(--green-fg); }
  .bulk-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
  .bulk-actions .btn { font-size: 12.5px; padding: 9px 14px; }

  .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 0 0; }
  .page-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .page-btn svg { width: 15px; height: 15px; }
  .page-btn.active { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }

  /* ---------- Bottom stats banner ---------- */
  .stats-banner {
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--violet-50), var(--bg-lav));
    border: 1px solid var(--violet-100);
    border-radius: var(--radius);
    padding: 22px 28px;
  }
  .stats-banner-lead { display: flex; align-items: center; gap: 12px; flex: none; }
  .stats-banner-lead .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--violet-600); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
  .stats-banner-lead .ico svg { width: 20px; height: 20px; }
  .stats-banner-lead strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; }
  .stats-banner-items { display: flex; gap: 30px; flex-wrap: wrap; }
  .sb-item { display: flex; align-items: center; gap: 9px; }
  .sb-item .ico { width: 32px; height: 32px; border-radius: 9px; background: #fff; color: var(--violet-600); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-sm); }
  .sb-item .ico svg { width: 16px; height: 16px; }
  .sb-item strong { display: block; font-size: 12.5px; font-weight: 700; }
  .sb-item span { font-size: 11px; color: var(--muted); }
  .stats-banner-script { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: 'Caveat', cursive; font-size: 22px; color: var(--violet-700); flex: none; }
  .stats-banner-script svg { width: 26px; height: 26px; }

  @media (max-width: 1180px) {
    .search-grid { grid-template-columns: 1fr; }
    .filters-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 860px) {
    .search-hero-visual { display: none; }
    .form-grid-3 { grid-template-columns: 1fr; }
    .check-grid { grid-template-columns: repeat(2, 1fr); }
    .filters-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-banner { justify-content: center; text-align: center; }
    .stats-banner-items { justify-content: center; }
    .stats-banner-script { margin-left: 0; }
  }
  @media (max-width: 560px) {
    .check-grid { grid-template-columns: 1fr 1fr; }
    .filters-grid { grid-template-columns: 1fr; }
    .criteria-actions { flex-direction: column; align-items: stretch; }
    .criteria-actions .btn { width: 100%; }
    .bulk-bar { flex-direction: column; align-items: stretch; }
    .bulk-actions { margin-left: 0; }
  }

  /* ============================================================
     My Leads page
     ============================================================ */
  .split-wide { grid-template-columns: 2.7fr 1fr; }
  .split-wide > * { min-width: 0; }

  /* ---------- Page header ---------- */
  .leads-header {
    position: relative;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    padding: 6px 4px 8px;
  }
  .leads-header h1 { font-size: 32px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
  .leads-header .sub { font-size: 14.5px; color: var(--muted); max-width: 480px; }
  .leads-header-visual { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding-top: 4px; }
  .leads-header-note {
    font-family: 'Caveat', cursive; font-size: 19px; font-weight: 700; color: var(--violet-600);
    text-align: center; line-height: 1.2; max-width: 120px; transform: rotate(-3deg);
  }
  .lh-bot { width: 92px; height: 108px; color: var(--violet-600); flex: none; }
  .lh-deco { width: 30px; height: 30px; color: var(--violet-300); flex: none; }

  /* ---------- Filter panel ---------- */
  .filter-panel { padding: 18px 20px; margin-bottom: 18px; }
  .filter-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
  .filter-inputs { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr auto; gap: 12px; align-items: center; }
  .more-filters-btn {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    padding: 10px 14px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft);
    cursor: pointer;
  }
  .more-filters-btn svg { width: 15px; height: 15px; color: var(--violet-600); }

  .showing-count { font-size: 12.5px; color: var(--muted); padding: 14px 22px; }

  @media (max-width: 1180px) {
    .split-wide { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .leads-header { flex-direction: column; }
    .leads-header-visual { align-self: flex-end; }
    .filter-inputs { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .leads-header h1 { font-size: 25px; }
    .leads-header-visual { display: none; }
    .filter-inputs { grid-template-columns: 1fr; }
  }

  /* ============================================================
     Saved searches page
     ============================================================ */

  /* ---------- Tip banner ---------- */
  .tip-banner {
    display: flex; align-items: center; gap: 12px;
    background: var(--violet-50); border: 1px solid var(--violet-100);
    border-radius: 12px; padding: 14px 18px; font-size: 13px; color: var(--ink-soft);
  }
  .tip-banner .ico { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .tip-banner .ico svg { width: 15px; height: 15px; }
  .tip-banner b { color: var(--ink); }

  /* ---------- Saved search cards ---------- */
  .saved-list { display: grid; gap: 14px; }
  .saved-card {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 18px 20px;
  }
  .saved-card-icon { width: 56px; height: 56px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 25px; }
  .saved-card-main { flex: 1; min-width: 0; }
  .saved-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
  .saved-card-head h3 { font-size: 15px; font-weight: 800; color: var(--ink); }
  .status-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--green-fg); }
  .status-dot.paused { background: var(--muted-2); }
  .saved-card-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
  .icon-btn {
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none;
  }
  .icon-btn:hover { border-color: var(--violet-300); color: var(--violet-600); }
  .icon-btn svg { width: 15px; height: 15px; }
  .saved-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .saved-card-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
  .saved-card-line:last-child { margin-bottom: 0; }
  .saved-card-line svg { width: 13px; height: 13px; color: var(--muted-2); flex: none; }
  .saved-card-line b { color: var(--ink-soft); font-weight: 600; }
  .saved-card-stats {
    flex: none; width: 168px; text-align: right;
    border-left: 1px solid var(--line); padding-left: 18px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  }
  .saved-card-stats .label { font-size: 11px; color: var(--muted-2); font-weight: 600; }
  .saved-card-stats .date { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
  .saved-card-stats .n { font-size: 20px; font-weight: 800; color: var(--violet-600); display: flex; align-items: center; gap: 6px; }
  .saved-card-stats .n svg { width: 15px; height: 15px; color: var(--muted-2); }
  .saved-card-stats .l { font-size: 11px; color: var(--muted); font-weight: 600; }

  /* ---------- Sidebar panels ---------- */
  .qa-list { display: grid; gap: 10px; }
  .qa-list .qa-btn { }
  .tip-card, .help-card {
    background: var(--violet-50); border: 1px solid var(--violet-100);
    border-radius: var(--radius); padding: 18px 20px;
  }
  .tip-card .ico, .help-card .ico {
    width: 34px; height: 34px; border-radius: 10px; background: var(--violet-600); color: #fff;
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
  }
  .tip-card .ico svg, .help-card .ico svg { width: 17px; height: 17px; }
  .tip-card h3, .help-card h3 { font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
  .tip-card p, .help-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 10px; }
  .tip-card .go-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--violet-600); }
  .tip-card .go-link svg { width: 13px; height: 13px; }
  .help-card .help-video-btn-light {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--violet-200);
    padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  }
  .help-card .help-video-btn-light .play { width: 22px; height: 22px; border-radius: 999px; background: var(--violet-600); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
  .help-card .help-video-btn-light .play svg { width: 10px; height: 10px; }

  /* ---------- Save-search CTA banner ---------- */
  .save-cta {
    display: flex; align-items: center; gap: 36px;
    background: linear-gradient(120deg, var(--violet-50), var(--bg-lav));
    border: 1px solid var(--violet-100);
    border-radius: var(--radius);
    padding: 34px 40px;
  }
  .save-cta-visual { flex: none; width: 120px; height: 100px; color: var(--violet-400, var(--violet-500)); position: relative; }
  .save-cta-visual svg { width: 100%; height: 100%; }
  .save-cta-text h2 { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
  .save-cta-text p { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; max-width: 460px; }

  @media (max-width: 1180px) {
    .saved-side { order: -1; }
  }
  @media (max-width: 860px) {
    .saved-card { flex-wrap: wrap; }
    .saved-card-stats { width: 100%; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 14px; align-items: flex-start; text-align: left; margin-top: 4px; }
    .save-cta { flex-direction: column; text-align: center; padding: 28px 24px; }
    .save-cta-text p { max-width: none; }
  }
  @media (max-width: 560px) {
    .saved-card-head { position: relative; }
    .saved-card-actions { width: 100%; margin-left: 0; margin-top: 8px; }
  }

  /* ============================================================
     AI Analysis page
     ============================================================ */
  .stat-card .ico.amber { background: var(--amber-bg); color: var(--amber-fg); }

  /* ---------- Header ---------- */
  .ai-header h1 { display: flex; align-items: center; gap: 12px; }
  .ai-header-ico {
    width: 42px; height: 42px; flex: none; border-radius: 13px;
    background: var(--violet-100); color: var(--violet-700);
    display: flex; align-items: center; justify-content: center;
  }
  .ai-header-ico svg { width: 22px; height: 22px; }
  .feature-bullets { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
  .feature-bullet { display: flex; align-items: center; gap: 9px; }
  .feature-bullet .ico { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .feature-bullet .ico svg { width: 16px; height: 16px; }
  .feature-bullet span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.3; }

  /* ---------- Period filter row ---------- */
  .period-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .period-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 16px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
    cursor: pointer;
  }
  .period-btn svg.lead { width: 15px; height: 15px; color: var(--violet-600); }
  .period-btn svg.chev { width: 14px; height: 14px; color: var(--muted-2); }
  .usage-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--violet-50); border: 1px solid var(--violet-100); color: var(--violet-700);
    border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  }

  /* ---------- Analysis panel: sub-tabs + donut + bars ---------- */
  .analysis-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .analysis-panel-head h2 { font-size: 15.5px; font-weight: 800; }
  .analysis-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 22px; }
  .analysis-split-div { border-right: 1px solid var(--line); padding-right: 26px; }

  .donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .donut-chart { position: relative; width: 168px; height: 168px; flex: none; }
  .donut-chart svg { width: 100%; height: 100%; }
  .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .donut-center .l { font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.3; max-width: 90px; }
  .donut-center .n { font-size: 22px; font-weight: 800; color: var(--ink); margin: 2px 0; }
  .donut-center .n small { font-size: 12px; color: var(--muted-2); font-weight: 700; }
  .donut-center .delta { font-size: 11px; font-weight: 700; color: var(--green-fg); }
  .donut-legend { display: grid; gap: 9px; flex: 1; min-width: 150px; }
  .donut-legend .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
  .donut-legend .dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
  .donut-legend .pct { font-weight: 700; color: var(--ink); }
  .donut-legend .cnt { margin-left: auto; color: var(--muted-2); font-size: 11.5px; }

  .bar-list h3 { font-size: 13px; font-weight: 800; margin-bottom: 14px; }
  .bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .bar-row .lbl { width: 108px; flex: none; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
  .bar-row .track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-lav); overflow: hidden; }
  .bar-row .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet-400, var(--violet-500)), var(--violet-600)); }
  .bar-row .pct { width: 36px; flex: none; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink); }

  /* ---------- Recent analyses list ---------- */
  .recent-list { display: grid; padding: 6px 8px 10px; }
  .recent-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; }
  .recent-item:hover { background: var(--bg-soft); }
  .recent-item .avatar { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .recent-item .time { font-size: 10px; color: var(--muted-2); font-weight: 600; }
  .recent-item .name { font-size: 12.5px; font-weight: 700; color: var(--ink); display: block; }
  .recent-item .loc { font-size: 11px; color: var(--muted); }
  .recent-item .score { margin-left: auto; text-align: right; flex: none; }
  .recent-item .score b { display: block; font-size: 12.5px; font-weight: 800; color: var(--violet-600); }
  .recent-item .score span { font-size: 9.5px; color: var(--muted-2); font-weight: 600; }

  /* ---------- Bottom light CTA ---------- */
  .analysis-cta {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--violet-50), var(--bg-lav));
    border: 1px solid var(--violet-100); border-radius: var(--radius);
    padding: 26px 30px;
  }
  .analysis-cta .ico { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #fff; color: var(--violet-600); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
  .analysis-cta .ico svg { width: 22px; height: 22px; }
  .analysis-cta-text { flex: 1; min-width: 200px; }
  .analysis-cta-text h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 4px; }
  .analysis-cta-text p { font-size: 13px; color: var(--muted); }
  .analysis-cta .deco { position: absolute; right: 18px; bottom: -10px; width: 70px; height: 70px; color: var(--violet-200); opacity: .7; }

  @media (max-width: 1180px) {
    .analysis-split { grid-template-columns: 1fr; }
    .analysis-split-div { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 22px; margin-bottom: 4px; }
  }
  @media (max-width: 900px) {
    .ai-header { flex-direction: column; }
    .ai-header-visual { align-self: flex-end; }
  }
  @media (max-width: 640px) {
    .period-row { flex-direction: column; align-items: stretch; }
    .feature-bullets { gap: 14px; }
    .analysis-panel-head { flex-direction: column; align-items: flex-start; }
    .bar-row .lbl { width: 84px; font-size: 11.5px; }
  }

  /* ============================================================
     Lead Score page
     ============================================================ */
  .stat-card .ico.slate { background: var(--bg-lav); color: var(--muted); }
  .stat-card .delta.down { color: var(--red-fg); }

  /* ---------- Header score chip ---------- */
  .score-float-card {
    position: absolute; left: -4px; top: -10px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 10px 16px 12px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    z-index: 2;
  }
  .score-float-card .sfc-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
  .score-float-card .sfc-head svg { width: 13px; height: 13px; color: var(--violet-600); }
  .score-float-card .sfc-ring { position: relative; width: 58px; height: 58px; }
  .score-float-card .sfc-ring svg { width: 100%; height: 100%; }
  .score-float-card .sfc-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--ink); }

  /* ---------- AI recommendation panel ---------- */
  .ai-reco-panel {
    height: 100%;
    background: linear-gradient(160deg, var(--violet-50), #fff);
    border: 1px solid var(--violet-100); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    display: flex; flex-direction: column;
  }
  .ai-reco-panel .arp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .ai-reco-panel .arp-head .ico { width: 32px; height: 32px; flex: none; border-radius: 10px; background: #fff; color: var(--amber-fg); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
  .ai-reco-panel .arp-head .ico svg { width: 16px; height: 16px; }
  .ai-reco-panel h2 { font-size: 14.5px; font-weight: 800; color: var(--ink); }
  .ai-reco-panel p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; }
  .ai-reco-panel .btn { width: 100%; justify-content: center; margin-top: auto; }

  /* ---------- Vertical bar chart ---------- */
  .vbar-panel-body { padding: 20px 22px 18px; }
  .vbar-chart { display: flex; gap: 10px; height: 250px; }
  .vbar-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 28px; font-size: 11px; color: var(--muted-2); font-weight: 600; text-align: right; width: 30px; flex: none; }
  .vbar-plot { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 16px; padding-bottom: 28px; }
  .vbar-gridlines { position: absolute; left: 0; right: 0; top: 0; bottom: 28px; display: flex; flex-direction: column; justify-content: space-between; z-index: 0; pointer-events: none; }
  .vbar-gridlines span { display: block; border-top: 1px dashed var(--line); }
  .vbar-col { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
  .vbar-col .val { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
  .vbar-col .bar { width: 54%; border-radius: 8px 8px 3px 3px; min-height: 2px; }
  .vbar-col .xlabel { position: absolute; bottom: -24px; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }

  /* ---------- Top industries list ---------- */
  .topind-list { display: grid; gap: 15px; padding: 18px 22px 20px; }
  .topind-row { display: flex; align-items: center; gap: 10px; }
  .topind-row .ico { width: 28px; height: 28px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
  .topind-row .lbl { width: 118px; flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
  .topind-row .track { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-lav); overflow: hidden; }
  .topind-row .fill { display: block; height: 100%; border-radius: 999px; }
  .topind-row .val { width: 24px; flex: none; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--ink); }

  @media (max-width: 900px) {
    .score-float-card { position: static; margin-bottom: 10px; }
    .leads-header-visual { flex-direction: column; align-items: flex-end; }
  }
  @media (max-width: 640px) {
    .vbar-plot { gap: 8px; }
    .vbar-col .xlabel { font-size: 10px; }
    .topind-row .lbl { width: 90px; font-size: 11.5px; }
  }

  /* ============================================================
     Opportunities (Възможности) page
     ============================================================ */
  .opp-float-chip {
    position: absolute; width: 34px; height: 34px; flex: none;
    background: #fff; border-radius: 10px; box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: center; color: var(--violet-600); z-index: 2;
  }
  .opp-float-chip svg { width: 16px; height: 16px; }

  /* ---------- Lead detail v2 (with topbar + side-by-side ring) ---------- */
  .lead-detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .back-link svg { width: 14px; height: 14px; }
  .back-link:hover { color: var(--violet-600); }
  .bookmark-btn {
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; color: var(--muted-2); display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .bookmark-btn svg { width: 15px; height: 15px; }
  .bookmark-btn:hover { color: var(--violet-600); border-color: var(--violet-300); }
  .bookmark-btn.active { color: var(--violet-600); border-color: var(--violet-300); background: var(--violet-50); }

  .lead-detail-top { display: flex; align-items: center; gap: 16px; margin: 2px 0 20px; }
  .score-ring-lg { position: relative; width: 116px; height: 116px; flex: none; }
  .score-ring-lg svg { width: 100%; height: 100%; }
  .score-ring-lg .srl-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .score-ring-lg .srl-center .num { font-size: 25px; font-weight: 800; color: var(--ink); line-height: 1; }
  .score-ring-lg .srl-center .num small { font-size: 12px; font-weight: 700; color: var(--muted-2); }
  .score-ring-lg .srl-center .lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 4px; }
  .score-ring-lg .srl-fire {
    position: absolute; right: 0; bottom: 2px; width: 26px; height: 26px; border-radius: 999px;
    background: #fff; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 13px;
  }

  .mini-scores-col { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
  .mini-score-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg-soft); }
  .mini-score-card .ico { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; }
  .mini-score-card .ico svg { width: 16px; height: 16px; }
  .mini-score-card .n { font-size: 15px; font-weight: 800; color: var(--ink); }
  .mini-score-card .n small { font-size: 11px; color: var(--muted-2); font-weight: 600; }
  .mini-score-card .l { font-size: 11px; color: var(--muted); font-weight: 600; }

  @media (max-width: 640px) {
    .lead-detail-top { flex-direction: column; align-items: flex-start; }
    .mini-scores-col { width: 100%; }
  }

  /* ============================================================
     Messages (Съобщения) page
     ============================================================ */
  .status-pill.sent { background: var(--violet-100); color: var(--violet-700); }
  .status-pill.opened { background: var(--green-bg); color: var(--green-fg); }
  .status-pill.replied { background: var(--amber-bg); color: var(--amber-fg); }

  /* ---------- Filter tabs with count badge ---------- */
  .msg-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
  .msg-tab {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); cursor: pointer;
  }
  .msg-tab .badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--bg-lav); color: var(--ink-soft); }
  .msg-tab.active { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
  .msg-tab.active .badge { background: rgba(255,255,255,.22); color: #fff; }

  /* ---------- Message list ---------- */
  .msg-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .msg-toolbar .form-input { flex: 1; min-width: 180px; }
  .msg-list { display: grid; max-height: 640px; overflow-y: auto; }
  .msg-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--bg-lav); cursor: pointer; }
  .msg-row:first-child { border-top: none; }
  .msg-row:hover { background: var(--bg-soft); }
  .msg-row.active { background: var(--violet-50); }
  .msg-row .avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 17px; }
  .msg-row .body { flex: 1; min-width: 0; }
  .msg-row .top-line { display: flex; align-items: center; gap: 8px; }
  .msg-row .name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
  .msg-row .meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .msg-row .preview { font-size: 12.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .msg-row .right-col { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .msg-row .time { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
  .msg-row .kebab { color: var(--muted-2); width: 15px; height: 15px; }

  /* ---------- Templates panel ---------- */
  .tmpl-list { display: grid; padding: 8px; gap: 2px; }
  .tmpl-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    background: none; border: none; text-align: left; cursor: pointer; width: 100%;
  }
  .tmpl-item:hover { background: var(--bg-soft); }
  .tmpl-item.active { background: var(--violet-50); color: var(--violet-700); }
  .tmpl-item .ico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--bg-lav); }
  .tmpl-item.active .ico { background: #fff; }
  .tmpl-item .lbl { flex: 1; }
  .tmpl-item .cnt { font-size: 12px; color: var(--muted-2); font-weight: 700; }
  .tmpl-tip { margin: 6px 14px 14px; padding: 18px; border-radius: 14px; background: var(--violet-50); border: 1px solid var(--violet-100); text-align: center; }
  .tmpl-tip .ico { width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--violet-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: var(--shadow-sm); }
  .tmpl-tip .ico svg { width: 20px; height: 20px; }
  .tmpl-tip p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 10px; }
  .tmpl-tip a { font-size: 12.5px; font-weight: 700; color: var(--violet-600); display: inline-flex; align-items: center; gap: 4px; }
  .tmpl-tip a svg { width: 13px; height: 13px; }

  /* ---------- Conversation detail ---------- */
  .conv-head { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .conv-head .avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 17px; }
  .conv-head h3 { font-size: 14px; font-weight: 800; }
  .conv-head .meta { font-size: 11.5px; color: var(--muted); }
  .conv-head .right { margin-left: auto; text-align: right; flex: none; }
  .conv-head .time { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 6px; }
  .conv-body { padding: 18px 20px; }
  .conv-bubble { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; white-space: pre-line; }
  .conv-actions { padding: 0 20px 20px; }
  .conv-actions h4 { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
  .conv-reply-btn { width: 100%; justify-content: space-between; font-size: 13.5px; padding: 12px 16px; margin-bottom: 8px; }
  .conv-ai-btn { width: 100%; justify-content: center; font-size: 13px; padding: 11px 14px; margin-bottom: 10px; background: #fff; color: var(--violet-700); border-color: var(--violet-200); }
  .conv-ai-btn:hover { border-color: var(--violet-400); }
  .conv-secondary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .conv-secondary-grid .btn {
    flex-direction: column; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 12px 6px; white-space: normal; text-align: center;
  }
  .conv-secondary-grid .btn svg { width: 16px; height: 16px; color: var(--muted-2); }

  @media (max-width: 1180px) {
    .messages-grid { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 640px) {
    .msg-toolbar { flex-direction: column; align-items: stretch; }
    .conv-secondary-grid { grid-template-columns: 1fr; }
  }

  /* ============================================================
     Campaigns (Кампании) page
     ============================================================ */
  .status-pill.camp-active { background: var(--green-bg); color: var(--green-fg); }
  .status-pill.camp-done { background: var(--bg-lav); color: var(--muted); }
  .status-pill.camp-paused { background: var(--orange-bg); color: var(--orange-fg); }

  .camp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
  .camp-toolbar .btn { font-size: 13.5px; padding: 12px 20px; }
  .camp-toolbar .btn svg { width: 16px; height: 16px; }
  .camp-toolbar .form-input { flex: 1; min-width: 180px; max-width: 260px; margin-left: auto; }
  .camp-toolbar .form-select { min-width: 150px; }

  .camp-cell { display: flex; align-items: center; gap: 12px; min-width: 260px; }
  .camp-cell .ico { width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; }
  .camp-cell .ico svg { width: 19px; height: 19px; }
  .camp-cell .name { display: block; font-weight: 700; color: var(--ink); font-size: 13px; }
  .camp-cell .desc { display: block; font-size: 11px; color: var(--muted-2); line-height: 1.4; max-width: 230px; margin-top: 2px; }
  .type-pill { font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
  .type-pill.email { background: var(--violet-100); color: var(--violet-700); }
  .type-pill.linkedin { background: var(--blue-bg); color: var(--blue-fg); }
  .type-pill.sms { background: #e0f2fe; color: #0369a1; }
  .type-pill.start { background: var(--teal-bg); color: var(--teal-fg); }
  .type-pill.followup { background: var(--pink-bg); color: var(--pink-fg); }
  .camp-num b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
  .camp-num span { font-size: 11px; color: var(--muted-2); }
  .icon-btn {
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
    color: var(--violet-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .icon-btn svg { width: 15px; height: 15px; }
  .icon-btn:hover { border-color: var(--violet-300); background: var(--violet-50); }
  .camp-actions { display: flex; align-items: center; gap: 6px; }

  .quick-actions { display: grid; gap: 10px; padding: 16px 18px 18px; }
  .quick-action {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: #fff; transition: border-color .14s ease, transform .14s ease;
  }
  .quick-action:hover { border-color: var(--violet-300); transform: translateY(-1px); }
  .quick-action .ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; }
  .quick-action .ico svg { width: 18px; height: 18px; }

  .ai-tip-panel { padding: 18px 20px 20px; }
  .ai-tip-panel .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .ai-tip-panel .head svg { width: 18px; height: 18px; color: var(--violet-600); }
  .ai-tip-panel h3 { font-size: 13.5px; font-weight: 800; }
  .ai-tip-panel p { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
  .ai-tip-panel .btn { font-size: 12.5px; padding: 10px 16px; }

  .results-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 18px 20px 22px; }
  .results-donut .donut-chart { width: 150px; height: 150px; }
  .results-donut .donut-legend { min-width: 120px; gap: 10px; }
  .results-donut .donut-legend .row { align-items: flex-start; font-size: 11.5px; }
  .results-donut .donut-legend .dot { margin-top: 4px; }
  .results-donut .donut-legend small { display: block; font-size: 11px; color: var(--muted-2); }

  @media (max-width: 640px) {
    .camp-toolbar .form-input { max-width: none; margin-left: 0; }
    .camp-toolbar .btn { width: 100%; }
  }

  /* ============================================================
     Follow-ups page
     ============================================================ */
  .fu-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 0; }
  .fu-toolbar .sort-select { margin-left: auto; white-space: nowrap; }
  .fu-search { padding: 14px 20px 16px; border-bottom: 1px solid var(--line); }
  .fu-search .form-input { width: 100%; }
  .camp-pill { font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; background: var(--violet-100); color: var(--violet-700); }
  .fu-date b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .fu-date span { font-size: 11.5px; color: var(--muted-2); }

  .stats-list { display: grid; gap: 14px; padding: 18px 20px 20px; }
  .stats-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft); }
  .stats-row .ico { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; }
  .stats-row .ico svg { width: 13px; height: 13px; }
  .stats-row .lbl { flex: 1; }
  .stats-row .val { font-weight: 800; color: var(--ink); }
  .stats-row .val small { font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 3px; }
  .stats-row .dl { width: 46px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--green-fg); }

  .upcoming-list { display: grid; gap: 4px; padding: 10px 14px 16px; }
  .upcoming-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
  .upcoming-item:hover { background: var(--bg-soft); }
  .upcoming-item .time { width: 48px; flex: none; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
  .upcoming-item .time i { width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid var(--violet-300); display: inline-block; flex: none; }
  .upcoming-item .avatar { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; }
  .upcoming-item .name { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .upcoming-item .sub { font-size: 11px; color: var(--muted); }

  /* ============================================================
     CRM Pipeline page
     ============================================================ */
  .app-content.wide { max-width: 1640px; }
  .pipe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .pipe-actions .btn { font-size: 12.5px; padding: 9px 14px; gap: 7px; }
  .pipe-actions .btn svg { width: 15px; height: 15px; }
  .pipe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
  .pipe-main { min-width: 0; display: grid; gap: 18px; }
  .pipe-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .pipe-stats .stat-card { padding: 16px; }
  .pipe-stats .stat-card .ico { margin-bottom: 10px; }

  .pipe-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
  .pipe-filters .form-input { flex: 1; min-width: 180px; }
  .pf-field { display: grid; gap: 4px; }
  .pf-field > span { font-size: 10.5px; font-weight: 700; color: var(--muted); }
  .pf-field .form-select { min-width: 110px; padding: 8px 10px; }
  .view-toggle { display: inline-flex; gap: 4px; margin-left: auto; }
  .view-toggle button { font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
  .view-toggle button.active { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }

  .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
  .kan-col { background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; min-height: 200px; }
  .kan-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 13px 13px 0 0; font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--violet-50); }
  .kan-head svg { width: 15px; height: 15px; color: var(--violet-600); flex: none; }
  .kan-head .cnt { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--violet-700); }
  .kan-head.c1 { background: #ede9fe; } .kan-head.c2 { background: #f3e8ff; } .kan-head.c3 { background: #e0f2fe; }
  .kan-head.c4 { background: #fce7f3; } .kan-head.c5 { background: #ffedd5; } .kan-head.c6 { background: #dbeafe; } .kan-head.c7 { background: #f1f5f9; }
  .kan-body { display: grid; gap: 9px; padding: 10px; align-content: start; flex: 1; min-height: 60px; }
  .kan-body.drag-over { background: var(--violet-50); }
  .kan-add { border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--violet-600); padding: 10px; cursor: pointer; border-top: 1px solid var(--bg-lav); border-radius: 0 0 13px 13px; }
  .kan-add:hover { background: var(--violet-50); }
  .pipe-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: var(--shadow-sm); cursor: grab; }
  .pipe-card:hover { border-color: var(--violet-300); }
  .pipe-card.selected { border-color: var(--violet-500); box-shadow: 0 0 0 2px var(--violet-100); }
  .pipe-card.dragging { opacity: .45; }
  .pc-top { display: flex; align-items: flex-start; gap: 8px; }
  .pc-top .avatar { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .pc-top .name { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
  .pc-top .sub { display: block; font-size: 10.5px; color: var(--muted-2); line-height: 1.3; margin-top: 1px; }
  .pc-top .kebab { margin-left: auto; color: var(--muted-2); flex: none; }
  .pc-top .kebab svg { width: 13px; height: 13px; }
  .pc-bottom { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
  .pc-bottom .time { font-size: 10.5px; color: var(--muted-2); }
  .score-dot { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
  .score-dot.hi { background: var(--green-bg); color: var(--green-fg); }
  .score-dot.mid { background: var(--violet-100); color: var(--violet-700); }
  .score-dot.lo { background: var(--amber-bg); color: var(--amber-fg); }
  .score-dot.bad { background: var(--red-bg); color: var(--red-fg); }
  .pc-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10.5px; font-weight: 600; color: var(--violet-700); }
  .pc-note svg { width: 12px; height: 12px; flex: none; }
  .pc-note.muted { color: var(--muted-2); }

  .pipe-bottom { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; align-items: start; }
  .funnel { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 16px 18px 12px; }
  .funnel-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
  .funnel-col .v { font-size: 11px; font-weight: 800; color: var(--ink); line-height: 1.1; text-align: center; }
  .funnel-col .v small { display: block; font-size: 9.5px; font-weight: 600; color: var(--muted-2); }
  .funnel-col .bar { width: 100%; max-width: 40px; border-radius: 6px 6px 2px 2px; margin: 5px 0; }
  .funnel-col .lbl { font-size: 9.5px; color: var(--muted); font-weight: 600; text-align: center; }
  .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 16px; }
  .quick-grid .quick-action { padding: 8px 10px; font-size: 11.5px; }
  .quick-grid .quick-action .ico { width: 28px; height: 28px; }
  .quick-grid .quick-action .ico svg { width: 14px; height: 14px; }
  .task-list { display: grid; gap: 4px; padding: 10px 16px 14px; }
  .task-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 11.5px; color: var(--ink-soft); }
  .task-item .t { width: 40px; flex: none; color: var(--muted); font-weight: 600; }
  .task-item i { width: 9px; height: 9px; border: 1.5px solid var(--violet-300); border-radius: 3px; margin-top: 3px; flex: none; }
  .task-item b { display: block; font-weight: 700; color: var(--ink); }
  .task-item span span { color: var(--muted-2); font-size: 10.5px; }

  .pipe-detail { position: sticky; top: 76px; padding: 18px; max-height: calc(100vh - 92px); overflow-y: auto; }
  .pd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .pd-head .avatar { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 19px; }
  .pd-head h3 { font-size: 15px; font-weight: 800; }
  .pd-head .meta { font-size: 11px; color: var(--muted); display: block; }
  .pd-close { margin-left: auto; width: 26px; height: 26px; border: none; background: var(--bg-soft); border-radius: 999px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
  .pd-close svg { width: 13px; height: 13px; }
  .pd-score { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .pd-ring { position: relative; width: 60px; height: 60px; flex: none; }
  .pd-ring svg { width: 100%; height: 100%; }
  .pd-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--ink); }
  .pd-score .lbl { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
  .pd-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
  .pd-mini .btn { font-size: 10.5px; padding: 7px 4px; gap: 5px; border-radius: 8px; }
  .pd-mini .btn svg { width: 12px; height: 12px; color: var(--violet-600); }
  .pipe-detail h4 { font-size: 12px; font-weight: 800; color: var(--ink); margin: 14px 0 8px; }
  .pd-rows { display: grid; gap: 8px; }
  .pd-rows .row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); }
  .pd-rows svg { width: 13px; height: 13px; color: var(--violet-500); flex: none; }
  .pd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .pd-tags span { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--blue-bg); color: var(--blue-fg); }
  .pd-actions { display: grid; gap: 4px; margin-top: 14px; }
  .pd-actions a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
  .pd-actions a:hover { background: var(--bg-soft); }
  .pd-actions svg { width: 15px; height: 15px; color: var(--violet-600); }

  /* ---------- Clients page ---------- */
  .cl-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .cl-top-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .cl-top-actions .btn { font-size: 12px; padding: 9px 13px; gap: 6px; }
  .cl-top-actions .btn svg { width: 14px; height: 14px; }
  .cl-sales { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
  .cl-sales .app-avatar { width: 28px; height: 28px; font-size: 10px; }
  .cl-contract b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
  .cl-contract span { font-size: 11px; color: var(--muted-2); }
  .cl-detail { padding: 18px; }
  .cl-detail .pd-head .pill-row { display: flex; align-items: center; gap: 8px; }
  .cl-contact { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; }
  .cl-contact span { display: inline-flex; align-items: center; gap: 5px; }
  .cl-contact svg { width: 12px; height: 12px; color: var(--violet-500); }
  .cl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
  .cl-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .cl-box h5 { font-size: 11.5px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
  .cl-box .pd-score { margin: 0; flex-wrap: wrap; }
  .cl-box .pd-rows .row { font-size: 11px; }
  .cl-contractbox { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
  .cl-contractbox b { font-size: 16px; font-weight: 800; color: var(--ink); }
  .cl-contractbox small { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
  .cl-contractbox .btn { font-size: 10.5px; padding: 7px 10px; gap: 4px; }
  .cl-contractbox .btn svg { width: 11px; height: 11px; }
  .cl-block { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 11.5px; color: var(--ink-soft); }
  .cl-block .ico { width: 28px; height: 28px; border-radius: 8px; flex: none; background: var(--violet-50); color: var(--violet-600); display: flex; align-items: center; justify-content: center; }
  .cl-block .ico svg { width: 14px; height: 14px; }
  .cl-block b { display: block; font-size: 11px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
  .cl-team { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-bottom: 12px; }
  .cl-team .app-avatar { width: 28px; height: 28px; font-size: 10px; }
  .cl-team small { display: block; font-size: 10.5px; color: var(--muted-2); }
  .cl-team svg { width: 14px; height: 14px; margin-left: auto; color: var(--muted-2); }
  .cl-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .cl-btn-grid .btn { font-size: 11px; padding: 9px 8px; gap: 6px; }
  .cl-btn-grid .btn svg { width: 13px; height: 13px; color: var(--violet-600); }
  .cl-history { display: grid; gap: 8px; margin-top: 8px; }
  .cl-history .h { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-soft); }
  .cl-history .h i { width: 7px; height: 7px; border-radius: 999px; background: var(--violet-500); flex: none; }
  .cl-history .h span { color: var(--muted-2); width: 92px; flex: none; }
  .cl-history-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
  .cl-history-head h4 { margin: 0 !important; }
  .cl-history-head a { font-size: 10.5px; font-weight: 700; color: var(--violet-600); }

  /* ---------- Tasks page ---------- */
  .tk-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .tk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 0; }
  .tk-toolbar .view-toggle { margin-left: 0; }
  .tk-toolbar .btn { margin-left: auto; font-size: 12.5px; padding: 10px 16px; gap: 6px; }
  .tk-toolbar .btn svg { width: 15px; height: 15px; }
  .tk-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 16px; }
  .tk-filters .form-input { flex: 1; min-width: 180px; }
  .tk-sel { gap: 6px; }
  .tk-sel > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .tk-task { display: flex; align-items: center; gap: 10px; min-width: 230px; }
  .tk-task .ico { width: 34px; height: 34px; border-radius: 10px; flex: none; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; }
  .tk-task .ico svg { width: 16px; height: 16px; }
  .tk-task .name { display: block; font-weight: 700; font-size: 12.5px; color: var(--ink); }
  .tk-task .desc { display: block; font-size: 11px; color: var(--muted-2); margin-top: 1px; }
  .prio { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
  .prio::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
  .prio.hi { background: var(--red-bg); color: var(--red-fg); }
  .prio.mid { background: var(--orange-bg); color: var(--orange-fg); }
  .prio.lo { background: var(--green-bg); color: var(--green-fg); }
  .tk-side { display: grid; gap: 16px; }
  .tk-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 16px; }
  .tk-qa .btn { font-size: 11.5px; padding: 9px 8px; gap: 6px; }
  .tk-qa .btn svg { width: 14px; height: 14px; }
  .tk-cal-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }
  .tk-cal-nav svg { width: 14px; height: 14px; }
  .tk-cal-month { display: flex; align-items: center; gap: 6px; padding: 12px 18px 4px; font-size: 13px; font-weight: 800; color: var(--ink); }
  .tk-cal-month svg { width: 13px; height: 13px; color: var(--muted); }
  .tk-cal-list { display: grid; gap: 9px; padding: 8px 18px 6px; }
  .tk-cal-row { display: flex; gap: 12px; font-size: 12px; color: var(--ink-soft); }
  .tk-cal-row b { width: 38px; flex: none; color: var(--ink); }
  .tk-cal-row span { width: 42px; flex: none; color: var(--muted); }
  .tk-cal-link { display: block; padding: 8px 18px 16px; font-size: 11.5px; font-weight: 700; color: var(--violet-600); }
  .tk-motiv { position: relative; overflow: hidden; padding: 20px; border-radius: var(--radius); background: linear-gradient(135deg, var(--violet-50), var(--violet-100)); border: 1px solid var(--violet-100); font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; padding-left: 62px; }
  .tk-motiv .deco { position: absolute; left: 14px; top: 20px; width: 34px; height: 34px; color: var(--violet-400, #a78bfa); }

  /* ---------- Results (Резултати) page ---------- */
  .rep-toolbar { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
  .rep-toolbar .btn { font-size: 12px; padding: 9px 14px; gap: 7px; }
  .rep-toolbar .btn svg { width: 14px; height: 14px; color: var(--violet-600); }
  .rep-row3 { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr; gap: 16px; align-items: stretch; }
  .rep-row2 { display: grid; grid-template-columns: 1.9fr 1fr; gap: 16px; align-items: start; }
  .rep-row3 > *, .rep-row2 > * { min-width: 0; }
  .rep-legend { display: flex; gap: 14px; margin-left: auto; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
  .rep-legend button { font: inherit; color: inherit; border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0; }
  .rep-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
  .rep-legend button.off { opacity: .35; }
  .rep-chart { padding: 6px 14px 14px; }
  .rep-chart svg { width: 100%; height: auto; display: block; }
  .rep-chart text { font-family: inherit; fill: var(--muted); font-size: 10px; }
  .rep-side { display: grid; gap: 16px; }
  .rep-insights { padding: 12px 18px 16px; display: grid; gap: 10px; }
  .rep-insights li { display: flex; gap: 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
  .rep-insights svg { width: 15px; height: 15px; color: var(--violet-600); flex: none; margin-top: 1px; }
  .rep-cta { position: relative; overflow: hidden; padding: 20px 22px; border-radius: var(--radius); background: linear-gradient(135deg, var(--violet-600), var(--violet-700)); color: #fff; display: flex; gap: 14px; align-items: flex-start; }
  .rep-cta > svg { width: 30px; height: 30px; flex: none; opacity: .9; }
  .rep-cta h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 5px; }
  .rep-cta p { font-size: 12px; color: var(--violet-100); line-height: 1.5; margin-bottom: 12px; }
  .rep-cta .btn { font-size: 12px; padding: 9px 14px; gap: 6px; }
  .rep-cta .btn svg { width: 13px; height: 13px; }
  .rep-cta .deco { position: absolute; right: -10px; bottom: -14px; width: 70px; height: 70px; color: rgba(255,255,255,.15); }
  .rep-camp { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 12px; white-space: nowrap; }
  .rep-camp .ico { width: 30px; height: 30px; border-radius: 9px; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; flex: none; }
  .rep-camp .ico svg { width: 15px; height: 15px; }
  .rep-share-ok { color: var(--green-fg) !important; }

  @media (max-width: 1280px) {
    .rep-row3 { grid-template-columns: 1fr 1fr; }
    .rep-row3 > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 1100px) {
    .rep-row2 { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .rep-row3 { grid-template-columns: 1fr; }
  }

  /* ---------- Analytics page ---------- */
  .an-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .an-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .an-toolbar-left .btn { font-size: 12px; padding: 9px 14px; gap: 7px; }
  .an-toolbar-left .btn svg { width: 14px; height: 14px; color: var(--violet-600); }
  .an-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .an-toolbar-right .form-select { min-width: 150px; }
  .an-toolbar-right .form-select select { font-size: 12px; }

  .bar-row .ico { width: 24px; height: 24px; border-radius: 7px; background: var(--violet-100); color: var(--violet-600); display: flex; align-items: center; justify-content: center; flex: none; }
  .bar-row .ico svg { width: 13px; height: 13px; }
  .bar-row.has-ico .lbl { width: auto; flex: 1; }

  .geo-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 14px 18px 18px; }
  .geo-shape { position: relative; width: 150px; height: 150px; flex: none; }
  .geo-shape svg { width: 100%; height: 100%; overflow: visible; }
  .geo-pin { font-size: 8.5px; font-weight: 700; fill: var(--violet-700); }
  .geo-legend { min-width: 150px; }

  .behavior-list { display: grid; gap: 4px; padding: 10px 8px 12px; }
  .behavior-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; }
  .behavior-row:hover { background: var(--bg-soft); }
  .behavior-row .ico { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .behavior-row .ico svg { width: 15px; height: 15px; }
  .behavior-row .lbl { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); min-width: 0; }
  .behavior-row .val-wrap { text-align: right; flex: none; }
  .behavior-row .val { font-size: 14px; font-weight: 800; color: var(--ink); }
  .behavior-row .bdelta { display: block; font-size: 11px; font-weight: 700; margin-top: 1px; }
  .behavior-row .bdelta.up { color: var(--green-fg); }
  .behavior-row .bdelta.down { color: var(--green-fg); }

  .insights-cta { flex-direction: column; align-items: stretch; }
  .ic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .ic-head .ico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
  .ic-head .ico svg { width: 18px; height: 18px; }
  .ic-head h3 { font-size: 15px; font-weight: 800; }
  .ic-list { display: grid; gap: 10px; margin-bottom: 16px; }
  .ic-list li { display: flex; gap: 8px; font-size: 12.5px; color: var(--violet-100); line-height: 1.5; }
  .ic-list svg { width: 16px; height: 16px; color: #fff; flex: none; margin-top: 1px; }
  .insights-cta .btn { align-self: flex-start; }

  @media (max-width: 1280px) {
    .an-toolbar-right .form-select { min-width: 130px; }
  }
  @media (max-width: 760px) {
    .geo-wrap { flex-direction: column; }
  }

  /* ---------- Settings popup menu ---------- */
  button.app-nav-link { width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; }
  .settings-trigger-wrap { position: relative; }
  .settings-trigger[aria-expanded="true"] { background: var(--bg-lav); color: var(--ink); }
  .settings-popup {
    /* position: fixed (not absolute) so this escapes .app-sidebar's clipping box —
       overflow-y: auto on the sidebar forces overflow-x: auto too (per spec, when only
       one axis is 'visible' it is promoted to 'auto'), which silently clipped this
       flyout when it was absolutely positioned outside the sidebar's right edge.
       Coordinates are computed in JS (positionPopup) since fixed has no offset parent. */
    position: fixed;
    width: 258px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 8px; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .settings-popup.open { opacity: 1; visibility: visible; transform: translateX(0); }
  .settings-popup-head { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 6px 10px 8px; }
  .settings-popup a {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
    font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 1px;
  }
  .settings-popup a svg { width: 16px; height: 16px; flex: none; color: var(--muted-2); }
  .settings-popup a:hover { background: var(--bg-lav); color: var(--ink); }
  .settings-popup a.active { background: var(--violet-50); color: var(--violet-700); }
  .settings-popup a.active svg { color: var(--violet-600); }

  /* ---------- Settings pages ---------- */
  .settings-layout { display: grid; grid-template-columns: 236px 1fr; gap: 18px; align-items: start; }
  .settings-nav-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; position: sticky; top: 84px; }
  .settings-nav-list a {
    display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px;
  }
  .settings-nav-list a svg { width: 16px; height: 16px; flex: none; color: var(--muted-2); }
  .settings-nav-list a:hover { background: var(--bg-lav); }
  .settings-nav-list a.active { background: linear-gradient(180deg, var(--violet-600), var(--violet-700)); color: #fff; box-shadow: 0 8px 18px -8px rgba(124, 58, 237, .5); }
  .settings-nav-list a.active svg { color: #fff; }
  .settings-content { display: grid; gap: 16px; min-width: 0; }
  .settings-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
  .settings-card h2 { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 3px; display: flex; align-items: center; gap: 9px; }
  .settings-card h2 svg { width: 18px; height: 18px; color: var(--violet-600); }
  .settings-card .desc { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
  .settings-field { margin-bottom: 14px; }
  .settings-field label.f-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
  .settings-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .settings-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
  .settings-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .settings-avatar-row .app-avatar { width: 64px; height: 64px; font-size: 22px; }
  .f-textarea { width: 100%; min-height: 92px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13px; color: var(--ink); resize: vertical; }
  .f-textarea:focus { outline: none; border-color: var(--violet-400, var(--violet-500)); }
  .chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--violet-100); color: var(--violet-700); font-size: 12px; font-weight: 700; border: 1px solid transparent; cursor: pointer; }
  .chip.off { background: var(--bg-lav); color: var(--muted); }
  .chip svg { width: 12px; height: 12px; }

  .tgl-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .tgl-row:last-child { border-bottom: 0; }
  .tgl-row .tt { font-size: 13px; font-weight: 700; color: var(--ink); }
  .tgl-row .ts { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .tgl { position: relative; width: 40px; height: 23px; flex: none; display: inline-block; }
  .tgl input { opacity: 0; width: 0; height: 0; position: absolute; }
  .tgl .sl { position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background .15s ease; }
  .tgl .sl::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .tgl input:checked + .sl { background: var(--violet-600); }
  .tgl input:checked + .sl::before { transform: translateX(17px); }

  .int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .int-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
  .int-card .ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
  .int-card .ico svg { width: 20px; height: 20px; }
  .int-card h4 { font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .int-card p { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-bottom: 12px; }
  .int-card .status { margin-top: auto; display: flex; align-items: center; gap: 8px; }
  .int-status-pill { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
  .int-status-pill.on { background: var(--green-bg); color: var(--green-fg); }
  .int-status-pill.off { background: var(--bg-lav); color: var(--muted); }

  .plan-card { border-radius: var(--radius); padding: 22px 24px; background: linear-gradient(135deg, var(--violet-600), var(--violet-700)); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .plan-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
  .plan-card p { font-size: 12.5px; color: var(--violet-100); }
  .plan-price { font-size: 26px; font-weight: 800; }
  .plan-price small { font-size: 12px; font-weight: 600; color: var(--violet-100); }

  .sess-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .sess-row:last-child { border-bottom: 0; }
  .sess-row .ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; }
  .sess-row .ico svg { width: 17px; height: 17px; }
  .sess-row .info b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .sess-row .info span { font-size: 11.5px; color: var(--muted); }

  @media (max-width: 1100px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav-list { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 8px; }
    .settings-nav-list a { flex: none; white-space: nowrap; }
  }
  @media (max-width: 640px) {
    .settings-grid-2 { grid-template-columns: 1fr; }
    .settings-avatar-row { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- Профил page (redesign) ---------- */
  .profile-top-grid, .profile-main-grid { display: grid; grid-template-columns: 1fr 336px; gap: 18px; }
  .profile-top-grid { align-items: stretch; }
  .profile-main-grid { align-items: start; }
  .profile-side { display: grid; gap: 16px; }

  .settings-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

  .avatar-xl-wrap { position: relative; flex: none; }
  .avatar-xl { width: 88px; height: 88px; border-radius: 999px; background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; overflow: hidden; }
  .avatar-cam-btn { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 999px; background: var(--violet-600); color: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .avatar-cam-btn svg { width: 13px; height: 13px; }
  .req { color: var(--red-fg); }

  .form-input .pw-eye { border: 0; background: none; padding: 0; margin-left: auto; color: var(--muted-2); cursor: pointer; display: flex; align-items: center; flex: none; }
  .form-input .pw-eye svg { width: 16px; height: 16px; }
  .form-input .pw-eye:hover { color: var(--ink-soft); }

  .status-box { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; flex-wrap: wrap; }
  .status-box.ok { background: var(--green-bg); }
  .status-box .ico { width: 38px; height: 38px; border-radius: 999px; background: #fff; color: var(--green-fg); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-sm); }
  .status-box .ico svg { width: 18px; height: 18px; }
  .status-box .txt { flex: 1; min-width: 180px; }
  .status-box .txt b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .status-box .txt span { font-size: 12px; color: var(--ink-soft); }

  .quick-set-list { display: grid; gap: 2px; }
  .quick-set-list a { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; }
  .quick-set-list a:hover { background: var(--bg-soft); }
  .quick-set-list .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; flex: none; }
  .quick-set-list .ico svg { width: 16px; height: 16px; }
  .quick-set-list .lbl { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
  .quick-set-list .chev { width: 14px; height: 14px; color: var(--muted-2); flex: none; }

  .tip-panel { position: relative; overflow: hidden; background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: var(--radius); padding: 18px 20px; }
  .tip-panel .tp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; position: relative; z-index: 1; }
  .tip-panel .tp-head .ico { width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--violet-600); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-sm); }
  .tip-panel .tp-head .ico svg { width: 15px; height: 15px; }
  .tip-panel h3 { font-size: 13.5px; font-weight: 800; color: var(--violet-700); }
  .tip-panel p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; position: relative; z-index: 1; }
  .tip-panel .deco { position: absolute; right: -8px; bottom: -10px; width: 56px; height: 56px; color: var(--violet-200); }

  .security-banner { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 22px 0; background: linear-gradient(150deg, var(--violet-50) 0%, #eef2ff 55%, #e9f2ff 100%); border: 1px solid var(--violet-100); display: flex; flex-direction: column; height: 100%; }
  .security-banner .sb-title { font-family: 'Caveat', cursive; font-size: 23px; font-weight: 700; color: var(--violet-700); line-height: 1.25; position: relative; z-index: 1; }
  .security-banner .sb-illust { flex: 1; display: flex; align-items: flex-end; justify-content: center; margin-top: 6px; }
  .security-banner .sb-illust svg { width: 100%; max-width: 210px; height: auto; }

  @media (max-width: 1100px) {
    .profile-top-grid, .profile-main-grid { grid-template-columns: 1fr; }
    .security-banner { padding-bottom: 18px; }
  }
  @media (max-width: 640px) {
    .settings-grid-3 { grid-template-columns: 1fr; }
  }

  /* ---------- Компания page ---------- */
  .logo-upload { border: 1.5px dashed var(--violet-200); border-radius: 12px; background: var(--bg-soft); display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; height: 100%; }
  .logo-upload:hover { border-color: var(--violet-400, #a78bfa); background: var(--violet-50); }
  .logo-upload .thumb { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); display: flex; align-items: center; justify-content: center; flex: none; }
  .logo-upload .thumb svg { width: 22px; height: 22px; color: #fff; }
  .logo-upload .txt b { display: block; font-size: 12.5px; font-weight: 700; color: var(--violet-700); }
  .logo-upload .txt span { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 1px; line-height: 1.4; }

  .info-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--blue-bg); }
  .info-notice svg { width: 18px; height: 18px; color: var(--blue-fg); flex: none; margin-top: 1px; }
  .info-notice p { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

  .company-preview { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 6px; }
  .company-preview .logo-circle { width: 72px; height: 72px; border-radius: 999px; background: linear-gradient(135deg, var(--violet-100), var(--violet-200)); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
  .company-preview .logo-circle svg { width: 34px; height: 34px; color: var(--violet-600); }
  .company-preview h3 { font-size: 16px; font-weight: 800; color: var(--ink); }
  .company-preview .tagline { font-size: 11.5px; color: var(--muted); margin-top: 2px; margin-bottom: 16px; }
  .company-preview-rows { display: grid; gap: 10px; width: 100%; text-align: left; margin-bottom: 14px; }
  .company-preview-rows .row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
  .company-preview-rows .row svg { width: 15px; height: 15px; color: var(--violet-500); flex: none; }
  .industry-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--violet-100); color: var(--violet-700); font-size: 11.5px; font-weight: 700; }
  .industry-badge svg { width: 13px; height: 13px; }

  .tip-illust { margin-top: 12px; }
  .tip-illust svg { width: 100%; height: auto; display: block; }
  .tip-caption { font-family: 'Caveat', cursive; font-weight: 700; color: var(--violet-700); font-size: 16px; text-align: center; transform: rotate(-2deg); margin-top: -8px; }

  @media (max-width: 640px) {
    .logo-upload { margin-top: 4px; }
  }

  /* ---------- AI настройки page ---------- */
  .ai-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ai-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ai-grid-3 > *, .ai-grid-2 > * { min-width: 0; }

  .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .card-head .ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
  .card-head .ico svg { width: 19px; height: 19px; }
  .card-head h2 { font-size: 14.5px; font-weight: 800; color: var(--ink); }
  .card-expand { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; flex: none; }
  .card-expand svg { width: 13px; height: 13px; }
  .card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
  .field-note { font-size: 11.5px; color: var(--muted-2); margin-top: 10px; line-height: 1.5; }

  .tone-list { display: grid; gap: 8px; }
  .tone-opt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
  .tone-opt .dot { width: 22px; height: 22px; border-radius: 999px; background: var(--violet-100); color: var(--violet-600); flex: none; display: flex; align-items: center; justify-content: center; }
  .tone-opt .dot svg { width: 12px; height: 12px; }
  .tone-opt.selected { border-color: var(--violet-600); background: var(--violet-50); color: var(--ink); }
  .tone-opt.selected .dot { background: var(--violet-600); color: #fff; }

  .check-list { display: grid; gap: 11px; }
  .check-list label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
  .check-list input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--violet-600); flex: none; cursor: pointer; }

  .chip-x { display: inline-flex; align-items: center; gap: 7px; }
  .chip-x button { border: 0; background: none; padding: 0; color: inherit; opacity: .6; cursor: pointer; display: flex; align-items: center; }
  .chip-x button:hover { opacity: 1; }
  .chip-x button svg { width: 12px; height: 12px; }

  .chip-add { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1.5px dashed var(--violet-200); color: var(--violet-600); font-size: 12px; font-weight: 700; cursor: pointer; background: none; font-family: inherit; }
  .chip-add:hover { background: var(--violet-50); }
  .chip-add svg { width: 13px; height: 13px; }

  .ta-wrap { position: relative; }
  .ta-wrap textarea { padding-bottom: 24px; }
  .ta-count { position: absolute; right: 10px; bottom: 8px; font-size: 10.5px; color: var(--muted-2); font-weight: 600; }

  .example-box { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--bg-soft); height: 100%; }
  .example-box .ex-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--amber-fg); font-weight: 800; font-size: 13px; }
  .example-box .ex-head svg { width: 16px; height: 16px; }
  .example-box p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; white-space: pre-line; }

  @media (max-width: 1200px) {
    .ai-grid-3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 860px) {
    .ai-grid-3, .ai-grid-2 { grid-template-columns: 1fr; }
  }

  /* ---------- Lead Generation settings page ---------- */
  .lg-slider-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .lg-num-box { display: flex; align-items: center; gap: 6px; }
  .lg-num { font-size: 26px; font-weight: 800; color: var(--ink); min-width: 1ch; }
  .lg-stepper { display: flex; flex-direction: column; gap: 2px; }
  .lg-stepper button { width: 20px; height: 15px; border: 1px solid var(--line); background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; padding: 0; }
  .lg-stepper button:hover { border-color: var(--violet-300); color: var(--violet-600); }
  .lg-stepper svg { width: 9px; height: 9px; }
  .lg-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--amber-bg); color: var(--amber-fg); font-size: 11px; font-weight: 700; white-space: nowrap; }

  .lg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer; margin-bottom: 8px; background: linear-gradient(90deg, var(--violet-500) var(--_val, 50%), var(--bg-lav) var(--_val, 50%)); }
  .lg-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 3px solid var(--violet-600); box-shadow: var(--shadow-sm); cursor: pointer; }
  .lg-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 3px solid var(--violet-600); box-shadow: var(--shadow-sm); cursor: pointer; }
  .lg-range::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
  .lg-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); font-weight: 600; }

  .multi-select-box { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 8px 40px 8px 10px; min-height: 44px; display: flex; align-items: center; }
  .multi-select-box .chip-list { flex: 1; }
  .ms-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted-2); cursor: pointer; display: flex; padding: 4px; }
  .ms-toggle svg { width: 16px; height: 16px; transition: transform .15s ease; }
  .ms-toggle.open svg { transform: rotate(180deg); }
  .ms-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 20; display: none; max-height: 220px; overflow-y: auto; }
  .ms-dropdown.open { display: block; }
  .ms-dropdown button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
  .ms-dropdown button:hover { background: var(--bg-lav); }

  .filter-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; }
  .filter-check-grid label { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
  .filter-check-grid input { width: 16px; height: 16px; accent-color: var(--violet-600); flex: none; cursor: pointer; }
  .info-i { margin-left: auto; width: 15px; height: 15px; border-radius: 999px; background: var(--bg-lav); color: var(--muted-2); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; cursor: help; }

  .opp-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .opp-score-card { border-radius: 14px; padding: 14px 16px; }
  .osc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .osc-ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
  .osc-ico svg { width: 15px; height: 15px; }
  .osc-info { width: 16px; height: 16px; border-radius: 999px; background: rgba(255,255,255,.65); color: var(--muted); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: help; flex: none; }
  .osc-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .osc-val { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
  .osc-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.65); overflow: hidden; }
  .osc-bar span { display: block; height: 100%; border-radius: 999px; }

  .ic-illust { margin: 2px 0 14px; }
  .ic-illust svg { width: 100%; height: auto; display: block; }
  .ic-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.18); color: #fff; font-size: 11px; font-weight: 700; }
  .ic-pill svg { width: 13px; height: 13px; flex: none; }

  @media (max-width: 860px) {
    .opp-score-grid { grid-template-columns: 1fr 1fr; }
    .filter-check-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .opp-score-grid { grid-template-columns: 1fr; }
  }

  /* ---------- Email & Outreach page ---------- */
  .email-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .email-acc-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; }
  .email-acc-card .ea-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .email-acc-card .ea-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
  .email-acc-card .ea-ico svg { width: 20px; height: 20px; }
  .email-acc-card .ea-name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .ea-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; margin-top: 1px; }
  .ea-status .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
  .ea-status.on { color: var(--green-fg); }
  .ea-status.on .dot { background: var(--green-fg); }
  .ea-status.off { color: var(--muted); }
  .ea-status.off .dot { background: var(--muted-2); }
  .ea-email { font-size: 12px; color: var(--muted); margin: 6px 0 14px; }
  .ea-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
  .ea-actions { display: flex; gap: 8px; margin-top: auto; }
  .ea-actions .btn-icon { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #fbcfcf; background: #fff; color: var(--red-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
  .ea-actions .btn-icon:hover { background: var(--red-bg); }
  .ea-actions .btn-icon svg { width: 16px; height: 16px; }
  .ea-actions .btn-ghost { flex: 1; }

  .rt-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 7px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--bg-soft); }
  .rt-toolbar button { width: 27px; height: 27px; border: 0; background: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); cursor: pointer; flex: none; }
  .rt-toolbar button:hover { background: var(--bg-lav); }
  .rt-toolbar button svg { width: 14px; height: 14px; }
  .rt-toolbar select { border: 1px solid var(--line); border-radius: 6px; background: #fff; font-family: inherit; font-size: 11px; color: var(--ink-soft); padding: 4px 5px; }
  .rt-toolbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; flex: none; }

  .sig-preview { border: 1.5px dashed var(--violet-200); border-radius: 0 0 10px 10px; border-top: 0; background: var(--bg-soft); padding: 20px; }
  .sig-preview .sp-row { display: flex; gap: 16px; }
  .sig-preview .sp-avatar { width: 62px; height: 62px; border-radius: 999px; object-fit: cover; flex: none; background: linear-gradient(135deg, var(--violet-400, #a78bfa), var(--violet-700)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 20px; }
  .sig-preview .sp-name { font-size: 15px; font-weight: 800; color: var(--ink); }
  .sig-preview .sp-role { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 1px; }
  .sig-preview .sp-org { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
  .sig-preview .sp-contacts { display: grid; gap: 5px; margin-top: 10px; }
  .sig-preview .sp-contacts span { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); }
  .sig-preview .sp-contacts svg { width: 13px; height: 13px; color: var(--violet-500); flex: none; }
  .sig-preview .sp-social { display: flex; gap: 8px; margin-top: 12px; }
  .sig-preview .sp-social a { width: 26px; height: 26px; border-radius: 999px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; flex: none; }
  .sig-preview .sp-social svg { width: 13px; height: 13px; }

  .tmpl-list { display: grid; gap: 2px; }
  .tmpl-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; }
  .tmpl-row:hover { background: var(--bg-soft); }
  .tmpl-row .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--violet-100); color: var(--violet-700); display: flex; align-items: center; justify-content: center; flex: none; }
  .tmpl-row .ico svg { width: 16px; height: 16px; }
  .tmpl-row .info { flex: 1; min-width: 0; }
  .tmpl-row .info b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .tmpl-row .info span { display: block; font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tmpl-row .kebab { width: 26px; height: 26px; border: 0; background: none; color: var(--muted-2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 6px; }
  .tmpl-row .kebab:hover { background: var(--bg-lav); }
  .tmpl-row .kebab svg { width: 15px; height: 15px; }
  .tmpl-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--violet-600); margin-top: 8px; }
  .tmpl-view-all svg { width: 13px; height: 13px; }

  .num-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding-right: 4px; }
  .num-input input { border: 0; outline: none; flex: 1; font-family: inherit; font-size: 13.5px; color: var(--ink); padding: 10px 12px; width: 100%; }
  .num-input input::-webkit-outer-spin-button, .num-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .day-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
  .day-grid label { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
  .day-grid input { width: 16px; height: 16px; accent-color: var(--violet-600); flex: none; cursor: pointer; }
  .time-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
  .time-input svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
  .time-input input { border: 0; outline: none; font-family: inherit; font-size: 13px; color: var(--ink); width: 100%; }

  .fu-timeline { display: grid; gap: 14px; }
  .fu-row { display: flex; align-items: flex-start; gap: 12px; }
  .fu-row .fu-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; flex: none; }
  .fu-row .fu-body { flex: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .fu-row .fu-label { font-size: 13px; font-weight: 700; color: var(--ink); }
  .fu-row .fu-day { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-lav); color: var(--muted); }
  .fu-row .fu-desc { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }

  @media (max-width: 860px) {
    .email-acc-grid { grid-template-columns: 1fr; }
    .day-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 1400px) {
    .pipe-layout { grid-template-columns: 1fr; }
    .pipe-detail { position: static; max-height: none; }
    .pipe-stats { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1000px) {
    .pipe-bottom { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .pipe-stats { grid-template-columns: 1fr 1fr; }
    .view-toggle { margin-left: 0; }
  }