body {
      background-color: #121212;
      color: #f0f0f0;
	  overflow-x: hidden;
    }
  #sidebarNav .nav-link {
    transition: background 0.2s ease;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
  }

  #sidebarNav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
  }

  #sidebarNav .nav-link.active {
    background-color: #198754; /* Bootstrap success */
    color: white !important;
    font-weight: 600;
  }
  
  
  #bottomNavbar .nav-link {
    transition: background-color 0.2s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
  }

  #bottomNavbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
  }

  #bottomNavbar .nav-link.active {
    color: #fff !important;
    background-color: #198754; /* success color */
    font-weight: 600;
  }

  #bottomNavbar .nav-link small {
    font-size: 0.75rem;
  }

    #sidebar {
      width: 220px;
      transition: all 0.3s ease;
      z-index: 1030;
    }

    #sidebar.collapsed {
      margin-left: -220px;
    }

    #main-content {
      margin-left: 220px;
      transition: all 0.3s ease;
    }

    #main-content.full {
      margin-left: 0;
    }

    @media (max-width: 768px) {
      #sidebar {
        position: fixed;
        height: 100vh;
        top: 0;
        left: 0;
		display: none !important;
      }

      #sidebar.collapsed {
        margin-left: -220px;
      }

      #main-content {
        margin-bottom: 80px;
        margin-left: 0;
        overflow-x: hidden;
      }
    }
    .card {
      background-color: #1e1e1e;
      border: none;
    }
    .card-title {
      color: #fff;
    }
    .navbar {
      background-color: #1f1f1f;
    }
    .modal-content {
      background-color: #1e1e1e;
      color: #fff;
    }
	.sidebar {
	  height: 100vh;
	  transition: width 0.3s ease;
	  background-color: #343a40;
      }
      .sidebar.collapsed {
        width: 60px;
      }
      .sidebar.expanded {
        width: 200px;
      }
      .sidebar .nav-link {
        color: #ddd;
        white-space: nowrap;
    border-radius: 8px;
      }
      .sidebar .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      .sidebar .icon-only {
        text-align: center;
      }
      .sidebar.collapsed .label {
        display: none;
      }
      .main-content {
        transition: margin-left 0.3s ease;
      }
.sidebar.collapsed a i.bi {
    font-size: 25px;
    margin: auto;
}
.sidebar.expanded a i.bi {
    font-size: 25px;
    margin: 0 10px;
}
.bi-box-arrow-right::before {
    content: "\f1c3";
    font-size: 25px;
}
  .card-icon {
    animation: rotateIcon 6s linear infinite;
    opacity: 0.3;
    position: absolute;
    right: -20px;
    top: 10px;
    width: 70px;
    height: 70px;
    font-size: 80px;
    transform: rotate(20deg);
  }

  .dashboard-card {
    background: linear-gradient(145deg, #1e1e1e, #292929);
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    color: #f8f9fa;
    overflow: hidden;
  }

  .dashboard-card .card-body h3 {
    margin-top: 10px;
  }

/* Flat, minimal application theme */
:root { --app-bg:#f4f6f8; --app-surface:#fff; --app-surface-muted:#edf1f3; --app-text:#182025; --app-muted:#65737d; --app-line:#d9e0e4; --app-primary:#087f5b; --app-primary-strong:#056344; --app-danger:#c92a2a; --app-shadow:0 12px 32px rgba(23,35,42,.10); }
[data-theme="dark"] { --app-bg:#101517; --app-surface:#182024; --app-surface-muted:#202a2f; --app-text:#edf4f3; --app-muted:#a7b7b8; --app-line:#344247; --app-primary:#38c995; --app-primary-strong:#57dda9; --app-danger:#ff8787; --app-shadow:0 12px 32px rgba(0,0,0,.28); }
* { border-radius:0 !important; }
body { background:var(--app-bg); color:var(--app-text); }
.card,.modal-content,.navbar,.dropdown-menu { background:var(--app-surface); color:var(--app-text); border:1px solid var(--app-line) !important; box-shadow:none; }
.card-header,.card-footer { background:var(--app-surface-muted) !important; color:var(--app-text) !important; border-color:var(--app-line) !important; }
.card-title,h1,h2,h3,h4,h5,h6,.form-label { color:var(--app-text); }.text-muted,.text-secondary { color:var(--app-muted) !important; }.bg-dark,.bg-black { background:var(--app-surface) !important; color:var(--app-text) !important; }
.list-group-item,.table { --bs-table-bg:var(--app-surface); --bs-table-color:var(--app-text); --bs-table-border-color:var(--app-line); --bs-table-striped-bg:var(--app-surface-muted); --bs-table-hover-bg:var(--app-surface-muted); color:var(--app-text) !important; background:var(--app-surface); border-color:var(--app-line); }
.form-control,.form-select,.input-group-text { color:var(--app-text); background:var(--app-surface); border-color:var(--app-line); }.form-control:focus,.form-select:focus { color:var(--app-text); background:var(--app-surface); border-color:var(--app-primary); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--app-primary) 20%,transparent); }
.btn { font-weight:600; letter-spacing:.01em; }.btn-success { --bs-btn-bg:var(--app-primary); --bs-btn-border-color:var(--app-primary); --bs-btn-hover-bg:var(--app-primary-strong); --bs-btn-hover-border-color:var(--app-primary-strong); }.btn-outline-danger { color:var(--app-danger); border-color:var(--app-danger); }
.sidebar { background:var(--app-surface) !important; border-right:1px solid var(--app-line); }.sidebar .nav-link,#sidebarNav .nav-link,#bottomNavbar .nav-link { color:var(--app-muted) !important; padding:.7rem .75rem; transition:background .2s ease,color .2s ease; }.sidebar .nav-link:hover,#sidebarNav .nav-link:hover,#bottomNavbar .nav-link:hover { background:var(--app-surface-muted); color:var(--app-text) !important; text-decoration:none; }.sidebar .nav-link.active,#sidebarNav .nav-link.active,#bottomNavbar .nav-link.active { background:var(--app-primary); color:#fff !important; font-weight:700; }
#bottomNavbar { background:var(--app-surface) !important; border-color:var(--app-line) !important; box-shadow:0 -8px 24px rgba(0,0,0,.08); }.dashboard-card { background:var(--app-surface); border:1px solid var(--app-line) !important; box-shadow:none; color:var(--app-text); }.theme-toggle { width:31px; height:31px; display:inline-grid; place-items:center; }
.ui-select-native { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }.ui-select-trigger { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; text-align:left; color:var(--app-text); background:var(--app-surface); border:1px solid var(--app-line); padding:.375rem .75rem; }.ui-select-trigger:focus-visible,.ui-sheet-action:focus-visible,.ui-dialog-button:focus-visible { outline:3px solid color-mix(in srgb,var(--app-primary) 45%,transparent); outline-offset:2px; }
.ui-sheet-backdrop,.ui-dialog-backdrop { position:fixed; inset:0; z-index:1090; display:flex; align-items:end; background:rgba(8,15,18,.54); }.ui-sheet { width:min(100%,560px); max-height:82vh; overflow:auto; margin:auto auto 0; background:var(--app-surface); border-top:1px solid var(--app-line); box-shadow:var(--app-shadow); }.ui-sheet-header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--app-line); }.ui-sheet-title { font-weight:750; color:var(--app-text); }.ui-sheet-action { width:100%; padding:1rem; text-align:left; color:var(--app-text); background:var(--app-surface); border:0; border-bottom:1px solid var(--app-line); }.ui-sheet-action:hover,.ui-sheet-action[aria-selected="true"] { background:var(--app-surface-muted); color:var(--app-primary); }.ui-sheet-cancel { color:var(--app-danger); font-weight:700; }
.ui-dialog-backdrop { align-items:center; justify-content:center; padding:1rem; }.ui-dialog { width:min(100%,420px); background:var(--app-surface); border:1px solid var(--app-line); box-shadow:var(--app-shadow); }.ui-dialog-body { padding:1.25rem; }.ui-dialog-title { margin:0 0 .5rem; font-size:1.1rem; font-weight:750; }.ui-dialog-message { margin:0; color:var(--app-muted); white-space:pre-wrap; }.ui-dialog-actions { display:flex; justify-content:space-between; border-top:1px solid var(--app-line); }.ui-dialog-button { min-width:96px; padding:.8rem 1rem; border:0; border-left:1px solid var(--app-line); background:var(--app-surface); color:var(--app-text); font-weight:700; }.ui-dialog-button--primary { background:var(--app-primary); color:#fff; border-color:var(--app-primary); }

.app-navbar { position:fixed; top:0; right:0; left:220px; z-index:1020; padding:.75rem .75rem 0; background:var(--app-bg); }
.app-navbar__inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .9rem; background:var(--app-surface); border:1px solid var(--app-line); box-shadow:var(--app-shadow); }
.app-navbar__brand,.app-navbar__actions { display:flex; align-items:center; gap:.65rem; min-width:0; }
.app-navbar__logo { width:34px; height:34px; object-fit:cover; border-radius:50% !important; flex:0 0 auto; }
.app-navbar__title { margin:0; color:var(--app-text); font-size:clamp(1rem, 1.6vw, 1.35rem); line-height:1.2; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-navbar__actions { justify-content:flex-end; flex:0 0 auto; }
.app-profile-button { display:flex; align-items:center; gap:.5rem; padding:.2rem .45rem .2rem .2rem; color:var(--app-text); background:transparent; border:1px solid transparent; text-align:left; }
.app-profile-button:hover,.app-profile-button:focus { color:var(--app-text); background:var(--app-surface-muted); border-color:var(--app-line); }
.app-profile-avatar { display:grid; place-items:center; width:32px; height:32px; color:#fff; background:var(--app-primary); font-size:.75rem; font-weight:800; border-radius:50% !important; }
.app-profile-copy { display:flex; flex-direction:column; min-width:0; line-height:1.1; }
.app-profile-copy strong { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
.app-profile-copy small { color:var(--app-muted); font-size:.7rem; }
.app-profile-menu { min-width:220px; margin-top:.5rem !important; padding:.4rem; }
.app-profile-menu__identity { display:flex; flex-direction:column; gap:.2rem; padding:.55rem .75rem; }
.app-profile-menu__identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.app-profile-menu__identity span { color:var(--app-muted); font-size:.75rem; }
.app-logout-button { color:var(--app-danger) !important; font-weight:700; }
.main-content { padding-top:88px; }

@media (max-width:768px) {
  .app-navbar { left:0; padding:.55rem .65rem 0; }
  .app-navbar__inner { min-height:58px; padding:.5rem .6rem; gap:.5rem; }
  .app-navbar__logo { width:30px; height:30px; }
  .app-navbar__title { font-size:clamp(.92rem, 4.5vw, 1.1rem); }
  .app-navbar__actions { gap:.35rem; }
  .topup-button { width:31px; height:31px; padding:0; display:inline-grid; place-items:center; }
  .topup-button span,.app-profile-copy { display:none; }
  .app-profile-button { padding:.1rem; }
  .app-profile-button::after { display:none; }
  .main-content { padding-top:76px; }
}

/* Keep every scrollable surface aligned with the active app theme. */
html { scrollbar-color: var(--app-primary) var(--app-surface-muted); scrollbar-width: thin; }
* { scrollbar-color: var(--app-primary) var(--app-surface-muted); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--app-surface-muted); }
*::-webkit-scrollbar-thumb { background: var(--app-line); border: 2px solid var(--app-surface-muted); }
*::-webkit-scrollbar-thumb:hover { background: var(--app-primary); }
.ui-sheet, #terminal-output, .table-responsive { scrollbar-color: var(--app-primary) var(--app-surface-muted); scrollbar-width: thin; }
.terminal-command-search { position:relative; }
.terminal-command-search i { position:absolute; top:50%; left:.85rem; z-index:1; color:var(--app-muted); transform:translateY(-50%); }
.terminal-command-search input { padding-left:2.35rem; }
.terminal-command-list { display:grid; gap:.65rem; }
.terminal-command-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem; background:var(--app-surface); border:1px solid var(--app-line); }
.terminal-command-item code { display:block; margin:.25rem 0; color:var(--app-primary); font-size:.85rem; }
.terminal-command-item p { margin:0; color:var(--app-muted); font-size:.76rem; }
.terminal-command-category { color:var(--app-muted); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.terminal-command-actions { display:flex; flex:0 0 auto; gap:.4rem; }

@media (max-width:768px) {
  .terminal-command-item { align-items:flex-start; flex-direction:column; }
  .terminal-command-actions { width:100%; }
  .terminal-command-actions .use-terminal-command { flex:1; }
}

.history-page { max-width: 1280px; margin: 0 auto; padding: 1rem 0 2rem; }
.history-page__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.history-page__eyebrow { margin:0 0 .35rem; color:var(--app-primary); font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.history-page__heading h2 { margin:0; color:var(--app-text); font-size:clamp(1.35rem, 2.4vw, 2rem); }
.history-page__description { margin:.4rem 0 0; color:var(--app-muted); }
.history-toolbar { display:flex; gap:.75rem; margin-bottom:1rem; }
.history-search { position:relative; flex:1; }
.history-search i { position:absolute; top:50%; left:.85rem; z-index:1; color:var(--app-muted); transform:translateY(-50%); }
.history-search input { padding-left:2.35rem; }
.history-method { width:180px; }
.history-summary { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.65rem; color:var(--app-muted); font-size:.82rem; }
.history-summary i { color:var(--app-primary); }
.history-monthly-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.history-monthly-card { display:flex; align-items:center; gap:.75rem; min-height:92px; padding:1rem; background:var(--app-surface); border:1px solid var(--app-line); }
.history-monthly-card__icon { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:var(--app-primary); border-radius:50% !important; }
.history-monthly-card span,.history-monthly-card small { display:block; color:var(--app-muted); font-size:.72rem; }
.history-monthly-card strong { display:block; margin:.2rem 0; color:var(--app-text); font-size:1.1rem; }
.history-monthly-list { margin-bottom:1rem; background:var(--app-surface); border:1px solid var(--app-line); }
.history-monthly-list__heading { padding:.7rem 1rem; color:var(--app-muted); background:var(--app-surface-muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.history-monthly-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-top:1px solid var(--app-line); color:var(--app-text); font-size:.85rem; }
.history-monthly-row small { display:block; margin-top:.15rem; color:var(--app-muted); font-size:.7rem; }
.history-monthly-row strong { color:var(--app-primary); white-space:nowrap; }
.history-table-card { overflow:hidden; }
.history-table { margin:0; }
.history-table th { padding:.9rem 1rem; color:var(--app-muted); background:var(--app-surface-muted); border-bottom:1px solid var(--app-line); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.history-table td { padding:1rem; border-color:var(--app-line); color:var(--app-text); }
.history-table tbody tr:last-child td { border-bottom:0; }
.history-method-badge,.history-status { display:inline-block; padding:.28rem .5rem; font-size:.68rem; font-weight:800; white-space:nowrap; }
.history-method-badge { color:var(--app-muted); background:var(--app-surface-muted); }
.history-status { color:#087f5b; background:rgba(8,127,91,.12); }
.history-status--pending { color:#a15c00; background:rgba(245,159,0,.15); }
.history-status--failed { color:var(--app-danger); background:rgba(201,42,42,.12); }
.history-price { color:var(--app-primary) !important; font-weight:800; white-space:nowrap; }
.history-empty { padding:3rem 1rem !important; color:var(--app-muted) !important; text-align:center; }
.history-empty i { margin-bottom:.5rem; font-size:1.6rem; }
.history-empty--error { color:var(--app-danger) !important; }
.history-pagination { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; color:var(--app-muted); font-size:.8rem; }
.history-pagination button { display:inline-flex; align-items:center; gap:.4rem; }

@media (max-width:768px) {
  .history-page { padding-top:.5rem; }
  .history-page__heading { align-items:flex-start; }
  .history-page__description { font-size:.82rem; }
  .history-page__heading .btn span { display:none; }
  .history-page__heading .btn { width:38px; height:38px; padding:0; }
  .history-toolbar { flex-direction:column; }
  .history-method { width:100%; }
  .history-summary { font-size:.75rem; }
  .history-monthly-grid { grid-template-columns:1fr; }
  .history-pagination { justify-content:space-between; gap:.5rem; }
  .history-pagination button span { display:none; }
  .history-table thead { display:none; }
  .history-table,.history-table tbody,.history-table tr,.history-table td { display:block; width:100%; }
  .history-table tr { padding:.75rem 1rem; border-bottom:1px solid var(--app-line); }
  .history-table tr:last-child { border-bottom:0; }
  .history-table td { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.3rem 0; border:0; text-align:right !important; }
  .history-table td::before { color:var(--app-muted); content:attr(data-label); font-size:.7rem; font-weight:700; text-align:left; }
  .history-table td.history-empty { display:block; text-align:center !important; }
  .history-table td.history-empty::before { display:none; }
}