:root {
    --bg:#F1F3F1; --surface:#FFFFFF; --ink:#16252A; --ink-soft:#55676D; --ink-faint:#8A9A9E; --line:#DCE3E0;
    --brand:#1E3B3F; --brand-2:#295256; --brand-ink:#F3F6F5; --accent:#C9862E; --accent-ink:#211705;
    --ok-bg:#E7F3EB; --ok-ink:#1F6B45; --ok-line:#BEDECB;
    --warn-bg:#FBF0DE; --warn-ink:#8A5B10; --warn-line:#EFD9AC;
    --danger-bg:#FBEAE7; --danger-ink:#A23B2C; --danger-line:#F0C6BC;
    --proto-bg:#EFE7F7; --proto-ink:#5B3E93; --proto-line:#DCCBF0;
    --radius:10px;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); box-sizing:border-box;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#10191B; --surface:#162325; --ink:#EAF1EF; --ink-soft:#A9BAB8; --ink-faint:#6E8181; --line:#25373A;
      --brand:#0E2224; --brand-2:#173538; --brand-ink:#EAF1EF;
      --ok-bg:#12291D; --ok-ink:#6FD79E; --ok-line:#1F4A34; --warn-bg:#2B2211; --warn-ink:#E5B458; --warn-line:#4A3A17;
      --danger-bg:#2C1815; --danger-ink:#F0917D; --danger-line:#4A2621;
      --proto-bg:#241A33; --proto-ink:#C9AEEF; --proto-line:#3D2C57;
    }
  }
  :root[data-theme="dark"] {
    --bg:#10191B; --surface:#162325; --ink:#EAF1EF; --ink-soft:#A9BAB8; --ink-faint:#6E8181; --line:#25373A;
    --brand:#0E2224; --brand-2:#173538; --brand-ink:#EAF1EF;
    --ok-bg:#12291D; --ok-ink:#6FD79E; --ok-line:#1F4A34; --warn-bg:#2B2211; --warn-ink:#E5B458; --warn-line:#4A3A17;
    --danger-bg:#2C1815; --danger-ink:#F0917D; --danger-line:#4A2621;
    --proto-bg:#241A33; --proto-ink:#C9AEEF; --proto-line:#3D2C57;
  }
  * { box-sizing:border-box; }
  html, body, #root { height:100%; }
  html { scroll-padding-top: env(safe-area-inset-top,0px); }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  button { font-family:inherit; } ::selection { background:var(--accent); color:var(--accent-ink); }

  #protoBar { background:var(--proto-bg); color:var(--proto-ink); font-size:12.5px; font-weight:700; padding:8px 20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--proto-line); }
  #protoBar select { font-family:inherit; font-size:12.5px; font-weight:700; padding:5px 9px; border-radius:7px; border:1px solid var(--proto-line); background:var(--surface); color:var(--proto-ink); }
  #protoBar .tag { background:var(--proto-ink); color:#fff; padding:2px 8px; border-radius:6px; font-size:10.5px; }

  .home-header { display:flex; align-items:center; gap:14px; padding:18px 28px; }
  .brandmark { display:flex; align-items:center; gap:10px; }
  .brandmark .logo { width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0; }
  .brandmark .name { font-weight:800; font-size:17px; }
  .home-main { max-width:820px; margin:0 auto; padding:56px 24px 140px; }
  .hero-title { font-size:28px; font-weight:800; letter-spacing:-0.3px; margin:0 0 8px; text-align:center; }
  .hero-sub { color:var(--ink-soft); margin:0 0 40px; font-size:14.8px; text-align:center; }
  .cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:620px){ .cta-grid{grid-template-columns:1fr;} }
  .cta-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px; cursor:pointer; display:flex; flex-direction:column; gap:12px; text-align:left; }
  .cta-card:hover { border-color:var(--accent); }
  .cta-card .ic { width:50px; height:50px; border-radius:13px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:24px; }
  .cta-card .t { font-size:18px; font-weight:800; }
  .cta-card .d { font-size:13.4px; color:var(--ink-soft); }
  .cta-card .go { font-size:12.8px; font-weight:800; color:var(--accent-ink); background:var(--accent); display:inline-flex; align-self:flex-start; padding:7px 15px; border-radius:999px; margin-top:4px; }
  .work-link-row { text-align:center; margin-top:34px; }
  .work-link-row button { background:none; border:none; color:var(--ink-faint); font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:underline; }
  .back-link { background:none; border:none; color:var(--ink-faint); font-size:13px; font-weight:700; cursor:pointer; margin-bottom:18px; padding:0; }
  .back-link:hover { color:var(--ink); }

  #adminWrap { display:flex; min-height:100%; }
  #sidebar { width:236px; flex-shrink:0; background:var(--brand); color:var(--brand-ink); display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh; }
  nav.nav { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
  .navlink { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; color:#CFE0DE; text-decoration:none; cursor:pointer; font-weight:600; font-size:13.8px; border:1px solid transparent; background:transparent; text-align:left; width:100%; }
  .navlink:hover { background:rgba(255,255,255,0.06); }
  .navlink.active { background:rgba(255,255,255,0.11); color:#fff; border-color:rgba(255,255,255,0.08); }
  .navlink .ic { width:18px; text-align:center; flex-shrink:0; }
  .navlink .count { margin-left:auto; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; min-width:18px; text-align:center; }
  .nav-group { display:flex; flex-direction:column; gap:2px; }
  .group-header { font-weight:700; justify-content:space-between; }
  .nav-children { display:flex; flex-direction:column; gap:2px; margin-left:14px; margin-top:2px; padding-left:8px; border-left:1px solid rgba(255,255,255,0.1); }
  .sublink { font-size:13px; padding:8px 12px; }
  .carat { font-size:9px; color:#9FB6B3; transition:transform 0.2s; flex-shrink:0; }
  .sidebar-footer { margin-top:auto; padding:10px; font-size:11.5px; color:#9FB6B3; line-height:1.5; }
  .sidebar-footer button { background:none; border:none; color:#CFE0DE; font-weight:700; cursor:pointer; padding:0; font-size:12px; text-decoration:underline; }
  #main { flex:1; min-width:0; display:flex; flex-direction:column; }
  #topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:16px 28px; background:var(--surface); border-bottom:1px solid var(--line); }
  #topbar h1 { font-size:18px; margin:0; font-weight:800; letter-spacing:-0.2px; }
  .spacer { flex:1; }
  .user-chip { display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; border-radius:999px; border:1px solid var(--line); }
  .user-chip .initial { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; flex-shrink:0; }
  .user-chip .who { display:flex; flex-direction:column; line-height:1.15; } .user-chip .who b { font-size:12.5px; } .user-chip .who span { font-size:10.5px; color:var(--ink-faint); }
  #content { flex:1; padding:26px 28px 60px; max-width:1080px; width:100%; }
  #content.narrow { max-width:760px; }

  h2.pagehead { font-size:20px; margin:0 0 4px; font-weight:800; letter-spacing:-0.2px; }
  p.pagesub { color:var(--ink-soft); margin:0 0 22px; font-size:13.6px; }
  .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
  .panel + .panel { margin-top:16px; }
  .section-title { font-size:13px; font-weight:800; color:var(--ink-soft); margin:26px 0 10px; }
  .section-title:first-child { margin-top:0; }

  .req-card { background:var(--surface); border:1px solid var(--line); border-left-width:4px; border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; cursor:pointer; margin-bottom:10px; }
  .req-card:hover { border-color:var(--ink-faint); }
  .req-card.st-pending { border-left-color:var(--warn-ink); }
  .req-card.st-approved { border-left-color:var(--ok-ink); }
  .req-card.st-rejected { border-left-color:var(--danger-ink); }
  .req-card .tbadge { font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:6px; flex-shrink:0; background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }
  .req-card .main { flex:1; min-width:0; }
  .req-card .title { font-weight:700; font-size:14.2px; white-space:normal; }
  .req-card .meta { font-size:12px; color:var(--ink-faint); margin-top:2px; }
  .req-card .steps-mini { display:flex; gap:6px; flex-shrink:0; }
  .step-dot { width:9px; height:9px; border-radius:50%; background:var(--line); }
  .step-dot.done { background:var(--ok-ink); } .step-dot.now { background:var(--warn-ink); } .step-dot.rej { background:var(--danger-ink); }
  .status-pill { font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; flex-shrink:0; white-space:nowrap; }
  .status-pill.pending { background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--warn-line); }
  .status-pill.approved { background:var(--ok-bg); color:var(--ok-ink); border:1px solid var(--ok-line); }
  .status-pill.rejected { background:var(--danger-bg); color:var(--danger-ink); border:1px solid var(--danger-line); }
  .role-pill { font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); }
  .empty-note { color:var(--ink-faint); font-size:13px; padding:18px 4px; }

  .field { margin-bottom:16px; }
  .field label { display:block; font-size:12.6px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
  .field .hint { font-size:11.5px; color:var(--ink-faint); margin-top:4px; }
  input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=file], select, textarea {
    width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-family:inherit; font-size:13.8px;
  }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  textarea { resize:vertical; min-height:74px; }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:640px){ .row2{grid-template-columns:1fr;} }
  .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } @media (max-width:640px){ .row3{grid-template-columns:1fr;} }
  .amount-wrap { position:relative; }
  .amount-wrap .naira { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-weight:700; }
  .amount-wrap input { padding-left:26px; }

  .btn { display:inline-flex; align-items:center; gap:7px; justify-content:center; cursor:pointer; border-radius:8px; font-weight:700; font-size:13.6px; padding:10px 18px; border:1px solid transparent; font-family:inherit; }
  .btn-primary { background:var(--accent); color:var(--accent-ink); } .btn-primary:hover { filter:brightness(0.96); } .btn-primary:disabled { opacity:.5; cursor:not-allowed; }
  .btn-ghost { background:transparent; color:var(--ink-soft); border-color:var(--line); } .btn-ghost:hover { background:var(--bg); }
  .btn-ok { background:var(--ok-ink); color:#fff; } .btn-danger { background:var(--danger-ink); color:#fff; }
  .btn-sm { padding:7px 12px; font-size:12.6px; }
  .icon-btn { background:none; border:1px solid var(--line); border-radius:7px; width:28px; height:28px; cursor:pointer; color:var(--ink-soft); font-size:13px; }
  .icon-btn:hover { background:var(--bg); }

  .banner { padding:12px 14px; border-radius:8px; font-size:13px; margin-bottom:18px; border:1px solid; display:flex; gap:10px; align-items:flex-start; }
  .banner.warn { background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-line); }
  .banner.info { background:var(--bg); color:var(--ink-soft); border-color:var(--line); }

  #modal-backdrop { position:fixed; inset:0; background:rgba(10,20,20,0.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:100; overflow-y:auto; }
  #modal { background:var(--surface); border-radius:14px; max-width:640px; width:100%; padding:26px; border:1px solid var(--line); margin-bottom:40px; }
  .modal-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
  .modal-head .title { font-size:17px; font-weight:800; flex:1; }
  .close-x { background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink-faint); line-height:1; padding:2px; }
  .kv { display:grid; grid-template-columns:42% 58%; gap:6px 10px; font-size:13.2px; margin-bottom:4px; }
  .kv .k { color:var(--ink-faint); } .kv .v { font-weight:600; text-align:right; }

  .lineitems-table { width:100%; border-collapse:collapse; font-size:12.8px; margin-top:6px; }
  .lineitems-table th { text-align:left; font-size:10.8px; color:var(--ink-faint); font-weight:700; padding:5px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
  .lineitems-table td { padding:5px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
  .lineitems-table input { padding:6px 8px; font-size:12.8px; }

  .timeline { margin-top:18px; }
  .tl-step { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
  .tl-step:first-child { border-top:none; }
  .tl-icon { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; margin-top:1px; }
  .tl-icon.done { background:var(--ok-ink); } .tl-icon.now { background:var(--warn-ink); } .tl-icon.wait { background:var(--ink-faint); } .tl-icon.rej { background:var(--danger-ink); }
  .tl-body { flex:1; } .tl-role { font-weight:700; font-size:13.4px; } .tl-who { font-size:12px; color:var(--ink-faint); }
  .tl-note { font-size:12.8px; margin-top:4px; background:var(--bg); border-radius:6px; padding:8px 10px; color:var(--ink-soft); }
  .tl-file { font-size:12px; margin-top:5px; }
  .tl-file a { color:var(--accent-ink); font-weight:700; text-decoration:none; background:var(--warn-bg); padding:3px 9px; border-radius:6px; border:1px solid var(--warn-line); }

  table.list { width:100%; border-collapse:collapse; font-size:13.2px; }
  table.list th { text-align:left; font-size:11.5px; color:var(--ink-faint); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
  table.list td { padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
  table.list tr.clickable:hover td { background:var(--bg); cursor:pointer; }
  .filter-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:nowrap; align-items:center; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .filter-bar::-webkit-scrollbar { display:none; }
  .chip-filter { padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:12.6px; font-weight:700; color:var(--ink-soft); flex-shrink:0; }
  .chip-filter.active { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }

  .toast { background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:8px; font-size:13px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.18); max-width:340px; }
  .toast.mail { background:var(--proto-ink); }

  .settings-tabs { display:flex; gap:6px; margin-bottom:18px; flex-wrap:nowrap; overflow-x:auto; border-bottom:1px solid var(--line); padding-bottom:12px; scrollbar-width:none; }
  .settings-tabs::-webkit-scrollbar { display:none; }
  .settings-tab { background:none; border:1px solid var(--line); padding:7px 13px; border-radius:999px; cursor:pointer; font-weight:700; font-size:12.6px; color:var(--ink-soft); flex-shrink:0; }
  .settings-tab.active { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }

  .people-row, .step-row, .field-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .people-row::-webkit-scrollbar, .step-row::-webkit-scrollbar, .field-row::-webkit-scrollbar { display:none; }
  .people-row:first-child, .step-row:first-child, .field-row:first-child { border-top:none; }
  .people-row .pname { font-weight:700; font-size:13.4px; white-space:nowrap; } .people-row .pmeta { font-size:11.8px; color:var(--ink-faint); white-space:nowrap; }
  .grow { flex:1; min-width:140px; }
  .step-num { width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .reorder-btns { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
  .reorder-btns button { border:none; background:none; cursor:pointer; color:var(--ink-faint); font-size:11px; padding:0; line-height:1; }
  .reorder-btns button:hover { color:var(--ink); }
  .reorder-btns button:disabled { opacity:0.3; cursor:not-allowed; }
  .icon-btn { flex-shrink:0; }
  .field-type-tag { font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:6px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); text-transform:uppercase; white-space:nowrap; }
  
  .inline-add { background:var(--bg); border:1px dashed var(--line); border-radius:10px; padding:16px; margin-top:12px; }
  .toggle-row { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.2px; margin-bottom:12px; }
  .checkline { display:flex; align-items:center; gap:6px; font-size:12.6px; font-weight:700; color:var(--ink-soft); }
  .checkline input { width:auto; }

  .sidebar-backdrop { display:none; }
  .mobile-close-btn { display:none; position:absolute; right:10px; top:12px; background:none; border:none; color:var(--brand-ink); font-size:20px; cursor:pointer; padding:4px; line-height:1; }

  @media (max-width:860px) {
    #sidebar { position:fixed; left:0; top:0; bottom:0; z-index:90; transform:translateX(-100%); transition:transform .2s ease; }
    #sidebar.open { transform:translateX(0); }
    .sidebar-backdrop.open { display:block; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:80; }
    .mobile-close-btn { display:block; }
    #content { padding:20px 16px 60px; }
    #topbar { padding:12px 16px; gap: 8px; }
    #topbar h1 { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .user-chip { border:none; padding:0; background:transparent; }
    .user-chip .who { display:none; }
    .user-chip .initial { width:32px; height:32px; font-size:13px; }
    .kv { grid-template-columns:48% 52%; }
  }
  @media (max-width: 480px) {
    .kv { grid-template-columns: 1fr; gap: 2px; margin-bottom: 12px; }
    .kv .v { text-align: left; }
    #modal-backdrop { padding: 16px 12px; }
    #modal { padding: 20px; }
    .home-main { padding-top: 8px; }
    .hero-title { font-size: 24px; }
  }
  .menu-btn { display:none; }
  @media (max-width:860px) { .menu-btn { display:flex; width:36px;height:36px; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); background:var(--surface); cursor:pointer; } }

  /* New Login & Landing Enhancements */
  @media (max-width: 768px) {
    .login-sidebar { display: none !important; }
  }
  .whistleblower-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--danger-ink);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(162, 59, 44, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 100;
  }
  .whistleblower-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(162, 59, 44, 0.5);
  }

  @media (max-width: 768px) {
    table.list, table.list tbody { display: block; width: 100%; }
    table.list thead { display: none; }
    table.list tr { 
      display: flex; 
      flex-direction: column; 
      background: var(--surface); 
      border: 1px solid var(--line); 
      border-radius: 12px; 
      margin-bottom: 16px; 
      padding: 16px; 
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    table.list tr.clickable:hover td { background: transparent; }
    table.list td { 
      display: flex; 
      justify-content: space-between; 
      align-items: flex-start; 
      padding: 8px 0; 
      border: none; 
      border-bottom: 1px solid var(--line); 
      white-space: normal;
      font-size: 13.5px;
      text-align: right;
      gap: 12px;
    }
    table.list td[data-label="Description"], table.list td[data-label="Detail Description"] {
      flex-direction: column;
      text-align: left;
      background: transparent;
      padding: 12px 0 8px;
      margin-top: 0;
      border-radius: 0;
      width: 100%;
    }
    table.list td[data-label="Description"]::before, table.list td[data-label="Detail Description"]::before {
      margin-bottom: 6px;
    }
    table.list td:last-child { border-bottom: none; }
    table.list td::before { 
      content: attr(data-label); 
      font-size: 12px; 
      color: var(--ink-faint); 
      font-weight: 700; 
      flex-shrink: 0; 
      width: 90px;
      text-align: left;
    }
  }

  @keyframes popIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes drawCheck {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  
  .landing-wrapper {
    min-height: 100vh;
    background: radial-gradient(circle at top center, var(--surface) 0%, var(--bg) 100%);
    position: relative;
    overflow: hidden;
  }
  .landing-wrapper::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 300px;
    background: var(--accent);
    filter: blur(150px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
  }
  .home-header {
    position: relative;
    z-index: 10;
    padding: 16px 24px;
    display: flex;
    align-items: center;
  }
  .home-main {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 16px 20px 80px;
  }