* { box-sizing: border-box; } body { margin: 0; color: #172033; background: #eef2f7; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .report-page { width: min(1180px, calc(100% - 32px)); margin: 24px auto; background: #fff; padding: 28px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); } .report-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 2px solid #1f2937; padding-bottom: 18px; margin-bottom: 18px; } .eyebrow { margin: 0 0 6px; color: #4f46e5; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } h1 { margin: 0 0 8px; font-size: 26px; } .print-btn { border: 0; border-radius: 8px; background: #4f46e5; color: white; cursor: pointer; font-weight: 700; padding: 10px 14px; } .summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .summary-grid div { border: 1px solid #d8dee9; border-left: 4px solid #4f46e5; padding: 12px; } .summary-grid span { display: block; color: #667085; margin-bottom: 6px; } .summary-grid strong { font-size: 22px; } .report-note { background: #f8fafc; border: 1px solid #d8dee9; padding: 10px 12px; margin-bottom: 16px; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #d8dee9; padding: 8px; vertical-align: top; } th { background: #f1f5f9; text-align: left; } small { color: #667085; } .empty { text-align: center; color: #667085; padding: 24px; } @media print { body { background: white; } .report-page { width: 100%; margin: 0; padding: 0; box-shadow: none; } .print-btn { display: none; } table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } }