:root {
      --primary:#4CAF50;
      --primary-dark:#388E3C;
      --primary-light:#C8E6C9;
      --bg:#f9faf9;
      --card:#ffffff;
      --text:#1f2937;
      --muted:#6b7280;
      --border:#e5e7eb;
      --warning:#f59e0b;
      --success:#16a34a;
      --info:#3b82f6;
      --sidebar:280px;
    }
    *{ box-sizing:border-box; font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif; }
    body{ margin:0; background:var(--bg); color:var(--text); min-height:100vh; }
    a{ color:var(--primary-dark); text-decoration:underline; cursor:pointer; }

    /* Login */
    .loginBg {
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      background: linear-gradient(135deg, rgba(76,175,80,1) 0%, rgba(56,142,60,1) 100%);
    }
    .loginCard {
      width:min(980px, 96vw);
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap:16px;
      background:rgba(255,255,255,.95);
      border:1px solid rgba(255,255,255,.35);
      border-radius:18px;
      box-shadow: 0 18px 60px rgba(0,0,0,.25);
      overflow:hidden;
    }
    @media (max-width: 980px) { .loginCard { grid-template-columns: 1fr; } }
    .loginLeft { padding:22px; background: rgba(255,255,255,.92); }
    .logoWrap {
      display:inline-block;
      background:#fff;
      border-radius:14px;
      padding:10px 12px;
      border:1px solid var(--border);
      box-shadow: 0 10px 24px rgba(0,0,0,.10);
    }
    .logoImg { width:220px; height:auto; display:block; }
    .loginTitle { margin:16px 0 6px; font-size:26px; font-weight:900; color: var(--primary-dark); }
    .loginSub { margin:0; color: var(--muted); line-height:1.5; font-size:14px; }
    .loginRight { padding:22px; background: rgba(249,250,249,.9); border-left:1px solid rgba(229,231,235,.9); }
    @media (max-width: 980px) { .loginRight { border-left:none; border-top:1px solid rgba(229,231,235,.9); } }

    /* App layout */
    .app{ display:flex; min-height:100vh; }
    .sidebar{ width:var(--sidebar); background:var(--card); box-shadow:2px 0 10px rgba(0,0,0,.08); display:flex; flex-direction:column; }

    .brand{ padding:18px 18px 12px; border-bottom:1px solid var(--border); }
    .brandRow{ display:flex; align-items:center; gap:12px; }
    .brandLogoCard{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px 10px; box-shadow:0 10px 24px rgba(0,0,0,.10); }
    .brandLogo{ width:170px; height:auto; display:block; }
    .brandSub{ margin-top:10px; color:var(--muted); font-size:12px; line-height:1.4; }
    .nav{ list-style:none; margin:0; padding:10px 0; flex:1; }
    .navItem{ padding:12px 18px; display:flex; gap:10px; align-items:center; cursor:pointer; border-left:4px solid transparent; }
    .navItem:hover{ background:#f3f4f6; }
    .navItem.active{ background:var(--primary-light); border-left-color:var(--primary); color:var(--primary-dark); font-weight:900; }
    .sideFooter{ padding:16px 18px; border-top:1px solid var(--border); }
    .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#f3f4f6; border:1px solid var(--border); font-size:12px; color:#374151; font-weight:800; }
    .main{ flex:1; padding:26px; overflow:auto; }
    .header{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--primary); }
    .title{ margin:0; font-size:26px; color:var(--primary-dark); font-weight:900; }
    .muted{ color:var(--muted); font-size:13px; line-height:1.4; }
    .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .card{ background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.06); padding:18px; margin-bottom:14px; }
    .cardTitle{ margin:0 0 10px 0; font-size:15px; font-weight:900; color:#0f172a; }

    /* Compensation page */