:root {
  --bg: #f7f4ef;
  --surface: #fffdf9;
  --surface-2: #f0ece6;
  --line: #d9d6d0;
  --text: #2d3432;
  --muted: #747b78;
  --primary: #7d8f79;
  --primary-dark: #61705e;
  --primary-soft: #e8eee5;
  --accent: #b79c8b;
  --danger: #a55e59;
  --warning: #b48645;
  --success: #5f8466;
  --shadow: 0 12px 32px rgba(45,52,50,.08);
  --radius: 18px;
  --sidebar-width: 250px;
  --header-height: 86px;
  font-family: "Montserrat", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="ivory"] { --bg:#f6f4f0; --surface:#fff; --surface-2:#eceae6; --primary:#68716f; --primary-dark:#505856; --primary-soft:#ecefed; --accent:#9e8f82; }
[data-theme="dusty"] { --bg:#f2f5f6; --surface:#fff; --surface-2:#e7edef; --primary:#718a96; --primary-dark:#556e79; --primary-soft:#e6eef1; --accent:#aa9387; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { overflow-x:hidden; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); grid-template-rows:var(--header-height) 1fr; }
.topbar { grid-column:1/-1; position:sticky; top:0; z-index:30; min-height:var(--header-height); display:flex; align-items:center; gap:24px; padding:14px 24px; background:rgba(255,253,249,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:12px; min-width:max-content; }
.brand-mark { width:44px; height:44px; border:1px solid var(--primary); border-radius:50%; display:grid; place-items:center; color:var(--primary-dark); font-size:24px; }
.brand-title { font-family:"Raleway", sans-serif; font-size:21px; font-weight:500; letter-spacing:.01em; }
.brand-subtitle { color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.18em; margin-top:3px; }
.event-personalisation { flex:1 1 280px; min-width:0; max-width:420px; display:grid; gap:2px; padding-left:22px; border-left:1px solid var(--line); }
.event-personalisation-label { color:var(--muted); text-transform:uppercase; font-size:9px; font-weight:600; letter-spacing:.16em; }
.event-personalisation strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:"Raleway", sans-serif; font-size:16px; font-weight:500; letter-spacing:.01em; }
.event-personalisation #topbarEventDate { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.top-actions { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.save-status { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.save-status span { width:8px; height:8px; border-radius:50%; background:var(--success); }
.btn { min-height:44px; border-radius:12px; padding:0 16px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(45,52,50,.08); }
.btn.primary { background:var(--primary); color:white; border-color:var(--primary); }
.btn.secondary { background:var(--surface); }
.file-button input { display:none; }
.icon-btn { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px; background:transparent; color:var(--text); }
.mobile-only { display:none; }
.sidebar { grid-row:2; background:var(--surface); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; min-height:calc(100vh - var(--header-height)); position:sticky; top:var(--header-height); }
.sidebar nav { display:grid; gap:6px; }
.nav-item { width:100%; min-height:52px; border:0; background:transparent; border-radius:13px; display:flex; align-items:center; gap:14px; padding:0 14px; color:var(--muted); font-weight:500; text-align:left; }
.nav-item svg { width:21px; height:21px; }
.nav-item:hover { background:var(--primary-soft); color:var(--primary-dark); }
.nav-item.active { background:var(--primary); color:white; }
.sidebar-footer { margin-top:auto; padding:18px 10px 6px; border-top:1px solid var(--line); display:grid; gap:6px; }
.sidebar-footer span, .sidebar-footer small { color:var(--muted); line-height:1.45; }
.sidebar-footer small { margin-top:8px; font-size:11px; }
.main-content { min-width:0; padding:34px clamp(20px,4vw,56px) 64px; }
.view { display:none; animation:fade .18s ease; }
.view.active { display:block; }
@keyframes fade { from{opacity:.4; transform:translateY(4px)} to{opacity:1; transform:none} }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.page-heading h1 { font-family:"Raleway", sans-serif; font-weight:400; font-size:clamp(30px,3.3vw,48px); line-height:1.08; margin:8px 0 8px; max-width:900px; }
.page-heading p { margin:0; color:var(--muted); line-height:1.6; max-width:760px; }
.heading-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.eyebrow { color:var(--primary-dark); text-transform:uppercase; letter-spacing:.17em; font-size:12px; font-weight:600; }
.summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.summary-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); min-width:0; }
.summary-card span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.summary-card strong { display:block; font-family:"Raleway", sans-serif; font-size:clamp(26px,2.3vw,38px); font-weight:400; margin:10px 0 5px; overflow-wrap:anywhere; }
.summary-card small { color:var(--muted); line-height:1.4; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:18px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); min-width:0; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.panel h2 { font-family:"Raleway", sans-serif; font-weight:500; font-size:22px; margin:5px 0 0; }
.text-button { border:0; background:transparent; color:var(--primary-dark); font-weight:600; padding:6px 0; }
.category-bars { display:grid; gap:15px; }
.category-bars.large { gap:19px; }
.bar-row { display:grid; grid-template-columns:minmax(110px,1fr) minmax(180px,2.2fr) minmax(96px,auto); align-items:center; gap:14px; }
.bar-label { min-width:0; }
.bar-label strong { display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-label small { color:var(--muted); }
.bar-track { height:11px; background:var(--surface-2); border-radius:99px; overflow:hidden; position:relative; }
.bar-plan { height:100%; border-radius:inherit; background:var(--primary); }
.bar-plan.over { background:var(--danger); }
.bar-value { text-align:right; font-size:13px; color:var(--muted); white-space:nowrap; }
.donut-wrap { display:flex; align-items:center; justify-content:center; gap:28px; min-height:240px; }
.donut { width:172px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--primary) 0deg, var(--surface-2) 0deg); position:relative; flex:0 0 auto; }
.donut::after { content:""; width:112px; aspect-ratio:1; border-radius:50%; background:var(--surface); position:absolute; }
.donut > div { z-index:1; text-align:center; }
.donut strong { font-family:"Raleway", sans-serif; display:block; font-size:32px; font-weight:500; }
.donut span { color:var(--muted); font-size:12px; }
.legend { display:grid; gap:12px; }
.legend-row { display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; font-size:13px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }
.stack-list { display:grid; gap:10px; }
.stack-item { border:1px solid var(--line); border-radius:13px; padding:13px 14px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.stack-item strong { display:block; margin-bottom:4px; }
.stack-item small { color:var(--muted); }
.stack-item .amount { font-weight:600; text-align:right; }
.badge { display:inline-flex; align-items:center; min-height:25px; border-radius:99px; padding:0 9px; font-size:11px; font-weight:600; text-transform:capitalize; background:var(--surface-2); color:var(--muted); }
.badge.paid { background:#e5f0e7; color:var(--success); }
.badge.overdue { background:#f5e4e2; color:var(--danger); }
.badge.due-soon { background:#f5ecdc; color:var(--warning); }
.decision-number { font-family:"Raleway", sans-serif; font-size:50px; margin:14px 0 8px; }
.decision-panel p { color:var(--muted); line-height:1.6; }
.mini-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:22px; }
.mini-stat { border-top:1px solid var(--line); padding-top:12px; }
.mini-stat span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.mini-stat strong { display:block; margin-top:5px; }
.table-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.table-toolbar select { min-height:44px; border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:0 34px 0 12px; color:var(--text); }
.search-box { flex:1 1 260px; min-height:44px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:0 12px; }
.search-box svg { width:18px; color:var(--muted); }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.data-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.table-scroll { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:880px; }
th { text-align:left; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:11px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
td { padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
tbody tr:hover { background:color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.action-menu { display:flex; justify-content:flex-end; gap:6px; }
.small-btn { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-size:12px; }
.small-btn.danger { color:var(--danger); }
.progress-cell { min-width:140px; }
.progress { height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--primary); }
.progress span.over { background:var(--danger); }
.payment-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.vendor-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:grid; gap:14px; }
.vendor-card h3 { margin:0; font-family:"Raleway", sans-serif; font-weight:500; font-size:21px; }
.vendor-card .meta { color:var(--muted); font-size:13px; line-height:1.6; }
.vendor-card .vendor-finance { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.vendor-card .vendor-finance div { background:var(--surface-2); border-radius:11px; padding:11px; }
.vendor-card .vendor-finance span { display:block; font-size:10px; text-transform:uppercase; color:var(--muted); letter-spacing:.09em; }
.vendor-card .vendor-finance strong { display:block; margin-top:5px; }
.vendor-actions { display:flex; gap:8px; margin-top:auto; }
.report-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.report-grid .wide { grid-column:1/-1; }
.donut-wrap.report { min-height:310px; }
.timeline-chart { min-height:270px; display:flex; gap:14px; align-items:flex-end; padding:20px 6px 4px; border-bottom:1px solid var(--line); }
.timeline-col { flex:1; min-width:55px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; height:240px; }
.timeline-bar { width:min(44px,70%); min-height:3px; background:var(--primary); border-radius:8px 8px 0 0; }
.timeline-col strong { font-size:11px; font-weight:500; }
.timeline-col small { color:var(--muted); font-size:10px; }
.settings-grid { max-width:980px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.settings-grid label, .modal-form label { display:grid; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--muted); }
.settings-grid input, .settings-grid select, .settings-grid textarea, .modal-form input, .modal-form select, .modal-form textarea { width:100%; min-height:46px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); padding:10px 12px; outline:none; text-transform:none; letter-spacing:normal; font-weight:400; }
.settings-grid input:focus, .settings-grid select:focus, .settings-grid textarea:focus, .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.wide { grid-column:1/-1; }
.form-actions { display:flex; gap:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(32,39,37,.48); display:grid; place-items:center; padding:20px; }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(680px,100%); max-height:min(90vh,780px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 70px rgba(20,25,24,.25); }
.modal-header { position:sticky; top:0; background:var(--surface); z-index:2; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.modal-header h2 { margin:0; font-family:"Raleway", sans-serif; font-weight:500; }
.modal-form { padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.modal-form .modal-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; padding-top:4px; }
.toast { position:fixed; right:22px; bottom:22px; z-index:200; background:var(--text); color:white; border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); opacity:0; transform:translateY(14px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:none; }
.empty { padding:28px; text-align:center; color:var(--muted); }
@media (max-width:1180px) {
  :root { --sidebar-width:220px; }
  .save-status { display:none; }
  .topbar { gap:14px; padding-inline:16px; }
  .event-personalisation { max-width:300px; padding-left:16px; }
  .top-actions .btn { padding-inline:12px; font-size:13px; }
  .summary-grid { grid-template-columns:repeat(3,1fr); }
  .card-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  :root { --header-height:74px; }
  .app-shell { display:block; }
  .topbar { min-height:var(--header-height); }
  .mobile-only { display:grid; }
  .brand-title { font-size:18px; }
  .brand-subtitle { display:none; }
  .event-personalisation { flex:1 1 auto; max-width:none; padding-left:14px; }
  .event-personalisation-label { display:none; }
  .event-personalisation strong { font-size:14px; }
  .event-personalisation #topbarEventDate { font-size:10px; }
  .sidebar { position:fixed; left:0; top:var(--header-height); bottom:0; width:min(310px,86vw); min-height:0; z-index:60; transform:translateX(-104%); box-shadow:var(--shadow); transition:.2s; }
  .sidebar.open { transform:none; }
  .main-content { padding-top:26px; }
  .top-actions .secondary { display:none; }
  .dashboard-grid, .report-grid { grid-template-columns:1fr; }
  .report-grid .wide { grid-column:auto; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .payment-summary { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  :root { --header-height:122px; }
  .topbar { min-height:var(--header-height); display:grid; grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:48px auto; align-items:center; padding:8px 12px 10px; gap:4px 10px; }
  .mobile-only { grid-column:1; grid-row:1; }
  .brand { grid-column:2; grid-row:1; justify-self:center; min-width:0; }
  .brand-mark { display:none; }
  .brand-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
  .event-personalisation { grid-column:1/-1; grid-row:2; width:100%; max-width:none; padding:8px 4px 0; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; }
  .event-personalisation strong { font-size:14px; }
  .event-personalisation #topbarEventDate { font-size:10px; text-align:right; }
  .top-actions { grid-column:3; grid-row:1; margin-left:0; gap:6px; }
  .top-actions .btn.primary { font-size:0; width:44px; padding:0; }
  .top-actions .btn.primary::after { content:"PDF"; font-size:11px; }
  .main-content { padding:22px 14px 48px; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .heading-actions { justify-content:flex-start; }
  .summary-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .summary-card { padding:15px; }
  .summary-card strong { font-size:26px; }
  .dashboard-grid { gap:12px; }
  .panel { padding:17px; }
  .bar-row { grid-template-columns:1fr; gap:7px; }
  .bar-value { text-align:left; }
  .donut-wrap { flex-direction:column; }
  .settings-grid, .modal-form { grid-template-columns:1fr; padding:16px; }
  .wide, .modal-form .modal-actions { grid-column:auto; }
  .card-grid { grid-template-columns:1fr; }
  .table-toolbar { flex-direction:column; }
  .table-toolbar > * { width:100%; }
}
@media print {
  .topbar, .sidebar, .heading-actions, .table-toolbar, .text-button, .action-menu, .btn, .small-btn { display:none !important; }
  .app-shell { display:block; }
  .main-content { padding:0; }
  .view { display:none !important; }
  #view-reports.active, #view-dashboard.active { display:block !important; }
  body { background:white; }
  .panel, .summary-card, .data-card { box-shadow:none; break-inside:avoid; }
  .page-heading h1 { font-size:32px; }
}