.sample-reports-page {
    --report-brand:#087f78;
    --report-brand-dark:#075f5c;
    --report-ink:#06142b;
    --report-muted:#56667d;
    --report-line:#dfe8ec;
    --report-soft:#f4f9f9;
    background:#fff;
    color:var(--report-ink);
}

.sample-report-shell {
    width:min(100% - 48px, 1220px);
    margin-inline:auto;
}

.sample-report-hero {
    padding:56px 0 42px;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbfb 100%);
    border-bottom:1px solid var(--report-line);
}

.sample-report-hero-grid {
    display:grid;
    grid-template-columns:.76fr 1.24fr;
    gap:34px;
    align-items:center;
}

.sample-report-back {
    display:inline-flex;
    margin-bottom:18px;
    color:var(--report-brand);
    text-decoration:none;
    font-weight:800;
}

.sample-report-hero h1,
.sample-report-section h2 {
    margin:0;
    color:var(--report-ink);
    font-weight:850;
    letter-spacing:0;
    line-height:1.08;
}

.sample-report-hero h1 {
    max-width:580px;
    font-size:clamp(38px,4.5vw,58px);
}

.sample-report-hero p,
.sample-report-section-head p,
.sample-report-card-head p,
.sample-report-final p {
    color:var(--report-muted);
    font-size:18px;
    line-height:1.55;
}

.sample-report-hero p {
    max-width:610px;
    margin:20px 0 0;
}

.sample-report-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:26px;
}

.sample-report-browser {
    overflow:hidden;
    border:1px solid var(--report-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 60px rgba(15,23,42,.08);
}

.sample-report-browser-bar {
    display:flex;
    align-items:center;
    gap:7px;
    min-height:42px;
    padding:0 16px;
    border-bottom:1px solid var(--report-line);
    background:#f8fbfb;
}

.sample-report-browser-bar span {
    width:10px;
    height:10px;
    border-radius:99px;
    background:#d9e4e7;
}

.sample-report-browser-bar span:first-child {
    background:#fb9d96;
}

.sample-report-browser-bar span:nth-child(2) {
    background:#f4c95d;
}

.sample-report-browser-bar span:nth-child(3) {
    background:#66d2a2;
}

.sample-report-browser-bar strong {
    margin-left:8px;
    color:#48596e;
    font-size:13px;
}

.sample-report-summary-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:16px;
}

.sample-report-summary-grid article,
.sample-report-feature-grid article,
.sample-report-card {
    border:1px solid var(--report-line);
    border-radius:14px;
    background:#fff;
}

.sample-report-summary-grid article {
    display:grid;
    gap:5px;
    min-height:104px;
    padding:16px;
}

.sample-report-summary-grid span,
.sample-report-summary-grid small {
    color:#5d6e84;
    font-size:12px;
    font-weight:720;
}

.sample-report-summary-grid strong {
    font-size:25px;
    line-height:1;
}

.sample-report-browser-grid {
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:12px;
    padding:0 16px 16px;
}

.sample-report-bars,
.sample-report-donut {
    min-height:210px;
    border:1px solid var(--report-line);
    border-radius:14px;
    background:#fff;
}

.sample-report-bars {
    display:flex;
    align-items:end;
    gap:10%;
    padding:34px 40px 30px;
}

.sample-report-bars i {
    width:9px;
    border-radius:999px;
    background:linear-gradient(#0b8f86,#c5f4ef);
}

.sample-report-donut {
    display:grid;
    place-items:center;
}

.sample-report-donut span {
    position:relative;
    width:122px;
    height:122px;
    border-radius:50%;
    background:conic-gradient(var(--report-brand) 0 56%, #f4b63c 56% 76%, #2563eb 76% 91%, #dfe8ec 91% 100%);
}

.sample-report-donut span::after {
    content:"";
    position:absolute;
    inset:31px;
    border-radius:50%;
    background:#fff;
}

.sample-report-section {
    padding:54px 0;
}

.sample-report-section.is-soft {
    background:var(--report-soft);
    border-block:1px solid var(--report-line);
}

.sample-report-section-head {
    display:grid;
    gap:12px;
    max-width:780px;
    margin-bottom:22px;
}

.sample-report-section h2 {
    font-size:clamp(30px,3.2vw,46px);
}

.sample-report-feature-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.sample-report-feature-grid article {
    display:grid;
    gap:10px;
    min-height:150px;
    padding:22px;
}

.sample-report-feature-grid strong {
    font-size:18px;
}

.sample-report-feature-grid span,
.sample-report-table span,
.sample-stock-table span,
.sample-payment-split span,
.sample-till-list span {
    color:var(--report-muted);
    line-height:1.45;
}

.sample-report-dashboard {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.sample-report-card {
    display:grid;
    gap:18px;
    padding:22px;
    box-shadow:0 16px 36px rgba(15,23,42,.045);
}

.sample-report-card.is-wide {
    grid-column:span 1;
}

.sample-report-card.is-full {
    grid-column:1 / -1;
}

.sample-report-card-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.sample-report-card-head h2 {
    font-size:26px;
}

.sample-report-card-head p {
    margin:8px 0 0;
    font-size:15px;
}

.sample-report-card-head > span {
    flex:0 0 auto;
    border-radius:999px;
    background:#dff8ef;
    color:var(--report-brand);
    padding:8px 12px;
    font-size:12px;
    font-weight:820;
}

.sample-report-table,
.sample-stock-table {
    overflow:hidden;
    border:1px solid var(--report-line);
    border-radius:12px;
}

.sample-report-table-head,
.sample-report-table > div,
.sample-stock-table-head,
.sample-stock-table > div {
    display:grid;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:0 14px;
    border-bottom:1px solid #edf2f4;
}

.sample-report-table-head,
.sample-stock-table-head {
    background:#f8fbfb;
    color:#526179;
    font-size:12px;
    font-weight:820;
    text-transform:uppercase;
}

.sample-report-table > div:last-child,
.sample-stock-table > div:last-child {
    border-bottom:0;
}

.sample-report-table-head,
.sample-report-table > div {
    grid-template-columns:1.4fr .6fr .8fr;
}

.sample-report-table-head.four,
.sample-report-table > div.four {
    grid-template-columns:1fr 1.4fr 1fr .7fr;
}

.sample-stock-table-head,
.sample-stock-table > div {
    grid-template-columns:.8fr 1.5fr 1fr .45fr .55fr .55fr;
}

.sample-report-table strong,
.sample-stock-table strong {
    color:var(--report-ink);
}

.sample-stock-table b {
    justify-self:start;
    border-radius:999px;
    background:#fff4df;
    color:#9a5200;
    padding:5px 10px;
    font-size:12px;
}

.sample-stock-table b.is-out {
    background:#feecec;
    color:#b42318;
}

.sample-payment-split {
    display:grid;
    gap:12px;
}

.sample-payment-split span,
.sample-till-list div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:46px;
    padding:0 14px;
    border:1px solid var(--report-line);
    border-radius:11px;
}

.sample-payment-split b,
.sample-till-list strong {
    color:var(--report-brand);
    font-size:18px;
}

.sample-till-list {
    display:grid;
    gap:10px;
}

.sample-report-final {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:32px;
    border:1px solid #a9e7dd;
    border-radius:18px;
    background:linear-gradient(135deg,#edfffb 0%,#ffffff 100%);
}

.sample-report-final p {
    max-width:760px;
    margin:10px 0 0;
}

@media (max-width: 980px) {
    .sample-report-hero-grid,
    .sample-report-dashboard {
        grid-template-columns:1fr;
    }

    .sample-report-feature-grid,
    .sample-report-summary-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sample-report-final {
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width: 700px) {
    .sample-report-shell {
        width:min(100% - 24px, 1220px);
    }

    .sample-report-hero {
        padding-top:34px;
    }

    .sample-report-browser-grid,
    .sample-report-feature-grid,
    .sample-report-summary-grid {
        grid-template-columns:1fr;
    }

    .sample-report-card-head {
        display:grid;
    }

    .sample-report-table-head,
    .sample-stock-table-head {
        display:none;
    }

    .sample-report-table > div,
    .sample-report-table > div.four,
    .sample-stock-table > div {
        grid-template-columns:1fr;
        align-items:start;
        padding:14px;
    }
}