/* TeleLive — Design System page */
.tl-ds { --tl-page-max: 960px; }
.tl-ds-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
}
.tl-ds-back:hover { color: var(--text); }

.tl-ds-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 22px;
}
.tl-ds-toc a {
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.tl-ds-toc a:hover {
    color: #fff;
    border-color: rgba(82, 128, 255, 0.4);
}

.tl-ds-section {
    margin-bottom: 28px;
    scroll-margin-top: 88px;
}
.tl-ds-section h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 850;
}
.tl-ds-lead, .tl-ds-note {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.tl-ds-note { margin-top: 10px; font-size: 0.8rem; }

.tl-ds-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.tl-ds-swatch {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
}
.tl-ds-swatch__chip {
    display: block;
    height: 48px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.tl-ds-swatch strong {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 2px;
}
.tl-ds-swatch code {
    font-size: 0.7rem;
    color: var(--text-muted);
    direction: ltr;
}

.tl-ds-type-sample {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(22, 22, 26, 0.35);
    padding: 20px;
}
.tl-ds-type-brand {
    margin: 0 0 8px;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.tl-ds-type-brand span { color: var(--brand-soft, #5280ff); }
.tl-ds-type-h1 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 850; }
.tl-ds-type-h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--text-muted); }
.tl-ds-type-body { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.65; color: var(--text-muted); }
.tl-ds-type-meta { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }

.tl-ds-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tl-ds-row .tl-btn-subscribe {
    background: rgba(30, 86, 245, 0.2);
    border: 1px solid rgba(91, 140, 255, 0.5);
    color: #c7d7ff;
}
.tl-ds-row .tl-btn-donate {
    background: rgba(251, 113, 133, 0.12);
    border: 1px solid rgba(251, 113, 133, 0.35);
    color: #fda4af;
}

.tl-ds-glass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.tl-ds-demo-panel { padding: 18px; }
.tl-ds-demo-panel h3 { margin: 0 0 8px; font-size: 0.95rem; }
.tl-ds-demo-panel p, .tl-ds-demo-panel li {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.tl-ds-demo-panel ul { padding-inline-start: 1.1rem; margin: 0; }
.tl-ds-demo-panel li + li { margin-top: 4px; }

.tl-ds-tabs-demo {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tl-ds-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 750;
    color: var(--text-muted);
    cursor: default;
}
.tl-ds-tab.is-active {
    color: #fff;
    border-bottom-color: var(--brand, #1e56f5);
}

.tl-ds-form { padding: 18px; }
.tl-ds-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}
.tl-ds-label + .tl-ds-input { margin-bottom: 12px; }
.tl-ds-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    padding: 10px 12px;
    font-size: 0.88rem;
    resize: vertical;
}
.tl-ds-input:focus {
    outline: none;
    border-color: rgba(82, 128, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(30, 86, 245, 0.15);
}

.tl-ds-media-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}
.tl-ds-media-row .tl-clip-card { max-width: 320px; }
.tl-ds-media-row .category-card-scroll { width: 92px; }

.tl-ds-list {
    margin: 0;
    padding-inline-start: 1.15rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}
.tl-ds-list code {
    color: #93c5fd;
    font-size: 0.82em;
}

.tl-ds-foot {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.tl-ds-foot p { margin: 0; }

@media (max-width: 640px) {
    .tl-ds-media-row {
        grid-template-columns: 1fr;
    }
}