.integration-card{
  position:relative;
  overflow:hidden;
}

.integration-card .top{
  align-items:flex-start;
}

.integration-card .icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #d7e5dc;
  border-radius:12px;
  background:#eef5f0;
  color:var(--green);
  font-size:18px;
  line-height:1;
}

.integration-card p{
  min-height:40px;
}

.integration-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}

.toggle,
.secondary-action{
  border:1px solid var(--line);
  border-radius:999px;
  background:#edf3ee;
  color:var(--green);
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}

.toggle:hover,
.secondary-action:hover{
  border-color:#bdd4c6;
  background:#e4eee8;
}

.toggle.primary-action{
  border-color:transparent;
  background:var(--green);
  color:#fff;
}

.toggle.primary-action:hover{
  background:#1f6452;
}

.telegram-pending{
  margin-top:14px;
  padding:12px 13px;
  border:1px solid #dbe7df;
  border-radius:13px;
  background:#f3f7f4;
}

.telegram-pending b{
  display:block;
  margin-bottom:3px;
  font-size:12px;
}

.telegram-pending small{
  display:block;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
}

.view.active {
  animation: portalViewIn .34s cubic-bezier(.2,.8,.2,1) both;
}

.metric,
.card,
.sidebar nav button {
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.metric:hover,
.safety-grid .card:hover,
.integration-grid .card:hover {
  transform: translateY(-2px);
  border-color: rgba(38,118,97,.24);
  box-shadow: 0 18px 48px rgba(17,53,45,.08);
}

.locked::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
}

@keyframes portalViewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  body,
  main,
  .sidebar,
  .view,
  .card { min-width: 0; max-width: 100%; }

  .sidebar {
    overflow: hidden;
    padding: 18px 15px 0;
  }

  .sidebar nav {
    display: flex;
    gap: 5px;
    margin: 14px -15px 0;
    padding: 0 15px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .sidebar nav::-webkit-scrollbar { display: none; }

  .sidebar nav button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 13px;
    white-space: nowrap;
  }

  main { overflow: hidden; }

  main > header > div,
  .section-head > div,
  .card-head > div { min-width: 0; }

  main > header p,
  .section-head p { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  main { padding: 26px 15px 56px; }

  main > header h1 { font-size: 31px; }
  main > header p { font-size: 13px; line-height: 1.5; }
  .view { margin-top: 26px; }

  .metrics { gap: 10px; }
  .metric { min-width: 0; padding: 15px; }
  .metric strong { font-size: 25px; }

  .card { min-width: 0; padding: 18px; border-radius: 14px; }
  .card-head { align-items: center; }
  .card-head h2 { font-size: 21px; }

  .row {
    min-width: 0;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px 10px;
    padding: 14px 4px;
  }

  .row > b,
  .row > span { min-width: 0; overflow-wrap: anywhere; }
  .row > span:first-of-type { grid-column: 1 / -1; }
  .row > span:nth-of-type(2) { grid-column: 1; }
  .row > span:last-child { grid-column: 2; grid-row: 1; }

  .conversation-layout { min-width: 0; }
  .conversation-button { min-width: 0; }
  .conversation-button div { gap: 8px; }
  .detail { min-height: 420px; }

  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .section-head button { width: 100%; }
  .lead-grid { grid-template-columns: 1fr; }
  .message { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}