:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "PingFang SC",
    sans-serif;
  color: #1d1d1f;
  background: #f5f5f7;
}
.view#view-telegram td:nth-child(2)>strong{display:block;max-width:440px;white-space:pre-line;line-height:1.55}
.ui-button,.agent-card button,.source-form button,.row-actions button,.ops-form button,.setting button,.header-actions button{border:0!important;border-radius:10px!important;padding:9px 13px!important;background:#1d1d1f!important;color:#fff!important;font-weight:700!important;font-size:11px!important;cursor:pointer;box-shadow:0 1px 2px #0001}.ui-button:hover,.agent-card button:hover,.row-actions button:hover{background:#343438!important;transform:translateY(-1px)}.ui-button:disabled,.agent-card button:disabled{opacity:.4;transform:none}.row-actions button[data-delete]{background:#feecec!important;color:#b42318!important}.invite-edit{align-items:end}.invite-edit button{height:36px}.discovery-reason,.contact-hint,.entity-type{display:block;margin-top:6px;max-width:360px;color:#777;font-size:10px;line-height:1.45}.entity-type{display:inline-block;margin-left:5px;padding:3px 5px;border-radius:99px;background:#f0f0f2}.contact-hint{color:#1671e8}
.workflow-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:14px 22px;background:#f7f7f8;border-bottom:1px solid #e8e8ea;color:#555;font-size:11px}.workflow-note b{color:#1d1d1f}.workflow-note span{padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #ddd}.workflow-note i{font-style:normal;color:#1671e8}.telegram-thumbs{display:flex;min-width:92px}.telegram-thumbs img{width:42px;height:42px;object-fit:cover;border:2px solid #fff;border-radius:9px;background:#eee;box-shadow:0 1px 4px #0002}.telegram-thumbs img+img{margin-left:-10px}.composer-dialog{width:min(760px,calc(100vw - 32px));max-height:90vh;border:0;border-radius:20px;padding:0;box-shadow:0 24px 80px #0004}.composer-dialog::backdrop{background:rgba(15,15,18,.48);backdrop-filter:blur(3px)}.composer-dialog form{padding:24px}.composer-head{display:flex;justify-content:space-between;gap:20px}.composer-head small{font-weight:800;color:#1671e8;letter-spacing:.12em}.composer-head h2{margin:5px 0;font-size:22px}.composer-head p{margin:0;color:#777;font-size:12px}.composer-head>button{border:0;background:#f1f1f3;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}.telegram-product-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.telegram-product-preview article{min-width:0;border:1px solid #e2e2e5;border-radius:12px;overflow:hidden}.telegram-product-preview img{width:100%;height:110px;object-fit:cover;background:#eee}.telegram-product-preview strong{display:block;padding:8px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.composer-fields label{display:grid;gap:6px;color:#555;font-size:11px}.composer-fields input,.composer-fields select{border:1px solid #d6d6da;border-radius:10px;padding:11px;background:#fff}.composer-fields small{color:#888}.composer-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.secondary-action{background:#eee!important;color:#333!important}@media(max-width:700px){.telegram-product-preview{grid-template-columns:repeat(2,1fr)}.composer-fields{grid-template-columns:1fr}}
.product-summary{display:grid;grid-template-columns:repeat(5,minmax(125px,1fr));gap:10px;padding:16px 20px;background:linear-gradient(180deg,#fbfbfc,#f5f5f7);border-top:1px solid #ececef;border-bottom:1px solid #e5e5e7}.product-summary article{padding:15px 16px;border:1px solid #e4e4e7;border-radius:14px;background:#fff;box-shadow:0 2px 8px #00000008}.product-summary small,.product-summary span{display:block;color:#8a8a90;font-size:10px}.product-summary strong{display:block;margin:6px 0 5px;font-size:22px;letter-spacing:-.04em;color:#1d1d1f}.product-summary article:nth-child(2) strong{color:#16803d}.product-summary article:nth-child(3) strong{color:#b54708}.product-summary article:last-child strong{font-size:14px;letter-spacing:0}@media(max-width:900px){.product-summary{grid-template-columns:repeat(2,1fr)}}
.telegram-list-actions{display:flex;align-items:center;gap:9px}.telegram-list-actions>.soft{margin:0}.telegram-list-actions .ui-button{padding:8px 11px!important}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  min-height: 100vh;
}
button,
input {
  font: inherit;
}
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 238px;
  background: #fff;
  border-right: 1px solid #e5e5e7;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
}
.logo {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 10px 28px;
}
.logo span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1d1d1f;
}
.logo img {
  width: 34px;
  height: 34px;
}
.logo strong {
  font-size: 16px;
}
aside nav {
  display: grid;
  gap: 4px;
}
aside nav button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 11px 13px;
  border-radius: 9px;
  color: #5c5c61;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
aside nav button.active,
aside nav button:hover {
  background: #f0f0f2;
  color: #1d1d1f;
}
.account {
  margin-top: auto;
  border-top: 1px solid #eee;
  padding: 18px 8px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.account i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e7f0ff;
  color: #1671e8;
  font-style: normal;
  font-size: 12px;
}
.account div {
  display: grid;
}
.account strong {
  font-size: 13px;
}
.account small {
  color: #8d8d92;
}
.shell {
  margin-left: 238px;
  width: calc(100% - 238px);
}
header {
  padding: 38px clamp(24px, 5vw, 70px) 26px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
header p {
  margin: 0 0 6px;
  color: #8b8b90;
  font-size: 13px;
}
h1 {
  font-size: 30px;
  letter-spacing: -0.035em;
  margin: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-actions a {
  color: #666;
  text-decoration: none;
  font-size: 13px;
}
.header-actions button,
.setting button {
  border: 0;
  background: #1d1d1f;
  color: #fff;
  border-radius: 10px;
  padding: 11px 17px;
  font-weight: 650;
  cursor: pointer;
}
.header-actions button:disabled {
  opacity: 0.5;
}
main {
  padding: 0 clamp(24px, 5vw, 70px) 70px;
}
.view {
  display: none;
}
.view.active {
  display: block;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.metrics article,
.panel {
  background: #fff;
  border: 1px solid #e3e3e6;
  border-radius: 16px;
  box-shadow: 0 1px 2px #00000008;
}
.metrics article {
  padding: 20px;
}
.metrics p {
  font-size: 12px;
  color: #77777c;
  margin: 0;
}
.metrics strong {
  font-size: 32px;
  display: block;
  margin: 10px 0 6px;
}
.metrics small {
  color: #8b8b90;
  font-size: 12px;
}
.panel {
  margin-top: 18px;
  overflow: hidden;
}
.panel-head {
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ededee;
}
.panel-head h2,
.setting h2 {
  font-size: 18px;
  margin: 0;
}
.panel-head p,
.setting p {
  font-size: 13px;
  color: #8a8a8f;
  margin: 5px 0 0;
}
.secondary {
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
}
.soft {
  font-size: 11px;
  background: #f0f0f2;
  color: #68686d;
  padding: 7px 10px;
  border-radius: 99px;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  color: #8a8a8f;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #fafafa;
}
th,
td {
  padding: 13px 18px;
  border-bottom: 1px solid #eee;
}
td {
  font-size: 12px;
}
.product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
}
.product-cell img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
  background: #eee;
}
.pill {
  display: inline-block;
  background: #eef1f4;
  color: #62666c;
  padding: 5px 8px;
  border-radius: 99px;
  font-size: 10px;
  white-space: nowrap;
}
.pill.active,
.pill.success {
  background: #e8f7ed;
  color: #147638;
}
.pill.failed {
  background: #feecec;
  color: #b42318;
}
.pill.running {
  background: #e8f1ff;
  color: #175cd3;
}
.loading {
  text-align: center;
  color: #999;
  padding: 50px;
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #eee;
}
.integration-grid article {
  background: #fff;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.integration-grid i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c7c7cb;
}
.integration-grid i.ok {
  background: #19a05b;
  box-shadow: 0 0 0 4px #e8f7ed;
}
.integration-grid div {
  margin-right: auto;
}
.integration-grid strong {
  font-size: 13px;
}
.integration-grid p {
  margin: 3px 0 0;
  color: #888;
  font-size: 11px;
}
.integration-grid span {
  font-size: 10px;
  color: #8a8a8f;
}
.agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #eee;
}
.agent-card {
  position: relative;
  background: #fff;
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.agent-monogram {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.agent-logo,.platform-logo{width:42px;height:42px;flex:0 0 auto}.platform-logo{width:30px;height:30px;vertical-align:middle;margin-right:9px}.invite-edit{grid-column:1/-1;display:grid!important;grid-template-columns:1fr auto!important;gap:6px!important;margin-top:12px!important}.invite-edit input{min-width:220px}.invite-edit button{padding:8px 12px!important}.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:16px;border-top:1px solid #eee;flex-wrap:wrap}.pager button{border:1px solid #dedee2;background:#fff;color:#333;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:11px;font-weight:700}.pager button:hover:not(:disabled){border-color:#1d1d1f;background:#1d1d1f;color:#fff}.pager button:disabled{opacity:.35;cursor:not-allowed}.pager span,.pager label{font-size:11px;color:#777}.pager label{display:flex;align-items:center;gap:5px}.pager input{width:58px;border:1px solid #d7d7da;border-radius:8px;padding:7px 6px;text-align:center;background:#fff}
.agent-card h3 {
  font-size: 14px;
  margin: 2px 0 5px;
}
.agent-card h3 b {
  font-size: 9px;
  color: #7c3aed;
  background: #f3e8ff;
  padding: 4px 6px;
  border-radius: 99px;
  margin-left: 6px;
}
.agent-card p {
  font-size: 11px;
  color: #777;
  margin: 0 0 8px;
}
.agent-card a {
  font-size: 11px;
  color: #1671e8;
  text-decoration: none;
}
.agent-card > .pill {
  position: absolute;
  right: 18px;
  top: 18px;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.setting {
  padding: 22px;
  margin: 0;
  overflow: visible;
}
.setting label {
  display: grid;
  gap: 7px;
  margin: 20px 0 12px;
  font-size: 11px;
  color: #777;
}
.setting input {
  border: 1px solid #ddd;
  border-radius: 9px;
  padding: 11px;
}
.setting ul {
  padding-left: 18px;
  color: #555;
  font:
    12px ui-monospace,
    monospace;
  line-height: 1.9;
}
.roadmap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.roadmap span {
  font-size: 11px;
  border: 1px solid #ddd;
  border-radius: 99px;
  padding: 7px 10px;
}
.source-form {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 12px;
  align-items: end;
  padding: 20px 22px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}
.source-form label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  color: #777;
}
.source-form input {
  border: 1px solid #d7d7da;
  border-radius: 9px;
  padding: 11px 12px;
  background: #fff;
}
.source-form button,
.row-actions button {
  border: 0;
  background: #1d1d1f;
  color: #fff;
  border-radius: 9px;
  padding: 11px 15px;
  font-weight: 650;
  cursor: pointer;
}
.source-form-actions{display:flex;gap:8px;align-items:center}.source-form-actions button{white-space:nowrap}.source-form-actions button[hidden]{display:none}
.source-link {
  color: #1671e8;
  text-decoration: none;
  white-space: nowrap;
}
.source-error {
  display: block;
  color: #b42318;
  max-width: 260px;
  margin-top: 4px;
}
.source-platform {
  color: #1671e8;
  font-size: 9px;
  margin-left: 6px;
}
.row-actions {
  display: flex;
  gap: 6px;
}
.row-actions button {
  padding: 7px 10px;
  font-size: 11px;
}
.row-actions button + button {
  background: #eee;
  color: #555;
}
.row-actions button[data-delete] {
  color: #b42318;
  background: #feecec;
}
#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #1d1d1f;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.2s;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: none;
}
.ops-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;align-items:end;padding:20px 22px;background:#fafafa;border-bottom:1px solid #eee}.ops-form label,.setting label{display:grid;gap:7px;color:#777;font-size:11px}.ops-form .wide{grid-column:1/-2}.ops-form input,.ops-form textarea,.ops-form select,.setting input,.setting textarea,.setting select,.draft-output{width:100%;border:1px solid #d7d7da;border-radius:9px;padding:11px 12px;background:#fff}.ops-form textarea,.setting textarea{min-height:82px;resize:vertical}.ops-form button{border:0;border-radius:9px;padding:12px 16px;background:#1d1d1f;color:#fff;font-weight:700}.card-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:20px}.card-list article{border:1px solid #e3e3e6;border-radius:14px;overflow:hidden;background:#fff}.card-list img{width:100%;height:160px;object-fit:cover;background:#eee}.card-list article>div{padding:12px}.card-list p{font-size:12px;color:#666}.draft-output{min-height:250px;margin:18px 0}.ready{background:#e8f7ed;color:#147638}td textarea{width:min(360px,35vw);min-height:60px;border:1px solid #ddd;border-radius:8px;padding:8px}td a{color:#1671e8;text-decoration:none}.pill.approved{background:#e8f7ed;color:#147638}.pill.draft,.pill.pending_review{background:#fff4d6;color:#8a5a00}
.integration-config-panel{grid-column:1/-1}.integration-config-panel>div{display:grid;gap:10px;margin-top:18px}.integration-config-panel form{display:grid;grid-template-columns:160px 90px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #eee;border-radius:12px}.integration-config-panel form div{display:grid}.integration-config-panel form small{color:#888}.integration-config-panel textarea{min-height:70px;font-family:monospace;font-size:11px}
@media (max-width: 1000px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .ops-form{grid-template-columns:1fr}.ops-form .wide{grid-column:auto}.card-list{grid-template-columns:1fr}
  .source-form {
    grid-template-columns: 1fr;
  }
  aside {
    width: 72px;
  }
  .logo strong,
  aside nav button,
  .account div {
    display: none;
  }
  .shell {
    margin-left: 72px;
    width: calc(100% - 72px);
  }
  .metrics,
  .agent-grid,
  .integration-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  header {
    align-items: flex-start;
    gap: 15px;
  }
  .header-actions a {
    display: none;
  }
  h1 {
    font-size: 23px;
  }
}
.telegram-caption-preview{display:block;max-width:440px;white-space:pre-line;line-height:1.55}.message-preview-dialog form{padding:24px}.telegram-message-images{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.telegram-message-images img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#eee}.telegram-caption-field{display:grid;gap:8px;color:#555;font-size:12px}.telegram-caption-field textarea{width:100%;resize:vertical;border:1px solid #d6d6da;border-radius:12px;padding:14px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.row-actions button[data-preview-telegram],.row-actions button[data-edit-telegram]{background:#eef4ff;color:#1262c5}@media(max-width:700px){.telegram-message-images{grid-template-columns:repeat(2,1fr)}}
