html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.pi-content-card,
.pi-card,
.plan-card,
.history-card,
.profit-card,
.profit-result-card,
.ko-panel,
.pi-input-panel,
.pi-help-panel,
.pi-upload-panel,
.pi-selected-card,
.pi-filter-card,
.pi-submission-card {
    min-width: 0;
}

.pi-content-card {
    overflow-x: auto;
}

table {
    max-width: 100%;
}

@media (max-width: 900px) {
    .pi-container {
        width: min(100% - 24px, 1180px);
    }

    .pi-main {
        padding: 18px 0 36px;
    }

    .pi-content-card {
        padding: 18px;
        border-radius: 12px;
    }

    body.pi-public .pi-content-card:has(.home-page) {
        padding: 0;
        overflow: visible;
    }

    .pi-topbar-inner {
        gap: 12px;
    }

    .pi-page,
    .pi-report-page,
    .pi-detail-page,
    .pi-upload-shell,
    .profit-shell,
    .ko-shell,
    .history-page,
    .subscription-shell,
    .profile-container,
    .delete-account-page {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .pi-hero,
    .pi-report-header,
    .pi-detail-topbar,
    .pi-upload-hero,
    .profit-hero,
    .ko-hero,
    .subscription-header,
    .current-plan-card {
        gap: 16px;
    }
}

@media (max-width: 760px) {
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    .pi-topbar-inner {
        min-height: 64px;
        padding: 10px 0;
    }

    .pi-brand {
        min-width: 0;
    }

    .pi-brand-mark {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .pi-brand-text {
        min-width: 0;
    }

    .pi-brand-text strong {
        display: block;
        max-width: 44vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pi-authenticated .pi-account-nav {
        align-items: stretch;
    }

    .pi-authenticated .pi-account-nav .pi-account-link,
    .pi-authenticated .pi-account-nav .pi-btn,
    .pi-authenticated .pi-logout-form,
    .pi-authenticated .pi-logout-form button {
        width: 100%;
    }

    body.pi-public .pi-account-nav {
        height: 38px;
        gap: 6px;
    }

    body.pi-public .pi-account-nav .pi-login-link,
    body.pi-public .pi-account-nav .pi-get-started-link {
        height: 38px;
        min-height: 38px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }

    .pi-content-card {
        padding: 14px;
    }

    .pi-hero,
    .pi-report-header,
    .pi-detail-topbar,
    .pi-upload-hero,
    .profit-hero,
    .ko-hero,
    .subscription-header,
    .current-plan-card,
    .pi-danger-zone,
    .pi-card-top,
    .plan-top {
        flex-direction: column;
        align-items: stretch;
    }

    .pi-header-actions,
    .pi-detail-actions,
    .pi-filter-actions,
    .pi-submit-bar,
    .pi-selected-toolbar,
    .pi-duplicate-actions,
    .subscription-actions,
    .ko-form-footer,
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pi-header-actions .pi-btn,
    .pi-detail-actions .pi-btn,
    .pi-filter-actions .pi-primary-btn,
    .pi-filter-actions .pi-secondary-btn,
    .pi-primary-btn,
    .pi-secondary-btn,
    .pi-clear-link,
    .pi-submit-btn,
    .pi-btn,
    .btn-primary,
    .btn-secondary,
    .plan-button,
    .update-plan-btn,
    .profit-button,
    .pi-btn-delete-all {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .pi-filter-group,
    .pi-more-filter-grid,
    .pi-stats-grid,
    .pi-main-grid,
    .pi-insight-row,
    .pi-breakdown-grid,
    .pi-score-grid,
    .pi-metric-row,
    .pi-verdict-row,
    .pi-layout,
    .pi-detail-layout,
    .pi-upload-form,
    .pi-submit-form,
    .profit-layout,
    .profit-grid,
    .profit-result-grid,
    .ko-grid,
    .ko-metrics-grid,
    .profile-grid,
    .plan-grid,
    .pricing-grid,
    .feature-grid {
        grid-template-columns: 1fr !important;
    }

    .pi-submission-card {
        grid-template-columns: 1fr !important;
    }

    .pi-thumbnail {
        width: 100%;
        height: auto;
        min-height: 180px;
        aspect-ratio: 16 / 10;
    }

    .pi-thumbnail img,
    .pi-product-image,
    .pi-product-media img {
        width: 100%;
        height: auto;
        max-height: 320px;
        object-fit: contain;
    }

    .pi-price-card,
    .pi-score-orb,
    .pi-opportunity-score {
        width: 100%;
        max-width: 100%;
    }

    .pi-meta,
    .pi-meta-row,
    .pi-title-row,
    .profit-summary-header {
        flex-wrap: wrap;
    }

    .pi-card-content,
    .pi-card-content *,
    .pi-report-page,
    .pi-detail-page,
    .pi-page {
        overflow-wrap: anywhere;
    }

    .report-actions,
    .pi-detail-right,
    .plan-price {
        align-items: stretch;
        text-align: left;
    }

    .history-table,
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .home-hero {
        min-height: auto;
        padding: 48px 18px 72px;
        gap: 28px;
    }

    .hero-copy h1 {
        font-size: clamp(2.15rem, 10vw, 3rem);
        line-height: 1.05;
    }

    .hero-copy p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-image {
        min-width: 0;
        width: 100%;
    }

    .trust-band {
        margin: -28px 18px 0;
        grid-template-columns: 1fr;
    }

    .feature-section,
    .workflow-section,
    .pricing-section {
        padding: 46px 18px;
    }

    .section-heading,
    .section-heading-left,
    .workflow-copy {
        max-width: 100%;
    }

    .section-heading h2,
    .workflow-copy h2 {
        font-size: clamp(1.75rem, 8vw, 2.15rem);
    }

    .plan-header {
        min-height: auto;
        padding-right: 0;
    }
}

@media (max-width: 520px) {
    .pi-container {
        width: min(100% - 16px, 1180px);
    }

    .pi-main {
        padding: 10px 0 28px;
    }

    .pi-content-card {
        padding: 12px;
        border-radius: 10px;
    }

    .pi-brand-text small {
        display: none;
    }

    .pi-brand-text strong {
        max-width: 38vw;
        font-size: .9rem;
    }

    body.pi-public .pi-account-nav .pi-login-link {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.pi-public .pi-account-nav .pi-get-started-link {
        padding-left: 11px;
        padding-right: 11px;
    }

    .pi-card,
    .plan-card,
    .profit-card,
    .profit-result-card,
    .ko-panel,
    .pi-input-panel,
    .pi-help-panel,
    .pi-upload-panel,
    .pi-filter-card,
    .pi-stat-card,
    .pi-submission-card,
    .current-plan-card,
    .subscription-shell {
        padding: 16px;
        border-radius: 10px;
    }

    .pi-hero h1,
    .pi-report-header h1,
    .pi-detail-hero h2,
    .profit-hero h1,
    .ko-hero h1 {
        font-size: clamp(1.8rem, 9vw, 2.35rem);
        line-height: 1.08;
    }

    .pi-empty-state {
        padding: 28px 14px;
    }

    .home-hero {
        padding: 40px 14px 62px;
    }

    .trust-band {
        margin-left: 14px;
        margin-right: 14px;
    }

    .feature-section,
    .workflow-section,
    .pricing-section {
        padding: 38px 14px;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
    }

    .image-modal {
        padding: 42px 12px 16px;
    }

    .image-modal-close {
        top: 10px;
        right: 10px;
    }
}