:root {
    --bg:        #f4f2ee;
    --surface:   #ffffff;
    --panel:     #f9f8f6;
    --border:    #e2ddd7;
    --accent:    #2d3a2e;
    --accent2:   #4a6741;
    --muted:     #a09484;
    --text:      #1e1e1e;
    --text-dim:  #6b6259;
    --danger:    #c0392b;
    --warning:   #b07d1a;
    --sage:      #4a8c5c;
    --income:    #2e7d52;
    --expense:   #c0392b;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'DM Mono', monospace; font-size: 13px; overflow: hidden; }

  /* ── Layout ── */
  #app { display:flex; height:100vh; }
  #sidebar { width:220px; min-width:220px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:0; }
  #main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

  /* ── Sidebar ── */
  .logo { padding:28px 20px 20px; border-bottom:1px solid var(--border); }
  .logo-leaf { font-size:22px; margin-bottom:6px; }
  .logo-title { font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; color:var(--accent); letter-spacing:0.02em; line-height:1; }
  .logo-sub { color:var(--muted); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; margin-top:4px; }

  nav { flex:1; padding:16px 0; }
  .nav-label { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); padding:12px 20px 6px; }
  .nav-item { display:flex; align-items:center; gap:10px; padding:10px 20px; cursor:pointer; color:var(--text-dim); transition:all 0.15s; border-left:2px solid transparent; font-size:12px; }
  .nav-item:hover { color:var(--text); background:var(--panel); }
  .nav-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(45,58,46,0.05); }
  .nav-item svg { width:15px; height:15px; flex-shrink:0; }

  .sidebar-footer { padding:16px 20px; border-top:1px solid var(--border); }

  /* ── Topbar ── */
  #topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
  .page-title { font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:300; color:var(--text); }
  .page-title span { color:var(--accent2); }
  .topbar-right { display:flex; align-items:center; gap:12px; }
  .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:4px; border:none; cursor:pointer; font-family:'DM Mono', monospace; font-size:12px; font-weight:500; transition:all 0.15s; }
  .btn-primary { background:var(--accent); color:#fff; }
  .btn-primary:hover { background:#3d4e3e; }
  .btn-ghost { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
  .btn-ghost:hover { border-color:var(--muted); color:var(--text); }
  .btn-danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
  .btn-danger:hover { background:var(--danger); color:#fff; }

  /* ── Content area ── */
  #content { flex:1; overflow-y:auto; padding:28px; }
  #content.view-calendar { padding:20px; }
  #content::-webkit-scrollbar { width:6px; }
  #content::-webkit-scrollbar-track { background:transparent; }
  #content::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

  /* ── Views ── */
  .view { display:none; }
  .view.active { display:block; }
  .view-fade { animation: fadeIn 0.2s ease; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

  /* ── Dark Theme Variables ── */
  [data-theme="dark"] {
    --bg:       #161a17;
    --surface:  #1f2520;
    --panel:    #1a1e1b;
    --border:   #2c3329;
    --accent:   #6daa6d;
    --accent2:  #5a9e5a;
    --muted:    #697d69;
    --text:     #dde8dd;
    --text-dim: #8fa08f;
    --danger:   #d95f5f;
    --warning:  #c99a30;
    --sage:     #5aaa72;
    --income:   #4aaa72;
    --expense:  #d95f5f;
  }

  /* Dark mode overrides for hardcoded light colours */
  [data-theme="dark"] .cal-cell:hover                          { background: #252c26; }
  [data-theme="dark"] .cal-cell.today                          { background: #1e2e22; }
  [data-theme="dark"] .cal-cell.cal-blocked                    { background: #2a1c1c !important; }
  [data-theme="dark"] .cal-cell.cal-blocked:hover              { background: #321c1c !important; }
  [data-theme="dark"] .cal-cell.cal-blocked.today              { background: #2e1c1c !important; }
  [data-theme="dark"] .weather-card.today-weather              { background: #1e2e24; border-color: #3a5a44; }
  [data-theme="dark"] .upload-zone:hover,
  [data-theme="dark"] .upload-zone.dragover                    { border-color: #888; background: #252c26; }
  [data-theme="dark"] .badge-receipt                           { background: #2a200e; color: #c99a30; border-color: #4a3818; }
  [data-theme="dark"] .badge-green                             { background: #0e2218; color: #4aaa72; border-color: #1a4028; }
  [data-theme="dark"] .badge-status-quoted                     { background: #282828; color: #aaa;    border-color: #404040; }
  [data-theme="dark"] .badge-status-confirmed                  { background: #182840; color: #7aaad4; border-color: #22385a; }
  [data-theme="dark"] .badge-status-inprogress                 { background: #2a2010; color: #c99a30; border-color: #4a3818; }
  [data-theme="dark"] .badge-status-completed                  { background: #0e2218; color: #4aaa72; border-color: #1a4028; }
  [data-theme="dark"] .badge-status-lost                       { background: #2a1010; color: #d97070; border-color: #4a2020; }
  [data-theme="dark"] .status-pill.active-quoted               { background: #282828; color: #aaa;    border-color: #404040; }
  [data-theme="dark"] .status-pill.active-confirmed            { background: #182840; color: #7aaad4; border-color: #22385a; }
  [data-theme="dark"] .status-pill.active-inprogress           { background: #2a2010; color: #c99a30; border-color: #4a3818; }
  [data-theme="dark"] .status-pill.active-completed            { background: #0e2218; color: #4aaa72; border-color: #1a4028; }
  [data-theme="dark"] .status-pill.active-lost                 { background: #2a1010; color: #d97070; border-color: #4a2020; }
  [data-theme="dark"] .jt-chip,
  [data-theme="dark"] .badge-recur                             { background: #182840; color: #7aaad4; border-color: #22385a; }
  [data-theme="dark"] .jt-picker-chip.selected                 { background: #182840; color: #7aaad4; border-color: #22385a; }
  [data-theme="dark"] .fin-kpi.kpi-profit .fin-kpi-value       { color: #6a9fd4; }
  [data-theme="dark"] .fin-kpi.kpi-margin .fin-kpi-value       { color: #b07ad4; }
  [data-theme="dark"] .fin-kpi.kpi-profit                      { border-left-color: #4a7fa6; }
  [data-theme="dark"] .fin-kpi.kpi-margin                      { border-left-color: #7a4ea6; }
  [data-theme="dark"] .fin-profit-line                         { stroke: #6a9fd4; }
  [data-theme="dark"] .fin-profit-dot                          { fill:   #6a9fd4; }
  [data-theme="dark"] .fin-month-table .td-profit.pos          { color: #6a9fd4; }
  [data-theme="dark"] .kanban-col.col-inprogress .kanban-col-title { color: #c99a30; }

  /* ── Sidebar footer / theme button ── */
  .sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
  .sidebar-theme-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 0; background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-family: 'DM Mono', monospace; font-size: 12px;
    transition: color 0.15s; text-align: left;
  }
  .sidebar-theme-btn:hover { color: var(--text); }

  /* Theme toggle button (topbar) */
  .theme-toggle-btn { padding: 8px; width: 36px; height: 36px; flex-shrink: 0; justify-content: center; }

  /* ── Bottom Navigation (mobile) ── */
  #bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface); border-top: 1px solid var(--border);
    z-index: 900; height: 60px;
    justify-content: space-around; align-items: center;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bnav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px; cursor: pointer; color: var(--muted);
    flex: 1; border-radius: 8px; transition: color 0.15s; min-width: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-item span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
  .bnav-item:active { background: var(--panel); }
  .bnav-item.active { color: var(--accent); }

  /* ── Mobile Layout ── */
  @media (max-width: 640px) {
    #sidebar     { display: none; }
    #bottom-nav  { display: flex; }
    #content     { padding: 14px 14px 76px; }
    #topbar      { padding: 10px 14px; }
    .page-title  { font-size: 20px; }
    .topbar-right { gap: 8px; }
    #toast       { bottom: 70px; right: 12px; left: 12px; }
  }