.telegram-main { max-width: 1320px; }
.telegram-metrics { margin-bottom: 18px; }
.telegram-metrics article:nth-child(3) strong { color: var(--success); font-size: 21px; }

.telegram-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 14px; margin-bottom: 14px; }
.tool-panel, .posts-section, .reply-strip { background: var(--white); border: 1px solid var(--line); }
.tool-panel { min-width: 0; padding: 20px; }
.panel-heading, .posts-heading, .post-meta, .channel-link-output, .reply-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading { margin-bottom: 17px; }
.panel-kicker { margin-bottom: 4px; color: var(--blue); font: 550 9px "IBM Plex Mono", monospace; text-transform: uppercase; }
.panel-heading h2, .posts-heading h2, .reply-strip h2 { margin-bottom: 0; font: 650 22px/1.15 "Onest", sans-serif; }
.panel-icon-button, .copy-row button, .post-meta button, .channel-link-output button { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: var(--blue); background: #eef3ff; border-radius: 4px; transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease); }
.panel-icon-button:hover, .copy-row button:hover, .post-meta button:hover, .channel-link-output button:hover { color: var(--white); background: var(--blue); transform: translateY(-1px); }
.panel-icon-button svg, .copy-row button svg, .post-meta button svg, .channel-link-output button svg { width: 15px; height: 15px; }

.progress-track { height: 5px; margin-bottom: 11px; overflow: hidden; background: #e8edf0; }
.progress-track i { display: block; width: 0; height: 100%; background: var(--success); transition: width 420ms var(--ease); }
.launch-checklist { display: grid; }
.launch-checklist label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.launch-checklist label:last-child { border-bottom: 0; }
.launch-checklist input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--success); }
.launch-checklist span { display: grid; gap: 2px; min-width: 0; }
.launch-checklist strong { font-size: 12px; }
.launch-checklist small { color: var(--muted); font-size: 10px; }
.launch-checklist label:has(input:checked) strong { color: var(--success); text-decoration: line-through; text-decoration-thickness: 1px; }

.free-badge { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; padding: 0 9px; color: var(--success); background: #eaf7f1; border-radius: 4px; font-size: 10px; font-weight: 700; }
.free-badge svg { width: 14px; height: 14px; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.copy-row > div { min-width: 0; }
.copy-row span { display: block; margin-bottom: 5px; color: var(--muted); font: 550 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.copy-row p { margin: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.55; }

.setup-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.setup-details summary { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; color: var(--navy); cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.setup-details summary::-webkit-details-marker { display: none; }
.setup-details summary svg { width: 15px; height: 15px; transition: transform 220ms var(--ease); }
.setup-details[open] summary svg { transform: rotate(180deg); }
.setup-details ol { display: grid; gap: 8px; margin: 8px 0 4px; padding-left: 20px; color: var(--muted); font-size: 11px; }

.channel-panel { margin-bottom: 18px; }
.panel-text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 11px; font-weight: 700; }
.panel-text-link svg { width: 15px; height: 15px; }
.channel-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.username-row { display: grid; grid-template-columns: 130px minmax(220px, 1fr) minmax(260px, 1fr); gap: 12px; align-items: center; margin-top: 12px; padding: 16px; background: var(--paper); border: 1px solid var(--line-soft); }
.username-row > label { color: var(--muted); font-size: 10px; font-weight: 700; }
.username-control { display: flex; height: 40px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.username-control span { padding-left: 11px; color: var(--muted); }
.username-control input { width: 100%; min-width: 0; height: 100%; padding: 0 10px 0 2px; border: 0; outline: 0; background: transparent; font-size: 12px; }
.username-control:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(20 92 255 / 9%); }
.channel-link-output { min-width: 0; }
.channel-link-output > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.channel-link-output button:disabled { color: #a5afb6; cursor: default; background: #e6eaec; transform: none; }
.channel-steps { margin-top: 10px; }

.posts-section { padding: 20px; }
.posts-heading { align-items: end; margin-bottom: 18px; }
.posts-heading > p { max-width: 440px; margin-bottom: 0; color: var(--muted); font-size: 11px; text-align: right; }
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.post-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.post-meta { align-items: start; padding: 15px; background: #f2f5f7; border-bottom: 1px solid var(--line); }
.post-meta > span { color: var(--signal); font: 600 9px "IBM Plex Mono", monospace; }
.post-meta > div { min-width: 0; flex: 1; }
.post-meta small { display: block; margin-bottom: 4px; color: var(--muted); font: 550 8px "IBM Plex Mono", monospace; text-transform: uppercase; }
.post-meta h3 { margin-bottom: 0; font: 650 16px/1.25 "Onest", sans-serif; }
.post-copy { height: 420px; overflow-y: auto; padding: 16px; color: #34414b; font-size: 11px; line-height: 1.65; white-space: pre-line; scrollbar-width: thin; }

.reply-strip { margin-top: 14px; padding: 20px; }
.reply-strip > div { max-width: 760px; }
.reply-strip h2 { margin-bottom: 7px; }
.reply-strip p:last-child { margin-bottom: 0; color: var(--muted); font-size: 11px; }
.reply-strip .secondary-button { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .telegram-grid { grid-template-columns: 1fr; }
  .post-list { grid-template-columns: 1fr 1fr; }
  .post-card:last-child { grid-column: 1 / -1; }
  .post-card:last-child .post-copy { height: auto; max-height: 360px; }
  .username-row { grid-template-columns: 110px 1fr; }
  .channel-link-output { grid-column: 2; }
}

@media (max-width: 680px) {
  .telegram-metrics article:nth-child(3) strong { font-size: 18px; }
  .channel-grid, .post-list { grid-template-columns: 1fr; }
  .post-card:last-child { grid-column: auto; }
  .post-copy, .post-card:last-child .post-copy { height: auto; max-height: 380px; }
  .posts-heading, .reply-strip { align-items: start; flex-direction: column; }
  .posts-heading > p { text-align: left; }
  .username-row { grid-template-columns: 1fr; }
  .channel-link-output { grid-column: auto; }
  .reply-strip .secondary-button { width: 100%; }
}

@media (max-width: 390px) {
  .panel-heading { align-items: start; }
  .panel-heading h2, .posts-heading h2, .reply-strip h2 { font-size: 20px; }
}