/* ────────────────────────────────────────────────────────────────
   Block 1 — extracted from index.html (was at source line 7)
   ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 17px;
}

.app {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
}

/* ── Sidebar ── */
.sidebar {
  width: 220px;
  min-width: 220px;
  height: 100vh;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-top .sidebar-collapse-btn { width: auto; flex-shrink: 0; }

.sidebar-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 10px 16px;
  min-width: 0;
}
.sidebar-logo img {
  height: 38px;
  width: auto;
  max-width: 100%;
  display: block;
}
.sidebar.sidebar-collapsed .sidebar-logo { display: none; }
.sidebar-logo h2 {
  font-weight: bold;
  font-size: 28px;
}
.workspace-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  margin: 4px 8px;
  transition: background 0.15s;
}
.workspace-selector:hover {
  background: #F9FAFB;
}

/* Inline workspace list in the sidebar (replaces the popup dropdown). */
.workspace-list { padding: 2px 0 6px 0; }
.workspace-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 1px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.workspace-list-item:hover { background: #F9FAFB; }
.workspace-list-item.active { background: #F3F4F6; }
.wsp-list-avatar {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #FFFFFF;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.wsp-list-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsp-list-name {
  font-size: 14px; font-weight: 500; color: #344054;
  flex: 1;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-list-item.active .wsp-list-name { font-weight: 600; color: #101828; }
.wsp-list-check { font-size: 12px; color: #10B981; font-weight: 700; flex-shrink: 0; }

/* Collapsed sidebar: hide names + section label, center avatars. */
.sidebar.sidebar-collapsed .workspace-list-item .wsp-list-name,
.sidebar.sidebar-collapsed .workspace-list-item .wsp-list-check { display: none; }
.sidebar.sidebar-collapsed .workspace-list-item { justify-content: center; padding: 8px 0; margin: 1px 4px; }
.sidebar.sidebar-collapsed .workspace-list + .sidebar-divider,
.sidebar.sidebar-collapsed .workspace-list { padding: 0; }

.workspace-avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 4px;
  background: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: background 0.2s, outline-color 0.2s;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

.workspace-label {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
  flex: 1;
  letter-spacing: -0.01em;
}

.sidebar-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 4px 0 8px 0;
}

.nav-area {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.nav-section-label {
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px 6px 16px;
  display: block;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 1px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.25;
}
.nav-item:hover {
  background: #F9FAFB;
  color: #101828;
}
.nav-item.active {
  background: color-mix(in srgb, var(--ws-accent) 14%, white);
  color: #101828;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ws-accent) !important;
}

.nav-label {
  font-size: 14px;
  line-height: 1.25;
}

.sidebar-footer {
  padding: 12px 16px 14px 16px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.sidebar-footer:hover .footer-name {
  color: #101828;
}

.footer-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #EEEDFE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: #4338CA;
}

.footer-name {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  flex: 1;
  transition: color 0.15s;
}

.footer-logout {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #9CA3AF;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.footer-logout:hover {
  color: #DC2626;
  background: #FEF2F2;
}
.sidebar.sidebar-collapsed .footer-logout { display: none; }

/* ── Main ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
}

/* ── Topbar ── */
.topbar {
  height: 48px;
  min-height: 48px;
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E5;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 180px;
}

.page-title {
  font-size: 17px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.01em;
}
.topbar-sep {
  font-size: 17px;
  color: #D4D4D0;
  margin: 0 4px;
  font-weight: 300;
}
.workspace-name {
  font-size: 16px;
  font-weight: 400;
  color: #9CA3AF;
}

.topbar-center {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: flex-start;
  padding-left: 16px;
}

.view-tab {
  padding: 5px 9px;
  font-size: 15px;
  font-weight: 400;
  color: #6B7280;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
  line-height: 1;
  white-space: nowrap;
}
.view-tab:hover {
  background: #F3F3F1;
  color: #374151;
}
.view-tab.active {
  background: #000;
  color: #fff;
  font-weight: 500;
  border: 0px;
}

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

.btn-secondary {
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 400;
  color: #374151;
  background: transparent;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.1s, background 0.1s;
  line-height: 1;
}
.btn-secondary:hover {
  background: #F9F9F8;
  border-color: #D4D4D0;
}

.btn-primary {
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
  line-height: 1;
}
.btn-primary:hover {
  opacity: 0.85;
}

/* ── Content Area ── */
.content-area {
  flex: 1;
  overflow: auto;
  background: #FFFFFF;
  padding: 24px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  text-align: center;
}

.empty-icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 28px;
  height: 28px;
  margin: 0 auto 4px;
}
.empty-icon-grid div {
  background: #D4D4D0;
  border-radius: 3px;
}

.empty-title {
  font-size: 17px;
  font-weight: 500;
  color: #9CA3AF;
}

.empty-sub {
  font-size: 16px;
  font-weight: 400;
  color: #D4D4D0;
  max-width: 240px;
  line-height: 1.5;
}

/* ── Phase 2: Content Cards ── */

.card-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
  width: 100%;
}

.content-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  box-sizing: border-box;
}

/* Unread-comment indicator — shown as a small red pill with a chat icon
   + count when the card has comments that haven't been read yet. */
.card-comment-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px 2px 5px;
  border-radius: 9999px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 2;
}
.card-comment-badge svg { display: block; }
.card-comment-badge.is-new {
  animation: cardCommentPulse 1.4s ease-out 2;
}
@keyframes cardCommentPulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0.55); }
  50%  { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(220,38,38,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

.content-card:hover {
  border-color: #D4D4D0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.content-card:active {
  border-color: #9CA3AF;
  box-shadow: none;
}

.card-thumbnail {
  width: calc(100% + 24px);
  height: 110px;
  margin: -12px -12px 0 -12px;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}

.card-thumbnail-placeholder {
  width: 100%;
  height: 100%;
}

.thumb-1 { background: linear-gradient(135deg, #EEF2FF 0%, #C7D2FE 100%); }
.thumb-2 { background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D0 100%); }
.thumb-3 { background: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 100%); }

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #0F0F0F;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-platforms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 20px;
}

.card-platforms {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.card-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.pill {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-family: inherit;
}

.pill-ig { background: #FCE7F3; color: #9D174D; }
.pill-tk { background: #F3F3F1; color: #374151; }
.pill-fb { background: #EFF6FF; color: #1D4ED8; }
.pill-yt { background: #FEF2F2; color: #991B1B; }
.pill-li { background: #EFF6FF; color: #1E40AF; }
.pill-pi { background: #FDF4FF; color: #7E22CE; }
.pill-ai { background: #EEF2FF; color: #4338CA; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.card-assignees {
  display: flex;
  align-items: center;
}

.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  margin-left: -5px;
  flex-shrink: 0;
  font-family: inherit;
}

.avatar:first-child {
  margin-left: 0;
}

.av-purple { background: #EEEDFE; color: #4338CA; }
.av-teal   { background: #E1F5EE; color: #0F766E; }
.av-amber  { background: #FAEEDA; color: #92400E; }
.av-pink   { background: #FCE7F3; color: #9D174D; }
.av-blue   { background: #E6F1FB; color: #0C447C; }

.card-date {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 400;
  color: #9CA3AF;
  white-space: nowrap;
  line-height: 1;
}

.card-date svg {
  flex-shrink: 0;
}

.card-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
  padding: 0;
  line-height: 1;
}

.content-card:hover .card-menu {
  opacity: 1;
}

.card-menu:hover {
  background: #F3F3F1;
  opacity: 1;
}
.card-menu-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 32px;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.card-menu-option:hover { background: #F3F3F1; }
.card-menu-option-danger { color: #DC2626; }
.card-menu-option-danger:hover { background: #FEF2F2; }
.card-menu-option-arrow { justify-content: space-between; }

/* ── Bulk select / bulk operations ── */
.card-select-box {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #D4D4D0;
  background: #fff;
  z-index: 2;
}
.selection-mode .content-card { cursor: pointer; }
.selection-mode .card-select-box { display: block; }
.selection-mode .card-menu { display: none !important; }
.content-card.is-selected {
  outline: 2px solid #171717;
  outline-offset: -2px;
}
.content-card.is-selected .card-select-box {
  background: #171717;
  border-color: #171717;
}
.content-card.is-selected .card-select-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(40deg);
}

.bulk-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #171717;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  padding: 8px 10px 8px 16px;
}
.bulk-toolbar-count { font-size: 13px; font-weight: 500; margin-right: 4px; white-space: nowrap; }
.bulk-toolbar-btn {
  font-family: inherit;
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.bulk-toolbar-btn:hover { background: rgba(255,255,255,0.18); }
.bulk-toolbar-btn-danger:hover { background: #DC2626; border-color: #DC2626; }
.bulk-toolbar-clear {
  font-family: inherit;
  font-size: 13px;
  color: #9CA3AF;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
}
.bulk-toolbar-clear:hover { color: #fff; }

.bulk-result-banner {
  position: fixed;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  padding: 10px 14px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  font-size: 13px;
  color: #374151;
}
.bulk-result-banner-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  font-size: 15px;
  padding: 0 2px;
  flex-shrink: 0;
}
.bulk-result-banner-dismiss:hover { color: #374151; }

/* ── Phase 3: Board (Kanban) ── */

.board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 100%;
  padding-bottom: 24px;
  width: fit-content;
}

.board-column {
  width: 272px;
  min-width: 272px;
  max-width: 272px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: 8px;
  padding: 12px 10px;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 12px 4px;
}

.column-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

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

.column-title {
  font-size: 16px;
  font-weight: 500;
  color: #0F0F0F;
  letter-spacing: -0.01em;
  line-height: 1;
}

.column-count {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  background: #F3F3F1;
  border-radius: 9999px;
  padding: 1px 7px;
  line-height: 1.6;
}

.column-add-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  /*display: flex;
  align-items: center;
  justify-content: center;*/
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
  padding: 0;
  flex-shrink: 0;
}
.board-column:hover .column-add-btn {
  opacity: 1;
}
.column-add-btn:hover {
  background: #F3F3F1;
}

.column-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  padding: 1px 0;
  transition: background 0.1s, outline 0.1s;
}

.column-cards.drag-over {
  background: #F9F9F8;
  border-radius: 8px;
  outline: 1.5px dashed #D4D4D0;
  outline-offset: 4px;
}

.column-footer-add {
  margin-top: 4px;
  padding: 7px 8px;
  font-size: 16px;
  font-weight: 400;
  color: #9CA3AF;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  line-height: 1;
  width: 100%;
  transition: background 0.1s, color 0.1s;
}
.column-footer-add:hover {
  background: #F3F3F1;
  color: #374151;
}

.content-card.dragging {
  opacity: 0.35;
  cursor: grabbing;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.content-card[draggable="true"] {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Phase 4: View containers ── */
.view-container {
  height: 100%;
  width: 100%;
}

/* ── Calendar layout ── */
.calendar {
  display: flex;
  flex-direction: column;
  /* Grow with content instead of clamping to viewport — .content-area is
     overflow:auto, so it will scroll vertically once the grid gets tall. */
  min-height: 100%;
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 16px 0;
  flex-shrink: 0;
}

.cal-month-title {
  font-size: 17px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.01em;
  min-width: 152px;
  text-align: center;
}

.cal-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.1s, background 0.1s;
  padding: 0;
  flex-shrink: 0;
}
.cal-nav-btn:hover {
  background: #F9F9F8;
  border-color: #D4D4D0;
}

.cal-today-btn {
  margin-left: 4px;
  padding: 5px 12px;
  font-size: 16px;
  font-weight: 400;
  color: #374151;
  background: transparent;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: border-color 0.1s, background 0.1s;
}
.cal-today-btn:hover {
  background: #F9F9F8;
  border-color: #D4D4D0;
}

/* ── Calendar day-header row (sits above the grid) ── */
.cal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #E8E8E5;
  border-top: 1px solid #E8E8E5;
  flex-shrink: 0;
}

.cal-day-header {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  text-align: left;
  background: #FFFFFF;
  border-right: 1px solid #E8E8E5;
  border-bottom: 1px solid #E8E8E5;
}

/* ── Calendar grid ── */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* ~3× the old 1fr cells (~100px on a typical viewport). Cells can grow
     beyond 300px if they have a stack of overflow items. Vertical scroll now
     happens at .content-area, not inside the grid. */
  grid-auto-rows: minmax(350px, auto);
  border-left: 1px solid #E8E8E5;
}

/* ── Day cells ── */
.calendar-day {
  border-right: 1px solid #E8E8E5;
  border-bottom: 1px solid #E8E8E5;
  padding: 0 8px 8px;
  /* height: 100% removed — grid row track now dictates cell height (min 200px).
     Inner overflow-y stays so a cell packed with 12 events still scrolls
     independently rather than pushing the whole row taller. */
  overflow-y: auto;
  overflow-x: hidden;
  background: #FFFFFF;
  vertical-align: top;
  transition: background 0.1s;
}
.calendar-day::-webkit-scrollbar { width: 3px; }
.calendar-day::-webkit-scrollbar-track { background: transparent; }
.calendar-day::-webkit-scrollbar-thumb { background: #D4D4D0; border-radius: 9999px; }
.calendar-day::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
.cal-day-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
  padding: 6px 0 4px;
}
.calendar-day:hover {
  background: #FAFAFA;
}

/* Hover-to-add plus button in every calendar cell */
.calendar-day { position: relative; }
.cal-add-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #171717;
  color: #FFFFFF;
  border: 0;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 3;
}
.cal-add-btn:hover { background: #000000; }
.calendar-day:hover .cal-add-btn,
.calendar-day:focus-within .cal-add-btn {
  opacity: 1;
  transform: scale(1);
}
.calendar-day.other-month .cal-add-btn { display: none; }

.calendar-day.other-month {
  background: #FAFAFA;
}
.calendar-day.other-month .day-number {
  color: #D4D4D0;
}

/* Today: dark circle on the date number */
.calendar-day.today .day-number {
  background: #171717;
  color: #FFFFFF;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.day-number {
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  margin-bottom: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Calendar card blocks ── */
.cal-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px 3px 3px;
  border-radius: 6px;
  margin-bottom: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.12s;
}
.cal-card:hover { opacity: 0.9; }

/* Platform pill — rounded square, brand color background, white icon */
.cal-card-pill {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Children inside a draggable parent can swallow clicks on SVG — force
     all events through to the .cal-card element. */
  pointer-events: none;
}
.cal-card-pill svg { display: block; pointer-events: none; }
.cal-card-title,
.cal-card-time,
.cal-card-time svg,
.cal-card-time span { pointer-events: none; }

.cal-card-title {
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.cal-card-time {
  font-size: 12px;
  color: rgba(255,255,255,0.95);
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-card-time svg { opacity: 0.9; }

.cal-drop-target {
  background: #F0F7FF;
  outline: 1.5px dashed #3B82F6;
  outline-offset: -2px;
}

/* ── Calendar view pills ── */
.cal-view-pills {
  display: flex;
  margin-left: auto;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  overflow: hidden;
}
.cal-view-pill {
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 400;
  color: #6B7280;
  background: transparent;
  border: none;
  border-left: 1px solid #E8E8E5;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.cal-view-pill:first-child {
  border-left: none;
}
.cal-view-pill.active {
  background: #F3F3F1;
  color: #171717;
  font-weight: 500;
}
.cal-view-pill:hover:not(.active) {
  background: #F9F9F8;
  color: #374151;
}

/* ═════════════════���═════════════════════
   PHASE 5: Platform icon pills
════════════════��══════════════════════ */

.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.platform-icon svg { display: block; }

.platform-icon-ig { background: #E1306C; }
.platform-icon-tk { background: #0F0F0F; }
.platform-icon-fb { background: #1877F2; }
.platform-icon-yt { background: #FF0000; }
.platform-icon-th { background: #000000; }
.platform-icon-x  { background: #000000; }
.platform-icon-li { background: #0A66C2; }
.platform-icon-pi { background: #E60023; }
.platform-icon-th { background: #0F0F0F; }
.platform-icon-x  { background: #0F0F0F; }

/* Calendar compact size override */
.cal-platform-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

/* +N overflow pill on calendar */
.platform-icon-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #F3F3F1;
  font-size: 9px;
  font-weight: 600;
  color: #374151;
  font-family: inherit;
  flex-shrink: 0;
}

/* ══════════════════════════════��════════
   PHASE 5: Panel overlay
═══════════════════════════════════════ */

/* (panel-overlay removed — #card-panel is now the combined overlay + flex center) */

/* ═══════════════════════════════════════
   PHASE 5: Card panel
═══════════════���═══════════════════════ */

/* ── Modal overlay + drawer ───────────────────────────────── */
#card-panel {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  padding: 20px;
}
#card-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}
#modal-flex-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: calc(100vw - 24px);
  max-width: 1400px;
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}
#comments-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  transition: width 0.2s ease;
  background: #FFFFFF;
  border-left: 1px solid #E8E8E5;
  display: flex;
  flex-direction: column;
  z-index: 10;
  border-radius: 0 14px 14px 0;
}
#comments-drawer.is-open {
  width: 300px;
}
#card-modal {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* Modal header */
.modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #F0F0EE;
  flex-shrink: 0;
  min-height: 52px;
}
.modal-title-input {
  /* Visually hidden but stays in DOM for Phase 5 JS */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.panel-status-pill {
  font-size: 14px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 9999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.status-pill-wrap {
  position: relative;
  flex-shrink: 0;
}
#panel-status-pill {
  cursor: pointer;
  user-select: none;
}
#panel-status-pill:hover { opacity: 0.85; }
.status-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 100;
  min-width: 156px;
  overflow: hidden;
  display: none;
}
.status-dropdown.is-open { display: block; }
.status-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.status-dropdown-option:hover { background: #F3F3F1; }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.modal-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.1s;
}
.modal-close-btn:hover { background: #F3F3F1; color: #0F0F0F; }

/* Two-column layout */
.modal-columns {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.modal-left {
  width: 480px;
  min-width: 480px;
  flex-shrink: 0;
  border-right: 1px solid #E8E8E5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-right {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Main media area — square by default, ratio changes via JS.
   Height is viewport-clamped so portrait images / 9:16 formats never push the
   modal past the viewport. The <img>/<video> inside uses object-fit:contain
   (set in JS), so the whole image is always visible within these bounds. */
.modal-media-area {
  width: 100%;
  max-height: min(620px, 65vh);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  border: 0px solid #E8E8E5;
  position: relative;
  /*flex-shrink: 0;*/
}
.modal-media-upload {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9CA3AF;
  font-size: 12px;
  cursor: pointer;
}
.modal-media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.modal-upload-circle {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #E8E8E5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-upload-label { font-size: 15px; color: #9CA3AF; }
.modal-type-badge { position: absolute; top: 8px; left: 8px; }

/* Carousel strip */
.modal-carousel-strip {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #E8E8E5;
  overflow-x: auto;
  flex-shrink: 0;
  align-items: center;
}
.modal-carousel-tile {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
.modal-carousel-placeholder { width: 100%; height: 100%; background: #E8E8E5; }
.modal-carousel-add {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1.5px dashed #D4D4D0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: #9CA3AF;
  font-size: 18px;
  line-height: 1;
  transition: background 0.1s, border-color 0.1s;
}
.modal-carousel-add:hover { background: #F9F9F8; border-color: #9CA3AF; }

/* Media / Preview tabs */
.modal-left-tabs {
  display: flex;
  border-bottom: 1px solid #F0F0EE;
  padding: 0 16px;
  flex-shrink: 0;
  background: #FFFFFF;
}
.modal-left-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  font-size: 13px;
  font-weight: 400;
  color: #9CA3AF;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  margin-right: 16px;
  transition: color 0.1s, border-color 0.1s;
  line-height: 1;
}
.modal-left-tab:hover { color: #374151; }
.modal-left-tab-active { color: #0F0F0F !important; font-weight: 500; border-bottom-color: #0F0F0F; }

.modal-ltab-pane {
  display: flex;
  flex-direction: column;
  overflow-y: unset;
  padding: 16px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* File count */
.modal-media-filecount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
}

/* Thumbnail strip — horizontal scroll */
.modal-media-strip {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-height: 56px;
}
.modal-media-strip:empty { display: none; }

/* Media action row */
.modal-media-actions {
  display: flex;
  gap: 12px;
  padding-top: 4px;
}
.modal-media-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color 0.1s;
}
.modal-media-action-btn:hover { color: #374151; }
.modal-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.modal-media-btn:hover { background: #F9F9F8; border-color: #D4D4D0; }
.modal-replace-btn {
  font-size: 15px;
  color: #6B7280;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.modal-replace-btn:hover { color: #374151; background: #F3F3F1; }

/* Preview tab */
.modal-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 20px 0;
}
.modal-preview-phone {
  width: 160px;
  height: 290px;
  border: 2px solid #E8E8E5;
  border-radius: 20px;
  overflow: hidden;
  background: #F9F9F8;
  display: flex;
  flex-direction: column;
}
.modal-preview-screen { flex: 1; display: flex; align-items: center; justify-content: center; }
.modal-preview-empty  { font-size: 11px; color: #D4D4D0; text-align: center; padding: 12px; }

/* Right column sections */
.modal-section {
  padding: 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}
.modal-section-divider { border-top: 1px solid #E8E8E5; }
.modal-section-label {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.activity-timeline { display:flex; flex-direction:column; gap:14px; }
.activity-row { display:flex; align-items:flex-start; gap:10px; }
.activity-avatar { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:#fff; }
.activity-body { flex:1; min-width:0; font-size:13px; line-height:1.4; }
.activity-actor { font-weight:600; color:#111; }
.activity-text { color:#374151; }
.activity-time { font-size:11px; color:#9CA3AF; margin-top:2px; }
.activity-empty { font-size:12px; color:#9CA3AF; font-style:italic; margin:0; }

/* Inline AI row */
.modal-ai-row { display: flex; gap: 8px; align-items: center; }
.modal-tone-select { flex: 1; min-width: 0; }
.modal-generate-btn { flex-shrink: 0; width: auto; padding: 7px 12px; font-size: 15px; white-space: nowrap; }

/* Secondary tools */
.modal-secondary-tools { display: flex; gap: 6px; }
.modal-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #F3F3F1;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.modal-secondary-btn:hover { background: #E8E8E5; }
.modal-secondary-btn.is-active { background: #171717; color: #FFFFFF; }

/* Sub-panels */
.modal-sub-panel {
  padding: 0 20px 16px;
  border-top: 1px solid #F3F3F1;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.modal-sub-panel.is-open { display: flex; }

/* ── Title section at top of right column ──────────────────── */
.modal-title-section {
  padding: 24px 40px 8px;
  flex-shrink: 0;
}
.modal-title-display {
  font-size: 20px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
  line-height: 1.3;
  outline: none;
  min-height: 28px;
  cursor: text;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.1s;
}
.modal-title-display:hover { background: #F9F9F8; }
.modal-title-display:focus { background: #F3F3F1; }
.modal-title-display:empty::before {
  content: attr(data-placeholder);
  color: #D4D4D0;
  pointer-events: none;
}

/* ── Property list ────────────────────────────────────────── */
.prop-list {
  padding: 8px 40px 16px;
  display: flex;
  flex-direction: column;
  max-width: 680px;
}
.prop-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F9F9F8;
  min-height: 44px;
}
.prop-row:last-child { border-bottom: none; }
.prop-icon {
  width: 15px; height: 15px;
  min-width: 15px;
  color: #9CA3AF;
  margin-top: 3px;
  flex-shrink: 0;
}
.prop-label {
  font-size: 13px;
  color: #6B7280;
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 2px;
}
.prop-value {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}
.prop-chevron { width: 12px; height: 12px; color: #9CA3AF; flex-shrink: 0; }
.prop-row-clickable { cursor: pointer; }
.prop-schedule-expand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 36px;
  background: #F9F9F8;
  border-bottom: 1px solid #F3F3F1;
}

/* Details rows (legacy — kept for compat) */
.modal-detail-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.modal-detail-label { font-size: 15px; color: #6B7280; width: 80px; flex-shrink: 0; }
.modal-detail-value { font-size: 15px; color: #374151; display: flex; align-items: center; gap: 4px; }
.modal-assignees { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.modal-avatar {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
}
.modal-add-btn {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 1px dashed #D4D4D0;
  background: transparent;
  color: #9CA3AF;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: border-color 0.1s, color 0.1s;
}
.modal-add-btn:hover { border-color: #9CA3AF; color: #6B7280; }

/* Prop text inputs */
.prop-text-input {
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0;
  line-height: 1.4;
}
.prop-text-input::placeholder { color: #D4D4D0; }
.prop-text-input:focus { color: #0F0F0F; }
.prop-input-hint {
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.4;
}

/* Notes */
.modal-notes-ta {
  width: 100%;
  background: #F9F9F8;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 16px;
  font-family: inherit;
  color: #374151;
  resize: none;
  outline: none;
  min-height: 80px;
  line-height: 1.6;
}
.modal-notes-ta::placeholder { color: #9CA3AF; }

/* Internal Notes footer — full width across both columns */
.modal-notes-footer {
  border-top: 1px solid #F0F0EE;
  padding: 12px 24px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FAFAF9;
}
.modal-notes-label {
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/*.modal-notes-textarea {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  line-height: 1.6;
  box-sizing: border-box;
}
.modal-notes-textarea::placeholder { color: #D4D4D0; }*/

/* POST TO platform selector row */
.modal-post-to-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.modal-post-to-label {
  font-size: 13px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.modal-post-to-icons { display: flex; gap: 5px; align-items: flex-start; flex-wrap: wrap; }
.plat-toggle {
  width: 26px;
  height: auto;
  min-height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  cursor: pointer;
  padding: 0 0 3px;
  opacity: 0.25;
  filter: grayscale(1);
  transition: opacity 0.15s, filter 0.15s;
}
.plat-toggle .platform-icon { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.plat-toggle.is-on { opacity: 1; filter: none; }
.plat-toggle:hover { opacity: 0.7; }
.plat-toggle.is-on:hover { opacity: 0.85; }
.plat-format-label {
  font-size: 13px;
  color: #6B7280;
  white-space: nowrap;
  line-height: 1;
  display: block;
}
/* Platform format dropdown */
#plat-format-dropdown {
  position: fixed;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-width: 140px;
  padding: 4px 0;
}
.plat-format-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 32px;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.plat-format-option:hover { background: #F3F3F1; }
.plat-format-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6366F1;
  flex-shrink: 0;
}

/* Media strip */
.modal-media-strip {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #FFFFFF;
  border-top: 1px solid #E8E8E5;
  overflow-x: auto;
  flex-shrink: 0;
  align-items: center;
  scrollbar-width: none;
  min-height: 78px;
}
.modal-media-strip::-webkit-scrollbar { display: none; }
.modal-strip-tile {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F3F3F1;
  border: 1px solid #E8E8E5;
}
.modal-strip-tile-inner { width: 100%; height: 100%; background: #E8E8E5; }
.modal-strip-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.modal-strip-add {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  border: 1.5px dashed #D4D4D0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s;
}
.modal-strip-add:hover { background: #F9F9F8; border-color: #9CA3AF; }

/* Cover photo row */
.modal-cover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px;
  border-top: 1px solid #F3F3F1;
  flex-shrink: 0;
}
.modal-cover-label { font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap; }
.modal-cover-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #E8E8E5;
  border: 1px solid #D4D4D0;
  flex-shrink: 0;
}
.modal-cover-select-btn {
  font-size: 15px;
  color: #6366F1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.modal-cover-select-btn:hover { text-decoration: underline; }

/* Auto-post toggle */
.modal-autopost-wrap { display: flex; flex-direction: column; gap: 0; }
.modal-autopost-row { display: flex; align-items: center; }
.modal-toggle-switch {
  position: relative;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-block;
}
.modal-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.modal-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #E8E8E5;
  transition: background 0.18s;
}
.modal-toggle-switch input:checked + .modal-toggle-track { background: #171717; }
.modal-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  background: #FFFFFF;
  transition: transform 0.18s;
  pointer-events: none;
}
.modal-toggle-switch input:checked ~ .modal-toggle-knob { transform: translateX(13px); }
.modal-schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 0 0;
}
.modal-schedule-label { font-size: 15px; color: #6B7280; white-space: nowrap; }
.modal-schedule-input {
  font-size: 15px;
  color: #374151;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  outline: none;
  background: #FFFFFF;
  transition: border-color 0.15s;
}
.modal-schedule-input:focus { border-color: #171717; }
.prop-datetime-input {
  font-size: 15px;
  color: #374151;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 3px 7px;
  font-family: inherit;
  outline: none;
  background: #FFFFFF;
  transition: border-color 0.15s;
}
.prop-datetime-input:focus { border-color: #171717; }

/* Platform tabs — no outer padding inside modal sections */
.modal-section .panel-platform-tabs {
  padding: 0;
  border-bottom: none;
}
.panel-platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #FFFFFF;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  line-height: 1;
}
.panel-platform-tab:hover {
  background: #F3F3F1;
  border-color: #D4D4D0;
}
.panel-platform-tab.is-active {
  background: #171717;
  border-color: #171717;
  color: #FFFFFF;
}
/* Icon inside active tab stays white — SVG fill="white" handles it */
.panel-platform-tab .platform-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}


/* AI form elements */
.ai-field-label {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: -4px;
}
.ai-select {
  width: 100%;
  padding: 7px 10px;
  font-size: 16px;
  font-family: inherit;
  color: #0F0F0F;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.1s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.ai-select:focus { border-color: #D4D4D0; }

.ai-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 16px;
  font-family: inherit;
  color: #0F0F0F;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 68px;
  line-height: 1.55;
  transition: border-color 0.1s;
}
.ai-textarea:focus { border-color: #D4D4D0; }
.ai-textarea::placeholder { color: #9CA3AF; }

/* Generate button */
.ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 8px 16px;
  background: #171717;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1;
}
.ai-generate-btn:hover:not(:disabled) { opacity: 0.85; }
.ai-generate-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Error message */
.ai-error {
  display: none;
  font-size: 15px;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.4;
}
.ai-error.is-visible { display: block; }

/* Output block — hidden until generation succeeds */
.ai-output-block {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.ai-output-block.is-visible { display: flex; }

.ai-output-textarea, .modal-notes-textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: inherit;
  color: #0F0F0F;
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
  transition: border-color 0.1s, background 0.1s;
}
.ai-output-textarea:focus, .modal-notes-textarea:focus {
  background: #FFFFFF;
  border-color: #D4D4D0;
}
.ai-generated-label {
  font-size: 14px;
  color: #9CA3AF;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.ai-action-row {
  display: flex;
  gap: 6px;
}
.ai-action-btn {
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
  line-height: 1;
}
.ai-action-btn:hover {
  background: #F9F9F8;
  border-color: #D4D4D0;
}

/* Hashtag output grid */
.hashtag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hashtag-pill {
  padding: 4px 10px;
  background: #EEF2FF;
  color: #4338CA;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: background 0.1s;
  line-height: 1.4;
}
.hashtag-pill:hover { background: #E0E7FF; }

/* ── Content type badges ── */
.card-thumbnail { position: relative; }
.content-type-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.card-thumb-badge {
  position: absolute;
  top: 8px;
  left: 8px;
}

/* ── Master caption / per-platform override ── */
.caption-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.caption-custom-label {
  font-size: 16px;
  font-weight: 400;
  color: #374151;
}

.caption-plat-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  flex-shrink: 0;
  margin-left: 2px;
}

/* ── Media attach section ── */
.panel-media-section {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid #E8E8E5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 80px;
  background: #F9F9F8;
  border: 1.5px dashed #D4D4D0;
  border-radius: 8px;
  cursor: default;
}
.media-upload-circle {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: #EEEEEC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.media-upload-label {
  font-size: 15px;
  color: #6B7280;
  font-weight: 400;
}
.media-preview-tiles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.media-preview-tile {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.media-preview-thumb {
  width: 100%;
  height: 100%;
}
.media-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* ── Media thumbnail tile in card panel (board-sync managed) ── */
.panel-media-thumb-tile {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #E8E8E5;
  background: #F3F3F1;
  cursor: grab;
  user-select: none;
}
.panel-media-thumb-tile.drag-over { border: 2px dashed #6366F1; }
.panel-media-thumb-tile img,
.panel-media-thumb-tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0F0F0F; }
.panel-media-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 9px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
/* Board card face media thumbnail */
.card-media-face {
  position: relative;
  width: calc(100% + 24px);
  height: 110px;
  margin: -12px -12px 0 -12px;
  overflow: hidden;
  background: #F3F3F1;
  flex-shrink: 0;
  border-radius: 6px 6px 0 0;
}
.card-media-face img,
.card-media-face video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0F0F0F; }

/* Skeleton shimmer while media is still fetching. Applied to the CONTAINER
   (.card-media-face, .panel-media-thumb-tile, .apv-card-thumb) via the
   .is-loading class in JS, removed on the media element's load event. */
.card-media-face.is-loading,
.panel-media-thumb-tile.is-loading,
.apv-card-thumb.is-loading,
.modal-media-fill.is-loading {
  background:
    linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 50%, #F3F4F6 100%);
  background-size: 200% 100%;
  animation: media-shimmer 1.2s ease-in-out infinite;
}
.card-media-face.is-loading > img,
.card-media-face.is-loading > video,
.panel-media-thumb-tile.is-loading > img,
.panel-media-thumb-tile.is-loading > video,
.apv-card-thumb.is-loading > img,
.apv-card-thumb.is-loading > video,
.modal-media-fill.is-loading > img,
.modal-media-fill.is-loading > video {
  opacity: 0;
}
.card-media-face > img,
.card-media-face > video,
.panel-media-thumb-tile > img,
.panel-media-thumb-tile > video,
.apv-card-thumb > img,
.apv-card-thumb > video,
.modal-media-fill > img,
.modal-media-fill > video {
  transition: opacity 180ms ease-out;
}
@keyframes media-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Play-icon badge on video media thumbnails (board card face + panel strip) */
.media-video-badge {
  position: absolute;
  bottom: 6px; left: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #FFFFFF;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.media-video-badge-sm { width: 14px; height: 14px; font-size: 7px; bottom: 3px; left: 3px; }

/* ── Comments button in modal header ─────────────────────── */
.modal-comments-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s;
  height: 28px;
  position: relative;
}
.modal-comments-btn:hover { background: #F9F9F8; border-color: #D4D4D0; }
.modal-comments-btn.is-active { background: #F3F3F1; border-color: #D4D4D0; color: #0F0F0F; }
/* Red unread-comment dot/pill on the comments button when the active
   card has unread comments. */
.modal-comments-btn .modal-comments-unread {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid #FFFFFF;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.modal-comments-btn.has-unread .modal-comments-unread { display: block; }
/* Icon-only header buttons (undo, redo, trash) */
.modal-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.1s, border-color 0.1s, opacity 0.1s;
}
.modal-icon-btn:hover:not(:disabled) { background: #F9F9F8; border-color: #D4D4D0; }
.modal-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.modal-icon-btn-danger { color: #DC2626; }
.modal-icon-btn-danger:hover:not(:disabled) { background: #FEF2F2; border-color: #FECACA; }
/* Back button */
.modal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  font-family: inherit;
  flex-shrink: 0;
  height: 28px;
  transition: background 0.1s, border-color 0.1s;
}
.modal-back-btn:hover { background: #F9F9F8; border-color: #D4D4D0; }
.modal-comments-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #E8E8E5;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}

/* ── Comments drawer internal styles ─────────────────────── */
.comments-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.comments-drawer-title { font-size: 16px; font-weight: 600; color: #0F0F0F; }
.comments-drawer-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  padding: 0;
  transition: background 0.1s;
}
.comments-drawer-close:hover { background: #F3F3F1; }
#comments-drawer .comments-tab-bar { flex-shrink: 0; margin-top: 0; }
.comments-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.comments-scroll-area .comments-list {
  max-height: none;
  overflow-y: visible;
  padding: 12px;
}
.comments-scroll-area .client-warning { margin: 12px 12px 0; }
#comments-drawer .comment-input-row {
  flex-shrink: 0;
  border-top: 1px solid #E8E8E5;
  padding: 8px 12px;
  margin: 0;
}

/* ── Comments section ───────────────────────────────────── */
.comments-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: left;
}
.comments-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  background: #F3F3F1;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}
.comments-chevron { margin-left: auto; transition: transform 0.18s; }
.comments-header[aria-expanded="true"] .comments-chevron { transform: rotate(180deg); }
.comments-body { display: flex; flex-direction: column; }
.comments-tab-bar {
  display: flex;
  border-bottom: 1px solid #E8E8E5;
  margin-top: 8px;
}
.comments-tab {
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 400;
  color: #6B7280;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.comments-tab:hover { color: #374151; }
.comments-tab.is-active { color: #0F0F0F; font-weight: 500; border-bottom-color: #171717; }
.comments-pane { display: flex; flex-direction: column; }
.client-warning {
  font-size: 14px;
  font-weight: 500;
  color: #92400E;
  background: #FFFBEB;
  border-radius: 4px;
  padding: 5px 9px;
  margin: 10px 0 0;
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 4px;
  max-height: 220px;
  overflow-y: auto;
}
.comment-item { display: flex; gap: 8px; align-items: flex-start; }
.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
  margin-top: 1px;
}
.comment-content { flex: 1; min-width: 0; }
.comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.comment-name { font-size: 15px; font-weight: 500; color: #0F0F0F; }
.comment-time { font-size: 14px; color: #9CA3AF; }
.comment-text {
  font-size: 15px;
  color: #374151;
  background: #F9F9F8;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1.5;
  word-break: break-word;
}
.comment-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 2px;
  border-top: 1px solid #F3F3F1;
  margin-top: 4px;
}
.comment-input-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
}
.comment-input {
  flex: 1;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 15px;
  font-family: inherit;
  color: #0F0F0F;
  outline: none;
  background: #FFFFFF;
  transition: border-color 0.15s;
  min-width: 0;
}
.comment-input:focus { border-color: #D4D4D0; }
.comment-input::placeholder { color: #9CA3AF; }
.comment-send-btn {
  background: #171717;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.comment-send-btn:hover { opacity: 0.85; }

/* ── Card hover preview tooltip ─────────────────────────── */
#card-hover-preview {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  overflow: hidden;
}
#card-hover-preview.is-visible { opacity: 1; }
.preview-thumb {
  height: 80px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.preview-thumb-fill { width: 100%; height: 100%; }
.preview-media {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #0F0F0F;
  flex-shrink: 0;
}
.preview-media > img,
.preview-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-type-badge { position: absolute; top: 8px; left: 8px; }
.preview-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.preview-title {
  font-size: 16px;
  font-weight: 500;
  color: #0F0F0F;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-platforms { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.preview-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}
.preview-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.preview-assignees { display: flex; gap: 3px; align-items: center; }
.preview-avatar {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
}
.preview-date {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: #9CA3AF;
  white-space: nowrap;
}
.preview-status { display: flex; }

/* ═══════════════════════════════════════
   PHASE 6 — Influencer Hub
═══════════════════════════════════════ */

.inf-hub-wrap {
  padding: 20px 24px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Metric cards */
.inf-metrics-row { display: flex; gap: 12px; }
.metric-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-card-label {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.metric-card-value {
  font-size: 22px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
}
.metric-card-delta { font-size: 15px; }
.metric-delta-up      { color: #10B981; }
.metric-delta-down    { color: #DC2626; }
.metric-delta-neutral { color: #6B7280; }

/* Filter bar */
.inf-filter-bar { display: flex; align-items: center; gap: 8px; }
.inf-search {
  width: 220px;
  padding: 7px 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #0F0F0F;
  background: #FFFFFF;
}
.inf-search:focus { border-color: #D4D4D0; }
.inf-search::placeholder { color: #9CA3AF; }
.inf-filter-select {
  padding: 6px 28px 6px 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #374151;
  background: #FFFFFF;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.inf-add-btn { margin-left: auto; }

/* Roster table */
.inf-table-wrap {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.roster-table { width: 100%; border-collapse: collapse; }
.roster-table th {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #E8E8E5;
  white-space: nowrap;
}
.roster-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #F3F3F1;
  vertical-align: middle;
}
.roster-table tbody tr:last-child td { border-bottom: none; }
.roster-table tbody tr { cursor: pointer; transition: background 0.1s; }
.roster-table tbody tr:hover td { background: #FAFAFA; }

/* Influencer avatar */
.inf-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
}
.inf-name-cell { display: flex; align-items: center; gap: 10px; }
.inf-name-text { font-size: 16px; font-weight: 500; color: #0F0F0F; line-height: 1.3; }
.inf-handle-text { font-size: 14px; color: #6B7280; }

/* Engagement bar */
.eng-bar-wrap { display: flex; align-items: center; gap: 7px; }
.eng-bar-track {
  width: 64px;
  height: 4px;
  background: #F3F3F1;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
}
.eng-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: #6366F1;
}
.eng-bar-label { font-size: 15px; font-weight: 500; color: #374151; white-space: nowrap; }

/* Status pills */
.inf-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Action button */
.roster-action-btn {
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}
.roster-action-btn:hover { background: #F9F9F8; border-color: #D4D4D0; }

/* ── Influencer profile modal ── */
#inf-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}
#inf-profile-overlay.is-open { display: flex; }
#inf-profile-modal {
  width: 96vw;
  max-width: 96vw;
  max-height: 94vh;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.inf-modal-header-title { font-size: 17px; font-weight: 500; color: #0F0F0F; }
.inf-modal-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.1s;
}
.inf-modal-close-btn:hover { background: #F3F3F1; color: #0F0F0F; }
.inf-modal-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.inf-modal-left {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid #E8E8E5;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inf-modal-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
}
.inf-modal-name { font-size: 18px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.02em; }
.inf-modal-handle { font-size: 16px; color: #6B7280; }
.inf-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #F3F3F1;
  font-size: 16px;
  color: #374151;
}
.inf-stat-row:last-child { border-bottom: none; }
.inf-stat-label { color: #9CA3AF; font-size: 14px; flex: 1; }
.inf-niche-pill {
  display: inline-flex;
  padding: 3px 10px;
  background: #F3F3F1;
  color: #374151;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
}
.inf-modal-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.inf-modal-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.inf-modal-tab {
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 400;
  color: #6B7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}
.inf-modal-tab:hover { color: #374151; }
.inf-modal-tab.active { color: #0F0F0F; font-weight: 500; border-bottom-color: #171717; }
.inf-modal-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: none;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.inf-modal-tab-content.active-tab { display: flex; }

/* Outreach thread */
.outreach-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
  max-height: 280px;
}
.outreach-msg { display: flex; flex-direction: column; gap: 3px; }
.outreach-msg-sent  { align-items: flex-end; }
.outreach-msg-received { align-items: flex-start; }
.outreach-bubble {
  max-width: 75%;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
}
.outreach-bubble-sent     { background: #171717; color: #FFFFFF; }
.outreach-bubble-received { background: #F3F3F1; color: #0F0F0F; }
.outreach-date { font-size: 13px; color: #9CA3AF; }
.outreach-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #E8E8E5;
  padding-top: 12px;
  flex-shrink: 0;
}
.outreach-textarea {
  width: 100%;
  padding: 9px 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 68px;
  line-height: 1.5;
  color: #0F0F0F;
  transition: border-color 0.1s;
}
.outreach-textarea:focus { border-color: #D4D4D0; }
.outreach-textarea::placeholder { color: #9CA3AF; }
.outreach-actions { display: flex; gap: 8px; }
.outreach-ai-btn {
  padding: 7px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #6366F1;
  background: #EEF2FF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.outreach-ai-btn:hover { background: #E0E7FF; }
.outreach-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.inf-brief-textarea, .inf-notes-textarea {
  width: 100%;
  flex: 1;
  padding: 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: none;
  min-height: 200px;
  line-height: 1.6;
  color: #0F0F0F;
  background: #F9F9F8;
  transition: border-color 0.1s, background 0.1s;
}
.inf-brief-textarea:focus, .inf-notes-textarea:focus { background: #FFFFFF; border-color: #D4D4D0; }

/* ── Live Post Data ── */
.live-hub-wrap {
  padding: 20px 24px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.live-filter-row { display: flex; gap: 6px; }
.live-filter-pill {
  padding: 5px 14px;
  font-size: 15px;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
}
.live-filter-pill:hover { background: #F9F9F8; }
.live-filter-pill.active-pill { background: #171717; color: #FFFFFF; border-color: #171717; }
.live-post-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 20px;
}
.live-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.live-post-name { font-size: 16px; font-weight: 500; color: #0F0F0F; }
.live-post-handle { font-size: 14px; color: #6B7280; }
.live-post-time { font-size: 14px; color: #9CA3AF; margin-left: auto; }
.live-post-thumbnail {
  width: 100%;
  height: 160px;
  background: #F3F3F1;
  border-radius: 6px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #DC2626;
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
}
.live-metrics-row {
  display: flex;
  margin-bottom: 12px;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  overflow: hidden;
}
.live-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-right: 1px solid #E8E8E5;
  gap: 3px;
}
.live-metric:last-child { border-right: none; }
.live-metric-icon { font-size: 17px; }
.live-metric-value { font-size: 17px; font-weight: 600; color: #0F0F0F; }
.live-metric-label { font-size: 13px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.04em; }
.live-perf-row { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #374151; margin-bottom: 8px; }
.live-perf-up   { color: #10B981; font-weight: 500; }
.live-perf-down { color: #DC2626; font-weight: 500; }
.live-ai-note {
  font-size: 15px;
  color: #6B7280;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 8px 10px;
  background: #F9F9F8;
  border-radius: 6px;
  line-height: 1.5;
}

/* ── Outreach CRM ── */
.crm-board {
  display: flex;
  gap: 10px;
  padding: 20px;
  height: 100%;
  overflow-x: auto;
  align-items: flex-start;
  box-sizing: border-box;
}
.crm-column {
  width: 220px;
  min-width: 220px;
  border-radius: 8px;
  padding: 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.crm-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.crm-column-left { display: flex; align-items: center; gap: 6px; }
.crm-column-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.crm-column-title { font-size: 15px; font-weight: 500; color: #374151; }
.crm-column-count {
  font-size: 14px;
  color: #9CA3AF;
  background: rgba(0,0,0,0.06);
  border-radius: 9999px;
  padding: 1px 7px;
}
.crm-cards { min-height: 60px; }
.crm-cards.drag-over {
  outline: 2px dashed #6366F1;
  outline-offset: 2px;
  border-radius: 6px;
  background: rgba(99,102,241,0.04);
}
.crm-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: box-shadow 0.15s;
  user-select: none;
}
.crm-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.crm-card.dragging { opacity: 0.5; }
.crm-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.crm-card-name { font-size: 16px; font-weight: 500; color: #0F0F0F; }
.crm-card-handle { font-size: 14px; color: #6B7280; margin-bottom: 6px; }
.crm-card-platforms { display: flex; gap: 4px; margin-bottom: 7px; }
.crm-card-meta { font-size: 14px; color: #6B7280; display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.crm-generate-btn {
  width: 100%;
  padding: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #6366F1;
  background: #EEF2FF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.1s;
}
.crm-generate-btn:hover { background: #E0E7FF; }
.crm-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.crm-outreach-panel {
  margin-top: 8px;
  padding: 10px;
  background: #F9F9F8;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.crm-outreach-panel.is-open { display: flex; }
.crm-outreach-textarea {
  width: 100%;
  padding: 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
  background: #FFFFFF;
}
.crm-panel-actions { display: flex; gap: 6px; }
.crm-panel-btn {
  padding: 4px 10px;
  font-size: 14px;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.crm-panel-btn:hover { background: #F9F9F8; }

/* ── Influencer calendar cards ── */
.cal-card-influencer {
  border-radius: 4px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  overflow: hidden;
  cursor: pointer;
}
.cal-inf-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.cal-inf-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ── Content tab (influencer submissions) ── */
.inf-content-tab-wrap { display: flex; flex-direction: column; gap: 16px; }
.inf-send-link-btn {
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
  transition: opacity 0.1s;
}
.inf-send-link-btn:hover { opacity: 0.85; }
.inf-submission {
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inf-submission-thumb {
  width: 100%;
  height: 100px;
  background: #E8E8E5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #9CA3AF;
}
.inf-submission-file { font-size: 16px; font-weight: 500; color: #0F0F0F; }
.inf-submission-time { font-size: 14px; color: #9CA3AF; }
.inf-submission-caption { font-size: 15px; color: #374151; line-height: 1.5; font-style: italic; }
.inf-submission-actions { display: flex; gap: 6px; }
.inf-sub-btn {
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
}
.inf-sub-btn:hover { opacity: 0.85; }
.inf-sub-btn-approve { background: #10B981; color: #FFFFFF; }
.inf-sub-btn-edits   { background: #D97706; color: #FFFFFF; }
.inf-sub-btn-reject  { background: #DC2626; color: #FFFFFF; }
.inf-edit-feedback {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.inf-edit-feedback.is-open { display: flex; }
.inf-edit-feedback-ta {
  width: 100%;
  padding: 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  background: #FFFFFF;
}

/* ── Toast notification ── */
.p6-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #171717;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.p6-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Add Influencer Modal ── */
.add-inf-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.add-inf-overlay.is-open { opacity: 1; pointer-events: all; }
.add-inf-modal {
  background: #FFFFFF; border-radius: 12px; width: 480px; max-width: calc(100vw - 32px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
}
.add-inf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #E8E8E5;
}
.add-inf-title { font-size: 17px; font-weight: 600; color: #0F0F0F; }
.add-inf-close {
  background: none; border: none; cursor: pointer; color: #6B7280;
  padding: 4px; border-radius: 4px; display: flex; align-items: center;
}
.add-inf-close:hover { background: #F3F3F1; color: #0F0F0F; }
.add-inf-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.add-inf-row { display: flex; gap: 12px; }
.add-inf-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.add-inf-label { font-size: 15px; font-weight: 500; color: #374151; }
.add-inf-input {
  background: #FFFFFF; border: 1px solid #E8E8E5; border-radius: 6px;
  padding: 7px 10px; font-size: 16px; font-family: 'Inter', sans-serif;
  color: #0F0F0F; outline: none; transition: border-color 0.15s; width: 100%; box-sizing: border-box;
}
.add-inf-input:focus { border-color: #171717; }
.add-inf-input::placeholder { color: #9CA3AF; }
.add-inf-platform-group { display: flex; flex-wrap: wrap; gap: 6px; }
.add-inf-platform-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 9999px; font-size: 15px; font-weight: 500;
  border: 1px solid #E8E8E5; background: #FFFFFF; color: #374151;
  cursor: pointer; transition: all 0.1s; user-select: none;
}
.add-inf-platform-pill.selected { background: #F0F0FF; border-color: #6366F1; color: #4338CA; }
.add-inf-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid #E8E8E5;
}

/* ── AI Scout ── */
.scout-wrap { padding: 24px; max-width: 900px; }
.scout-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.scout-title { font-size: 22px; font-weight: 600; color: #0F0F0F; }
.scout-subtitle { font-size: 16px; color: #6B7280; margin-top: 2px; }
.scout-criteria-wrap {
  background: #F9F9F8; border-radius: 8px; padding: 16px; margin-bottom: 24px;
}
.scout-criteria-title { font-size: 15px; font-weight: 500; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.scout-criteria-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.scout-criteria-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 9999px; font-size: 15px; font-weight: 500;
  background: #FFFFFF; border: 1px solid #E8E8E5; color: #374151; cursor: pointer;
}
.scout-criteria-pill.active { background: #EEF2FF; border-color: #6366F1; color: #4338CA; }
.scout-feed-label { font-size: 16px; font-weight: 600; color: #0F0F0F; margin-bottom: 16px; }
.scout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.scout-card {
  background: #FFFFFF; border: 1px solid #E8E8E5; border-radius: 8px; padding: 16px;
  transition: border-color 0.15s;
}
.scout-card:hover { border-color: #D4D4D0; }
.scout-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.scout-avatar {
  width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; color: #FFFFFF;
}
.scout-name { font-size: 16px; font-weight: 500; color: #0F0F0F; }
.scout-handle { font-size: 15px; color: #6B7280; margin-top: 1px; }
.scout-why {
  font-size: 15px; color: #374151; background: #F9F9F8;
  border-radius: 6px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.5;
}
.scout-stats { display: flex; gap: 12px; margin-bottom: 12px; }
.scout-stat { display: flex; flex-direction: column; gap: 2px; }
.scout-stat-val { font-size: 16px; font-weight: 600; color: #0F0F0F; }
.scout-stat-label { font-size: 14px; color: #6B7280; }
.scout-actions { display: flex; gap: 8px; }
.scout-add-btn {
  flex: 1; background: #171717; color: #FFFFFF; border: none; border-radius: 6px;
  font-size: 15px; font-weight: 500; padding: 6px 12px; cursor: pointer; transition: opacity 0.15s;
}
.scout-add-btn:hover { opacity: 0.85; }
.scout-dismiss-btn {
  background: transparent; color: #6B7280; border: 1px solid #E8E8E5; border-radius: 6px;
  font-size: 15px; font-weight: 400; padding: 6px 12px; cursor: pointer;
}
.scout-dismiss-btn:hover { background: #F9F9F8; border-color: #D4D4D0; color: #374151; }
.scout-empty {
  text-align: center; padding: 48px 24px; color: #6B7280; font-size: 16px;
}

/* ── Brand Tags ── */
.tags-wrap { padding: 24px; max-width: 960px; }
.tags-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tags-title { font-size: 22px; font-weight: 600; color: #0F0F0F; }
.tags-subtitle { font-size: 16px; color: #6B7280; margin-top: 2px; }
.tags-summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.tags-filter-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tags-filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 9999px; font-size: 15px; font-weight: 500;
  background: #FFFFFF; border: 1px solid #E8E8E5; color: #374151; cursor: pointer;
}
.tags-filter-pill.active { background: #EEF2FF; border-color: #6366F1; color: #4338CA; }
.tags-feed { display: flex; flex-direction: column; gap: 8px; }
.tags-row {
  background: #FFFFFF; border: 1px solid #E8E8E5; border-radius: 8px;
  padding: 12px 16px; display: flex; align-items: flex-start; gap: 14px;
  transition: border-color 0.15s;
}
.tags-row:hover { border-color: #D4D4D0; }
.tags-row-avatar {
  width: 36px; height: 36px; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #FFFFFF;
}
.tags-row-body { flex: 1; min-width: 0; }
.tags-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.tags-row-name { font-size: 16px; font-weight: 500; color: #0F0F0F; }
.tags-row-handle { font-size: 15px; color: #6B7280; }
.tags-row-time { font-size: 14px; color: #9CA3AF; margin-left: auto; flex-shrink: 0; }
.tags-row-text { font-size: 16px; color: #374151; line-height: 1.5; }
.tags-row-text strong { color: #0F0F0F; }
.tags-row-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tags-row-stat { font-size: 15px; color: #6B7280; }
.tags-section-label { font-size: 16px; font-weight: 600; color: #0F0F0F; margin-bottom: 12px; }

/* ── Influencer Upload Portal ── */
.inf-portal-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #F9F9F8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.inf-portal-card {
  width: 100%;
  max-width: 560px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.inf-portal-header {
  font-size: 18px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
}
.inf-portal-sub {
  font-size: 16px;
  color: #6B7280;
  line-height: 1.6;
}
.inf-portal-brief {
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 14px;
  font-size: 16px;
  color: #374151;
  line-height: 1.6;
}
.inf-portal-brief-label {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.inf-portal-upload-zone {
  border: 2px dashed #D4D4D0;
  border-radius: 8px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.inf-portal-upload-zone:hover { border-color: #9CA3AF; background: #FAFAFA; }
.inf-portal-upload-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F3F3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
}
.inf-portal-upload-label { font-size: 16px; color: #6B7280; }
.inf-portal-filename { font-size: 15px; color: #10B981; font-weight: 500; display: none; }
.inf-portal-caption-ta {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  color: #0F0F0F;
}
.inf-portal-caption-ta::placeholder { color: #9CA3AF; }
.inf-portal-submit-btn {
  padding: 10px 24px;
  font-size: 17px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-end;
  transition: opacity 0.1s;
}
.inf-portal-submit-btn:hover { opacity: 0.85; }
.inf-portal-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 20px 0;
}
.inf-portal-success.is-visible { display: flex; }
.inf-portal-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F0FDF4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inf-portal-success-title {
  font-size: 16px;
  font-weight: 600;
  color: #0F0F0F;
}
.inf-portal-success-sub {
  font-size: 16px;
  color: #6B7280;
  line-height: 1.5;
  max-width: 340px;
}

/* ═══════════════════════════════════════
   PHASE 7 — Analytics Dashboard
   All classes prefixed an- to avoid conflicts
═══════════════════════════════════════ */

.an-wrap {
  padding: 20px 24px 40px 24px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* ── Filter bar ── */
.an-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.an-date-pills { display: flex; gap: 4px; }
.an-date-pill {
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.an-date-pill:hover { background: #F9F9F8; }
.an-date-active {
  background: #171717;
  color: #FFFFFF;
  border-color: #171717;
}

.an-pf-pills { display: flex; gap: 4px; }
.an-pf-btn {
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 500;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.an-pf-btn:hover { background: #F9F9F8; color: #374151; }
.an-pf-active {
  background: #F3F3F1;
  color: #0F0F0F;
  border-color: #D4D4D0;
  font-weight: 600;
}

.an-export-btn, .an-client-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 400;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
  line-height: 1;
}
.an-export-btn { margin-left: auto; }
.an-export-btn:hover, .an-client-view-btn:hover { background: #F9F9F8; }
.an-client-view-btn {
  color: #6366F1;
  border-color: #C7D2FE;
  background: #EEF2FF;
}
.an-client-view-btn:hover { background: #E0E7FF; }

/* ── Summary metric cards ── */
.an-metrics-row { display: flex; gap: 12px; }
.an-metric-card {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.an-metric-saves {
  border-color: #C4B5FD;
  background: #FAFAF9;
}
.an-metric-label {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.an-metric-value {
  font-size: 24px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.an-best-platform-value {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.an-metric-delta { font-size: 14px; line-height: 1.3; }
.an-delta-up      { color: #10B981; }
.an-delta-down    { color: #DC2626; }
.an-delta-neutral { color: #6B7280; }

/* ── Chart cards ── */
.an-chart-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 20px;
}
.an-charts-2col { display: flex; gap: 12px; }
.an-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}
.an-chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.01em;
}
.an-chart-sub {
  font-size: 15px;
  color: #6B7280;
}
.an-chart-wrap { position: relative; }

/* Chart legend */
.an-chart-legend { display: flex; align-items: center; gap: 12px; }
.an-legend-item { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #6B7280; }
.an-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Best time to post heatmap ── */
.an-heatmap-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.an-heatmap-legend-label { font-size: 13px; color: #9CA3AF; }
.an-heatmap-legend-bar {
  height: 8px;
  width: 120px;
  border-radius: 4px;
  background: linear-gradient(to right, #F3F3F1, #6366F1);
}
.an-heatmap-container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.an-heatmap-y-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 2px;
}
.an-heatmap-y-label {
  font-size: 9px;
  color: #9CA3AF;
  height: 16px;
  display: flex;
  align-items: center;
  width: 28px;
  justify-content: flex-end;
  padding-right: 4px;
}
.an-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 16px;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.an-heatmap-cell {
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.1s;
  position: relative;
}
.an-heatmap-cell:hover { outline: 1.5px solid #6366F1; outline-offset: 1px; }
.an-heatmap-x-labels {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-top: 4px;
  margin-left: 32px;
}
.an-heatmap-x-label {
  font-size: 9px;
  color: #9CA3AF;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.an-heatmap-tooltip {
  display: none;
  position: fixed;
  background: #171717;
  color: #FFFFFF;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

/* ── Industry benchmarks ── */
.an-benchmark-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.an-benchmark-card {
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an-benchmark-label {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.an-benchmark-values {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.an-benchmark-yours {
  font-size: 22px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
  line-height: 1;
}
.an-benchmark-avg {
  font-size: 15px;
  color: #9CA3AF;
  line-height: 1.8;
}
.an-benchmark-bar-track {
  height: 4px;
  background: #F3F3F1;
  border-radius: 9999px;
  overflow: hidden;
}
.an-benchmark-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}
.an-benchmark-status {
  font-size: 14px;
  font-weight: 600;
}
.an-benchmark-above { color: #10B981; }
.an-benchmark-below { color: #DC2626; }

/* ── Inf vs brand comparison ── */
.an-ivb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.an-ivb-item:last-child { margin-bottom: 12px; }
.an-ivb-label {
  width: 160px;
  font-size: 15px;
  color: #374151;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an-ivb-track {
  flex: 1;
  height: 8px;
  background: #F3F3F1;
  border-radius: 9999px;
  overflow: hidden;
}
.an-ivb-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}
.an-ivb-pct {
  width: 38px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  text-align: right;
  flex-shrink: 0;
}
.an-ivb-type {
  width: 56px;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 9999px;
  text-align: center;
  flex-shrink: 0;
}
.an-type-inf   { background: #EEF2FF; color: #4338CA; }
.an-type-brand { background: #F3F3F1; color: #374151; }

/* ROI table */
.an-roi-table-wrap {
  margin-top: 16px;
  border-top: 1px solid #E8E8E5;
  padding-top: 16px;
}
.an-roi-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.an-roi-table th {
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #E8E8E5;
  white-space: nowrap;
}
.an-roi-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #F3F3F1;
  color: #374151;
  vertical-align: middle;
}
.an-roi-table tbody tr:last-child td { border-bottom: none; }
.an-roi-table tbody tr:hover td { background: #FAFAFA; }
.an-roi-good { color: #10B981; font-weight: 600; }
.an-roi-avg  { color: #D97706; font-weight: 600; }

/* ── Top posts table ── */
.an-sort-select {
  padding: 4px 24px 4px 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #374151;
  background: #FFFFFF;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.an-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.an-table th {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #E8E8E5;
  white-space: nowrap;
}
.an-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #F3F3F1;
  color: #374151;
  vertical-align: middle;
}
.an-table tbody tr:last-child td { border-bottom: none; }
.an-table tbody tr { transition: background 0.1s; }
.an-table tbody tr:hover td { background: #FAFAFA; }
.an-post-title {
  font-weight: 500;
  color: #0F0F0F;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.an-eng-cell   { font-weight: 600; color: #6366F1; }
.an-saves-cell { font-weight: 500; color: #7C3AED; }

/* ── AI insights ── */
.an-refresh-btn {
  padding: 4px 10px;
  font-size: 15px;
  color: #6366F1;
  background: #EEF2FF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.an-refresh-btn:hover { background: #E0E7FF; }
.an-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.an-insights-list { display: flex; flex-direction: column; gap: 10px; }
.an-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #F9F9F8;
  border-radius: 8px;
}
.an-insight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.an-insight-text {
  font-size: 16px;
  color: #374151;
  line-height: 1.55;
  margin: 0;
}

/* ── Client report summary ── */
.an-client-report-card { background: #FAFAF9; }
.an-report-regen-btn, .an-report-copy-btn {
  padding: 5px 10px;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  color: #374151;
}
.an-report-regen-btn:hover, .an-report-copy-btn:hover { background: #F3F3F1; }
.an-report-copy-btn {
  background: #171717;
  color: #FFFFFF;
  border-color: #171717;
}
.an-report-copy-btn:hover { background: #2D2D2D; }
.an-client-stats-row {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.an-client-stat { display: flex; flex-direction: column; gap: 2px; }
.an-client-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
}
.an-client-stat-label {
  font-size: 14px;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.an-client-summary-text {
  font-size: 16px;
  color: #374151;
  line-height: 1.65;
  margin: 0;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════
   PHASE 8 — Task Management  (prefix: tsk-)
═══════════════════════════════════════════════════════ */

/* ── Nav badge ── */
.tsk-nav-badge {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #DC2626;
  border-radius: 9999px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

/* ── Needs Edits banner ── */
.tsk-needs-edits-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  flex-shrink: 0;
}
.tsk-banner-text { font-size: 16px; color: #374151; flex: 1; }
.tsk-banner-convert {
  padding: 4px 10px;
  font-size: 15px;
  font-weight: 500;
  color: #D97706;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.1s;
}
.tsk-banner-convert:hover { background: #FDE68A; }
.tsk-banner-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  font-size: 16px;
  padding: 0 2px;
}

/* ── Wrap ── */
.tsk-wrap {
  padding: 20px 24px 40px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* ── Header ── */
.tsk-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.tsk-header-left  { display: flex; align-items: center; gap: 10px; }
.tsk-header-right { display: flex; align-items: center; gap: 10px; }
.tsk-page-title {
  font-size: 16px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
  margin: 0;
}
.tsk-workspace-pill {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  background: #F3F3F1;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  padding: 2px 8px;
}

/* ── View toggle ── */
.tsk-view-toggle {
  display: flex;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  overflow: hidden;
}
.tsk-view-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 400;
  color: #6B7280;
  background: #FFFFFF;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.tsk-view-btn:hover { background: #F9F9F8; color: #374151; }
.tsk-view-active { background: #F3F3F1; color: #0F0F0F; font-weight: 500; }

/* ── New task button ── */
.tsk-new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.tsk-new-btn:hover { background: #2D2D2D; }
.tsk-shortcut-hint {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.2;
  margin-left: 2px;
}

/* ── Filter bar ── */
.tsk-filter-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }
.tsk-mine-toggle { display: flex; border: 1px solid #E8E8E5; border-radius: 6px; overflow: hidden; }
.tsk-mine-btn {
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #6B7280;
  background: #FFFFFF;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.tsk-mine-btn:hover { background: #F9F9F8; color: #374151; }
.tsk-mine-active { background: #171717; color: #FFFFFF; }

.tsk-filter-group { display: flex; align-items: center; gap: 6px; }
.tsk-filter-label {
  font-size: 14px;
  color: #9CA3AF;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tsk-filter-pills { display: flex; gap: 3px; }
.tsk-filter-pill {
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.tsk-filter-pill:hover { background: #F9F9F8; }
.tsk-pill-active { background: #F3F3F1; color: #0F0F0F; border-color: #D4D4D0; }

.tsk-due-select {
  padding: 5px 24px 5px 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #374151;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center;
  cursor: pointer;
  appearance: none;
}

/* ── Priority dots ── */
.tsk-priority-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tsk-p-urgent { background: #DC2626; }
.tsk-p-high   { background: #D97706; }
.tsk-p-medium { background: #6366F1; }
.tsk-p-low    { background: #9CA3AF; }

/* ── New task inline row ── */
.tsk-new-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1.5px solid #6366F1;
  border-radius: 8px;
  flex-shrink: 0;
}
.tsk-new-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: #0F0F0F;
  background: transparent;
  min-width: 0;
}
.tsk-new-input::placeholder { color: #9CA3AF; }
.tsk-inline-select {
  padding: 4px 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 5px;
  outline: none;
  color: #374151;
  background: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
}
.tsk-new-save {
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.tsk-new-cancel {
  padding: 4px 8px;
  font-size: 15px;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

/* ── List view groups ── */
.tsk-group { margin-bottom: 4px; }
.tsk-group-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 5px;
}
.tsk-group-hd-done { cursor: pointer; }
.tsk-group-hd-done:hover .tsk-group-lbl { color: #374151; }
.tsk-group-lbl {
  font-size: 14px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tsk-lbl-overdue { color: #DC2626; }
.tsk-lbl-done    { color: #9CA3AF; }
.tsk-group-ct {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  background: #F3F3F1;
  border-radius: 9999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}
.tsk-done-chevron { flex-shrink: 0; transition: transform 0.2s; }
.tsk-done-chevron.tsk-chevron-up { transform: rotate(180deg); }
.tsk-rows { display: flex; flex-direction: column; gap: 2px; }

/* ── Task row ── */
.tsk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  user-select: none;
}
.tsk-row:hover { border-color: #D4D4D0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.tsk-row[draggable="true"] { cursor: grab; }
.tsk-row.tsk-dragging { opacity: 0.4; cursor: grabbing; }
.tsk-row.tsk-drag-over { border-top: 2px solid #6366F1; }
.tsk-row-done { opacity: 0.55; }
.tsk-row-blocked { border-left: 3px solid #DC2626; }

/* ── Checkbox ── */
.tsk-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid #D4D4D0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
  background: #FFFFFF;
}
.tsk-checkbox:hover { border-color: #6366F1; }
.tsk-checkbox-done { background: #10B981; border-color: #10B981; }
.tsk-checkbox-done::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #FFF;
  border-bottom: 1.5px solid #FFF;
  transform: rotate(-45deg) translateY(-1px);
}
.tsk-row-title {
  flex: 1;
  font-size: 16px;
  color: #0F0F0F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tsk-row-done .tsk-row-title { text-decoration: line-through; color: #9CA3AF; }
.tsk-card-ref {
  font-size: 14px;
  color: #6366F1;
  background: #EEF2FF;
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsk-recur-icon { font-size: 14px; color: #10B981; flex-shrink: 0; }
.tsk-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}
.tsk-due-label {
  font-size: 14px;
  color: #6B7280;
  flex-shrink: 0;
  min-width: 54px;
  text-align: right;
}
.tsk-due-overdue { color: #DC2626; font-weight: 500; }
.tsk-due-today   { color: #D97706; font-weight: 500; }

/* ── Empty state ── */
.tsk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  gap: 8px;
  text-align: center;
}
.tsk-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F3F3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #9CA3AF;
  margin-bottom: 4px;
}
.tsk-empty-title { font-size: 17px; font-weight: 600; color: #374151; }
.tsk-empty-sub   { font-size: 15px; color: #9CA3AF; }

/* ── Board view ── */
#tsk-board-view { flex: 1; min-height: 0; }
.tsk-board {
  display: flex;
  gap: 12px;
  height: 100%;
  min-height: 480px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.tsk-board-col {
  flex: 0 0 240px;
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
.tsk-col-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.tsk-col-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tsk-col-ct {
  font-size: 14px;
  color: #9CA3AF;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  padding: 1px 6px;
}
.tsk-col-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 40px;
  transition: background 0.1s;
  border-radius: 6px;
}
.tsk-col-cards.tsk-drag-over { background: rgba(99,102,241,0.05); }

/* ── Board card ── */
.tsk-board-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  padding: 10px 12px;
  cursor: grab;
  transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.tsk-board-card:hover { border-color: #D4D4D0; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.tsk-board-card.tsk-dragging { opacity: 0.4; cursor: grabbing; }
.tsk-board-card-title {
  font-size: 16px;
  color: #0F0F0F;
  line-height: 1.4;
  margin-bottom: 8px;
}
.tsk-board-card-meta { display: flex; align-items: center; gap: 6px; }
.tsk-board-card-ref {
  font-size: 13px;
  color: #6366F1;
  background: #EEF2FF;
  border-radius: 4px;
  padding: 1px 5px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsk-board-card-due {
  font-size: 13px;
  color: #6B7280;
  flex-shrink: 0;
}
.tsk-board-card-due.tsk-due-overdue { color: #DC2626; font-weight: 500; }

/* ── Task detail panel ── */
.tsk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 400;
}
.tsk-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96vw;
  max-width: 96vw;
  max-height: 94vh;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E8E8E5;
  z-index: 401;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  animation: tsk-modal-in 0.18s ease;
}
@keyframes tsk-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tsk-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
  gap: 10px;
}
.tsk-panel-select {
  padding: 4px 22px 4px 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #374151;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center;
  cursor: pointer;
  appearance: none;
}
.tsk-panel-priority-wrap { }
.tsk-panel-priority-sel { }

.tsk-panel-delete {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  color: #9CA3AF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.tsk-panel-delete:hover { background: #FEF2F2; border-color: #FECACA; color: #DC2626; }
.tsk-panel-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 16px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsk-panel-close:hover { background: #F3F3F1; }

.tsk-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tsk-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #0F0F0F;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  letter-spacing: -0.01em;
  background: transparent;
  line-height: 1.3;
}
.tsk-panel-title::placeholder { color: #D4D4D0; }

.tsk-panel-fields { display: flex; flex-direction: column; gap: 10px; }
.tsk-panel-field { display: flex; align-items: center; gap: 12px; }
.tsk-panel-field-lbl {
  font-size: 15px;
  font-weight: 500;
  color: #9CA3AF;
  width: 88px;
  flex-shrink: 0;
}
.tsk-panel-field-val {
  flex: 1;
  padding: 5px 8px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #374151;
  background: #FFFFFF;
  min-width: 0;
}
select.tsk-panel-field-val {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 24px;
  cursor: pointer;
}
.tsk-panel-card-ref { font-size: 15px; color: #6366F1; }

/* Toggle */
.tsk-toggle-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.tsk-toggle-input { display: none; }
.tsk-toggle-track {
  width: 32px;
  height: 18px;
  background: #E8E8E5;
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tsk-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tsk-toggle-input:checked ~ .tsk-toggle-track { background: #10B981; }
.tsk-toggle-input:checked ~ .tsk-toggle-track::after { left: 16px; }
.tsk-toggle-label { font-size: 15px; color: #6B7280; }

.tsk-panel-notes {
  width: 100%;
  height: 90px;
  padding: 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  color: #374151;
  line-height: 1.55;
  box-sizing: border-box;
}
.tsk-panel-notes:focus { border-color: #6366F1; }

.tsk-panel-ai {
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: 8px;
  padding: 12px;
}
.tsk-panel-ai-dismiss {
  font-size: 14px;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.tsk-panel-ai-text { font-size: 15px; color: #374151; line-height: 1.55; margin: 0; }

/* ── Card-level subtask styles ── */
.tsk-subtask-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E8E8E5;
}
.tsk-subtask-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.tsk-subtask-list { display: flex; flex-direction: column; gap: 0; }
.tsk-subtask-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #F3F3F1;
}
.tsk-subtask-item:last-child { border-bottom: none; }
.tsk-subtask-cb {
  width: 14px;
  height: 14px;
  border: 1.5px solid #D4D4D0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
}
.tsk-subtask-cb:hover { border-color: #6366F1; }
.tsk-subtask-cb.tsk-cb-done { background: #10B981; border-color: #10B981; }
.tsk-subtask-cb.tsk-cb-done::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid #FFF;
  border-bottom: 1.5px solid #FFF;
  transform: rotate(-45deg) translateY(-1px);
}
.tsk-subtask-label {
  flex: 1;
  font-size: 15px;
  color: #374151;
  line-height: 1.4;
}
.tsk-subtask-done-label { text-decoration: line-through; color: #9CA3AF; }
.tsk-subtask-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}
.tsk-subtask-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-top: 4px;
}
.tsk-subtask-add-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  color: #374151;
  background: transparent;
  padding: 2px 0;
}
.tsk-subtask-add-input::placeholder { color: #D4D4D0; }
.tsk-subtask-add-plus { color: #D4D4D0; font-size: 17px; flex-shrink: 0; line-height: 1; cursor: pointer; }
.tsk-drag-handle { color: #D4D4D0; cursor: grab; font-size: 13px; flex-shrink: 0; line-height: 1; user-select: none; }
.tsk-drag-handle:active { cursor: grabbing; }
.tsk-subtask-chk { flex-shrink: 0; cursor: pointer; }
.tsk-subtask-del { background: none; border: none; color: #D4D4D0; cursor: pointer; font-size: 15px; padding: 0 2px; line-height: 1; flex-shrink: 0; font-family: inherit; }
.tsk-subtask-del:hover { color: #DC2626; }
.tsk-subtask-item.tsk-dragging { opacity: 0.4; }
.tsk-subtask-item.tsk-drag-over { border-top: 2px solid #6366F1; }

/* ── Tasks tab in card modal ── */
.tsk-modal-tab-btn {
  padding: 6px 12px;
  font-size: 16px;
  font-family: inherit;
  color: #6B7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
}
.tsk-modal-tab-btn:hover { color: #374151; }
.tsk-modal-tab-btn.active { color: #0F0F0F; border-bottom-color: #0F0F0F; font-weight: 500; }
.tsk-modal-tab-pane { padding: 16px 0; }

/* ── Calendar task bars ── */
.cal-card-task {
  background: #F3F3F1;
  border-left: 3px solid #6B7280;
  color: #374151;
}
.cal-card-task .cal-card-dot { background: #6B7280; }
.cal-card-task-urgent {
  background: #FEF2F2;
  border-left-color: #DC2626;
  color: #DC2626;
}
.cal-card-task-high {
  background: #FFFBEB;
  border-left-color: #D97706;
  color: #D97706;
}
.tsk-cal-task {
  display: flex;
  align-items: center;
  padding: 2px 5px 2px 4px;
  margin: 1px 0;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════
   PHASE 9 — Notification System  (prefix: ntf-)
═══════════════════════════════════════════════════ */

/* ── Bell button ── */
.ntf-bell-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  transition: all 0.1s;
  flex-shrink: 0;
}
.ntf-bell-btn:hover { background: #F9F9F8; color: #374151; }
.ntf-bell-active    { background: #F3F3F1 !important; color: #0F0F0F !important; border-color: #D4D4D0 !important; }

/* ── Unread badge ── */
.ntf-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  pointer-events: none;
}

/* ── Transparent click-catcher overlay ── */
.ntf-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  background: transparent;
}

/* ── Slide-in panel ──
   IMPORTANT: always display:flex, hidden only via right:-380px.
   Do NOT toggle display — use the class for animation only. */
.ntf-panel {
  position: fixed;
  top: 0;
  right: -620px;
  width: 600px;
  height: 100vh;
  background: #FFFFFF;
  border-left: 1px solid #E8E8E5;
  box-shadow: -4px 0 28px rgba(0,0,0,0.1);
  z-index: 501;
  display: flex;
  flex-direction: column;
  transition: right 0.25s cubic-bezier(0.4,0,0.2,1);
}
.ntf-panel-open { right: 0 !important; }

/* ── Header ── */
.ntf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.ntf-header-title {
  font-size: 17px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.01em;
}
.ntf-mark-all-btn {
  font-size: 15px;
  color: #6366F1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  white-space: nowrap;
}
.ntf-mark-all-btn:hover { opacity: 0.7; }
.ntf-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 15px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ntf-close-btn:hover { background: #F3F3F1; }

/* ── Workspace filter ── */
.ntf-ws-filter {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.ntf-ws-pill {
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.ntf-ws-pill:hover { background: #F9F9F8; }
.ntf-ws-active {
  background: #F3F3F1 !important;
  color: #0F0F0F !important;
  border-color: #D4D4D0 !important;
}

/* ── List ── */
.ntf-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Group label ── */
.ntf-group-lbl {
  padding: 12px 24px 6px;
  font-size: 13px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #FAFAFA;
  border-bottom: 1px solid #F3F3F1;
  flex-shrink: 0;
}

/* ── Notification item ── */
.ntf-item {
  display: flex;
  gap: 11px;
  padding: 16px 24px;
  border-bottom: 1px solid #F3F3F1;
  cursor: pointer;
  transition: background 0.1s;
  align-items: flex-start;
  position: relative;
}
.ntf-item:last-child { border-bottom: none; }
.ntf-item:hover { background: #F9F9F8; }
.ntf-item-unread { background: #FAFAFA; }
.ntf-item-unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #6366F1;
  border-radius: 0 2px 2px 0;
}

/* ── Icon ── */
.ntf-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
}

/* ── Body ── */
.ntf-body { flex: 1; min-width: 0; }
.ntf-row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ntf-msg {
  font-size: 16px;
  color: #374151;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}
.ntf-msg strong { color: #0F0F0F; font-weight: 500; }
.ntf-time {
  font-size: 14px;
  color: #9CA3AF;
  flex-shrink: 0;
  white-space: nowrap;
}
.ntf-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ntf-card-pill {
  font-size: 14px;
  color: #6366F1;
  background: #EEF2FF;
  border-radius: 4px;
  padding: 2px 6px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ntf-action {
  font-size: 14px;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ntf-action:hover { color: #374151; }
.ntf-archive-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: #D4D4D0;
  font-size: 15px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s, background 0.1s;
  font-family: inherit;
}
.ntf-item:hover .ntf-archive-btn { opacity: 1; }
.ntf-archive-btn:hover { color: #6B7280; background: #F3F3F1; }

/* ── Empty state ── */
.ntf-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}
.ntf-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F3F3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
.ntf-empty-title { font-size: 17px; font-weight: 600; color: #374151; }
.ntf-empty-sub   { font-size: 15px; color: #9CA3AF; }

/* ═══════════════════════════════════════════════════
   PHASE 10 — Approval Workflow + Client Portal
   All classes prefixed apv-
═══════════════════════════════════════════════════ */

/* ── Send for approval button ── */
.apv-send-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: opacity 0.1s;
  white-space: nowrap !important;
  width: auto !important;
}
#apv-modal-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 4px 40px 8px;
  gap: 8px;
}
.apv-send-btn:hover    { opacity: 0.8; }
.apv-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.apv-send-btn-resend   { background: #374151; }

/* ── Approval status pill in modal ── */
.apv-status-area {
  display: flex;
  align-items: center;
}
.apv-status-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.apv-pill-pending   { background: #FFFBEB; color: #92400E; }
.apv-pill-approved  { background: #F0FDF4; color: #166534; }
.apv-pill-rejected  { background: #FEF2F2; color: #991B1B; }
.apv-pill-edits     { background: #FFF7ED; color: #9A3412; }

/* ── Approval badge on board cards ── */
.apv-card-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin: -4px 0 4px 0;
}
.apv-card-badge-pending  { background: #FFFBEB; color: #92400E; }
.apv-card-badge-approved { background: #F0FDF4; color: #166534; }
.apv-card-badge-edits    { background: #FFF7ED; color: #9A3412; }
.apv-card-badge-rejected { background: #FEF2F2; color: #991B1B; }

/* Client changes comment — shown in panel below the send button */
.apv-changes-comment {
  font-size: 12px;
  color: #92400E;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  padding: 7px 11px;
  margin-top: 6px;
  font-style: italic;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════
   CLIENT PORTAL
══════════════════════════════════════════════════ */

#approve-portal {
  min-height: 100vh;
  background: #F9F9F8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.apv-portal-header {
  height: 48px;
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E5;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
}
.apv-portal-brand   { display: flex; align-items: center; gap: 8px; }
.apv-portal-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #171717;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apv-portal-name    { font-size: 14px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; }
.apv-portal-sep     { color: #D4D4D0; font-size: 14px; }
.apv-portal-sub     { font-size: 13px; color: #6B7280; }

.apv-portal-right { display: flex; align-items: center; gap: 16px; }
.apv-portal-logout {
  background: #FFFFFF;
  color: #374151;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.apv-portal-logout:hover { background: #F9F9F8; color: #0F0F0F; border-color: #D4D4D0; }
.apv-portal-progress-wrap  { display: flex; align-items: center; gap: 10px; }
.apv-portal-progress-label { font-size: 12px; color: #6B7280; white-space: nowrap; }
.apv-portal-progress-track {
  width: 120px;
  height: 5px;
  background: #E8E8E5;
  border-radius: 9999px;
  overflow: hidden;
}
.apv-portal-progress-fill {
  height: 100%;
  background: #10B981;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.apv-portal-body {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.apv-portal-cards { display: flex; flex-direction: column; gap: 20px; }

.apv-portal-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.3s;
}
.apv-portal-card:hover {
  border-color: #D4D4D0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.apv-portal-card.apv-card-reviewed {
  opacity: 0.5;
  pointer-events: none;
}

.apv-card-thumb {
  width: 100%;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}
.apv-card-thumb-inner {
  width: 100%;
  height: 100%;
}

.apv-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apv-card-title {
  font-size: 13px;
  font-weight: 500;
  color: #0F0F0F;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
}

.apv-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.apv-card-platforms { display: flex; align-items: center; gap: 3px; }
.apv-card-date {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #9CA3AF;
  white-space: nowrap;
}

.apv-caption-section {
  border-top: 1px solid #E8E8E5;
  padding-top: 8px;
}
.apv-caption-label {
  font-size: 10px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.apv-caption-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
  white-space: pre-wrap;
}

.apv-feedback-area           { display: none; border-top: 1px solid #E8E8E5; padding-top: 8px; }
.apv-feedback-area.apv-show  { display: block; }
.apv-feedback-label {
  font-size: 10px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.apv-feedback-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  padding: 9px 11px;
  resize: vertical;
  min-height: 64px;
  outline: none;
  line-height: 1.5;
}
.apv-feedback-input::placeholder { color: #9CA3AF; }
.apv-feedback-input:focus { border-color: #F59E0B; }

.apv-card-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid #E8E8E5;
  padding-top: 8px;
}
.apv-btn-approve {
  flex: 1;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #10B981;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
}
.apv-btn-approve:hover { opacity: 0.88; }

.apv-btn-edits {
  flex: 1;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #D97706;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
}
.apv-btn-edits:hover { background: #FEF3C7; }

.apv-btn-reject {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
}
.apv-btn-reject:hover { color: #DC2626; border-color: #FECACA; background: #FEF2F2; }

.apv-reviewed-badge           { display: none; }
.apv-reviewed-badge.apv-show  {
  display: block;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 6px;
  text-align: center;
  border-top: 1px solid #E8E8E5;
  margin-top: 2px;
}
.apv-reviewed-approved { background: #F0FDF4; color: #166534; }
.apv-reviewed-edits    { background: #FFFBEB; color: #92400E; }
.apv-reviewed-rejected { background: #FEF2F2; color: #991B1B; }

.apv-portal-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
  gap: 10px;
}
.apv-done-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F0FDF4;
  color: #10B981;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.apv-done-title { font-size: 20px; font-weight: 700; color: #0F0F0F; letter-spacing: -0.02em; margin: 0; }
.apv-done-sub   { font-size: 13px; color: #6B7280; margin: 0; }

/* ═══════════════════════════════════════════════════
   PHASE 10 — Client Mode
   Applied via .app.client-mode when #approve hash detected.
   Hides internal elements, disables editing.
═══════════════════════════════════════════════════ */

/* ── Client mode banner ── */
.apv-client-banner {
  display: none;
}
.client-mode .apv-client-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: #EEF2FF;
  border-bottom: 1px solid #C7D2FE;
  font-size: 11px;
  font-weight: 600;
  color: #4338CA;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Hide topbar buttons client doesn't need ── */
.client-mode .ntf-bell-btn { display: none !important; }
.client-mode .btn-secondary { display: none !important; }
.client-mode .btn-primary   { display: none !important; }

/* ── Hide entire sidebar sections ── */
.client-mode .apv-hide-nav { display: none !important; }

/* ── Disable card drag on board ── */
.client-mode .content-card { cursor: default !important; }
.client-mode .content-card[draggable] { pointer-events: auto; }
.client-mode .card-menu    { display: none !important; }

/* ── Card modal — hide internal elements ── */
/* Note: #card-panel is OUTSIDE .app, so use body.client-mode for modal selectors */
body.client-mode .modal-ai-row          { display: none !important; }
body.client-mode .ai-action-row         { display: none !important; }
body.client-mode .modal-secondary-btn   { display: none !important; }
body.client-mode .modal-secondary-tools { display: none !important; }
body.client-mode .modal-sub-panel       { display: none !important; }
body.client-mode .caption-custom-row    { display: none !important; }

/* Hide internal notes section */
body.client-mode .apv-internal-notes-section { display: none !important; }

/* Hide undo/redo/duplicate/trash in modal header */
body.client-mode #modal-undo-btn        { display: none !important; }
body.client-mode #modal-redo-btn        { display: none !important; }
body.client-mode #modal-duplicate-btn   { display: none !important; }
body.client-mode #modal-trash-btn       { display: none !important; }

/* Hide auto-post prop row */
body.client-mode .apv-autopost-row      { display: none !important; }

/* Hide assignees prop row */
body.client-mode .apv-assignees-row     { display: none !important; }

/* Comments drawer — hide internal tab, show client-facing only */
body.client-mode [data-ctab="internal"] { display: none !important; }
body.client-mode #ctab-internal         { display: none !important; }

/* Make caption textarea read-only visually */
body.client-mode #caption-output {
  pointer-events: none;
  background: #F9F9F8;
  color: #374151;
  cursor: default;
  border-color: #E8E8E5;
}
body.client-mode .panel-platform-tabs button { pointer-events: none; }

/* Hide Send for approval button in client mode */
body.client-mode #apv-modal-row { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   CLIENT LOCKDOWN — read-only for everything except the Approve /
   Request Edits / Reject buttons and the client-facing comment input.
   Client can VIEW the post, leave comments, and make a decision; they
   cannot edit titles, captions, schedules, platforms, assignees, etc. */

/* Title and notes inputs — visually same, but frozen. */
body.client-mode #panel-title,
body.client-mode #modal-notes,
body.client-mode #pub-schedule-date,
body.client-mode #pub-schedule-time,
body.client-mode #pub-location,
body.client-mode #card-location,
body.client-mode #card-tagged-users,
body.client-mode #card-collaborators,
body.client-mode .modal-title-display,
body.client-mode .prop-text-input {
  pointer-events: none !important;
  user-select: text;
  background: #F9F9F8 !important;
  color: #374151 !important;
  cursor: default !important;
  border-color: #E8E8E5 !important;
}
/* Don't block ability to read/scroll the text, only to edit it. */
body.client-mode #panel-title,
body.client-mode .modal-title-display {
  user-select: text;
}

/* All prop rows open dropdowns on click — disable the whole row EXCEPT
   the Status row, which the client must be able to flip. */
body.client-mode .prop-row,
body.client-mode .pub-schedule-prop-row,
body.client-mode .pub-plat-prop-row,
body.client-mode #pub-plat-prop-row,
body.client-mode .p16-products-row,
body.client-mode #p16-utm-row,
body.client-mode .modal-assignees {
  pointer-events: none !important;
}
/* Status prop row stays clickable so the client can change status via
   either the header pill or the Details row. */
body.client-mode #prop-row-status,
body.client-mode #prop-row-status * {
  pointer-events: auto !important;
}

/* Lock the workspace selector in client mode — the client shouldn't be
   able to switch away from the shared workspace (their comments + state
   would be lost). */
.client-mode .workspace-selector { pointer-events: none !important; opacity: 0.7; }
.client-mode .workspace-selector svg { display: none; }
/* …BUT comments prop row needs to stay clickable so client can
   still open the drawer and leave feedback. */
body.client-mode .prop-row-comments,
body.client-mode .modal-comments-btn {
  pointer-events: auto !important;
}

/* Media upload, replace, download, and all AI buttons */
body.client-mode #modal-media-upload-zone,
body.client-mode #modal-replace-btn,
body.client-mode #modal-download-btn,
body.client-mode .modal-media-actions,
body.client-mode .modal-media-strip,
body.client-mode .modal-media-ft-icon,
body.client-mode .modal-media-del-btn,
body.client-mode .ai-generate-btn,
body.client-mode #caption-generate-btn,
body.client-mode #hashtag-generate-btn,
body.client-mode #hashtag-toggle-btn,
body.client-mode #repurpose-toggle-btn {
  pointer-events: none !important;
  opacity: 0.5;
}
/* Hide the media file input + hover × so clients can't delete uploads. */
body.client-mode #modal-media-file-input,
body.client-mode .modal-media-del-btn {
  display: none !important;
}

/* Status pill stays clickable in client mode — client can change status
   (e.g. move to Needs Edits themselves). */
body.client-mode #panel-status-pill {
  pointer-events: auto !important;
}

/* Back / Close buttons in client mode still work. */
body.client-mode #panel-close-x,
body.client-mode #modal-back-btn { pointer-events: auto !important; }

/* Comment input bar must stay interactive even though it's inside a
   disabled ancestor pattern elsewhere. */
body.client-mode #drawer-comment-input,
body.client-mode #drawer-send-btn,
body.client-mode .comment-input-row,
body.client-mode .comments-drawer,
body.client-mode .comments-tab-bar,
body.client-mode .comments-tab {
  pointer-events: auto !important;
}

/* ── Approve / Request Edits / Reject buttons in modal ── */
.apv-client-actions {
  display: none;
}
body.client-mode .apv-client-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.apv-client-btn-approve {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #10B981;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
}
.apv-client-btn-approve:hover { opacity: 0.88; }
.apv-client-btn-edits {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  color: #D97706;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.apv-client-btn-edits:hover { background: #FEF3C7; }
.apv-client-btn-reject {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.apv-client-btn-reject:hover { color: #DC2626; border-color: #FECACA; background: #FEF2F2; }

/* ═══════════════════════════════════════════════════
   PHASE 11 — Media Library  (prefix: mld-)
═══════════════════════════════════════════════════ */

/* ── Outer layout ── */
.mld-wrap {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── Left column ── */
.mld-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 32px;
  overflow-y: auto;
  gap: 14px;
}

/* ── Header ── */
.mld-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}
.mld-header-left  { display: flex; align-items: center; gap: 10px; }
.mld-header-right { display: flex; align-items: center; gap: 8px; }

.mld-title {
  font-size: 16px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
  margin: 0;
}
.mld-count {
  font-size: 12px;
  color: #9CA3AF;
  background: #F3F3F1;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  padding: 2px 8px;
}

/* Search */
.mld-search-wrap { position: relative; display: flex; align-items: center; }
.mld-search-icon { position: absolute; left: 8px; pointer-events: none; }
.mld-search {
  padding: 6px 10px 6px 28px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  width: 180px;
  color: #374151;
  background: #FFFFFF;
  transition: border-color 0.1s;
}
.mld-search:focus { border-color: #D4D4D0; }
.mld-search::placeholder { color: #9CA3AF; }

/* Upload button */
.mld-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.mld-upload-btn:hover { opacity: 0.85; }

/* ── Filter pills ── */
.mld-filters { display: flex; gap: 4px; flex-shrink: 0; }
.mld-filter-pill {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.mld-filter-pill:hover { background: #F9F9F8; }
.mld-filter-active {
  background: #F3F3F1 !important;
  color: #0F0F0F !important;
  border-color: #D4D4D0 !important;
}

/* ── Drop zone ── */
.mld-drop-zone {
  border: 2px dashed #6366F1;
  border-radius: 10px;
  background: #EEF2FF;
  padding: 28px;
  flex-shrink: 0;
}
.mld-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mld-drop-label {
  font-size: 14px;
  font-weight: 500;
  color: #6366F1;
}

/* ── Asset grid — 4 columns ── */
.mld-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}

/* ── Asset tile ── */
.mld-tile {
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #FFFFFF;
  position: relative;
}
.mld-tile:hover { border-color: #D4D4D0; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.mld-tile-selected { border-color: #6366F1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.2) !important; }

/* Tile thumbnail — square aspect ratio */
.mld-tile-thumb {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}
.mld-tile-fill { width: 100%; height: 100%; }

/* Type badge (top-left corner) */
.mld-type-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.mld-badge-image { background: rgba(255,255,255,0.88); color: #374151; }
.mld-badge-video { background: rgba(0,0,0,0.65);       color: #FFFFFF;  }
.mld-badge-gif   { background: rgba(99,102,241,0.9);   color: #FFFFFF;  }

/* Hover overlay with size + date */
.mld-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.mld-tile:hover .mld-tile-overlay { opacity: 1; }
.mld-overlay-size { font-size: 11px; font-weight: 600; color: #FFFFFF; }
.mld-overlay-date { font-size: 10px; color: rgba(255,255,255,0.7); }

/* Tile filename row */
.mld-tile-name {
  padding: 6px 8px;
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid #F3F3F1;
}

/* ── Empty state ── */
.mld-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 0;
  text-align: center;
}
.mld-empty-icon  { font-size: 28px; margin-bottom: 4px; }
.mld-empty-title { font-size: 14px; font-weight: 600; color: #374151; }
.mld-empty-sub   { font-size: 12px; color: #9CA3AF; }

/* ── Detail panel ──
   NOTE: display:none is set via inline style only.
   Do NOT set display:flex in CSS — inline style controls visibility. */
.mld-detail {
  width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  border-left: 1px solid #E8E8E5;
  background: #FFFFFF;
  flex-direction: column;
  overflow: hidden;
}
.mld-detail-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.mld-detail-hd-title { font-size: 13px; font-weight: 600; color: #0F0F0F; }
.mld-detail-close {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 11px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mld-detail-close:hover { background: #F3F3F1; }

/* Large thumbnail in detail panel */
.mld-detail-thumb {
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  overflow: hidden;
}
.mld-detail-thumb-fill { width: 100%; height: 100%; }

.mld-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mld-detail-filename {
  font-size: 14px;
  font-weight: 600;
  color: #0F0F0F;
  word-break: break-all;
  line-height: 1.4;
}
.mld-detail-meta  { display: flex; flex-direction: column; gap: 6px; }
.mld-meta-row     { display: flex; justify-content: space-between; font-size: 12px; }
.mld-meta-label   { color: #9CA3AF; }
.mld-meta-value   { color: #374151; font-weight: 500; }
.mld-detail-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.mld-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #F3F3F1;
  color: #6B7280;
  border: 1px solid #E8E8E5;
}

.mld-detail-foot {
  padding: 12px 16px;
  border-top: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.mld-use-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
  box-sizing: border-box;
}
.mld-use-btn:hover { opacity: 0.85; }

/* ── Card picker ── */
.mld-picker {
  border-top: 1px solid #E8E8E5;
  padding: 12px 16px;
  flex-shrink: 0;
  background: #FAFAFA;
}
.mld-picker-label {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.mld-picker-list { display: flex; flex-direction: column; gap: 4px; }
.mld-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  background: #FFFFFF;
}
.mld-picker-item:hover { background: #F9F9F8; border-color: #D4D4D0; }
.mld-picker-item-done  { background: #F0FDF4 !important; border-color: #10B981 !important; }
.mld-picker-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F3F3F1;
}
.mld-picker-fill    { width: 100%; height: 100%; }
.mld-picker-title   { font-size: 12px; color: #374151; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mld-picker-check   { font-size: 11px; color: #10B981; font-weight: 600; flex-shrink: 0; display: none; }
.mld-picker-item-done .mld-picker-check { display: block; }

/* ── Extra gradient classes (mld-specific) ── */
.mld-grad-4 { background: linear-gradient(135deg, #FDF2F8 0%, #F9A8D4 100%); }
.mld-grad-5 { background: linear-gradient(135deg, #F0F9FF 0%, #7DD3FC 100%); }
.mld-grad-6 { background: linear-gradient(135deg, #F7FEE7 0%, #BEF264 100%); }
.mld-grad-7 { background: linear-gradient(135deg, #171717 0%, #374151 100%); }
.mld-grad-8 { background: linear-gradient(135deg, #FFF1F2 0%, #FDA4AF 100%); }

/* ===================================================
   PHASE 12 - Multi-Workspace + Team  (prefix: wsp-)
=================================================== */

/* Settings view breaks out of content-area padding:24px.
   margin:-24px cancels the 24px padding on all sides.
   calc(100% + 48px) = restore width/height (24px each side). */
#view-settings {
  margin: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Two-column settings layout */
.wsp-settings-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left nav */
.wsp-settings-nav {
  width: 200px;
  min-width: 200px;
  border-right: 1px solid #E8E8E5;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #FAFAFA;
  overflow-y: auto;
  flex-shrink: 0;
}
.wsp-settings-nav-label {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 12px;
  margin-bottom: 8px;
}
.wsp-settings-tab {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.1s;
  width: 100%;
  line-height: 1;
}
.wsp-settings-tab:hover { background: #F3F3F1; color: #374151; }
.wsp-tab-active {
  background: #FFFFFF !important;
  color: #0F0F0F !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
}

/* Right content */
.wsp-settings-content { flex: 1; overflow-y: auto; min-width: 0; min-height: 0; }
.wsp-stab-pane { padding: 28px 32px; min-height: min-content; }
.wsp-save-bar {
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
  border-top: 1px solid #F3F3F1;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -32px -28px;
}
.wsp-save-btn {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.1s;
}
.wsp-save-btn:hover { opacity: 0.8; }
.wsp-save-btn.saved {
  background: #10B981;
}
/* Card panel Save button (CP3) */
#card-sync-save-footer {
  padding: 10px 20px 14px;
  border-top: 1px solid #E8E8E5;
  display: flex;
  justify-content: flex-end;
}
#panel-save-btn {
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.15s;
}
#panel-save-btn:hover:not(:disabled) { opacity: 0.8; }
#panel-save-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wsp-save-confirm {
  font-size: 12px;
  color: #10B981;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
}
.wsp-save-confirm.visible { opacity: 1; }

.wsp-pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.wsp-pane-title { font-size: 16px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; margin: 0 0 4px; }
.wsp-pane-sub   { font-size: 13px; color: #6B7280; margin: 0; }

/* Placeholder panes */
.wsp-empty-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  gap: 10px;
  text-align: center;
}
.wsp-empty-pane-icon  { font-size: 32px; margin-bottom: 6px; }
.wsp-empty-pane-title { font-size: 15px; font-weight: 600; color: #374151; }
.wsp-empty-pane-sub   { font-size: 13px; color: #9CA3AF; max-width: 300px; line-height: 1.5; }

/* ── Notification preferences (ntp-) ── */
.ntp-section { border-top: 1px solid #F3F3F1; padding: 20px 0; }
.ntp-section:first-of-type { border-top: none; padding-top: 0; }
.ntp-section-title {
  font-size: 13px; font-weight: 600; color: #0F0F0F;
  margin: 0 0 4px; letter-spacing: -0.005em;
}
.ntp-section-sub { font-size: 12px; color: #6B7280; margin: 0 0 14px; line-height: 1.5; }
.ntp-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ntp-field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.ntp-field-label { font-size: 12px; color: #6B7280; font-weight: 500; }
.ntp-input {
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  color: #171717; background: #FFFFFF;
  border: 1px solid #E8E8E5; border-radius: 7px;
  transition: border-color 0.1s, box-shadow 0.1s;
  width: 100%; box-sizing: border-box;
}
.ntp-input:focus { outline: none; border-color: #171717; box-shadow: 0 0 0 3px rgba(23,23,23,0.08); }
.ntp-input::placeholder { color: #9CA3AF; }
.ntp-ws-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ntp-ws-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; font-size: 12px; font-weight: 500;
  font-family: inherit;
  color: #6B7280; background: #FFFFFF;
  border: 1px solid #E8E8E5; border-radius: 999px;
  cursor: pointer; transition: all 0.1s;
}
.ntp-ws-chip:hover { background: #F9F9F8; color: #374151; }
.ntp-ws-chip.is-on { color: #FFFFFF; background: #171717; border-color: #171717; }
.ntp-ws-dot {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #FFFFFF;
}
.ntp-types-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ntp-types-head {
  font-size: 11px; font-weight: 500; color: #9CA3AF;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; padding: 8px 6px;
}
.ntp-types-head.ntp-type-col { text-align: left; }
.ntp-types-tbl tbody tr { border-top: 1px solid #F3F3F1; }
.ntp-types-tbl td { padding: 12px 6px; vertical-align: middle; }
.ntp-type-name { font-size: 13px; font-weight: 500; color: #171717; margin: 0 0 2px; }
.ntp-type-desc { font-size: 12px; color: #6B7280; margin: 0; line-height: 1.4; }
.ntp-ch-cell { text-align: center; width: 70px; }
.ntp-ch-toggle { position: relative; display: inline-block; width: 32px; height: 18px; cursor: pointer; }
.ntp-ch-toggle input { opacity: 0; width: 0; height: 0; }
.ntp-ch-slider {
  position: absolute; inset: 0;
  background: #E8E8E5; border-radius: 999px;
  transition: background 0.15s;
}
.ntp-ch-slider::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 2px; top: 2px;
  background: #FFFFFF; border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.ntp-ch-toggle input:checked + .ntp-ch-slider { background: #171717; }
.ntp-ch-toggle input:checked + .ntp-ch-slider::before { transform: translateX(14px); }
.ntp-ch-toggle input:disabled + .ntp-ch-slider { opacity: 0.35; cursor: not-allowed; }
.ntp-master-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #FAFAF9;
  border: 1px solid #F3F3F1; border-radius: 8px;
  margin-bottom: 16px; gap: 12px;
}
.ntp-master-label { font-size: 13px; font-weight: 500; color: #171717; }
.ntp-master-sub { font-size: 12px; color: #6B7280; margin-top: 2px; }
.ntp-quiet-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
.ntp-quiet-times { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; }
.ntp-time-input {
  padding: 6px 8px; font-size: 12px; font-family: inherit;
  border: 1px solid #E8E8E5; border-radius: 6px; background: #FFFFFF;
}
.ntp-ch-coming { font-size: 12px; color: #9CA3AF; }

/* ── Team tab ── */
.wsp-invite-btn {
  padding: 7px 14px; font-size: 13px; font-weight: 500;
  font-family: inherit; color: #FFFFFF; background: #171717;
  border: none; border-radius: 7px; cursor: pointer;
  transition: opacity 0.1s; white-space: nowrap; flex-shrink: 0;
}
.wsp-invite-btn:hover { opacity: 0.8; }

.wsp-team-view-toggle {
  display: flex; gap: 4px;
  background: #F3F3F1; border-radius: 8px;
  padding: 3px; margin-bottom: 20px;
  width: fit-content;
}
.wsp-team-view-btn {
  padding: 5px 14px; font-size: 13px; font-weight: 400;
  font-family: inherit; border: none; border-radius: 6px;
  cursor: pointer; color: #6B7280; background: transparent;
  transition: all 0.1s;
}
.wsp-team-view-active {
  background: #FFFFFF; color: #0F0F0F; font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Member rows */
.wsp-team-list { display: flex; flex-direction: column; gap: 1px; }
.wsp-member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #F9F9F8;
}
.wsp-member-row:last-child { border-bottom: none; }
.wsp-member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #FFFFFF; flex-shrink: 0;
}
.wsp-member-info { flex: 1; min-width: 0; }
.wsp-member-name  { font-size: 13px; font-weight: 500; color: #0F0F0F; }
.wsp-member-email { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
.wsp-member-ws-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.wsp-member-ws-pill {
  font-size: 11px; color: #6B7280; background: #F3F3F1;
  padding: 1px 7px; border-radius: 9999px;
}
.wsp-member-role {
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 9999px; flex-shrink: 0;
}
.wsp-role-owner  { background: #F5F3FF; color: #6D28D9; }
.wsp-role-admin  { background: #EFF6FF; color: #1D4ED8; }
.wsp-role-viewer { background: #F3F3F1; color: #6B7280; }
.wsp-member-pending {
  font-size: 11px; color: #D97706; background: #FEF3C7;
  padding: 3px 9px; border-radius: 9999px; flex-shrink: 0;
}
.wsp-member-remove {
  font-size: 12px; color: #9CA3AF; background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 4px 8px;
  border-radius: 5px; transition: all 0.1s; flex-shrink: 0;
}
.wsp-member-remove:hover { background: #FEE2E2; color: #DC2626; }

/* Invite modal */
.wsp-invite-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 600; display: flex; align-items: center; justify-content: center;
}
.wsp-invite-box {
  width: 440px; max-width: 94vw; background: #FFFFFF;
  border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  overflow: hidden;
}
.wsp-invite-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #E8E8E5;
}
.wsp-invite-title { font-size: 15px; font-weight: 600; color: #0F0F0F; }
.wsp-invite-close {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid #E8E8E5; background: #FFFFFF;
  cursor: pointer; font-size: 12px; color: #6B7280;
  display: flex; align-items: center; justify-content: center;
}
.wsp-invite-close:hover { background: #F3F3F1; }
.wsp-invite-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.wsp-invite-field { display: flex; flex-direction: column; gap: 6px; }
.wsp-invite-label { font-size: 12px; font-weight: 500; color: #374151; }
.wsp-role-picker  { display: flex; flex-direction: column; gap: 8px; }
.wsp-role-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1.5px solid #E8E8E5;
  border-radius: 8px; cursor: pointer; transition: border-color 0.1s;
}
.wsp-role-opt:has(input:checked) { border-color: #171717; }
.wsp-role-opt input { margin-top: 2px; accent-color: #171717; flex-shrink: 0; }
.wsp-role-name { font-size: 13px; font-weight: 500; color: #0F0F0F; }
.wsp-role-desc { font-size: 12px; color: #9CA3AF; margin-top: 1px; }

/* Workspace access checkboxes */
.wsp-ws-access { display: flex; flex-direction: column; gap: 8px; }
.wsp-ws-access-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #374151; cursor: pointer;
}
.wsp-ws-access-item input { accent-color: #171717; }

.wsp-invite-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-top: 1px solid #E8E8E5;
}
.wsp-invite-cancel {
  font-size: 13px; color: #6B7280; background: none;
  border: none; cursor: pointer; font-family: inherit;
  padding: 8px 14px; border-radius: 7px; transition: background 0.1s;
}
.wsp-invite-cancel:hover { background: #F3F3F1; }

/* Workspace dropdown.
   NO top or left in CSS — set by JS via getBoundingClientRect() at open time. */
.wsp-dropdown {
  position: fixed;
  width: 244px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  z-index: 600;
  overflow: hidden;
}
.wsp-dropdown-list    { display: flex; flex-direction: column; padding: 6px; gap: 1px; }
.wsp-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.1s;
}
.wsp-dropdown-item:hover       { background: #F3F3F1; }
.wsp-dropdown-item-active      { background: #F3F3F1; }
.wsp-dropdown-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}
.wsp-dropdown-name {
  font-size: 13px;
  font-weight: 500;
  color: #0F0F0F;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wsp-dropdown-check   { font-size: 12px; color: #10B981; font-weight: 700; flex-shrink: 0; }
.wsp-dropdown-divider { height: 1px; background: #E8E8E5; margin: 2px 0; }
.wsp-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: color 0.1s;
}
.wsp-new-btn:hover { color: #374151; }

.ws-create-btn {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 24px); margin: 6px 12px 0;
  padding: 8px 10px;
  border: 1px dashed #D4D4D0; border-radius: 6px;
  background: transparent; cursor: pointer;
  font-size: 12px; color: #6366F1; font-weight: 500;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.ws-create-btn:hover { border-color: #6366F1; background: #F9F9FF; }
/* Icon-only pill when the sidebar is collapsed — hide the label. */
.sidebar.sidebar-collapsed .ws-create-btn         { justify-content: center; width: auto; margin: 6px 8px 0; padding: 8px; }
.sidebar.sidebar-collapsed .ws-create-btn span    { display: none; }

/* New workspace modal overlay.
   CRITICAL: NO display property in this CSS rule.
   display is controlled exclusively by JS:
     open:  overlay.style.display = 'flex'
     close: overlay.style.display = 'none'
   align-items/justify-content take effect when JS sets display:flex. */
.wsp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 700;
  align-items: center;
  justify-content: center;
}
.wsp-modal {
  width: 420px;
  max-width: 94vw;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wsp-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E8E8E5;
}
.wsp-modal-title { font-size: 15px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; }
.wsp-modal-close {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wsp-modal-close:hover { background: #F3F3F1; }
.wsp-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.wsp-modal-ft   { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #E8E8E5; }
.wsp-field       { display: flex; flex-direction: column; gap: 6px; }
.wsp-field-label { font-size: 12px; font-weight: 500; color: #374151; }
.wsp-field-input {
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  outline: none;
  color: #0F0F0F;
  transition: border-color 0.1s;
}
.wsp-field-input:focus { border-color: #6366F1; }
.wsp-field-input::placeholder { color: #9CA3AF; }
.wsp-color-swatches { display: flex; gap: 8px; }
.wsp-swatch {
  width: 28px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  flex-shrink: 0;
}
.wsp-swatch:hover  { transform: scale(1.12); }
.wsp-swatch-sel    { transform: scale(1.12); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #374151; }
/* BUG FIX: unicode checkmark, not letter v */
.wsp-swatch-sel::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
.wsp-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  background: #F9F9F8;
}
.wsp-preview-avatar {
  width: 24px; height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}
.wsp-preview-name { font-size: 13px; font-weight: 500; color: #0F0F0F; }
.wsp-cancel-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.1s;
}
.wsp-cancel-btn:hover { background: #F3F3F1; }
.wsp-create-btn {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.1s;
}
.wsp-create-btn:hover { opacity: 0.85; }

/* ===================================================
   PHASE 13 — Platform Connections + Publishing
   All classes prefixed pub-
=================================================== */

/* Scheduling modal overlay.
   CRITICAL: NO display property in this CSS rule.
   JS opens: overlay.style.display = 'flex'
   JS closes: overlay.style.display = 'none' */
.pub-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 800;
  align-items: center;
  justify-content: center;
}
.pub-modal {
  width: 480px;
  max-width: 94vw;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.pub-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.pub-modal-title { font-size: 15px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; }
.pub-modal-close {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-modal-close:hover { background: #F3F3F1; }
.pub-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.pub-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #E8E8E5;
  flex-shrink: 0;
}

/* Card being published */
.pub-card-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 10px 14px;
}
.pub-card-strip-label {
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.pub-card-strip-title {
  font-size: 14px;
  font-weight: 500;
  color: #0F0F0F;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Date + time row */
.pub-field-row  { display: flex; gap: 12px; }
.pub-field      { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pub-field-label { font-size: 12px; font-weight: 500; color: #374151; }
.pub-field-input {
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  color: #374151;
  transition: border-color 0.1s;
  width: 100%;
  box-sizing: border-box;
}
.pub-field-input:focus { border-color: #6366F1; }

/* Platform pill grid */
.pub-plat-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.pub-plat-pill-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pub-plat-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  border: none;
  font-family: inherit;
  transition: opacity 0.1s, filter 0.1s;
  line-height: 1;
  text-align: left;
  opacity: 0.45;
}
.pub-plat-pill:hover { filter: brightness(1.1); }
.pub-plat-pill-on    { opacity: 1; }
.pub-plat-pill-arrow {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 8px;
  transition: transform 0.15s;
}
.pub-plat-pill-open .pub-plat-pill-arrow { transform: rotate(90deg); }

/* Format sub-panel */
.pub-format-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
  flex-shrink: 0;
}
.pub-format-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  border: none;
  font-family: inherit;
  transition: opacity 0.1s;
  opacity: 0.5;
  line-height: 1;
}
.pub-format-btn:hover { opacity: 0.8; }
.pub-format-btn-on   { opacity: 1; }
.pub-format-icon {
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.25);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* Disconnected platform */
.pub-plat-pill-disconnected {
  opacity: 0.2;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Caption preview */
.pub-caption-preview {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 10px 12px;
  max-height: 72px;
  overflow-y: auto;
  min-height: 36px;
}
.pub-caption-empty { color: #9CA3AF; font-style: italic; }

/* Modal action buttons */
.pub-cancel-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  color: #6B7280;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.1s;
}
.pub-cancel-btn:hover { background: #F3F3F1; }
.pub-publish-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.1s;
}
.pub-publish-btn:hover { opacity: 0.85; }

/* Spinner overlay — sits over modal content during publish */
.pub-spinner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}
.pub-spinner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pub-spinner {
  width: 28px; height: 28px;
  border: 3px solid #E8E8E5;
  border-top-color: #6366F1;
  border-radius: 50%;
  animation: pub-spin 0.7s linear infinite;
}
@keyframes pub-spin { to { transform: rotate(360deg); } }
.pub-spinner-msg { font-size: 13px; color: #374151; font-weight: 500; }

/* Connections list in Settings */
.pub-connections-list { display: flex; flex-direction: column; margin-bottom: 32px; }
.pub-connection-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F3F3F1;
}
.pub-connection-row:last-child { border-bottom: none; }
.pub-conn-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pub-conn-info   { flex: 1; min-width: 0; }
.pub-conn-name   { font-size: 14px; font-weight: 500; color: #0F0F0F; }
.pub-conn-handle { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
.pub-conn-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.pub-badge-on   { color: #10B981; }
.pub-badge-off  { color: #9CA3AF; }
.pub-badge-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pub-conn-btns  { display: flex; gap: 6px; flex-shrink: 0; }
.pub-conn-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  line-height: 1;
  white-space: nowrap;
}
.pub-btn-connect    { color: #FFFFFF; background: #171717; border: none; }
.pub-btn-connect:hover    { opacity: 0.85; }
.pub-btn-reconnect  { color: #374151; background: #FFFFFF; border: 1px solid #E8E8E5; }
.pub-btn-reconnect:hover  { background: #F3F3F1; }
.pub-btn-disconnect { color: #DC2626; background: #FFFFFF; border: 1px solid #E8E8E5; }
.pub-btn-disconnect:hover { background: #FEF2F2; border-color: #FECACA; }

/* OAuth simulation overlay */
.pub-oauth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-oauth-box {
  width: 400px;
  max-width: 94vw;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.pub-oauth-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pub-oauth-title { font-size: 17px; font-weight: 600; color: #0F0F0F; }
.pub-oauth-sub   { font-size: 13px; color: #6B7280; line-height: 1.5; max-width: 280px; }
.pub-oauth-track { width: 100%; height: 4px; background: #F3F3F1; border-radius: 9999px; overflow: hidden; }
.pub-oauth-fill  { height: 100%; background: #6366F1; border-radius: 9999px; transition: width 0.35s ease; width: 0%; }
.pub-oauth-step  { font-size: 12px; color: #9CA3AF; }

/* Publishing log */
.pub-log-section { margin-top: 8px; }
.pub-log-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E8E8E5;
}
.pub-log-title { font-size: 14px; font-weight: 600; color: #0F0F0F; }
.pub-log-count {
  font-size: 11px;
  background: #F3F3F1;
  color: #6B7280;
  border-radius: 9999px;
  padding: 2px 8px;
  font-weight: 500;
}
.pub-log-list  { display: flex; flex-direction: column; }
.pub-log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F3F3F1;
  font-size: 13px;
}
.pub-log-row:last-child { border-bottom: none; }
.pub-log-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pub-log-card  { flex: 1; min-width: 0; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-log-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.pub-badge-published { background: #F0FDF4; color: #166534; }
.pub-badge-pending   { background: #FFFBEB; color: #92400E; }
.pub-badge-failed    { background: #FEF2F2; color: #991B1B; }
.pub-log-time { font-size: 11px; color: #9CA3AF; flex-shrink: 0; }

/* Platform prop row */
.pub-plat-prop-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pub-plat-summary { display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:1; min-width:0; }
.pub-plat-summary-filled { color: #374151; }
.pub-plat-empty-label { font-size:13px; color:#9CA3AF; }
.pub-plat-pill-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: #FFFFFF;
  line-height: 1.3; white-space: nowrap; cursor: default;
}
.pub-plat-pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; border: none;
  background: rgba(255,255,255,0.25); cursor: pointer;
  color: #FFFFFF; padding: 0; flex-shrink: 0; transition: background 0.1s;
}
.pub-plat-pill-x:hover { background: rgba(255,255,255,0.4); }
.pub-plat-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.1s;
  flex-shrink: 0;
}
.pub-plat-add-btn:hover { opacity: 1; }

/* Platform dropdown */
.pub-plat-dropdown {
  position: fixed;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  width: 260px;
  overflow: hidden;
}
.pub-plat-dropdown-inner {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Platform pill rows in dropdown */
.pub-dd-pill-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.pub-dd-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  border: none;
  font-family: inherit;
  opacity: 1;
  line-height: 1;
  transition: filter 0.1s;
  text-align: left;
  letter-spacing: 0.01em;
}
.pub-dd-pill:hover:not(:disabled) { filter: brightness(1.08); }
.pub-dd-pill-on      { outline: 3px solid rgba(255,255,255,0.5); outline-offset: -3px; }
.pub-dd-pill-disabled { opacity: 0.25 !important; cursor: not-allowed; filter: grayscale(0.5); }
.pub-dd-arrow {
  font-size: 16px;
  font-weight: 300;
  transition: transform 0.15s;
  margin-left: 4px;
  flex-shrink: 0;
}
.pub-dd-pill-open .pub-dd-arrow { transform: rotate(90deg); }

/* Format strip in dropdown */
.pub-dd-formats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
  flex-shrink: 0;
}
.pub-dd-fmt-btn {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  border: none;
  font-family: inherit;
  opacity: 0.55;
  transition: opacity 0.1s;
  line-height: 1;
  white-space: nowrap;
}
.pub-dd-fmt-btn:hover  { opacity: 0.8; }
.pub-dd-fmt-btn-on     { opacity: 1; }
.pub-dd-fmt-icon {
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

/* Format badge + ratio container */
.pub-format-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
#modal-media-area > *:not(.pub-format-badge) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Schedule prop row */
.pub-schedule-prop-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.pub-schedule-prop-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.pub-schedule-display {
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.1s;
}
.pub-schedule-display:hover { background: #F3F3F1; }
.pub-schedule-display-set {
  background: #F3F3F1;
  color: #0F0F0F;
  font-weight: 500;
}
.pub-sched-clear {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  flex-shrink: 0;
  transition: all 0.1s;
}
.pub-sched-clear:hover { background:#FEF2F2; color:#DC2626; border-color:#FECACA; }
.pub-schedule-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pub-schedule-date,
.pub-schedule-time {
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 5px;
  outline: none;
  color: #374151;
  transition: border-color 0.1s;
}
.pub-schedule-date:focus,
.pub-schedule-time:focus { border-color: #6366F1; }

/* Publish button row */
.pub-publish-prop-row { padding: 4px 0 8px; }
.pub-publish-inline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.1s;
  width: 100%;
}
.pub-publish-inline-btn:hover { opacity: 0.85; }

/* Auto Post toggle */
.pub-autopost-toggle {
  position: relative; width: 36px; height: 20px;
  cursor: pointer; flex-shrink: 0; display: inline-block;
}
.pub-autopost-toggle input { opacity:0; width:0; height:0; position:absolute; }
.pub-autopost-track {
  position: absolute; inset: 0;
  border-radius: 9999px; background: #E8E8E5;
  transition: background 0.2s; cursor: pointer;
}
.pub-autopost-toggle input:checked + .pub-autopost-track { background: #171717; }
.pub-autopost-track::after {
  content: ""; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #FFFFFF; top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pub-autopost-toggle input:checked + .pub-autopost-track::after { transform: translateX(16px); }

/* ===================================================
   PHASE 14 — AI Agent  (prefix: aia-)
=================================================== */

/* Status badge */
.aia-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 9999px;
  flex-shrink: 0;
}
.aia-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #D4D4D0;
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.aia-dot-idle    { background: #D4D4D0; }
.aia-dot-active  { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.aia-dot-working { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); animation: aia-pulse 1s ease-in-out infinite; }
@keyframes aia-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
.aia-status-label { font-size: 12px; font-weight: 500; color: #374151; }

/* Sections */
.aia-section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #F3F3F1;
}
.aia-section:last-child { border-bottom: none; margin-bottom: 0; }
.aia-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.aia-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.aia-section-hd .aia-section-label { margin-bottom: 0; }

/* Identity */
.aia-identity-row   { display: flex; align-items: center; gap: 16px; }
.aia-avatar {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s;
}
.aia-avatar::after {
  content: "\2726";
  position: absolute;
  bottom: -5px; right: -5px;
  width: 18px; height: 18px;
  background: #171717;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  line-height: 1;
}
.aia-identity-fields { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.aia-name-input {
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  outline: none;
  color: #0F0F0F;
  max-width: 200px;
  transition: border-color 0.1s;
}
.aia-name-input:focus { border-color: #7C3AED; }
.aia-color-swatches { display: flex; gap: 6px; }
.aia-swatch {
  width: 22px; height: 22px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}
.aia-swatch:hover { transform: scale(1.15); }
.aia-swatch-sel   { transform: scale(1.15); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #374151; }

/* Skills list */
.aia-skills-list { display: flex; flex-direction: column; }
.aia-skill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #F3F3F1;
}
.aia-skill-row:last-child { border-bottom: none; }
.aia-skill-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: #F3F3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.aia-skill-icon-on { background: #F5F3FF; }
.aia-skill-info    { flex: 1; min-width: 0; }
.aia-skill-name    { font-size: 14px; font-weight: 500; color: #0F0F0F; margin-bottom: 2px; }
.aia-skill-desc    { font-size: 12px; color: #9CA3AF; line-height: 1.4; }

/* Skill toggle switch */
.aia-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.aia-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.aia-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #E8E8E5;
  transition: background 0.2s;
  cursor: pointer;
}
.aia-toggle input:checked + .aia-toggle-track { background: #7C3AED; }
.aia-toggle-track::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.aia-toggle input:checked + .aia-toggle-track::after { transform: translateX(16px); }

/* Rules */
.aia-rules-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  outline: none;
  color: #374151;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.1s;
  box-sizing: border-box;
}
.aia-rules-textarea:focus { border-color: #7C3AED; }

/* Autonomy */
.aia-autonomy-group { display: flex; flex-direction: column; gap: 8px; }
.aia-autonomy-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  transition: background 0.1s, border-color 0.1s;
}
.aia-autonomy-opt:hover { background: #F9F9F8; }
.aia-autonomy-opt input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #7C3AED;
}
.aia-autonomy-opt input:checked ~ .aia-autonomy-card .aia-autonomy-title { color: #7C3AED; }
.aia-autonomy-card  { flex: 1; }
.aia-autonomy-title { font-size: 13px; font-weight: 500; color: #0F0F0F; transition: color 0.1s; }
.aia-autonomy-sub   { font-size: 12px; color: #9CA3AF; margin-top: 2px; line-height: 1.4; }

/* Activity log */
.aia-activity-log {
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  overflow: hidden;
  min-height: 100px;
}
.aia-log-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 32px 0;
  gap: 6px;
  text-align: center;
}
.aia-log-is-empty .aia-log-empty-state { display: flex; }
.aia-log-is-empty #aia-log-rows        { display: none; }
.aia-log-empty-icon  { font-size: 22px; color: #D4D4D0; margin-bottom: 4px; }
.aia-log-empty-title { font-size: 13px; font-weight: 500; color: #9CA3AF; }
.aia-log-empty-sub   { font-size: 12px; color: #D4D4D0; }

/* Log rows */
.aia-log-rows { display: flex; flex-direction: column; }
.aia-log-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #EFEFED;
  transition: background 0.1s;
}
.aia-log-row:last-child { border-bottom: none; }
.aia-log-row:hover      { background: #F3F3F1; }
@keyframes aia-slide-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0);    }
}
.aia-log-row-new { animation: aia-slide-in 0.3s ease; }
.aia-log-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #F5F3FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.aia-log-body { flex: 1; min-width: 0; }
.aia-log-msg  { font-size: 13px; color: #374151; line-height: 1.4; margin-bottom: 4px; }
.aia-log-msg strong { color: #0F0F0F; font-weight: 500; }
.aia-log-meta { display: flex; align-items: center; gap: 8px; }
.aia-log-time { font-size: 11px; color: #9CA3AF; }
.aia-log-view {
  font-size: 11px;
  font-weight: 500;
  color: #7C3AED;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.aia-log-view:hover { opacity: 0.7; }
.aia-clear-btn {
  font-size: 12px;
  color: #9CA3AF;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.aia-clear-btn:hover { color: #DC2626; }

/* ===================================================
   PHASE 15 — Polish + Branding  (prefix: p15-)
=================================================== */

/* View transitions — 150ms opacity fade */
.view-container {
  transition: opacity 0.15s ease;
}
.p15-view-fade-out {
  opacity: 0;
  pointer-events: none;
}
.p15-view-fade-in {
  animation: p15-fade-in 0.15s ease forwards;
}
@keyframes p15-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Skeleton screen shimmer */
@keyframes p15-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.p15-skeleton {
  background: linear-gradient(90deg, #F3F3F1 25%, #E8E8E5 50%, #F3F3F1 75%);
  background-size: 600px 100%;
  animation: p15-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.p15-skeleton-card {
  height: 96px;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* Keyboard shortcut hint tooltip */
.p15-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  background: #F3F3F1;
  border: 1px solid #E8E8E5;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  font-family: monospace;
}

/* Keyboard shortcuts modal */
.p15-shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p15-shortcuts-modal {
  width: 380px;
  max-width: 94vw;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16);
  overflow: hidden;
}
.p15-shortcuts-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E8E8E5;
}
.p15-shortcuts-title { font-size: 15px; font-weight: 600; color: #0F0F0F; }
.p15-shortcuts-close {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p15-shortcuts-close:hover { background: #F3F3F1; }
.p15-shortcuts-list { padding: 8px 0; }
.p15-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 13px;
  color: #374151;
}
.p15-shortcut-row:hover { background: #F9F9F8; }
.p15-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: #F3F3F1;
  border: 1px solid #E8E8E5;
  border-bottom-width: 2px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  font-family: monospace;
}

/* Branding tab — brand color swatch grid */
.p15-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.p15-color-swatch {
  width: 32px; height: 32px;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.p15-color-swatch:hover { transform: scale(1.1); }
.p15-color-swatch-sel   { transform: scale(1.1); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #374151; }
.p15-color-swatch-sel::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
.p15-color-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.p15-color-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.p15-color-picker {
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 1px solid #E8E8E5;
  cursor: pointer;
  padding: 2px;
  background: none;
}
.p15-hex-input {
  padding: 7px 10px;
  font-size: 13px;
  font-family: monospace;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  width: 100px;
  color: #374151;
  transition: border-color 0.1s;
}
.p15-hex-input:focus { border-color: #6366F1; }

/* Brand preview strip */
.p15-brand-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F9F9F8;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  margin-top: 16px;
}
.p15-preview-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  cursor: default;
  transition: background 0.2s;
}
.p15-preview-label { font-size: 12px; color: #9CA3AF; }

/* Logo upload */
.p15-logo-upload-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 2px dashed #E8E8E5;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.p15-logo-upload-zone:hover { border-color: #D4D4D0; background: #F9F9F8; }
.p15-logo-preview {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: #F3F3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
}
.p15-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.p15-logo-upload-text { flex: 1; }
.p15-logo-upload-title { font-size: 13px; font-weight: 500; color: #374151; }
.p15-logo-upload-sub   { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.p15-logo-remove {
  font-size: 12px;
  color: #DC2626;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

/* Brand color CSS variable — applied at :root, overrides btn-primary */
:root { --p15-brand: #171717; --ws-accent: #171717; }
.p15-brand-active .btn-primary { background: var(--p15-brand) !important; }

/* ===================================================
   PHASE 16 — Commerce Layer  (prefix: p16-)
=================================================== */

/* UTM link row */
.p16-utm-empty { font-size: 13px; color: #9CA3AF; }
.p16-utm-display { width: 100%; }
.p16-utm-editor  { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.p16-utm-input {
  width: 100%;
  font-size: 11px;
  font-family: monospace;
  color: #374151;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  background: #F9F9F8;
  box-sizing: border-box;
  line-height: 1.5;
}
.p16-utm-input:focus { border-color: #6366F1; background: #FFFFFF; }
.p16-utm-actions { display: flex; gap: 8px; }
.p16-utm-copy-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  background: #171717;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.1s;
}
.p16-utm-copy-btn:hover  { opacity: 0.8; }
.p16-utm-copy-btn.copied { background: #10B981; }
.p16-utm-regen-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #6B7280;
  background: #F3F3F1;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.p16-utm-regen-btn:hover { background: #E8E8E5; }

/* Products prop row */
.p16-products-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
  min-width: 0;
}
.p16-products-empty { font-size:13px; color:#9CA3AF; }
.p16-products-add-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; opacity: 0.7; flex-shrink: 0;
  transition: opacity 0.1s;
}
.p16-products-add-btn:hover { opacity: 1; }

/* Product pill in prop row */
.p16-prod-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px; border-radius: 6px;
  border: 1px solid #E8E8E5; background: #FFFFFF;
  font-size: 12px; font-weight: 500; color: #374151;
  white-space: nowrap;
}
.p16-prod-pill-thumb {
  width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0;
}
.p16-prod-pill-price { font-size: 11px; color: #9CA3AF; font-weight: 400; }
.p16-prod-pill-x {
  width: 14px; height: 14px; border-radius: 2px; border: none;
  background: #F3F3F1; cursor: pointer; color: #9CA3AF;
  padding: 0; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 9px;
  transition: background 0.1s, color 0.1s;
}
.p16-prod-pill-x:hover { background: #FEE2E2; color: #DC2626; }

/* Product picker dropdown */
.p16-prod-picker {
  position: fixed; z-index: 9999; background: #FFFFFF;
  border: 1px solid #E8E8E5; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12); width: 280px; overflow: hidden;
}
.p16-picker-search {
  padding: 10px 12px; border-bottom: 1px solid #F3F3F1;
}
.p16-picker-input {
  width: 100%; font-size: 13px; font-family: inherit;
  border: none; outline: none; color: #374151; background: transparent;
  box-sizing: border-box;
}
.p16-picker-input::placeholder { color: #D4D4D0; }
.p16-picker-list { max-height: 240px; overflow-y: auto; }
.p16-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; transition: background 0.1s;
}
.p16-picker-item:hover { background: #F9F9F8; }
.p16-picker-item-sel  { background: #F5F3FF; }
.p16-picker-item-thumb { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; }
.p16-picker-item-info  { flex: 1; min-width: 0; }
.p16-picker-item-name  {
  font-size: 13px; font-weight: 500; color: #0F0F0F;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p16-picker-item-price { font-size: 11px; color: #9CA3AF; }
.p16-picker-item-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid #E8E8E5; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 11px; color: #FFFFFF;
  transition: all 0.1s;
}
.p16-picker-item-sel .p16-picker-item-check {
  background: #171717; border-color: #171717;
}

/* Feed view */
.p16-feed-wrap {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.p16-feed-header { padding: 24px 24px 0; flex-shrink: 0; }
.p16-feed-title {
  font-size: 20px; font-weight: 600; color: #0F0F0F;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.p16-feed-sub { font-size: 13px; color: #9CA3AF; margin-bottom: 20px; }

/* Shared table (Table view uses this) */
.p16-posts-table {
  width: 100%; border-collapse: collapse; background: #FFFFFF;
  border: 1px solid #E8E8E5; border-radius: 10px; overflow: hidden;
}
.p16-posts-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: #9CA3AF;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 12px 16px; border-bottom: 1px solid #F3F3F1; background: #FAFAF9;
}
.p16-posts-table td {
  padding: 12px 16px; border-bottom: 1px solid #F9F9F8; vertical-align: middle;
}
.p16-posts-table tr:last-child td { border-bottom: none; }
.p16-posts-table tr:hover td { background: #FAFAF9; }

/* Shoppable preview */
.p16-preview-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px; gap: 10px; overflow-y: auto; flex: 1;
}
.p16-preview-post {
  width: 200px; border-radius: 10px; overflow: hidden;
  border: 1px solid #E8E8E5; background: #FFFFFF;
}
.p16-preview-media { width: 200px; height: 200px; }
.p16-preview-caption {
  padding: 8px 10px; font-size: 11px; color: #374151; line-height: 1.4;
}
.p16-preview-products { width: 200px; display: flex; flex-direction: column; gap: 6px; }
.p16-preview-prod-card {
  background: #FFFFFF; border: 1px solid #E8E8E5; border-radius: 8px;
  padding: 8px 10px; display: flex; align-items: center; gap: 8px;
}
.p16-preview-prod-img { width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0; }
.p16-preview-prod-name  { font-size: 11px; font-weight: 600; color: #0F0F0F; }
.p16-preview-prod-price { font-size: 10px; color: #9CA3AF; }
.p16-preview-shop-btn {
  margin-left: auto; font-size: 10px; font-weight: 600;
  color: #FFFFFF; background: #171717; border: none;
  border-radius: 9999px; padding: 3px 8px; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
}
.p16-preview-empty {
  font-size: 11px; color: #D4D4D0; text-align: center; padding: 16px;
}

/* ── Sidebar collapse toggle button ── */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #9CA3AF;
  width: 100%;
  flex-shrink: 0;
  transition: color 0.1s;
}
.sidebar-collapse-btn:hover { color: #374151; }

.sidebar-collapse-icon {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

/* ── Sidebar transition ── */
.sidebar {
  transition: width 0.25s ease, min-width 0.25s ease;
}

/* ── Collapsed state ── */
.sidebar.sidebar-collapsed {
  width: 48px;
  min-width: 48px;
}

/* Flip the chevron when collapsed */
.sidebar.sidebar-collapsed .sidebar-collapse-icon {
  transform: rotate(180deg);
}

/* Center the toggle button when collapsed */
.sidebar.sidebar-collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 8px 0 4px;
}

/* Hide text elements when collapsed */
.sidebar.sidebar-collapsed .workspace-label,
.sidebar.sidebar-collapsed .workspace-selector svg,
.sidebar.sidebar-collapsed .nav-label,
.sidebar.sidebar-collapsed .nav-section-label,
.sidebar.sidebar-collapsed .footer-name,
.sidebar.sidebar-collapsed .sidebar-footer svg {
  display: none;
}

/* Workspace selector — icon only */
.sidebar.sidebar-collapsed .workspace-selector {
  justify-content: center;
  padding: 8px 0;
  margin: 4px 4px;
}

/* Nav items — center the dot */
.sidebar.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 8px 0;
  margin: 1px 4px;
}

/* Make nav-dot bigger and more visible when collapsed */
.sidebar.sidebar-collapsed .nav-dot {
  width: 9px;
  height: 9px;
}

/* Footer — center avatar */
.sidebar.sidebar-collapsed .sidebar-footer {
  justify-content: center;
  padding: 10px 0 14px;
}

/* Tooltip on hover in collapsed state — show nav label */
.sidebar.sidebar-collapsed .nav-item {
  position: relative;
}
.sidebar.sidebar-collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #171717;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 500;
  font-family: 'Inter', sans-serif;
}
.sidebar.sidebar-collapsed .nav-item:hover::after {
  opacity: 1;
}

/* Workspace selector tooltip when collapsed */
.sidebar.sidebar-collapsed .workspace-selector {
  position: relative;
}
.sidebar.sidebar-collapsed .workspace-selector::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #171717;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 500;
  font-family: 'Inter', sans-serif;
}
.sidebar.sidebar-collapsed .workspace-selector:hover::after {
  opacity: 1;
}

/* IG Grid Preview */
.p16-ig-wrap {
  height: 100%;
  overflow-y: auto;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p16-ig-header {
  width: 100%;
  max-width: 560px;
  padding: 24px 0 16px;
  border-bottom: 1px solid #F3F3F1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.p16-ig-profile { display: flex; align-items: center; gap: 16px; }
.p16-ig-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #171717;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #FFFFFF;
  flex-shrink: 0;
}
.p16-ig-handle { font-size: 15px; font-weight: 600; color: #0F0F0F; margin-bottom: 6px; }
.p16-ig-stats  { display: flex; gap: 16px; font-size: 13px; color: #374151; }
.p16-ig-stats strong { font-weight: 600; color: #0F0F0F; }
.p16-ig-platform-pills { display: flex; gap: 8px; }
.p16-ig-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 9999px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  border: 1.5px solid #E8E8E5; background: #FFFFFF;
  color: #6B7280; cursor: pointer; transition: all 0.1s;
}
.p16-ig-pill-active {
  border-color: #E1306C; color: #E1306C; background: #FFF0F5;
}

/* 3-column grid */
.p16-ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px 0;
  width: 100%;
  max-width: 560px;
}
.p16-ig-cell {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #F3F3F1;
}
.p16-ig-cell-fill {
  position: absolute;
  inset: 0;
  transition: transform 0.2s;
}
.p16-ig-cell:hover .p16-ig-cell-fill { transform: scale(1.04); }
.p16-ig-cell-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.15s;
}
.p16-ig-cell:hover .p16-ig-cell-overlay {
  background: rgba(0,0,0,0.3); opacity: 1;
}
.p16-ig-cell-title {
  color: #FFFFFF; font-size: 11px; font-weight: 600;
  text-align: center; padding: 8px; line-height: 1.3;
}
.p16-ig-cell-scheduled {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.55); color: #FFFFFF;
  font-size: 9px; font-weight: 600; padding: 2px 5px;
  border-radius: 3px; letter-spacing: 0.03em;
}
.p16-ig-empty {
  grid-column: 1 / -1;
  padding: 60px 24px;
  text-align: center;
  color: #9CA3AF;
  font-size: 13px;
}

/* ── Auth gate ──────────────────────────────────────────────────────────── */
#auth-gate { position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center; }
.gate-box { width:100%;max-width:380px;padding:40px 36px; }
.gate-logo { display:block;height:36px;width:auto;margin:0 auto 18px; }
.gate-box h1 { font-size:22px;font-weight:600;color:#0F0F0F;margin-bottom:6px; text-align:center; }
.gate-box > p { font-size:14px;color:#6B7280;margin-bottom:24px; text-align:center; }
.gate-field { margin-bottom:14px; }
.gate-label { display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:5px; }
.gate-input { width:100%;padding:9px 12px;border:1px solid #D4D4D0;border-radius:7px;font-size:15px;outline:none;transition:border-color .15s;font-family:inherit; }
.gate-input:focus { border-color:#6366F1; }
.gate-btn { width:100%;padding:10px;background:#171717;color:#fff;border:none;border-radius:7px;font-size:15px;font-weight:500;cursor:pointer;margin-top:4px;transition:opacity .15s;font-family:inherit; }
.gate-btn:disabled { opacity:.55;cursor:default; }
.gate-err { display:none;font-size:13px;color:#EF4444;margin-bottom:10px; }
.gate-ws-btn { display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid #E8E8E5;border-radius:8px;background:#fff;cursor:pointer;margin-bottom:8px;transition:border-color .15s,background .15s;font-family:inherit; }
.gate-ws-btn:hover { border-color:#6366F1;background:#F9F9FF; }
.gate-ws-avatar { width:36px;height:36px;min-width:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff; }
.gate-ws-info { display:flex;flex-direction:column;text-align:left; }
.gate-ws-name { font-size:15px;font-weight:500;color:#0F0F0F; }
.gate-ws-role { font-size:12px;color:#9CA3AF;text-transform:capitalize;margin-top:1px; }
.gate-create-toggle { display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;border:1px dashed #D4D4D0;border-radius:8px;background:transparent;cursor:pointer;font-size:14px;color:#6366F1;font-weight:500;margin-top:4px;transition:border-color .15s,background .15s;font-family:inherit; }
.gate-create-toggle:hover { border-color:#6366F1;background:#F9F9FF; }
.gate-create-wrap { border:1px solid #E8E8E5;border-radius:8px;padding:16px;margin-top:8px; }
.gate-form-actions { display:flex;gap:8px;margin-top:4px; }
.gate-btn-sm { flex:1;padding:9px;background:#171717;color:#fff;border:none;border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .15s;font-family:inherit; }
.gate-btn-sm:disabled { opacity:.55;cursor:default; }
.gate-btn-outline { flex:1;padding:9px;background:#fff;color:#374151;border:1px solid #D4D4D0;border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s;font-family:inherit; }
.gate-btn-outline:hover { background:#F9F9F8; }

/* ── Billing pane (PayPal card checkout) ────────────────────────────────── */
.bill-summary { margin-bottom:20px; }
.bill-summary-active {
  padding:14px 16px; border:1px solid #10B981; background:#ECFDF5;
  border-radius:10px; display:flex; align-items:center; gap:12px;
  font-size:14px; color:#065F46;
}
.bill-summary-active .bill-summary-dot {
  width:8px; height:8px; border-radius:50%; background:#10B981; flex-shrink:0;
}
.bill-summary-inactive {
  padding:14px 16px; border:1px solid #E8E8E5; background:#F9F9F8;
  border-radius:10px; font-size:13px; color:#6B7280;
}
.bill-plan-card {
  padding:24px; border:1px solid #E8E8E5; border-radius:12px;
  background:#FFFFFF; max-width:440px;
}
.bill-plan-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.bill-plan-title { font-size:18px; font-weight:600; color:#0F0F0F; letter-spacing:-0.01em; }
.bill-plan-price { display:flex; align-items:baseline; gap:2px; color:#0F0F0F; }
.bill-price-amount { font-size:28px; font-weight:700; letter-spacing:-0.02em; }
.bill-price-per { font-size:14px; color:#6B7280; }
.bill-plan-features { list-style:none; padding:0; margin:0 0 20px 0; }
.bill-plan-features li {
  font-size:14px; color:#374151; padding:6px 0 6px 22px; position:relative;
}
.bill-plan-features li::before {
  content:"\2713"; position:absolute; left:0; color:#10B981; font-weight:700;
}
.bill-subscribe-btn, .bill-pay-btn {
  width:100%; padding:11px; background:#6366F1; color:#FFFFFF;
  border:none; border-radius:8px; font-size:15px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:opacity .15s;
}
.bill-subscribe-btn:hover, .bill-pay-btn:hover { opacity:0.9; }
.bill-subscribe-btn:disabled, .bill-pay-btn:disabled { opacity:0.55; cursor:not-allowed; }
.bill-cancel-btn {
  width:100%; padding:9px; background:transparent; color:#DC2626;
  border:1px solid #DC2626; border-radius:8px; font-size:14px; font-weight:500;
  cursor:pointer; font-family:inherit; margin-top:8px; transition:background .15s;
}
.bill-cancel-btn:hover { background:#FEF2F2; }
.bill-provider-note {
  font-size:12px; color:#9CA3AF; text-align:center; margin-top:12px;
}
.bill-card-form {
  margin-top:24px; padding:24px; border:1px solid #E8E8E5; border-radius:12px;
  background:#FFFFFF; max-width:440px;
}
.bill-card-form-title { font-size:16px; font-weight:600; color:#0F0F0F; margin-bottom:16px; }
.bill-field { margin-bottom:14px; }
.bill-field-row { display:flex; gap:12px; }
.bill-field-row .bill-field { flex:1; }
.bill-field-label { display:block; font-size:13px; font-weight:500; color:#374151; margin-bottom:6px; }
.bill-card-field {
  min-height:40px; padding:0;
  background:#FFFFFF;
}
.bill-card-field:focus-within { border-color:#6366F1; }
.bill-card-error { font-size:13px; color:#DC2626; margin:0 0 12px 0; }
.bill-card-actions { display:flex; gap:8px; margin-top:16px; }
.bill-card-actions .bill-pay-btn { flex:2; }
.bill-cancel-form-btn {
  flex:1; padding:11px; background:#FFFFFF; color:#374151;
  border:1px solid #D4D4D0; border-radius:8px; font-size:14px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.bill-cancel-form-btn:hover { background:#F9F9F8; }
.bill-pay-spinner {
  margin-top:14px; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:13px; color:#6B7280;
}
.bill-spinner-dot {
  width:8px; height:8px; border-radius:50%; background:#6366F1;
  animation:bill-pulse 0.8s ease-in-out infinite;
}
@keyframes bill-pulse {
  0%, 100% { opacity:0.4; transform:scale(0.8); }
  50%      { opacity:1;    transform:scale(1.15); }
}
/* Signup form: two fields side-by-side, hint text, remember-me, step switcher, password rules */
.gate-row { display:flex; gap:12px; }
.gate-row .gate-field { flex:1; }
.gate-hint { display:block; font-size:12px; color:#9CA3AF; margin-top:4px; }
.gate-row-between { display:flex; align-items:center; justify-content:space-between; margin:-4px 0 14px; }
.gate-checkbox { display:flex; align-items:center; gap:8px; font-size:13px; color:#374151; cursor:pointer; user-select:none; }
.gate-checkbox input { width:14px; height:14px; accent-color:#6366F1; cursor:pointer; margin:0; }
.gate-switch-line { text-align:center; font-size:13px; color:#6B7280; margin-top:14px; }
.gate-link { color:#6366F1; text-decoration:none; font-weight:500; cursor:pointer; font-size:14px; }
.gate-link:hover { text-decoration:underline; }
.gate-pw-rules { list-style:none; padding:0; margin:8px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; }
.gate-pw-rules li { font-size:12px; color:#9CA3AF; padding-left:16px; position:relative; line-height:1.4; }
.gate-pw-rules li::before { content:"○"; position:absolute; left:0; top:0; color:#D4D4D0; font-size:11px; }
.gate-pw-rules li.ok { color:#10B981; }
.gate-pw-rules li.ok::before { content:"✓"; color:#10B981; }
#additional-media-upload-trigger{
  border: 1px dashed #8d8d8d;
  margin: 10px;
  padding: 4px 5px;
  border-radius: 5px;
}
.column-header-actions{
  display: flex;
  gap: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Column management UI (backend-wired): create / rename / recolor /
   delete + reorder arrow buttons + 3-dot menu + hover-visible controls.
   Kept in a single block near the end of <style> so it overrides any
   earlier `.column-add-btn` rules without ambiguity.
   ══════════════════════════════════════════════════════════════════════ */

/* Delete (✕) button on internal card comments. Hover-only, backend-persisted only. */
.comment-item { position: relative; }
.comment-delete-btn {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; padding: 0;
  border: none; background: transparent;
  color: #9CA3AF; font-size: 16px; line-height: 1;
  cursor: pointer; border-radius: 4px;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.comment-item:hover .comment-delete-btn { opacity: 1; }
.comment-delete-btn:hover { background: #FEE2E2; color: #DC2626; }

/* Public share viewer — visible only when the URL hash is #share/<token>.
   The .public-share class is added to <html> by an early <head> script; we
   hide everything at the top level of <body> except the public viewer. */
html.public-share, html.public-share body { background: #F9FAFB; min-height: 100vh; }
html.public-share body > *:not(#public-share-view):not(script):not(style) { display: none !important; }

/* Invitation accept page — same "replace the world" pattern as public share */
html.invite-accept, html.invite-accept body { background: #F9FAFB; min-height: 100vh; }
html.invite-accept body > *:not(#invite-accept-view):not(script):not(style) { display: none !important; }
html.invite-accept #invite-accept-view { display: block !important; min-height: 100vh; }

.ia-shell        { min-height: 100vh; display: flex; flex-direction: column; }
.ia-header       { padding: 18px 28px; border-bottom: 1px solid #E8E8E5; background: #FFFFFF; }
.ia-brand        { font-size: 15px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.2px; }
.ia-main         { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.ia-loading      { font-size: 14px; color: #6B7280; }
.ia-error, .ia-form, .ia-done {
  width: 100%; max-width: 420px; background: #FFFFFF;
  border: 1px solid #E8E8E5; border-radius: 12px; padding: 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.ia-title        { margin: 0 0 6px 0; font-size: 20px; font-weight: 600; color: #0F0F0F; line-height: 1.3; }
.ia-title span   { color: #4338CA; }
.ia-sub          { margin: 0 0 20px 0; font-size: 13px; color: #6B7280; }
.ia-error-msg    { font-size: 13px; color: #6B7280; margin: 0; }
.ia-hint         { display: block; font-size: 12px; color: #9CA3AF; margin: 4px 0 0; }
.ia-field        { display: block; margin-bottom: 14px; }
.ia-label        { display: block; font-size: 12px; font-weight: 500; color: #374151; margin-bottom: 4px; }
.ia-input        {
  width: 100%; padding: 8px 10px; border: 1px solid #D4D4D0; border-radius: 6px;
  font-size: 13px; color: #0F0F0F; background: #FFFFFF; box-sizing: border-box;
}
.ia-input:focus  { outline: none; border-color: #6366F1; }
.ia-form-err     { margin: 4px 0 12px; font-size: 12px; color: #B91C1C; }
.ia-submit       {
  width: 100%; padding: 10px 14px; border: 1px solid #171717; border-radius: 6px;
  background: #171717; color: #FFFFFF; font-size: 13px; font-weight: 500; cursor: pointer;
}
.ia-submit:hover:not(:disabled) { background: #374151; }
.ia-submit:disabled { opacity: 0.6; cursor: default; }
.ia-footer       { padding: 14px 28px; font-size: 12px; color: #9CA3AF; text-align: center; border-top: 1px solid #F3F3F1; }

#public-share-view { min-height: 100vh; }
.ps-shell { max-width: 800px; margin: 0 auto; padding: 24px; }
.ps-header  { padding: 16px 0; border-bottom: 1px solid #E8E8E5; margin-bottom: 24px; }
.ps-brand   { font-size: 18px; font-weight: 700; color: #171717; }
.ps-loading { text-align: center; padding: 80px 0; color: #6B7280; font-size: 14px; }
.ps-error   { text-align: center; padding: 80px 0; color: #DC2626; font-size: 14px; }
.ps-card { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.ps-card-title { font-size: 24px; font-weight: 600; color: #171717; margin: 0 0 12px; line-height: 1.3; }
.ps-status {
  display: inline-block; padding: 4px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 500; margin-bottom: 16px; text-transform: capitalize;
  background: #F3F4F6; color: #4B5563;
}
.ps-status-approved       { background: #D1FAE5; color: #065F46; }
.ps-status-rejected       { background: #FEE2E2; color: #991B1B; }
.ps-status-needs_changes  { background: #FEF3C7; color: #92400E; }
.ps-status-pending_approval { background: #E0E7FF; color: #3730A3; }
.ps-caption { font-size: 14px; color: #374151; line-height: 1.65; margin-bottom: 22px; white-space: pre-wrap; }
.ps-section-label { font-size: 12px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 10px; }
.ps-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ps-media-item { position: relative; background: #F3F4F6; border-radius: 8px; overflow: hidden; min-height: 120px; }
.ps-media-item img, .ps-media-item video { width: 100%; height: auto; display: block; }
.ps-media-download { display: block; padding: 20px; text-align: center; color: #6366F1; font-size: 13px; text-decoration: none; }
.ps-media-download:hover { background: #E0E7FF; }
.ps-platforms { margin-bottom: 8px; }
.ps-plat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 12px 3px 3px; border-radius: 9999px;
  background: #F3F4F6; color: #374151;
  font-size: 12px; margin: 0 6px 8px 0;
  vertical-align: middle;
}
.ps-plat-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.ps-plat-icon svg { display: block; }
.ps-plat-icon-init { font-size: 11px; font-weight: 600; }
.ps-plat-label  { color: #374151; }
.ps-plat-format { color: #9CA3AF; }
.ps-platform-caption { padding: 10px 12px; background: #F9FAFB; border-radius: 6px; font-size: 13px; color: #4B5563; margin-bottom: 12px; white-space: pre-wrap; }
.ps-footer { text-align: center; padding: 32px 0 16px; font-size: 12px; color: #9CA3AF; }

/* Share-link dialog — appended to body on demand, removed on close. */
.share-link-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.share-link-modal {
  background: #fff; border-radius: 10px;
  width: 100%; max-width: 460px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  font-family: inherit;
}
.share-link-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #E8E8E5;
}
.share-link-title { font-size: 15px; font-weight: 600; color: #171717; }
.share-link-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: #9CA3AF; padding: 0 4px;
}
.share-link-close:hover { color: #171717; }
.share-link-body { padding: 18px; }
.share-link-desc { font-size: 13px; color: #4B5563; margin: 0 0 12px; }
.share-link-input {
  width: 100%; padding: 9px 12px;
  border: 1px solid #D4D4D0; border-radius: 7px;
  font-size: 13px; color: #171717;
  background: #F9FAFB; outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.share-link-input:focus { border-color: #6366F1; }
.share-link-meta { font-size: 12px; color: #6B7280; margin-top: 8px; }
.share-link-warn { font-size: 12px; color: #B45309; margin: 10px 0 0; }
.share-link-ft {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px 16px;
}
.share-link-copy, .share-link-done {
  padding: 8px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
}
.share-link-copy { background: #171717; color: #fff; }
.share-link-copy:hover { background: #262626; }
.share-link-done { background: #fff; border-color: #D4D4D0; color: #374151; }
.share-link-done:hover { background: #F9FAFB; }

/* Share-link manager — list + revoke + create-new. Same visual language as
   .share-link-* but wider to accommodate the list. */
.share-mgmt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.share-mgmt-modal {
  background: #fff; border-radius: 10px;
  width: 100%; max-width: 540px; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  font-family: inherit;
}
.share-mgmt-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #E8E8E5;
}
.share-mgmt-title { font-size: 15px; font-weight: 600; color: #171717; }
.share-mgmt-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: #9CA3AF; padding: 0 4px;
}
.share-mgmt-close:hover { color: #171717; }
.share-mgmt-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.share-mgmt-desc { font-size: 13px; color: #4B5563; margin: 0 0 14px; }
.share-mgmt-loading, .share-mgmt-empty { font-size: 13px; color: #6B7280; text-align: center; padding: 24px 0; }
.share-mgmt-error {
  font-size: 12px; color: #DC2626;
  background: #FEE2E2; border-radius: 6px;
  padding: 8px 10px; margin: 6px 0 10px;
}
.share-mgmt-list { display: flex; flex-direction: column; gap: 8px; }
.share-mgmt-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E8E8E5; border-radius: 8px;
}
.share-mgmt-item-revoked { opacity: 0.6; }
.share-mgmt-item-main { flex: 1; min-width: 0; }
.share-mgmt-item-title { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.share-mgmt-item-status {
  display: inline-block; padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 500; text-transform: capitalize;
  background: #F3F4F6; color: #4B5563;
}
.share-mgmt-item-status-active  { background: #D1FAE5; color: #065F46; }
.share-mgmt-item-status-revoked { background: #FEE2E2; color: #991B1B; }
.share-mgmt-item-status-expired { background: #FEF3C7; color: #92400E; }
.share-mgmt-item-expires { font-size: 12px; color: #6B7280; }
.share-mgmt-item-sub { font-size: 11px; color: #9CA3AF; }
.share-mgmt-item-revoke {
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid #FCA5A5; background: #fff; color: #DC2626;
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.share-mgmt-item-revoke:hover { background: #FEE2E2; }
.share-mgmt-item-revoke:disabled { opacity: 0.5; cursor: default; }
.share-mgmt-ft {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px 16px; border-top: 1px solid #E8E8E5;
}
.share-mgmt-new {
  padding: 8px 14px; border-radius: 7px;
  border: 1px dashed #6366F1; background: transparent; color: #6366F1;
  font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.share-mgmt-new:hover { background: #F9F9FF; }
.share-mgmt-new:disabled { opacity: 0.5; cursor: default; }
.share-mgmt-done {
  padding: 8px 14px; border-radius: 7px;
  border: 1px solid #D4D4D0; background: #fff; color: #374151;
  font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.share-mgmt-done:hover { background: #F9FAFB; }

/* Workspace-role gates. body.wsrole-<role> is set in board-sync.js once
   loadBoard resolves. Backend already 403s these actions for viewers and
   workspace-role clients (require_editor / require_portal_actor); the
   rules below just stop the UI from inviting a dead-end click.
   Rules 2 + 3 from the privilege audit. */

/* Rule 2 — column reorder arrows, comment Send row, and the drag cursor
   on any reorder-draggable are all editor+ only. Client-workspace-role
   users never land on this shell in normal flow (they route to portal),
   but the class is included for defense-in-depth if the URL is forced. */
body.wsrole-viewer .column-move-btn,
body.wsrole-client .column-move-btn { display: none !important; }

body.wsrole-viewer #drawer-input-row,
body.wsrole-client #drawer-input-row { display: none !important; }

body.wsrole-viewer .content-card[draggable="true"],
body.wsrole-viewer .tsk-board-card[draggable="true"],
body.wsrole-viewer .tsk-row[draggable="true"],
body.wsrole-viewer .tsk-subtask-item[draggable="true"],
body.wsrole-client .content-card[draggable="true"],
body.wsrole-client .tsk-board-card[draggable="true"],
body.wsrole-client .tsk-row[draggable="true"],
body.wsrole-client .tsk-subtask-item[draggable="true"] { cursor: default; }

/* Rule 3 — portal decision buttons require client/editor/admin (viewer is
   blocked). Viewers never reach portal.js in normal flow, but if they
   force-load the portal these controls must not appear. */
body.wsrole-viewer .apv-btn-approve,
body.wsrole-viewer .apv-btn-edits,
body.wsrole-viewer .apv-btn-reject,
body.wsrole-viewer .cp-approve-btn,
body.wsrole-viewer .cp-changes-btn,
body.wsrole-viewer .cp-reject-btn,
body.wsrole-viewer .apv-portal-comment-send { display: none !important; }

.comment-thread   { display: flex; flex-direction: column; gap: 6px; }
.comment-replies  { margin-left: 32px; display: flex; flex-direction: column; gap: 8px; }
.comment-replies:empty { display: none; }
.comment-reply-btn {
  margin-top: 2px; padding: 2px 8px;
  border: none; background: transparent;
  color: #6B7280; font-size: 11px; font-weight: 500;
  cursor: pointer; border-radius: 4px;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.comment-item:hover .comment-reply-btn { opacity: 1; }
.comment-reply-btn:hover { background: #F3F4F6; color: #171717; }
.comment-reply-target-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; margin: 0 12px 6px;
  background: #F3F4F6; border-radius: 6px;
  font-size: 11px; color: #6B7280;
}
.comment-reply-target-bar button {
  border: none; background: transparent; cursor: pointer;
  color: #DC2626; font-size: 11px; font-weight: 500; padding: 0;
}

/* Column header actions — the ◀ ▶ ⋮ + button row. Hidden until the lane
   is hovered, then fades in as a single grouped pill so the buttons read
   as one control cluster rather than four floating icons. */
.column-header-actions {
  display: flex; align-items: center; gap: 0;
  padding: 2px;
  background: transparent;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease;
}
.board-column:hover .column-header-actions {
  opacity: 1;
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.05);
}

.column-move-btn,
.column-menu-btn,
.column-header-actions .column-add-btn {
  width: 24px; height: 24px; padding: 0;
  border: none; background: transparent;
  color: #6B7280;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
  opacity: 1;
}
.column-move-btn { font-size: 9px; }
.column-move-btn:hover,
.column-menu-btn:hover,
.column-header-actions .column-add-btn:hover {
  background: #F3F4F6; color: #111827;
}
.column-move-btn:active,
.column-menu-btn:active,
.column-header-actions .column-add-btn:active { background: #E5E7EB; }
.column-move-btn:focus-visible,
.column-menu-btn:focus-visible,
.column-header-actions .column-add-btn:focus-visible {
  outline: 2px solid #6366F1; outline-offset: 1px;
}
.column-move-btn[disabled] { color: #D1D5DB; cursor: default; background: transparent; }
.column-move-btn[disabled]:hover { background: transparent; color: #D1D5DB; }

.column-header-actions .col-actions-sep {
  width: 1px; height: 14px;
  background: #E5E7EB;
  margin: 0 2px;
  align-self: center;
}

/* Inline rename input replacing the column title. */
.column-title-input {
  font-size: 16px; font-weight: 500; color: #0F0F0F;
  letter-spacing: -0.01em; line-height: 1.1;
  background: #FFFFFF;
  border: 1px solid #6366F1;
  border-radius: 6px;
  padding: 3px 8px; outline: none;
  width: 160px; max-width: 100%;
  font-family: inherit;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.column-title-input:focus { border-color: #4F46E5; }

/* 3-dot menu popover (rename / color / delete) + color-picker popover. */
.column-menu-popover {
  position: fixed; z-index: 3000;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.14),
    0 2px 6px rgba(17, 24, 39, 0.06);
  padding: 6px;
  min-width: 180px;
  display: flex; flex-direction: column;
  transform-origin: top right;
  animation: colMenuIn 0.12s ease-out;
  font-family: inherit;
}
@keyframes colMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.column-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px; text-align: left;
  border: none; background: transparent;
  font-size: 13px; font-weight: 500; color: #111827;
  border-radius: 6px; cursor: pointer;
  font-family: inherit;
  transition: background 0.1s ease, color 0.1s ease;
}
.column-menu-item:hover { background: #F3F4F6; }
.column-menu-item:active { background: #E5E7EB; }
.column-menu-item svg { flex-shrink: 0; opacity: 0.75; }
.column-menu-item:hover svg { opacity: 1; }
.column-menu-danger { color: #DC2626; }
.column-menu-danger:hover { background: #FEF2F2; color: #B91C1C; }
.column-menu-divider { height: 1px; background: #F3F4F6; margin: 4px 2px; }

/* Color-picker popover — swatch grid + custom picker. */
.column-color-popover { padding: 12px; min-width: 220px; }
.col-color-header {
  font-size: 11px; font-weight: 600; color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 8px 2px;
}
.col-color-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 10px;
}
.col-color-swatch {
  width: 36px; height: 36px; border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  cursor: pointer; padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.col-color-swatch:hover {
  transform: scale(1.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.12);
}
.col-color-swatch:focus-visible {
  outline: none; border-color: #6366F1;
}
.col-color-custom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 6px 2px;
  font-size: 12px; font-weight: 500; color: #6B7280;
  border-top: 1px solid #F3F4F6; margin-top: 4px;
}
.col-color-custom input[type="color"] {
  width: 36px; height: 36px; border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 0; background: transparent; cursor: pointer;
  overflow: hidden;
}
.col-color-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.col-color-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }

/* "+ New column" trailing tile. */
.board-column.board-column-add-new {
  background: transparent !important;
  border: 1px dashed #D1D5DB;
  min-height: 60px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 20px;
}
.column-add-new-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: transparent; border: none;
  color: #6B7280; font-size: 14px; font-weight: 500;
  cursor: pointer; border-radius: 6px;
  font-family: inherit;
  transition: color 0.1s, background 0.1s;
}
.column-add-new-btn:hover { color: #111827; background: #F3F4F6; }
.column-add-new-icon {
  font-size: 18px; line-height: 1;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────────
   Block 2 — extracted from index.html (was at source line 26541)
   ──────────────────────────────────────────────────────────────── */
  .content-card.is-archived,
  .cal-card.is-archived { display: none !important; }
  body.show-archived .content-card { display: none !important; }
  body.show-archived .cal-card     { display: none !important; }
  body.show-archived .content-card.is-archived,
  body.show-archived .cal-card.is-archived { display: block !important; opacity: 0.85; }
  body.show-archived .content-card.is-archived { background: #FAFAF9; }
  #archive-view-toggle.is-on {
    background: #171717 !important;
    color: #fff !important;
    border-color: #171717 !important;
  }
  #board-select-toggle.is-on {
    background: #171717 !important;
    color: #fff !important;
    border-color: #171717 !important;
  }

/* ────────────────────────────────────────────────────────────────
   Block 3 — extracted from index.html (was at source line 26645)
   ──────────────────────────────────────────────────────────────── */
/* ── Labels / Tags UI (board-sync CP4-tags) ───────────────────────── */
.card-tag-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap; line-height: 1.4;
}
.panel-tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 9px; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: #fff;
  cursor: default; user-select: none; white-space: nowrap;
}
.panel-tag-chip-x {
  display: flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(0,0,0,0.18); cursor: pointer;
  flex-shrink: 0; font-size: 11px; line-height: 1;
}
.panel-tag-chip-x:hover { background: rgba(0,0,0,0.35); }
.panel-tag-avail {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 5px;
  font-size: 12px; font-weight: 500; color: #fff;
  opacity: 0.42; cursor: pointer; white-space: nowrap;
  transition: opacity 0.12s;
}
.panel-tag-avail:hover { opacity: 1; }
.panel-tag-avail-label { display: inline-block; }
.panel-tag-menu-dot {
  margin-left: 4px;
  width: 16px; height: 16px; padding: 0;
  border: none; background: rgba(0,0,0,0.18);
  color: #fff; font-size: 12px; line-height: 1;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
  font-family: inherit;
}
.panel-tag-avail:hover .panel-tag-menu-dot { opacity: 1; }
.panel-tag-menu-dot:hover { background: rgba(0,0,0,0.4); }
.panel-tag-menu-dot:focus-visible {
  outline: 2px solid #fff; outline-offset: 1px; opacity: 1;
}
.panel-tag-new-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border: 1.5px dashed #D4D4D0;
  border-radius: 5px; font-size: 12px; color: #9CA3AF;
  cursor: pointer; background: none; white-space: nowrap;
  line-height: 1.6;
}
.panel-tag-new-btn:hover { border-color: #9CA3AF; color: #6B7280; }
.panel-tag-new-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.panel-tag-name-input {
  flex: 1; min-width: 90px; max-width: 160px;
  height: 28px; padding: 0 8px;
  border: 1px solid #E8E8E5; border-radius: 6px;
  font-size: 12px; outline: none; font-family: inherit;
}
.panel-tag-name-input:focus { border-color: #6366F1; }
.panel-tag-swatches { display: flex; gap: 4px; align-items: center; }
.panel-tag-swatch {
  width: 18px; height: 18px; border-radius: 4px;
  cursor: pointer; border: 2px solid transparent;
  box-sizing: border-box; transition: border-color 0.1s, transform 0.1s;
}
.panel-tag-swatch.selected { border-color: #171717; transform: scale(1.15); }
.panel-tag-create-btn {
  height: 28px; padding: 0 11px;
  background: #171717; color: #fff;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.panel-tag-create-btn:hover { background: #374151; }
.panel-tag-create-btn:disabled { opacity: 0.45; cursor: default; }
.cal-tag-dots { display: flex; gap: 3px; padding: 2px 8px 5px; flex-wrap: wrap; }
.cal-tag-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Project badge on board card face */
.card-project { margin-bottom: 4px; }
.card-project-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 500; color: #374151;
  white-space: nowrap; line-height: 1.4;
}
.card-project-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
/* Panel project selector */
.panel-project-none { font-size: 12px; color: #9CA3AF; font-style: italic; }
/* Settings — member wrap + role select */
.wsp-member-wrap { display: flex; flex-direction: column; }
.wsp-member-wrap:last-child .wsp-member-row { border-bottom: none; }
.wsp-member-err { font-size: 11px; color: #DC2626; padding: 2px 0 4px 48px; margin: 0; }
.wsp-role-select {
  font-size: 12px; font-family: inherit; color: #374151;
  background: #F9F9F8; border: 1px solid #E8E8E5;
  border-radius: 6px; padding: 4px 8px; cursor: pointer;
  outline: none; flex-shrink: 0;
}
.wsp-role-select:focus { border-color: #9CA3AF; }
.wsp-role-select:disabled { opacity: 0.5; cursor: not-allowed; }


/* ────────────────────────────────────────────────────────────────
   Notes view — internal grid-based sheet (localStorage-backed)
   ──────────────────────────────────────────────────────────────── */
.notes-wrap {
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.notes-header-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.notes-page-title {
  font-size: 22px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.01em;
  margin: 0;
}
.notes-scope {
  font-size: 12px;
  color: #9CA3AF;
}
.notes-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notes-status {
  font-size: 12px;
  color: #6B7280;
  padding: 4px 8px;
  border-radius: 4px;
  background: #F3F3F1;
  min-width: 56px;
  text-align: center;
}
.notes-status.is-saving { background: #FEF3C7; color: #92400E; }
.notes-status.is-dirty  { background: #DBEAFE; color: #1D4ED8; }
.notes-status.is-error  { background: #FEE2E2; color: #B91C1C; }
.notes-btn {
  background: #FFFFFF;
  color: #374151;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.notes-btn:hover { background: #F9F9F8; color: #0F0F0F; border-color: #D4D4D0; }
.notes-btn-ghost { color: #9CA3AF; }
.notes-btn-ghost:hover { color: #B91C1C; border-color: #FCA5A5; background: #FEF2F2; }

.notes-sheet-scroll {
  flex: 1;
  overflow: auto;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  background: #FFFFFF;
  min-height: 0;
}
.notes-sheet {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
  color: #0F0F0F;
}
.notes-sheet th,
.notes-sheet td {
  border-right: 1px solid #E8E8E5;
  border-bottom: 1px solid #E8E8E5;
  padding: 0;
  vertical-align: top;
}
.notes-sheet th:last-child,
.notes-sheet td:last-child { border-right: none; }
.notes-sheet tr:last-child td { border-bottom: none; }

/* Row-number gutter (first cell on every row) */
.notes-sheet .notes-rowhead {
  background: #FAFAF9;
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  width: 44px;
  min-width: 44px;
  user-select: none;
  padding: 6px 4px;
  position: sticky;
  left: 0;
  z-index: 1;
}
.notes-sheet thead .notes-rowhead {
  background: #F3F3F1;
  border-bottom: 1px solid #D4D4D0;
  z-index: 2;
}
.notes-sheet thead th {
  background: #F3F3F1;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
.notes-sheet .notes-cell {
  min-width: 180px;
  max-width: 320px;
  padding: 8px 10px;
  outline: none;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 32px;
}
.notes-sheet thead .notes-cell {
  min-height: 28px;
  padding: 8px 10px;
}
.notes-sheet .notes-cell:focus {
  background: #EFF6FF;
  box-shadow: inset 0 0 0 2px #3B82F6;
}
.notes-sheet .notes-cell:empty::before {
  content: attr(data-placeholder);
  color: #D4D4D0;
  pointer-events: none;
}

/* Per-row +/- circle controls in the gutter */
.notes-sheet .notes-rowhead { width: 76px; min-width: 76px; padding: 6px 6px; }
.notes-row-gutter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.notes-row-num {
  min-width: 18px;
  text-align: right;
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 500;
}
.notes-row-actions {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  visibility: hidden;
}
.notes-sheet tbody tr:hover .notes-row-actions,
.notes-sheet tbody tr:focus-within .notes-row-actions { visibility: visible; }

.notes-row-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #D4D4D0;
  background: #FFFFFF;
  color: #6B7280;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.notes-row-circle:hover { background: #F3F4F6; color: #0F0F0F; border-color: #9CA3AF; }
.notes-row-circle.notes-row-add:hover { color: #047857; border-color: #6EE7B7; background: #ECFDF5; }
.notes-row-circle.notes-row-remove:hover { color: #B91C1C; border-color: #FCA5A5; background: #FEF2F2; }
.notes-row-circle:disabled { opacity: 0.3; cursor: not-allowed; }
.notes-row-circle:disabled:hover { background: #FFFFFF; color: #6B7280; border-color: #D4D4D0; }

/* Per-column +/- circle controls in the header */
.notes-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 180px;
}
.notes-col-actions {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  visibility: hidden;
  padding-right: 6px;
  flex-shrink: 0;
}
.notes-sheet thead th:hover .notes-col-actions,
.notes-sheet thead th:focus-within .notes-col-actions { visibility: visible; }

/* @-mention picker for Owner column */
.notes-mention-menu {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  font-size: 13px;
}
.notes-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #0F0F0F;
}
.notes-mention-item:hover,
.notes-mention-item.is-active { background: #EFF6FF; }
.notes-mention-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #E0E7FF;
  color: #4338CA;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px;
  flex-shrink: 0;
}
.notes-mention-name { font-weight: 500; }
.notes-mention-email { color: #9CA3AF; font-size: 11px; margin-left: auto; }
.notes-mention-empty {
  padding: 8px 10px;
  color: #9CA3AF;
  font-size: 12px;
  text-align: center;
}

/* Status dropdown for Status column */
.notes-sheet .notes-cell[data-col-kind="status"] { cursor: pointer; }
.notes-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}
.notes-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.notes-status-menu {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  min-width: 220px;
  padding: 4px;
  font-size: 13px;
}
.notes-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #0F0F0F;
}
.notes-status-item:hover { background: #F3F4F6; }
.notes-status-item .notes-status-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.notes-status-item .notes-status-del {
  margin-left: auto;
  visibility: hidden;
  border: none;
  background: transparent;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.notes-status-item:hover .notes-status-del { visibility: visible; }
.notes-status-item .notes-status-del:hover { color: #B91C1C; }
.notes-status-item.is-clear { color: #9CA3AF; font-style: italic; }
.notes-status-divider {
  height: 1px;
  background: #E8E8E5;
  margin: 4px 0;
}
.notes-status-add {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  align-items: center;
}
.notes-status-add input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.notes-status-add input[type="text"]:focus { border-color: #3B82F6; }
.notes-status-add input[type="color"] {
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  background: #FFFFFF;
}
.notes-status-add button {
  padding: 4px 10px;
  background: #0F0F0F;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.notes-status-add button:hover { background: #262626; }

/* ────────────────────────────────────────────────────────────────
   Social accounts — /api/social-accounts CRUD UI
   Sits inside Settings → Connections tab, below the OAuth grid.
   ──────────────────────────────────────────────────────────────── */
.sa-section {
  /*margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E8E8E5;*/
}
.sa-section-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.sa-section-title { font-size: 15px; font-weight: 600; color: #0F0F0F; }
.sa-section-sub   { font-size: 12px; color: #6B7280; margin-top: 2px; max-width: 480px; }

.sa-add-form {
  display: grid;
  grid-template-columns: 150px 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.sa-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #0F0F0F;
  background: #FFFFFF;
  outline: none;
  min-width: 0;
}
.sa-input:focus { border-color: #6366F1; }
.sa-input::placeholder { color: #9CA3AF; }

.sa-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  color: #374151;
  background: #FFFFFF;
  transition: background 0.1s, color 0.1s, border-color 0.1s, opacity 0.1s;
}
.sa-btn:hover:not(:disabled) { background: #F9F9F8; color: #0F0F0F; border-color: #D4D4D0; }
.sa-btn:disabled { opacity: 0.5; cursor: default; }
.sa-btn-primary { background: #171717; border-color: #171717; color: #FFFFFF; }
.sa-btn-primary:hover:not(:disabled) { background: #374151; border-color: #374151; color: #FFFFFF; }
.sa-btn-danger { color: #B91C1C; border-color: #FCA5A5; }
.sa-btn-danger:hover:not(:disabled) { background: #FEF2F2; border-color: #F87171; color: #991B1B; }

.sa-form-err {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #B91C1C;
}

.sa-list { display: flex; flex-direction: column; gap: 8px; }
.sa-empty { font-size: 13px; color: #9CA3AF; padding: 12px 0; }

.sa-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  background: #FFFFFF;
}
.sa-row-icon {
  width: 32px; height: 32px; border-radius: 6px;
  color: #FFFFFF; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.sa-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-row-handle { font-size: 13px; font-weight: 500; color: #0F0F0F; }
.sa-row-meta { font-size: 12px; color: #6B7280; word-break: break-all; }

.sa-row-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600;
  background: #ECFDF5; color: #065F46;
}
.sa-row-status.is-inactive { background: #FEF3C7; color: #92400E; }

.sa-row-actions { display: flex; gap: 6px; }

.sa-details {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 12px;
  background: #FAFAF9;
  border-radius: 6px;
  border: 1px solid #E8E8E5;
  font-size: 12px;
  color: #374151;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 12px;
}
.sa-details dt { color: #6B7280; }
.sa-details dd { margin: 0; word-break: break-all; }

/* OAuth status pill shown inside the connect form */
.sa-oauth-status {
  font-size: 12px;
  color: #6B7280;
  align-self: center;
}
.sa-oauth-status.is-err { color: #B91C1C; }

/* Facebook page picker modal contents */
.sa-fb-picker-sub {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #6B7280;
}
.sa-fb-page-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.sa-fb-page-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  cursor: pointer;
  background: #FFFFFF;
}
.sa-fb-page-row:hover { background: #FAFAF9; }
.sa-fb-page-row:has(input:checked) { border-color: #1877F2; background: #EFF6FF; }
.sa-fb-page-name { font-size: 13px; font-weight: 500; color: #0F0F0F; }
.sa-fb-page-id   { font-size: 11px; color: #9CA3AF; }
.sa-fb-page-loading { font-size: 13px; color: #9CA3AF; padding: 12px 0; }

/* ────────────────────────────────────────────────────────────────
   Scheduled posts — /api/publish-jobs UI
   Sidebar nav → Content → Scheduled.
   ──────────────────────────────────────────────────────────────── */
.pj-wrap { padding: 24px 32px 32px; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pj-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pj-header-left { display: flex; align-items: baseline; gap: 12px; }
.pj-page-title { font-size: 22px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; margin: 0; }
.pj-scope { font-size: 12px; color: #9CA3AF; }
.pj-header-right { display: flex; gap: 8px; align-items: center; }

.pj-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.pj-chip {
  background: #F3F3F1; color: #374151; border: 1px solid transparent;
  border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.pj-chip:hover { background: #E8E8E5; }
.pj-chip-active { background: #171717; color: #FFFFFF; }

.pj-btn {
  height: 34px; padding: 0 14px;
  border: 1px solid #E8E8E5; border-radius: 6px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; color: #374151; background: #FFFFFF;
  transition: background 0.1s, color 0.1s, border-color 0.1s, opacity 0.1s;
}
.pj-btn:hover:not(:disabled) { background: #F9F9F8; color: #0F0F0F; border-color: #D4D4D0; }
.pj-btn:disabled { opacity: 0.5; cursor: default; }
.pj-btn-primary { background: #171717; border-color: #171717; color: #FFFFFF; }
.pj-btn-primary:hover:not(:disabled) { background: #374151; border-color: #374151; color: #FFFFFF; }
.pj-btn-ghost { background: transparent; border-color: transparent; color: #6B7280; }
.pj-btn-ghost:hover:not(:disabled) { background: #F3F3F1; color: #0F0F0F; }
.pj-btn-danger { color: #B91C1C; border-color: #FCA5A5; }
.pj-btn-danger:hover:not(:disabled) { background: #FEF2F2; border-color: #F87171; color: #991B1B; }

.pj-list-wrap { flex: 1; overflow: auto; border: 1px solid #E8E8E5; border-radius: 8px; background: #FFFFFF; min-height: 0; }
.pj-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #0F0F0F; }
.pj-table th, .pj-table td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid #F3F3F1;
}
.pj-table th {
  background: #FAFAF9; color: #6B7280; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #E8E8E5;
}
.pj-table tbody tr { cursor: pointer; }
.pj-table tbody tr:hover { background: #FAFAF9; }
.pj-table td { color: #374151; }
.pj-table td:last-child { text-align: right; white-space: nowrap; }

.pj-row-title { color: #0F0F0F; font-weight: 500; }
.pj-row-plat  {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px; color: #FFFFFF;
}
.pj-row-plat > svg { display: block; }

.pj-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pj-status-queued      { background: #EFF6FF; color: #1D4ED8; }
.pj-status-processing  { background: #FEF3C7; color: #92400E; }
.pj-status-published   { background: #ECFDF5; color: #065F46; }
.pj-status-failed      { background: #FEE2E2; color: #B91C1C; }
.pj-status-canceled    { background: #F3F3F1; color: #6B7280; }

.pj-empty   { padding: 24px 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
.pj-loading { padding: 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
.pj-error   { padding: 12px 16px; color: #B91C1C; font-size: 13px; background: #FEF2F2; border-top: 1px solid #FECACA; }

/* Modals (create + detail) */
.pj-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 15, 15, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pj-modal {
  background: #FFFFFF; border-radius: 10px;
  width: 100%; max-width: 480px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.pj-modal-lg { max-width: 640px; }
.pj-modal-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E8E8E5; }
.pj-modal-hd h3 { margin: 0; font-size: 15px; font-weight: 600; color: #0F0F0F; }
.pj-modal-close { background: transparent; border: none; font-size: 16px; color: #9CA3AF; cursor: pointer; padding: 4px 8px; line-height: 1; }
.pj-modal-close:hover { color: #374151; }
.pj-modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.pj-modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #E8E8E5; }
.pj-modal-err { color: #B91C1C; font-size: 12px; margin: 0; }

.pj-field { display: flex; flex-direction: column; gap: 4px; }
.pj-field-label { font-size: 12px; color: #6B7280; font-weight: 500; }
.pj-input {
  height: 34px; padding: 0 10px;
  border: 1px solid #E8E8E5; border-radius: 6px;
  font-size: 13px; font-family: inherit; color: #0F0F0F;
  background: #FFFFFF; outline: none;
}
.pj-input:focus { border-color: #6366F1; }
select.pj-input { padding-right: 6px; }

.pj-detail-grid {
  display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px;
  margin: 0; font-size: 13px;
}
.pj-detail-grid dt { color: #6B7280; }
.pj-detail-grid dd { margin: 0; color: #0F0F0F; word-break: break-all; }

.pj-detail-attempts { margin-top: 8px; }
.pj-detail-attempts-hd { font-size: 12px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.pj-attempt-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 8px;
  padding: 6px 8px; border: 1px solid #E8E8E5; border-radius: 6px;
  margin-bottom: 6px; font-size: 12px; color: #374151;
}
.pj-attempt-status-published { color: #065F46; font-weight: 600; }
.pj-attempt-status-failed    { color: #B91C1C; font-weight: 600; }
.pj-attempt-err              { color: #B91C1C; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }

/* ────────────────────────────────────────────────────────────────
   Analytics — /api/analytics/* — Tracked posts / Accounts / Reports
   Lives inside #view-analytics, above the legacy mock overview.
   ──────────────────────────────────────────────────────────────── */
.al-section { padding: 20px 24px 24px; }
.al-tabbar {
  display: flex; gap: 4px;
  border-bottom: 1px solid #E8E8E5;
  margin-bottom: 16px;
}
.al-tab {
  background: transparent; border: none;
  padding: 8px 14px 10px; font-size: 13px; font-weight: 500;
  color: #6B7280; cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}
.al-tab:hover { color: #374151; }
.al-tab-active { color: #0F0F0F; border-bottom-color: #171717; }

.al-pane-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.al-pane-title { font-size: 15px; font-weight: 600; color: #0F0F0F; }

.al-btn {
  height: 32px; padding: 0 12px;
  border: 1px solid #E8E8E5; border-radius: 6px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; color: #374151; background: #FFFFFF;
  transition: background 0.1s, color 0.1s, border-color 0.1s, opacity 0.1s;
}
.al-btn:hover:not(:disabled) { background: #F9F9F8; color: #0F0F0F; border-color: #D4D4D0; }
.al-btn:disabled { opacity: 0.5; cursor: default; }
.al-btn-primary { background: #171717; border-color: #171717; color: #FFFFFF; }
.al-btn-primary:hover:not(:disabled) { background: #374151; border-color: #374151; }
.al-btn-ghost { background: transparent; border-color: transparent; color: #6B7280; }
.al-btn-ghost:hover:not(:disabled) { background: #F3F3F1; color: #0F0F0F; }
.al-btn-danger { color: #B91C1C; border-color: #FCA5A5; }
.al-btn-danger:hover:not(:disabled) { background: #FEF2F2; border-color: #F87171; color: #991B1B; }

.al-actions-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.al-inline-lbl { font-size: 12px; color: #6B7280; }

.al-input {
  height: 32px; padding: 0 8px;
  border: 1px solid #E8E8E5; border-radius: 6px;
  font-size: 13px; font-family: inherit; color: #0F0F0F;
  background: #FFFFFF; outline: none; min-width: 0;
}
.al-input:focus { border-color: #6366F1; }
.al-input-date { min-width: 150px; }
select.al-input { padding-right: 6px; }

.al-table-wrap {
  border: 1px solid #E8E8E5; border-radius: 8px;
  background: #FFFFFF; overflow: hidden;
}
.al-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #0F0F0F; }
.al-table th, .al-table td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid #F3F3F1;
}
.al-table th {
  background: #FAFAF9; color: #6B7280; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid #E8E8E5;
}
.al-table tbody tr { cursor: pointer; }
.al-table tbody tr:hover { background: #FAFAF9; }
.al-table td { color: #374151; }
.al-table td:last-child { text-align: right; white-space: nowrap; }
.al-table tbody tr:last-child td { border-bottom: none; }

.al-empty   { padding: 24px 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
.al-loading { padding: 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
.al-error   { padding: 12px 16px; color: #B91C1C; font-size: 13px; background: #FEF2F2; border-top: 1px solid #FECACA; }

.al-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.al-status-pending   { background: #FEF3C7; color: #92400E; }
.al-status-generated { background: #ECFDF5; color: #065F46; }
.al-status-failed    { background: #FEE2E2; color: #B91C1C; }

.al-row-plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px; color: #FFFFFF;
}
.al-row-plat > svg { display: block; }

.al-chart-wrap {
  background: #FFFFFF; border: 1px solid #E8E8E5; border-radius: 8px;
  padding: 16px; position: relative; min-height: 220px;
}
.al-chart-wrap canvas { max-height: 320px; }

/* Detail-modal chart header row */
.al-detail-chart-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600;
  color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 4px 0 8px;
}

.al-detail-grid {
  display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px;
  margin: 0 0 12px 0; font-size: 13px;
}
.al-detail-grid dt { color: #6B7280; }
.al-detail-grid dd { margin: 0; color: #0F0F0F; word-break: break-all; }

.al-snap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  align-items: end;
}
.al-snap-grid > label { min-width: 0; }
.al-snap-grid > button { grid-column: 3 / 4; justify-self: end; height: 34px; }

/* Modals */
.al-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 15, 15, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.al-modal {
  background: #FFFFFF; border-radius: 10px;
  width: 100%; max-width: 480px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.al-modal-xl { max-width: 780px; }
.al-modal-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E8E8E5; }
.al-modal-hd h3 { margin: 0; font-size: 15px; font-weight: 600; color: #0F0F0F; }
.al-modal-close { background: transparent; border: none; font-size: 16px; color: #9CA3AF; cursor: pointer; padding: 4px 8px; line-height: 1; }
.al-modal-close:hover { color: #374151; }
.al-modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.al-modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #E8E8E5; }
.al-modal-err { color: #B91C1C; font-size: 12px; margin: 0; }
.al-field { display: flex; flex-direction: column; gap: 4px; }
.al-field-label { font-size: 12px; color: #6B7280; font-weight: 500; }

/* Legacy mock overview banner */
.an-mock-legacy {
  margin: 12px 24px 0;
  padding: 12px;
  border: 1px dashed #E8E8E5;
  border-radius: 8px;
  background: #FAFAF9;
}
.al-legacy-hd {
  font-size: 11px; font-weight: 600; color: #9CA3AF;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 0 8px;
}

.al-modal-note {
  margin: 4px 0 0; padding: 8px 10px;
  background: #F3F3F1; border-radius: 6px;
  font-size: 12px; color: #6B7280;
}

/* ────────────────────────────────────────────────────────────────
   Calendar + button dropdown — pick Content or Task
   ──────────────────────────────────────────────────────────────── */
.cal-add-menu {
  position: fixed;
  z-index: 10000;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 140px;
  padding: 4px;
  font-family: inherit;
}
.cal-add-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  color: #171717;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cal-add-menu-item:hover { background: #F3F3F1; }
.cal-add-menu-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6B7280;
}

/* ────────────────────────────────────────────────────────────────
   Calendar right-side task panel — real /api/tasks data with
   checkbox toggle for status.
   ──────────────────────────────────────────────────────────────── */
.cal-with-tasks {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}
.cal-with-tasks > .calendar { flex: 1; min-width: 0; }

.cal-task-panel {
  width: 300px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  padding: 14px 12px 12px;
  overflow-y: auto;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  font-family: inherit;
}
.cal-task-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-task-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F0F0F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-task-refresh {
  background: transparent;
  border: 1px solid #E8E8E5;
  color: #6B7280;
  width: 24px; height: 24px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.cal-task-refresh:hover { background: #F9F9F8; color: #0F0F0F; }

.cal-task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-task-empty {
  padding: 12px 4px;
  color: #9CA3AF;
  font-size: 12px;
  text-align: center;
}
.cal-task-err {
  color: #B91C1C;
  font-size: 12px;
  margin: 8px 0 0;
}

.cal-task-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.cal-task-row:hover { background: #FAFAF9; }
.cal-task-check {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1.5px solid #D4D4D0;
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.1s, border-color 0.1s;
}
.cal-task-check:hover { border-color: #9CA3AF; }
.cal-task-row.is-done .cal-task-check {
  background: #10B981;
  border-color: #10B981;
}
.cal-task-row.is-done .cal-task-check::after {
  content: "";
  width: 8px; height: 5px;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: translateY(-1px) rotate(-45deg);
}
.cal-task-body { flex: 1; min-width: 0; }
.cal-task-title {
  font-size: 13px;
  color: #0F0F0F;
  line-height: 1.35;
  word-break: break-word;
}
.cal-task-row.is-done .cal-task-title {
  color: #9CA3AF;
  text-decoration: line-through;
}
.cal-task-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
  font-size: 11px;
  color: #9CA3AF;
}
.cal-task-priority {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.cal-task-priority-urgent { background: #DC2626; }
.cal-task-priority-high   { background: #F59E0B; }
.cal-task-priority-medium { background: #3B82F6; }
.cal-task-priority-low    { background: #9CA3AF; }

/* Calendar new-task modal — 3-column meta row (assignee/date/priority) */
.cal-task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-task-title-row .cal-task-priority-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.cal-task-title-row .al-input { flex: 1; min-width: 0; }
.cal-task-modal-meta {
  display: grid;
  grid-template-columns: 1fr 140px 130px;
  gap: 8px;
}

/* ────────────────────────────────────────────────────────────────
   Notes (notepad) — vertical tabs + full-length textarea, one
   tab = one note. Storage: notepad:tabs:<workspaceId>.
   ──────────────────────────────────────────────────────────────── */
.np-wrap {
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.np-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.np-header-left  { display: flex; align-items: baseline; gap: 12px; }
.np-page-title   { font-size: 22px; font-weight: 600; color: #0F0F0F; letter-spacing: -0.01em; margin: 0; }
.np-scope        { font-size: 12px; color: #9CA3AF; }
.np-status       {
  font-size: 12px; color: #6B7280;
  padding: 4px 8px; border-radius: 4px;
  background: #F3F3F1; min-width: 56px; text-align: center;
}
.np-status.is-saving { background: #FEF3C7; color: #92400E; }
.np-status.is-error  { background: #FEE2E2; color: #B91C1C; }

.np-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 1fr auto;
  gap: 12px;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
}

/* Tabs column */
.np-tabs {
  grid-column: 1;
  grid-row: 1;
  overflow-y: auto;
  padding: 8px;
  border-right: 1px solid #E8E8E5;
  background: #FAFAF9;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.np-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 8px 8px 10px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  text-align: left;
  font-family: inherit;
  min-width: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.np-tab:hover { background: #F3F3F1; color: #0F0F0F; }
.np-tab.is-active {
  background: #000;
  border-color: #E8E8E5;
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.np-tab-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-tab-del {
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: transparent;
  border: none;
  color: #9CA3AF;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  display: none;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.np-tab.is-active .np-tab-del,
.np-tab:hover     .np-tab-del { display: inline-flex; }
.np-tab-del:hover { color: #B91C1C; background: #FEF2F2; }

.np-add-tab {
  grid-column: 1;
  grid-row: 2;
  border: none;
  border-top: 1px solid #E8E8E5;
  background: #FAFAF9;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color 0.1s, background 0.1s;
}
.np-add-tab:hover { color: #0F0F0F; background: #F3F3F1; }

/* Editor pane */
.np-editor {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 16px 16px;
}
.np-title {
  font-size: 18px;
  font-weight: 600;
  color: #0F0F0F;
  border: none;
  outline: none;
  padding: 0 0 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #F3F3F1;
  font-family: inherit;
  background: transparent;
}
.np-title:focus { border-bottom-color: #6366F1; }
.np-title::placeholder { color: #D4D4D0; }

.np-textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  line-height: 1.6;
  color: #171717;
  font-family: inherit;
  background: transparent;
  padding: 0;
}
.np-textarea::placeholder { color: #9CA3AF; }

.np-empty {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* Collapsible workspaces section header + +/− toggle */
.ws-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
  cursor: pointer;
}
.ws-collapse-btn {
  width: 20px; height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: #FFFFFF;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

/* Collapsed: hide every workspace item except the .active one. */
.workspace-list.is-collapsed .workspace-list-item:not(.active) { display: none; }

/* Loading step inside #auth-gate — shown on first paint until auth bootstrap
   resolves so users don't see a flash of the login form. */
.gate-box-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 180px;
  padding: 32px 40px;
}
.gate-spinner {
  width: 32px; height: 32px;
  border: 3px solid #E8E8E5;
  border-top-color: #171717;
  border-radius: 50%;
  animation: gate-spin 0.85s linear infinite;
}
.gate-loading-text {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
}
@keyframes gate-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sa-oauth-status-wrap{
  padding: 10px 0;
}