*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f6fa; color: #1e293b; line-height: 1.6; }
a { color: #4f6ef7; text-decoration: none; transition: color 0.15s; }
a:hover { color: #3451d1; text-decoration: none; }

/* ── SVG icons ── */
.ico, .ico--18, .ico--20, .ico--section { display: inline-block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 16px; height: 16px; vertical-align: -2px; }
.ico--18 { width: 18px; height: 18px; vertical-align: -3px; }
.ico--20 { width: 20px; height: 20px; vertical-align: -4px; }
.ico--section { width: 22px; height: 22px; vertical-align: -4px; margin-right: 0.4rem; }

/* ── Header ── */
.header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 56px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); position: sticky; top: 0; z-index: 100; }
.header__logo { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; }
.header__logo svg { opacity: 0.85; }
.header__nav { display: flex; gap: 0.25rem; align-items: center; }
.header__nav a { color: #94a3b8; font-size: 0.85rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: 6px; transition: all 0.15s; }
.header__nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.header__nav .active { color: #60a5fa; background: rgba(96,165,250,0.1); }
.header__user { color: #64748b; font-size: 0.8rem; padding: 0 0.5rem; border-left: 1px solid rgba(255,255,255,0.1); margin-left: 0.25rem; padding-left: 0.75rem; }
.header__nav a.nav-logout { color: #f87171; }
.header__nav a.nav-logout:hover { background: rgba(248,113,113,0.1); }

/* ── Layout ── */
.container { max-width: 1140px; margin: 1.75rem auto; padding: 0 1.5rem; }

/* ── Cards ── */
.card { background: #fff; border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); border: 1px solid #e8eaed; }
.card__title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: #1e293b; display: flex; align-items: center; gap: 0.4rem; }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; }
.stat { background: #fff; border-radius: 10px; padding: 1.25rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid #e8eaed; transition: transform 0.15s, box-shadow 0.15s; }
.stat:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.stat__value { font-size: 1.75rem; font-weight: 700; color: #4f6ef7; }
.stat__label { font-size: 0.8rem; color: #64748b; margin-top: 0.2rem; font-weight: 500; }
.stat--success .stat__value { color: #22c55e; }
.stat--warning .stat__value { color: #f59e0b; }
.stat--danger .stat__value { color: #ef4444; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 7px; border: none; cursor: pointer; font-size: 0.85rem; font-weight: 500; font-family: inherit; transition: all 0.15s; line-height: 1; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: #4f6ef7; color: #fff; box-shadow: 0 1px 3px rgba(79,110,247,0.3); }
.btn--primary:hover { background: #3d5bd9; color: #fff; box-shadow: 0 3px 8px rgba(79,110,247,0.35); }
.btn--success { background: #22c55e; color: #fff; }
.btn--success:hover { background: #16a34a; color: #fff; }
.btn--danger { background: #ef4444; color: #fff; box-shadow: 0 1px 3px rgba(239,68,68,0.25); }
.btn--danger:hover { background: #dc2626; color: #fff; }
.btn--warning { background: #f59e0b; color: #fff; }
.btn--warning:hover { background: #d97706; color: #fff; }
.btn--outline { background: #fff; border: 1px solid #d1d5db; color: #374151; }
.btn--outline:hover { background: #f8fafc; border-color: #9ca3af; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: #64748b; padding: 0.4rem 0.6rem; }
.btn--ghost:hover { color: #1e293b; background: #f1f5f9; }
.btn--sm { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
.btn--xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* ── Forms ── */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 500; color: #374151; margin-bottom: 0.4rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid #d1d5db; border-radius: 7px; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; background: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,0.12); }
.form-group .hint { font-size: 0.78rem; color: #94a3b8; margin-top: 0.3rem; }

/* ── Alerts ── */
.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid #f1f5f9; }
th { background: #f8fafc; font-weight: 600; font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
td { font-size: 0.875rem; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: #fafbfc; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 5px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.badge--active { background: #dcfce7; color: #15803d; }
.badge--inactive { background: #f1f5f9; color: #64748b; }
.badge--synced { background: #dbeafe; color: #1d4ed8; }
.badge--failed { background: #fef2f2; color: #b91c1c; }
.badge--pending { background: #fef9c3; color: #a16207; }
.badge--info { background: #dbeafe; color: #1d4ed8; }

.actions { display: flex; gap: 0.35rem; align-items: center; }

/* ── Page headings ── */
.page-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.page-head__back { color: #94a3b8; font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; }
.page-head__back:hover { color: #64748b; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }

/* ── Misc ── */
.text-muted { color: #94a3b8; }
.text-sm { font-size: 0.8rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #94a3b8; }
.empty-state p { margin-bottom: 1rem; }

/* ── Burger button (hidden on desktop) ── */
.header__burger { display: none; background: none; border: none; color: #94a3b8; cursor: pointer; padding: 0.4rem; border-radius: 6px; transition: all 0.15s; line-height: 0; }
.header__burger:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ── Table responsive wrapper ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; padding: 0 0.25rem; }

/* ═══════════════════════════════════════
   Responsive breakpoints
   ═══════════════════════════════════════ */

/* ── 1600px — large desktop ── */
@media (max-width: 1600px) {
    .container { max-width: 1080px; }
}

/* ── 1280px — desktop ── */
@media (max-width: 1280px) {
    .container { max-width: 960px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ── 1024px — tablet landscape ── */
@media (max-width: 1024px) {
    .container { max-width: 100%; padding: 0 1.25rem; }
    .header { padding: 0 1.25rem; }
    .header__nav a { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
    .header__user { font-size: 0.75rem; padding-left: 0.5rem; margin-left: 0.15rem; }
    .stats { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .stat { padding: 1rem; }
    .stat__value { font-size: 1.5rem; }
    th, td { padding: 0.55rem 0.65rem; font-size: 0.82rem; }
    th { font-size: 0.7rem; }
}

/* ── 768px — tablet portrait / burger activates ── */
@media (max-width: 768px) {
    .header { padding: 0 1rem; flex-wrap: wrap; height: auto; min-height: 56px; }
    .header__burger { display: block; order: 2; margin-left: auto; }
    .header__logo { order: 1; }

    .header__nav {
        order: 3;
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        gap: 0;
    }
    .header.nav-open .header__nav { display: flex; }

    .header__nav a { padding: 0.6rem 0; border-radius: 0; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .header__nav a:last-child { border-bottom: none; }
    .header__user { border-left: none; padding-left: 0; margin-left: 0; padding: 0.5rem 0; font-size: 0.82rem; order: -1; color: #94a3b8; }
    .header__nav a.nav-logout { border-bottom: none; margin-top: 0.25rem; }

    .container { margin: 1.25rem auto; padding: 0 1rem; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1.25rem; }
    .stat { padding: 0.85rem; }
    .stat__value { font-size: 1.4rem; }
    .stat__label { font-size: 0.75rem; }
    .card { padding: 1.15rem; margin-bottom: 1rem; border-radius: 8px; overflow-x: auto; }
    .card__title { font-size: 0.92rem; margin-bottom: 0.75rem; }

    .page-head { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.15rem; }
    .page-head h1 { font-size: 1.15rem; }

    .btn { padding: 0.5rem 0.9rem; font-size: 0.82rem; }
    .btn--sm { padding: 0.3rem 0.55rem; font-size: 0.78rem; }

    .form-group label { font-size: 0.82rem; }
    .form-group input, .form-group select, .form-group textarea { font-size: 0.85rem; padding: 0.5rem 0.65rem; }

    th, td { padding: 0.5rem 0.6rem; }
    th { font-size: 0.68rem; }
    td { font-size: 0.82rem; }

    .actions { flex-wrap: wrap; }
}

/* ── 430px — large phone ── */
@media (max-width: 430px) {
    .container { padding: 0 0.75rem; margin: 1rem auto; }
    .header { padding: 0 0.75rem; }

    .stats { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .stat { padding: 0.75rem 0.5rem; }
    .stat__value { font-size: 1.2rem; }
    .stat__label { font-size: 0.72rem; }

    .card { padding: 1rem; border-radius: 7px; }
    .card__title { font-size: 0.88rem; }

    .page-head h1 { font-size: 1.05rem; }

    .btn { padding: 0.45rem 0.75rem; font-size: 0.8rem; gap: 0.3rem; }
    .btn--sm { padding: 0.28rem 0.5rem; font-size: 0.75rem; }
    .btn--xs { padding: 0.2rem 0.4rem; font-size: 0.7rem; }

    .form-group { margin-bottom: 1rem; }
    .form-group input, .form-group select, .form-group textarea { padding: 0.5rem 0.6rem; font-size: 0.85rem; }

    .alert { padding: 0.6rem 0.75rem; font-size: 0.82rem; }

    th, td { padding: 0.4rem 0.5rem; font-size: 0.78rem; }
    th { font-size: 0.65rem; letter-spacing: 0.02em; }

    .badge { font-size: 0.65rem; padding: 0.12rem 0.4rem; }
    .actions { gap: 0.25rem; }
}

/* ── 360px — small phone ── */
@media (max-width: 360px) {
    .container { padding: 0 0.5rem; }
    .header { padding: 0 0.5rem; min-height: 48px; }
    .header__logo { font-size: 0.92rem; gap: 0.35rem; }
    .header__nav a { font-size: 0.85rem; padding: 0.5rem 0; }

    .stats { grid-template-columns: 1fr; gap: 0.35rem; }
    .stat { padding: 0.65rem; text-align: left; display: flex; align-items: center; justify-content: space-between; }
    .stat__value { font-size: 1.1rem; order: 2; }
    .stat__label { font-size: 0.75rem; order: 1; margin-top: 0; }

    .card { padding: 0.85rem; }
    .page-head h1 { font-size: 1rem; }

    .btn { font-size: 0.78rem; padding: 0.4rem 0.65rem; }

    .form-group input, .form-group select, .form-group textarea { font-size: 0.82rem; }

    th, td { padding: 0.35rem 0.4rem; font-size: 0.75rem; }
}

/* ── Animations ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── FAQ page ── */
.faq-section { margin-bottom: 0; }
.faq-section h2 { display:flex; align-items:center; gap:0.5rem; font-size:1.15rem; font-weight:600; margin-bottom:1.25rem; }
.faq-section h3 { font-weight:600; margin-bottom:0.4rem; font-size:0.95rem; }
.faq-block { margin-bottom:1.25rem; }
.faq-block p, .faq-block li { color:#4b5563; line-height:1.7; }
.faq-block ol, .faq-block ul { padding-left:1.25rem; }
.faq-block li { margin-bottom:0.35rem; }
.faq-callout { display:flex; gap:0.75rem; align-items:flex-start; border-radius:8px; padding:1rem 1.25rem; font-size:0.9rem; line-height:1.6; }
.faq-callout--warn { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.faq-callout--tip { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.faq-callout svg { flex-shrink:0; margin-top:2px; }
.faq-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.5rem; background:#f8fafc; border-radius:8px; padding:1.5rem; font-size:0.9rem; line-height:2; color:#374151; }
.faq-flow span { padding:0.4rem 0.8rem; border-radius:6px; }
.faq-flow .flow-tg { background:#dbeafe; font-weight:600; }
.faq-flow .flow-sync { background:#fef9c3; }
.faq-flow .flow-queue { background:#fce7f3; }
.faq-flow .flow-max { background:#dcfce7; font-weight:600; }
.faq-flow .flow-arrow { background:none; padding:0; color:#94a3b8; }
.section-about h2 { color:#7c3aed; }
.section-start h2 { color:#2563eb; }
.section-tg h2 { color:#2563eb; }
.section-max h2 { color:#16a34a; }
.section-channels h2 { color:#0891b2; }
.section-sync h2 { color:#16a34a; }
.section-posts h2 { color:#ea580c; }
.section-dash h2 { color:#7c3aed; }
.section-tips h2 { color:#ca8a04; }
.faq-steps { counter-reset:faq-step; list-style:none; padding-left:0; }
.faq-steps li { counter-increment:faq-step; position:relative; padding-left:2.2rem; margin-bottom:0.6rem; }
.faq-steps li::before { content:counter(faq-step); position:absolute; left:0; top:0.1rem; width:1.5rem; height:1.5rem; background:#4f6ef7; color:#fff; border-radius:50%; font-size:0.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.faq-kbd { display:inline-block; background:#f1f5f9; border:1px solid #cbd5e1; border-radius:4px; padding:0.1rem 0.45rem; font-size:0.8rem; color:#475569; font-family:inherit; }

/* ── FAQ responsive ── */
@media (max-width: 430px) {
    .faq-callout { flex-direction: column; padding: 0.75rem 1rem; }
    .faq-flow { padding: 1rem; gap: 0.35rem; font-size: 0.82rem; }
    .faq-flow span { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    .faq-section h2 { font-size: 1rem; }
}