:root { color-scheme: light; --ink:#17202a; --muted:#64748b; --line:#dbe3ea; --green:#16844b; --green-dark:#0c5b32; --soft:#f4f7f9; --danger:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#f7f9fb; line-height:1.45; }
a { color:var(--green-dark); }
.container { width:min(1440px, calc(100% - 2rem)); margin-inline:auto; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font-weight:800; color:var(--ink); text-decoration:none; }
.nav { display:flex; gap:1rem; align-items:center; }
.nav form { margin:0; }
.link-button { padding:0; border:0; background:transparent; color:var(--green-dark); font:inherit; cursor:pointer; }
.main-content { padding-block:2rem 4rem; }
.page-heading { display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start; margin-bottom:1.25rem; }
h1,h2 { line-height:1.15; }
h1 { margin:.1rem 0 .5rem; font-size:clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size:1.15rem; }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.12em; color:var(--green); font-size:.76rem; font-weight:800; }
.muted { color:var(--muted); }
.panel,.auth-card,.stat-card,.empty-state { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,.04); }
.panel { padding:1.25rem; margin-bottom:1.25rem; }
.auth-card { width:min(440px,100%); margin:4rem auto; padding:2rem; }
.empty-state { padding:3rem; text-align:center; }
.stack { display:grid; gap:1rem; }
label { display:grid; gap:.35rem; font-weight:650; }
input,select,textarea { width:100%; border:1px solid #aebbc7; border-radius:8px; padding:.7rem .8rem; font:inherit; background:#fff; }
textarea { min-height:5rem; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:3px solid rgba(22,132,75,.18); border-color:var(--green); }
.button { display:inline-flex; justify-content:center; align-items:center; border:1px solid var(--green); border-radius:8px; padding:.65rem .9rem; color:var(--green-dark); background:#fff; text-decoration:none; font-weight:750; cursor:pointer; }
.button-primary { color:#fff; background:var(--green); }
.alert { border-radius:8px; padding:.75rem 1rem; margin:1rem 0; }
.alert-danger { background:#fff0ef; color:var(--danger); border:1px solid #f6b7b2; }
.alert-success { background:#eaf7ef; color:#0c5b32; border:1px solid #9bd2b3; }
.alert-warning { background:#fff8e7; color:#854d0e; border:1px solid #f3cf78; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { padding:.7rem .65rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
thead th { background:#eaf7ef; color:#123b26; }
tfoot th { border-top:2px solid var(--green-dark); border-bottom:0; }
.number { text-align:right; white-space:nowrap; }
.badge { display:inline-block; padding:.15rem .4rem; border-radius:999px; background:#e9eef3; color:#435161; font-size:.72rem; }
.badge-critical { background:#fff0ef; color:var(--danger); }
.badge-warning,.badge-override { background:#fff3d4; color:#854d0e; }
.badge-info { background:#e8f1fb; color:#24527a; }
.badge-success { background:#eaf7ef; color:#0c5b32; }
.finding-list { padding-left:1.2rem; }
.finding { margin:.45rem 0; }
.finding-critical { color:var(--danger); }
.stat-grid,.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.stat-card { padding:1.25rem; display:grid; gap:.4rem; }
.stat-card span { color:var(--muted); }
.stat-card strong { font-size:1.8rem; }
.stat-card small,.field-status,.cache-card small { color:var(--muted); font-weight:400; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.section-heading h2 { margin:.2rem 0; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.field-wide,.form-actions { grid-column:1/-1; }
.form-actions { display:flex; justify-content:flex-end; }
.checkbox-label { display:flex; flex-direction:row; align-items:center; align-self:end; gap:.65rem; padding:.65rem 0; }
.checkbox-label input { width:auto; }
.rate-comparison,.cache-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1rem 0 1.25rem; }
.cache-card { display:grid; gap:.35rem; border:1px solid var(--line); border-radius:10px; padding:1rem; background:var(--soft); }
.cache-fresh { border-color:#9bd2b3; background:#f2fbf6; }
.cache-stale,.cache-error { border-color:#f0b69b; background:#fff8f2; }
.warning { color:#9a3412 !important; }
.override-editor { min-width:18rem; margin-top:.6rem; }
.override-editor summary { color:var(--green-dark); cursor:pointer; font-weight:700; }
.compact-form { margin-top:1rem; }
.inline-form { margin-top:.75rem; }
.button-danger { border-color:#d92d20; color:var(--danger); }
.mapping-table { margin-top:1.25rem; }
.statement-decision-form { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:.7rem; align-items:end; min-width:34rem; }
.statement-decision-form label { min-width:18rem; }
code { font-size:.82em; overflow-wrap:anywhere; }
.refresh-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.refresh-actions form { margin:0; }
.admin-heading { align-items:center; }
.admin-heading .refresh-actions { max-width:680px; justify-content:flex-end; margin-top:0; }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:.85rem; margin-bottom:1.25rem; }
.metric-card { position:relative; display:grid; align-content:start; gap:.35rem; min-height:132px; padding:1rem 1.05rem; background:#fff; border:1px solid var(--line); border-left:5px solid #8393a3; border-radius:11px; box-shadow:0 7px 20px rgba(15,23,42,.04); }
.metric-card span { color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.metric-card strong { font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.15; font-variant-numeric:tabular-nums; }
.metric-card small { color:var(--muted); }
.metric-card.tone-green { border-left-color:var(--green); background:linear-gradient(110deg,#f5fbf7,#fff 55%); }
.metric-card.tone-amber { border-left-color:#d28a0b; background:linear-gradient(110deg,#fff9ec,#fff 55%); }
.metric-card.tone-red { border-left-color:var(--danger); background:linear-gradient(110deg,#fff3f2,#fff 55%); }
.compact-cache-grid { grid-template-columns:repeat(4,minmax(170px,1fr)); margin-bottom:.9rem; }
.status-strip { display:flex; flex-wrap:wrap; gap:.55rem; padding-top:.85rem; border-top:1px solid var(--line); }
.status-strip span { padding:.42rem .7rem; color:var(--muted); background:var(--soft); border-radius:999px; font-size:.82rem; }
.status-strip strong { color:var(--ink); }
.detail-panel { padding-inline:0; }
.detail-panel > .section-heading,.detail-panel > .admin-table-tools { margin-inline:1.25rem; }
.admin-table-tools { display:grid; grid-template-columns:minmax(260px,1fr) minmax(180px,280px) auto; gap:.8rem; align-items:end; margin-bottom:1rem; }
.admin-ledger-wrap { max-height:68vh; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.admin-ledger { width:max-content; min-width:100%; font-size:.78rem; font-variant-numeric:tabular-nums; }
.admin-ledger th,.admin-ledger td { min-width:110px; max-width:240px; padding:.55rem .6rem; background:#fff; overflow-wrap:anywhere; }
.admin-ledger tbody td:nth-child(1),.admin-ledger thead tr:nth-child(2) th:nth-child(1) { position:sticky; left:0; min-width:180px; max-width:220px; z-index:2; box-shadow:1px 0 #dbe3ea; }
.admin-ledger tbody td:nth-child(2),.admin-ledger thead tr:nth-child(2) th:nth-child(2) { position:sticky; left:180px; min-width:125px; max-width:140px; z-index:2; box-shadow:1px 0 #dbe3ea; }
.admin-ledger thead th { position:sticky; top:0; z-index:3; background:#eaf7ef; white-space:nowrap; }
.admin-ledger thead .column-groups th { top:0; color:#fff; background:#123b26; text-align:center; letter-spacing:.04em; text-transform:uppercase; }
.admin-ledger thead tr:nth-child(2) th { top:32px; }
.admin-ledger thead tr:nth-child(2) th:nth-child(1),.admin-ledger thead tr:nth-child(2) th:nth-child(2) { z-index:5; background:#dff2e7; }
.admin-ledger tbody tr:nth-child(even) td { background:#fafcfd; }
.admin-ledger tbody tr:hover td { background:#f1f8f4; }
.sort-button { display:flex; align-items:center; justify-content:space-between; gap:.45rem; width:100%; padding:0; color:inherit; background:transparent; border:0; font:inherit; font-weight:800; cursor:pointer; }
.sort-button[aria-sort="ascending"] span,.sort-button[aria-sort="descending"] span { color:var(--green-dark); }
.warning-code { display:block; margin:.12rem 0; color:#9a3412; white-space:normal; }
.column-guide { margin:1.25rem; padding:1.1rem; background:var(--soft); border:1px solid var(--line); border-radius:12px; }
.column-guide-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; }
.column-guide-heading h3 { margin:.15rem 0 0; }
.column-guide-heading > p { max-width:40rem; margin:.15rem 0 0; font-size:.86rem; }
.column-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.column-guide-group { padding:1rem; background:#fff; border:1px solid var(--line); border-radius:10px; }
.column-guide-group-wide { grid-column:1 / -1; }
.column-guide-group h4 { margin:0 0 .45rem; color:var(--green-dark); font-size:1rem; }
.column-guide-group dl { margin:0; }
.column-guide-group dl > div { display:grid; grid-template-columns:minmax(135px,.42fr) 1fr; gap:.75rem; padding:.58rem 0; border-top:1px solid var(--line); }
.column-guide-group dl > div:first-child { border-top:0; }
.column-guide-group dt { font-weight:800; }
.column-guide-group dd { margin:0; color:var(--muted); line-height:1.45; }
.column-guide-note { margin:.7rem 0 0; padding:.75rem; color:#7c2d12; background:#fff7ed; border-left:3px solid #d97706; border-radius:6px; }
.admin-footnote { color:var(--muted); }
.admin-footnote strong { color:var(--ink); }
.preview-banner { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; padding:.85rem 1rem; color:#123b26; background:#eaf7ef; border:1px solid #9bd2b3; border-radius:10px; }
.preview-banner div { display:grid; gap:.1rem; }
.preview-banner span { color:#315e45; font-size:.9rem; }
.preview-banner form { margin:0; }
.statement-sheet { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 36px rgba(15,23,42,.06); }
.statement-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; padding:2rem 2rem 1.5rem; border-bottom:3px solid var(--green); }
.statement-header h1 { margin:.25rem 0 .2rem; font-size:clamp(1.7rem,3vw,2.35rem); }
.statement-period { margin:0; color:var(--muted); font-size:1.05rem; font-weight:650; }
.statement-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; }
.statement-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:1.1rem 2rem; background:var(--soft); border-bottom:1px solid var(--line); }
.statement-meta div { display:grid; gap:.2rem; }
.statement-meta span { color:var(--muted); font-size:.76rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.statement-meta strong { font-size:.9rem; }
.conversion-note { margin:.9rem 2rem 0; color:var(--muted); font-size:.86rem; }
.statement-warning { margin:.9rem 2rem 0; }
.statement-table-wrap { margin-top:1.1rem; }
.statement-table { min-width:920px; }
.statement-table th,.statement-table td { padding:.8rem .7rem; }
.statement-table thead th { color:#fff; background:var(--green-dark); border-color:#2d7652; font-size:.8rem; letter-spacing:.025em; }
.statement-table tbody tr:nth-child(even) { background:#fafcfd; }
.statement-table tbody tr:hover { background:#f1f8f4; }
.statement-table .serial { width:4.2rem; text-align:center; }
.statement-table tbody .total-column { background:#f2fbf6; }
.statement-table .host-cell { min-width:10rem; overflow-wrap:anywhere; }
.statement-table .ip-cell { white-space:nowrap; font-variant-numeric:tabular-nums; }
.statement-table .statement-notice { min-width:13rem; color:#854d0e; font-weight:700; background:#fffaf0; }
.statement-table small { display:block; margin-top:.2rem; color:var(--muted); font-size:.76rem; white-space:normal; }
.product-list { display:grid; gap:.18rem; min-width:9rem; }
.product-list span { font-weight:650; }
.empty-table { padding:2rem !important; color:var(--muted); text-align:center; }
.statement-summary { display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,430px); gap:2rem; align-items:start; padding:1.5rem 2rem; border-top:1px solid var(--line); }
.statement-counts { display:flex; flex-wrap:wrap; gap:.75rem; }
.statement-counts span { padding:.65rem .8rem; color:var(--muted); background:var(--soft); border-radius:8px; }
.statement-counts strong { margin-right:.15rem; color:var(--ink); font-size:1.15rem; }
.totals-list { margin:0; }
.totals-list div { display:flex; justify-content:space-between; gap:2rem; padding:.45rem 0; border-bottom:1px solid var(--line); }
.totals-list dt { color:var(--muted); }
.totals-list dd { margin:0; font-variant-numeric:tabular-nums; font-weight:750; }
.totals-list .grand-total { margin-top:.35rem; padding-top:.8rem; color:var(--ink); border-top:2px solid var(--green-dark); border-bottom:0; font-size:1.18rem; }
.totals-list .grand-total dt { color:var(--ink); font-weight:800; }
.statement-footer { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 2rem; color:var(--muted); background:var(--soft); border-top:1px solid var(--line); font-size:.78rem; }
@media (max-width: 680px) { .header-inner,.page-heading { align-items:stretch; flex-direction:column; } .nav { flex-wrap:wrap; } }
@media (max-width: 680px) { .settings-grid { grid-template-columns:1fr; } .field-wide,.form-actions { grid-column:auto; } .section-heading { flex-direction:column; } }
@media (max-width: 760px) { .preview-banner,.statement-header,.statement-footer { align-items:stretch; flex-direction:column; } .statement-actions { justify-content:flex-start; } .statement-meta { grid-template-columns:1fr; } .statement-summary { grid-template-columns:1fr; } }
@media (max-width: 900px) { .compact-cache-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-table-tools { grid-template-columns:1fr; } .admin-heading .refresh-actions { justify-content:flex-start; } .column-guide-grid { grid-template-columns:1fr; } .column-guide-group-wide { grid-column:auto; } }
@media (max-width: 560px) { .compact-cache-grid { grid-template-columns:1fr; } .column-guide-heading { flex-direction:column; gap:.5rem; } .column-guide-group dl > div { grid-template-columns:1fr; gap:.2rem; } }
@media print {
  body { background:#fff; font-size:9pt; }
  .site-header,.print-hidden { display:none !important; }
  .container { width:100%; max-width:none; }
  .main-content { padding:0; }
  .statement-sheet { border:0; border-radius:0; box-shadow:none; }
  .statement-header { padding:0 0 8mm; }
  .statement-meta { padding:4mm 0; }
  .conversion-note,.statement-warning { margin-left:0; margin-right:0; }
  .table-wrap { overflow:visible; }
  .statement-table { min-width:0; font-size:7.5pt; }
  .statement-table th,.statement-table td { padding:2mm 1.5mm; }
  .statement-summary { grid-template-columns:1fr 85mm; padding:6mm 0; }
  .statement-footer { padding:4mm 0; }
  a { color:inherit; text-decoration:none; }
}
