*{ box-sizing:border-box; }
    body{ margin:0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; line-height:1.5; letter-spacing:-0.011em; }
    a{ color:inherit; text-decoration:none; }

    .app{ display:grid; grid-template-columns: 260px 1fr; min-height:100vh; }
    .sidebar{
      background: linear-gradient(180deg, var(--panel), var(--panel2));
      color:#fff; padding:10px; position:sticky; top:0; height:100vh; overflow:hidden;
      border-right:1px solid rgba(255,255,255,.06);
      display:flex; flex-direction:column;
    }
    .brand{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; background: rgba(255,255,255,.06); margin-bottom: 8px; }
    .logo{ width:34px; height:34px; border-radius:10px; background: radial-gradient(circle at 30% 30%, #10b981, #059669); box-shadow: 0 10px 25px rgba(16,185,129,.35); }
    .brand b{ font-size: 15px; }
    .brand .small{ font-size:12px; opacity:.75; }

    /* Profile card in sidebar */
    .side-profile{
      display:flex; flex-direction:row; align-items:center; gap:12px;
      padding:14px 12px; border-radius:14px;
      background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      margin-bottom:8px; position:relative;
    }
    .side-profile-avatar{
      width:48px; height:48px; border-radius:50%;
      background:linear-gradient(135deg, rgba(16,185,129,.4), rgba(5,150,105,.6));
      display:flex; align-items:center; justify-content:center;
      font-size:18px; font-weight:800; color:#fff; letter-spacing:1px;
      cursor:pointer; position:relative; overflow:hidden;
      border:2px solid rgba(255,255,255,.15);
      transition:transform .2s, box-shadow .2s;
      flex-shrink:0;
    }
    .side-profile-avatar:hover{
      transform:scale(1.05); box-shadow:0 0 20px rgba(16,185,129,.4);
    }
    .side-profile-avatar img{
      width:100%; height:100%; object-fit:cover; border-radius:50%;
    }
    .side-profile-avatar .avatar-overlay{
      position:absolute; inset:0; background:rgba(0,0,0,.5);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity .2s; font-size:14px; cursor:pointer;
    }
    .side-profile-avatar:hover .avatar-overlay{ opacity:1; }
    .side-profile-name{ font-size:14px; font-weight:700; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .side-profile-role{ font-size:11px; opacity:.65; }
    .side-profile-brand{ font-size:9px; opacity:.4; }
    .side-profile-remove-avatar{
      position:absolute; top:4px; right:4px; width:18px; height:18px;
      border-radius:50%; border:none; background:rgba(239,68,68,.85); color:#fff;
      font-size:10px; font-weight:700; cursor:pointer; display:flex;
      align-items:center; justify-content:center;
      opacity:0; transition:opacity .2s;
    }
    .side-profile:hover .side-profile-remove-avatar{ opacity:1; }
    .side-profile-actions{ display:none; }

    /* Sidebar nav area — scrollable middle, profile+logout fixed */
    .side-nav-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-between; padding:4px 0; overflow-y:auto; scrollbar-width:none; }
    .side-nav-wrap::-webkit-scrollbar{ display:none; }

    .side-section{ margin-top:0; }
    .side-title{ font-size:10px; opacity:.45; padding:4px 10px; text-transform:uppercase; letter-spacing:.5px; }
    .navbtn{
      width:100%; text-align:left; display:flex; gap:10px; align-items:center;
      padding:9px 10px; border-radius: 10px; border:0; color:#fff; background: transparent;
      cursor:pointer; transition: .15s; font-size:14px;
    }
    .navbtn:hover{ background: rgba(255,255,255,.08); }
    .navbtn.active{ background: rgba(16,185,129,.35); outline:1px solid rgba(255,255,255,.08); }
    .subnav{ margin-left: 14px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.12);  display:none; }
    .subnav .navbtn{ padding:6px 8px; border-radius: 8px; font-size: 12px; }
    .navbtn .chev{ margin-left:auto; opacity:.7; font-size:12px; }
    .navbtn{ position:relative; }
    .nav-badge{
      margin-left:auto; min-width:18px; height:18px; padding:0 5px;
      border-radius:9px; font-size:10px; font-weight:800;
      display:inline-flex; align-items:center; justify-content:center;
      line-height:1; flex-shrink:0;
    }

    .ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; font-size:15px; }

    .userbox{
      padding:6px 10px; border-radius: 10px; background: rgba(255,255,255,.06);
      flex-shrink:0; margin-top:auto;
    }
    .userrow{ display:flex; align-items:center; gap:10px; }
    .avatar{ width:32px; height:32px; border-radius: 10px; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-weight:700; }
    .userbox .name{ font-size: 13px; font-weight: 700; }
    .userbox .role{ font-size:12px; opacity:.75; }

    .main{ display:flex; flex-direction:column; min-width:0; height:100vh; overflow:hidden; }
    .topbar{
      position:sticky; top:0; z-index:5; flex-shrink:0;
      background: rgba(246,247,251,.85); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .topbar-inner{
      max-width: 1500px; margin:0 auto; padding: 8px 14px;
      display:flex; gap:10px; align-items:center; min-width:0;
    }
    .crumb{ display:flex; flex-direction:column; min-width:0; }
    .crumb b{ font-size: 15px; }
    .crumb span{ font-size: 11px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .search{
      margin-left:auto;
      display:flex; gap:8px; align-items:center;
      min-width: 240px; max-width: 480px; width: 34vw;
    }
    .searchbox{
      flex: 1;
      display:flex; gap:6px; align-items:center;
      border:1px solid var(--border); background:#fff;
      padding:6px 10px; border-radius:999px; box-shadow: var(--shadow);
    }
    .searchbox input{
      border:0; outline:none; background:transparent; flex:1; min-width:0; font-size:13px;
    }
    .cashpill{
      display:flex; gap:6px; align-items:center;
      border:1px solid var(--border); background:#fff;
      padding:6px 10px; border-radius:999px; box-shadow: var(--shadow);
      white-space:nowrap;
    }
    .locpill{
      margin-left:auto;
      display:flex; gap:6px; align-items:center;
      border:1px solid var(--border); background:#fff;
      padding:6px 10px; border-radius:999px; box-shadow: var(--shadow);
      white-space:nowrap;
    }
    .topselect{
      border:0;
      outline:none;
      background:transparent;
      font-weight:700;
      padding:0 4px;
      max-width: 200px;
      font-size:13px;
    }
    .btn2.mini{ padding:5px 8px; border-radius:999px; font-size:12px; }
    .clickable-row:hover td{background:rgba(37,99,235,.03);transition:.15s}
    .clickable-row:active td{background:rgba(37,99,235,.06)}
    .act-label{font-size:11px;vertical-align:middle}
    @media(max-width:768px){ .act-label{display:none} }

    .cashpill b{ font-size: 13px; }
    .cashpill .dot{ width:7px; height:7px; border-radius:99px; background: var(--success); }
    .cashpill .muted{ color:var(--muted); font-size:11px; }

    .input, select, textarea{
      padding:8px 10px; border-radius: 10px; border:1px solid var(--border);
      font-size:13px;
      background:#fff; min-width: 0; max-width:100%; outline:none;
    }
    textarea{ min-width: 0; max-width:100%; min-height: 90px; resize: vertical; }
    .zero-muted{ color: var(--muted) !important; }

    .input:focus, select:focus, textarea:focus{
      border-color: rgba(16,185,129,.55); box-shadow: 0 0 0 4px rgba(16,185,129,.12);
    }

    .btn{ padding:8px 12px; border-radius: 8px; border:0; cursor:pointer; background: var(--accent); color:#fff; transition:.15s; white-space:nowrap; font-size: 13px; font-weight: 600; }
    .btn:hover{ background: var(--accent2); }
    .btn:disabled{ opacity:.55; cursor:not-allowed; filter: grayscale(.15); }
    .btn:disabled:hover{ background: var(--accent); }
    .btn-success:disabled{ opacity:.55; cursor:not-allowed; filter: grayscale(.15); }
    .btn-success:disabled:hover{ background: var(--success); }
    .btn-success{ background: var(--success); }
    .btn-success:hover{ background: #059669; }
    .btn2{ padding:8px 12px; border-radius: 8px; border:1px solid var(--border); cursor:pointer; background:#fff; white-space:nowrap; font-size: 13px; }
    .danger{ background: var(--danger) !important; }
    .btn2.danger{ color: var(--danger); border-color: rgba(239,68,68,.28); background:#fff !important; }

    .content{ max-width: 1500px; margin: 0 auto; padding: 10px 14px; width:100%; flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; box-sizing:border-box; }
    /* Fixed-header list pages: only table/list scrolls */
    .content.page-list{ overflow:hidden !important; overflow-x:hidden !important; overflow-y:hidden !important; display:flex; flex-direction:column; gap:10px; }
    .content.page-list > .card:last-of-type,
    .content.page-list > .list-scroll:last-child,
    .content.page-list > .list-scroll{ flex:1; min-height:0; overflow-y:auto; }
    .content.page-list thead th,
    .list-scroll thead th{
      position:sticky; top:0; z-index:3;
      background:#fff; box-shadow:0 1px 0 var(--border);
      border-bottom:none;
    }
    .content.page-list table,
    .list-scroll table{ border-collapse:separate; border-spacing:0; }
    /* Remove card padding so sticky thead sits at exact scroll top */
    .content.page-list > .card:last-of-type{ padding:0; }
    .list-scroll > .card{ padding:0; }
    .content.page-list > .card:last-of-type > .empty,
    .content.page-list > .card:last-of-type > .small,
    .list-scroll > .card > .empty,
    .list-scroll > .card > .small{ padding:16px; }
    .content.page-list > .card:last-of-type > table,
    .content.page-list > .list-scroll table,
    .list-scroll > .card > table{ width:100%; }
    html.theme-dark .content.page-list thead th,
    html.theme-dark .list-scroll thead th{ background:#1e293b; }
    h2{ font-size: 18px; margin: 0; font-weight: 600; }
    .grid2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:12px; }
    .grid3{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:12px; }
    .grid4{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:12px; }
    @media (max-width: 980px){
      .app{ grid-template-columns: 76px 1fr; }
      .hide-sm{ display:none; }
      .search{ min-width: 160px; width: 55vw; }
      .grid2, .grid3, .grid4{ grid-template-columns: 1fr; }
      .input{ min-width: 0; }
      .cashpill{ display:none; }
    }
    @media (max-width: 768px){
      .app{ grid-template-columns: 1fr; }
      .sidebar{ height:auto; position:relative; }
      .cashpill{ display:flex; }
    }

    .card{ background: var(--card); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; border: 1px solid rgba(17,24,39,.04); }
    .card h3{ font-size: 14px; margin: 0; font-weight: 600; }
    .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .right{ margin-left:auto; }
    .small{ font-size: 12px; color: var(--muted); }
    .badge{
      padding:3px 8px; border-radius: 999px; background:#eef2ff; display:inline-block;
      border: 1px solid rgba(37,99,235,.15); color: #1d4ed8; font-size: 11px; font-weight: 700;
    }
    .badge-success{ background:#d1fae5; border-color: rgba(16,185,129,.25); color: #059669; }
    .badge-warning{ background:#fef3c7; border-color: rgba(245,158,11,.25); color: #d97706; }
    .badge-danger{ background:#fee2e2; border-color: rgba(239,68,68,.25); color: #dc2626; }
    .pill{ padding:3px 8px; border-radius:999px; border:1px solid var(--border); font-size:11px; font-weight:800; display:inline-block; }
    .pill.green{ background:#d1fae5; border-color: rgba(16,185,129,.25); color:#059669; }
    .pill.gray{ background:#f3f4f6; border-color: rgba(107,114,128,.25); color:#6b7280; }
    table{ width:100%; border-collapse: collapse; font-size: 13px; }
    td, th{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align: middle; }
    th{ font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
    .link{ color: var(--accent2); font-weight: 700; cursor:pointer; }
    .link:hover{ text-decoration: underline; }
    .hr{ height:1px; background: var(--border); margin: 10px 0; }
    .kpi{ display:flex; gap:10px; flex-wrap:wrap; }
    .kpi .box{
      flex:1; min-width: 180px; padding:12px; border-radius: 12px;
      border: 1px solid var(--border); background: linear-gradient(180deg, #fff, #fbfbff);
    }
    .kpi .box b{ font-size: 20px; display: block; margin-bottom: 3px; }