:root {
      --p: #818cf8;
      --p2: #a78bfa;
      --green: #34d399;
      --green2: #6ee7b7;
      --red: #f87171;
      --amber: #fbbf24;
      --blue: #60a5fa;
      --radius: 14px;
      --sidebar-w: 240px;
      --topbar-h: 56px;
    }

    [data-theme="dark"] {
      --bg: #060912;
      --bg2: #0c1120;
      --bg3: #111827;
      --glass: rgba(255, 255, 255, .04);
      --glass2: rgba(255, 255, 255, .07);
      --border: rgba(255, 255, 255, .08);
      --border2: rgba(255, 255, 255, .13);
      --text: #f1f5f9;
      --text2: #94a3b8;
      --text3: #475569;
      --shadow: 0 8px 40px rgba(0, 0, 0, .55);
      --sidebar-bg: var(--bg2);
      --sidebar-text: var(--text);
      --sidebar-text2: var(--text2);
      --sidebar-text3: var(--text3);
      --sidebar-border: var(--border);
      --sidebar-glass: var(--glass);
      --sidebar-glass2: var(--glass2)
    }

    [data-theme="light"] {
      --bg: #f0f2f5;
      --bg2: #ffffff;
      --bg3: #f8f9fa;
      --glass: rgba(0, 0, 0, .03);
      --glass2: rgba(0, 0, 0, .06);
      --border: rgba(0, 0, 0, .10);
      --border2: rgba(0, 0, 0, .16);
      --text: #0f172a;
      --text2: #475569;
      --text3: #94a3b8;
      --shadow: 0 2px 12px rgba(0, 0, 0, .08);
      /* sidebar stays dark in light mode */
      --sidebar-bg: #0c1120;
      --sidebar-text: #f1f5f9;
      --sidebar-text2: #94a3b8;
      --sidebar-text3: #475569;
      --sidebar-border: rgba(255, 255, 255, .08);
      --sidebar-glass: rgba(255, 255, 255, .04);
      --sidebar-glass2: rgba(255, 255, 255, .07)
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      position: fixed;
      inset: 0;
      width: 100%;
      overscroll-behavior: none;
      display: flex
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 80vw 60vh at 20% -10%, rgba(99, 102, 241, .12) 0%, transparent 70%), radial-gradient(ellipse 60vw 50vh at 90% 110%, rgba(139, 92, 246, .10) 0%, transparent 70%);
      animation: bgPulse 12s ease-in-out infinite alternate
    }

    @keyframes bgPulse {
      from {
        opacity: .8
      }

      to {
        opacity: 1.2
      }
    }

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

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 99px
    }

    /* ══ SIDEBAR ══ */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      z-index: 100;
      color: var(--sidebar-text);
      transition: width .25s ease, transform .25s ease
    }

    /* ══ SIDEBAR COLLAPSE TOGGLE ══ */
    .sidebar-collapse-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin: 0 auto 12px;
      border-radius: 50%;
      border: 1px solid var(--sidebar-border);
      background: transparent;
      color: var(--sidebar-text3);
      cursor: pointer;
      transition: all .2s;
    }

    .sidebar-collapse-btn:hover {
      background: var(--sidebar-glass2);
      color: var(--sidebar-text);
      border-color: var(--sidebar-text3);
    }

    .sidebar-collapse-btn svg {
      transition: transform .3s ease;
    }

    /* ══ COLLAPSED SIDEBAR STATE ══ */
    .sidebar-collapsed .sidebar {
      width: 68px;
      overflow-x: hidden;
    }

    .sidebar-collapsed .main {
      /* flex: 1 + min-width: 0 handles width automatically; no margin needed */
    }

    .sidebar-collapsed .sidebar-brand div,
    .sidebar-collapsed .nav-group-title,
    .sidebar-collapsed .nav-item span {
      display: none;
    }

    .sidebar-collapsed .sidebar-brand {
      justify-content: center;
      padding: 16px 0;
    }

    .sidebar-collapsed .sidebar-brand img {
      margin: 0;
    }

    .sidebar-collapsed .sidebar-nav {
      padding: 8px;
    }

    .sidebar-collapsed .nav-group {
      margin-bottom: 8px;
    }

    .sidebar-collapsed .nav-item {
      justify-content: center;
      padding: 10px 0;
      gap: 0;
      border-radius: 10px;
      margin-bottom: 2px;
    }

    .sidebar-collapsed .nav-item:hover {
      transform: none;
    }

    .sidebar-collapsed .nav-item svg {
      margin: 0;
    }

    /* Tooltip on hover when collapsed */
    .sidebar-collapsed .nav-item {
      position: relative;
    }

    .sidebar-collapsed .nav-item::after {
      content: attr(data-label);
      position: absolute;
      left: calc(100% + 8px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--bg2);
      color: var(--text);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
      box-shadow: 0 4px 16px rgba(0,0,0,.25);
      border: 1px solid var(--border);
      z-index: 300;
    }

    .sidebar-collapsed .nav-item:hover::after {
      opacity: 1;
    }

    /* Collapse button: rotate chevrons when collapsed */
    .sidebar-collapsed .sidebar-collapse-btn svg {
      transform: rotate(180deg);
    }

    .sidebar-collapsed .sidebar-collapse-btn {
      margin: 0 auto 12px;
    }

    .btn-hamburger {
      display: none;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--glass);
      color: var(--text2);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      flex-shrink: 0
    }

    .btn-hamburger:hover {
      background: var(--glass2);
      color: var(--text);
      border-color: var(--border2)
    }

    .btn-hamburger svg {
      width: 20px;
      height: 20px
    }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 199;
      background: rgba(0, 0, 0, .5);
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity .25s
    }

    .sidebar-overlay.show {
      display: block;
      opacity: 1
    }

    .sidebar-brand {
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--sidebar-border)
    }

    .sidebar-brand h1 {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.3px;
      color: var(--sidebar-text)
    }

    .sidebar-brand span {
      font-size: 10px;
      color: var(--sidebar-text2);
      font-weight: 500
    }

    .sidebar-nav {
      flex: 1;
      padding: 12px 10px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .nav-group {
      margin-bottom: 16px
    }

    .nav-group-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--sidebar-text3);
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 6px 12px
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 16px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: var(--sidebar-text2);
      transition: all .15s;
      margin-bottom: 3px
    }

    .nav-item:hover {
      background: var(--sidebar-glass2);
      color: var(--sidebar-text);
      transform: translateX(2px)
    }

    .nav-item.active {
      background: rgba(99, 102, 241, .15);
      color: var(--p2);
      font-weight: 600
    }

    .nav-item svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      opacity: .7
    }

    .nav-item.active svg {
      opacity: 1
    }

    .nav-badge {
      margin-left: auto;
      background: var(--p);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      min-width: 22px;
      text-align: center
    }

    .sidebar-footer {
      padding: 14px;
      border-top: 1px solid var(--sidebar-border);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .sidebar-footer .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #7c3aed);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0
    }

    .sidebar-footer-info {
      flex: 1;
      min-width: 0
    }

    .sidebar-footer-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--sidebar-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .sidebar-footer-role {
      font-size: 10px;
      color: var(--sidebar-text2)
    }

    .sidebar-footer .btn-logout {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1px solid var(--sidebar-border);
      background: transparent;
      color: var(--sidebar-text3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      flex-shrink: 0
    }

    .sidebar-footer .btn-logout:hover {
      background: rgba(248, 113, 113, .12);
      color: var(--red);
      border-color: rgba(248, 113, 113, .3)
    }

    .sidebar-footer .btn-logout svg {
      width: 16px;
      height: 16px
    }

    /* ══ MAIN ══ */
    .main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: all .25s ease;
    }

    .main .topbar {
      height: var(--topbar-h);
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 16px;
      flex-shrink: 0;
      position: relative;
      z-index: 50
    }

    .topbar-title-text {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -.2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    /* Pages */
    .page {
      display: none
    }

    .page.active {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden
    }

    @media(max-width:768px) {
      .btn-hamburger {
        display: flex
      }

      .sidebar-collapse-btn {
        display: none !important
      }

      /* Reset collapsed state on mobile — sidebar uses hamburger instead */
      .sidebar-collapsed .sidebar {
        width: var(--sidebar-w);
        overflow-x: visible;
      }

      .sidebar-collapsed .main {
        margin-left: 0;
      }

      .sidebar-collapsed .sidebar-brand div,
      .sidebar-collapsed .nav-group-title,
      .sidebar-collapsed .nav-item span {
        display: block;
      }

      .sidebar-collapsed .sidebar-brand {
        justify-content: flex-start;
        padding: 20px;
      }

      .sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding: 11px 16px;
        gap: 12px;
      }

      .sidebar-collapsed .nav-item::after {
        display: none;
      }

      .sidebar-collapsed .sidebar-nav {
        padding: 12px 10px;
      }

      .sidebar-collapsed .nav-group {
        margin-bottom: 16px;
      }

      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-w);
        z-index: 200;
        transform: translateX(-100%)
      }

      .sidebar.open {
        transform: translateX(0)
      }

      .main {
        margin-left: 0
      }

      .main .topbar {
        padding: 0 12px;
        gap: 8px
      }

      /* Ensure confirm dialogs display on mobile */
      .modal-overlay {
        padding: 16px;
      }

      .modal {
        max-width: 100% !important;
      }

      .confirm-actions {
        flex-direction: column;
        gap: 8px;
      }
    }

    /* ══ LOGIN ══ */
    #login-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      height: 100dvh;
      width: 100%;
      background: #0a0f1a;
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 24px;
      z-index: 10;
    }

    #login-screen::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 600px 400px at 30% 20%, rgba(30, 58, 138, .18) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 70% 80%, rgba(79, 70, 229, .12) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .login-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 380px;
      background: rgba(15, 23, 42, .85);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 36px 32px 32px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .login-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 28px;
      text-align: center;
    }

    .login-brand-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
    }

    .login-brand-icon img {
      width: 44px;
      height: 44px;
      border-radius: 10px;
    }

    .login-brand h1 {
      font-size: 21px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 5px;
      text-transform: uppercase;
      margin-bottom: 3px;
      margin-right: -5px;
    }

    .login-brand p {
      font-size: 9px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      font-weight: 600;
      margin-right: -2.5px;
    }

    .field {
      margin-bottom: 12px;
    }

    .field label {
      display: none;
    }

    .field-wrap {
      position: relative;
    }

    .field-wrap svg {
      display: none;
    }

    .field input {
      width: 100%;
      height: 42px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(2, 6, 23, .7);
      color: #e2e8f0;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: all .2s;
    }

    .field input:focus {
      border-color: rgba(59, 130, 246, .5);
      background: rgba(0, 0, 0, .6);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
    }

    .field input::placeholder {
      color: #475569;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .btn-submit {
      width: 100%;
      height: 42px;
      padding: 0;
      border-radius: 10px;
      background: #1e40af;
      color: #ffffff;
      font-size: 13px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      margin-top: 20px;
      letter-spacing: .3px;
    }

    .btn-submit:hover {
      background: #1d4ed8;
      box-shadow: 0 4px 16px rgba(30, 64, 175, .4);
    }

    .btn-submit:active {
      transform: scale(0.98);
    }

    .btn-submit.loading::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .15) 50%, transparent 100%);
      animation: shimmer 1s infinite
    }

    @keyframes shimmer {
      from {
        transform: translateX(-100%)
      }

      to {
        transform: translateX(100%)
      }
    }

    #login-err {
      font-size: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      margin-top: 14px;
      margin-bottom: 0;
      display: none;
      align-items: center;
      gap: 8px;
      justify-content: center;
      font-weight: 500;
      animation: shake 0.4s ease-in-out;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(248, 113, 113, .08);
      border: 1px solid rgba(248, 113, 113, .12);
      border-left: 3px solid var(--red);
      color: var(--red);
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-5px);
      }

      75% {
        transform: translateX(5px);
      }
    }

    #login-err svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .login-footer {
      margin-top: 28px;
      font-size: 11px;
      color: rgba(100, 116, 139, .7);
      text-align: center;
      letter-spacing: .3px;
    }

    /* ══ TOPBAR (now inside .main) ══ */
    #dashboard {
      display: none;
      position: relative;
      z-index: 10;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }


    .topbar-spacer {
      flex: 1
    }

    .live-badge {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px;
      border-radius: 99px;
      background: var(--glass);
      border: 1px solid var(--border);
      font-size: 12px;
      font-weight: 500;
      color: var(--text2)
    }

    .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
      animation: livePulse 2s ease-in-out infinite
    }

    .live-dot.offline {
      background: var(--red);
      box-shadow: 0 0 8px var(--red);
      animation: none
    }

    @keyframes livePulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(.8)
      }
    }

    .btn-topbar {
      height: 34px;
      padding: 0 14px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: opacity .2s, background .2s
    }

    .btn-refresh {
      background: var(--p);
      color: #fff;
      box-shadow: 0 2px 10px rgba(99, 102, 241, .35)
    }

    .btn-refresh:hover {
      opacity: .85
    }

    .btn-logout {
      background: var(--glass2);
      border: 1px solid var(--border);
      color: var(--text2)
    }

    .btn-logout:hover {
      background: var(--glass);
      color: var(--text)
    }

    .spin-icon {
      animation: iconSpin .7s linear infinite;
      display: inline-block
    }

    @keyframes iconSpin {
      to {
        transform: rotate(360deg)
      }
    }

    .user-wrap {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0
    }

    .user-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 4px;
      border-radius: 24px;
      transition: background .2s;
      border: none;
      background: none
    }

    .user-toggle:hover {
      background: var(--glass2)
    }

    .user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #7c3aed);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .5px;
      text-transform: uppercase;
      flex-shrink: 0
    }

    .user-chevron {
      width: 16px;
      height: 16px;
      color: var(--text3);
      transition: transform .2s;
      margin-right: 2px
    }

    .user-wrap.open .user-chevron {
      transform: rotate(180deg)
    }

    .user-dropdown {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      background: var(--bg2);
      border: 1px solid var(--border2);
      border-radius: 12px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
      min-width: 220px;
      z-index: 300;
      display: none;
      overflow: hidden
    }

    .user-dropdown.show {
      display: block
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border)
    }

    .user-info svg {
      width: 18px;
      height: 18px;
      color: var(--text3);
      flex-shrink: 0
    }

    .user-info-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text)
    }

    .user-role {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border)
    }

    .user-role svg {
      width: 16px;
      height: 16px;
      color: var(--text3);
      flex-shrink: 0
    }

    .user-role-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 6px;
      background: rgba(99, 102, 241, .12);
      color: var(--p2);
      border: 1px solid rgba(99, 102, 241, .2)
    }

    .user-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
      transition: all .15s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-family: inherit
    }

    .user-dropdown-item:hover {
      background: var(--glass2);
      color: var(--text)
    }

    .user-dropdown-item svg {
      width: 16px;
      height: 16px;
      opacity: .55;
      flex-shrink: 0
    }

    .user-dropdown-sep {
      height: 1px;
      background: var(--border)
    }

    .user-dropdown-item.danger {
      color: #f87171
    }

    .user-dropdown-item.danger:hover {
      background: rgba(248, 113, 113, .08)
    }

    /* ══ CONTENT ══ */
    .content {
      flex: 1;
      overflow: hidden;
      padding: 24px;
      display: flex;
      flex-direction: column;
      min-height: 0
    }

    /* ══ METRICS ══ */
    .metrics {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-bottom: 24px;
      flex-shrink: 0;
      padding-top: 4px
    }

    .metric {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      position: relative;
      overflow: hidden;
      transition: transform .2s, box-shadow .2s;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .metric:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .15)
    }

    .metric-glow {
      display: none
    }

    .metric-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .metric-icon svg {
      width: 22px;
      height: 22px
    }

    .metric-icon.purple {
      background: rgba(99, 102, 241, .15);
      color: var(--p2)
    }

    .metric-icon.green {
      background: rgba(52, 211, 153, .15);
      color: var(--green)
    }

    .metric-icon.red {
      background: rgba(248, 113, 113, .15);
      color: var(--red)
    }

    .metric-icon.amber {
      background: rgba(251, 191, 36, .15);
      color: var(--amber)
    }

    .metric-icon.blue {
      background: rgba(96, 165, 250, .15);
      color: var(--blue)
    }

    .metric-pct {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px
    }

    .metric-pct.neutral {
      background: var(--glass);
      color: var(--text3)
    }

    .metric-val {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -.5px;
      font-family: 'JetBrains Mono', monospace
    }

    .metric-label {
      font-size: 11px;
      color: var(--text2);
      margin-top: 2px;
      font-weight: 500
    }

    /* ══ DASHBOARD GRID ══ */
    .dash-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px
    }

    .dash-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden
    }

    .dash-card-head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .dash-card-title {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .dash-card-title svg {
      width: 16px;
      height: 16px;
      color: var(--text3)
    }

    .dash-card-body {
      padding: 16px 18px
    }

    .donut-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      padding: 8px 0
    }

    .donut {
      position: relative;
      width: 120px;
      height: 120px
    }

    .donut svg {
      width: 120px;
      height: 120px;
      transform: rotate(-90deg)
    }

    .donut circle {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round
    }

    .donut .bg {
      stroke: var(--glass2)
    }

    .donut .online-arc {
      stroke: var(--green);
      transition: stroke-dashoffset .6s ease
    }

    .donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center
    }

    .donut-center .val {
      font-size: 22px;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace
    }

    .donut-center .lbl {
      font-size: 10px;
      color: var(--text3);
      font-weight: 500
    }

    .donut-legend {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 500
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .legend-dot.green {
      background: var(--green)
    }

    .legend-dot.red {
      background: var(--red)
    }

    .legend-dot.amber {
      background: var(--amber)
    }

    .legend-val {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      margin-left: auto;
      font-size: 13px
    }

    .pay-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 4px 0
    }

    .pay-item {
      text-align: center;
      padding: 14px 8px;
      border-radius: 8px;
      background: var(--glass)
    }

    .pay-item .val {
      font-size: 22px;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace
    }

    .pay-item .lbl {
      font-size: 10px;
      color: var(--text3);
      margin-top: 4px;
      font-weight: 500
    }

    .pay-item.paid .val {
      color: var(--green)
    }

    .pay-item.pending .val {
      color: var(--amber)
    }

    .pay-item.unpaid .val {
      color: var(--p2)
    }

    @media(max-width:1200px) {
      .metrics {
        grid-template-columns: repeat(3, 1fr)
      }

      .dash-grid {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:900px) {
      .metrics {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* ══ SECTION ══ */
    .section {
      margin-bottom: 20px
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 10px
    }

    .section-left {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -.02em
    }

    .section-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 22px;
      min-width: 22px;
      padding: 0 7px;
      border-radius: 11px;
      font-size: 11px;
      font-weight: 600;
      background: rgba(255, 255, 255, .08);
      color: var(--text2);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, .05)
    }

    .search-box {
      position: relative;
      display: flex;
      align-items: center
    }

    .search-box svg {
      position: absolute;
      left: 11px;
      width: 14px;
      height: 14px;
      color: var(--text3);
      pointer-events: none
    }

    .search-box input {
      padding: 7px 12px 7px 32px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      width: 210px;
      transition: border-color .2s, background .2s
    }

    .search-box input:focus {
      border-color: var(--p);
      background: rgba(99, 102, 241, .07)
    }

    .search-box input::placeholder {
      color: var(--text3)
    }

    .section-actions {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .btn-create {
      height: 34px;
      padding: 0 16px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: #fff;
      display: flex;
      align-items: center;
      gap: 7px;
      box-shadow: 0 2px 10px rgba(79, 70, 229, .35);
      transition: opacity .2s
    }

    .btn-create:hover {
      opacity: .85
    }

    /* ══ TABLE ══ */
    .table-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      flex-wrap: wrap;
      gap: 10px;
    }

    .toolbar-left,
    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .toolbar-divider {
      width: 1px;
      height: 20px;
      background: var(--border);
      margin: 0 4px;
    }

    .btn-icon-only {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text2);
      cursor: pointer;
      transition: all .2s;
    }

    .btn-icon-only:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.2)
    }

    .toolbar-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      height: 34px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
    }

    .toolbar-pill.blue {
      background: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.2);
      color: #93c5fd;
    }

    .toolbar-pill.blue strong {
      color: #fff;
      font-weight: 600;
      font-family: var(--font-mono);
    }

    .toolbar-pill.outline {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text2);
      cursor: pointer;
      transition: all .2s;
    }

    .toolbar-pill.outline:hover {
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
    }

    .toolbar-select {
      height: 34px;
      padding: 0 30px 0 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--glass);
      color: var(--text);
      font-size: 13px;
      outline: none;
      cursor: pointer;
      transition: all .2s;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }

    .toolbar-select:hover {
      border-color: var(--border2);
    }

    .toolbar-select:focus {
      border-color: var(--p);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, .12);
    }

    .toolbar-select option {
      background: var(--bg2);
      color: var(--text);
      padding: 8px
    }

    [data-theme="dark"] .toolbar-select option {
      background: #0f172a
    }

    [data-theme="light"] .toolbar-select option {
      background: #fff;
      color: #0f172a
    }

    .table-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0
    }

    .table-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: auto;
      min-height: 0
    }

    table {
      width: 100%;
      border-collapse: collapse
    }

    thead tr {
      background: var(--glass)
    }

    thead {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg2)
    }

    th {
      padding: 11px 16px;
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .07em;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: color .15s
    }

    th:hover {
      color: var(--text2)
    }

    th.sort-asc::after {
      content: ' ↑';
      color: var(--p)
    }

    th.sort-desc::after {
      content: ' ↓';
      color: var(--p)
    }

    td {
      padding: 10px 16px;
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle
    }

    .modal-gm tbody td {
      vertical-align: top;
      padding-top: 15px;
      padding-bottom: 15px;
    }
    .modal-gm tbody td.td-action .row-menu-wrap {
      margin-top: -5px;
    }

    tr:last-child td {
      border-bottom: none
    }

    tbody tr {
      transition: background .12s
    }

    tbody tr:hover td {
      background: var(--glass)
    }

    .no-data {
      text-align: center;
      padding: 48px 20px;
      color: var(--text3);
      font-size: 13px
    }

    .no-data-icon {
      font-size: 28px;
      margin-bottom: 10px;
      opacity: .5
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11.5px;
      color: var(--text2)
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap
    }

    .pill-green {
      background: rgba(52, 211, 153, .12);
      color: var(--green);
      border: 1px solid rgba(52, 211, 153, .2)
    }

    .pill-blue {
      background: rgba(96, 165, 250, .12);
      color: var(--blue);
      border: 1px solid rgba(96, 165, 250, .2)
    }

    .pill-amber {
      background: rgba(251, 191, 36, .12);
      color: var(--amber);
      border: 1px solid rgba(251, 191, 36, .2)
    }

    .pill-red {
      background: rgba(248, 113, 113, .12);
      color: var(--red);
      border: 1px solid rgba(248, 113, 113, .2)
    }

    .pill-gray {
      background: rgba(148, 163, 184, .08);
      color: var(--text2);
      border: 1px solid var(--border)
    }

    .pill-violet {
      background: rgba(167, 139, 250, .12);
      color: var(--p2);
      border: 1px solid rgba(167, 139, 250, .2)
    }

    /* Status indicator dot */
    .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      flex-shrink: 0;
      vertical-align: middle
    }

    .status-dot.online {
      background: var(--green);
      box-shadow: 0 0 6px rgba(52, 211, 153, .5)
    }

    .status-dot.blocked {
      background: var(--red);
      box-shadow: 0 0 6px rgba(248, 113, 113, .5)
    }

    .status-dot.offline {
      background: var(--text3);
      opacity: .6
    }

    .btn-row {
      height: 28px;
      padding: 0 12px;
      border-radius: 6px;
      border: 1px solid var(--border2);
      background: var(--glass);
      color: var(--text2);
      font-size: 11px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap
    }

    .btn-row:hover {
      background: rgba(99, 102, 241, .15);
      border-color: var(--p);
      color: var(--p)
    }

    .btn-row.success {
      border-color: rgba(52, 211, 153, .3);
      color: var(--green);
      background: rgba(52, 211, 153, .08)
    }

    .btn-row.success:hover {
      background: rgba(52, 211, 153, .2);
      border-color: var(--green)
    }

    .btn-row.danger {
      border-color: rgba(248, 113, 113, .3);
      color: var(--red);
      background: rgba(248, 113, 113, .08)
    }

    .btn-row.danger:hover {
      background: rgba(248, 113, 113, .2);
      border-color: var(--red)
    }

    /* ══ THEME TOGGLE ══ */
    .theme-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--glass);
      color: var(--text2);
      cursor: pointer;
      transition: all .25s;
      margin-right: 4px
    }

    .theme-btn:hover {
      background: var(--glass2);
      color: var(--text);
      border-color: var(--border2);
      transform: rotate(15deg)
    }

    .theme-btn svg {
      width: 16px;
      height: 16px;
      transition: transform .3s
    }

    .theme-btn:active svg {
      transform: scale(0.85)
    }

    /* ══ LIGHT MODE OVERRIDES ══ */
    [data-theme="light"] .pill-green {
      background: rgba(16, 185, 129, .10);
      color: #047857;
      border-color: rgba(16, 185, 129, .25)
    }

    [data-theme="light"] .pill-red {
      background: rgba(239, 68, 68, .10);
      color: #dc2626;
      border-color: rgba(239, 68, 68, .25)
    }

    [data-theme="light"] .pill-amber {
      background: rgba(245, 158, 11, .10);
      color: #b45309;
      border-color: rgba(245, 158, 11, .25)
    }

    [data-theme="light"] .pill-blue {
      background: rgba(37, 99, 235, .08);
      color: #1d4ed8;
      border-color: rgba(37, 99, 235, .2)
    }

    [data-theme="light"] .pill-gray {
      background: rgba(0, 0, 0, .04);
      color: #64748b;
      border-color: rgba(0, 0, 0, .1)
    }

    [data-theme="light"] .metric-icon.green {
      color: #059669
    }

    [data-theme="light"] .metric-icon.red {
      color: #dc2626
    }

    [data-theme="light"] .metric-icon.amber {
      color: #d97706
    }

    [data-theme="light"] .metric-icon.blue {
      color: #2563eb
    }

    [data-theme="light"] .metric-icon.purple {
      color: #4f46e5
    }

    [data-theme="light"] .topbar {
      background: rgba(255, 255, 255, .85);
      border-bottom: 1px solid rgba(0, 0, 0, .08)
    }

    [data-theme="light"] .metric {
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
    }

    [data-theme="light"] .table-card {
      box-shadow: 0 1px 4px rgba(0, 0, 0, .06)
    }

    [data-theme="light"] .modal {
      box-shadow: 0 20px 60px rgba(0, 0, 0, .15)
    }

    [data-theme="light"] .modal-field input,
    [data-theme="light"] .modal-field select,
    [data-theme="light"] .rn-days-input {
      background: rgba(0, 0, 0, .03);
      border-color: rgba(0, 0, 0, .12);
      color: #0f172a
    }

    [data-theme="light"] .rn-days-input option {
      background: #fff;
      color: #0f172a
    }

    [data-theme="light"] .rn-info-card {
      background: rgba(0, 0, 0, .02);
      border-color: rgba(0, 0, 0, .08)
    }

    [data-theme="light"] .rn-tabs {
      background: rgba(0, 0, 0, .03);
      border-color: rgba(0, 0, 0, .08)
    }

    [data-theme="light"] .rn-tab {
      color: #475569
    }

    [data-theme="light"] .rn-tab.active {
      background: rgba(99, 102, 241, .12);
      color: #4f46e5;
      border-color: rgba(99, 102, 241, .25)
    }

    [data-theme="light"] .toolbar-select {
      background: rgba(0, 0, 0, .03);
      border-color: rgba(0, 0, 0, .12);
      color: #0f172a
    }

    [data-theme="light"] .search-box {
      background: rgba(0, 0, 0, .03);
      border-color: rgba(0, 0, 0, .10)
    }

    [data-theme="light"] .search-box input {
      color: #0f172a
    }

    [data-theme="light"] .search-box input::placeholder {
      color: #94a3b8
    }

    [data-theme="light"] .btn-create {
      opacity: .95
    }

    [data-theme="light"] .user-dropdown {
      background: #fff;
      border-color: rgba(0, 0, 0, .1);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
    }

    [data-theme="light"] .user-dropdown-item {
      color: #334155
    }

    [data-theme="light"] .user-dropdown-item:hover {
      background: rgba(0, 0, 0, .04)
    }

    /* Toolbar pill & icon button — light mode */
    [data-theme="light"] .toolbar-pill.blue {
      background: rgba(37, 99, 235, .08);
      border-color: rgba(37, 99, 235, .2);
      color: #1d4ed8
    }

    [data-theme="light"] .toolbar-pill.blue strong {
      color: #0f172a;
      font-weight: 800;
      font-size: 15px
    }

    [data-theme="light"] .toolbar-pill.blue .status-dot.online {
      box-shadow: 0 0 6px rgba(5, 150, 105, .6)
    }

    [data-theme="light"] .btn-icon-only {
      background: rgba(0, 0, 0, .04);
      border-color: rgba(0, 0, 0, .12);
      color: #475569
    }

    [data-theme="light"] .btn-icon-only:hover {
      background: rgba(0, 0, 0, .08);
      color: #0f172a;
      border-color: rgba(0, 0, 0, .2)
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      background: rgba(255, 255, 255, .015);
      flex-shrink: 0
    }

    .page-info {
      font-size: 12px;
      color: var(--text2);
      font-family: 'JetBrains Mono', monospace
    }

    .page-controls {
      display: flex;
      gap: 6px;
      align-items: center
    }

    .btn-page {
      background: var(--glass);
      border: 1px solid var(--border);
      color: var(--text2);
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .2s
    }

    .btn-page:hover:not(:disabled) {
      background: var(--glass2);
      color: var(--text);
      border-color: var(--border2)
    }

    .btn-page:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    .rows-select {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text2)
    }

    .rows-select select {
      padding: 4px 8px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      appearance: auto
    }

    .rows-select select option {
      background: var(--bg2);
      color: var(--text)
    }

    .rows-select select:focus {
      border-color: var(--p)
    }

    /* ══ MODAL ══ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .modal-overlay.show {
      display: flex
    }

    .modal {
      width: 100%;
      max-width: 420px;
      background: var(--bg2);
      border: 1px solid var(--border2);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow);
      animation: modalIn .25s ease
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: scale(.95) translateY(10px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .modal-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .modal-title {
      font-size: 15px;
      font-weight: 700
    }

    .modal-close {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: none;
      background: var(--glass);
      color: var(--text3);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s
    }

    .modal-close:hover {
      background: rgba(248, 113, 113, .15);
      color: var(--red)
    }

    .modal-body {
      padding: 24px
    }

    .modal-field {
      margin-bottom: 18px
    }

    .modal-field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 8px
    }

    .modal-field input {
      width: 100%;
      padding: 10px 14px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color .2s
    }

    .modal-field input:focus {
      border-color: var(--p)
    }

    .modal-field input::placeholder {
      color: var(--text3)
    }

    .duration-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .dur-btn {
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--glass);
      color: var(--text2);
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all .2s
    }

    .dur-btn:hover {
      border-color: var(--p);
      color: var(--p);
      background: rgba(99, 102, 241, .1)
    }

    .dur-btn.active {
      border-color: var(--p);
      color: var(--p);
      background: rgba(99, 102, 241, .15)
    }

    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 10px
    }

    .btn-modal {
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      transition: opacity .2s
    }

    .btn-cancel {
      background: var(--glass2);
      color: var(--text2);
      border: 1px solid var(--border)
    }

    .btn-cancel:hover {
      color: var(--text)
    }

    .btn-confirm {
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: #fff;
      box-shadow: 0 2px 10px rgba(79, 70, 229, .35)
    }

    .btn-confirm:hover:not(:disabled) {
      opacity: .85
    }

    .btn-modal:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }

    .modal-alert {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 12px;
      display: none
    }

    .modal-alert.error {
      background: rgba(248, 113, 113, .1);
      border: 1px solid rgba(248, 113, 113, .25);
      color: var(--red);
      display: block
    }

    .modal-alert.success {
      background: rgba(52, 211, 153, .1);
      border: 1px solid rgba(52, 211, 153, .25);
      color: var(--green);
      display: block
    }

    .modal-info {
      font-size: 12px;
      color: var(--text3);
      margin-bottom: 12px
    }

    .modal-info strong {
      color: var(--text)
    }

    /* ══ ROW MENU ══ */
    .row-menu-wrap {
      position: relative
    }

    .btn-dots {
      width: 30px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--glass);
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s
    }

    .btn-dots:hover {
      background: var(--glass2);
      color: var(--text);
      border-color: var(--border2)
    }

    .btn-dots svg {
      width: 16px;
      height: 16px
    }

    .row-dropdown {
      position: fixed;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
      min-width: 170px;
      z-index: 400;
      display: none;
      overflow: hidden
    }

    .row-dropdown.show {
      display: block
    }

    .rd-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
      transition: all .12s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-family: inherit
    }

    .rd-item:hover {
      background: var(--glass2);
      color: var(--text)
    }

    .rd-item svg {
      width: 14px;
      height: 14px;
      opacity: .6;
      flex-shrink: 0
    }

    .rd-sep {
      height: 1px;
      background: var(--border);
      margin: 2px 0
    }

    /* ══ HISTORY TIMELINE ══ */
    .timeline {
      list-style: none;
      position: relative;
      padding-left: 24px
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background: var(--border2)
    }

    .timeline li {
      position: relative;
      margin-bottom: 16px;
      padding-left: 16px
    }

    .timeline li::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--p);
      background: var(--bg2)
    }

    .timeline li.act-create::before {
      border-color: var(--green);
      background: rgba(52, 211, 153, .2)
    }

    .timeline li.act-renew::before {
      border-color: var(--blue);
      background: rgba(96, 165, 250, .2)
    }

    .tl-date {
      font-size: 11px;
      color: var(--text3);
      font-family: 'JetBrains Mono', monospace
    }

    .tl-action {
      font-size: 13px;
      font-weight: 600;
      margin: 2px 0
    }

    .tl-detail {
      font-size: 12px;
      color: var(--text2)
    }

    .tl-empty {
      text-align: center;
      padding: 24px;
      color: var(--text3);
      font-size: 13px
    }

    .modal-wide {
      max-width: 480px
    }

    /* ══ GAME MANAGER MODAL ══ */
    .modal-gm {
      max-width: 1100px;
      height: 90vh;
      display: flex;
      flex-direction: column;
    }
    
    .modal-gm .modal-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 24px;
    }

    .gm-user {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      padding: 5px 14px;
      border-radius: 99px;
      background: var(--glass);
      border: 1px solid var(--border);
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 16px
    }

    .gm-user svg {
      width: 14px;
      height: 14px;
      color: var(--text3)
    }

    .gm-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    /* ══ GAME MANAGER TABS ══ */
    .gm-tabs {
      display: flex;
      gap: 3px;
      flex-wrap: nowrap;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .gm-tabs::-webkit-scrollbar {
      display: none;
    }

    .gm-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--text2);
      transition: all .18s ease;
      white-space: nowrap;
      font-family: inherit;
    }

    .gm-tab:hover {
      background: var(--glass2);
      color: var(--text);
    }

    /* Active: Tất cả (all) — purple */
    .gm-tab[data-filter="all"].active {
      background: rgba(99, 102, 241, .15);
      color: var(--p2);
    }

    /* Active: Chưa tải (notdownloaded) — slate */
    .gm-tab[data-filter="notdownloaded"].active {
      background: rgba(148, 163, 184, .12);
      color: var(--text);
    }

    /* Active: Đã tải (downloaded) — green */
    .gm-tab[data-filter="downloaded"].active {
      background: rgba(52, 211, 153, .12);
      color: var(--green);
    }

    /* Active: Đang tải (downloading) — amber */
    .gm-tab[data-filter="downloading"].active {
      background: rgba(251, 191, 36, .12);
      color: var(--amber);
    }

    /* Count badges */
    .gm-tab .count {
      padding: 1px 7px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      background: rgba(255, 255, 255, .07);
      color: var(--text3);
      transition: all .18s;
    }

    .gm-tab[data-filter="all"].active .count {
      background: rgba(167, 139, 250, .25);
      color: var(--p2);
    }

    .gm-tab[data-filter="downloaded"].active .count {
      background: rgba(52, 211, 153, .25);
      color: var(--green);
    }

    .gm-tab[data-filter="downloading"].active .count {
      background: rgba(251, 191, 36, .25);
      color: var(--amber);
    }

    .gm-tab[data-filter="notdownloaded"].active .count {
      background: rgba(148, 163, 184, .18);
      color: var(--text2);
    }

    .gm-spacer {
      flex: 1
    }

    .gm-disk-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--glass);
      color: var(--text2);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      transition: all .15s
    }

    .gm-disk-btn:hover {
      background: var(--glass2);
      color: var(--text);
      border-color: var(--border2)
    }

    .gm-disk-btn svg {
      width: 16px;
      height: 16px
    }

    .gm-disk-btn .disk-count {
      padding: 1px 6px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 700;
      background: rgba(96, 165, 250, .15);
      color: var(--blue)
    }

    .gm-table-wrap {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 10px;
      -webkit-overflow-scrolling: touch;
    }

    .gm-table-wrap table {
      min-width: 1000px
    }

    /* ══ GAME STATUS DOTS ══ */
    .status-dot.downloaded {
      background: var(--green);
      box-shadow: 0 0 7px rgba(52, 211, 153, .6);
      animation: none
    }

    .status-dot.downloading {
      background: var(--amber);
      box-shadow: 0 0 7px rgba(251, 191, 36, .6);
      animation: dl-dot-blink 1.2s ease-in-out infinite
    }

    .status-dot.notdownloaded {
      background: var(--text3);
      opacity: .55;
      box-shadow: none
    }

    .status-dot.error {
      background: var(--red);
      box-shadow: 0 0 7px rgba(248, 113, 113, .6)
    }

    .status-dot.hashing {
      background: var(--blue);
      box-shadow: 0 0 7px rgba(96, 165, 250, .6);
      animation: dl-dot-blink 1.2s ease-in-out infinite
    }

    @keyframes dl-dot-blink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(1.4)
      }
    }

    /* ══ GAME NAME CELL LAYOUT ══ */
    .gm-name-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0
    }

    .gm-name-row {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0
    }

    .gm-name-text {
      font-weight: 600;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0
    }

    .gm-name-cell .dl-progress {
      margin-top: 2px;
      width: 100%
    }

    /* ═ DOWNLOAD GAME MODAL ═ */
    .modal-dl {
      max-width: 420px
    }

    .dl-icon {
      display: flex;
      justify-content: center;
      margin: 8px 0 12px
    }

    .dl-icon-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: rgba(99, 102, 241, .12);
      border: 1px solid rgba(99, 102, 241, .25);
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .dl-icon-circle svg {
      width: 28px;
      height: 28px;
      color: var(--p)
    }

    .dl-game-name {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 28px;
      letter-spacing: -0.3px;
    }

    .modal-dl {
      max-width: 440px !important;
    }

    .dl-drives {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 8px
    }

    .dl-field label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px
    }

    .dl-field select {
      width: 100%;
      padding: 10px 14px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      transition: border-color .2s
    }

    .dl-field select:focus {
      border-color: var(--p)
    }

    .dl-space {
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: var(--green);
      margin-top: 16px;
      margin-bottom: 24px;
      letter-spacing: 0.2px;
    }

    .dl-info {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 0
    }

    .dl-info-item {
      padding: 16px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .dl-info-item:not(:last-child) {
      border-right: 1px solid var(--border)
    }

    .dl-info-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 8px
    }

    .dl-info-value {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    /* ═ DISK INFO MODAL ═ */
    .modal-disk {
      max-width: 400px
    }

    .disk-subtitle {
      font-size: 13px;
      color: var(--text2);
      margin-bottom: 20px
    }

    .disk-list {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .disk-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border)
    }

    .disk-item:first-child {
      padding-top: 0
    }

    .disk-item:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .disk-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .disk-letter {
      font-size: 15px;
      font-weight: 700;
      min-width: 24px
    }

    .disk-usage {
      font-size: 11px;
      color: var(--text3);
      font-weight: 500
    }

    .disk-size {
      font-size: 13px;
      font-weight: 600
    }

    .disk-size .used {
      color: var(--green)
    }

    .disk-bar {
      height: 4px;
      border-radius: 99px;
      background: var(--glass2);
      overflow: hidden
    }

    .disk-bar-fill {
      height: 100%;
      border-radius: 99px;
      transition: width .5s ease
    }

    .disk-bar-fill.low {
      background: var(--blue)
    }

    .disk-bar-fill.mid {
      background: var(--amber)
    }

    .disk-bar-fill.high {
      background: var(--red)
    }

    /* Download progress bar */
    /* ══ PROGRESS BAR ══ */
    .dl-progress {
      margin-top: 7px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dl-progress-meta {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 0;
      flex-shrink: 0;
    }

    .dl-pct {
      font-size: 11px;
      font-weight: 700;
      color: var(--amber);
      letter-spacing: .3px;
    }

    .dl-spd {
      font-size: 11px;
      font-weight: 500;
      color: var(--text3);
      font-family: 'JetBrains Mono', monospace;
    }

    .dl-progress-track {
      height: 3px;
      border-radius: 99px;
      background: var(--glass2);
      overflow: hidden;
    }

    .dl-progress-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--amber), #fcd34d);
      transition: width .5s ease;
    }

    /* Indeterminate: chạy sweep khi chưa có data */
    @keyframes indeterminate-sweep {
      0% {
        transform: translateX(-100%)
      }

      100% {
        transform: translateX(300%)
      }
    }

    .dl-progress-fill.indeterminate {
      width: 35% !important;
      animation: indeterminate-sweep 1.6s ease-in-out infinite;
      background: linear-gradient(90deg, transparent, var(--amber), transparent);
    }

    .dl-progress-fill.hashing {
      background: linear-gradient(90deg, var(--blue), #93c5fd);
      animation: indeterminate-sweep 1.6s ease-in-out infinite;
      width: 35% !important;
    }


    /* ══ TOAST ══ */
    #toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 13px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      box-shadow: var(--shadow);
      transform: translateY(16px);
      opacity: 0;
      transition: transform .25s, opacity .25s;
      pointer-events: none
    }

    #toast.show {
      transform: none;
      opacity: 1
    }

    /* ══ RESPONSIVE ══ */
    @media(max-width:768px) {
      .topbar {
        padding: 0 14px;
        gap: 10px;
        height: 52px
      }

      .topbar-title {
        font-size: 13px
      }

      .topbar-sub {
        font-size: 10px
      }

      .topbar-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px
      }

      .topbar-icon svg {
        width: 15px;
        height: 15px
      }

      .live-badge {
        padding: 4px 8px;
        font-size: 10px
      }

      .content {
        padding: 14px
      }

      .metrics {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 18px
      }

      .metric {
        padding: 14px 14px 12px
      }

      .metric-val {
        font-size: 22px
      }

      .metric-icon {
        width: 40px;
        height: 40px
      }

      .metric-icon svg {
        width: 20px;
        height: 20px
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
      }

      .section-actions {
        width: 100%;
        flex-wrap: wrap
      }

      .search-box {
        flex: 1
      }

      .search-box input {
        width: 100%
      }

      .table-card {
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
      }

      table {
        min-width: unset
      }

      /* Hide non-essential columns on tablet/mobile (licenses table only) */
      #page-licenses thead th.mobile-hide,
      #page-licenses tbody td.mobile-hide {
        display: none
      }

      /* Hide action column header text, keep column */
      thead th.th-action span.th-label {
        display: none
      }

      thead th.th-action {
        width: 44px;
        min-width: 44px;
        padding: 0 4px
      }

      /* Action column compact */
      tbody td.td-action {
        padding: 8px 4px;
        text-align: right;
        width: 44px;
        min-width: 44px
      }

      .pagination {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px
      }

      .page-controls {
        flex-wrap: wrap;
        gap: 6px
      }

      .modal-overlay {
        padding: 10px
      }

      .modal {
        border-radius: 16px
      }

      .modal-wide {
        max-width: 100%
      }

      .modal-gm {
        max-width: 100%
      }

      /* Game manager mobile: ẩn cột ít quan trọng */
      .modal-gm thead th.gm-hide-mobile,
      .modal-gm tbody td.gm-hide-mobile {
        display: none
      }

      .gm-table-wrap {
        max-height: 50vh
      }

      .gm-toolbar {
        gap: 8px
      }

      .gm-tabs {
        gap: 4px
      }

      .gm-tab {
        padding: 5px 10px;
        font-size: 11px
      }

      .user-dropdown {
        right: -10px;
        min-width: 200px
      }
    }

    @media(max-width:480px) {
      .topbar {
        padding: 0 10px;
        gap: 6px;
        height: 48px
      }

      .topbar-brand {
        gap: 8px
      }

      .topbar-icon {
        width: 28px;
        height: 28px
      }

      .btn-refresh {
        padding: 0 10px;
        font-size: 12px
      }

      .content {
        padding: 8px
      }

      .metrics {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px
      }

      .metric {
        padding: 10px 12px
      }

      .btn-create {
        padding: 0 10px;
        font-size: 12px;
        height: 32px
      }

      .btn-create svg {
        display: none
      }

      /* Mobile compact table rows */
      .table-card {
        overflow: visible;
        border-radius: 12px
      }

      table {
        min-width: unset
      }

      thead {
        display: table-header-group
      }

      tbody td {
        padding: 10px 12px;
        font-size: 13px
      }

      #page-licenses tbody td:first-child {
        display: none
      }

      tbody tr:hover td {
        background: rgba(255, 255, 255, .03)
      }

      .row-menu-wrap {
        position: relative
      }

      .btn-dots {
        width: 30px;
        height: 28px
      }

      .row-dropdown {
        z-index: 9999 !important
      }

      .pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        text-align: center;
        background: none;
        border-top: none;
        padding: 12px 0 0
      }

      .page-controls {
        justify-content: center
      }

      .login-card {
        padding: 28px 24px 24px;
        border-radius: 14px
      }

      .login-brand {
        margin-bottom: 22px
      }

      .login-brand-icon img {
        width: 40px;
        height: 40px
      }

      .login-brand h1 {
        font-size: 18px;
        letter-spacing: 4px
      }

      .login-brand p {
        font-size: 8px
      }

      .field input {
        height: 38px;
        font-size: 12px
      }

      .btn-submit {
        height: 38px;
        font-size: 12px;
        margin-top: 16px
      }

      .login-footer {
        margin-top: 22px;
        font-size: 10px
      }
    }

    /* ══ RENEW TABS ══ */
    .rn-info-card {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 18px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .rn-info-row {
      display: flex;
      gap: 24px;
      margin-bottom: 6px
    }

    .rn-info-row:last-child {
      margin-bottom: 0
    }

    .rn-info-label {
      font-size: 11px;
      color: var(--text3);
      margin-bottom: 2px
    }

    .rn-info-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--text)
    }

    .rn-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 18px;
      background: rgba(255, 255, 255, .04);
      border-radius: 8px;
      padding: 3px;
      border: 1px solid var(--border)
    }

    .rn-tab {
      flex: 1;
      padding: 9px 14px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text2);
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all .2s;
      text-align: center
    }

    .rn-tab.active {
      background: rgba(99, 102, 241, .2);
      color: var(--p);
      border: 1px solid rgba(99, 102, 241, .3)
    }

    .rn-tab:not(.active):hover {
      color: var(--text)
    }

    .rn-panel {
      display: none
    }

    .rn-panel.active {
      display: block
    }

    .rn-balance-info {
      background: rgba(99, 102, 241, .08);
      border: 1px solid rgba(99, 102, 241, .2);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 14px
    }

    .rn-balance-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px
    }

    .rn-balance-row:last-child {
      margin-bottom: 0
    }

    .rn-balance-label {
      font-size: 13px;
      color: var(--text2)
    }

    .rn-balance-value {
      font-size: 15px;
      font-weight: 700;
      color: var(--p);
      font-family: 'JetBrains Mono', monospace
    }

    .rn-days-input {
      width: 100%;
      padding: 10px 14px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: all .2s
    }

    .rn-days-input:focus {
      border-color: var(--p);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, .15)
    }

    .rn-days-input:hover {
      border-color: var(--border2)
    }

    .rn-days-input::placeholder {
      color: var(--text3)
    }

    /* ══ CUSTOM DROPDOWN ══ */
    .cd-wrap {
      position: relative
    }

    .cd-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 14px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      cursor: pointer;
      transition: all .2s;
      user-select: none
    }

    .cd-trigger:hover {
      border-color: var(--border2)
    }

    .cd-wrap.open .cd-trigger {
      border-color: var(--p);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
      border-radius: 8px 8px 0 0
    }

    .cd-trigger .cd-placeholder {
      color: var(--text3)
    }

    .cd-trigger .cd-arrow {
      width: 16px;
      height: 16px;
      color: var(--text3);
      transition: transform .25s ease;
      flex-shrink: 0
    }

    .cd-wrap.open .cd-arrow {
      transform: rotate(180deg);
      color: var(--p)
    }

    .cd-panel {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: var(--bg2);
      border: 1px solid var(--p);
      border-top: none;
      border-radius: 0 0 8px 8px;
      z-index: 20;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .25)
    }

    .cd-wrap.open .cd-panel {
      display: block
    }

    .cd-option {
      padding: 12px 14px;
      font-size: 14px;
      color: var(--text);
      cursor: pointer;
      transition: background .15s;
      border-top: 1px solid var(--border)
    }

    .cd-option:first-child {
      border-top: none
    }

    .cd-option:hover {
      background: var(--glass2)
    }

    .cd-option.selected {
      color: var(--p);
      font-weight: 600
    }

    [data-theme="light"] .cd-panel {
      background: #fff;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .1)
    }

    [data-theme="light"] .cd-option:hover {
      background: rgba(0, 0, 0, .04)
    }

    /* ══ LOADING OVERLAY ══ */
    .loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: #0a0f1a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease
    }

    .loading-overlay.show {
      opacity: 1;
      pointer-events: all
    }

    .loading-spinner {
      position: relative;
      width: 64px;
      height: 64px;
      margin-bottom: 28px
    }

    .loading-spinner .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2.5px solid transparent
    }

    .loading-spinner .ring:nth-child(1) {
      border-top-color: rgba(99, 102, 241, .9);
      animation: spin-ring 1.2s cubic-bezier(.5, .15, .5, .85) infinite
    }

    .loading-spinner .ring:nth-child(2) {
      inset: 6px;
      border-right-color: rgba(129, 140, 248, .6);
      animation: spin-ring 1.8s cubic-bezier(.5, .15, .5, .85) infinite reverse
    }

    .loading-spinner .ring:nth-child(3) {
      inset: 12px;
      border-bottom-color: rgba(167, 139, 250, .4);
      animation: spin-ring 2.4s linear infinite
    }

    .loading-spinner .dot {
      position: absolute;
      inset: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 102, 241, .3), transparent 70%);
      animation: pulse-dot 2s ease-in-out infinite
    }

    @keyframes spin-ring {
      0% {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: .3;
        transform: scale(.8)
      }

      50% {
        opacity: .8;
        transform: scale(1.1)
      }
    }

    .loading-brand {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 8px;
      color: rgba(255, 255, 255, .85);
      text-transform: uppercase;
      margin-right: -8px;
      font-family: 'Inter', sans-serif
    }

    .loading-sub {
      font-size: 9px;
      letter-spacing: 3px;
      color: rgba(100, 116, 139, .6);
      text-transform: uppercase;
      margin-top: 8px;
      font-weight: 600;
      margin-right: -3px
    }

    /* ══ DROPDOWN MENU IMPROVEMENTS ══ */
    .row-dropdown {
      min-width: 200px;
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .2);
      padding: 6px 0;
    }

    .rd-header {
      padding: 10px 16px 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--text3);
      border-bottom: 1px solid var(--border);
      margin-bottom: 4px;
    }

    .rd-item {
      padding: 9px 16px;
      font-size: 13px;
      gap: 10px;
      border-radius: 0;
    }

    .rd-item svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      opacity: .85
    }

    .rd-item:hover {
      background: var(--glass2);
      color: var(--text)
    }

    .rd-sep {
      margin: 4px 12px;
      height: 1px;
      background: var(--border)
    }

    /* ══ ONLINE PILL ANIMATION (tab Trực tuyến) ══ */
    @keyframes online-dot-breathe {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(52, 211, 153, .3)
      }

      50% {
        opacity: .7;
        transform: scale(1.35);
        box-shadow: 0 0 0 5px rgba(52, 211, 153, 0)
      }
    }

    @keyframes online-count-pulse {

      0%,
      100% {
        color: var(--green)
      }

      50% {
        color: #a7f3d0
      }
    }

    #page-online .toolbar-pill.blue .status-dot.online {
      animation: online-dot-breathe 2s ease-in-out infinite !important;
    }

    /* ══ DELETE GAME OPTION BUTTONS ══ */
    .del-opt-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--glass);
      width: 100%;
      cursor: pointer;
      transition: background .18s, border-color .18s, transform .18s;
      color: var(--text);
      font-family: inherit;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .del-opt-btn:hover:not(:disabled) {
      background: var(--glass2);
      border-color: var(--border2);
      transform: translateY(-1px)
    }

    .del-opt-danger:hover:not(:disabled) {
      border-color: rgba(248, 113, 113, .4);
      background: rgba(248, 113, 113, .06)
    }

    .del-opt-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      filter: grayscale(0.5);
      transform: none;
    }

    /* ══ DRIVE COMBOBOX FIXES ══ */
    /* Cho phép dropdown vượt ra ngoài border modal */
    #modal-dl .modal,
    #modal-dl .modal-body {
      overflow: visible
    }

    /* Panel ổ đĩa: scrollable, tối đa 220px, GPU layer riêng — tránh lại do backdrop-filter */
    #cd-server .cd-panel,
    #cd-client .cd-panel {
      max-height: 220px;
      overflow-y: auto;
      border-radius: 0 0 10px 10px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      will-change: contents;
    }

    #cd-server .cd-panel::-webkit-scrollbar,
    #cd-client .cd-panel::-webkit-scrollbar {
      width: 5px
    }

    #cd-server .cd-panel::-webkit-scrollbar-track,
    #cd-client .cd-panel::-webkit-scrollbar-track {
      background: transparent
    }

    #cd-server .cd-panel::-webkit-scrollbar-thumb,
    #cd-client .cd-panel::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 4px
    }

    /* Option: chỉ tên ổ, checkmark khi selected */
    #cd-server .cd-option,
    #cd-client .cd-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 18px;
      font-size: 14px;
      font-weight: 500;
      transition: none;
    }

    #cd-server .cd-option.selected::after,
    #cd-client .cd-option.selected::after {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }

    /* Trigger: font to hơn cho ổ đĩa */
    #cd-server .cd-trigger,
    #cd-client .cd-trigger {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 14px 18px;
    }

    /* ══ REFRESH BUTTON BORDER ANIMATION ══ */
    @keyframes refresh-ring {
      0% {
        border-color: var(--p);
        box-shadow:
          0 0 0 0 rgba(99, 102, 241, .85),
          0 0 12px rgba(99, 102, 241, .40),
          inset 0 0 8px rgba(99, 102, 241, .15);
        color: var(--p2);
      }

      40% {
        border-color: rgba(129, 140, 248, .7);
        box-shadow:
          0 0 0 6px rgba(99, 102, 241, .18),
          0 0 20px rgba(129, 140, 248, .30),
          inset 0 0 6px rgba(99, 102, 241, .08);
      }

      100% {
        border-color: var(--border);
        box-shadow:
          0 0 0 10px rgba(99, 102, 241, 0),
          0 0 0 rgba(99, 102, 241, 0),
          inset 0 0 0 rgba(99, 102, 241, 0);
        color: var(--text2);
      }
    }

    @keyframes refresh-icon-spin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    .btn-icon-only.refreshed {
      animation: refresh-ring 0.9s cubic-bezier(.22, .68, 0, 1.2) forwards;
    }

    .btn-icon-only.refreshed svg {
      animation: refresh-icon-spin 0.55s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* ══ CUSTOM CONFIRM DIALOG ══ */
    .cc-body {
      padding: 24px 24px 16px;
      text-align: center;
    }

    .confirm-icon-wrap {
      position: relative;
      width: 52px;
      height: 52px;
      margin: 0 auto 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .confirm-icon-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid rgba(248, 113, 113, .25);
      animation: confirmRingPulse 2s ease-in-out infinite;
    }

    .confirm-icon-wrap::before {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: rgba(248, 113, 113, .08);
    }

    .confirm-icon-wrap svg {
      position: relative;
      z-index: 1;
      color: var(--red);
      filter: drop-shadow(0 0 6px rgba(248, 113, 113, .3));
    }

    @keyframes confirmRingPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: .5; }
    }

    .confirm-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 12px;
      letter-spacing: -.2px;
    }

    .cc-info-card {
      text-align: left;
      background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      padding: 4px 0;
      margin-bottom: 12px;
      backdrop-filter: blur(4px);
    }

    .cc-info-card:empty {
      display: none;
    }

    .cc-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 16px;
    }

    .cc-row + .cc-row {
      border-top: 1px solid rgba(255,255,255,.05);
    }

    .cc-row .cc-label {
      font-size: 12px;
      color: var(--text3);
      font-weight: 500;
      letter-spacing: .02em;
    }

    .cc-row .cc-value {
      font-size: 13px;
      color: var(--p2);
      font-weight: 700;
      text-align: right;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cc-note {
      font-size: 11px;
      color: var(--text3);
      line-height: 1.5;
      margin-bottom: 2px;
    }

    .cc-note:empty {
      display: none;
    }

    .cc-note.warn {
      color: var(--red);
      font-weight: 600;
    }

    .confirm-actions {
      display: flex;
      gap: 10px;
      padding: 16px 24px 22px;
    }

    .confirm-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 11px 16px;
      border-radius: 10px;
      border: none;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all .2s;
    }

    .confirm-btn svg {
      flex-shrink: 0;
    }

    .confirm-btn-cancel {
      background: var(--glass2);
      color: var(--text2);
      border: 1px solid var(--border);
    }

    .confirm-btn-cancel:hover {
      background: var(--glass);
      color: var(--text);
      border-color: var(--border2);
      transform: translateY(-1px);
    }

    .confirm-btn-danger {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      color: #fff;
      box-shadow: 0 4px 16px rgba(220, 38, 38, .35);
    }

    .confirm-btn-danger:hover {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      box-shadow: 0 6px 20px rgba(220, 38, 38, .5);
      transform: translateY(-1px);
    }

    .confirm-btn-danger:active {
      transform: translateY(0) scale(.98);
    }

    [data-theme="light"] .confirm-icon-wrap::before {
      background: rgba(239, 68, 68, .06);
    }

    [data-theme="light"] .confirm-icon-ring {
      border-color: rgba(239, 68, 68, .2);
    }

    [data-theme="light"] .confirm-btn-cancel {
      background: rgba(0, 0, 0, .04);
      border-color: rgba(0, 0, 0, .12);
      color: #475569;
    }

    [data-theme="light"] .confirm-btn-cancel:hover {
      background: rgba(0, 0, 0, .08);
      color: #0f172a;
    }

    /* Download theme (blue) */
    .confirm-icon-wrap.theme-download::before {
      background: rgba(96, 165, 250, .08);
    }

    .confirm-icon-wrap.theme-download svg {
      color: var(--blue);
      filter: drop-shadow(0 0 8px rgba(96, 165, 250, .3));
    }

    .confirm-icon-ring.ring-blue {
      border-color: rgba(96, 165, 250, .25);
      animation: confirmRingPulseBlue 2s ease-in-out infinite;
    }

    @keyframes confirmRingPulseBlue {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.12); opacity: .5; }
    }

    .confirm-btn-primary {
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      color: #fff;
      box-shadow: 0 4px 16px rgba(79, 70, 229, .35);
    }

    .confirm-btn-primary:hover {
      background: linear-gradient(135deg, #6366f1, #818cf8);
      box-shadow: 0 6px 20px rgba(79, 70, 229, .5);
      transform: translateY(-1px);
    }

    .confirm-btn-primary:active {
      transform: translateY(0) scale(.98);
    }

    /* Danger theme (red) - explicit for clarity */
    .confirm-icon-wrap.theme-danger::before {
      background: rgba(248, 113, 113, .08);
    }

    .confirm-icon-wrap.theme-danger svg {
      color: var(--red);
      filter: drop-shadow(0 0 8px rgba(248, 113, 113, .3));
    }

    [data-theme="light"] .confirm-icon-wrap.theme-download::before {
      background: rgba(37, 99, 235, .06);
    }

    [data-theme="light"] .confirm-icon-ring.ring-blue {
      border-color: rgba(37, 99, 235, .2);
    }

    [data-theme="light"] .cc-info-card {
      background: linear-gradient(135deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
      border-color: rgba(0, 0, 0, .08);
    }

    [data-theme="light"] .cc-row + .cc-row {
      border-color: rgba(0, 0, 0, .06);
    }

    [data-theme="light"] .cc-row .cc-value {
      color: #4f46e5;
    }

    [data-theme="light"] .cc-row:first-child .cc-value {
      color: #0f172a;
    }