:root{--bg:#0b1220;--bg2:#0c1526;--fg:#0f172a;--muted:#667085;--card:#ffffff;--border:#e6e8f0;--brand:#2563eb;--brand-600:#1d4ed8;--ring:#93c5fd}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--fg)}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px 48px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(15,23,42,.45));backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 2px 10px rgba(2,6,23,.2)}
header .inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px}
h1{margin:0}
/* Brand */
.brand{display:flex;flex-direction:column;gap:2px}
.hero{margin:0;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:.3px;color:#e2e8f0;font-weight:800}
.subtitle{color:#cbd5e1;font-size:.95rem}

/* Cards */
section{margin:18px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(2,6,23,.06)}
.card.pad{padding:16px}

/* Toggle (USD/GBP) */
.toggle{display:inline-flex;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.toggle label{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:.9rem;color:#374151;cursor:pointer}
.toggle input{appearance:none;position:absolute;left:-9999px}
.toggle label:has(input:checked){background:var(--brand);color:#fff}
/* Header contrast variant */
header .toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
header .toggle label{color:#e2e8f0}

/* Totals */
.totals{font-size:1.15rem}
#grandTotal{font-weight:700}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff}
.table thead th{background:#f8fafc;color:#475569;font-weight:600}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #eef2f7;text-align:left;font-size:.95rem}
.table th.num,.table td.num{text-align:right}
.table tbody tr:hover{background:#f8fafc}
.table tbody tr:last-child td{border-bottom:0}

/* Forms */
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
input,select,button{padding:10px 12px;font-size:.95rem;border-radius:10px;border:1px solid var(--border);background:#fff;color:#111827}
input:focus,select:focus,button:focus{outline:none;box-shadow:0 0 0 3px var(--ring)}
button{cursor:pointer}
button.primary{background:var(--brand);color:white;border-color:transparent}
button.primary:hover{background:var(--brand-600)}

/* Links */
.link{color:var(--brand);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* Section header + info icon */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-head .title{font-weight:700;color:#0f172a}
.info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e2e8f0;color:#111827;font-size:.8rem;cursor:help}
.info:hover{background:#d1d5db}

/* Footer */
footer{color:#cbd5e1;margin-top:24px}
small.muted{color:#64748b}

/* Chart container */
canvas{display:block;max-width:100%}
.chart.card{padding:8px}

/* Responsive tweaks */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}
@media (max-width: 768px){
  header .inner{flex-wrap:wrap}
  .hero{font-size:1.6rem}
  .subtitle{font-size:.9rem}
  .form-row{gap:8px}
  input,select,button{font-size:.95rem}
  .table{font-size:.9rem}
}
@media (max-width: 640px){
  .container{padding:0 12px 40px}
  .form-row{flex-direction:column;align-items:stretch}
  .form-row > *{width:100%}
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .toggle label{padding:6px 10px}
}