/* =========================================================
   VARIABLES
   ========================================================= */
      :root {
        --topbar-height: 64px;
        --topbar-active-height: var(--topbar-height);

        --sidebar-collapsed: 72px;
        --sidebar-expanded: 240px;

        --bg: #000;
        --panel: #111;
        --border: #222;

        --text-main: #fff;
        --text-muted: #9a9a9a;
        --text-reverse: #000;
        --accent: #fff;
        --accent-soft: #1a1a1a;

        --ease: cubic-bezier(0.4, 0, 0.2, 1);
        --speed: 0.35s;
      }

      /* =========================================================
   THEME SYSTEM
   ========================================================= */
      /* Light Theme */
      body.theme-mono-light {
        --bg: #ffffff;
        --panel: #f5f5f5;
        --border: #e5e5e5;

        --text-main: #000000;
        --text-muted: #666;
        --text-reverse: #fff;

        --accent: #000000;
        --accent-soft: #eaeaea;
      }

      /* Gold Theme */
      body.theme-gold {
        --bg: #0b0b0c;
        --panel: #121212;
        --border: rgba(212, 175, 55, 0.25);

        --text-main: #f2f2f2;
        --text-muted: #b5b5b5;
        --text-reverse: #000;

        --accent: #d4af37;
        --accent-soft: rgba(212, 175, 55, 0.08);

        /* NEW */
        --gold-strong: #d4af37;
        --gold-soft-border: rgba(212, 175, 55, 0.35);
        --gold-glow: 0 0 16px rgba(212, 175, 55, 0.25);
      }


      body.theme-mono-dark {
        --bg: #000000;
        --panel: #111111;
        --border: #222;

        --text-main: #ffffff;
        --text-muted: #9a9a9a;
        --text-reverse: #000;

        --accent: #ffffff;
        --accent-soft: #1a1a1a;
      }

      /* =========================================================
   HEADINGS SYSTEM
========================================================= */

h1, h2, h3 {
  color: var(--text-main);
  transition: color var(--speed) var(--ease);
}

/* GOLD THEME ENHANCEMENT */
body.theme-gold h1,
body.theme-gold h2,
body.theme-gold .section-title,
body.theme-gold .settings-header h1,
body.theme-gold .account-header h1 {
  color: var(--accent);
}

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

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: Inter, sans-serif;
        background: var(--bg);
        color: var(--text-main);
        height: 100vh;
        overflow: hidden;
      }

      .main {
        overscroll-behavior: contain;
      }

      /* =========================================================
   SWEETALERT2 THEME INTEGRATION
   ========================================================= */

      /* Popup Container */
      .swal2-popup {
        background: var(--panel) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border) !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
      }

      /* Title */
      .swal2-title {
        color: var(--text-main) !important;
        font-weight: 600;
      }

      /* Content Text */
      .swal2-html-container {
        color: var(--text-muted) !important;
        font-size: 0.95rem;
      }

      /* Confirm Button */
      .swal2-confirm {
        background: var(--accent) !important;
        color: var(--text-reverse) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 18px !important;
        font-weight: 500;
      }

      .swal2-confirm:hover {
        background: var(--text-main) !important;
        color: var(--bg) !important;
      }

      /* Cancel Button */
      .swal2-cancel {
        background: var(--accent-soft) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        padding: 8px 18px !important;
      }

      .swal2-cancel:hover {
        background: var(--border) !important;
      }

      /* Toast Style */
      .swal2-toast {
        background: var(--panel) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
      }

      /* Toast Title */
      .swal2-toast .swal2-title {
        font-size: 0.9rem !important;
        font-weight: 500;
      }

      /* Progress Bar */
      .swal2-timer-progress-bar {
        background: var(--accent) !important;
      }

      /* Icon Colors Adjustment */
      .swal2-icon.swal2-success {
        border-color: var(--accent) !important;
      }

      .swal2-icon.swal2-success .swal2-success-ring {
        border-color: var(--accent-soft) !important;
      }

      .swal2-icon.swal2-success [class^="swal2-success-line"] {
        background-color: var(--accent) !important;
      }

      .swal2-icon.swal2-error {
        border-color: #ff5252 !important;
        color: #ff5252 !important;
      }

      .swal2-icon.swal2-warning {
        border-color: #ff9800 !important;
        color: #ff9800 !important;
      }

      .swal2-icon.swal2-info {
        border-color: var(--accent) !important;
        color: var(--accent) !important;
      }

      /* Backdrop blur for premium feel */
      .swal2-container {
        backdrop-filter: blur(6px);
      }

      body.theme-gold .swal2-confirm {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
      }

      /* =========================================================
   TOPBAR
   ========================================================= */
      .topbar {
        height: var(--topbar-active-height);
        background: var(--bg);
        border-bottom: 1px solid var(--border);

        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;

        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 1000;

        overflow: hidden;

        transition:
          height var(--speed) var(--ease),
          opacity var(--speed) var(--ease);
      }

      /* Hidden state */
      body.topbar-hidden {
        --topbar-active-height: 0px;
      }

      body.topbar-hidden .topbar {
        opacity: 0;
      }

      .topbar-left {
        display: flex;
        align-items: center;
        gap: 15px;
        left: auto;
      }

      .topbar-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .brand {
        font-family: "Playfair Display", serif;
        font-size: 1.2rem;
        color: var(--accent);
      }

      /* =========================================================
   HAMBURGER
   ========================================================= */
      .hamburger {
        width: 28px;
        height: 28px;
        position: relative;
        cursor: pointer;
      }

      #hamburgerIcon line {
        stroke: var(--accent);
        fill: var(--accent);
      }

      /* =========================================================
   THEME TOGGLE ICON
   ========================================================= */
      .theme-toggle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
      }

      .theme-toggle svg {
        position: absolute;
        width: 18px;
        height: 18px;
        fill: none;
        stroke-width: 1.8;
        transition:
          transform 0.4s var(--ease),
          opacity 0.3s ease;

        /* Hidden by default */
        opacity: 0;
        transform: rotate(-90deg) scale(0.5);
      }

      body.theme-gold #icon-sun {
        stroke: #fff;
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      body.theme-mono-light #icon-moon {
        stroke: #000000;
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      body.theme-mono-dark #icon-star {
        stroke: #d4af37;
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      /* =========================================================
            LAYOUT
      ========================================================= */
      .layout {
        display: flex;
        height: 100vh;
        padding-top: var(--topbar-height);
      }

      /* =========================================================
   SIDEBAR
   ========================================================= */
      .sidebar {
        width: var(--sidebar-collapsed);
        min-width: var(--sidebar-collapsed);
        flex-shrink: 0;

        background: var(--panel);
        border-right: 1px solid var(--border);

        display: flex;
        flex-direction: column;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);

        transition:
          width var(--speed) var(--ease),
          min-width var(--speed) var(--ease),
          transform var(--speed) var(--ease);
      }

      .sidebar.expanded {
        width: var(--sidebar-expanded);
        min-width: var(--sidebar-expanded);
      }

      /* Mobile slide mode */
      @media (max-width: 768px) {
        .sidebar {
          position: fixed;
          top: var(--topbar-active-height);
          bottom: 0;
          width: var(--sidebar-expanded);
          min-width: var(--sidebar-expanded);
          left: 0;
          transform: translateX(-100%);
          z-index: 1200;
        }

        .sidebar.expanded {
          transform: translateX(0);
        }

        .sidebar {
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
        }
      }
      @media (min-width: 769px) {
        .overlay {
          display: none !important;
        }
      }

      /* =========================================================
   MENU
   ========================================================= */
      .menu {
        flex: 1;
        padding: 16px 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-radius: 10px;
        cursor: pointer;
        color: var(--text-muted);
        transition:
          background 0.25s ease,
          color 0.25s ease;
      }

      .menu-item:hover {
        background: var(--accent-soft);
        color: var(--accent);
      }

      .sidebar:not(.expanded) .menu-item:hover .simple-tooltip.right {
        opacity: 1;
      }

      .menu-item.active {
        background: var(--accent-soft);
        color: var(--accent);
      }

      .icon-wrap {
        width: 22px;
        height: 22px;
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;
      }

      .icon {
        position: absolute;
        width: 100%;
        height: 100%;

        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      /* Outline style */
      .icon.outline {
        fill: none;
        stroke: currentColor;
        opacity: 0.85;
      }

      /* Solid style */
      .icon.filled {
        fill: currentColor;
        opacity: 0;
        transform: scale(0.8);
      }

      /*  */
      .menu-item:hover .icon.outline {
        transform: scale(1.08);
      }

      /* Active switch */
      .menu-item.active .icon.outline {
        opacity: 0;
        transform: scale(0.6);
      }

      .menu-item.active .icon.filled {
        opacity: 1;
        transform: scale(1);
      }

      .menu-text {
        white-space: nowrap;
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      .sidebar:not(.expanded) .menu-text {
        opacity: 0;
        transform: translateX(-8px);
        pointer-events: none;
      }

      .menu-item {
        position: relative;
      }

      .menu-item::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%) scaleY(0);

        width: 3px;
        height: 60%;
        background: currentColor;

        border-radius: 4px;
        transition: transform 0.25s ease;
      }

      .menu-item.active::before {
        transform: translateY(-50%) scaleY(1);
      }

      /* ======================
        USER HEADER
      ====================== */
      .sidebar-user-header {
        padding: 18px 16px;
        border-bottom: 1px solid var(--border);
        height: 72px;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .menu-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--bg);

        display: flex;
        align-items: center;
        justify-content: center;

        font-weight: 600;
        flex-shrink: 0;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: hidden;
      }

      .user-name {
        font-size: 0.85rem;
        font-weight: 600;
      }

      .user-email {
        font-size: 0.7rem;
        color: var(--text-muted);
      }

      .user-role {
        font-size: 0.65rem;
        color: var(--accent);
        font-weight: 500;
      }

      .user-info {
        white-space: nowrap;
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }

      .sidebar:not(.expanded) .user-info {
        opacity: 0;
        transform: translateX(-8px);
        pointer-events: none;
      }

      /* ======================
   CIRCULAR LOGOUT
====================== */

      .sidebar-footer {
        padding: 16px 0;
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--border);
      }

      .logout-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        background: transparent;
        border: 1px solid var(--border);

        color: var(--text-muted);
        cursor: pointer;

        transition: all 0.25s ease;
        position: relative;
      }

      /* Hover = danger style */
      .logout-circle:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent);
      }

      .logout-icon {
        width: 20px;
        height: 20px;
      }

      /* Blur Overlay On Mobile */
      .overlay {
        position: fixed;
        top: var(--topbar-active-height);
        left: 0;
        right: 0;
        bottom: 0;

        background: rgba(0, 0, 0, 0.2); /* lighter tint */
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--speed);
      }

      .overlay.active {
        opacity: 1;
        pointer-events: auto;
      }
      /* =========================================================
   MAIN
   ========================================================= */
      /* MOBILE WARNING POPUP */

      .mobile-warning {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 18px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        z-index: 9999;

        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
        max-width: 90%;
      }

      .mobile-warning.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
      }

      .mobile-warning-content {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 0.85rem;
        color: var(--text-main);
      }

      .mobile-warning button {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1rem;
        cursor: pointer;
        padding: 4px;
        transition: 0.2s ease;
      }

      .mobile-warning button:hover {
        color: var(--accent);
      }

      /* CONTENT REGION: SCREEN - TOPBAR */
      .layout {
        display: flex;
        height: 100vh;
        padding-top: var(--topbar-active-height);
        transition: padding-top var(--speed) var(--ease);
      }

      .main {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        transition: transform var(--speed) var(--ease);
        transform-origin: left center;
      }

      .main {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
      }

      .main::-webkit-scrollbar {
        width: 6px;
      }

      .main::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 10px;
      }

      .card {
        background: var(--panel);
        border: 1px solid var(--border);
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 20px;
      }

      /* Page Loader */
      .page-loader {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(4px);

        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0;
        pointer-events: none;
        transition: 0.25s ease;
        z-index: 9999;
      }

      .page-loader.active {
        opacity: 1;
        pointer-events: all;
      }

      /* Spinner */
      .spinner {
        width: 36px;
        height: 36px;
        border: 3px solid var(--border);
        border-top: 3px solid var(--accent);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }

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