/* ===== RESPONSIVE ===== */

/* ===== TABLET (481px+) ===== */
@media (min-width: 481px) {
    .app { padding: 0 28px; }
}

/* ===== DESKTOP (768px+) ===== */
@media (min-width: 768px) {
    .app {
        max-width: 600px;
        padding: 40px 36px;
        min-height: auto;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
    }
    .screen { padding: 36px 0; }
    .landing__title { font-size: 34px; }
    .landing__desc { max-width: 420px; font-size: 16px; }
    .landing__features { max-width: 440px; }
    .feature-item { padding: 16px 20px; font-size: 15px; }
    .scenario__text { font-size: 18px; }
    .scenario__card { padding: 32px 28px; }
    .response-area__input { min-height: 180px; font-size: 16px; }
    .analysis-card { padding: 24px 26px; }
    .analysis-card__text { font-size: 15px; }
}

/* ===== LARGE DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .app {
        max-width: 680px;
        padding: 48px 44px;
    }
    body { padding: 40px 40px; }
    .landing { gap: 32px; }
    .landing__title { font-size: 38px; }
    .landing__desc { max-width: 480px; font-size: 17px; }
    .landing__features { max-width: 500px; }
    .btn { padding: 18px 36px; font-size: 17px; }
    .btn--telegram { padding: 16px 32px; font-size: 16px; }
    .scores { padding: 28px 26px; }
    .summary-card { padding: 28px 26px; }
    .result-list { padding: 26px; }
}

/* ===== SMALL MOBILE (max-width: 360px) ===== */
@media (max-width: 360px) {
    :root { --radius: 14px; --radius-sm: 10px; }
    .landing__title { font-size: 26px; }
    .scenario__text { font-size: 16px; }
    .scenario__card { padding: 22px 18px; }
    .scenario__sticker { width: 48px; height: 48px; }
    .loading__sticker { width: 44px; height: 44px; }
    .analysis-card__sticker { width: 32px; height: 32px; }
    .results__sticker { width: 64px; height: 64px; }
    .error__sticker { width: 56px; height: 56px; }
}

/* ===== MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    .app { padding: 0 16px; }
    .auth-header {
        top: 10px;
        right: 10px;
    }
    .btn-yandex-auth {
        padding: 6px 12px;
        font-size: 12px;
    }
    .auth-avatar {
        width: 36px;
        height: 36px;
    }
    .landing { gap: 22px; padding-top: 32px; padding-bottom: 32px; }
    .landing__logo { width: 100px; height: 100px; }
    .landing__title { font-size: 28px; }
    .landing__desc { font-size: 14px; max-width: 300px; }
    .landing__features { max-width: 100%; }
    .feature-item { padding: 12px 14px; font-size: 13px; gap: 10px; }
    .feature-item__icon { width: 34px; height: 34px; font-size: 16px; }
    .btn { padding: 14px 24px; font-size: 15px; }
    .btn--telegram { padding: 13px 24px; font-size: 14px; }
    .btn--ghost { padding: 10px 16px; font-size: 13px; }
    .scenario__card { padding: 20px 16px; }
    .scenario__text { font-size: 15px; line-height: 1.65; }
    .response-area__input { min-height: 130px; padding: 14px; font-size: 14px; }
    .analysis-card { padding: 18px 16px; }
    .analysis-card__text { font-size: 13px; }
    .scores { padding: 20px 16px; }
    .result-list { padding: 18px 16px; }
    .result-list__item { padding: 10px 12px; font-size: 13px; }
    .disclaimer { font-size: 10px; padding: 10px 0 20px; }
}