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

    :root {
      --navy: #0d2d5e;
      --navy-deep: #071c3a;
      --green: #28b870;
      --green-glow: #3de098;
      --bg: #04101f;
      --text: #eef3ff;
      --muted: #8ca8cc;
      --glass-bg: rgba(13, 29, 56, 0.65);
      --glass-border: rgba(40, 184, 112, 0.25);
      --font-en: 'DM Sans', sans-serif;
      --font-heading: 'Montserrat', sans-serif;
      --card-bg: rgba(13, 29, 56, 0.4);
      --danger: #ff3b30;
      --warning: #ffcc00;
      --success: #34c759;
    }

    body {
      font-family: var(--font-en);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background-image:
        radial-gradient(circle at 5% 20%, rgba(40, 184, 112, 0.06), transparent 30%),
        radial-gradient(circle at 95% 10%, rgba(13, 45, 94, 0.45), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(40, 184, 112, 0.04), transparent 45%);
      background-attachment: fixed;
    }

    /* Container */
    .dashboard-container {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem 1.5rem;
      flex: 1;
    }

    /* Brand Header */
    .brand-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-bottom: 1.5rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.9rem;
    }

    .brand-logo-img {
      width: 42px;
      height: 42px;
      filter: brightness(0) invert(1);
    }

    .brand__title {
      font-family: var(--font-heading);
      font-size: 1.45rem;
      letter-spacing: 0.3em;
      font-weight: 900;
      color: var(--text);
      line-height: 1;
    }

    .brand__subtitle {
      font-size: 0.6rem;
      color: var(--green);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .btn {
      padding: 0.6rem 1.2rem;
      border-radius: 12px;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--green), #1fa060);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 184, 112, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(40, 184, 112, 0.45);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .btn-danger {
      background: rgba(255, 59, 48, 0.15);
      border: 1px solid rgba(255, 59, 48, 0.3);
      color: #ff453a;
    }

    .btn-danger:hover {
      background: rgba(255, 59, 48, 0.25);
    }

    /* Security Override Lock Screen */
    .lock-screen {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
      background-image: radial-gradient(circle at 50% 50%, rgba(13, 29, 56, 0.9), var(--bg) 80%);
    }

    .lock-box {
      width: 100%;
      max-width: 420px;
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      padding: 2.5rem;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      text-align: center;
    }

    .lock-icon {
      font-size: 3rem;
      color: var(--green);
      margin-bottom: 1.5rem;
      text-shadow: 0 0 20px rgba(40, 184, 112, 0.3);
    }

    .lock-box h2 {
      font-family: var(--font-heading);
      font-size: 1.6rem;
      margin-bottom: 0.5rem;
      color: white;
    }

    .lock-box p {
      color: var(--muted);
      font-size: 0.9rem;
      margin-bottom: 2rem;
    }

    .lock-input {
      width: 100%;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 1rem 1.2rem;
      border-radius: 12px;
      color: white;
      font-size: 1.1rem;
      text-align: center;
      letter-spacing: 0.25em;
      margin-bottom: 1.5rem;
      transition: all 0.3s;
    }

    .lock-input:focus {
      outline: none;
      border-color: var(--green);
      box-shadow: 0 0 12px rgba(40, 184, 112, 0.25);
    }

    /* Banner */
    .demo-banner {
      background: rgba(40, 184, 112, 0.1);
      border: 1px dashed var(--green);
      border-radius: 16px;
      padding: 1rem 1.5rem;
      margin-bottom: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .demo-banner-text {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      font-size: 0.95rem;
    }

    .demo-banner-text i {
      color: var(--green);
      font-size: 1.3rem;
    }

    @media (max-width: 768px) {
      #projectEnhancementGrid {
        grid-template-columns: 1fr !important;
      }
    }

    /* Tabs Slider */
    .tabs-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 2.5rem;
    }

    .tabs {
      display: flex;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 40px;
      padding: 0.4rem;
      gap: 0.2rem;
    }

    .tab-btn {
      padding: 0.8rem 2rem;
      border-radius: 30px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--muted);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .tab-btn:hover {
      color: white;
    }

    .tab-btn.active {
      background: var(--green);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 184, 112, 0.35);
    }

    /* Dropdown Tab Styling */
    .tab-dropdown {
      position: relative;
      display: inline-block;
    }

    .tab-dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: rgba(13, 29, 56, 0.95);
      border: 1px solid rgba(40, 184, 112, 0.25);
      border-radius: 16px;
      padding: 0.5rem;
      min-width: 220px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(40, 184, 112, 0.15);
      z-index: 100;
      backdrop-filter: blur(15px);
      flex-direction: column;
      gap: 0.25rem;
    }

    /* Show on hover */
    .tab-dropdown:hover .tab-dropdown-content,
    .tab-dropdown.open .tab-dropdown-content {
      display: flex;
    }

    /* Sub-menu options */
    .dropdown-item {
      padding: 0.8rem 1.5rem;
      border-radius: 30px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--muted);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      width: 100%;
      text-align: left;
    }

    .dropdown-item:hover {
      color: white;
      background: rgba(255, 255, 255, 0.05);
    }

    .dropdown-item.active {
      background: var(--green);
      color: white;
      box-shadow: 0 4px 12px rgba(40, 184, 112, 0.25);
    }

    /* Chevron rotation */
    .tab-dropdown:hover #tabAnalyticsBtn i.fa-chevron-down {
      transform: rotate(180deg);
    }
    #tabAnalyticsBtn i.fa-chevron-down {
      transition: transform 0.3s ease;
    }

    /* Grid Layouts */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .kpi-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 20px;
      padding: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }

    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--green);
    }

    .kpi-details h3 {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin-bottom: 0.6rem;
    }

    .kpi-val {
      font-family: var(--font-heading);
      font-size: 2.1rem;
      font-weight: 800;
      color: white;
    }

    .kpi-icon {
      font-size: 2.5rem;
      color: rgba(40, 184, 112, 0.15);
    }

    /* Charts & Analytics section */
    .analytics-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 24px;
      padding: 2rem;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }

    .card-title {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      color: white;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-bottom: 0.8rem;
    }

    .card-title i {
      color: var(--green);
    }

    .chart-container {
      position: relative;
      width: 100%;
      height: 340px;
    }

    /* Optimizer recommendations */
    .optimizer-card {
      grid-column: span 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .optimizer-col h4 {
      font-family: var(--font-heading);
      font-size: 1rem;
      color: white;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .rec-item {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 0.8rem;
      display: flex;
      gap: 0.8rem;
    }

    .rec-item.low {
      border-left: 4px solid var(--danger);
    }

    .rec-item.high {
      border-left: 4px solid var(--success);
    }

    .rec-icon {
      font-size: 1.2rem;
      margin-top: 0.1rem;
    }

    .rec-item.low .rec-icon {
      color: var(--danger);
    }

    .rec-item.high .rec-icon {
      color: var(--success);
    }

    .rec-content h5 {
      font-weight: 700;
      color: white;
      font-size: 0.95rem;
      margin-bottom: 0.3rem;
    }

    .rec-content p {
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .rec-action {
      background: rgba(40, 184, 112, 0.08);
      border: 1px solid rgba(40, 184, 112, 0.2);
      border-radius: 8px;
      padding: 0.5rem 0.8rem;
      margin-top: 0.6rem;
      font-size: 0.8rem;
      color: var(--green-glow);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    /* Submissions List */
    .submissions-card {
      grid-column: span 2;
    }

    .table-wrapper {
      width: 100%;
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    th {
      font-family: var(--font-heading);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      padding: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    td {
      padding: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.9rem;
      color: var(--text);
    }

    tr:hover td {
      background: rgba(255, 255, 255, 0.02);
      cursor: pointer;
    }

    .badge-score {
      padding: 0.25rem 0.6rem;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
    }

    .badge-score.high {
      background: rgba(52, 199, 89, 0.15);
      color: var(--success);
    }

    .badge-score.medium {
      background: rgba(255, 204, 0, 0.15);
      color: var(--warning);
    }

    .badge-score.low {
      background: rgba(255, 59, 48, 0.15);
      color: #ff453a;
    }

    /* Detail Drawer Panel */
    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: none;
      animation: fadeIn 0.3s;
    }

    .drawer-overlay.active {
      display: block;
    }

    .drawer {
      position: fixed;
      top: 0;
      right: -500px;
      width: 100%;
      max-width: 500px;
      height: 100vh;
      background: var(--navy-deep);
      border-left: 1px solid var(--glass-border);
      box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
      z-index: 1001;
      transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
    }

    .drawer.active {
      right: 0;
    }

    .drawer-header {
      padding: 1.8rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawer-header h3 {
      font-family: var(--font-heading);
      color: white;
      font-size: 1.25rem;
    }

    .close-drawer {
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: 1.5rem;
      cursor: pointer;
    }

    .close-drawer:hover {
      color: white;
    }

    .drawer-body {
      padding: 1.8rem;
      flex: 1;
      overflow-y: auto;
    }

    .detail-group {
      margin-bottom: 1.5rem;
    }

    .detail-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 0.3rem;
    }

    .detail-val {
      font-size: 0.95rem;
      color: white;
      font-weight: 500;
    }

    .score-breakdown-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.85rem;
    }

    .score-breakdown-label {
      color: var(--text);
    }

    .score-breakdown-val {
      font-weight: 700;
      color: var(--green-glow);
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Footer */
    footer {
      padding: 2rem 0;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      margin-top: auto;
      color: var(--muted);
      font-size: 0.85rem;
    }

    @media(max-width: 992px) {
      .analytics-grid {
        grid-template-columns: 1fr;
      }

      .optimizer-card {
        grid-column: span 1;
        grid-template-columns: 1fr;
      }

      .submissions-card {
        grid-column: span 1;
      }
    }

    /* Social Suite Styling */
    .option-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 0.8rem 1rem;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.3s;
    }

    .option-card:hover {
      background: rgba(40, 184, 112, 0.04);
      border-color: rgba(40, 184, 112, 0.2);
    }

    .option-card.selected {
      background: rgba(40, 184, 112, 0.08);
      border-color: var(--green);
      box-shadow: 0 0 10px rgba(40, 184, 112, 0.15);
    }

    .badge-platform {
      padding: 0.25rem 0.6rem;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.75rem;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      margin-right: 0.3rem;
    }

    .badge-platform.linkedin {
      background: rgba(10, 102, 194, 0.15);
      color: #3b9bff;
    }

    .badge-platform.xtwitter {
      background: rgba(255, 255, 255, 0.08);
      color: #ffffff;
    }

    .badge-platform.instagram {
      background: rgba(225, 48, 108, 0.15);
      color: #ff5e97;
    }

    .badge-platform.facebookpage {
      background: rgba(24, 119, 242, 0.15);
      color: #4b97ff;
    }

    /* Premium Dropzone File Uploader */
    .uploader-dropzone {
      border: 2px dashed rgba(255, 255, 255, 0.15) !important;
      background: rgba(4, 16, 31, 0.4);
      border-radius: 12px;
      padding: 1.2rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .uploader-dropzone:hover,
    .uploader-dropzone.dragover {
      border-color: var(--green) !important;
      background: rgba(40, 184, 112, 0.05);
      box-shadow: 0 0 15px rgba(40, 184, 112, 0.15);
    }

    /* Live Preview Tabs */
    .preview-tab {
      background: none;
      border: none;
      padding: 4px 12px;
      border-radius: 20px;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .preview-tab:hover {
      background: rgba(255, 255, 255, 0.05);
      color: white;
    }

    .preview-tab.active#prevLiBtn {
      background: rgba(10, 102, 194, 0.25) !important;
      color: #3b9bff !important;
    }

    .preview-tab.active#prevFbBtn {
      background: rgba(24, 119, 242, 0.25) !important;
      color: #4b97ff !important;
    }

    .preview-tab.active#prevXBtn {
      background: rgba(255, 255, 255, 0.15) !important;
      color: #ffffff !important;
    }

    .preview-tab.active#prevIgBtn {
      background: rgba(225, 48, 108, 0.25) !important;
      color: #ff5e97 !important;
    }

    /* 🚀 NEW: Accounts Directory & Timeline styling */
    /* ═══════════════════════════════════════════════════
       PREMIUM ACCOUNTS & AUDITS - ENHANCED STYLES
       ═══════════════════════════════════════════════════ */

    /* KPI Stats Row */
    .accounts-kpi-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
      margin-bottom: 2rem;
    }
    @media (max-width: 1100px) { .accounts-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 700px) { .accounts-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .accounts-kpi-grid { grid-template-columns: 1fr; } }

    .acct-kpi {
      border-radius: 20px;
      padding: 1.5rem 1.4rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.05);
      backdrop-filter: blur(14px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .acct-kpi:hover { transform: translateY(-3px); }
    .acct-kpi::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      opacity: 0.07;
      pointer-events: none;
    }
    .acct-kpi-1 { background: linear-gradient(135deg, rgba(59,155,255,0.15), rgba(13,29,56,0.7)); border-color: rgba(59,155,255,0.2); box-shadow: 0 8px 25px rgba(59,155,255,0.1); }
    .acct-kpi-2 { background: linear-gradient(135deg, rgba(40,184,112,0.15), rgba(13,29,56,0.7)); border-color: rgba(40,184,112,0.2); box-shadow: 0 8px 25px rgba(40,184,112,0.1); }
    .acct-kpi-3 { background: linear-gradient(135deg, rgba(212,168,67,0.15), rgba(13,29,56,0.7)); border-color: rgba(212,168,67,0.2); box-shadow: 0 8px 25px rgba(212,168,67,0.1); }
    .acct-kpi-4 { background: linear-gradient(135deg, rgba(187,134,252,0.15), rgba(13,29,56,0.7)); border-color: rgba(187,134,252,0.2); box-shadow: 0 8px 25px rgba(187,134,252,0.1); }
    .acct-kpi-5 { background: linear-gradient(135deg, rgba(0,255,204,0.12), rgba(13,29,56,0.7)); border-color: rgba(0,255,204,0.2); box-shadow: 0 8px 25px rgba(0,255,204,0.1); }
    .acct-kpi-5 .acct-kpi-icon { background: rgba(0,255,204,0.12); color: #00ffcc; }

    .acct-kpi-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .acct-kpi-1 .acct-kpi-icon { background: rgba(59,155,255,0.15); color: #3b9bff; }
    .acct-kpi-2 .acct-kpi-icon { background: rgba(40,184,112,0.15); color: var(--green-glow); }
    .acct-kpi-3 .acct-kpi-icon { background: rgba(212,168,67,0.15); color: #f0c060; }
    .acct-kpi-4 .acct-kpi-icon { background: rgba(187,134,252,0.15); color: #bb86fc; }

    .acct-kpi-info h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; }
    .acct-kpi-val { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: white; line-height: 1; }
    .acct-kpi-delta { font-size: 0.7rem; font-weight: 600; margin-top: 4px; }
    .acct-kpi-delta.up { color: var(--green-glow); }
    .acct-kpi-delta.neutral { color: var(--muted); }

    /* Activity Filter Pills */
    .activity-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      align-items: center;
    }
    .activity-filter-label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-right: 0.5rem;
    }
    .filter-pill {
      padding: 0.35rem 0.9rem;
      border-radius: 30px;
      font-size: 0.78rem;
      font-weight: 600;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .filter-pill:hover { color: white; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); }
    .filter-pill.active { color: white; background: var(--green); border-color: var(--green); box-shadow: 0 3px 12px rgba(40,184,112,0.35); }
    .filter-pill.active-blue { color: white; background: #3b9bff; border-color: #3b9bff; }
    .filter-pill.active-pink { color: white; background: #ff5e97; border-color: #ff5e97; }
    .filter-pill.active-gold { color: #1a1a1a; background: #f0c060; border-color: #f0c060; }
    .filter-pill.active-purple { color: white; background: #bb86fc; border-color: #bb86fc; }
    .filter-pill.active-cyan { color: #1a1a1a; background: #00ffcc; border-color: #00ffcc; }

    /* Enhanced Account Item Cards */
    .account-item-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 1rem 1.1rem;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      display: flex;
      align-items: center;
      gap: 0.85rem;
      position: relative;
    }

    .account-item-card:hover {
      background: rgba(40, 184, 112, 0.05);
      border-color: rgba(40, 184, 112, 0.25);
      transform: translateX(4px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    }

    .account-item-card.active {
      background: rgba(40, 184, 112, 0.1);
      border-color: var(--green);
      box-shadow: 0 0 20px rgba(40, 184, 112, 0.2), inset 0 0 10px rgba(40,184,112,0.03);
    }
    .account-item-card.active::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--green);
      border-radius: 3px 0 0 3px;
    }

    .account-avatar-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 1rem;
      flex-shrink: 0;
      border: 2px solid rgba(40,184,112,0.3);
      position: relative;
    }
    .account-avatar-circle img {
      width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    }
    .account-avatar-online-dot {
      position: absolute;
      bottom: 0; right: 0;
      width: 10px; height: 10px;
      border-radius: 50%;
      border: 2px solid var(--bg);
    }

    .account-item-body { flex: 1; min-width: 0; }
    .account-item-name {
      font-family: var(--font-heading);
      font-weight: 700;
      color: white;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .account-item-email {
      font-size: 0.77rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .account-item-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.72rem;
      color: var(--muted);
      margin-top: 5px;
    }
    .account-item-badge {
      background: rgba(40,184,112,0.12);
      border: 1px solid rgba(40,184,112,0.25);
      color: var(--green-glow);
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 20px;
      white-space: nowrap;
    }

    /* Stat Chips in Profile View */
    .profile-stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.8rem;
      margin-top: 1rem;
    }
    .profile-stat-chip {
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 14px;
      padding: 0.9rem 1rem;
      text-align: center;
    }
    .profile-stat-chip-val {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 800;
      color: white;
    }
    .profile-stat-chip-label {
      font-size: 0.7rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 3px;
    }

    /* Enhanced Timeline */
    .timeline-node {
      position: relative;
      padding-bottom: 1.2rem;
    }

    .timeline-node::before {
      content: '';
      position: absolute;
      left: -1.95rem;
      top: 7px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--green);
      box-shadow: 0 0 10px rgba(40,184,112,0.5);
      z-index: 2;
      transition: all 0.3s ease;
    }

    .timeline-node:hover::before {
      background: var(--green-glow);
      transform: scale(1.4);
      box-shadow: 0 0 16px var(--green);
    }

    .timeline-node-inner {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 14px;
      padding: 0.9rem 1rem;
      transition: all 0.25s ease;
    }
    .timeline-node-inner:hover {
      background: rgba(40,184,112,0.04);
      border-color: rgba(40,184,112,0.2);
    }

    .timeline-node-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .timeline-node-type {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: var(--font-heading);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 8px;
      border-radius: 20px;
    }

    .timeline-node-type.auth_register { color: #3b9bff; background: rgba(59,155,255,0.12); border: 1px solid rgba(59,155,255,0.2); }
    .timeline-node-type.auth_login { color: var(--green-glow); background: rgba(40,184,112,0.1); border: 1px solid rgba(40,184,112,0.2); }
    .timeline-node-type.auth_logout { color: #ff5e97; background: rgba(255,94,151,0.1); border: 1px solid rgba(255,94,151,0.2); }
    .timeline-node-type.survey_submit_event { color: #f0c060; background: rgba(240,192,96,0.1); border: 1px solid rgba(240,192,96,0.2); }
    .timeline-node-type.survey_submit_medical { color: #bb86fc; background: rgba(187,134,252,0.1); border: 1px solid rgba(187,134,252,0.2); }
    .timeline-node-type.planner_booking_request { color: #00ffcc; background: rgba(0,255,204,0.08); border: 1px solid rgba(0,255,204,0.2); }
    .timeline-node-type.profile_update { color: #ff9f3b; background: rgba(255,159,59,0.1); border: 1px solid rgba(255,159,59,0.2); }

    .timeline-node-time {
      font-size: 0.7rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .timeline-node-details {
      font-size: 0.82rem;
      color: var(--text);
      line-height: 1.45;
      margin-bottom: 4px;
    }

    .timeline-node-device {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.68rem;
      color: rgba(255,255,255,0.2);
      margin-top: 4px;
    }
    .timeline-node-device i { font-size: 0.7rem; }

    .timeline-node-agent {
      font-size: 0.7rem;
      color: var(--muted);
      margin-top: 4px;
      font-style: italic;
    }

    /* Export Button */
    .btn-export {
      background: rgba(40,184,112,0.08);
      border: 1px solid rgba(40,184,112,0.3);
      color: var(--green-glow);
      padding: 0.45rem 1rem;
      border-radius: 10px;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .btn-export:hover {
      background: rgba(40,184,112,0.18);
      box-shadow: 0 0 15px rgba(40,184,112,0.2);
    }

    /* Activity Sparkline bars in user card */
    .activity-sparkline {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 22px;
    }
    .spark-bar {
      width: 5px;
      border-radius: 3px;
      background: rgba(40,184,112,0.4);
      transition: height 0.4s ease, background 0.3s;
    }
    .spark-bar:hover { background: var(--green); }

    /* Animated pulse dot for 'Recent Activity' */
    @keyframes pulseGreenDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.4); }
    }
    .live-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green-glow);
      animation: pulseGreenDot 1.5s infinite;
      display: inline-block;
    }

    /* Activity Heatmap */
    .activity-heatmap {
      display: grid;
      grid-template-columns: repeat(30, 1fr);
      gap: 3px;
      margin-top: 0.5rem;
    }
    .heatmap-day {
      aspect-ratio: 1;
      border-radius: 3px;
      cursor: default;
      transition: transform 0.2s ease;
      position: relative;
    }
    .heatmap-day:hover {
      transform: scale(1.5);
      z-index: 10;
    }
    .heatmap-tooltip {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(13,29,56,0.95);
      border: 1px solid var(--green);
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 0.65rem;
      white-space: nowrap;
      color: white;
      pointer-events: none;
      display: none;
      z-index: 100;
    }
    .heatmap-day:hover .heatmap-tooltip { display: block; }

    /* All Actions Table */
    .audit-full-table-wrapper {
      overflow-x: auto;
      max-height: 480px;
      overflow-y: auto;
    }
    .audit-full-table-wrapper table th {
      position: sticky;
      top: 0;
      background: rgba(7, 28, 58, 0.97);
      z-index: 5;
      backdrop-filter: blur(8px);
    }
    .audit-action-cell {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
    }
    .audit-action-cell.auth_register { color: #3b9bff; background: rgba(59,155,255,0.1); }
    .audit-action-cell.auth_login { color: var(--green-glow); background: rgba(40,184,112,0.1); }
    .audit-action-cell.auth_logout { color: #ff5e97; background: rgba(255,94,151,0.1); }
    .audit-action-cell.profile_update { color: #ff9f3b; background: rgba(255,159,59,0.1); }
    .audit-action-cell.planner_booking_request { color: #00ffcc; background: rgba(0,255,204,0.08); }
    .audit-action-cell.survey_submit_event { color: #f0c060; background: rgba(240,192,96,0.1); }
    .audit-action-cell.survey_submit_medical { color: #bb86fc; background: rgba(187,134,252,0.1); }
    .audit-action-cell.survey { color: #f0c060; background: rgba(240,192,96,0.1); }

    /* Activity Breakdown Chart Card */
    .breakdown-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    @media (max-width: 768px) { .breakdown-grid { grid-template-columns: 1fr; } }

    /* Refresh & countdown button */
    .refresh-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--muted);
      padding: 0.35rem 0.8rem;
      border-radius: 10px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
    }
    .refresh-btn:hover { border-color: var(--green); color: var(--green-glow); background: rgba(40,184,112,0.06); }
    .refresh-btn.spinning i { animation: spinOnce 0.8s linear; }
    @keyframes spinOnce { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* Profile stat chips – 4 columns */
    .profile-stat-row { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 600px) { .profile-stat-row { grid-template-columns: repeat(2, 1fr); } }

    /* Premium Content Publisher Styles */
    .pl-card {
      background: rgba(13, 29, 56, 0.45);
      border: 1px solid rgba(40, 184, 112, 0.15);
      border-radius: 16px;
      padding: 28px;
      margin-bottom: 16px;
      backdrop-filter: blur(10px);
    }

    .pl-card-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pl-g2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    @media (max-width: 768px) {
      .pl-g2 {
        grid-template-columns: 1fr;
      }
    }

    .pl-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .pl-lbl {
      font-size: 11px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .pl-inp {
      font-family: var(--font-en);
      font-size: 14px;
      color: var(--text);
      background: rgba(13, 29, 56, 0.6);
      border: 1px solid rgba(40, 184, 112, 0.2);
      border-radius: 10px;
      padding: 9px 13px;
      width: 100%;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .pl-inp:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(40, 184, 112, 0.15);
    }

    .pl-inp::placeholder {
      color: rgba(140, 168, 204, 0.5);
    }