* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      /* Default background - only applies when no theme classes are present */
      background: linear-gradient(180deg, #6BA3B0 0%, #8FB5C0 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    /* Default background is overridden by theme classes (see theme section at end of file) */
    
    html {
      overflow-x: hidden;
    }
    
    .header {
      /* Default header styles - overridden by theme classes */
      background: #134F5C;
      color: white;
      padding: clamp(20px, 2vw, 25px) clamp(20px, 2vw, 30px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      border-bottom: 4px solid #45818E;
      /* Fixed positioning - content must be pushed down with margin-top */
    }
    
    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    /* Desktop: Logo container should push account button to right */
    @media (min-width: 769px) {
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
      
      .header .logo-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        gap: 10px;
      }
      
      /* Keep logo and page title together on left */
      .header .logo-container > a,
      .header .logo-container > .page-title-header {
        flex: 0 0 auto;
      }
      
      /* Push account button/header buttons to right */
      .header .logo-container .account-container-line1,
      .header .logo-container .header-buttons {
        margin-left: auto;
        flex: 0 0 auto;
      }
      
      /* Homepage header: logo left, nav center, account + credits right */
      .homepage-page .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 0 30px;
      }
      
      .homepage-page .header .logo-container {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      
      /* Account button positioned relative to header, far right before credits */
      .homepage-page .header {
        position: relative;
      }
      
      /* Account button: positioned absolutely, far right edge */
      .homepage-page .header .logo-container .account-container-line1 {
        position: absolute;
        right: 30px; /* Far right, accounting for header padding */
        top: 50%;
        transform: translateY(-50%);
        display: flex !important;
        white-space: nowrap;
        z-index: 100 !important; /* Higher than credits to appear in front */
        visibility: visible !important;
        opacity: 1 !important;
      }
      
      .homepage-page .header .nav-menu {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 0 20px;
      }
      
      /* Credits container positioned to the left of account button */
      .homepage-page .header .header-buttons-container {
        display: flex;
        gap: 10px;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 120px; /* Space for account button (positioned absolutely) */
        position: relative;
        z-index: 1;
      }
    }
    
    .logo-icon {
      width: 80px;
      height: 80px;
      object-fit: contain;
      max-height: calc(100% - 10px); /* Responsive to container height */
      max-width: calc(100% - 10px);
    }
    
    /* Make logo responsive to header height on Homepage and other pages */
    .header .logo-icon {
      height: auto;
      max-height: 60px; /* Max 60px to fit in header */
      width: auto;
      max-width: 60px;
      object-fit: contain;
      /* Scale down proportionally if header is smaller */
      height: min(60px, calc(100% - 10px));
      width: min(60px, calc(100% - 10px));
    }
    
    /* Console page logo - smaller to fit in header */
    .console-header .logo-icon {
      height: auto;
      max-height: 50px;
      width: auto;
      max-width: 50px;
      object-fit: contain;
    }
    
    .console-header .logo-text {
      font-size: 20px;
      font-weight: bold;
      color: white;
    }
    
    .logo-text {
      font-size: 24px;
      font-weight: bold;
      color: white;
    }
    
    .page-title-header {
      font-size: clamp(20px, 2vw, 24px);
      font-weight: bold;
      color: white;
      margin-left: clamp(15px, 1.5vw, 20px);
    }
    
    .nav-menu {
      display: flex;
      gap: clamp(15px, 1.5vw, 25px);
      align-items: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
    
    
    .nav-item {
      /* Default nav-item styles - overridden by theme classes */
      color: white;
      text-decoration: none;
      font-size: clamp(14px, 1.3vw, 16px);
      font-weight: 500;
      transition: all 0.2s;
      padding: clamp(5px, 0.5vw, 8px) clamp(10px, 1vw, 15px);
      border-radius: 5px;
      border: none !important;
      background: transparent;
    }
    
    .nav-item:hover {
      background: transparent;
      border: none !important;
    }
    
    .header-buttons-container {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    .requests-container {
      position: relative;
    }
    
    .requests-button {
      background: rgba(255, 255, 255, 0.1);
      border: 4px solid #45818E;
      color: white;
      padding: clamp(8px, 0.8vw, 10px) clamp(15px, 1.5vw, 20px);
      border-radius: 5px;
      cursor: pointer;
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 500;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      gap: clamp(6px, 0.6vw, 8px);
    }
    
    .requests-button:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    
    .requests-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff4444;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
      border: 2px solid #134F5C;
      z-index: 10;
    }
    
    .requests-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      min-width: 350px;
      max-width: 500px;
      max-height: 500px;
      display: none;
      overflow: hidden;
      border: 4px solid #45818E;
      z-index: 1000;
      transition: opacity 1.5s ease, transform 1.5s ease;
      opacity: 0;
      transform: translateY(-10px);
    }
    
    .requests-dropdown.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
    
    .requests-dropdown-header {
      padding: 12px 15px;
      background: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      font-weight: 600;
      color: #333;
      font-size: 14px;
    }
    
    .requests-list {
      max-height: 450px;
      overflow-y: auto;
      padding: 10px;
    }
    
    .requests-loading {
      padding: 20px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }
    
    .requests-empty {
      padding: 20px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }
    
    .requests-separator {
      padding: 10px 15px;
      margin: 15px 0 10px 0;
      font-weight: 600;
      color: #666;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .clear-history-btn {
      cursor: pointer;
      font-size: 14px;
      opacity: 0.6;
      transition: opacity 0.2s;
    }
    
    .clear-history-btn:hover {
      opacity: 1;
    }
    
    .request-item {
      padding: 12px;
      margin-bottom: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      background: #f9f9f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    
    .request-item-info {
      flex: 1;
      min-width: 0;
    }
    
    .request-item-name {
      font-weight: 600;
      color: #333;
      font-size: 13px;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .request-item-files {
      font-size: 12px;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .request-item-status {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .request-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid #45818E;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .request-download-btn {
      padding: 6px 12px;
      background: #28a745;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      transition: background 0.2s;
    }
    
    .request-download-btn:hover {
      background: #218838;
    }
    
    .request-cancel-btn {
      padding: 6px 12px;
      background: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      transition: background 0.2s;
    }
    
    .request-cancel-btn:hover {
      background: #c82333;
    }
    
    .account-container {
      position: relative;
    }
    
    .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: var(--text-primary, white) !important;
      padding: clamp(8px, 0.8vw, 10px) clamp(15px, 1.5vw, 20px);
      border-radius: 5px;
      cursor: pointer;
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 500;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: clamp(6px, 0.6vw, 8px);
    }
    
    .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    .account-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: var(--header-bg, rgba(19, 79, 92, 0.98)) !important;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
      min-width: 200px;
      display: none;
      overflow: hidden;
      border: 2px solid var(--accent-color, #45818E) !important;
      z-index: 10000;
    }
    
    .account-dropdown.show {
      display: block;
    }
    
    .account-dropdown-header {
      padding: 12px 15px;
      background: var(--header-bg, rgba(19, 79, 92, 0.98)) !important;
      border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      font-weight: 600;
      color: var(--text-primary, white) !important;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    
    .account-dropdown-separator {
      height: 1px;
      background: var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      margin: 0;
      border: none;
    }
    
    .account-dropdown-item {
      padding: 12px 15px;
      color: var(--text-primary, white) !important;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      display: block;
      text-decoration: none;
      border: none;
      width: 100%;
      text-align: left;
      font-size: 14px;
      background: var(--header-bg, rgba(19, 79, 92, 0.98)) !important;
    }
    
    .account-dropdown-item:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      color: var(--accent-color, white) !important;
    }
    
    /* Color scheme specific rules for account dropdown (matching console page) */
    .color-scheme-1 .account-dropdown,
    .color-scheme-2 .account-dropdown,
    .color-scheme-3 .account-dropdown,
    .color-scheme-4 .account-dropdown,
    .color-scheme-5 .account-dropdown,
    .color-scheme-6 .account-dropdown,
    .color-scheme-7 .account-dropdown,
    .color-scheme-8 .account-dropdown,
    .color-scheme-9 .account-dropdown,
    .color-scheme-10 .account-dropdown,
    .color-scheme-11 .account-dropdown,
    .color-scheme-12 .account-dropdown,
    .color-scheme-13 .account-dropdown,
    .color-scheme-14 .account-dropdown,
    .color-scheme-15 .account-dropdown,
    .color-scheme-16 .account-dropdown {
      background: var(--header-bg) !important;
      border-color: var(--accent-color) !important;
    }
    
    .color-scheme-1 .account-dropdown-header,
    .color-scheme-2 .account-dropdown-header,
    .color-scheme-3 .account-dropdown-header,
    .color-scheme-4 .account-dropdown-header,
    .color-scheme-5 .account-dropdown-header,
    .color-scheme-6 .account-dropdown-header,
    .color-scheme-7 .account-dropdown-header,
    .color-scheme-8 .account-dropdown-header,
    .color-scheme-9 .account-dropdown-header,
    .color-scheme-10 .account-dropdown-header,
    .color-scheme-11 .account-dropdown-header,
    .color-scheme-12 .account-dropdown-header,
    .color-scheme-13 .account-dropdown-header,
    .color-scheme-14 .account-dropdown-header,
    .color-scheme-15 .account-dropdown-header,
    .color-scheme-16 .account-dropdown-header {
      background: var(--header-bg) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--card-border) !important;
    }
    
    .color-scheme-1 .account-dropdown-item,
    .color-scheme-2 .account-dropdown-item,
    .color-scheme-3 .account-dropdown-item,
    .color-scheme-4 .account-dropdown-item,
    .color-scheme-5 .account-dropdown-item,
    .color-scheme-6 .account-dropdown-item,
    .color-scheme-7 .account-dropdown-item,
    .color-scheme-8 .account-dropdown-item,
    .color-scheme-9 .account-dropdown-item,
    .color-scheme-10 .account-dropdown-item,
    .color-scheme-11 .account-dropdown-item,
    .color-scheme-12 .account-dropdown-item,
    .color-scheme-13 .account-dropdown-item,
    .color-scheme-14 .account-dropdown-item,
    .color-scheme-15 .account-dropdown-item,
    .color-scheme-16 .account-dropdown-item {
      background: var(--header-bg) !important;
      color: var(--text-primary) !important;
    }
    
    .color-scheme-1 .account-dropdown-item:hover,
    .color-scheme-2 .account-dropdown-item:hover,
    .color-scheme-3 .account-dropdown-item:hover,
    .color-scheme-4 .account-dropdown-item:hover,
    .color-scheme-5 .account-dropdown-item:hover,
    .color-scheme-6 .account-dropdown-item:hover,
    .color-scheme-7 .account-dropdown-item:hover,
    .color-scheme-8 .account-dropdown-item:hover,
    .color-scheme-9 .account-dropdown-item:hover,
    .color-scheme-10 .account-dropdown-item:hover,
    .color-scheme-11 .account-dropdown-item:hover,
    .color-scheme-12 .account-dropdown-item:hover,
    .color-scheme-13 .account-dropdown-item:hover,
    .color-scheme-14 .account-dropdown-item:hover,
    .color-scheme-15 .account-dropdown-item:hover,
    .color-scheme-16 .account-dropdown-item:hover {
      background: var(--hover-bg) !important;
      color: var(--accent-color, white) !important;
    }
    
    .color-scheme-1 .account-dropdown-separator,
    .color-scheme-2 .account-dropdown-separator,
    .color-scheme-3 .account-dropdown-separator,
    .color-scheme-4 .account-dropdown-separator,
    .color-scheme-5 .account-dropdown-separator,
    .color-scheme-6 .account-dropdown-separator,
    .color-scheme-7 .account-dropdown-separator,
    .color-scheme-8 .account-dropdown-separator,
    .color-scheme-9 .account-dropdown-separator,
    .color-scheme-10 .account-dropdown-separator,
    .color-scheme-11 .account-dropdown-separator,
    .color-scheme-12 .account-dropdown-separator,
    .color-scheme-13 .account-dropdown-separator,
    .color-scheme-14 .account-dropdown-separator,
    .color-scheme-15 .account-dropdown-separator,
    .color-scheme-16 .account-dropdown-separator {
      background: var(--card-border) !important;
      border: none !important;
    }
    
    /* Force account dropdown styling to match console page - ensure no transparency */
    body .account-dropdown,
    .homepage-page .account-dropdown,
    .plans-page .account-dropdown,
    .contact-page .account-dropdown,
    .about-page .account-dropdown {
      background: var(--header-bg, rgba(19, 79, 92, 0.98)) !important;
      border: 2px solid var(--accent-color, #45818E) !important;
      opacity: 1 !important;
    }
    
    body .account-dropdown-header,
    .homepage-page .account-dropdown-header,
    .plans-page .account-dropdown-header,
    .contact-page .account-dropdown-header,
    .about-page .account-dropdown-header {
      background: var(--header-bg, rgba(19, 79, 92, 0.98)) !important;
      color: var(--text-primary, white) !important;
      border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      opacity: 1 !important;
    }
    
    body .account-dropdown-item,
    .homepage-page .account-dropdown-item,
    .plans-page .account-dropdown-item,
    .contact-page .account-dropdown-item,
    .about-page .account-dropdown-item {
      background: var(--header-bg, rgba(19, 79, 92, 0.98)) !important;
      color: var(--text-primary, white) !important;
      opacity: 1 !important;
    }
    
    body .account-dropdown-item:hover,
    .homepage-page .account-dropdown-item:hover,
    .plans-page .account-dropdown-item:hover,
    .contact-page .account-dropdown-item:hover,
    .about-page .account-dropdown-item:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      color: var(--accent-color, white) !important;
    }
    
    body .account-dropdown-separator,
    .homepage-page .account-dropdown-separator,
    .plans-page .account-dropdown-separator,
    .contact-page .account-dropdown-separator,
    .about-page .account-dropdown-separator {
      background: var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      border: none !important;
    }
    
    /* Credits Display Styles */
    .credits-display {
      padding: 8px 12px;
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      border-radius: 4px;
      color: var(--text-primary, white) !important;
      font-size: 14px;
      white-space: nowrap;
      transition: all 0.3s;
    }
    
    .credits-display:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    .add-user-button {
      background: rgba(255, 255, 255, 0.1);
      border: 4px solid #45818E;
      color: white;
      padding: clamp(8px, 0.8vw, 10px);
      width: clamp(40px, 4vw, 45px);
      height: clamp(40px, 4vw, 45px);
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .add-user-button:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    
    /* Dialog Styles */
    .dialog-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none !important;
      align-items: center;
      justify-content: center;
      z-index: 99999 !important;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.2s;
    }
    
    .dialog-overlay.show {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .dialog {
      background: white !important;
      border-radius: 10px;
      padding: 25px;
      max-width: 95vw !important; /* Override inline max-width: 500px */
      width: fit-content !important;
      min-width: 300px;
      max-height: 95vh;
      overflow-x: visible;
      overflow-y: auto;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      border: 4px solid #45818E;
    }
    
    /* Ensure dialog content can expand horizontally */
    .dialog-content,
    .dialog-body {
      overflow-x: visible;
      width: auto;
    }
    
    /* Ensure dialog body expands with content */
    .dialog-body > * {
      overflow-x: visible;
    }
    
    /* Override any inline max-width styles on dialogs */
    .dialog[style*="max-width"] {
      max-width: 95vw !important;
    }
    
    /* Force ALL dialogs to have white background - override any inline styles */
    .dialog,
    div.dialog,
    [class*="dialog"] .dialog,
    .dialog-overlay .dialog {
      background: white !important;
    }
    
    /* UNIFIED DIALOG TITLE STYLING - Black, Bold, Override ALL inline styles */
    .dialog-title,
    .dialog h2,
    .dialog h3,
    .dialog h4,
    [class*="dialog"] .dialog-title,
    [class*="dialog"] h2,
    [class*="dialog"] h3,
    [class*="dialog-overlay"] .dialog-title,
    [class*="dialog-overlay"] h2,
    [class*="dialog-overlay"] h3,
    [id*="Dialog"] .dialog-title,
    [id*="Dialog"] h2,
    [id*="Dialog"] h3,
    #messageDialogTitle,
    .dialog [id*="Title"],
    .dialog-overlay [id*="Title"],
    .dialog h3.dialog-title,
    div.dialog-title,
    [class*="dialog"] div.dialog-title {
      font-size: 24px !important;
      font-weight: bold !important;
      color: black !important;
      margin-bottom: 20px !important;
      margin-top: 0 !important;
    }
    
    /* Exception: Red titles for delete confirmations - but still bold */
    .dialog h3.dialog-title[style*="color: #dc3545"],
    .dialog h3[style*="color: #dc3545"] {
      color: #dc3545 !important;
      font-weight: bold !important;
    }
    
    /* UNIFIED DIALOG CONTENT STYLING - Black text */
    .dialog-content,
    .dialog p,
    .dialog div:not(.dialog-buttons):not(.dialog-button),
    [class*="dialog"] .dialog-content,
    [id*="Dialog"] .dialog-content,
    #messageDialogContent {
      color: black !important;
    }
    
    /* All dialog text should be black (except buttons) */
    .dialog,
    .dialog *:not(button):not(.dialog-button):not(.dialog-buttons) {
      color: black !important;
    }
    
    /* Ensure dialog labels, inputs, selects, textareas are black */
    .dialog label,
    .dialog input:not([type="button"]):not([type="submit"]):not([type="reset"]),
    .dialog select,
    .dialog textarea {
      color: black !important;
    }
    
    /* Dialog labels and inputs */
    .dialog label,
    .dialog-field label {
      color: black !important;
    }
    
    /* Dialog input text */
    .dialog input[type="text"],
    .dialog input[type="email"],
    .dialog input[type="password"],
    .dialog input[type="number"],
    .dialog select,
    .dialog textarea {
      color: black !important;
    }
    
    .dialog-field {
      margin-bottom: 15px;
    }
    
    .dialog-field label {
      display: block;
      margin-bottom: 5px;
      color: #333;
      font-weight: 500;
    }
    
    .dialog-field input,
    .dialog-field select,
    .dialog-field textarea {
      width: 100%;
      padding: 8px;
      border: 2px solid #45818E;
      border-radius: 5px;
      font-size: 14px;
    }
    
    .dialog-field textarea {
      resize: vertical;
      min-height: 60px;
    }
    
    .duration-fields {
      display: flex;
      gap: 10px;
    }
    
    .duration-fields input {
      flex: 1;
    }
    
    .dialog-buttons {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
    
    .dialog-button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      color: white !important; /* All button text must be white */
      font-weight: 500;
      transition: background 0.2s;
    }
    
    .dialog-button-primary {
      background: var(--accent-color, #134F5C) !important;
      color: white !important;
      border-radius: 5px !important;
      padding: 10px 20px !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      border: none !important;
      cursor: pointer !important;
      display: inline-block !important;
      text-align: center !important;
      min-width: 80px !important;
      box-sizing: border-box !important;
    }
    
    .dialog-button-primary:hover {
      opacity: 0.9;
    }
    
    /* OK buttons - gray background like Edit/Delete buttons */
    .dialog-footer .dialog-button-primary,
    button.dialog-button-primary[onclick*="closeDialog"],
    button.dialog-button-primary[onclick*="messageDialog"],
    #messageDialog .dialog-button-primary {
      background: #6c757d !important; /* Gray like Edit button */
      color: white !important;
      border-radius: 5px !important;
      padding: 8px 16px !important; /* Smaller padding like Edit/Delete */
      font-size: 14px !important;
      font-weight: 500 !important;
      border: none !important;
      cursor: pointer !important;
      display: inline-block !important;
      text-align: center !important;
      min-width: auto !important;
      width: auto !important;
      height: auto !important;
      clip-path: none !important;
      shape-outside: none !important;
      transform: none !important;
      position: relative !important;
      aspect-ratio: auto !important;
    }
    
    .dialog-footer .dialog-button-primary:hover,
    button.dialog-button-primary[onclick*="closeDialog"]:hover,
    button.dialog-button-primary[onclick*="messageDialog"]:hover,
    #messageDialog .dialog-button-primary:hover {
      background: #5a6268 !important; /* Darker gray on hover */
      opacity: 1 !important;
    }
    
    /* Override any circular button styles that might affect OK button */
    .dialog-button-primary[class*="dialog-button"],
    button.dialog-button.dialog-button-primary,
    .dialog-footer button.dialog-button-primary,
    #messageDialog button.dialog-button-primary {
      border-radius: 5px !important;
      width: auto !important;
      height: auto !important;
      aspect-ratio: auto !important;
    }
    
    /* Ensure no circular styles leak to OK buttons */
    button.dialog-button-primary:not(.dialog-close-button):not(.chat-close):not(.chat-clear) {
      border-radius: 5px !important;
    }
    
    /* Unified Cancel Button Style - Applied to all Cancel buttons */
    .dialog-button-secondary {
      background: #6c757d !important; /* Dark grey for Cancel/Close */
      color: white !important;
      border-radius: 5px !important;
      padding: 10px 20px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      border: none !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      width: auto !important;
      height: 38px !important;
      min-width: auto !important;
      min-height: 38px !important;
      max-height: 38px !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: 1 !important;
      flex-shrink: 0 !important;
      vertical-align: top !important;
      font-family: inherit !important;
      line-height: 1 !important;
    }
    
    .dialog-button-secondary:hover:not(:disabled) {
      background: #5a6268 !important;
    }
    
    /* Ensure footer buttons are properly laid out */
    .dialog-footer {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 15px 0 0 0 !important;
      margin-top: 20px !important;
      border-top: 1px solid #e0e0e0 !important;
    }
    
    .dialog-footer button {
      margin: 0 !important;
      flex-shrink: 0 !important;
    }
    
    /* Cancel buttons should be RED */
    .cancel-button,
    button.cancel-button,
    .dialog-button-secondary.cancel-button {
      background: #ff6b6b !important; /* Red */
      color: white !important;
    }
    
    .dialog-button-secondary:hover {
      background: #5a6268 !important;
    }
    
    .dialog-button-danger {
      background: #d32f2f !important; /* Red for Delete */
      color: white !important;
    }
    
    .dialog-button-danger:hover {
      background: #b71c1c !important;
    }
    
    /* Green buttons: Save, Update, Confirm, Download, Ban (when not banned), Revoke (when not revoked) */
    .save-button, .update-button, .confirm-button, .download-button,
    button:contains("Save"), button:contains("Update"), button:contains("Confirm"), button:contains("Download") {
      background: #51cf66 !important; /* Green */
      color: white !important;
    }
    
    /* Red buttons: Shutdown, Restart, Cancel, Close, Delete, Unrevoke, Unban */
    .shutdown-button, .restart-button, .cancel-button, .close-button,
    .delete-button, .unrevoke-button, .unban-button {
      background: #ff6b6b !important; /* Red */
      color: white !important;
    }
    
    /* Color scheme buttons: Add, Convert, Compress */
    .add-button, .convert-button, .compress-button,
    button:contains("Add"), button:contains("Convert"), button:contains("Compress") {
      background: var(--accent-color, #134F5C) !important;
      color: white !important;
    }
    
    /* Dark grey buttons: Clear, Edit */
    .clear-button, .edit-button,
    button:contains("Clear"), button:contains("Edit") {
      background: #6c757d !important; /* Dark grey */
      color: white !important;
    }
    
    .message-dialog-success .dialog-title {
      color: black !important;
    }
    
    .message-dialog-error .dialog-title {
      color: black !important;
    }
    
    .message-dialog-info .dialog-title {
      color: black !important;
    }
    
    .content {
      padding: 2vw;
      max-width: 95vw;
      margin: 0 auto;
      width: 100%;
      overflow-x: visible; /* Allow separators to break out */
    }
    
    /* Content styling for Contact and About pages - Theme-aware */
    .contact-page .content,
    .about-page .content {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      margin-bottom: 40px;
      padding: 40px;
      text-align: center;
      background: var(--card-bg, rgba(26, 26, 46, 0.95));
      backdrop-filter: blur(20px);
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      color: var(--text-primary, #e0e0e0);
    }
    
    .contact-page .content h1,
    .about-page .content h1 {
      font-size: clamp(32px, 4vw, 48px);
      font-weight: bold;
      margin-bottom: 20px;
      color: var(--text-primary, #e0e0e0);
    }
    
    .contact-page .content p,
    .about-page .content p {
      font-size: clamp(16px, 2vw, 20px);
      line-height: 1.6;
      margin-bottom: 15px;
      color: var(--text-primary, #e0e0e0);
    }
    
    /* Theme-aware content styling - Dark themes get light text */
    body.color-scheme-2 .contact-page .content,
    body.color-scheme-2 .about-page .content,
    body.color-scheme-8 .contact-page .content,
    body.color-scheme-8 .about-page .content {
      background: rgba(26, 26, 26, 0.9) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    body.color-scheme-2 .contact-page .content h1,
    body.color-scheme-2 .about-page .content h1,
    body.color-scheme-8 .contact-page .content h1,
    body.color-scheme-8 .about-page .content h1 {
      color: rgba(224, 224, 224, 0.95) !important;
    }
    
    body.color-scheme-2 .contact-page .content p,
    body.color-scheme-2 .about-page .content p,
    body.color-scheme-8 .contact-page .content p,
    body.color-scheme-8 .about-page .content p {
      color: rgba(200, 200, 200, 0.9) !important;
    }
    
    /* Theme-aware content styling - Light themes get dark text */
    body.color-scheme-1 .contact-page .content,
    body.color-scheme-1 .about-page .content,
    body.color-scheme-3 .contact-page .content,
    body.color-scheme-3 .about-page .content,
    body.color-scheme-4 .contact-page .content,
    body.color-scheme-4 .about-page .content,
    body.color-scheme-5 .contact-page .content,
    body.color-scheme-5 .about-page .content,
    body.color-scheme-6 .contact-page .content,
    body.color-scheme-6 .about-page .content,
    body.color-scheme-7 .contact-page .content,
    body.color-scheme-7 .about-page .content,
    body.color-scheme-9 .contact-page .content,
    body.color-scheme-9 .about-page .content,
    body.color-scheme-10 .contact-page .content,
    body.color-scheme-10 .about-page .content,
    body.color-scheme-11 .contact-page .content,
    body.color-scheme-11 .about-page .content,
    body.color-scheme-12 .contact-page .content,
    body.color-scheme-12 .about-page .content,
    body.color-scheme-13 .contact-page .content,
    body.color-scheme-13 .about-page .content,
    body.color-scheme-14 .contact-page .content,
    body.color-scheme-14 .about-page .content,
    body.color-scheme-15 .contact-page .content,
    body.color-scheme-15 .about-page .content {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    body.color-scheme-1 .contact-page .content h1,
    body.color-scheme-1 .about-page .content h1,
    body.color-scheme-3 .contact-page .content h1,
    body.color-scheme-3 .about-page .content h1,
    body.color-scheme-4 .contact-page .content h1,
    body.color-scheme-4 .about-page .content h1,
    body.color-scheme-5 .contact-page .content h1,
    body.color-scheme-5 .about-page .content h1,
    body.color-scheme-6 .contact-page .content h1,
    body.color-scheme-6 .about-page .content h1,
    body.color-scheme-7 .contact-page .content h1,
    body.color-scheme-7 .about-page .content h1,
    body.color-scheme-9 .contact-page .content h1,
    body.color-scheme-9 .about-page .content h1,
    body.color-scheme-10 .contact-page .content h1,
    body.color-scheme-10 .about-page .content h1,
    body.color-scheme-11 .contact-page .content h1,
    body.color-scheme-11 .about-page .content h1,
    body.color-scheme-12 .contact-page .content h1,
    body.color-scheme-12 .about-page .content h1,
    body.color-scheme-13 .contact-page .content h1,
    body.color-scheme-13 .about-page .content h1,
    body.color-scheme-14 .contact-page .content h1,
    body.color-scheme-14 .about-page .content h1,
    body.color-scheme-15 .contact-page .content h1,
    body.color-scheme-15 .about-page .content h1 {
      color: #333 !important;
    }
    
    body.color-scheme-1 .contact-page .content p,
    body.color-scheme-1 .about-page .content p,
    body.color-scheme-3 .contact-page .content p,
    body.color-scheme-3 .about-page .content p,
    body.color-scheme-4 .contact-page .content p,
    body.color-scheme-4 .about-page .content p,
    body.color-scheme-5 .contact-page .content p,
    body.color-scheme-5 .about-page .content p,
    body.color-scheme-6 .contact-page .content p,
    body.color-scheme-6 .about-page .content p,
    body.color-scheme-7 .contact-page .content p,
    body.color-scheme-7 .about-page .content p,
    body.color-scheme-9 .contact-page .content p,
    body.color-scheme-9 .about-page .content p,
    body.color-scheme-10 .contact-page .content p,
    body.color-scheme-10 .about-page .content p,
    body.color-scheme-11 .contact-page .content p,
    body.color-scheme-11 .about-page .content p,
    body.color-scheme-12 .contact-page .content p,
    body.color-scheme-12 .about-page .content p,
    body.color-scheme-13 .contact-page .content p,
    body.color-scheme-13 .about-page .content p,
    body.color-scheme-14 .contact-page .content p,
    body.color-scheme-14 .about-page .content p,
    body.color-scheme-15 .contact-page .content p,
    body.color-scheme-15 .about-page .content p {
      color: #555 !important;
    }
    
    /* Dark Purple (color-scheme-16) content styling */
    body.color-scheme-16 .contact-page .content,
    body.color-scheme-16 .about-page .content {
      background: var(--card-bg, rgba(26, 26, 46, 0.95)) !important;
      border-color: var(--card-border, rgba(102, 126, 234, 0.3)) !important;
      color: var(--text-primary, #e0e0e0) !important;
    }
    
    body.color-scheme-16 .contact-page .content h1,
    body.color-scheme-16 .about-page .content h1 {
      color: var(--text-primary, #e0e0e0) !important;
    }
    
    body.color-scheme-16 .contact-page .content p,
    body.color-scheme-16 .about-page .content p {
      color: var(--text-primary, #e0e0e0) !important;
    }
    
    .page-title {
      font-size: clamp(24px, 3vw, 32px);
      color: white;
      margin-bottom: 2vw;
    }
    
    /* Dashboard Section */
    .dashboard-section {
      min-height: 12vh;
      margin-bottom: 2vw;
      background: linear-gradient(180deg, #45818E 0%, #6BA3B0 100%);
      border-radius: 10px;
      padding: 1.5vw;
      padding-top: 3.5vw;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      color: white;
      position: relative;
      width: 100%;
      border: 4px solid #45818E;
      flex-wrap: wrap;
      align-items: stretch;
    }
    
    .dashboard-title {
      position: absolute;
      top: -1vw;
      left: 1.5vw;
      font-size: clamp(18px, 2vw, 26px);
      font-weight: bold;
      color: white;
      background: #134F5C;
      padding: 0.4vw 1.2vw;
      border-radius: 5px;
      border: 4px solid #134F5C;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    
    .stat-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: clamp(10px, 1vw, 15px) clamp(15px, 1.5vw, 20px);
      position: relative;
      min-width: 0;
      overflow: hidden;
    }
    
    .stat-card:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 10%;
      bottom: 10%;
      width: 1px;
      background: rgba(255, 255, 255, 0.3);
    }
    
    .stat-label {
      font-size: clamp(14px, 1.5vw, 20px);
      font-weight: bold;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.8vw;
      text-align: center;
    }
    
    .stat-value {
      font-size: clamp(24px, 2.5vw, 32px);
      color: rgba(255, 255, 255, 0.9);
      font-weight: bold;
      text-align: center;
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      line-height: 1.2;
    }
    
    .stat-value.no-data {
      font-size: clamp(12px, 1vw, 14px);
      color: rgba(255, 255, 255, 0.7);
      font-weight: normal;
      font-style: italic;
      text-align: center;
    }
    
    /* Panels Section */
    .panels-section {
      display: flex;
      gap: 1.5vw;
      height: calc(100vh - 25vh); /* Fixed height based on viewport, responsive ratio */
      min-height: 450px; /* Minimum height for small screens */
      max-height: 900px; /* Maximum height for very large screens */
      width: 100%;
    }
    
    /* Mobile/Phone view - reset nav-menu positioning */
    @media (max-width: 768px) and (orientation: portrait) {
      .nav-menu {
        position: static;
        transform: none;
        left: auto;
        flex: 1;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .nav-menu::-webkit-scrollbar {
        display: none;
      }
    }
    
    @media (max-width: 768px) {
      .panels-section {
        height: calc(100vh - 30vh);
        min-height: 350px;
      }
    }
    
    @media (min-width: 1920px) {
      .panels-section {
        height: calc(100vh - 20vh);
        max-height: 1000px;
      }
    }
    
    .panel {
      flex: 1;
      background: #45818E;
      border-radius: 10px;
      padding: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      border: 4px solid #45818E;
      height: 100%; /* Fixed height matching parent */
      max-height: 100%; /* Prevent overflow */
    }
    
    .panel.panel-wide {
      flex: 2.1;
    }
    
    .panel:nth-child(1) {
      background: #45818E;
    }
    
    .panel:nth-child(2) {
      background: #45818E;
    }
    
    .panel:nth-child(3) {
      background: #45818E;
    }
    
    .panel:nth-child(4) {
      background: #45818E;
    }
    
    .panel-header {
      font-size: clamp(16px, 1.5vw, 20px);
      font-weight: bold;
      color: white;
      margin-bottom: 0;
      padding: clamp(15px, 1.5vw, 20px);
      padding-bottom: clamp(12px, 1.2vw, 15px);
      border-bottom: 2px solid #45818E;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: clamp(10px, 1vw, 15px);
      flex-shrink: 0;
      background: #134F5C;
      border-radius: 10px 10px 0 0;
    }
    
    .panel-header-count {
      font-size: clamp(20px, 2vw, 24px);
      font-weight: bold;
      color: white;
    }
    
    .user-search-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      max-width: 360px;
      margin: 0 clamp(10px, 1vw, 15px);
      position: relative;
    }
    
    .user-search-input {
      flex: 1;
      padding: clamp(6px, 0.6vw, 8px) clamp(10px, 1vw, 12px);
      padding-right: clamp(30px, 3vw, 35px);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.2);
      color: black;
      font-size: clamp(14px, 1.4vw, 16px);
      outline: none;
      transition: all 0.2s;
    }
    
    .user-search-input::placeholder {
      color: rgba(0, 0, 0, 0.5);
    }
    
    .user-search-input:focus {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }
    
    .user-search-clear {
      position: absolute;
      right: clamp(8px, 0.8vw, 10px);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.6);
      transition: color 0.2s;
    }
    
    .user-search-clear:hover {
      color: rgba(0, 0, 0, 0.9);
    }
    
    .panel-content {
      flex: 1;
      color: black;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      max-height: 100%;
      padding: clamp(15px, 1.5vw, 20px);
      padding-right: clamp(20px, 2vw, 25px);
      background: linear-gradient(180deg, #6BA3B0 0%, #8FB5C0 100%);
      border-radius: 0 0 10px 10px;
      scroll-behavior: smooth; /* Smooth scrolling */
    }
    
    /* Custom scrollbar styling - slim and smooth */
    .panel-content::-webkit-scrollbar {
      width: 4px; /* Slimmer scrollbar */
    }
    
    .panel-content::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }
    
    .panel-content::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      transition: background 0.2s;
    }
    
    .panel-content::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
    
    /* Firefox scrollbar */
    .panel-content {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
    }
    
    /* Logs panel specific styling */
    .log-content {
      font-family: 'Courier New', monospace;
      font-size: clamp(11px, 1vw, 13px);
      line-height: 1.6;
      color: rgba(0, 0, 0, 0.8);
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    
    .log-entry {
      margin-bottom: 4px;
      padding: 2px 0;
    }
    
    .log-entry.error {
      color: #d32f2f;
    }
    
    .log-entry.warning {
      color: #f57c00;
    }
    
    .log-entry.info {
      color: #1976d2;
    }
    
    .user-list {
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 1vw, 12px);
    }
    
    .user-item {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 8px;
      padding: clamp(12px, 1.2vw, 15px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.2s;
      border: 2px solid #45818E;
      margin-bottom: clamp(10px, 1vw, 12px);
    }
    
    .user-item:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    
    .user-item.banned {
      opacity: 0.6;
      border-left: 4px solid #ff6b6b;
    }
    
    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .user-name {
      font-weight: 600;
      font-size: clamp(14px, 1.2vw, 16px);
      color: black;
    }
    
    .user-email {
      font-size: clamp(12px, 1vw, 14px);
      color: rgba(0, 0, 0, 0.7);
    }
    
    .user-type {
      font-size: clamp(11px, 0.9vw, 13px);
      color: rgba(0, 0, 0, 0.6);
    }
    
    .user-actions {
      display: flex;
      gap: clamp(8px, 0.8vw, 10px);
      align-items: center;
    }
    
    .icon-button {
      background: rgba(0, 0, 0, 0.1);
      color: black;
      border: 2px solid rgba(0, 0, 0, 0.3);
      padding: clamp(4.8px, 0.48vw, 6.4px) clamp(9.6px, 0.96vw, 12.8px);
      border-radius: 5px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      position: relative;
      font-size: clamp(9.6px, 0.88vw, 11.2px);
      font-weight: 500;
      white-space: nowrap;
    }
    
    .user-actions {
      display: flex;
      flex-direction: column;
      gap: clamp(6px, 0.6vw, 8px);
      align-items: flex-start;
    }
    
    .user-actions-row {
      display: flex;
      gap: clamp(6px, 0.6vw, 8px);
      width: 100%;
    }
    
    .user-actions-row.single {
      justify-content: flex-start;
    }
    
    .user-actions-row.single .icon-button {
      flex: 0 0 auto;
    }
    
    .icon-button:hover {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(0, 0, 0, 0.5);
      transform: translateY(-1px);
    }
    
    .ban-button {
      background: #51cf66 !important;
      color: white !important;
    }
    
    .ban-button:hover {
      background: #40c057 !important;
    }
    
    .ban-button.unban {
      background: #ff6b6b !important;
      color: white !important;
    }
    
    .ban-button.unban:hover {
      background: #ff5252 !important;
    }
    
    .delete-button {
      background: #ff6b6b !important;
      color: white !important;
    }
    
    .delete-button:hover {
      background: #ff5252 !important;
    }
    
    .revoke-button {
      background: #51cf66 !important; /* Green when not revoked */
      color: white !important;
    }
    
    .revoke-button.revoked {
      background: #ff6b6b !important; /* Red when revoked */
      color: white !important;
    }
    
    .icon-button.revoke-button.revoked {
      background: #ff6b6b !important; /* Red for unrevoke */
    }
    
    .icon-button.revoke-button:not(.revoked) {
      background: #51cf66 !important; /* Green for revoke */
    }
    
    .revoke-button:hover {
      opacity: 0.9;
    }
    
    .edit-button, .usage-button {
      background: #6c757d !important; /* Dark grey */
      color: white !important;
      border: none !important;
    }
    
    .edit-button:hover, .usage-button:hover {
      background: #5a6268 !important;
    }
    
    /* Clear button - dark grey */
    .clear-button {
      background: #6c757d !important;
      color: white !important;
    }
    
    /* Green buttons: Ban (when not banned), Revoke (when not revoked), Download, Save, Update, Confirm */
    .ban-button:not(.unban), 
    .revoke-button:not(.revoked),
    .download-button,
    .save-button,
    .update-button,
    .confirm-button,
    button.dialog-button-primary[onclick*="save"],
    button.dialog-button-primary[onclick*="Save"],
    button.dialog-button-primary[onclick*="update"],
    button.dialog-button-primary[onclick*="Update"],
    button.dialog-button-primary[onclick*="confirm"],
    button.dialog-button-primary[onclick*="Confirm"],
    button.dialog-button-primary[onclick*="download"],
    button.dialog-button-primary[onclick*="Download"] {
      background: #51cf66 !important; /* Green */
      color: white !important;
    }
    
    /* Red buttons: Shutdown, Restart, Cancel, Close, Delete, Unrevoke, Unban */
    .shutdown-button,
    .restart-button,
    .cancel-button,
    .close-button,
    .delete-button,
    .unrevoke-button,
    .unban-button,
    .ban-button.unban,
    .revoke-button.revoked,
    button.dialog-button-primary[onclick*="Restart"],
    button.dialog-button-primary[onclick*="Shutdown"],
    button.dialog-button-primary[onclick*="Stop"],
    button.dialog-button-secondary[onclick*="Cancel"],
    button.dialog-button-secondary[onclick*="Close"] {
      background: #ff6b6b !important; /* Red */
      color: white !important;
    }
    
    /* Color scheme buttons: Convert, Compress (Add buttons are now green) */
    .convert-button,
    .compress-button {
      background: var(--accent-color, #134F5C) !important;
      color: white !important;
    }
    
    /* Override all button text to white - must be very specific */
    /* EXCEPT dialog-close-button which should be black */
    button:not(.dialog-close-button),
    button.dialog-button:not(.dialog-close-button),
    button.icon-button:not(.dialog-close-button),
    button[class*="button"]:not(.dialog-close-button),
    button[type="button"]:not(.dialog-close-button),
    .dialog-button:not(.dialog-close-button),
    .icon-button:not(.dialog-close-button),
    .add-button,
    .delete-button,
    .edit-button,
    .save-button,
    .cancel-button,
    .close-button:not(.dialog-close-button) {
      color: white !important;
    }
    
    /* Plus/Add buttons should be GREEN */
    button.add-button,
    .add-button,
    .add-bullet-btn,
    button.add-bullet-btn {
      background: #51cf66 !important; /* Green */
      color: white !important;
    }
    
    /* Minus/Remove buttons should be RED */
    button.delete-button,
    .delete-button,
    .remove-bullet-btn,
    button.remove-bullet-btn {
      background: #ff6b6b !important; /* Red */
      color: white !important;
    }
    
    
    .user-status-dot, .license-status-dot {
      width: clamp(20px, 2vw, 24px);
      height: clamp(20px, 2vw, 24px);
      border-radius: 50%;
      position: absolute;
      top: clamp(8px, 0.8vw, 10px);
      right: clamp(8px, 0.8vw, 10px);
      flex-shrink: 0;
      z-index: 10;
    }
    
    .user-item, .license-item {
      position: relative;
      padding: clamp(10px, 1vw, 15px);
    }
    
    .user-info, .license-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-right: clamp(40px, 4vw, 50px);
    }
    
    .user-status-dot.active, .license-status-dot.active {
      background: #51cf66;
    }
    
    .user-status-dot.banned, .license-status-dot.banned,
    .user-status-dot.revoked, .license-status-dot.revoked {
      background: #ff6b6b;
    }
    
    .pencil-button {
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      padding: clamp(4.8px, 0.48vw, 6px);
      border-radius: 5px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      position: absolute;
      bottom: clamp(8px, 0.8vw, 10px);
      right: clamp(8px, 0.8vw, 10px);
      width: clamp(19.2px, 1.92vw, 24px);
      height: clamp(19.2px, 1.92vw, 24px);
    }
    
    .pencil-button:hover {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }
    
    .pencil-button svg {
      width: clamp(9.6px, 0.96vw, 12px);
      height: clamp(9.6px, 0.96vw, 12px);
      stroke: white;
    }
    
    /* UNIFIED X BUTTON STYLING - Black text, white background, black border - Override ALL inline styles */
    .dialog-close-button,
    button.dialog-close-button,
    button[class*="dialog-close-button"],
    [class*="dialog"] .dialog-close-button,
    [class*="dialog-overlay"] .dialog-close-button,
    [id*="Dialog"] .dialog-close-button,
    [id*="Dialog"] button[class*="close"]:not(.dialog-button-secondary),
    .dialog button[onclick*="close"]:not(.dialog-button-secondary),
    .dialog-overlay button[onclick*="close"]:not(.dialog-button-secondary),
    button[title="Close"]:not(.dialog-button-secondary),
    button[title="close"],
    .dialog button[title="Close"],
    .dialog-overlay button[title="Close"] {
      color: black !important;
      background: white !important;
      border: 2px solid black !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: absolute !important;
      top: 15px !important;
      right: 15px !important;
      width: 30px !important;
      height: 30px !important;
      font-size: 28px !important;
      font-weight: bold !important;
      line-height: 1 !important;
      padding: 0 !important;
      cursor: pointer !important;
      z-index: 10 !important;
    }
    
    .dialog-close-button:hover {
      background: rgba(0, 0, 0, 0.1) !important;
      border: 2px solid black !important;
      color: black !important;
    }
    
    .dialog-overlay.nested {
      z-index: 20000 !important;
    }
    
    .dialog-overlay.base {
      z-index: 15000 !important;
    }
    
    .dialog-overlay.show {
      z-index: 15000 !important;
    }
    
    .dialog-overlay.show.nested {
      z-index: 20000 !important;
    }
    
    .dialog-overlay.show.base {
      z-index: 1500 !important;
    }
    
    .dialog-overlay.show.base + .dialog-overlay.show.nested,
    .dialog-overlay.show.nested {
      z-index: 2000 !important;
    }
    
    #messageDialog.show {
      z-index: 9999 !important;
    }
    
    .insight-usage-window {
      width: 100%;
      height: 300px;
      background: #f5f5f5;
      border: 2px solid #45818E;
      border-radius: 5px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-style: italic;
    }
    
    .status-indicator {
      width: clamp(20px, 2vw, 24px);
      height: clamp(20px, 2vw, 24px);
      min-width: clamp(20px, 2vw, 24px);
      min-height: clamp(20px, 2vw, 24px);
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }
    
    .status-indicator.online {
      background: #51cf66;
      box-shadow: 0 0 clamp(4px, 0.4vw, 6px) rgba(81, 207, 102, 0.5);
    }
    
    .status-indicator.offline {
      background: #ff6b6b;
      box-shadow: 0 0 clamp(4px, 0.4vw, 6px) rgba(255, 107, 107, 0.5);
    }
    
    .server-metric {
      margin-bottom: clamp(12px, 1.2vw, 15px);
    }
    
    .server-metric-label {
      font-size: clamp(18px, 1.8vw, 22px);
      font-weight: bold;
      color: black;
      margin-bottom: clamp(4px, 0.4vw, 5px);
    }
    
    .server-metric-value {
      font-size: clamp(12px, 1vw, 14px);
      color: rgba(0, 0, 0, 0.7);
      font-weight: normal;
    }
    
    .server-metric-value.no-data {
      font-size: clamp(12px, 1vw, 14px);
      color: rgba(0, 0, 0, 0.5);
      font-weight: normal;
      font-style: italic;
    }
    
    .server-metric-value.warning {
      color: #ff6b6b;
      font-weight: bold;
    }
    
    /* Server panel content - flexbox to push buttons to bottom */
    .panel:nth-child(2) .panel-content {
      display: flex;
      flex-direction: column;
    }
    
    .server-buttons-container {
      display: flex;
      justify-content: center;
      gap: 45px; /* Tripled from 15px */
      margin-top: auto;
      padding-top: 15px;
      border-top: 2px solid rgba(255,255,255,0.2);
      flex-shrink: 0;
    }
    
    .server-action-button {
      padding: clamp(10px, 1vw, 12px) clamp(20px, 2vw, 25px);
      border: 2px solid;
      border-radius: 5px;
      font-size: clamp(14px, 1.3vw, 16px);
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s;
      color: white;
    }
    
    .restart-button {
      background: #ffa500;
      border-color: #ff8c00;
    }
    
    .restart-button:hover {
      background: #ff8c00;
      border-color: #ff7f00;
    }
    
    .shutdown-button {
      background: #dc3545;
      border-color: #c82333;
    }
    
    .shutdown-button:hover {
      background: #c82333;
      border-color: #bd2130;
    }
    
    /* Login Page Specific Styles */
    .login-button-header {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      padding: clamp(5px, 0.5vw, 8px) clamp(10px, 1vw, 15px);
      border-radius: 5px;
      cursor: pointer;
      font-size: clamp(14px, 1.3vw, 16px);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: clamp(6px, 0.6vw, 8px);
      text-decoration: none;
      transition: all 0.2s;
    }
    
    .login-button-header:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.5);
    }
    
    .page-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(100vh - 80px);
      padding: 20px;
    }
    
    .container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      width: 100%;
      max-width: 450px;
      padding: 40px;
      position: relative;
    }
    
    .container h1 {
      color: #134F5C;
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
    }
    
    .form-group {
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      max-height: 0;
      overflow: hidden;
    }
    
    .form-group.show {
      opacity: 1;
      transform: translateY(0);
      max-height: 500px;
    }
    
    .container label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 500;
      font-size: 14px;
    }
    
    .container input[type="text"],
    .container input[type="email"],
    .container input[type="password"],
    .container select {
      width: 100%;
      padding: 12px;
      border: 2px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s;
    }
    
    .container input:focus,
    .container select:focus {
      outline: none;
      border-color: #134F5C;
    }
    
    .container input.error {
      border-color: #FF6B6B;
      background-color: #FFE5E5;
    }
    
    .error-message {
      color: #FF6B6B;
      font-size: 12px;
      margin-top: 5px;
      display: none;
      min-height: 18px;
    }
    
    .error-message.show {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .container button {
      width: 100%;
      padding: 12px;
      background: #134F5C;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
      margin-top: 10px;
    }
    
    .container button:hover {
      background: #0d3d47;
    }
    
    .container button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
    }
    
    .modal-overlay.hidden {
      display: none !important;
    }
    
    .modal-overlay:not(.hidden) {
      display: flex !important;
    }
    
    .modal-dialog {
      background: white;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      max-width: 400px;
      width: 90%;
      text-align: center;
    }
    
    .modal-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .modal-button {
      background: #134F5C;
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
    }
    
    .modal-button:hover {
      background: #0d3d47;
    }
    
    .loading {
      display: flex;
      align-items: center;
      gap: 10px;
      color: white;
      font-size: clamp(16px, 1.5vw, 18px);
      padding: 20px;
    }
    
    .loading::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      flex-shrink: 0;
    }
    
    #licenseLoading {
      display: inline-block !important;
      margin-left: 10px;
    }
    
    #licenseLoading::before {
      width: 16px;
      height: 16px;
      border-width: 2px;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .switch-buttons {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    .switch-buttons button {
      flex: 1;
      margin-top: 0;
    }
    
    .switch-buttons button.secondary {
      background: #6c757d;
    }
    
    .switch-buttons button.secondary:hover {
      background: #5a6268;
    }
    
    .hidden {
      display: none !important;
    }
    
    .password-container {
      position: relative;
    }
    
    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      user-select: none;
      color: #666;
      display: flex;
      align-items: center;
      transition: color 0.2s;
    }
    
    .password-toggle:hover {
      color: #134F5C;
    }
    
    .password-toggle svg {
      display: block;
    }
    
    /* Homepage Modules Grid */
    #modulesGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .module-card {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      padding: 20px;
      text-decoration: none;
      color: white;
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .module-card:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .module-title {
      font-size: clamp(18px, 1.8vw, 22px);
      font-weight: bold;
      color: white;
      margin: 0;
    }
    
    .module-description {
      font-size: clamp(14px, 1.2vw, 16px);
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
    }
    
    /* Plans Page Styles */
    .plans-container {
      max-width: 1650px; /* Increased by 25% from 1320px */
      margin: 0 auto;
      padding: 20px;
      padding-top: 40px; /* Space at top for title */
      padding-bottom: 0; /* No space at bottom */
      overflow-x: visible; /* Allow separator to break out */
      overflow-y: visible; /* Allow vertical overflow for hover effects */
      position: relative;
      min-height: calc(100% + 50px); /* Increased height by 50px */
    }
    
    /* Full-width separator after plans section - positioned outside container */
    .plans-container::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 4px;
      background: #134F5C;
      z-index: 1;
      pointer-events: none;
    }
    
    .plans-title {
      font-size: clamp(28px, 3vw, 36px);
      color: white;
      text-align: center;
      margin-bottom: 0; /* No margin - separator provides spacing */
      font-weight: bold;
    }
    
    .plans-grid {
      display: flex; /* Changed from grid to flex for better horizontal scrolling */
      flex-direction: row;
      align-items: center; /* Center cards vertically */
      justify-content: flex-start; /* Start from left */
      gap: 30px;
      margin-top: 40px;
      margin-bottom: 0; /* No margin at bottom - green border touches red border */
      margin-left: 0;
      margin-right: 0;
      padding-left: 20px; /* Padding for first item */
      padding-right: 20px; /* Padding for last item */
      padding-top: 60px; /* Equal padding top and bottom for perfect vertical centering */
      padding-bottom: 60px; /* Equal padding top and bottom for perfect vertical centering */
      overflow-x: auto;
      overflow-y: visible; /* Allow overflow for hover effects */
      scroll-snap-type: x mandatory;
      scroll-padding-left: 20px; /* Ensure first item is fully visible */
      scroll-padding-right: 20px; /* Ensure last item is fully visible */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      scrollbar-width: thin;
    }
    
    .plans-grid::-webkit-scrollbar {
      height: 8px;
    }
    
    .plans-grid::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }
    
    .plans-grid::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }
    
    .plans-grid::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
    
    .plan-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px; /* Tripled from 4px */
      padding: 18px; /* Increased from 12px for more breathing room */
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      border: 3px solid transparent; /* Tripled from 1px */
      max-width: 280px; /* Increased from 240px */
      width: 280px; /* Fixed width for horizontal scroll */
      min-width: 280px; /* Prevent shrinking */
      flex-shrink: 0; /* Prevent flex shrinking */
      box-sizing: border-box;
      aspect-ratio: 1 / 2.1; /* Vertical cards: width 1, height 2.1 (70% of original 3) */
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Push button to bottom */
      scroll-snap-align: center; /* Snap to center when scrolling */
      overflow: visible; /* Ensure content isn't clipped */
    }
    
    .plan-card:hover {
      transform: translateY(-5px) scale(1.02); /* Slight zoom on hover */
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }
    
    .plan-card.featured {
      border-color: #45818E;
      transform: scale(1.05);
    }
    
    .plan-card.featured:hover {
      transform: scale(1.1) translateY(-5px); /* Slightly more zoom for featured */
    }
    
    .advertisement-section {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
      color: white;
      padding: 40px;
      margin-bottom: 0; /* No margin - separator provides spacing */
      margin-top: 20px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      position: relative;
    }
    
    
    .advertisement-content h2 {
      font-size: 2.5em;
      margin-bottom: 15px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .advertisement-content p {
      font-size: 1.2em;
      opacity: 0.95;
    }
    
    .addons-container {
      max-width: 1650px; /* Match plans-container width */
      margin: 0 auto;
      margin-top: 0; /* No margin - separator provides spacing */
      overflow-x: visible; /* Allow separator to break out */
      overflow-y: visible; /* Allow vertical overflow for hover effects */
      padding: 20px;
      padding-top: 30px; /* Space at top for title */
      padding-bottom: 0; /* No space at bottom */
      position: relative;
      min-height: calc(100% + 50px); /* Increased height by 50px */
    }
    
    /* Full-width separator after each addon section */
    .addons-container::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 4px;
      background: #134F5C;
      z-index: 1;
    }
    
    .addons-title {
      font-size: clamp(24px, 3vw, 32px);
      color: white;
      margin-bottom: 30px;
      text-align: center;
    }
    
    .addons-grid {
      display: flex; /* Changed from grid to flex for better horizontal scrolling */
      flex-direction: row;
      align-items: center; /* Center cards vertically */
      justify-content: flex-start; /* Start from left */
      gap: 30px;
      margin-top: 30px;
      margin-bottom: 0; /* No margin at bottom - green border touches red border */
      margin-left: 0;
      margin-right: 0;
      padding-left: 20px; /* Padding for first item */
      padding-right: 20px; /* Padding for last item */
      padding-top: 60px; /* Equal padding top and bottom for perfect vertical centering */
      padding-bottom: 60px; /* Equal padding top and bottom for perfect vertical centering */
      overflow-x: auto;
      overflow-y: visible; /* Allow overflow for hover effects */
      scroll-snap-type: x mandatory;
      scroll-padding-left: 20px; /* Ensure first item is fully visible */
      scroll-padding-right: 20px; /* Ensure last item is fully visible */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      scrollbar-width: thin;
    }
    
    .addons-grid::-webkit-scrollbar {
      height: 8px;
    }
    
    .addons-grid::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }
    
    .addons-grid::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }
    
    .addons-grid::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
    
    .new-badge {
      position: absolute;
      top: 6px; /* Tripled from 2px */
      right: 6px; /* Tripled from 2px */
      background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
      color: white;
      padding: 3px 9px; /* Tripled from 1px 3px */
      border-radius: 12px; /* Tripled from 4px */
      font-size: clamp(9px, 0.9vw, 15px); /* Tripled from 3-5px */
      font-weight: bold;
      text-transform: uppercase;
      box-shadow: 0 1px 2px rgba(81, 207, 102, 0.4);
      z-index: 10;
    }
    
    .featured-badge {
      position: absolute;
      top: -12px; /* Adjusted to prevent cutoff - was -18px */
      right: 12px; /* Tripled from 4px */
      background: #45818E;
      color: white;
      padding: 3px 9px; /* Tripled from 1px 3px */
      border-radius: 12px; /* Tripled from 4px */
      font-size: clamp(9px, 0.9vw, 15px); /* Tripled from 3-5px */
      font-weight: bold;
      text-transform: uppercase;
      z-index: 10; /* Ensure badge appears above other elements */
    }
    
    .plan-name {
      font-size: clamp(18px, 1.8vw, 24px); /* Tripled from 6-8px */
      color: #134F5C;
      margin-bottom: 10px; /* Increased spacing */
      margin-top: 0;
      padding-top: 0;
      font-weight: bold;
      line-height: 1.3; /* Better line height for readability */
      overflow: visible; /* Ensure text is visible */
      white-space: normal; /* Allow text wrapping if needed */
      word-wrap: break-word; /* Break long words */
      min-height: auto; /* Don't restrict height */
    }
    
    .plan-price {
      font-size: clamp(21px, 2.1vw, 27px); /* Tripled from 7-9px */
      color: #134F5C;
      font-weight: bold;
      margin-bottom: 6px; /* Tripled from 2px */
      line-height: 1.1;
    }
    
    .plan-currency {
      font-size: clamp(15px, 1.5vw, 21px); /* Tripled from 5-7px */
    }
    
    .plan-period {
      font-size: clamp(12px, 1.2vw, 18px); /* Tripled from 4-6px */
      color: #666;
      font-weight: normal;
    }
    
    .per-user-label {
      font-size: clamp(12px, 1.2vw, 18px); /* Tripled from 4-6px */
      color: #666;
      display: block;
      margin-top: 3px; /* Tripled from 1px */
    }
    
    .plan-features {
      list-style: none;
      padding: 0;
      margin: 6px 0; /* Tripled from 2px */
      flex-grow: 1; /* Allow features to take available space, pushing button to bottom */
    }
    
    .plan-features-separator {
      height: 1px;
      background: rgba(0, 0, 0, 0.1);
      margin: 12px 0;
      width: 100%;
    }
    
    .plan-features li {
      padding: 3px 0; /* Tripled from 1px */
      color: #333;
      font-size: clamp(12px, 1.2vw, 18px); /* Tripled from 4-6px */
      border-bottom: none; /* Remove separators between bullet points */
      line-height: 1.1;
    }
    
    .subscribe-btn {
      width: 100%;
      padding: 6px 12px; /* Tripled from 2px 4px */
      background: #134F5C;
      color: white;
      border: none;
      border-radius: 9px; /* Tripled from 3px */
      font-size: clamp(12px, 1.2vw, 18px); /* Tripled from 4-6px */
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
      margin-top: 6px; /* Tripled from 2px */
    }
    
    .subscribe-btn:hover:not(:disabled) {
      background: #0d3a42;
    }
    
    /* Settings Page Styles */
    .settings-container {
      display: flex;
      gap: 30px;
      margin-top: 30px;
    }
    
    .settings-sidebar {
      min-width: 200px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .settings-tab {
      padding: 12px 15px;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background 0.2s;
      font-size: clamp(14px, 1.2vw, 16px);
    }
    
    .settings-tab:hover,
    .settings-tab.active {
      background: rgba(255, 255, 255, 0.2);
    }
    
    .settings-content {
      flex: 1;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 30px;
    }
    
    .settings-panel {
      display: none;
    }
    
    .settings-panel.active {
      display: block;
    }
    
    .settings-section-title {
      font-size: clamp(24px, 2.5vw, 28px);
      color: white;
      margin-bottom: 30px;
      font-weight: bold;
    }
    
    .setting-item {
      margin-bottom: 25px;
    }
    
    .setting-label {
      display: block;
      font-size: clamp(16px, 1.5vw, 18px);
      color: white;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .setting-description {
      font-size: clamp(14px, 1.2vw, 16px);
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 10px;
    }
    
    .setting-select,
    .setting-input {
      width: 100%;
      padding: 10px 15px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.9);
      color: #333;
      font-size: clamp(14px, 1.2vw, 16px);
    }
    
    .setting-select:focus,
    .setting-input:focus {
      outline: none;
      border-color: #45818E;
    }
    
    .save-button {
      padding: 12px 30px;
      background: #134F5C;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: clamp(14px, 1.2vw, 16px);
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
      margin-top: 20px;
    }
    
    .save-button:hover {
      background: #0d3a42;
    }
    
    .setting-checkbox {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      cursor: pointer;
    }
    
    .checkbox-label {
      display: flex;
      align-items: center;
      font-size: clamp(14px, 1.2vw, 16px);
      color: white;
      cursor: pointer;
    }
    
    /* User Details Page Styles */
    .details-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .detail-card {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      gap: 45px; /* Tripled from 15px */
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .detail-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .account-card-enhanced {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
      border: 2px solid rgba(255, 255, 255, 0.4);
    }
    
    .license-card-enhanced {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
      border: 2px solid rgba(255, 255, 255, 0.4);
    }
    
    .detail-card-title {
      font-size: clamp(20px, 2vw, 24px);
      font-weight: bold;
      color: white;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .card-icon {
      font-size: clamp(24px, 2.2vw, 28px);
    }
    
    .detail-separator {
      border: none;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      margin: 10px 0;
    }
    
    .seats-value {
      font-size: clamp(18px, 1.6vw, 20px);
      color: #51cf66;
      font-weight: 700;
    }
    
    .detail-item {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .detail-label {
      font-size: clamp(14px, 1.2vw, 16px);
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
    }
    
    .detail-value {
      font-size: clamp(16px, 1.5vw, 18px);
      color: white;
      font-weight: 600;
    }
    
    .status-active {
      color: #51cf66;
    }
    
    .status-banned {
      color: #ff6b6b;
    }
    
    .status-revoked {
      color: #ffa500;
    }
    
    /* Tools Sidebar */
    .tools-sidebar {
      position: fixed;
      right: -90px;
      top: 80px;
      bottom: 20px;
      width: 90px;
      background: rgba(19, 79, 92, 0.95);
      border-radius: 10px 0 0 10px;
      padding: 20px 10px;
      transition: right 0.3s ease;
      z-index: 999;
      box-shadow: -4px 0 15px rgba(0,0,0,0.3);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    .tools-sidebar.show {
      right: 0;
    }

    .tools-indicator {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 120px;
      background: rgba(19, 79, 92, 0.9);
      color: white;
      writing-mode: vertical-rl;
      text-orientation: upright;
      direction: rtl;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
      border-radius: 5px 0 0 5px;
      z-index: 998;
      cursor: pointer;
      transition: opacity 0.3s ease-in-out;
      padding: 10px 5px;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    }

    .tools-indicator.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .tools-sidebar-content {
      display: flex;
      flex-direction: column;
      gap: 45px; /* Tripled from 15px */
      width: 100%;
    }
    
    .tool-box {
      aspect-ratio: 1;
      background: rgba(255,255,255,0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 0;
    }
    
    .tool-box:hover {
      background: rgba(255,255,255,0.2);
      transform: scale(1.1);
    }
    
    .tool-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
    }
    
    .tool-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.1);
    }
    
    .tool-tooltip {
      position: fixed;
      background: rgba(0,0,0,0.9);
      color: white;
      padding: 10px 15px;
      border-radius: 5px;
      font-size: 14px;
      z-index: 10000;
      pointer-events: none;
      max-width: 200px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    .tool-tooltip strong {
      display: block;
      margin-bottom: 5px;
    }
    
    .info-section {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      padding: 25px;
      margin-top: 20px;
    }
    
    .info-section-title {
      font-size: clamp(20px, 2vw, 24px);
      font-weight: bold;
      color: white;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .permissions-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .permission-item {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .permission-name {
      font-size: clamp(14px, 1.2vw, 16px);
      color: white;
      font-weight: 500;
    }
    
    .permission-status {
      font-size: clamp(12px, 1vw, 14px);
      padding: 4px 12px;
      border-radius: 12px;
      font-weight: 600;
    }
    
    .permission-status.allowed {
      background: rgba(81, 207, 102, 0.2);
      color: #51cf66;
    }
    
    .permission-status.denied {
      background: rgba(255, 107, 107, 0.2);
      color: #ff6b6b;
    }
    
    /* ============================================
       THEME SYSTEM - COLOR SCHEMES & LAYOUT VARIANTS
       Override default styles when theme classes are applied
       ============================================ */
    
    /* COLOR SCHEME 1: BLUE GRADIENT (Default) */
    body.color-scheme-1 {
      --header-bg: #134F5C;
      --header-border: #45818E;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #45818E;
      background: linear-gradient(180deg, #6BA3B0 0%, #8FB5C0 100%) !important;
    }
    
    body.color-scheme-1 .header {
      background: #134F5C !important;
      border-bottom-color: #45818E !important;
    }
    
    body.color-scheme-1 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-1 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-1 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-1 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 2: DARK MODE */
    body.color-scheme-2 {
      --header-bg: #1a1a1a;
      --header-border: #00ff88;
      --card-bg: rgba(0, 255, 136, 0.1);
      --card-border: rgba(0, 255, 136, 0.2);
      --hover-bg: rgba(0, 255, 136, 0.15);
      --text-primary: rgba(224, 224, 224, 0.9);
      --accent-color: #00ff88;
      background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%) !important;
    }
    
    body.color-scheme-2 .header {
      background: #1a1a1a !important;
      border-bottom-color: #00ff88 !important;
    }
    
    body.color-scheme-2 .nav-item {
      background: transparent !important;
      border: none !important;
      color: rgba(224, 224, 224, 0.9) !important;
    }
    
    body.color-scheme-2 .nav-item:hover {
      background: transparent !important;
      border: none !important;
      color: #00ff88 !important;
    }
    
    body.color-scheme-2 .account-button {
      background: var(--card-bg, rgba(0, 255, 136, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(0, 255, 136, 0.2)) !important;
      color: rgba(224, 224, 224, 0.9) !important;
    }
    
    body.color-scheme-2 .account-button:hover {
      background: var(--hover-bg, rgba(0, 255, 136, 0.15)) !important;
      border-color: var(--card-border, rgba(0, 255, 136, 0.3)) !important;
      color: #00ff88 !important;
    }
    
    /* COLOR SCHEME 3: FOREST GREEN */
    body.color-scheme-3 {
      --header-bg: #2d5016;
      --header-border: #4a7c2a;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #6ba844;
      background: linear-gradient(180deg, #3d6b1f 0%, #5a8f35 100%) !important;
    }
    
    body.color-scheme-3 .header {
      background: #2d5016 !important;
      border-bottom-color: #4a7c2a !important;
    }
    
    body.color-scheme-3 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-3 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-3 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-3 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 4: PURPLE DREAM */
    body.color-scheme-4 {
      --header-bg: #6b2c91;
      --header-border: #8b3db8;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #c084fc;
      background: linear-gradient(180deg, #8b3db8 0%, #a855d4 50%, #c084fc 100%) !important;
    }
    
    body.color-scheme-4 .header {
      background: #6b2c91 !important;
      border-bottom-color: #8b3db8 !important;
    }
    
    body.color-scheme-4 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-4 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-4 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-4 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 5: SUNSET PINK */
    body.color-scheme-5 {
      --header-bg: #c2185b;
      --header-border: #e91e63;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #f06292;
      background: linear-gradient(180deg, #e91e63 0%, #f06292 50%, #f8bbd0 100%) !important;
    }
    
    body.color-scheme-5 .header {
      background: #c2185b !important;
      border-bottom-color: #e91e63 !important;
    }
    
    body.color-scheme-5 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-5 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-5 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-5 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 6: CYAN OCEAN */
    body.color-scheme-6 {
      --header-bg: #006064;
      --header-border: #00838f;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #4dd0e1;
      background: linear-gradient(180deg, #00838f 0%, #00acc1 50%, #4dd0e1 100%) !important;
    }
    
    body.color-scheme-6 .header {
      background: #006064 !important;
      border-bottom-color: #00838f !important;
    }
    
    body.color-scheme-6 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-6 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-6 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-6 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 7: SANDY BROWN */
    body.color-scheme-7 {
      --header-bg: #8B4513;
      --header-border: #CD853F;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #F4A460;
      background: linear-gradient(180deg, #A0522D 0%, #D2691E 50%, #F4A460 100%) !important;
    }
    
    body.color-scheme-7 .header {
      background: #8B4513 !important;
      border-bottom-color: #CD853F !important;
    }
    
    body.color-scheme-7 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-7 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-7 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-7 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 8: DEEP INDIGO (Material Design Indigo) */
    body.color-scheme-8 {
      --header-bg: #1a237e;
      --header-border: #3949ab;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.2);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: rgba(224, 224, 224, 0.9);
      --accent-color: #5c6bc0;
      background: linear-gradient(180deg, #283593 0%, #3f51b5 50%, #5c6bc0 100%) !important;
    }
    
    body.color-scheme-8 .header {
      background: #1a237e !important;
      border-bottom-color: #3949ab !important;
    }
    
    body.color-scheme-8 .nav-item {
      background: transparent !important;
      border: none !important;
      color: rgba(224, 224, 224, 0.9) !important;
    }
    
    body.color-scheme-8 .nav-item:hover {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-8 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.2)) !important;
      color: rgba(224, 224, 224, 0.9) !important;
    }
    
    body.color-scheme-8 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.4)) !important;
      color: white !important;
    }
    
    /* COLOR SCHEME 9: CRIMSON RED */
    body.color-scheme-9 {
      --header-bg: #b71c1c;
      --header-border: #e53935;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #ef5350;
      background: linear-gradient(180deg, #c62828 0%, #e53935 50%, #ef5350 100%) !important;
    }
    
    body.color-scheme-9 .header {
      background: #b71c1c !important;
      border-bottom-color: #e53935 !important;
    }
    
    body.color-scheme-9 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-9 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-9 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-9 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 10: TEAL GREEN */
    body.color-scheme-10 {
      --header-bg: #004d40;
      --header-border: #00796b;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #26a69a;
      background: linear-gradient(180deg, #00695c 0%, #00897b 50%, #26a69a 100%) !important;
    }
    
    body.color-scheme-10 .header {
      background: #004d40 !important;
      border-bottom-color: #00796b !important;
    }
    
    body.color-scheme-10 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-10 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-10 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-10 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 11: VIOLET PURPLE */
    body.color-scheme-11 {
      --header-bg: #4a148c;
      --header-border: #7b1fa2;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #ab47bc;
      background: linear-gradient(180deg, #6a1b9a 0%, #8e24aa 50%, #ab47bc 100%) !important;
    }
    
    body.color-scheme-11 .header {
      background: #4a148c !important;
      border-bottom-color: #7b1fa2 !important;
    }
    
    body.color-scheme-11 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-11 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-11 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-11 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 12: AMBER ORANGE */
    body.color-scheme-12 {
      --header-bg: #e65100;
      --header-border: #ff6f00;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #ffb300;
      background: linear-gradient(180deg, #ff6f00 0%, #ff8f00 50%, #ffb300 100%) !important;
    }
    
    body.color-scheme-12 .header {
      background: #e65100 !important;
      border-bottom-color: #ff6f00 !important;
    }
    
    body.color-scheme-12 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-12 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-12 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-12 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 13: SKY BLUE */
    body.color-scheme-13 {
      --header-bg: #0d47a1;
      --header-border: #1976d2;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #42a5f5;
      background: linear-gradient(180deg, #1565c0 0%, #1976d2 50%, #42a5f5 100%) !important;
    }
    
    body.color-scheme-13 .header {
      background: #0d47a1 !important;
      border-bottom-color: #1976d2 !important;
    }
    
    body.color-scheme-13 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-13 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-13 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-13 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 14: EMERALD GREEN */
    body.color-scheme-14 {
      --header-bg: #1b5e20;
      --header-border: #388e3c;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #66bb6a;
      background: linear-gradient(180deg, #2e7d32 0%, #43a047 50%, #66bb6a 100%) !important;
    }
    
    body.color-scheme-14 .header {
      background: #1b5e20 !important;
      border-bottom-color: #388e3c !important;
    }
    
    body.color-scheme-14 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-14 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-14 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-14 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 15: ROSE PINK */
    body.color-scheme-15 {
      --header-bg: #880e4f;
      --header-border: #c2185b;
      --card-bg: rgba(255, 255, 255, 0.1);
      --card-border: rgba(255, 255, 255, 0.3);
      --hover-bg: rgba(255, 255, 255, 0.15);
      --text-primary: white;
      --accent-color: #e91e63;
      background: linear-gradient(180deg, #ad1457 0%, #c2185b 50%, #e91e63 100%) !important;
    }
    
    body.color-scheme-15 .header {
      background: #880e4f !important;
      border-bottom-color: #c2185b !important;
    }
    
    body.color-scheme-15 .nav-item {
      background: transparent !important;
      border: none !important;
      color: white !important;
    }
    
    body.color-scheme-15 .nav-item:hover {
      background: transparent !important;
      border: none !important;
    }
    
    body.color-scheme-15 .account-button {
      background: var(--card-bg, rgba(255, 255, 255, 0.1)) !important;
      border: 1px solid var(--card-border, rgba(255, 255, 255, 0.3)) !important;
      color: white !important;
    }
    
    body.color-scheme-15 .account-button:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.15)) !important;
      border-color: var(--card-border, rgba(255, 255, 255, 0.5)) !important;
    }
    
    /* COLOR SCHEME 16: DARK PURPLE (Landing Page Theme) */
    body.color-scheme-16 {
      --header-bg: rgba(13, 17, 23, 0.95);
      --header-border: rgba(102, 126, 234, 0.3);
      --card-bg: rgba(26, 26, 46, 0.95);
      --card-border: rgba(102, 126, 234, 0.3);
      --hover-bg: rgba(102, 126, 234, 0.2);
      --text-primary: #e0e0e0;
      --accent-color: #667eea;
      --sidebar-bg: rgba(13, 17, 23, 0.98);
      --content-bg: #0d1117;
      --sidebar-border: rgba(102, 126, 234, 0.2);
      background: #0d1117 !important;
    }
    
    body.color-scheme-16 .header {
      background: rgba(13, 17, 23, 0.95) !important;
      border-bottom-color: rgba(102, 126, 234, 0.3) !important;
    }
    
    body.color-scheme-16 .nav-item {
      background: transparent !important;
      border: none !important;
      color: #e0e0e0 !important;
    }
    
    body.color-scheme-16 .nav-item:hover {
      background: transparent !important;
      border: none !important;
      color: #667eea !important;
    }
    
    body.color-scheme-16 .account-button {
      background: var(--card-bg, rgba(26, 26, 46, 0.8)) !important;
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.5)) !important;
      color: #667eea !important;
    }
    
    body.color-scheme-16 .account-button:hover {
      background: var(--hover-bg, rgba(102, 126, 234, 0.2)) !important;
      border-color: rgba(102, 126, 234, 0.7) !important;
      color: #667eea !important;
    }
    
    /* Ensure theme styles override default styles when theme classes are present */
    /* This prevents default-theme styles from applying when user themes are active */
    body:not(.default-theme).color-scheme-1,
    body:not(.default-theme).color-scheme-2,
    body:not(.default-theme).color-scheme-3,
    body:not(.default-theme).color-scheme-4,
    body:not(.default-theme).color-scheme-5,
    body:not(.default-theme).color-scheme-6,
    body:not(.default-theme).color-scheme-7,
    body:not(.default-theme).color-scheme-8,
    body:not(.default-theme).color-scheme-9,
    body:not(.default-theme).color-scheme-10,
    body:not(.default-theme).color-scheme-11,
    body:not(.default-theme).color-scheme-12,
    body:not(.default-theme).color-scheme-13,
    body:not(.default-theme).color-scheme-14,
    body:not(.default-theme).color-scheme-15,
    body:not(.default-theme).color-scheme-16 {
      /* Theme styles applied above will take precedence */
    }
    
    /* Default Theme - Dark Theme for non-logged-in users */
    body.default-theme {
      background: #0d1117 !important;
      color: #e0e0e0 !important;
    }
    
    body.default-theme .header {
      background: rgba(13, 17, 23, 0.95) !important;
      border-bottom: 1px solid rgba(102, 126, 234, 0.3) !important;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
    }
    
    body.default-theme .nav-item {
      color: #e0e0e0 !important;
    }
    
    body.default-theme .nav-item:hover {
      color: #667eea !important;
    }
    
    body.default-theme .login-button-header {
      color: #667eea !important;
      background: rgba(102, 126, 234, 0.2) !important;
      border: 1px solid rgba(102, 126, 234, 0.4) !important;
    }
    
    body.default-theme .login-button-header:hover {
      background: rgba(102, 126, 234, 0.3) !important;
    }
    
    body.default-theme .page-title-header {
      color: #e0e0e0 !important;
    }
    
    body.default-theme .logo-text {
      color: #e0e0e0 !important;
    }
    
    /* ============================================
       CHAT WIDGET STYLES (Available on all pages)
       ============================================ */
    .chat-button {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, #764ba2 100%);
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
      z-index: 1000000 !important; /* Always on top - higher than dialogs (99999) and chat widget (999999) */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    
    .chat-button:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
    }
    
    .chat-button-text {
      display: none;
    }
    
    .chat-widget {
      position: fixed;
      bottom: 100px;
      right: 30px;
      width: 380px;
      max-width: calc(100vw - 60px);
      height: 600px;
      max-height: calc(100vh - 130px);
      background: rgba(13, 17, 23, 1.0) !important; /* 100% opaque - no transparency, override all themes */
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      z-index: 999999 !important; /* Always on top - highest z-index, completely independent from dialog layering system */
      display: none;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      min-width: 300px;
      min-height: 400px;
    }
    
    .chat-resize-handle {
      position: absolute;
      background: transparent;
      z-index: 100000;
      opacity: 0.6;
      transition: opacity 0.2s;
    }
    
    .chat-widget:hover .chat-resize-handle {
      opacity: 1;
    }
    
    .chat-resize-handle:active {
      opacity: 1;
    }
    
    .chat-resize-handle-se {
      bottom: 0;
      right: 0;
      width: 24px;
      height: 24px;
      cursor: se-resize;
      background: linear-gradient(135deg, transparent 0%, transparent 45%, rgba(102, 126, 234, 0.5) 45%, rgba(102, 126, 234, 0.5) 100%);
      border-bottom-right-radius: 20px;
    }
    
    .chat-resize-handle-se::after {
      content: '';
      position: absolute;
      bottom: 4px;
      right: 4px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0 8px 8px;
      border-color: transparent transparent rgba(102, 126, 234, 0.8) transparent;
    }
    
    .chat-resize-handle-se:hover {
      background: linear-gradient(135deg, transparent 0%, transparent 45%, rgba(102, 126, 234, 0.8) 45%, rgba(102, 126, 234, 0.8) 100%);
    }
    
    .chat-resize-handle-s {
      bottom: 0;
      left: 0;
      right: 24px;
      height: 10px;
      cursor: s-resize;
      border-bottom: 3px solid rgba(102, 126, 234, 0.4);
    }
    
    .chat-resize-handle-s:hover {
      border-bottom-color: rgba(102, 126, 234, 0.7);
    }
    
    .chat-resize-handle-e {
      top: 0;
      bottom: 24px;
      right: 0;
      width: 10px;
      cursor: e-resize;
      border-right: 3px solid rgba(102, 126, 234, 0.4);
    }
    
    .chat-resize-handle-e:hover {
      border-right-color: rgba(102, 126, 234, 0.7);
    }
    
    /* Override for color-scheme-16 to ensure full opacity */
    body.color-scheme-16 .chat-widget {
      background: rgba(26, 26, 46, 1.0) !important; /* 100% opaque */
    }
    
    .chat-widget.show {
      display: flex !important;
      transform: translateY(0);
      opacity: 1;
    }
    
    .chat-header {
      background: var(--hover-bg, rgba(102, 126, 234, 0.2));
      padding: 20px;
      border-bottom: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: move;
      user-select: none;
    }
    
    .chat-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .chat-header:active {
      cursor: grabbing;
    }
    
    .chat-header-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .chat-icon {
      font-size: 24px;
    }
    
    .chat-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary, #e0e0e0);
    }
    
    .chat-clear {
      background: transparent;
      border: none;
      color: #999;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s;
      padding: 0;
    }
    
    .chat-clear:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.1));
      color: #ff4444;
    }
    
    .chat-close {
      background: transparent;
      border: none;
      color: var(--text-primary, #e0e0e0);
      font-size: 28px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s;
    }
    
    .chat-close:hover {
      background: var(--hover-bg, rgba(255, 255, 255, 0.1));
    }
    
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    /* Style scrollbar for chat messages to match input box scrollbar */
    .chat-messages::-webkit-scrollbar {
      width: 8px;
    }
    
    .chat-messages::-webkit-scrollbar-track {
      background: transparent;
      margin: 4px 0;
    }
    
    .chat-messages::-webkit-scrollbar-thumb {
      background: rgba(102, 126, 234, 0.4);
      border-radius: 4px;
      border: 1px solid rgba(102, 126, 234, 0.2);
    }
    
    .chat-messages::-webkit-scrollbar-thumb:hover {
      background: rgba(102, 126, 234, 0.6);
    }
    
    /* Firefox scrollbar for chat messages */
    .chat-messages {
      scrollbar-width: thin;
      scrollbar-color: rgba(102, 126, 234, 0.4) transparent;
    }
    
    .chat-message {
      display: flex;
      animation: fadeIn 0.3s;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .chat-message.user-message {
      justify-content: flex-end;
    }
    
    .chat-message.bot-message {
      justify-content: flex-start;
    }
    
    .message-content {
      max-width: 75%;
      padding: 12px 16px;
      word-wrap: break-word;
      border-radius: 18px;
    }
    
    .message-content strong {
      font-weight: 600;
      color: var(--text-primary, #e0e0e0);
    }
    
    .message-content em {
      font-style: italic;
    }
    
    .message-content br {
      line-height: 1.5;
    }
    
    .spinner-container {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    
    .chat-spinner {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    
    .spinner-circle {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-color, #667eea);
      animation: spinner-bounce 1.4s ease-in-out infinite;
    }
    
    .spinner-circle:nth-child(1) {
      animation-delay: -0.32s;
    }
    
    .spinner-circle:nth-child(2) {
      animation-delay: -0.16s;
    }
    
    @keyframes spinner-bounce {
      0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
      }
      40% {
        transform: scale(1.2);
        opacity: 1;
      }
    }
    
    .user-message .message-content {
      background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, #764ba2 100%);
      color: white !important;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.5;
    }
    
    .bot-message .message-content {
      background: var(--hover-bg, rgba(102, 126, 234, 0.2));
      color: var(--text-primary, #e0e0e0);
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      border-bottom-left-radius: 4px;
    }
    
    .chat-input-container {
      padding: 10px; /* Reduced padding - input height reduced by 50% */
      border-top: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: rgba(13, 17, 23, 1.0) !important; /* 100% opaque - override all themes */
      flex: 0 0 auto; /* Don't shrink, but allow natural growth */
    }
    
    .chat-attached-files {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0 4px;
    }
    
    .chat-attached-file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      background: var(--card-bg, rgba(26, 26, 46, 0.6));
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-primary, #e0e0e0);
    }
    
    .chat-attached-file-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .chat-attached-file-remove {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(220, 53, 69, 0.2);
      border: 1px solid rgba(220, 53, 69, 0.4);
      color: #dc3545;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
      flex-shrink: 0;
      transition: all 0.2s;
      padding: 0;
      line-height: 1;
    }
    
    .chat-attached-file-remove:hover {
      background: rgba(220, 53, 69, 0.4);
      transform: scale(1.1);
    }
    
    .chat-input-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }
    
    /* Override for color-scheme-16 */
    body.color-scheme-16 .chat-input-container {
      background: rgba(26, 26, 46, 1.0) !important; /* 100% opaque */
    }
    
    .chat-attach {
      width: 35px; /* Reduced size - input height reduced by 50% */
      height: 35px;
      border-radius: 50%;
      background: var(--hover-bg, rgba(102, 126, 234, 0.2));
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      color: var(--text-primary, #e0e0e0);
      font-size: 20px;
      font-weight: 300;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    
    .chat-attach:hover {
      background: var(--hover-bg, rgba(102, 126, 234, 0.3));
      border-color: var(--card-border, rgba(102, 126, 234, 0.5));
      transform: scale(1.1);
    }
    
    .chat-input-wrapper {
      flex: 1;
      position: relative;
      display: flex;
      align-items: stretch;
      min-width: 0;
      max-width: 100%;
    }
    
    .chat-input {
      flex: 1;
      padding: 6px 12px; /* Reduced padding - input height reduced by 50% */
      background: var(--card-bg, rgba(26, 26, 46, 0.8));
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      border-radius: 20px;
      color: var(--text-primary, #e0e0e0);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      width: 100%;
      min-width: 0;
      min-height: 35px; /* Reduced height - 50% of original */
      max-height: 100px; /* Reduced max height */
      line-height: 1.4em;
      overflow-y: auto;
      overflow-x: hidden;
      resize: none;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: pre-wrap;
      box-sizing: border-box;
      scrollbar-gutter: stable;
    }
    
    .chat-buttons-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .chat-input::-webkit-scrollbar {
      width: 8px;
    }
    
    .chat-input::-webkit-scrollbar-track {
      background: transparent;
      margin: 4px 0; /* Add margin to keep scrollbar within border */
    }
    
    .chat-input::-webkit-scrollbar-thumb {
      background: rgba(102, 126, 234, 0.4);
      border-radius: 4px;
      border: 1px solid rgba(102, 126, 234, 0.2); /* Subtle border to keep it contained */
    }
    
    .chat-input::-webkit-scrollbar-thumb:hover {
      background: rgba(102, 126, 234, 0.6);
    }
    
    /* Firefox scrollbar */
    .chat-input {
      scrollbar-width: thin;
      scrollbar-color: rgba(102, 126, 234, 0.4) transparent;
    }
    
    .chat-input:focus {
      border-color: var(--accent-color, rgba(102, 126, 234, 0.6));
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .chat-input::placeholder {
      color: rgba(224, 224, 224, 0.5);
    }
    
    .chat-mic {
      width: 35px; /* Reduced size - input height reduced by 50% */
      height: 35px;
      border-radius: 50%;
      background: var(--hover-bg, rgba(102, 126, 234, 0.2));
      border: 1px solid var(--card-border, rgba(102, 126, 234, 0.3));
      color: var(--text-primary, #e0e0e0);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      opacity: 0.7;
      padding: 0;
    }
    
    .chat-mic:hover {
      opacity: 1;
      background: var(--hover-bg, rgba(102, 126, 234, 0.3));
      border-color: var(--card-border, rgba(102, 126, 234, 0.5));
      transform: scale(1.1);
    }
    
    .chat-mic.recording {
      color: #dc3545;
      opacity: 1;
      background: rgba(220, 53, 69, 0.2) !important;
      border-color: rgba(220, 53, 69, 0.5) !important;
      animation: pulseRecording 1.5s ease-in-out infinite;
      border-radius: 6px; /* Square/rounded corners when recording */
    }
    
    .chat-mic.recording svg {
      filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.8));
    }
    
    .chat-mic.processing {
      background: var(--hover-bg, rgba(102, 126, 234, 0.2));
      border-color: rgba(102, 126, 234, 0.5);
    }
    
    .mic-spinner {
      display: flex;
      gap: 3px;
      align-items: center;
      justify-content: center;
    }
    
    .mic-spinner .spinner-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent-color, #667eea);
      animation: micSpinnerBounce 1.4s ease-in-out infinite;
    }
    
    .mic-spinner .spinner-dot:nth-child(1) {
      animation-delay: -0.32s;
    }
    
    .mic-spinner .spinner-dot:nth-child(2) {
      animation-delay: -0.16s;
    }
    
    @keyframes micSpinnerBounce {
      0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
      }
      40% {
        transform: scale(1.2);
        opacity: 1;
      }
    }
    
    @keyframes pulseRecording {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
      }
    }
    
    .chat-send {
      width: 35px; /* Reduced size - input height reduced by 50% */
      height: 35px;
      padding: 0;
      background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, #764ba2 100%);
      border: none;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .chat-send svg {
      width: 18px;
      height: 18px;
      stroke: white;
    }
    
    .chat-send:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    
    .chat-send:active {
      transform: scale(0.95);
    }
    
    .chat-send:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    
    /* ============================================
       MOBILE HEADER RESPONSIVE (All Pages)
       Apply console-style mobile header to standard .header
       ============================================ */
    @media (max-width: 768px) and (orientation: portrait) {
      /* Mobile Header - 3 Line Structure (EXACT COPY FROM CONSOLE) */
      .header,
      body.homepage-page .header,
      body.contact-page .header,
      body.about-page .header,
      body.plans-page .header {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 10px 15px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        gap: 0 !important;
        display: flex !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
      }
      
      /* Line 1: Logo + Page Name (left) | Account Button (right) */
      .header {
        display: flex !important;
        flex-direction: column !important;
      }
      
      .header .logo-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
      }
      
      .header .logo-icon {
        max-height: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        width: 40px !important;
      }
      
      .header .logo-text {
        font-size: 18px !important;
      }
      
      .header .page-title-header {
        font-size: 16px !important;
        margin-left: 0 !important;
        flex: 0 0 auto !important;
        text-align: left !important;
      }
      
      /* Account button on Line 1 (top right) - show on mobile */
      .header .account-container-line1 {
        display: flex !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
      }
      
      /* Hide account button in header-buttons-container on mobile (it's on line 1) */
      .header .header-buttons-container .account-container:not(.account-container-line1) {
        display: none !important;
      }
      
      /* Line 2: Navigation menu - CENTERED */
      .header .nav-menu {
        order: 2 !important;
        margin-bottom: 10px !important;
        justify-content: center !important;
        display: flex !important;
      }
      
      /* Line 3: Credits (homepage only) - CENTERED */
      .header .header-buttons-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        order: 3 !important;
        justify-content: center !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      
      /* Credits on Line 3 (homepage only) */
      .header .credits-display {
        padding: 6px 10px !important;
        font-size: 11px !important;
        flex: 0 0 auto !important;
        min-width: fit-content !important;
        white-space: nowrap !important;
      }
      
      /* Logo container - smaller on mobile */
      .header .logo-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        flex-shrink: 0;
      }
      
      .header .logo-icon {
        max-height: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        width: 40px !important;
      }
      
      .header .logo-text {
        font-size: 18px !important;
      }
      
      .header .page-title-header {
        font-size: 16px !important;
        margin-left: 0 !important;
        flex: 1;
        text-align: right;
      }
      
      /* Line 2: Navigation menu - horizontal scrollable */
      .header .nav-menu {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        order: 2 !important;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
      }
      
      .header .nav-item {
        padding: 8px 10px !important;
        font-size: 11px !important;
        flex: 0 0 auto !important;
        min-width: fit-content !important;
        white-space: nowrap !important;
      }
      
      /* Account button - smaller on mobile */
      .header .account-button {
        padding: 8px 10px !important;
        font-size: 11px !important;
        flex: 0 0 auto !important;
        min-width: fit-content !important;
        white-space: nowrap !important;
      }
      
      /* Calculate dynamic header height */
      :root {
        --header-height-mobile: auto;
      }
      
      .header {
        --header-height: auto;
      }
      
      /* Adjust body padding to account for dynamic header */
      body {
        padding-top: 0;
      }
      
      /* Main content areas adjust to header - PUSH DOWN LIKE CONSOLE */
      .homepage-main-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
      }
      
      /* Calculate header height and push content down */
      body.homepage-page .homepage-main-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
      }
      
      /* For other pages */
      .content {
        margin-top: 0;
        padding-top: 0;
      }
      
      /* Homepage layout - stack sidebar and requests vertically on mobile */
      .homepage-main-container {
        flex-direction: column !important;
        height: auto !important;
      }
      
      .homepage-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        order: 1 !important;
      }
      
      .homepage-requests-panel {
        width: 100% !important;
        min-width: 100% !important;
        order: 2 !important;
        height: auto !important;
        min-height: 300px !important;
        border-left: none !important;
        border-top: 1px solid var(--sidebar-border, rgba(0, 0, 0, 0.1)) !important;
      }
    }
    
    /* Desktop: Show account-container-line1 when logged in, hide when logged out */
    @media (min-width: 769px) {
      /* By default, hide account-container-line1 (will be shown by JavaScript when logged in) */
      .header .account-container-line1 {
        display: none !important;
      }
      /* Show header-buttons-container account if it exists */
      .header .header-buttons-container .account-container {
        display: flex !important;
      }
      /* Homepage: account button should be visible on desktop (no header-buttons-container) */
      .homepage-page .header .account-container-line1 {
        display: flex !important;
        margin-left: auto !important;
      }
      /* But if account-container-line1 has inline style display:flex, allow it (logged in) */
      .header .account-container-line1[style*="display: flex"],
      .header .account-container-line1[style*="display:flex"] {
        display: flex !important;
        margin-left: auto !important;
      }
    }
    
    /* Landscape mode - use single line layout */
    @media (max-width: 768px) and (orientation: landscape) {
      .header .account-container-line1 {
        display: none !important;
      }
      .header .header-buttons-container .account-container {
        display: flex !important;
      }
      .header {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        flex-direction: row !important;
        padding: 0 15px !important;
        gap: 10px;
      }
      
      .header .logo-container {
        flex: 0 0 auto;
      }
      
      .header .nav-menu {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        flex: 0 0 auto;
      }
      
      .header .header-buttons-container {
        flex: 0 0 auto;
        margin-left: auto;
      }
      
      .header .logo-icon {
        max-height: 50px !important;
        max-width: 50px !important;
      }
      
      .header .page-title-header {
        font-size: 14px !important;
      }
      
      .header .nav-item {
        font-size: 12px !important;
        padding: 6px 8px !important;
      }
      
      .header .credits-display {
        font-size: 12px !important;
        padding: 6px 10px !important;
      }
      
      .header .account-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
      }
    }
    
    /* Mobile responsive - Full screen on phone */
    @media (max-width: 768px) {
      @media (orientation: portrait) {
        .chat-widget,
        .chat-widget.show {
          width: 100vw !important;
          height: 100vh !important;
          max-width: 100vw !important;
          max-height: 100vh !important;
          min-width: 100vw !important;
          min-height: 100vh !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          border-radius: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
          position: fixed !important;
          z-index: 999999 !important;
          display: flex !important;
          flex-direction: column !important;
          overflow: hidden !important;
        }
        
        /* Chat header should account for browser URL bar - REDUCED padding */
        .chat-widget .chat-header,
        .chat-widget.show .chat-header {
          padding-top: max(env(safe-area-inset-top, 10px), 10px) !important;
          padding-bottom: 10px !important;
          margin-top: 0 !important;
          flex-shrink: 0 !important;
        }
        
        /* Chat messages - flex grow to fill space */
        .chat-widget .chat-messages {
          flex: 1 !important;
          min-height: 0 !important;
          overflow-y: auto !important;
        }
        
        /* Chat input container - flex shrink, stay at bottom with safe area */
        .chat-widget .chat-input-container {
          flex-shrink: 0 !important;
          padding-bottom: max(env(safe-area-inset-bottom, 10px), 10px) !important;
          padding-top: 10px !important;
        }
        
    .chat-button {
      bottom: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      z-index: 1000000 !important; /* Always on top when visible - higher than dialogs (99999) */
    }
      }
      
      /* Landscape mode - keep original sizing */
      @media (orientation: landscape) {
        .chat-widget {
          width: calc(100vw - 20px);
          right: 10px;
          bottom: 80px;
          height: calc(100vh - 100px);
          max-height: calc(100vh - 100px);
        }
        
        .chat-button {
          bottom: 20px;
          right: 20px;
          width: 56px;
          height: 56px;
        }
      }
    }