:root{
    --blue-950:#0b2a56;
    --blue-900:#0f3670;
    --blue-800:#144083;
    --blue-700:#1b4fa1;
    --blue-600:#2b63b8;
  
    --orange-500:#ff8a00;
    --orange-600:#f07800;
  
    --bg:#f4f7fc;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#5b6b82;
  
    --border:#e4ebf5;
    --shadow: 0 10px 25px rgba(2, 6, 23, .08);
    --radius:14px;
    --radius2:12px;
  
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  
  #statsCards{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
  }
  
  @media (max-width: 1200px){
    #statsCards{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 700px){
    #statsCards{
      grid-template-columns:1fr;
    }
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--text);
    background: radial-gradient(1200px 800px at 30% -10%, rgba(43,99,184,.20), transparent 55%),
                radial-gradient(900px 700px at 90% 10%, rgba(255,138,0,.10), transparent 55%),
                var(--bg);
  }
  
  /* Layout */
  .layout{
    min-height:100vh;
    display:grid;
    grid-template-columns: 290px 1fr;
  }
  
  /* Sidebar */
  .sidebar{
    background: linear-gradient(180deg, var(--blue-600), var(--blue-950));
    color:#fff;
    padding:14px;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    gap:12px;
    border-right: 1px solid rgba(255,255,255,.12);
  }
  
  .sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 8px 0 8px;
  }
  
  .brand{
    display:flex;
    gap:12px;
    align-items:center;
    text-decoration:none;
    color:#fff;
    min-width:0;
  }
  .brand-logo{
    width:38px;
    height:38px;
    border-radius:10px;
    background: rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.18);
    object-fit:contain;
  }
  .brand-fallback{
    width:38px;
    height:38px;
    border-radius:10px;
    background: rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    display:grid;
    place-items:center;
    font-weight:900;
  }
  .brand-text{ min-width:0; }
  .brand-title{ font-weight:900; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-sub{ font-size:12px; opacity:.85; }
  
  .menu{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:6px;
  }
  
  .menu-sep{
    height:1px;
    background: rgba(255,255,255,.14);
    margin:6px 0;
  }
  
  /* .menubtn{
    width:100%;
    border:none;
    background: transparent;
    color: rgba(255,255,255,.92);
    padding:11px 12px;
    border-radius:12px;
    cursor:pointer;
    text-align:left;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:.1px;
    transition:.15s ease;
  }
  .menubtn:hover{
    background: rgba(255,255,255,.10);
  }
  .menubtn.active{
    background: rgba(255,255,255,.16);
    outline: 2px solid rgba(255,138,0,.35);
    box-shadow: 0 0 0 4px rgba(255,138,0,.10) inset;
  } */
  .micon{
    width:26px;
    height:26px;
    border-radius:10px;
    background: rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    font-size:14px;
  }
  
  .sidebar-foot{
    margin-top:auto;
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  /* Main */
  .main{
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  
  /* Topbar */
  .topbar{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 16px;
    background: linear-gradient(180deg, rgba(43,99,184,1), rgba(27,79,161,1));
    color:#fff;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .topbar-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  .topbar-title{ min-width:0; }
  .t1{ font-weight:900; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .t2{ font-size:12px; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  
  /* Content */
  /* .content{
    padding:18px;
    min-width:0;
  }
  .page{
    max-width: 1400px;
  } */
  /* .card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  } */
  .cardhead{
    padding:16px 16px 10px 16px;
    border-bottom:1px solid var(--border);
  }
  .cardhead h2{
    margin:0;
    font-size:16px;
    letter-spacing:.2px;
  }
  .cardhead p{ margin:6px 0 0 0; }
  
  .grid{
    padding:16px;
    display:grid;
    gap:14px;
  }
  .actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  
  /* Toolbars */
  .toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:12px;
  }
  .tool-left, .tool-right{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  
  /* Inputs */
  label{ font-size:12px; color:var(--muted); display:block; margin:0 0 6px 2px; }
  .input, .select, textarea{
    width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    color:var(--text);
    outline:none;
    transition:.15s ease;
  }
  .input:focus, .select:focus, textarea:focus{
    border-color: rgba(43,99,184,.55);
    box-shadow: 0 0 0 4px rgba(43,99,184,.14);
  }
  textarea{
    min-height: 90px;
    resize: vertical;
    font-family: var(--mono);
    font-size:12px;
    line-height:1.5;
  }
  .select.small{ width:140px; }
  .mono{ font-family:var(--mono); }
  .muted{ color:var(--muted); font-size:12px; }
  .help{ color:var(--muted); font-size:12px; margin:6px 2px 0 2px; line-height:1.4; display:none; }
  
  /* Buttons */
  /* .btn{
    border:1px solid var(--border);
    background: #fff;
    color: var(--text);
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    font-weight:900;
    letter-spacing:.1px;
    transition:.15s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn:hover{
    border-color: rgba(2,6,23,.18);
    box-shadow: 0 6px 18px rgba(2,6,23,.08);
    transform: translateY(-1px);
  }
  .btn.primary{
    background: linear-gradient(180deg, var(--orange-500), var(--orange-600));
    color:#1b1408;
    border-color: rgba(255,138,0,.55);
  }
  .btn.danger{
    background:#fff;
    border-color: rgba(239,68,68,.35);
    color:#991b1b;
  } */
  .btn.ghost{
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,.92);
    box-shadow:none;
    transform:none;
  }
  .btn.ghost:hover{
    background: rgba(255,255,255,.12);
    border-color: transparent;
  }
  .btn.small{
    padding:8px 10px;
    font-size:12px;
    border-radius:10px;
  }
  .btn.full{ width:100%; justify-content:center; }
  
  /* Icon buttons */
  .iconbtn{
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color:#fff;
    padding:8px 10px;
    border-radius:12px;
    cursor:pointer;
    font-weight:900;
    transition:.15s ease;
  }
  .iconbtn:hover{ background: rgba(255,255,255,.16); }
  .sidebar-toggle{ display:none; }
  .sidebar-close{ display:none; }
  
  /* Status pill */
  .pill{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    font-size:12px;
  }
  .pill.light{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
  }
  .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239,68,68,.18);
  }
  .dot.ok{
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  }
  
  /* Table */
  .tablewrap{
    padding:12px 16px 0 16px;
    overflow:auto;
  }
  table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    min-width: 780px;
  }
  thead th{
    text-align:left;
    font-size:12px;
    color:var(--muted);
    padding:10px 12px;
    background: #f7f9fe;
    border-bottom:1px solid var(--border);
    font-weight:900;
  }
  tbody td{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    vertical-align:top;
  }
  tbody tr:hover td{
    background:#fbfdff;
  }
  
  /* Badges */
  .badge{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#f8fbff;
    font-size:12px;
    font-weight:900;
  }
  .badge.ok{
    border-color: rgba(34,197,94,.30);
    background: rgba(34,197,94,.10);
  }
  .badge.off{
    border-color: rgba(239,68,68,.25);
    background: rgba(239,68,68,.08);
  }
  
  /* Pager */
  .pager{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 16px 16px 16px;
  }
  .pager-right{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }

  .audit-table{
    min-width: 1320px;
  }
  .audit-pager{
    padding:10px 0 0 0;
    border-top:1px solid var(--border);
    margin-top:10px;
  }
  .audit-attachments{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:180px;
    max-width:280px;
  }
  .audit-attachment{
    display:flex;
    justify-content:space-between;
    gap:10px;
    white-space:nowrap;
  }
  .audit-attachment > span:first-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .audit-attachment > span:first-child span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  /* Hint */
  .hint{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    border:1px dashed var(--border);
    background:#fbfcff;
    color:var(--muted);
    font-size:12px;
  }
  .kbd{
    font-family:var(--mono);
    font-size:11px;
    padding:2px 6px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    font-weight:900;
  }
  .hr{
    height:1px;
    background: var(--border);
    margin:12px 0;
  }
  
  /* Modal */
  dialog{
    border:none;
    padding:0;
    width:min(860px, calc(100% - 24px));
    border-radius:18px;
    background:transparent;
  }
  dialog::backdrop{
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(4px);
  }
  .modal{
    background: #fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .modal-head{
    background: linear-gradient(180deg, rgba(43,99,184,.10), rgba(255,138,0,.06));
    padding:14px 16px;
    border-bottom:1px solid var(--border);
  }
  .modal-head-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .modal-head h2{
    margin:0;
    font-size:14px;
    letter-spacing:.2px;
  }
  .modal-body{ padding:16px; }
  .modal-foot{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:14px 16px;
    border-top:1px solid var(--border);
    background:#fbfcff;
  }
  details{
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
    background:#fbfcff;
  }
  summary{
    cursor:pointer;
    font-weight:900;
    list-style:none;
  }
  summary::-webkit-details-marker{ display:none; }
  
  /* Toasts */
  .toastwrap{
    position:fixed;
    right:18px;
    bottom:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:9999;
  }
  .toast{
    max-width:420px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .toast .ticon{
    width:10px;
    height:10px;
    border-radius:50%;
    margin-top:5px;
    background: var(--blue-600);
    box-shadow:0 0 0 4px rgba(43,99,184,.14);
  }
  .toast.ok .ticon{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.14); }
  .toast.err .ticon{ background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.14); }
  .toast .ttext{ font-size:13px; line-height:1.35; }
  .toast .ttext b{ display:block; margin-bottom:2px; }
  .toast .tclose{
    margin-left:auto;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:14px;
    padding:2px 6px;
    color: var(--muted);
  }
  
  /* Responsive */
  .row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  @media (max-width: 980px){
    .row{ grid-template-columns: 1fr; }
    table{ min-width: 980px; } /* forces horizontal scroll; prevents squished table */
  }
  @media (max-width: 920px){
    .layout{ grid-template-columns: 1fr; }
    .sidebar{
      position:fixed;
      left:0;
      top:0;
      bottom:0;
      width: 290px;
      transform: translateX(-102%);
      transition: .18s ease;
      z-index:9998;
    }
    .sidebar.open{ transform: translateX(0); }
    .sidebar-toggle{ display:inline-flex; }
    .sidebar-close{ display:inline-flex; }
  }
  
  /* ---------- Mails ---------- */
.mail-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
  }

  .subject-regrab-component{
    margin-top:0;
  }

  .subject-regrab-textarea{
    min-height:130px;
    width:100%;
  }
  
  .mails-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    padding:10px 12px;
    border:1px solid var(--border, rgba(0,0,0,.08));
    border-radius:12px;
    background:rgba(255,255,255,.7);
  }
  
  .mail-card{
    border:1px solid var(--border, rgba(0,0,0,.08));
    background:rgba(255,255,255,.9);
    border-radius:16px;
    overflow:hidden;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .06);
  }
  
  .mail-card details{
    border:none;
    background:transparent;
    padding:0;
  }
  
  .mail-summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    background: linear-gradient(90deg, rgba(47,99,179,.10), rgba(242,140,40,.08));
  }
  
  .mail-summary::-webkit-details-marker{ display:none; }
  
  .mail-title{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .mail-title b{
    font-size:14px;
    color: var(--text, #0f172a);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mail-sub{
    font-size:12px;
    color: var(--muted, #64748b);
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  
  .mail-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
  }
  
  .mail-body{
    padding:14px;
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }
  
  .mail-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  @media (max-width: 980px){
    .mail-grid{ grid-template-columns: 1fr; }
  }
  
  .mail-block{
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.8);
  }
  
  .mail-block h4{
    margin:0 0 8px 0;
    font-size:12px;
    letter-spacing:.2px;
    color: var(--muted, #64748b);
    text-transform:uppercase;
  }
  
  .mail-pre{
    margin:0;
    white-space:pre-wrap;
    word-break:break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:12px;
    color: #0f172a;
    background: rgba(15, 23, 42, .04);
    border-radius:12px;
    padding:10px;
    max-height:280px;
    overflow:auto;
  }
  
  .mail-iframe{
    width:100%;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    background:white;
    height:320px;
  }

  .pdf-preview{
    width:100%;
    height:min(720px, 70vh);
    min-height:420px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    background:#fff;
  }

  .raw-json-details{
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    background:rgba(255,255,255,.8);
    padding:10px 12px;
  }
  
  .attach-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .attach-item{
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.85);
  }
  
  .attach-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .attach-head .muted{
    font-size:12px;
  }
  
  .attach-preview{
    margin-top:10px;
    display:none;
  }
  .attach-preview.open{
    display:block;
  }
  
  .check{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    background:rgba(255,255,255,.6);
    user-select:none;
  }
  .check input{ transform: translateY(1px); }
  

  /* topbar: make primary small button look like a nice action chip */
.topbar-right .btn.primary.small,
.topbar-right #btnForceFetch.btn.primary.small{
  border-radius: 999px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(90deg, #2f63b3, #f28c28);
  color: #fff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, .12);
}
.topbar-right .btn.primary.small:hover{
  filter: brightness(1.04);
}
.topbar-right .btn.primary.small:disabled{
  opacity: .7;
  cursor: not-allowed;
}

      body {
        margin: 0;
        padding: 0;
        background: #eceff1;
      }
      .app-content {
        margin-top: 40px;
        padding: 20px;
        padding-left: 245px;
        width: 100%;
        height: 100%;
      }
      .navbar {
        background: #ffffff;
        border-bottom: 1px solid #e0e0e090;
        color: #263238;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 40px;
        z-index: 11;
      }
      .navbar .nav-brand {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
      }
      .navbar .nav-brand .sidebar-btn {
        width: 48px;
        height: 40px;
        border-radius: 0;
        display: none;
        align-items: center;
        justify-content: center;
        color: #263238;
        background: transparent;
        border: none;
        opacity: 0.9;
        cursor: pointer;
        font-size: 16px;
      }
      .navbar .nav-brand .sidebar-btn:hover {
        background: rgba(229, 229, 229, 0.5647058824);
      }
      .navbar .nav-brand .logo {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .navbar .nav-brand .logo:hover {
        background: rgba(229, 229, 229, 0.5647058824);
      }
      .navbar .nav-brand .logo a {
        display: inline-block;
        font-size: 15px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        box-sizing: border-box;
        color: #263238;
        text-decoration: none;
      }
      .navbar .nav-utilities {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        padding-right: 20px;
      }
      .navbar .nav-utilities .pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.1);
        color: #263238;
        font-size: 14px;
      }
      .page-header {
        align-items: center;
        justify-content: space-between;
        display: flex;
        margin: 0 0 15px;
        padding: 5px 0.75em;
        box-shadow: 0 1px 1px rgba(50, 58, 70, 0.1);
        transition: all 0.3s ease;
        height: 38px;
        background-color: #ffffff;
      }
      .page-header .custom-breadcrumb {
        font-size: 14px;
        font-weight: 700;
        padding: 0;
      }
      .page-header .custom-breadcrumb .custom-breadcrumb-list {
        display: flex;
        align-items: center;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .page-header
        .custom-breadcrumb
        .custom-breadcrumb-list
        .custom-breadcrumb-item
        .custom-breadcrumb-link {
        color: #263238;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        cursor: pointer;
      }
      .page-header
        .custom-breadcrumb
        .custom-breadcrumb-list
        .custom-breadcrumb-item
        .custom-breadcrumb-text {
        color: #607d8b;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .left-sidebar {
        width: 225px;
        height: calc(100% - 40px);
        margin-top: 40px;
        background: #ffffff;
        border-right: 1px solid #e0e0e090;
        /* box-shadow:
          0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
          0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); */
        position: fixed;
        left: 0;
        top: 0;
        z-index: 12;
        /* transform: translateX(-102%); */
        transition: 0.18s ease;
        z-index: 9998;
      }
      /* .left-sidebar.open {
        transform: translateX(0);
      } */
      .left-sidebar .sidebar-header {
        display: flex;
        align-items: center;
      }
      .left-sidebar .sidebar-header .sidebar-btn {
        width: 48px;
        height: 40px;
        border-radius: 0;
        display: none;
        align-items: center;
        justify-content: center;
        color: #263238;
        background: transparent;
        border: none;
        opacity: 0.9;
        cursor: pointer;
        font-size: 16px;
      }
      .left-sidebar .sidebar-header .sidebar-btn:hover {
        background: rgba(229, 229, 229, 0.5647058824);
      }
      .left-sidebar .sidebar-header .logo {
        width: 100%;
        height: 100%;
        display: none;
        align-items: center;
        justify-content: center;
      }
      .left-sidebar .sidebar-header .logo:hover {
        background: rgba(229, 229, 229, 0.5647058824);
      }
      .left-sidebar .sidebar-header .logo a {
        display: inline-block;
        font-size: 15px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        box-sizing: border-box;
        color: #263238;
        text-decoration: none;
      }
      .left-sidebar-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100% - 40px);
      }
      .left-sidebar-content .pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.1);
        color: #263238;
        font-size: 14px;
      }

      .pp-sidebar-list {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .pp-sidebar-list .pp-sidebar-item-separator {
        height: 1px;
        background: #e0e0e0;
        margin: 6px 0;
      }
      .pp-sidebar-list .pp-sidebar-item .pp-sidebar-item-link {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        width: 100%;
        min-height: 32px;
        -webkit-user-drag: none;
        color: inherit;
        box-sizing: border-box;
        padding: 7px 15px;
        cursor: pointer;
        font-size: 14px;
        gap: 0.5rem;
        background: transparent;
        border: none;
        box-shadow: none;
        color: #263238;
      }
      .pp-sidebar-list .pp-sidebar-item .pp-sidebar-item-link:hover {
        background: #f0f0f0;
        color: #263238;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link:hover
        .pp-sidebar-item-link-icon {
        color: #263238;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link:hover
        .pp-sidebar-item-link-text {
        color: #263238;
      }
      .pp-sidebar-list .pp-sidebar-item .pp-sidebar-item-link.active {
        background: #f0f0f0;
        color: #263238;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link.active
        .pp-sidebar-item-link-icon {
        color: #263238;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link.active
        .pp-sidebar-item-link-text {
        color: #263238;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link
        .pp-sidebar-item-link-icon {
        font-size: 14px;
        color: #263238;
        line-height: 1;
        width: 20px;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link
        .pp-sidebar-item-link-icon
        svg {
        width: 15px;
        height: 15px;
      }
      .pp-sidebar-list
        .pp-sidebar-item
        .pp-sidebar-item-link
        .pp-sidebar-item-link-text {
        font-size: 14px;
        color: #263238;
        line-height: 1;
      }
      .pp-sidebar-list .pp-sidebar-item p {
        font-size: 12px;
        color: #263238;
        font-style: italic;
        opacity: 0.85;
        text-align: center;
        margin: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
      }
      /* Small */
      .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        min-height: 26px;
      }
      .btn-sm svg {
        width: 14px;
        height: 14px;
      }

      /* Medium (default) */
      .btn-md {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        height: 34px;
      }
      .btn-md svg {
        width: 16px;
        height: 16px;
      }

      /* Large */
      .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.25rem;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition:
          background-color 0.2s,
          box-shadow 0.2s;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        border-radius: 2px;
        line-height: 1;
      }
      .btn-primary {
        background: #37474f;
        border: 1px solid #37474f;
        color: #fff;
      }
      .btn-primary:hover {
        background: #263238;
        border: 1px solid #263238;
      }
      .btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: initial;
      }
      .btn-secondary {
        background: #919292;
        border: 1px solid #919292;
        color: #fff;
      }
      .btn-secondary:hover {
        background: #717272;
        border: 1px solid #717272;
      }
      .btn-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: initial;
      }
      .btn-ghost {
        background: transparent;
        border: none;
        color: #263238;
      }
      .btn-ghost:hover {
        background: #f5f5f5;
      }
      .card {
        background: #ffffff;
        border: 1px solid #e0e0e0;
      }
      .card .card-header {
        background: #f5f7f9;
        border-bottom: 1px solid #e7eaed;
        padding: 0.4rem 0.8rem;
        border-radius: 0;
      }
      .card .card-header h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #263238;
      }
      .card .card-body {
        padding: 0.8rem;
        border-radius: 0;
      }
      .toolbar {
        margin: 0;
      }
      .toolbar .tool-left {
        flex-wrap: nowrap;
      }
      .table-responsive {
        overflow: auto;
      }
      .table-responsive table {
        background: #ffffff !important;
        border: none !important;
        border-radius: 6px;
      }
      .table-responsive table thead tr th {
        border-top: none;
        padding: 0.5em 0.75em;
        padding-right: 1.5em;
        font-size: 14px;
        font-weight: 600;
        height: 36px;
        vertical-align: middle;
        background: #38414a;
        border-bottom: 1px solid #dcdfe6;
        color: #ffffff;
        white-space: nowrap;
      }
      .table-responsive table thead tr th:first-child {
        border-radius: 6px 0px 0px 0px;
      }
      .table-responsive table tbody tr td {
        vertical-align: middle;
        font-size: 14px;
        padding: 0.1em 0.75em;
        background: #ffffff;
        border-bottom: 1px solid #dcdfe6;
        color: #606266;
      }
      label {
        font-size: 12px;
        font-weight: 600;
        color: #263238;
        margin-bottom: 0.2rem;
      }
      .form-control {
        width: 100%;
        height: 34px;
        padding: 4px 10px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        background: #ffffff;
        color: #263238;
        transition: 0.2s all ease;
      }
      .form-control:hover {
        border-color: #409eff;
        outline: none;
      }
      .form-control:focus {
        border-color: #409eff;
        outline: none;
      }
      .directory-picker {
        display: grid;
        gap: 0.45rem;
        margin-top: 0.5rem;
      }
      .directory-picker-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
      }
      .directory-select {
        height: 170px !important;
        min-height: 170px;
        padding: 0.35rem;
        font-family: var(--mono);
      }
      .directory-select option {
        padding: 0.25rem 0.35rem;
      }
      dialog {
        border-radius: 0.5rem !important;
      }
      .modal {
        border-radius: 0.5rem !important;
      }
      .modal .modal-head {
        background: #f9fafb;
        border-bottom: 1px solid #dcdfe6;
        padding: 0.3rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
      }
      .modal .modal-head .iconbtn {
        color: #263238;
      }
      .mb-1{
        margin-bottom: .5rem;
      }