:root {
    --lp-ink: #17233b;
    --lp-brand: #234e82;
    --lp-brand-strong: #173a66;
    --lp-accent: #0f8a74;
    --lp-surface: #ffffff;
    --lp-canvas: #f4f7fb;
    --lp-line: #dce5ef;
    --lp-muted: #667085;
    --lp-radius: 16px;
    --lp-radius-sm: 11px;
    --lp-shadow: 0 8px 28px rgba(23, 35, 59, 0.07);
}

html {
    min-width: 0;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background-color: var(--lp-canvas);
}

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

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

input,
select,
textarea {
    min-height: 42px;
    border-radius: 10px !important;
}

textarea {
    min-height: 96px;
}

body > .page,
body > main,
.lp-shell ~ .page,
.lp-shell ~ main {
    width: min(100%, 1320px);
    padding: 18px 18px 32px !important;
}

:is(.page, main) > :is(.topbar, .page-header, .header-row):first-child {
    margin-bottom: 14px !important;
}

:is(.page, main) h1 {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

:is(.page, main) h2 {
    letter-spacing: -0.025em;
}

:is(.page, main) :is(.hero, .card, .panel, .summary-card, .category-card, .family-card, .child-card, .payment-card, .filter-card, .empty, .section-card, .info-card) {
    border-radius: var(--lp-radius) !important;
    box-shadow: var(--lp-shadow) !important;
}

:is(.page, main) :is(.hero, .summary-card, .category-card, .family-card, .child-card, .payment-card, .filter-card, .empty, .section-card, .info-card) {
    padding: 16px !important;
}

:is(.page, main) :is(.grid, .summary-grid, .category-grid, .cards-grid, .stats-grid, .actions-grid, .form-grid, .detail-grid) {
    gap: 12px !important;
}

:is(.page, main) :is(.topbar, .toolbar, .actions, .hero-actions, .button-row, .filter-actions, .page-actions) {
    gap: 8px !important;
}

:is(.page, main) :is(a, button, input[type="submit"], input[type="button"]).btn,
:is(.page, main) :is(.top-action, .menu-note, .btn-link, .action-link, .primary-btn, .secondary-btn) {
    min-height: 40px;
    padding: 9px 13px !important;
    border-radius: var(--lp-radius-sm) !important;
}

.table-wrap,
.table-container,
.calendar-wrap {
    width: 100%;
    max-width: 100%;
}

table {
    max-width: 100%;
}

th,
td {
    padding: 10px 12px !important;
    line-height: 1.35;
}

.lp-responsive-note {
    display: none;
    margin: 0 0 8px;
    color: var(--lp-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

@media (max-width: 980px) {
    :is(.page, main) :is(.grid, .summary-grid, .category-grid, .cards-grid, .stats-grid, .actions-grid, .detail-grid) {
        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
    }

    :is(.page, main) :is(.topbar, .toolbar, .header-row, .page-header) {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 760px) {
    html {
        font-size: 14px;
    }

    body > .page,
    body > main,
    .lp-shell ~ .page,
    .lp-shell ~ main {
        width: 100%;
        padding: 12px 12px 24px !important;
    }

    :is(.page, main) h1 {
        font-size: 1.72rem !important;
    }

    :is(.page, main) h2 {
        font-size: 1.35rem !important;
    }

    :is(.page, main) :is(.hero, .summary-card, .category-card, .family-card, .child-card, .payment-card, .filter-card, .empty, .section-card, .info-card) {
        padding: 13px !important;
        border-radius: 14px !important;
    }

    :is(.page, main) :is(.grid, .summary-grid, .category-grid, .cards-grid, .stats-grid, .actions-grid, .form-grid, .detail-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    :is(.page, main) :is(.topbar, .toolbar, .header-row, .page-header, .hero-actions, .button-row, .filter-actions, .page-actions, .actions) {
        width: 100%;
    }

    :is(.page, main) :is(.hero-actions, .button-row, .filter-actions, .page-actions) > :is(a, button, input[type="submit"], input[type="button"]) {
        flex: 1 1 155px;
        justify-content: center;
        text-align: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    form :is(.form-row, .form-grid, .field-grid, .two-column, .two-col, .three-col) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
    }

    .lp-enhanced table.lp-data-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .lp-enhanced table.lp-data-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lp-enhanced table.lp-data-table > tbody {
        display: grid;
        gap: 10px;
        width: 100%;
    }

    .lp-enhanced table.lp-data-table > tbody > tr {
        display: grid;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--lp-line);
        border-radius: 13px;
        box-shadow: 0 4px 16px rgba(23, 35, 59, 0.05);
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: 9px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f6 !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td::before {
        content: attr(data-label);
        color: var(--lp-muted);
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.025em;
        text-transform: uppercase;
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td[data-label=""]::before {
        display: none;
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td :is(a, button, input[type="submit"]) {
        max-width: 100%;
        white-space: normal;
    }

    .lp-enhanced .table-wrap:has(table.lp-data-table),
    .lp-enhanced .table-container:has(table.lp-data-table) {
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .lp-responsive-note {
        display: block;
    }
}

@media (max-width: 420px) {
    :is(.page, main) :is(.hero-actions, .button-row, .filter-actions, .page-actions) > :is(a, button, input[type="submit"], input[type="button"]) {
        flex-basis: 100%;
        width: 100%;
    }

    .lp-enhanced table.lp-data-table > tbody > tr > td {
        grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
        gap: 8px;
    }
}

@media print {
    .lp-shell,
    .lp-overlay,
    .lp-drawer,
    .no-print {
        display: none !important;
    }

    body,
    .page,
    main {
        background: #fff !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
}