/* ---------- Placeholder ---------- */
    .placeholder {
      max-width: 460px;
      margin: 20px auto;
      text-align: center;
      background: var(--surface);
      border: 1.5px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 44px 32px;
      opacity: 0;
      transform: translateY(8px);
      animation: fadeInUp .5s ease forwards;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .placeholder-icon {
      width: 34px;
      height: 34px;
      color: var(--muted-soft);
      margin: 0 auto 16px;
    }

    .placeholder h3 {
      margin: 0 0 8px;
      font-size: 17px;
      font-weight: 800;
    }

    .placeholder p {
      margin: 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.6;
    }

    .placeholder code {
      background: var(--green-tint);
      color: var(--green-dark);
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 12px;
    }

    /* ---------- Interactive polish: edge glow, spotlight, ripple ---------- */
    .glow-target::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: linear-gradient(120deg, transparent 15%, var(--green) 45%, var(--accent) 58%, transparent 85%);
      background-size: 220% 220%;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
      z-index: 2;
    }

    .glow-target:hover::before {
      opacity: 1;
      animation: edge-sweep 2.4s linear infinite;
    }

    @keyframes edge-sweep {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 220% 50%;
      }
    }

    .spotlight::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 92, 52, .10), transparent 72%);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
      z-index: 1;
    }

    .spotlight:hover::after {
      opacity: 1;
    }

    .ripple-host {
      overflow: hidden;
    }

    .ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      background: radial-gradient(circle, rgba(20, 92, 52, .24), transparent 70%);
      animation: ripple-anim .65s ease-out forwards;
      pointer-events: none;
      z-index: 3;
    }

    @keyframes ripple-anim {
      to {
        transform: scale(1);
        opacity: 0;
      }
    }

    /* ---------- Responsive ---------- */
    @media (max-width:760px) {
      .mech-block {
        flex-direction: column;
        border-radius: var(--radius-lg);
      }

      .bracket-col {
        display: none;
      }

      .mobile-divider {
        display: flex;
      }

      .opened-col {
        border-left: none;
        border-top: 1px solid var(--green-tint-strong);
      }
    }

    @media (max-width:900px) {
      .crm-shell {
        grid-template-columns: 1fr;
      }

      .crm-sidebar {
        display: none;
      }
    }

    @media (max-width:640px) {
      .node-box.send {
        padding: 22px 22px;
      }

      .followup-col,
      .opened-col {
        padding: 22px 20px;
      }

      .form-row-pair {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
      }
    }

    /* ---------- Focus states ---------- */
    .crm-nav-item:focus-visible,
    .node-box.send:focus-visible,
    .chip:focus-visible,
    .modal-close:focus-visible,
    .btn:focus-visible,
    .crm-pill:focus-visible,
    .seen-toggle:focus-visible,
    .pill-replied:focus-visible,
    .chip-badge-replied:focus-visible,
    .medium-toggle:focus-visible,
    .channel-toggle:focus-visible {
      outline: 2.5px solid var(--green);
      outline-offset: 2px;
    }