/* Brightloom Studio invoice. Sheet on a soft desk. Light by default; [data-theme] forces. */
:root{
  color-scheme:light dark;
  --desk:light-dark(#EEF1F1,#0A0D0D);
  --sheet:light-dark(#FFFFFF,#131717);
  --ink:light-dark(#111111,#E8ECEB);
  --muted:light-dark(#6B7280,#94A09E);
  --rule:light-dark(#E5E7EB,#242A2A);
  --accent:light-dark(#0F766E,#2DD4BF);
  --accent-soft:light-dark(#F0FAF8,rgba(45,212,191,.10));
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="light"]{color-scheme:only light}
:root[data-theme="dark"]{color-scheme:only dark}
*{box-sizing:border-box}
body{
  margin:0;background:
    radial-gradient(120% 80% at 50% 0%, light-dark(#F7F9F9,#0E1212), transparent 60%),
    var(--desk);
  min-height:100vh;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;padding:48px 20px;text-wrap:pretty;
}
.sheet{
  width:100%;max-width:794px;margin:0 auto;background:var(--sheet);border-radius:6px;
  border:1px solid var(--rule);box-shadow:0 24px 60px light-dark(rgba(17,17,17,.10),rgba(0,0,0,.5));
  padding:56px 56px 40px;
}
.top{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.logo{width:52px;height:52px;border-radius:6px;border:1px dashed var(--rule);background:var(--accent-soft);display:grid;place-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.biz h1{font-size:15px;font-weight:650;margin:0 0 4px;letter-spacing:-.01em}
.biz p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.invmeta{text-align:right;min-width:220px}
.invmeta .word{font-size:11px;font-weight:650;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.invmeta .no{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
.invmeta dl{display:grid;grid-template-columns:auto auto;gap:5px 16px;justify-content:end;margin:0;font-size:12.5px}
.invmeta dt{color:var(--muted);text-align:right}
.invmeta dd{margin:0;font-variant-numeric:tabular-nums;font-weight:550}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--rule)}
.lbl{font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.parties p{margin:0;font-size:13.5px;line-height:1.65}
.parties b{font-weight:650;font-size:14.5px}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:26px;font-variant-numeric:tabular-nums}
th{text-align:right;font-size:10px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--ink)}
th:first-child,td:first-child{text-align:left}
td{padding:14px 0;border-bottom:1px solid var(--rule);text-align:right;vertical-align:top}
td:first-child{padding-right:24px}
td b{display:block;font-weight:600;font-size:13.5px;margin-bottom:2px}
td small{color:var(--muted);font-size:12px;line-height:1.5;display:block;max-width:44ch}
.totals{margin-top:22px;margin-left:auto;width:100%;max-width:320px;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px}
.totals div span:first-child{color:var(--muted)}
.totals .grand{margin-top:6px;padding:14px 0 0;border-top:1px solid var(--ink);align-items:baseline}
.totals .grand span:first-child{color:var(--ink);font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.totals .grand span:last-child{font-size:22px;font-weight:650;letter-spacing:-.025em;color:var(--accent)}
.pay{margin-top:34px;border:1px solid var(--rule);border-radius:6px;background:var(--accent-soft);padding:20px 22px}
.pay dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px 24px;margin:14px 0 0}
.pay dt{font-size:10px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pay dd{margin:0;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--rule)}
.foot p{margin:0 0 8px;font-size:13.5px}
.foot small{display:block;font-size:11.5px;color:var(--muted);line-height:1.6;max-width:70ch}
@media (max-width:640px){
  body{padding:20px 12px}
  .sheet{padding:28px 22px 26px}
  .top,.parties{grid-template-columns:1fr;gap:20px}
  .invmeta{text-align:left;min-width:0}
  .invmeta dl{justify-content:start}
  .invmeta dt{text-align:left}
  th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3){display:none}
  .totals{max-width:none}
}
@media print{
  @page{margin:15mm}
  :root{color-scheme:only light}
  body{background:#fff;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:10.5pt}
  .sheet{box-shadow:none;border:none;padding:0;max-width:none;border-radius:0}
  tr,.pay{break-inside:avoid}
}