/* ███ JLP NIGHT MODE — Dystopian Retro-Futurist ███ */
:root{
  --bg: #070808;
  --card-bg: rgba(12, 10, 10, 0.84);
  --panel: rgba(20, 14, 14, 0.9);
  --row-dark: #0f0c0c;
  --row-light: #171112;
  --ink: #e8dcc1;
  --ink-dim: #a8956b;
  --accent: #ff4941;
  --accent-2: #7a1816;
  --focus: #ff8a57;
  --danger: #ff6150;
  --ok: #3ec978;
  --shadow: 0 18px 50px rgba(0,0,0,.6);
  --radius: 14px;

  font-family: 'Inter', system-ui, Arial, sans-serif;
  color: var(--ink);
  font-size: 1.05rem;
}

/* background */
html,body{margin:0;padding:0;min-height:100%;background:#000;}
*,*:before,*:after{box-sizing:border-box;}
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 700px at 65% -15%, rgba(255,68,54,.18), transparent 70%),
    url("/assets/img/bg-night.png") center/cover no-repeat fixed; /* swap to your file */
  filter: saturate(1.05) contrast(1.08) brightness(.5); opacity:.95;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.65), transparent 60%);
  mix-blend-mode:soft-light; opacity:.35;
}

/* headings & links */
h1,h2{margin:0; font-weight:800; color:var(--accent); text-align:center; letter-spacing:.6px;}
h1 span{color:var(--ink); opacity:.85;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:#ffd3b8;}

/* card */
.card{
  max-width: 1000px;
  margin: 4rem auto;
  padding: 2rem 2.2rem;
  background: var(--card-bg);
  border: 1.5px solid rgba(122,24,22,.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(120%);
}
@media (prefers-reduced-motion:no-preference){
  .fade-in{animation: fade .55s ease-out both;}
  @keyframes fade{from{opacity:0; transform:translateY(12px)}}
}

/* headline / actions cluster */
.headline{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.headline h1{flex:1;min-width:220px;text-align:left;}
.headline-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}

/* buttons */
.btn-primary,.btn-outline{
  font: 700 .9rem/1 'Inter',sans-serif; padding:.65rem 1rem; border-radius:12px;
  display:inline-flex; align-items:center; gap:.45em; cursor:pointer; letter-spacing:.25px;
  transition: transform .06s ease, background .2s, color .2s, border-color .2s;
}
.btn-primary{
  background: linear-gradient(180deg, #ff6b54, #d9382b);
  color:#1d0e0c; border:1px solid #a51f19; box-shadow: 0 8px 20px rgba(217,56,43,.28);
}
.btn-primary:hover{filter:brightness(.98);}
.btn-primary:active{transform: translateY(1px);}
.btn-outline{
  color:#ffd3b8; background: rgba(122,24,22,.22); border:1.5px solid var(--accent-2);
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.06);
}
.btn-outline:hover{background: rgba(122,24,22,.35); color:var(--accent);}
.btn-outline:focus-visible,.btn-primary:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

/* inline date picker (if used) */
.range-picker-inline{display:flex;gap:.5rem;align-items:center;}
.range-picker-inline input[type="date"]{
  padding:.45rem .6rem;width:auto;font:600 .85rem 'Inter',sans-serif;color:var(--ink);
  background:var(--panel); border:1px solid rgba(165,31,25,.45); border-radius:8px;
}
.range-picker-inline button{padding:.5rem .9rem;font-size:.85rem;}

/* table */
.table-wrapper h2{margin-top:.6rem;margin-bottom:1rem;}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;}
th,td{padding:.75rem .7rem;text-align:center;}
th{
  background: linear-gradient(180deg, #1b1212, #120d0d); color:#ffe6c7; position:sticky; top:0; z-index:1;
  border-bottom:1px solid rgba(122,24,22,.6); text-transform:uppercase; letter-spacing:.45px; font-weight:800;
}
tbody tr:nth-child(odd){background: var(--row-dark);}
tbody tr:nth-child(even){background: var(--row-light);}
tbody tr:hover{background:#1f1516;}
td{border-bottom:1px solid rgba(122,24,22,.35);}
.num{text-align:right; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;}
table tr > *:first-child{border-left:1px solid rgba(122,24,22,.45);}
table tr > *:last-child{border-right:1px solid rgba(122,24,22,.45);}

/* totals */
.grand-total{margin-top:.75rem;text-align:right;font-weight:800;color:#ffe6c7;}
.grand-total span{color:#ffb27f;text-shadow:0 0 12px rgba(255,178,127,.22);}

/* apr summary */
.apr-summary{text-align:center;margin-top:1.2rem;}
.apr-grid{margin-top:.9rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;}
.apr-grid div{
  background: linear-gradient(180deg, #140f10, #0f0c0c);
  border: 1.5px solid rgba(122,24,22,.55);
  border-radius:14px; padding:1rem 1.1rem; box-shadow:0 10px 22px rgba(0,0,0,.55);
}
.apr-grid strong{color:#ffb27f;font-size:1.24rem;display:block;text-shadow:0 0 10px rgba(255,73,65,.14);}
.apr-grid small{font-size:.75rem;color:var(--ink-dim);}

/* footer */
footer{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:.9rem;}
footer .share{margin-left:auto;}

/* utilities */
.hidden{display:none !important;}
@media (max-width:560px){.headline h1{font-size:1.35rem;} .btn-outline{width:100%;}}
:focus-visible{scroll-margin:80px;}


/* ======= HERO on index ======= */
.hero-center{display:grid;gap:1rem;place-items:center;text-align:center;}
.hero-center .lead{color:var(--ink-dim);max-width:680px;margin:.25rem auto 0;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1rem;width:100%;}
.kpi{background:linear-gradient(180deg,#140f10,#0f0c0c);border:1.5px solid rgba(122,24,22,.55);border-radius:14px;padding:1rem;box-shadow:0 10px 22px rgba(0,0,0,.55);}
.kpi .label{font-size:.8rem;color:var(--ink-dim);}
.kpi .value{font-size:3.6rem;font-weight:900;color:#ffb27f;}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.6rem;}