@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300&family=Oxanium:wght@200..800&display=swap');

 :root {
      --bg0: #0e1117;
      --bg1: #161b22;
      --bg2: #1c2333;
      --bg2h: #232b3e;
      --br0: #2a3244;
      --br1: #3a4560;
      --t1: #e6edf3;
      --t2: #8b949e;
      --t3: #8b949e;
      /* --t3: #636e7b; */
      --ta: #0e1117;
      --cy: #00bcd4;
      --cyg: rgba(0, 188, 212, .08);
      --ok: #4caf50;
      --okg: rgba(76, 175, 80, .1);
      --warn: #ff9800;
      --warng: rgba(255, 152, 0, .1);
      --err: #ef5350;
      --errg: rgba(239, 83, 80, .1);
      --pur: #8b5cf6;
      --purg: rgba(139, 92, 246, .1);
      --ff: "Oxanium", sans-serif;
      --fm: "Oxanium", sans-serif;
      --r1: 6px;
      --r2: 8px;
      --r3: 12px;
      --sidebar-w: 240px;
      --header-h: 52px
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    body {
      font-family: var(--ff);
      background: var(--bg0);
      color: var(--t1);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5
    }

    ::-webkit-scrollbar {
      width: 5px
    }

    ::-webkit-scrollbar-thumb {
      background: var(--br0);
      border-radius: 3px
    }

    .form-control,
    .form-select {
      background: var(--bg2);
      border: 1px solid var(--br0);
      color: var(--t1);
      font-family: var(--ff);
      font-size: .88rem;
      padding: 7px 10px;
      font-weight:500;
    }

    .form-control:focus,
    .form-select:focus {
      background: var(--bg2);
      border-color: var(--cy);
      box-shadow: 0 0 0 2px rgba(0, 188, 212, .12);
      color: var(--t1)
    }

    .form-control::placeholder {
      color: var(--t3)
    }

    .form-label {
      font-size: .74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--t3);
      margin-bottom: 4px
    }

    .modal-content {
      background: var(--bg1);
      border: 1px solid var(--br0);
      border-radius: var(--r3);
      color: var(--t1)
    }

    .modal-header {
      border-bottom: 1px solid var(--br0);
      padding: 14px 20px
    }

    .modal-header .modal-title {
      font-size: 1rem;
      font-weight: 700
    }

    .modal-header .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%)
    }

    .modal-body {
      padding: 16px 20px
    }

    .modal-footer {
      border-top: 1px solid var(--br0);
      padding: 12px 20px
    }

    .table {
      color: var(--t1);
      margin: 0;
      --bs-table-bg: transparent;
      --bs-table-border-color: var(--br0);
      --bs-table-hover-bg: var(--bg2);
      --bs-table-striped-bg: transparent;
      border-color: var(--br0)
    }

    .table th {
      font-size: .9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--t1);
      border-bottom: 1px solid var(--br0);
      padding: 8px 14px;
      white-space: nowrap
    }

    .table td {
      padding: 9px 14px;
      font-size: .86rem;
      border-bottom: 1px solid rgba(42, 50, 68, .5);
      vertical-align: middle;
      color: var(--t3)
    }

    .table tbody tr:hover td {
      background: var(--bg2)
    }
    .hdr {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-h);
      background: var(--bg1);
      border-bottom: 1px solid var(--br0);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      z-index: 100
    }

    .hdr-left {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .hdr-brand {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .hdr-brand span {
      color: var(--cy)
    }

    .hdr-brand small {
      font-size: .6rem;
      font-weight: 600;
      color: var(--t2);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-left: 4px;
      padding: 2px 6px;
      background: var(--bg2);
      border-radius: 3px
    }

    .hdr-toggle {
      width: 32px;
      height: 32px;
      border-radius: var(--r1);
      background: transparent;
      border: 1px solid var(--br0);
      color: var(--t2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .hdr-toggle:hover {
      background: var(--bg2)
    }

    .hdr-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--cy);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .68rem;
      font-weight: 700;
      color: var(--ta);
      cursor: pointer
    }

    .profile-wrap {
      position: relative
    }

    .profile-dd {
      position: absolute;
      top: 42px;
      right: 0;
      background: var(--bg1);
      border: 1px solid var(--br0);
      border-radius: var(--r2);
      min-width: 180px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
      display: none;
      z-index: 200;
      overflow: hidden
    }

    .profile-dd.show {
      display: block
    }

    .profile-dd-hdr {
      padding: 12px 14px;
      border-bottom: 1px solid var(--br0);
      font-size: .84rem;
      font-weight: 600;
      color: var(--t1)
    }

    .profile-dd-hdr span {
      display: block;
      font-size: .74rem;
      color: var(--t3);
      font-weight: 400;
      margin-top: 2px
    }

    .profile-dd-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: .78rem;
      color: var(--t2);
      cursor: pointer;
      transition: .15s;
      border: none;
      background: none;
      width: 100%;
      font-family: var(--ff);
      text-align: left
    }

    .profile-dd-item:hover {
      background: var(--bg2);
      color: var(--t1)
    }

    .profile-dd-item.danger {
      color: var(--err)
    }

    .profile-dd-item.danger:hover {
      background: rgba(239, 83, 80, .12)
    }

    .sidebar {
      position: fixed;
      top: var(--header-h);
      left: 0;
      bottom: 0;
      width: var(--sidebar-w);
      background: var(--bg1);
      border-right: 1px solid var(--br0);
      overflow-y: auto;
      z-index: 90;
      transition: width .25s
    }

    .sidebar.collapsed {
      width: 60px
    }

    .sidebar.collapsed .nav-lbl,
    .sidebar.collapsed .nav-hdr {
      display: none
    }

    .sidebar.collapsed .nav-item {
      justify-content: center;
      padding: 10px
    }

    .nav-hdr {
      font-size: .58rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--t3);
      padding: 16px 16px 6px
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      color: var(--t2);
      cursor: pointer;
      transition: .15s;
      border-left: 3px solid transparent;
      font-size: .88rem;
      font-weight: 500;
      text-decoration: none
    }

    .nav-item:hover {
      color: var(--t1);
      background: var(--bg2)
    }

    .nav-item.on {
      background: var(--cyg);
      border-left-color: var(--cy);
      color: var(--cy)
    }

    .nav-item svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0
    }