body { margin:0; font-family:'Inter',sans-serif; background:#f9fafb; color:#111827; }
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background: white;
      padding: 1rem 2rem;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      z-index: 1000;
      box-sizing: border-box;
      overflow: visible;
    }

    .topbar #proBadge {
      background: #7c3aed;
      color: #fff;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      margin-right: auto;
      font-size: 0.875rem;
      font-weight: 500;
      display: none; /* toggled via JS in Pro mode */
    }

    .topbar #downloadDesktop {
      margin-right: 1rem;
      display: flex;
      align-items: center;
      color: #4f46e5;
      font-weight: 500;
      font-size: 0.875rem;
      text-decoration: none;
    }

    .topbar #downloadDesktop i {
      margin-right: 4px;
    }
    .dropdown { cursor:pointer; font-weight:500; font-size:14px; }
    .dropdown i { vertical-align:middle; margin-right:0.25rem; }
    .container { display:flex; min-height:100vh; }
    /* ensure content sits below fixed topbar */
    .sidebar { width:220px; background:white; border-right:1px solid #e5e7eb; padding:2rem 1rem; }
    .sidebar h4 { font-size:12px; text-transform:uppercase; color:#9ca3af; margin-bottom:1rem; }
    .tab { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; margin-bottom:.5rem; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer; color:#374151; }
    .tab.active { background:#eef2ff; color:#4f46e5; font-weight:600; border-left:4px solid #4f46e5; }
    main { flex:1; padding:2rem; }
    /* Overview */
    .dashboard { display:flex; gap:2rem; flex-wrap:wrap; }
    /* Fix metrics card width on Overview dashboard */
    #overview-tab .dashboard .card {
      flex: 0 0 600px;
      max-width: 600px;
    }
    /* Match Task List width to metrics card */
    #overview-tab .dashboard .task-list-section {
      flex: 0 0 450px;
      max-width: 450px;
    }
/* --- Fancy ID Card Styles --- */
.profile-card {
  position: relative;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  color: #232946;
  padding: 2.2rem 1.5rem 2.8rem 1.5rem;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(80,40,200,0.15), 0 1.5px 5px rgba(0,0,0,0.03);
  max-width: 320px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  border: 1.5px solid #b792f7;
  font-family: 'Inter', sans-serif;
  z-index: 1;
}
.profile-card::before {
  /* Watermark effect */
  content: "Creator Portal";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 800;
  color: #b7b7e7;
  opacity: 0.11;
  letter-spacing: 0.16em;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50%) rotate(-18deg);
  user-select: none;
}
.profile-card .badge {
  background: linear-gradient(90deg, #e0c3fc 0%, #a1c4fd 100%);
  color: #7c3aed;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.2rem;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 3px rgba(124,60,237,0.10);
  position: relative;
  z-index: 2;
  border: 1px solid #e0c3fc;
}
.profile-card .profile-avatar {
  background: linear-gradient(135deg, #fff 60%, #e0c3fc 100%);
  color: #7c3aed;
  font-size: 2.6rem;
  font-weight: 700;
  border-radius: 13px;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem auto;
  border: 2.5px solid #8ec5fc;
  box-shadow: 0 2px 8px rgba(140,120,220,0.08);
  position: relative;
  z-index: 2;
  transition: box-shadow 0.2s;
}
.profile-card .profile-avatar:hover {
  box-shadow: 0 6px 24px rgba(124,60,237,0.18);
}
.profile-card .profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #232946;
  margin-bottom: 0.3rem;
  z-index: 2;
  position: relative;
  letter-spacing: 0.03em;
}
.profile-card .profile-email {
  font-size: 0.98rem;
  color: #4f46e5;
  margin-bottom: 1.1rem;
  z-index: 2;
  position: relative;
  word-break: break-all;
}
.profile-card .profile-meta {
  font-size: 0.91rem;
  color: #6366f1;
  margin-bottom: 1.3rem;
  z-index: 2;
  position: relative;
}
.profile-card .profile-actions {
  margin-top: 1.3rem;
  z-index: 2;
  position: relative;
}
.profile-card .profile-actions button,
.profile-card .profile-actions a {
  background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  margin-right: 0.7rem;
  margin-bottom: 0.4rem;
  box-shadow: 0 1.5px 4px rgba(80,40,200,0.10);
  text-decoration: none;
  transition: background 0.16s;
}
.profile-card .profile-actions button:hover,
.profile-card .profile-actions a:hover {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}
/* Holo strip effect */
.profile-card .holo-strip {
  position: absolute;
  left: -36px;
  top: 12px;
  width: 36px;
  height: 110px;
  background: repeating-linear-gradient(
    135deg,
    #fff 0px, #f0eaff 6px,
    #d1c4e9 12px, #b39ddb 18px,
    #fff 24px
  );
  opacity: 0.64;
  border-radius: 18px 0 0 18px;
  filter: blur(0.5px);
  z-index: 1;
  pointer-events: none;
}
.profile-card .holo-strip::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.28) 50%, transparent 100%);
  border-radius: 18px 0 0 18px;
}
    .card { background:white; padding:1.5rem; border-radius:1rem; box-shadow:0 1px 3px rgba(0,0,0,0.1); flex:1; min-width:300px; }
    .metrics { display:flex; justify-content:space-around; margin-bottom:1rem; }
    /* Media */
    .media-section .project-form input, .media-section .project-form button { margin-bottom:1rem; }
    /* Money */
    .money-section ul { list-style:disc; padding-left:1.25rem; }
    /* Settings */
    .settings-section label { display:block; font-weight:500; margin-bottom:.25rem; }
    .settings-section input { width:100%; padding:.5rem; margin-bottom:1rem; border:1px solid #d1d5db; border-radius:6px; }
    /* Dark mode styles */
    body.dark-mode { background: #1f2937; color: #f9fafb; }
    body.dark-mode .topbar { background: #111827; }
    body.dark-mode .sidebar { background: #111827; border-color: #374151; }
    body.dark-mode .sidebar .tab { color: #d1d5db; }
    body.dark-mode .sidebar .tab.active { background: #374151; color: #f9fafb; border-left-color: #6366f1; }
    body.dark-mode main, 
    body.dark-mode .card, 
    body.dark-mode .money-section, 
    body.dark-mode .media-section .project-form, 
    body.dark-mode .settings-section { background: #374151; }
    body.dark-mode input, 
    body.dark-mode textarea, 
    body.dark-mode select { background: #4b5563; color: #f9fafb; border: 1px solid #6b7280; }
    body.dark-mode table { color: #f9fafb; }
    body.dark-mode table th, 
    body.dark-mode table td { border-color: #4b5563; }
    /* Task List dark-mode overrides */
    body.dark-mode .task-list-section {
      background: #374151;
    }
    body.dark-mode .task-list-section h2 {
      color: #f9fafb;
    }
    body.dark-mode .task-list-section input,
    body.dark-mode .task-list-section button {
      background: #4b5563;
      color: #f9fafb;
      border: 1px solid #6b7280;
    }
    body.dark-mode .task-list-section ul li {
      background: #4b5563;
      border: 1px solid #6b7280;
    }
    body.dark-mode .task-list-section ul li .text {
      color: #f9fafb;
    }
    /* Settings card text in dark mode */
    body.dark-mode .card.settings-section,
    body.dark-mode .card.settings-section span,
    body.dark-mode .card.settings-section label {
      color: #f9fafb;
    }
    /* Task List styles */
    .task-list-section { background:white; padding:1.5rem; border-radius:1rem; box-shadow:0 1px 3px rgba(0,0,0,0.1); margin-bottom:2rem; }
    .task-list-section h2 { margin-top:0; }
    .task-list-section input { width:calc(100% - 100px); padding:.5rem; border:1px solid #d1d5db; border-radius:6px; margin-right:.5rem; }
    .task-list-section button { padding:.5rem 1rem; border:none; border-radius:6px; background:#4f46e5; color:white; cursor:pointer; }
    .task-list-section ul { list-style:none; padding:0; margin-top:1rem; }
    .task-list-section li { display:flex; align-items:center; justify-content:space-between; padding:.5rem; border:1px solid #e5e7eb; border-radius:6px; margin-bottom:.5rem; background:#fff; cursor:grab; }
    .task-list-section li.dragging { opacity:0.5; }
    .task-list-section li input[type="checkbox"] { margin-right:.5rem; }
    .task-list-section li .text { flex:1; }
    .task-list-section li .actions button {
      background: none;
      border: none;
      cursor: pointer;
      color: #dc2626;
      font-size: 1.25rem;
      margin-left: .5rem;
    }

    /* Toggle switch styles */
    .switch { position: relative; display: inline-block; width:50px; height:24px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top:0; left:0; right:0; bottom:0; background:#ccc; transition:.4s; border-radius:24px; }
    .slider:before { position: absolute; content: ""; height:18px; width:18px; left:3px; bottom:3px; background:white; transition: .4s; border-radius:50%; }
    .switch input:checked + .slider { background: #4f46e5; }
    .switch input:checked + .slider:before { transform: translateX(26px); }

    /* User dropdown menu */
    .dropdown { position: relative; }
    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: none;
      list-style: none;
      margin: 0.5rem 0 0;
      padding: 1rem;
      min-width: 260px;
      z-index: 1001;
      opacity: 0;
      transform: translateY(-5px);
      transition: opacity 200ms ease, transform 200ms ease;
    }
    .dropdown-menu::before {
      content: "";
      position: absolute;
      top: -7px;
      right: 20px;
      border-width: 7px;
      border-style: solid;
      border-color: transparent transparent #e5e7eb transparent;
      z-index: 1002;
    }
    .dropdown-menu::after {
      content: "";
      position: absolute;
      top: -6px;
      right: 20px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent #ffffff transparent;
      z-index: 1003;
    }
    .dropdown-menu li {
      padding: 0.75rem 1rem;
      cursor: pointer;
      font-size: 14px;
      color: #111827;
    }
    .dropdown-menu li:hover {
      background: #f3f4f6;
    }
    .dropdown-menu li.signout {
      color: #dc2626;
    }
    .dropdown.open .dropdown-menu {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
    .dropdown i {
      transition: transform 200ms ease;
    }
    .dropdown.open #authToggle i {
      transform: rotate(180deg);
    }
    /* Rotate chevron on dropdown open */
    .dropdown.open #authToggle i[data-lucide="chevron-down"] {
      transform: rotate(180deg);
    }
    /* Media, Money, Documents subtabs */
    /* Subtab container */
    .subtabs { display:flex; gap:1rem; margin-bottom:1rem; }
    /* Individual subtabs */
    .subtab { padding:.5rem 1rem; border-radius:6px; background:#f3f4f6; color:#6b7280; cursor:pointer; font-weight:500; }
    .subtab.active { background:#eef2ff; color:#4f46e5; font-weight:600; }
    /* Inline Auth form styles */
    #authContainer input {
      padding: .5rem .75rem;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      background: white;
      color: #111827;
      font-size: 14px;
    }
    #authContainer input:focus {
      outline: none;
      border-color: #4f46e5;
    }
    #authContainer button#signInBtn,
    #authContainer button#signOutBtn {
      background: #4f46e5;
      color: white;
      padding: .5rem 1rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
    }
    #authContainer span#authError {
      font-size: 12px;
      color: #dc2626;
      margin-left: .5rem;
    }
    /* Ensure marketplace cards fill grid cells and have consistent height */
    .marketplace-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      flex: none;
      min-width: 0;
      box-sizing: border-box;
      height: 100%;
      min-height: 400px;
    }
    /* Marketplace filter buttons */
    .filterBtn {
      background: #f3f4f6;
      color: #6b7280;
      padding: .5rem 1rem;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 14px;
      margin-right: .5rem;
      transition: background 0.2s, color 0.2s;
    }
    .filterBtn.active {
      background: #eef2ff;
      color: #4f46e5;
      font-weight: 600;
    }
    /* Pagination buttons */
    .paginationBtn {
      background: #f3f4f6;
      color: #6b7280;
      padding: .5rem 1rem;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 14px;
      margin: 0 .5rem;
      transition: background 0.2s, color 0.2s;
    }
    .paginationBtn:disabled {
      background: #e5e7eb;
      color: #9ca3af;
      cursor: default;
    }

    /* Ensure project cards fit their grid cells and don’t overlap */
    #projectsList .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    /* Right menu handle (visible tab) */
    #right-menu-handle {
      position: fixed;
      top: 200px; /* adjust as needed */
      right: 0;
      background: #7c3aed;
      padding: 0.5rem;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      cursor: pointer;
      z-index: 1001;
    }
    #right-menu-handle i {
      display: block;
      width: 24px;
      height: 24px;
    }
    /* Collapsible right menu */
    #right-menu {
      position: fixed;
      top: 60px;
      right: 0;
      width: 280px;
      height: calc(100% - 60px);
      background: #7c3aed;
      color: white;
      box-shadow: -2px 0 8px rgba(0,0,0,0.2);
      transform: translateX(100%);
      transition: transform 0.3s ease-in-out;
      z-index: 1000;
      display: flex;
      flex-direction: column;
    }
    #right-menu.open {
      transform: translateX(0);
    }
    #right-menu-header {
      display: flex;
      align-items: center;
      padding: 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    #right-menu-header i {
      cursor: pointer;
    }
    #right-menu-content {
      padding: 1rem;
      overflow-y: auto;
    }
    #right-menu-content h4 {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-size: 1rem;
    }
    /* Indicate dragging in right menu */
    #right-menu-tasks li.dragging {
      opacity: 0.5;
    }
    /* Pro mode styles */
body.pro-mode .topbar {
  background: linear-gradient(to right, #a855f7, #7c3aed);
}
body.pro-mode .tab.active {
  background: #f3e8ff;
  color: #7c3aed;
  border-left-color: #7c3aed;
}
body.pro-mode .filterBtn.active {
  background: #f3e8ff;
  color: #7c3aed;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2.5rem;
    height: 62px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(80,90,130,.04);
  }
  
  .topbar .user-email {
    color: #4f46e5;
    font-weight: 500;
    margin-left: 1.1rem;
    margin-right: 0.1rem;
    font-size: 17px;
    letter-spacing: 0.02em;
    vertical-align: middle;
  }
  
  .topbar button {
    padding: 0.4rem 1.1rem;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 1.2rem;
    transition: background 0.2s;
  }
  .topbar button:hover {
    background: #3b32c9;
  }
  .topbar button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #a5b4fc;
  }
  button#logout, .topbar button, .logout-btn {
    padding: 0.4rem 1.1rem;
    background: #4f46e5 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 7px !important;
    font-size: 16px !important;
    font-weight: 500;
    cursor: pointer;
    margin-left: 1.2rem;
    transition: background 0.2s;
  }
  button#logout:hover, .logout-btn:hover {
    background: #3b32c9 !important;
  }
  #right-menu-header i#right-menu-close {
    font-size: 2rem;
    margin-right: 1.2rem;
    color: white;
    cursor: pointer;
    vertical-align: middle;
  }
/* Animate the X when closing the right menu */
@keyframes bounce-x {
    0%   { transform: scale(1) rotate(0deg);}
    30%  { transform: scale(1.15) rotate(10deg);}
    50%  { transform: scale(1.18) rotate(-10deg);}
    70%  { transform: scale(1.12) rotate(6deg);}
    100% { transform: scale(1) rotate(0deg);}
  }
  .bounce-x-animate {
    animation: bounce-x 0.4s cubic-bezier(.49,1.76,.47,.76);
  }
  .settings-flex {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }
  .settings-profile-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
  }
  
  .profile-card {
    width: 100%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    color: #232946;
    padding: 2.2rem 1.5rem 2.8rem 1.5rem;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(80,40,200,0.15), 0 1.5px 5px rgba(0,0,0,0.03);
    text-align: left;
    overflow: hidden;
    border: 1.5px solid #b792f7;
    font-family: 'Inter', sans-serif;
    z-index: 1;
  }
  
  .profile-card .badge-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 2;
    height: 32px;
    background: linear-gradient(90deg, #e0c3fc40 5%, #a1c4fd40 95%);
    border-radius: 8px;
  }
  
  .profile-card .badge {
    background: linear-gradient(90deg, #e0c3fc 0%, #a1c4fd 100%);
    color: #7c3aed;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 20px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    letter-spacing: 0.08em;
    box-shadow: 0 1px 3px rgba(124,60,237,0.10);
    position: relative;
    z-index: 2;
    border: 1px solid #e0c3fc;
    transform: translateY(1px);
  }
/* Project Detail View Styling */
#project-view-tab {
  padding: 2rem;
}

/* Header Bar */
#project-view-tab .project-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}
#project-view-tab .project-view-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}
#project-view-tab .project-view-header button#editProjectBtn {
  background: none;
  border: none;
  color: #4f46e5;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
}
#project-view-tab .project-view-header button#editProjectBtn:hover {
  text-decoration: underline;
}

/* Metadata Grid */
#project-view-tab .project-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
#project-view-tab .project-meta div {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #374151;
}
#project-view-tab .project-meta strong {
  min-width: 5.5rem;
  font-weight: 500;
  margin-right: 0.5rem;
  color: #111827;
}

/* Card Overrides */
#project-view-tab .card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-top: 1.5rem;
}

/* Section Headings */
#project-view-tab .card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: #111827;
  font-weight: 500;
}

/* Filter Buttons */
#project-view-tab .task-filter,
#project-view-tab .file-filter {
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 9999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#project-view-tab .task-filter.active,
#project-view-tab .file-filter.active {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 500;
}

/* Lists */
#project-view-tab ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#project-view-tab ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.925rem;
  color: #374151;
}
#project-view-tab ul li:last-child {
  border-bottom: none;
}

/* Inputs & Buttons within Project View */
#project-view-tab input[type="date"],
#project-view-tab select {
  padding: 0.4rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.925rem;
  color: #111827;
  background: white;
}
#project-view-tab button#backToProjects {
  background: none;
  border: none;
  color: #4f46e5;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  margin-right: 1rem;
}
#project-view-tab button#backToProjects:hover {
  text-decoration: underline;
}

/* Scrollable Activity Feed */
#project-view-tab #project-activity-section ul {
  max-height: 180px;
  overflow-y: auto;
  padding-left: 1rem;
}
#Profile-avatar-image
.profile-avatar-img {
  width: 74px;
  height: 74px;
  border-radius: 0.7rem;
  object-fit: cover;
  border: 2.5px solid #e0b3ff;
  box-shadow: 0 1px 7px #d1d5db77;
  margin: 0 auto 1.1rem;
  display: block;
}

/* Collaborator avatar circles - compact, avatar-only, multi-row */
#projectCollaboratorsList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.23rem 0.23rem;
  padding: 0 0.2rem;
  align-items: center;
  max-width: 170px;
  min-height: 38px;
  overflow-x: visible;
  list-style: none;
}
/* Collaborator avatar circles - compact, avatar-only, multi-row */
.collab-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: 1.16rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at 65% 30%, #eef2ff 60%, #e0e7ff 100%);
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0;
  box-shadow: 0 3px 8px #7c3aed16, 0 1.5px 6px #9ca3af16;
  letter-spacing: 0.02em;
  border: 2.5px solid #fff;
  transition: box-shadow .15s, background .18s;
  user-select: none;
}

#projectCollaboratorsList li {
  min-width: 32px;
  max-width: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  background: none;
}

#projectCollaboratorsList .collab-add {
  background: radial-gradient(ellipse at 70% 40%, #ede9fe 65%, #f5f3ff 100%);
  color: #7c3aed;
  border: none !important;
  border-radius: 50%;
  font-size: 1.3rem;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  box-shadow: 0 3px 8px #7c3aed11, 0 1.5px 6px #9ca3af16;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  transition: box-shadow .12s;
}
#projectCollaboratorsList .collab-add:hover {
  box-shadow: 0 4px 16px #7c3aed33;
  background: #ede9fe;
}
#File List Item Styles
.file-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid #e5e7eb;
  transition: background 0.18s;
  gap: 2rem;
}
.file-list-item:last-child {
  border-bottom: none;
}
.file-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.file-name {
  font-weight: 500;
  font-size: 1rem;
  color: #232946;
}
.file-id {
  font-size: 0.84rem;
  color: #787a91;
  letter-spacing: 0.01em;
  user-select: all;
  cursor: pointer;
  margin-top: 2px;
  font-family: 'Menlo', 'Consolas', 'monospace';
}
.file-actions {
  display: flex;
  gap: .7rem;
}
.file-btn {
  background: #eef2ff;
  color: #4f46e5;
  border: none;
  padding: 0.42rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .16s, color .16s;
}
.file-btn:hover, .file-btn:focus {
  background: #4f46e5;
  color: #fff;
}

@media (max-width: 850px) {
  #projectCollaboratorsList {
    max-width: 100px;
  }
}
/* --- Project Header Save/Cancel Button Styles --- */
.project-header-btn {
  background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 1.08rem;
  font-weight: 500;
  padding: 0.47rem 1.5rem;
  margin-left: 0.75rem;
  cursor: pointer;
  box-shadow: 0 1.5px 4px rgba(80,40,200,0.09);
  transition: background 0.17s, box-shadow 0.18s;
}
.project-header-btn:hover,
.project-header-btn:focus {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 3px 12px #7c3aed24;
  outline: none;
}
.project-header-btn.cancel {
  background: #f3f4f6;
  color: #4f46e5;
  box-shadow: 0 1.5px 4px rgba(80,40,200,0.04);
}
.project-header-btn.cancel:hover,
.project-header-btn.cancel:focus {
  background: #e0e7ff;
  color: #4f46e5;
  box-shadow: 0 2.5px 8px #7c3aed14;
  outline: none;
}