/* Media downloader bot page — site-shell tokens, Telegram-blue accent. */
.td-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.td-hero p { margin-inline: auto; }
.td-hero__icon { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, #0284c7, #0ea5e9); box-shadow: 0 0 32px rgba(14,165,233,.35); margin-bottom: 8px; }
.td-live { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); }
html:not(.light-mode) .td-live { color: #34d399; }
.td-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.td-permission { margin-top: 16px; max-width: 680px; display: grid; gap: 4px; text-align: center; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.1); }
.td-permission span { font-size: .9rem; color: var(--glass-text-muted); }
.td-hero__ctas { justify-content: center; margin-top: 16px; }
.td-btn-tg { background: linear-gradient(135deg, #0369a1, #0284c7); color: #fff; box-shadow: 0 8px 24px rgba(2,132,199,.3); }
.td-btn-tg:hover { background: linear-gradient(135deg, #075985, #0369a1); }

.td-section { margin-top: 22px; }
.td-section h2 { font-size: 1.3rem; margin: 10px 0 12px; }
.td-chip { color: #0369a1; border-color: rgba(14,165,233,.35); background: rgba(14,165,233,.1); }
html:not(.light-mode) .td-chip { color: #7dd3fc; }
.td-text { color: var(--glass-text-muted); margin: 0 0 10px; }
.td-text strong, .td-box strong { color: var(--glass-text-main); }
.td-box { padding: 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); }
.td-box h3 { margin: 0 0 8px; font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.td-box p { margin: 0; color: var(--glass-text-muted); font-size: .93rem; }
.td-box ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; color: var(--glass-text-muted); font-size: .92rem; }
.td-cta { margin-top: 26px; text-align: center; border-color: rgba(14,165,233,.35); }
.td-cta h2 { margin: 0 0 6px; font-size: 1.3rem; }
.td-cta p { color: var(--glass-text-muted); margin: 0 auto 16px; max-width: 60ch; }
.td-cta .btn, .td-hero .btn { max-width: 100%; flex-wrap: wrap; white-space: normal; text-align: center; }
.td-cta .btn span[dir="ltr"] { overflow-wrap: anywhere; }