/* ────────────────────────────────────────────────────────────────
   Block 1 — extracted from index.html (was at source line 7)
   ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap');


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Geist", -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: 260px;
    min-width: 260px;


  height: 100vh;
  background: #FFFFFF;
  border-right: 1px solid #DADADA;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-top {
  display: flex;
  align-items: center;
  gap: 8px;
   border-bottom: 1px solid #DADADA;
}
.sidebar-top .sidebar-collapse-btn { width: auto; flex-shrink: 0; }

.sidebar-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:20px 0;
  min-width: 0;
}
.sidebar-logo img {
      height: 41px;  
  width: auto;
  max-width: 100%;
  display: block;
}
.sidebar.sidebar-collapsed .sidebar-logo { display: none; }
.sidebar-logo h2 {
  font-weight: bold;
  font-size: 28px;
}

.sidebox{
  border-bottom: 1px solid #C6DECD;
  padding: 16px 27px 20px 23px;
}
.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-item {
             display: flex;
    align-items: center;
    gap: 8px;
    padding:5px 15px 5px 5px;
    margin: 10px 0px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    
    border: 1px solid #EDEDF3;
     border-radius: 8px;
background: #E9F8ED;
}
.workspace-list-item:nth-child(1){ margin-top:0; }
.workspace-list-item:hover, 
.workspace-list-item.active {
    background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
}
.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: 16px;
    font-weight: 600;
    color: #16141F;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workspace-list-item:hover .wsp-list-name,
.workspace-list-item.active .wsp-list-name {   
    color: #FFF; }
.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: 11px;
    font-weight: 600;
    color:#0090CF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding:0px 0 13px 18px;
    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 {
  border-radius: 8px;
  color: #16141F;
 background: linear-gradient(90deg, rgba(132, 214, 62, 0.30) 0%, rgba(1, 148, 213, 0.30) 95.88%);

  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: 15px;
    line-height: 1.25;
    color: #16141F;
    font-weight: 500;
}

.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: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #FEFEFF;
    background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
}

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

.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: 82px;
    min-height: 82px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 40px;
    gap: 8px;
    border-bottom: 1px solid #C6DECD;
}

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

.page-title {
     font-size: 20px;
    color: #16141F;
    font-weight: 500;
}
.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 svg {
    vertical-align: middle;
    margin-bottom: 3px;
}
.btn-secondary {
   
 cursor: pointer;
    border-radius: 10px;
    border: 1px solid #E1E4EC;
    background: #FDFDFE;
    color: #2C2A33;
    font-size: 14px;
    font-weight: 600;
    transition: border-color 0.1s, background 0.1s;
    line-height: 1;
    min-height: 41px;
    padding: 0 15px;
}
.btn-secondary:hover {
  background: #F9F9F8;
  border-color: #D4D4D0;
}

.btn-primary {
      padding: 14px 16px;
  font-size: 14px;

  font-weight: 600;
  color: #FFFFFF; 
  border: none; 
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
  line-height: 1;

  border-radius: 11px;
background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
box-shadow: 0 4px 24px 0 rgba(107, 202, 91, 0.60);
}
.btn-primary:hover {
  opacity: 0.85;
}
.menu_click{
  display: none;
}

/* ── Content Area ── */
.content-area {
  flex: 1;
  overflow: auto;
  background: #FFFFFF;
  padding:34px 40px;
  background: linear-gradient(180deg, #E6F7EB 0%, #FFF 100%);
}

.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:auto; 
  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;
  border-radius: 11px;
background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
box-shadow: 0 4px 24px 0 rgba(107, 202, 91, 0.60);
  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.is-selected { border: 2px solid #6366F1; box-shadow: 0 0 0 1px rgba(99,102,241,0.25); }
.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 (full-page) ── */
.infp-wrap {
  padding: 20px 24px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.infp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6B7280;
}
.infp-breadcrumb-back {
  color: #6B7280;
  text-decoration: none;
  cursor: pointer;
}
.infp-breadcrumb-back:hover { color: #0F0F0F; }
.infp-breadcrumb-sep { color: #D4D4D0; }
.infp-breadcrumb-current { color: #0F0F0F; font-weight: 500; }
.infp-breadcrumb-right { margin-left: auto; color: #9CA3AF; font-size: 13px; }

.infp-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  padding: 20px;
}
.infp-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}
.infp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.infp-card-header .infp-card-title { margin: 0; }
.infp-card-aside { font-size: 13px; color: #9CA3AF; }

.infp-header-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.infp-header-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.infp-avatar-lg {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}
.infp-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.infp-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.infp-name {
  font-size: 24px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
}
.infp-subline {
  font-size: 14px;
  color: #6B7280;
}
.infp-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.infp-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.infp-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.infp-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.infp-btn:hover { background: #F9F9F8; border-color: #D4D4D0; }
.infp-btn-primary {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 7px;
}

.infp-platforms-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.infp-plat-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.infp-plat-label {
  font-size: 12px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.infp-plat-handle {
  font-size: 14px;
  color: #0F0F0F;
}
.infp-plat-count {
  font-size: 13px;
  color: #6B7280;
  margin-top: 4px;
}
.infp-plat-count strong {
  font-size: 20px;
  font-weight: 600;
  color: #0F0F0F;
  letter-spacing: -0.02em;
}

.infp-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
.infp-col-left,
.infp-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.infp-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.infp-contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.infp-contact-key {
  font-size: 12px;
  font-weight: 500;
  color: #9CA3AF;
}
.infp-contact-val {
  font-size: 14px;
  color: #0F0F0F;
}

.infp-rates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.infp-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: #0F0F0F;
}
.infp-rate-val {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.infp-rate-val-plain {
  font-size: 14px;
  color: #0F0F0F;
  font-weight: 500;
}
.infp-content-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F3F3F1;
}
.infp-ctag {
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: #F3F3F1;
  color: #374151;
}

.infp-collabs-table {
  width: 100%;
  border-collapse: collapse;
}
.infp-collabs-table th {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 10px 0;
  text-align: left;
  border-bottom: 1px solid #F3F3F1;
}
.infp-collabs-table td {
  padding: 12px 0;
  font-size: 14px;
  color: #0F0F0F;
  border-bottom: 1px solid #F3F3F1;
}
.infp-collabs-table tbody tr:last-child td { border-bottom: none; }
.infp-collab-brand { font-weight: 500; }

.infp-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.infp-thumb {
  aspect-ratio: 1 / 1.1;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.infp-note-label {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 6px;
}
.infp-note-ta {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #E8E8E5;
  border-radius: 7px;
  outline: none;
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
  color: #0F0F0F;
  background: #FAFAF9;
  transition: border-color 0.1s, background 0.1s;
  margin-bottom: 16px;
}
.infp-note-ta:focus { background: #FFFFFF; border-color: #D4D4D0; }
.infp-note-ta::placeholder { color: #9CA3AF; }

.infp-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.infp-activity-row {
  display: flex;
  gap: 14px;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}
.infp-activity-date {
  color: #9CA3AF;
  font-size: 13px;
  min-width: 44px;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .infp-grid { grid-template-columns: 1fr; }
  .infp-platforms-row { grid-template-columns: 1fr; }
  .infp-content-grid { grid-template-columns: repeat(2, 1fr); }
  .infp-header-card { flex-direction: column; align-items: stretch; }
}

/* ── 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;
}

/* ── 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; }

/* Compact priority pill used on board cards. Same color family as the
   dot, but wide enough to be readable in tight card headers. */
.tsk-priority-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  line-height: 1.35;
}

/* Left-edge priority stripe on list rows + board cards. Follows the
   same palette as the dot so the two reinforce each other. Skips
   'medium' + 'low' on rows to keep the default look calm — only the
   attention-worthy priorities get the stripe. Board cards get a stripe
   for every priority since a card without context needs the signal. */
.tsk-row[data-priority="urgent"] { border-left: 3px solid #DC2626; padding-left: 10px; }
.tsk-row[data-priority="high"]   { border-left: 3px solid #D97706; padding-left: 10px; }

.tsk-board-card[data-priority="urgent"] { border-left: 3px solid #DC2626; }
.tsk-board-card[data-priority="high"]   { border-left: 3px solid #D97706; }
.tsk-board-card[data-priority="medium"] { border-left: 3px solid #6366F1; }
.tsk-board-card[data-priority="low"]    { border-left: 3px solid #9CA3AF; }

/* Colored filter pills: each priority pill carries its own color so the
   toolbar reads at a glance even when nothing is active. Active state
   fills the pill with that color; inactive state keeps a light tint. */
.tsk-filter-pill[data-priority="urgent"]                 { color: #DC2626; }
.tsk-filter-pill[data-priority="high"]                   { color: #D97706; }
.tsk-filter-pill[data-priority="medium"]                 { color: #4338CA; }
.tsk-filter-pill[data-priority="low"]                    { color: #6B7280; }

.tsk-filter-pill[data-priority]::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  vertical-align: middle;
  opacity: 0.85;
}
.tsk-filter-pill[data-priority="all"]::before { display: none; }

.tsk-filter-pill[data-priority="urgent"].tsk-pill-active {
  background: #FEE2E2; border-color: #FCA5A5; color: #991B1B;
}
.tsk-filter-pill[data-priority="high"].tsk-pill-active {
  background: #FEF3C7; border-color: #FCD34D; color: #92400E;
}
.tsk-filter-pill[data-priority="medium"].tsk-pill-active {
  background: #E0E7FF; border-color: #A5B4FC; color: #3730A3;
}
.tsk-filter-pill[data-priority="low"].tsk-pill-active {
  background: #F3F4F6; border-color: #D4D4D0; color: #374151;
}

/* ── 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: 220px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.tsk-card-ref-thumb {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #C7D2FE;
  flex-shrink: 0;
  display: inline-block;
}
.tsk-card-ref-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.tsk-card-ref-date {
  font-size: 11px;
  color: #4F46E5;
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}
.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;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tsk-board-card-ref .tsk-card-ref-thumb { width: 14px; height: 14px; }
.tsk-board-card-ref .tsk-card-ref-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.tsk-board-card-ref .tsk-card-ref-date {
  font-size: 10px;
  color: #4F46E5;
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}
.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;
  border-radius: 11px;
background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
box-shadow: 0 4px 24px 0 rgba(107, 202, 91, 0.60);
  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;
}

/* ── Drive-style sidebar (prototype-only, in-memory) ── */
.mld-sidebar {
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
  border-right: 1px solid #E8E8E5;
  background: #FBFBFA;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* + New button (Google-Drive signature) */
.mld-sidebar-new-wrap {
  padding: 16px 14px 8px;
  position: relative;
  flex-shrink: 0;
}
.mld-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 14px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #202124;
  transition: box-shadow 0.15s, background 0.15s;
}
.mld-new-btn:hover {
  background: #F9F9F8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}
.mld-new-plus {
  color: #6366F1;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}
.mld-new-caret {
  font-size: 9px;
  color: #6B7280;
  margin-left: 2px;
}
.mld-new-menu {
  position: absolute;
  top: 52px;
  left: 14px;
  min-width: 200px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  padding: 6px 0;
  z-index: 20;
}
.mld-new-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #202124;
  text-align: left;
}
.mld-new-menu-item:hover { background: #F3F3F1; }
.mld-new-menu-ic {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.mld-new-menu-sep {
  height: 1px;
  background: #E8E8E5;
  margin: 4px 0;
}

.mld-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 12px 6px;
}
.mld-folder-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.1s;
}
.mld-folder-item:hover { background: #F3F3F1; }
.mld-folder-item-active {
  background: #EEF2FF !important;
  color: #4338CA !important;
}
.mld-folder-item-active .mld-folder-count { color: #6366F1; }
.mld-folder-icon { font-size: 13px; line-height: 1; flex-shrink: 0; }
.mld-folder-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mld-folder-count {
  font-size: 11px;
  color: #9CA3AF;
  flex-shrink: 0;
}
.mld-folder-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.mld-folder-item:hover .mld-folder-actions { display: inline-flex; }
.mld-folder-item:hover .mld-folder-count   { display: none; }
.mld-folder-act-btn {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mld-folder-act-btn:hover { background: #E8E8E5; color: #171717; }
.mld-folder-divider {
  height: 1px;
  background: #E8E8E5;
  margin: 6px 8px;
}
.mld-folder-drop-hover {
  outline: 2px dashed #6366F1;
  outline-offset: -2px;
  background: #EEF2FF;
}
.mld-folder-empty-hint {
  padding: 8px 10px;
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.4;
}

.mld-tile { -webkit-user-drag: element; }

/* ── Breadcrumb (Drive-style) ── */
.mld-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #202124;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
}
.mld-crumb {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: background 0.1s;
}
.mld-crumb:hover { background: #F3F3F1; }
.mld-crumb-current {
  color: #202124;
  cursor: default;
}
.mld-crumb-current:hover { background: transparent; }
.mld-crumb-sep {
  color: #9CA3AF;
  font-size: 16px;
  font-weight: 400;
  padding: 0 2px;
}

/* ── Section labels with collapse chevron (Drive-style) ── */
.mld-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  cursor: pointer;
  user-select: none;
}
.mld-section-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #5F6368;
  font-size: 12px;
  transition: transform 0.15s, background 0.1s;
}
.mld-section-label:hover .mld-section-chevron { background: #F0F4F9; }
.mld-section-collapsed .mld-section-chevron { transform: rotate(-90deg); }

/* ── Folder tiles (Drive-style: rounded pill with dark icon square) ── */
.mld-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  align-content: start;
}
.mld-folder-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 12px;
  background: #F0F4F9;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, box-shadow 0.12s;
  position: relative;
  min-height: 56px;
}
.mld-folder-tile:hover {
  background: #E4EAF2;
  box-shadow: 0 1px 2px rgba(60,64,67,0.08);
}
.mld-folder-tile-selected {
  background: #D3E3FD !important;
}
.mld-folder-tile-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #3C4043;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mld-folder-tile-icon-wrap svg {
  width: 22px;
  height: 22px;
  color: #FFFFFF;
  fill: #FFFFFF;
}
.mld-folder-tile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mld-folder-tile-name {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.mld-folder-tile-sub {
  font-size: 12px;
  color: #5F6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mld-folder-tile-kebab {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #5F6368;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s, background 0.1s;
}
.mld-folder-tile:hover .mld-folder-tile-kebab { opacity: 1; }
.mld-folder-tile-kebab:hover { background: rgba(60,64,67,0.10); }

.mld-folder-tile-drop-hover {
  background: #D3E3FD !important;
  box-shadow: inset 0 0 0 2px #4285F4;
}

/* Kebab popover menu (used by both folder tile and sidebar tree) */
.mld-kebab-menu {
  position: fixed;
  min-width: 180px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.06);
  padding: 6px 0;
  z-index: 100;
}
.mld-kebab-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #202124;
  text-align: left;
}
.mld-kebab-menu-item:hover { background: #F3F3F1; }
.mld-kebab-menu-item-danger { color: #DC2626; }
.mld-kebab-menu-ic {
  font-size: 13px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.mld-kebab-menu-sep {
  height: 1px;
  background: #E8E8E5;
  margin: 4px 0;
}

/* ── Modal dialog (Drive-style name prompt) ── */
.mld-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 33, 36, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.mld-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mld-modal-title {
  font-size: 18px;
  font-weight: 500;
  color: #202124;
  letter-spacing: -0.01em;
}
.mld-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #202124;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.mld-modal-input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.16);
}
.mld-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mld-modal-btn {
  padding: 8px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.mld-modal-btn-cancel {
  background: transparent;
  color: #4338CA;
}
.mld-modal-btn-cancel:hover { background: #EEF2FF; }
.mld-modal-btn-primary {
  background: #6366F1;
  color: #FFFFFF;
}
.mld-modal-btn-primary:hover { background: #5457E5; }
.mld-modal-btn-primary:disabled {
  background: #C7D2FE;
  cursor: not-allowed;
}

.mld-detail-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mld-detail-folder-select {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 12px;
  color: #374151;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
}
.mld-detail-folder-select:focus { border-color: #6366F1; }

/* ── 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;
  border-radius: 11px;
background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
box-shadow: 0 4px 24px 0 rgba(107, 202, 91, 0.60);
  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:#0194D5; 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: visible;
}
.pub-plat-dropdown-inner {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Platform pill rows in dropdown */
.pub-dd-pill-wrap {
  position: relative;
  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 submenu — floating popover to the side of the hovered pill */
.pub-dd-formats {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  z-index: 10001;
}
/* Invisible bridge so the pointer can cross the gap between pill and popover
   without triggering mouseleave on the dropdown. */
.pub-dd-formats::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}
.pub-dd-formats.flip-left {
  left: auto;
  right: calc(100% + 6px);
}
.pub-dd-formats.flip-left::before {
  left: auto;
  right: -8px;
}
.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.75;
  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 {  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;
}

/* Excel-like tab bar at the bottom of the Sheets view */
.notes-tabbar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 4px 0;
  border-top: 1px solid #E8E8E5;
  min-height: 34px;
}
.notes-tabbar-scroll {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
}
.notes-tabbar-scroll::-webkit-scrollbar { height: 6px; }
.notes-tabbar-scroll::-webkit-scrollbar-thumb { background: #E8E8E5; border-radius: 3px; }
.notes-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border: 1px solid #E8E8E5;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #F3F3F1;
  color: #374151;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  max-width: 200px;
  white-space: nowrap;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.notes-tab:hover { background: #ECECE8; color: #0F0F0F; }
.notes-tab.is-active {
  background: #FFFFFF;
  color: #0F0F0F;
  border-color: #D4D4D0;
  box-shadow: 0 -1px 0 #FFFFFF inset;
}
.notes-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.notes-tab-del {
  border: none;
  background: transparent;
  color: #9CA3AF;
  font-size: 14px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
.notes-tab:hover .notes-tab-del,
.notes-tab.is-active .notes-tab-del { visibility: visible; }
.notes-tab-del:hover { background: #FEE2E2; color: #B91C1C; }
.notes-tab-del:disabled { visibility: hidden; }
.notes-tab-rename {
  border: 1px solid #D4D4D0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: #0F0F0F;
  background: #FFFFFF;
  outline: none;
  max-width: 160px;
}
.notes-tab-rename:focus { border-color: #6366F1; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.notes-tab-add {
  border: 1px dashed #D4D4D0;
  background: #FFFFFF;
  color: #6B7280;
  border-radius: 6px 6px 0 0;
  width: 30px;
  min-height: 30px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  align-self: flex-end;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.notes-tab-add:hover { background: #F3F3F1; color: #0F0F0F; border-color: #9CA3AF; }
.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;
}

/* Select2-style pill for chosen owner mentions inside a cell. Non-editable —
   backspace at the boundary deletes the whole pill as a single unit. */
.notes-mention-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px 1px 7px;
  margin: 1px 3px 1px 0;
  background: #EEF2FF;
  color: #4338CA;
  border: 1px solid #C7D2FE;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  vertical-align: baseline;
}
.notes-mention-pill:hover { background: #E0E7FF; border-color: #A5B4FC; }

/* Card-link column — pill inside the cell links a row to a board card */
.notes-sheet .notes-cell[data-col-kind="card"] {
  cursor: pointer;
  min-height: 24px;
  padding: 4px 8px;
}
.notes-sheet .notes-cell[data-col-kind="card"]:empty::before,
.notes-sheet .notes-cell[data-col-kind="card"][data-value=""]:empty::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
  font-style: italic;
}
.notes-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}
.notes-card-pill-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
  padding-right: 4px;
  border-radius: 999px 0 0 999px;
}
.notes-card-pill-open:hover { color: #065F46; }
.notes-card-pill-icon { font-size: 10px; }
.notes-card-pill-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.notes-card-pill-edit {
  border: none;
  background: transparent;
  color: #059669;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.1s, background 0.1s;
}
.notes-card-pill-edit:hover { opacity: 1; background: #D1FAE5; }
.notes-card-pill-thumb {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #D1FAE5;
  flex-shrink: 0;
  display: inline-block;
}
.notes-card-pill-date {
  font-size: 11px;
  color: #047857;
  opacity: 0.75;
  margin-left: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.notes-card-menu-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #D1FAE5;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #047857;
  font-size: 12px;
  font-weight: 600;
}
.notes-card-menu-thumb.notes-card-menu-thumb-blank { background: #F3F4F6; color: #6B7280; }
.notes-card-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}
.notes-card-menu-date {
  font-size: 11px;
  color: #6B7280;
  font-weight: 400;
}

/* Card picker menu (body-appended, position:fixed via inline top/left) */
.notes-card-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: 260px;
  max-width: 360px;
  padding: 4px;
  font-size: 13px;
}
.notes-card-menu-search {
  padding: 4px 4px 6px;
  border-bottom: 1px solid #F3F3F1;
  margin-bottom: 4px;
}
.notes-card-menu-search input {
  width: 100%;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.notes-card-menu-search input:focus { border-color: #6366F1; }
.notes-card-menu-list {
  max-height: 280px;
  overflow-y: auto;
}
.notes-card-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #0F0F0F;
}
.notes-card-menu-item:hover { background: #ECFDF5; }
.notes-card-menu-item.is-active { background: #ECFDF5; color: #065F46; font-weight: 500; }
.notes-card-menu-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.notes-card-menu-tick { color: #10B981; font-weight: 600; }
.notes-card-menu-item.is-clear {
  color: #B91C1C;
  font-weight: 500;
  justify-content: flex-start;
}
.notes-card-menu-item.is-clear:hover { background: #FEE2E2; }
.notes-card-menu-item.is-create {
  color: #047857;
  font-weight: 500;
  justify-content: flex-start;
  gap: 8px;
}
.notes-card-menu-item.is-create:hover { background: #ECFDF5; }
.notes-card-menu-item.is-create.is-disabled {
  color: #9CA3AF;
  cursor: not-allowed;
}
.notes-card-menu-item.is-create.is-disabled:hover { background: transparent; }
.notes-card-menu-create-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #D1FAE5;
  color: #047857;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.notes-card-menu-item.is-create.is-disabled .notes-card-menu-create-icon {
  background: #F3F3F1;
  color: #9CA3AF;
}
.notes-card-menu-divider {
  height: 1px;
  background: #F3F3F1;
  margin: 4px 0;
}
.notes-card-menu-empty {
  padding: 12px 10px;
  color: #9CA3AF;
  font-size: 12px;
  text-align: center;
}

/* ── Media-folder link column ─────────────────────────────────── */
.notes-sheet .notes-cell[data-col-kind="media"] {
  cursor: pointer;
  min-height: 24px;
  padding: 4px 8px;
}
.notes-folder-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}
.notes-folder-pill-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
  padding-right: 4px;
  border-radius: 999px 0 0 999px;
}
.notes-folder-pill-open:hover { color: #1E3A8A; }
.notes-folder-pill-icon { font-size: 11px; line-height: 1; }
.notes-folder-pill-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.notes-folder-pill-edit {
  border: none;
  background: transparent;
  color: #2563EB;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity 0.1s, background 0.1s;
}
.notes-folder-pill-edit:hover { opacity: 1; background: #DBEAFE; }

.notes-folder-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: 280px;
  max-width: 380px;
  padding: 4px;
  font-size: 13px;
}
.notes-folder-menu-search {
  padding: 4px 4px 6px;
  border-bottom: 1px solid #F3F3F1;
  margin-bottom: 4px;
}
.notes-folder-menu-search input {
  width: 100%;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.notes-folder-menu-search input:focus { border-color: #6366F1; }
.notes-folder-menu-list {
  max-height: 280px;
  overflow-y: auto;
}
.notes-folder-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #0F0F0F;
}
.notes-folder-menu-item:hover { background: #EFF6FF; }
.notes-folder-menu-item.is-active {
  background: #EFF6FF;
  color: #1E3A8A;
  font-weight: 500;
}
.notes-folder-menu-icon { flex-shrink: 0; font-size: 13px; }
.notes-folder-menu-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.notes-folder-menu-tick { color: #2563EB; font-weight: 600; }
.notes-folder-menu-item.is-clear {
  color: #B91C1C;
  font-weight: 500;
  justify-content: flex-start;
}
.notes-folder-menu-item.is-clear:hover { background: #FEE2E2; }
.notes-folder-menu-divider {
  height: 1px;
  background: #F3F3F1;
  margin: 4px 0;
}
.notes-folder-menu-empty {
  padding: 12px 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-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid #E8E8E5;
}
.pj-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; margin-bottom: -1px;
  font-size: 13px; font-weight: 500; font-family: inherit; color: #6B7280;
  cursor: pointer; transition: color 0.1s, border-color 0.1s;
}
.pj-tab:hover { color: #0F0F0F; }
.pj-tab-active { color: #0F0F0F; border-bottom-color: #171717; }

.pj-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.pj-date-row td {
  background: #FAFAF9; color: #6B7280;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 12px; cursor: default;
}
.pj-table tbody tr.pj-date-row:hover { background: #FAFAF9; }
.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; }

.dup-card-choice-list { display: flex; flex-direction: column; gap: 8px; }
.dup-card-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid #E8E8E5; border-radius: 8px;
  cursor: pointer; background: #FFFFFF;
}
.dup-card-choice:hover { border-color: #D4D4D0; background: #FAFAFA; }
.dup-card-choice input[type="radio"] { margin-top: 3px; accent-color: #171717; }
.dup-card-choice-body { display: flex; flex-direction: column; gap: 2px; }
.dup-card-choice-title { font-size: 13px; font-weight: 600; color: #0F0F0F; }
.dup-card-choice-sub   { font-size: 12px; color: #6B7280; }
.dup-card-choice:has(input[type="radio"]:checked) { border-color: #171717; background: #F9F9F8; }

.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: 0 0 70px 0; } 
.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 {border-radius: 11px;
background: linear-gradient(90deg, #84D63E 0%, #0194D5 95.88%);
box-shadow: 0 4px 24px 0 rgba(107, 202, 91, 0.60); color: #FDFDFE; font-size: 14px; font-weight: 600;
 }
.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>.
   ──────────────────────────────────────────────────────────────── */
/* ── Notes (notepad) — layout ─────────────────────────────────────
   Spacing scale: 4 · 8 · 12 · 16 · 20 · 24
   Line color  : #E8E8E5 (border) · #EFEFEC (soft rule) · #F3F3F1 (very soft)
   Text        : #0F0F0F emphasis · #4B5563 body · #9CA3AF muted
   Accent      : #6366F1 (focus + active indicator)
   ─────────────────────────────────────────────────────────────── */
.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;
  min-width: 0;
}
.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 10px;
  border-radius: 999px;
  background: #F3F3F1;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}
.np-status.is-saving { background: #FEF3C7; color: #92400E; }
.np-status.is-error  { background: #FEE2E2; color: #B91C1C; }

.np-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  border: 1px solid #E8E8E5;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.03);
}

/* ── Sidebar (tabs + add + collapse toggle) ────────────────────── */
.np-sidebar {
  width: 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: #FAFAF9;
  border-right: 1px solid #EFEFEC;
  transition: width 0.18s ease, min-width 0.18s ease;
  overflow: hidden;
}
.np-shell.is-collapsed .np-sidebar {
  width: 44px;
  min-width: 44px;
}
.np-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid #EFEFEC;
  min-height: 44px;
}
.np-sidebar-label {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.15s;
}
.np-shell.is-collapsed .np-sidebar-label {
  opacity: 0;
  pointer-events: none;
}
.np-sidebar-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #9CA3AF;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.np-sidebar-toggle:hover { background: #ECECE8; color: #0F0F0F; }
.np-sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

/* ── Tabs list ─────────────────────────────────────────────────── */
.np-tabs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: #E0E0DC transparent;
}
.np-tabs::-webkit-scrollbar        { width: 6px; }
.np-tabs::-webkit-scrollbar-thumb  { background: #E0E0DC; border-radius: 3px; }
.np-shell.is-collapsed .np-tabs,
.np-shell.is-collapsed .np-add-tab { display: none; }

.np-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 16px;
  margin-right: 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #EFEFEC;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 13px;
  color: #4B5563;
  text-align: left;
  font-family: inherit;
  min-width: 0;
  line-height: 1.35;
  transition: background 0.12s, color 0.12s;
}
.np-tab::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.12s;
}
.np-tab:hover {
  background: #F3F3F1;
  color: #0F0F0F;
}
.np-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
.np-tab.is-active {
  background: #FFFFFF;
  color: #0F0F0F;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.05);
  margin-right: 0;
  border-bottom-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 2;
}
.np-tab.is-active::before { background: #6366F1; }

.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: 14px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  transition: background 0.1s, color 0.1s;
}
.np-tab:hover .np-tab-del,
.np-tab.is-active .np-tab-del,
.np-tab:focus-within .np-tab-del { visibility: visible; }
.np-tab-del:hover { color: #B91C1C; background: #FEF2F2; }
.np-tab-del:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
}

/* ── Add-tab button ────────────────────────────────────────────── */
.np-add-tab {
  border: none;
  border-top: 1px solid #EFEFEC;
  background: #FAFAF9;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.12s, background 0.12s;
}
.np-add-tab:hover { color: #0F0F0F; background: #F3F3F1; }
.np-add-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.35);
}

/* ── Editor pane ───────────────────────────────────────────────── */
.np-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 24px 24px;
}
.np-title {
  font-size: 20px;
  font-weight: 600;
  color: #0F0F0F;
  border: none;
  outline: none;
  padding: 0 0 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #F3F3F1;
  font-family: inherit;
  background: transparent;
  letter-spacing: -0.01em;
  transition: border-bottom-color 0.15s;
}
.np-title:hover  { border-bottom-color: #E8E8E5; }
.np-title:focus  { border-bottom-color: #6366F1; }
.np-title::placeholder { color: #D4D4D0; }
.np-title:disabled { color: #D4D4D0; cursor: not-allowed; }

.np-textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  line-height: 1.65;
  color: #171717;
  font-family: inherit;
  background: transparent;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #E8E8E5 transparent;
}
.np-textarea::-webkit-scrollbar        { width: 8px; }
.np-textarea::-webkit-scrollbar-thumb  { background: #E8E8E5; border-radius: 4px; }
.np-textarea::placeholder { color: #9CA3AF; }
.np-textarea:disabled     { color: #D4D4D0; cursor: not-allowed; }

/* contenteditable variant: <textarea>-only pseudos don't apply, so emulate
   placeholder + disabled state with attribute + class hooks the JS toggles. */
.np-textarea[contenteditable]           { overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; }
.np-textarea[contenteditable]:focus     { outline: none; }
.np-textarea[contenteditable].is-disabled { color: #D4D4D0; cursor: not-allowed; }
.np-textarea[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
  pointer-events: none;
}
.np-textarea a { color: #4F46E5; text-decoration: underline; }
.np-textarea ul, .np-textarea ol { padding-left: 24px; margin: 4px 0; }

/* ── Rich-text toolbar (shared: notepad + sheets) ─────────────── */
.np-toolbar, .notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #F3F3F1;
}
.notes-toolbar { padding: 6px 8px; margin: 0 0 8px; border: 1px solid #E8E8E5; border-radius: 8px; background: #FCFCFB; }
.rt-toolbar { display: contents; }
.rt-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #374151;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
}
.rt-btn:hover { background: #F3F4F6; border-color: #E5E7EB; color: #0F0F0F; }
.rt-btn:active { background: #E5E7EB; }
.rt-btn b, .rt-btn i, .rt-btn u { font-size: 13px; }
.rt-btn .rt-a, .rt-btn .rt-h { font-weight: 700; }
.rt-btn-color { flex-direction: column; padding: 2px 6px 3px; gap: 2px; }
.rt-btn-color .rt-color-bar {
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
}
.rt-sep {
  width: 1px;
  height: 18px;
  background: #E5E7EB;
  margin: 0 4px;
}
.rt-color-input {
  /* Native color picker — invisible; toolbar buttons click() it. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
/* Preserve highlights and colored text inside sheet cells. */
.notes-sheet .notes-cell a { color: #4F46E5; text-decoration: underline; }
.notes-sheet .notes-cell ul, .notes-sheet .notes-cell ol { padding-left: 20px; margin: 2px 0; }

/* ── Date / Due column ────────────────────────────────────────── */
.notes-sheet .notes-cell[data-col-kind="date"] {
  cursor: pointer;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: box-shadow 0.15s, background 0.15s;
}
/* Highlight ring on filled cells so users can spot scheduled rows at a glance. */
.notes-sheet .notes-cell[data-col-kind="date"]:not([data-value=""]) {
  background: #ECFDF5;
  box-shadow: inset 0 0 0 2px #6EE7B7;
}
.notes-sheet .notes-cell[data-col-kind="date"]:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #34D399;
}
.notes-sheet .notes-cell[data-col-kind="date"]:empty::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
  font-style: italic;
}
.notes-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: #10B981;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.35);
}
.notes-date-pill-icon { font-size: 11px; line-height: 1; }
.notes-date-pill-text { white-space: nowrap; }

.notes-date-menu {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  min-width: 220px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.notes-date-menu-row input[type="date"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #D4D4D0;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #FCFCFB;
}
.notes-date-menu-row input[type="date"]:focus { outline: none; border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.notes-date-menu-actions { display: flex; gap: 6px; }
.notes-date-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #374151;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.notes-date-btn:hover { background: #F3F4F6; border-color: #D4D4D0; color: #0F0F0F; }
.notes-date-btn.is-clear { color: #B91C1C; }
.notes-date-btn.is-clear:hover { background: #FEF2F2; border-color: #FCA5A5; }

/* ── Custom dropdown column: ⚙ header button + picker + editor ─── */
.notes-col-cfg {
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #6B7280;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notes-col-cfg:hover { background: #F3F4F6; color: #111827; border-color: #D4D4D0; }
.notes-col-cfg.is-active { background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }

.notes-select-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.10);
  min-width: 220px;
  max-width: 320px;
  padding: 4px;
  display: none;
}
.notes-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #111827;
}
.notes-select-item:hover { background: #F3F4F6; }
.notes-select-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
.notes-select-divider { height: 1px; background: #F3F3F1; margin: 4px 0; }
.notes-select-item.is-clear { color: #B91C1C; font-weight: 500; }
.notes-select-item.is-clear:hover { background: #FEE2E2; }
.notes-select-item.is-cfg { color: #4338CA; font-weight: 500; }
.notes-select-item.is-cfg:hover { background: #EEF2FF; }
.notes-select-empty { padding: 10px 12px; color: #6B7280; font-size: 12px; font-style: italic; }

.notes-colcfg-menu {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  min-width: 280px;
  max-width: 340px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.notes-colcfg-head {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 4px 2px;
}
.notes-colcfg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #111827;
}
.notes-colcfg-row:hover { background: #F9FAFB; }
.notes-colcfg-divider { height: 1px; background: #F3F3F1; margin: 4px 0; }
.notes-colcfg-opts { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; padding: 0 2px; }
.notes-colcfg-opt {
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  gap: 6px;
  align-items: center;
}
.notes-colcfg-opt-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #D4D4D0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.notes-colcfg-opt-name {
  padding: 6px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #FCFCFB;
  min-width: 0;
}
.notes-colcfg-opt-name:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.notes-colcfg-opt-del {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #9CA3AF;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.notes-colcfg-opt-del:hover { background: #FEF2F2; color: #B91C1C; }
.notes-colcfg-add {
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px dashed #C7D2FE;
  background: #EEF2FF;
  color: #4338CA;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.notes-colcfg-add:hover { background: #E0E7FF; border-color: #A5B4FC; }
.notes-colcfg-empty { padding: 6px 4px; color: #6B7280; font-size: 12px; font-style: italic; }

/* ── Media folder picker: create-new row (mirrors card picker) ── */
.notes-folder-menu-item.is-create {
  color: #047857;
  font-weight: 500;
  justify-content: flex-start;
  gap: 8px;
}
.notes-folder-menu-item.is-create:hover { background: #ECFDF5; }
.notes-folder-menu-item.is-create.is-disabled {
  color: #9CA3AF;
  cursor: not-allowed;
}
.notes-folder-menu-item.is-create.is-disabled:hover { background: transparent; }
.notes-folder-menu-create-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #D1FAE5;
  color: #047857;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.notes-folder-menu-item.is-create.is-disabled .notes-folder-menu-create-icon {
  background: #F3F3F1;
  color: #9CA3AF;
}

/* Stacked accordion (replaces the old tabs+editor split) */
.np-acc-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 2px;
}
.np-acc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-acc-item {
  border: 1px solid #E8E8E5;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.np-acc-item.is-expanded {
  border-color: #D4D4D0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.np-acc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  background: #FFFFFF;
  transition: background 0.1s;
  outline: none;
}
.np-acc-header:hover { background: #FAFAF9; }
.np-acc-header:focus-visible { background: #F3F3F1; }
.np-acc-item.is-expanded .np-acc-header {
  background: #000;
  color: #FFFFFF;
  border-bottom: 1px solid #000;
}
.np-acc-item.is-expanded .np-acc-header:hover { background: #0F0F0F; }
.np-acc-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  font-size: 11px;
  color: #9CA3AF;
  transition: transform 0.15s ease, color 0.15s;
}
.np-acc-item.is-expanded .np-acc-chevron {
  transform: rotate(90deg);
  color: #FFFFFF;
}
.np-acc-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0F0F0F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-acc-item.is-expanded .np-acc-title { color: #FFFFFF; }
.np-acc-del {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: transparent;
  border: none;
  color: #9CA3AF;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
.np-acc-header:hover .np-acc-del,
.np-acc-item.is-expanded .np-acc-del { visibility: visible; }
.np-acc-del:hover { background: #FEE2E2; color: #B91C1C; }
.np-acc-item.is-expanded .np-acc-del { color: rgba(255,255,255,0.75); }
.np-acc-item.is-expanded .np-acc-del:hover { background: rgba(255,255,255,0.15); color: #FFFFFF; }

.np-acc-body {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  background: #FFFFFF;
  border-top: 1px solid #E8E8E5;
}
.np-acc-title-input {
  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-acc-title-input:focus { border-bottom-color: #6366F1; }
.np-acc-title-input::placeholder { color: #D4D4D0; }
.np-acc-textarea {
  width: 100%;
  min-height: 260px;
  border: none;
  outline: none;
  resize: vertical;
  font-size: 14px;
  line-height: 1.6;
  color: #171717;
  font-family: inherit;
  background: transparent;
  padding: 0;
}
.np-acc-textarea::placeholder { color: #9CA3AF; }

.np-acc-add {
  align-self: flex-start;
  border: 1px dashed #D4D4D0;
  background: #FFFFFF;
  color: #6B7280;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.np-acc-add:hover { background: #F3F3F1; color: #0F0F0F; border-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;
}

/*Analytics*/
.over_sec{ margin-bottom:25px; }
.al-section .subtitle {
    margin: 3px 0 8px;
    color: #747474;
    font-size: 16px;
}
.glover_ti_row {
    margin-bottom: 23px;
}

    .section-heading {
      display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 10px;
    }

    .filter,
    .view-all {
      border: 1px solid #e6e8ed;
      border-radius: 7px;
      background: #fff;
      color: #171b35;
      padding: 8px 13px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .heading-actions { display: flex; gap: 7px; }

    .stats-grid,
    .platform-grid,
    .posts-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .card {
      background: #fff;
      border: 1px solid #e8eaee;
      border-radius: 7px;
    }

    .stat-card {
          min-height: 66px;
    padding: 15px 18px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    } 
    .stat-icon.green svg {
      fill: #12b629;
  }

    .g_over .stat-icon {
    width: 60px;
    height: 60px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 22px;
    font-weight: bold;
    padding: 13px;
    }

    .stat-icon.green { background: #e4f8e9; color: #12b629; }
    .stat-icon.blue { background-color: #e5f1ff; color: #0877f9; 
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 124 124" xmlns="http://www.w3.org/2000/svg" fill="%230060f3"><path d="m28.742 55.044-1.161.638c-2.882-3.777-7.669-6.031-12.928-5.264-5.95.867-10.724 5.686-11.526 11.646-1.188 8.83 6.119 16.337 14.9 15.504 6.001-.569 10.99-5.166 12.123-11.087.498-2.604.197-5.078-.633-7.298l1.153-.634a2 2 0 1 0-1.928-3.505M16.695 73.631C11.349 73.631 7 69.289 7 63.95s4.349-9.682 9.695-9.682 9.696 4.343 9.696 9.682-4.349 9.681-9.696 9.681M108.7 38.413c-6.289-.162-11.582 4.296-12.728 10.214l-21.166-4.324c.051-.534.086-1.071.086-1.613a16.7 16.7 0 0 0-1.786-7.506l14.268-11.488c2.891 2.681 6.924 4.148 11.293 3.524 6.007-.857 10.822-5.736 11.589-11.755C111.39 6.56 103.89-.968 94.986.101c-6.075.73-11.014 5.578-11.87 11.636a13.58 13.58 0 0 0 1.75 8.842L70.9 31.824c-3.1-3.665-7.727-6.001-12.894-6.001-4.612 0-8.794 1.861-11.845 4.865l-9.49-9.657c2.4-2.671 3.693-6.353 3.097-10.333-.824-5.5-5.309-9.884-10.826-10.591C20.71-.949 13.746 5.973 14.744 14.189c.677 5.575 5.121 10.106 10.679 10.915a12.56 12.56 0 0 0 8.126-1.543l10.107 10.285a16.73 16.73 0 0 0-2.534 8.844c0 1.85.31 3.661.891 5.382l-1.381.727a2 2 0 1 0 1.862 3.54l1.245-.655c.1.158.192.319.297.474a2 2 0 0 0 1.655.874c.512 0 1.03-.196 1.439-.611.659-.669.73-1.753.202-2.529-1.889-2.781-2.614-6.178-1.993-9.593.942-5.175 5.106-9.328 10.283-10.261 9.852-1.774 18.201 7.725 14.281 17.748-.304.776-.802 1.454-1.257 2.152a2 2 0 0 0 .672 2.821c.951.555 2.161.144 2.77-.773a16.8 16.8 0 0 0 1.863-3.774l21.906 4.475c.817 6.176 6.109 10.961 12.51 10.961 7.14 0 12.917-5.949 12.621-13.146-.267-6.551-5.735-11.92-12.288-12.089M96.672 4c5.346 0 9.695 4.343 9.695 9.682s-4.349 9.681-9.695 9.681-9.695-4.343-9.695-9.681S91.326 4 96.672 4M27.281 21.239c-4.76 0-8.632-3.867-8.632-8.619 0-4.753 3.873-8.62 8.632-8.62s8.632 3.867 8.632 8.62-3.872 8.619-8.632 8.619m81.087 38.408c-4.76 0-8.632-3.867-8.632-8.619 0-4.753 3.873-8.62 8.632-8.62S117 46.275 117 51.028s-3.873 8.619-8.632 8.619m-6.154 37.866c-1.104 0-2.005-.896-2.005-2s.891-2 1.995-2h.01a2 2 0 0 1 0 4"/><circle cx="35.453" cy="53.766" r="2.063"/><path d="M81.598 124H62.906a13.23 13.23 0 0 1-11.842-7.271L35.145 85.415c-1.902-4.079-.336-8.888 3.534-11.01 3.999-2.196 9.06-.72 11.278 3.289l.022.04v-33.49c0-4.733 3.845-8.583 8.571-8.583 4.201 0 8.027 3.429 8.027 7.193v17.773a8 8 0 0 1 4.027-1.086c3.598 0 6.651 2.383 7.667 5.655a7.97 7.97 0 0 1 4.388-1.31c4.276 0 7.86 3.023 8.733 7.047a7.97 7.97 0 0 1 4.23-1.209c4.732 0 8.582 3.855 8.582 8.594V88.67a2 2 0 0 1-4 0V78.319c0-2.533-2.056-4.594-4.582-4.594a4.04 4.04 0 0 0-4.027 4.039v6.805a2 2 0 0 1-4 0V72.836c0-2.729-2.214-4.95-4.937-4.95a4.037 4.037 0 0 0-4.027 4.039v6.85a2 2 0 0 1-4 0V67.579c0-2.227-1.807-4.038-4.027-4.038s-4.027 1.812-4.027 4.038v4.758a2 2 0 0 1-4 0V42.854c0-1.286-1.691-3.193-4.027-3.193-2.521 0-4.571 2.056-4.571 4.583v41.233a2.001 2.001 0 0 1-3.75.969l-3.772-6.815c-1.154-2.086-3.78-2.856-5.855-1.719-2.028 1.112-2.845 3.639-1.861 5.752l15.889 31.252a9.24 9.24 0 0 0 8.277 5.083h18.692c10.259 0 18.606-8.364 18.606-18.644a2 2 0 0 1 4 0C104.204 113.842 94.063 124 81.598 124"/></svg>');

          background-size: 35px;
    background-position: center;
    background-repeat: no-repeat;
    }
    .stat-icon.purple { background: #f3e7ff; 

      background-image: url('data:image/svg+xml,<svg id="fi_18135740" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="%23951aff"><path d="m11.5009766 44c-.3398438 0-.6708984-.1728516-.8583984-.4853516-.2841797-.4736328-.1308594-1.0878906.3427734-1.3720703l20-12c.309082-.1855469.6943359-.1904297 1.0073242-.0126953.3134766.1777344.5073242.5097656.5073242.8701172v1.4160156l19.5703125-9.3193359c.4990234-.2353516 1.0952148-.0253906 1.3325195.4736328.2373047.4980469.0258789 1.0947266-.4731445 1.3330078l-21 10c-.3095703.1464844-.6733398.125-.9633789-.0576172-.2905273-.1835938-.4663086-.5029297-.4663086-.8457031v-1.2333984l-18.4853516 11.0908203c-.1611328.0966797-.3383789.1425781-.5136719.1425781z"></path><path d="m19.5 55h-5c-.5522461 0-1-.4472656-1-1v-8c0-.5527344.4477539-1 1-1h5c.5522461 0 1 .4472656 1 1v8c0 .5527344-.4477539 1-1 1zm-4-2h3v-6h-3z"></path><path d="m34.5 55h-5c-.5522461 0-1-.4472656-1-1v-11c0-.5527344.4477539-1 1-1h5c.5522461 0 1 .4472656 1 1v11c0 .5527344-.4477539 1-1 1zm-4-2h3v-9h-3z"></path><path d="m49.5 55h-5c-.5522461 0-1-.4472656-1-1v-17c0-.5527344.4477539-1 1-1h5c.5522461 0 1 .4472656 1 1v17c0 .5527344-.4477539 1-1 1zm-4-2h3v-15h-3z"></path><path d="m27.5 29h-10c-.5522461 0-1-.4472656-1-1v-4c0-3.3085938 2.6914062-6 6-6s6 2.6914062 6 6v4c0 .5527344-.4477539 1-1 1zm-9-2h8v-3c0-2.2060547-1.7944336-4-4-4s-4 1.7939453-4 4z"></path><path d="m22.5 17c-2.2055664 0-4-1.7939453-4-4s1.7944336-4 4-4 4 1.7939453 4 4-1.7944336 4-4 4zm0-6c-1.1030273 0-2 .8974609-2 2s.8969727 2 2 2 2-.8974609 2-2-.8969727-2-2-2z"></path></svg>'); 
      background-size: 45px;
    background-position: center;
    background-repeat: no-repeat;

  }
    .stat-icon.orange { background-color: #fff0e5;

    background-image: url('data:image/svg+xml,<svg version="1.1" id="fi_709612" xmlns="http://www.w3.org/2000/svg" fill="%23ff7600" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve"><g><g><path d="M508.745,246.041c-4.574-6.257-113.557-153.206-252.748-153.206S7.818,239.784,3.249,246.035c-4.332,5.936-4.332,13.987,0,19.923c4.569,6.257,113.557,153.206,252.748,153.206s248.174-146.95,252.748-153.201C513.083,260.028,513.083,251.971,508.745,246.041z M255.997,385.406c-102.529,0-191.33-97.533-217.617-129.418c26.253-31.913,114.868-129.395,217.617-129.395c102.524,0,191.319,97.516,217.617,129.418C447.361,287.923,358.746,385.406,255.997,385.406z"></path></g></g><g><g><path d="M255.997,154.725c-55.842,0-101.275,45.433-101.275,101.275s45.433,101.275,101.275,101.275s101.275-45.433,101.275-101.275S311.839,154.725,255.997,154.725z M255.997,323.516c-37.23,0-67.516-30.287-67.516-67.516s30.287-67.516,67.516-67.516s67.516,30.287,67.516,67.516S293.227,323.516,255.997,323.516z"></path></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
      background-size: 35px;
    background-position: center;
    background-repeat: no-repeat;

     color: #ff7600; }

    .g_over .stat-label {     font-size: 14px;
    font-weight: 600;}
   .g_over .stat-value {
    margin-top: 3px;
    font-size: 25px;
    font-weight: 600;
  }
    .g_over .growth {    margin-left: 5px;
    color: #21b75d;
    font-size: 18px;
    font-weight: 500;}
    .stat-note {margin-top: 3px;
    color: #858ca0;
    font-size: 15px;}

    .platform-card { padding:20px; }

    .platform-title,
    .post-platform {
         display: flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    font-weight: 600;
    color: #16141F;
    }

    .platform-grid .brand {
      width: 23px;
      height: 23px;
      flex: none;
      display: inline-grid;
      place-items: center;
      border-radius: 4px;
      color: white;
      font-size: 12px;
      font-weight: 800;
          background-size: contain !important;
    background-repeat: no-repeat !important;
    }

    .post-platform .instagram,
    .platform-grid .instagram { background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="fi_15713420" viewBox="0 0 512 512"><defs><style>.cls-1{fill:url(%23Nepojmenovaný_přechod_27);}.cls-2{fill:%23fff;}</style><linearGradient gradientUnits="userSpaceOnUse" id="Nepojmenovaný_přechod_27" x1="328.27" x2="183.73" y1="508.05" y2="3.95"><stop offset="0" stop-color="%23ffdb73"></stop><stop offset="0.08" stop-color="%23fdad4e"></stop><stop offset="0.15" stop-color="%23fb832e"></stop><stop offset="0.19" stop-color="%23fa7321"></stop><stop offset="0.23" stop-color="%23f6692f"></stop><stop offset="0.37" stop-color="%23e84a5a"></stop><stop offset="0.48" stop-color="%23e03675"></stop><stop offset="0.55" stop-color="%23dd2f7f"></stop><stop offset="0.68" stop-color="%23b43d97"></stop><stop offset="0.97" stop-color="%234d60d4"></stop><stop offset="1" stop-color="%234264db"></stop></linearGradient></defs><title></title><rect class="cls-1" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"></rect><path class="cls-2" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"></path><path class="cls-2" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"></path><circle class="cls-2" cx="346.81" cy="163.23" r="21.07"></circle></svg>'); }

    .post-platform .facebook,
    .platform-grid .facebook { background:url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" height="6.827in" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.82666 6.82666" width="6.827in" xmlns="http://www.w3.org/2000/svg" id="fi_13051733"><g id="Layer_x0020_1"><rect fill="%231976d2" height="6.827" rx="1.456" width="6.827"></rect><path d="m4.19658 3.51299h-.546957v2.00372h-.82865v-2.00372h-.394118v-.704406h.394118v-.45565c0-.325795.154697-.83622.836161-.83622l.613618.00265354v.683575h-.445252c-.0731693 0-.175878.0365512-.175878.19187v.414602h.619563l-.0726063.703575z" fill="%23fff"></path></g></svg>');}

    .post-platform .tiktok,
    .platform-grid .tiktok { background: url('data:image/svg+xml,<svg height="512" viewBox="0 0 176 176" width="512" xmlns="http://www.w3.org/2000/svg" id="fi_3938055"><g id="Layer_2" data-name="Layer 2"><g id="_14.tiktok" data-name="14.tiktok"><path id="background" d="m144.52 173a532.59 532.59 0 0 1 -113 0 32.07 32.07 0 0 1 -28.52-28.48 532.59 532.59 0 0 1 0-113 32.07 32.07 0 0 1 28.48-28.52 532.59 532.59 0 0 1 113 0 32.07 32.07 0 0 1 28.52 28.48 532.59 532.59 0 0 1 0 113 32.07 32.07 0 0 1 -28.48 28.52z" fill="%23010101"></path><path id="icon" d="m74.73 143a35.1 35.1 0 0 1 0-70.2h8.57v17.13h-8.57a18 18 0 1 0 18 18v-74.93h17.13v8.56a18 18 0 0 0 18 18h8.57v17.1h-8.63a34.72 34.72 0 0 1 -18-5v36.24a35.13 35.13 0 0 1 -35.07 35.1z" fill="%23fff"></path></g></g></svg>'); }

    .post-platform .linkedin,
    .platform-grid .linkedin { background: url('data:image/svg+xml,<svg height="512" viewBox="0 0 176 176" width="512" xmlns="http://www.w3.org/2000/svg" id="fi_3536569"><g id="Layer_2" data-name="Layer 2"><g id="linkedin"><path id="icon" d="m152 0h-128a24 24 0 0 0 -24 24v128a24 24 0 0 0 24 24h128a24 24 0 0 0 24-24v-128a24 24 0 0 0 -24-24zm-92 139.28a3.71 3.71 0 0 1 -3.71 3.72h-15.81a3.71 3.71 0 0 1 -3.72-3.72v-66.28a3.72 3.72 0 0 1 3.72-3.72h15.81a3.72 3.72 0 0 1 3.71 3.72zm-11.62-76.28a15 15 0 1 1 15-15 15 15 0 0 1 -15 15zm94.26 76.54a3.41 3.41 0 0 1 -3.42 3.42h-17a3.41 3.41 0 0 1 -3.42-3.42v-31.05c0-4.64 1.36-20.32-12.13-20.32-10.45 0-12.58 10.73-13 15.55v35.86a3.42 3.42 0 0 1 -3.37 3.42h-16.42a3.41 3.41 0 0 1 -3.41-3.42v-66.87a3.41 3.41 0 0 1 3.41-3.42h16.42a3.42 3.42 0 0 1 3.42 3.42v5.78c3.88-5.83 9.63-10.31 21.9-10.31 27.18 0 27 25.38 27 39.32z"></path></g></g></svg>'); }

    .platform-card dl { margin: 11px 0 0; }
    .platform-card dl div {
         display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 5px 0;
    font-size: 16px;
    }
    .platform-card dt { color: #687087; }
    .platform-card dd { margin: 0; font-weight: 600; }

    .post-card { padding: 9px 12px 10px; }
    .post-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .post-top .pst_time {     color: #5c5c5c;
    font-size: 14px;}
    .post-platform {     font-size: 15px;
    font-weight: 500; }
    .post-platform .brand { width: 22px; height: 22px;     background-size: contain !important;
    background-repeat: no-repeat !important;}

    .post-image {
      display: block;
      width: 100%;
      height:75px;
      object-fit: cover;
      border-radius: 4px;
    }

   .post-card .post-title {
          margin: 5px 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 600;
    color: #16141F;
    }

    .post-metrics {
          gap: 14px;
    display: flex;
    justify-content: space-between;
    }

    .post-metrics .metric {     display: flex;   font-size: 15px;  font-weight: 600; }
    .metric .card_small {
         display: block;
    margin:0px;
    color: #7c808b;
    font-size: 13px;
    font-weight: 400;
    }
    .metric-symbol { 
      background: url('data:image/svg+xml,<svg version="1.1" id="fi_709612" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve"><g><g><path d="M508.745,246.041c-4.574-6.257-113.557-153.206-252.748-153.206S7.818,239.784,3.249,246.035c-4.332,5.936-4.332,13.987,0,19.923c4.569,6.257,113.557,153.206,252.748,153.206s248.174-146.95,252.748-153.201C513.083,260.028,513.083,251.971,508.745,246.041z M255.997,385.406c-102.529,0-191.33-97.533-217.617-129.418c26.253-31.913,114.868-129.395,217.617-129.395c102.524,0,191.319,97.516,217.617,129.418C447.361,287.923,358.746,385.406,255.997,385.406z"></path></g></g><g><g><path d="M255.997,154.725c-55.842,0-101.275,45.433-101.275,101.275s45.433,101.275,101.275,101.275s101.275-45.433,101.275-101.275S311.839,154.725,255.997,154.725z M255.997,323.516c-37.23,0-67.516-30.287-67.516-67.516s30.287-67.516,67.516-67.516s67.516,30.287,67.516,67.516S293.227,323.516,255.997,323.516z"></path></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
      margin-right: 5px; 
          background-size: contain;
          background-repeat: no-repeat;
    width: 18px;
    height: 18px;
        margin-top: 4px;
       }

       .metric-symbol.rate_sym{
         background-image: url('data:image/svg+xml,<svg id="fi_10364222" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m244.4 203.002c68.889-28.535 130.553-69.737 183.279-122.463l29.318-29.318v38.252h30v-89.465h-89.465v30h38.252l-29.318 29.318c-49.926 49.925-108.315 88.94-173.546 115.959s-134.106 40.72-204.711 40.72h-3.207v30h3.207c74.565 0 147.302-14.468 216.191-43.003z"></path><path d="m486.998 481.992v-304.2h-120.006v304.2h-50.989v-217.208h-120.006v217.208h-50.989v-130.203h-120.006v130.203h-25.002v30h512v-30zm-90.006-274.2h60.006v274.2h-60.006zm-170.995 86.992h60.006v187.208h-60.006zm-170.995 87.005h60.006v100.203h-60.006z"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>') ;
         background-repeat: no-repeat;
     
       }
       .metric-symbol.inte_sym{
         background-image: url('data:image/svg+xml,<svg viewBox="0 0 124 124" xmlns="http://www.w3.org/2000/svg" ><path d="m28.742 55.044-1.161.638c-2.882-3.777-7.669-6.031-12.928-5.264-5.95.867-10.724 5.686-11.526 11.646-1.188 8.83 6.119 16.337 14.9 15.504 6.001-.569 10.99-5.166 12.123-11.087.498-2.604.197-5.078-.633-7.298l1.153-.634a2 2 0 1 0-1.928-3.505M16.695 73.631C11.349 73.631 7 69.289 7 63.95s4.349-9.682 9.695-9.682 9.696 4.343 9.696 9.682-4.349 9.681-9.696 9.681M108.7 38.413c-6.289-.162-11.582 4.296-12.728 10.214l-21.166-4.324c.051-.534.086-1.071.086-1.613a16.7 16.7 0 0 0-1.786-7.506l14.268-11.488c2.891 2.681 6.924 4.148 11.293 3.524 6.007-.857 10.822-5.736 11.589-11.755C111.39 6.56 103.89-.968 94.986.101c-6.075.73-11.014 5.578-11.87 11.636a13.58 13.58 0 0 0 1.75 8.842L70.9 31.824c-3.1-3.665-7.727-6.001-12.894-6.001-4.612 0-8.794 1.861-11.845 4.865l-9.49-9.657c2.4-2.671 3.693-6.353 3.097-10.333-.824-5.5-5.309-9.884-10.826-10.591C20.71-.949 13.746 5.973 14.744 14.189c.677 5.575 5.121 10.106 10.679 10.915a12.56 12.56 0 0 0 8.126-1.543l10.107 10.285a16.73 16.73 0 0 0-2.534 8.844c0 1.85.31 3.661.891 5.382l-1.381.727a2 2 0 1 0 1.862 3.54l1.245-.655c.1.158.192.319.297.474a2 2 0 0 0 1.655.874c.512 0 1.03-.196 1.439-.611.659-.669.73-1.753.202-2.529-1.889-2.781-2.614-6.178-1.993-9.593.942-5.175 5.106-9.328 10.283-10.261 9.852-1.774 18.201 7.725 14.281 17.748-.304.776-.802 1.454-1.257 2.152a2 2 0 0 0 .672 2.821c.951.555 2.161.144 2.77-.773a16.8 16.8 0 0 0 1.863-3.774l21.906 4.475c.817 6.176 6.109 10.961 12.51 10.961 7.14 0 12.917-5.949 12.621-13.146-.267-6.551-5.735-11.92-12.288-12.089M96.672 4c5.346 0 9.695 4.343 9.695 9.682s-4.349 9.681-9.695 9.681-9.695-4.343-9.695-9.681S91.326 4 96.672 4M27.281 21.239c-4.76 0-8.632-3.867-8.632-8.619 0-4.753 3.873-8.62 8.632-8.62s8.632 3.867 8.632 8.62-3.872 8.619-8.632 8.619m81.087 38.408c-4.76 0-8.632-3.867-8.632-8.619 0-4.753 3.873-8.62 8.632-8.62S117 46.275 117 51.028s-3.873 8.619-8.632 8.619m-6.154 37.866c-1.104 0-2.005-.896-2.005-2s.891-2 1.995-2h.01a2 2 0 0 1 0 4"/><circle cx="35.453" cy="53.766" r="2.063"/><path d="M81.598 124H62.906a13.23 13.23 0 0 1-11.842-7.271L35.145 85.415c-1.902-4.079-.336-8.888 3.534-11.01 3.999-2.196 9.06-.72 11.278 3.289l.022.04v-33.49c0-4.733 3.845-8.583 8.571-8.583 4.201 0 8.027 3.429 8.027 7.193v17.773a8 8 0 0 1 4.027-1.086c3.598 0 6.651 2.383 7.667 5.655a7.97 7.97 0 0 1 4.388-1.31c4.276 0 7.86 3.023 8.733 7.047a7.97 7.97 0 0 1 4.23-1.209c4.732 0 8.582 3.855 8.582 8.594V88.67a2 2 0 0 1-4 0V78.319c0-2.533-2.056-4.594-4.582-4.594a4.04 4.04 0 0 0-4.027 4.039v6.805a2 2 0 0 1-4 0V72.836c0-2.729-2.214-4.95-4.937-4.95a4.037 4.037 0 0 0-4.027 4.039v6.85a2 2 0 0 1-4 0V67.579c0-2.227-1.807-4.038-4.027-4.038s-4.027 1.812-4.027 4.038v4.758a2 2 0 0 1-4 0V42.854c0-1.286-1.691-3.193-4.027-3.193-2.521 0-4.571 2.056-4.571 4.583v41.233a2.001 2.001 0 0 1-3.75.969l-3.772-6.815c-1.154-2.086-3.78-2.856-5.855-1.719-2.028 1.112-2.845 3.639-1.861 5.752l15.889 31.252a9.24 9.24 0 0 0 8.277 5.083h18.692c10.259 0 18.606-8.364 18.606-18.644a2 2 0 0 1 4 0C104.204 113.842 94.063 124 81.598 124"/></svg>');
         background-repeat: no-repeat;

     
       }
    .glover_title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
  }

.over_sec .an-sort-select{
  background-image:url('data:image/svg+xml,<svg id="Layer_1" enable-background="new 0 0 128 128" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><path id="Down_Arrow_3_" d="m64 88c-1.023 0-2.047-.391-2.828-1.172l-40-40c-1.563-1.563-1.563-4.094 0-5.656s4.094-1.563 5.656 0l37.172 37.172 37.172-37.172c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656l-40 40c-.781.781-1.805 1.172-2.828 1.172z"/></svg>');
      background-position: 95% center;
    background-size: 20px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #E1E4EC;
    color: #2C2A33;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    min-height: 41px;
    padding: 0 15px; 
}


.tracked_post .stat-icon.blue{
    background-image: url('data:image/svg+xml,<svg version="1.1" id="fi_709612" xmlns="http://www.w3.org/2000/svg" fill="%230877f9" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve"><g><g><path d="M508.745,246.041c-4.574-6.257-113.557-153.206-252.748-153.206S7.818,239.784,3.249,246.035c-4.332,5.936-4.332,13.987,0,19.923c4.569,6.257,113.557,153.206,252.748,153.206s248.174-146.95,252.748-153.201C513.083,260.028,513.083,251.971,508.745,246.041z M255.997,385.406c-102.529,0-191.33-97.533-217.617-129.418c26.253-31.913,114.868-129.395,217.617-129.395c102.524,0,191.319,97.516,217.617,129.418C447.361,287.923,358.746,385.406,255.997,385.406z"></path></g></g><g><g><path d="M255.997,154.725c-55.842,0-101.275,45.433-101.275,101.275s45.433,101.275,101.275,101.275s101.275-45.433,101.275-101.275S311.839,154.725,255.997,154.725z M255.997,323.516c-37.23,0-67.516-30.287-67.516-67.516s30.287-67.516,67.516-67.516s67.516,30.287,67.516,67.516S293.227,323.516,255.997,323.516z"></path></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
   
}

.tracked_post .stat-icon.purple{
  background-image: url('data:image/svg+xml,<svg id="fi_14418636" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m45.5 4a18.53 18.53 0 0 0 -13.5 5.86 18.5 18.5 0 0 0 -32 12.64c0 18.42 29.71 36.5 31 37.21a2 2 0 0 0 2.06 0c1.23-.71 30.94-18.79 30.94-37.21a18.52 18.52 0 0 0 -18.5-18.5zm-13.5 51.64c-5.17-3.3-28-18.72-28-33.14a14.5 14.5 0 0 1 26.36-8.33 2 2 0 0 0 3.27 0 14.5 14.5 0 0 1 26.37 8.33c0 14.41-22.83 29.83-28 33.14z" fill="%23951aff"></path></svg>');
}
.tracked_post .stat-icon.orange{
  background-image:url('data:image/svg+xml,<svg version="1.1" id="fi_54467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" fill="%23ff7600"><g><g id="_x31__10_"><g><path d="M306,0C136.992,0,0,119.875,0,267.75c0,84.514,44.848,159.751,114.75,208.826V612l134.047-81.339c18.552,3.061,37.638,4.839,57.203,4.839c169.008,0,306-119.875,306-267.75C612,119.875,475.008,0,306,0z M306,497.25c-22.338,0-43.911-2.601-64.643-7.019l-90.041,54.123l1.205-88.701C83.5,414.133,38.25,345.513,38.25,267.75c0-126.741,119.875-229.5,267.75-229.5c147.875,0,267.75,102.759,267.75,229.5S453.875,497.25,306,497.25z"></path></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
}

/*Tracked posts*/
  .al-filters {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 0px;
   
    }

    .al-search {
      position: relative;
      width: 385px;
    }

    .al-search input {
      width: 100%;
      height: 38px;
      padding: 0 42px 0 40px;
      border: 1px solid #e1e6eb;
      border-radius: 7px;
      outline: none;
      color: #374151;
      font-size: 13px;
      background: #fff;
    }

    .al-search input::placeholder {
      color: #9ca3af;
    }

    .al-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #9aa4af;
      font-size: 16px;
    }

    .al-search-submit {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      background: transparent;
      color: #52606d;
      cursor: pointer;
      font-size: 17px;
    }

    .al-select,
    .al-date {
      height: 38px;
      border: 1px solid #e1e6eb;
      border-radius: 7px;
      background: #fff;
      color: #4b5563;
      font-size: 13px;
      padding: 0 12px;
      outline: none;
          appearance: none;
    }

    .al-select {
      width: 170px;
        background-image:url('data:image/svg+xml,<svg id="Layer_1" enable-background="new 0 0 128 128" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><path id="Down_Arrow_3_" d="m64 88c-1.023 0-2.047-.391-2.828-1.172l-40-40c-1.563-1.563-1.563-4.094 0-5.656s4.094-1.563 5.656 0l37.172 37.172 37.172-37.172c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656l-40 40c-.781.781-1.805 1.172-2.828 1.172z"/></svg>');
      background-position: 95% center;
    background-size: 15px;
        background-repeat: no-repeat;
    }

    .al-date {
      width: 195px;
    }

    .al-date-wrap {
         position: relative;
    border-radius: 8px;
    box-shadow: inset 0px 0px 0px 1px #dfdfdf;
    padding-left: 8px;
    }
    .al-date-wrap span.frm {
    color: #4b5563;
    font-size: 13px;
    padding: 0 5px;
    font-weight: 500;
  }

    .al-date-wrap input {
      padding-right: 36px;
    }

    .al-calendar {
         position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    width: 20px;
    }
    .al-calendar svg {
      vertical-align: bottom;
  }

    .al-reset {
      height: 38px;
      padding: 0 17px;
      border: 1px solid #e1e6eb;
      border-radius: 7px;
      background: #fff;
      color: #4b5563;
      font-size: 13px;
      cursor: pointer;
    }

    .al-reset:hover {
      background: #f8fafc;
    }

    .al-track-btn {
      margin-left: auto;
      
    }

    .al-track-btn:hover {
      filter: brightness(0.97);
    }

    /* =========================
       TABLE
    ========================= */

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

    .al-table {
      width: 100%;
      min-width: 1250px;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }

   

    .al-table tbody td {
      height: 70px;
      padding: 8px 16px;
      border-bottom: 1px solid #edf0f3;
      color: #374151;
      font-size: 12px;
      vertical-align: middle;
      background: #fff;
    }

    .al-table tbody tr:hover td {
      background: #fafcff;
    }

    .al-table tbody tr:last-child td {
      border-bottom: 0;
    }

    /* Column widths */

    .al-table th:nth-child(1),
    .al-table td:nth-child(1) {
      width: 270px;
    }

    .al-table th:nth-child(2),
    .al-table td:nth-child(2) {
      width: 165px;
    }

    .al-table th:nth-child(3),
    .al-table td:nth-child(3) {
      width: 145px;
    }

    .al-table th:nth-child(4),
    .al-table td:nth-child(4) {
      width: 120px; 
    }

    .al-table th:nth-child(5),
    .al-table td:nth-child(5) {
      width: 125px; 
    }

    .al-table th:nth-child(6),
    .al-table td:nth-child(6) {
      width: 120px;
       
    }

    .al-table th:nth-child(7),
    .al-table td:nth-child(7) {
      width: 105px; 
    }

    .al-table th:nth-child(8),
    .al-table td:nth-child(8) {
      width: 110px; 
    }

    .al-table th:nth-child(9),
    .al-table td:nth-child(9) {
      width: 120px; 
      text-align: left;
    }
    .al-table th svg {
       width: 16px;
    vertical-align: middle;
    fill: #6B7280;
  }
    .al-table th svg path {
    fill: #6B7280;
  }

    /* =========================
       POST PREVIEW
    ========================= */

    .al-post-preview {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .al-thumb {
      width: 78px;
      height: 46px;
      flex: 0 0 78px;
      border-radius: 6px;
      overflow: hidden;
      background: #eef2f5;
    }

    .al-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .al-post-title {
      min-width: 0;
      color: #27313b;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* =========================
       PLATFORM
    ========================= */

    .al-platform {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      color: #374151;
    }

    .al-platform-icon {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .al-instagram {
      background: #e1306c;
    }

    .al-facebook {
      background: #1877f2;
    }

    .al-tiktok {
      background: #050505;
    }

    .al-linkedin {
      background: #0a66c2;
    }

    /* =========================
       METRICS
    ========================= */

    .al-number {
      font-weight: 600;
      color: #4b5563;
    }

    .al-rate {
      font-weight: 600;
      color: #4b5563;
    }

    /* =========================
       PERMALINK
    ========================= */

    .al-open {
      color: #4338ca;
      font-size: 12px;
      font-weight: 500;
      text-decoration: underline;
      cursor: pointer;
    }

    .al-open:hover {
      color: #312e81;
    }

    /* =========================
       DETAIL BUTTON
    ========================= */

    .al-detail {
    cursor: pointer;
    border-radius: 9px;
    border: 1px solid #E1E4EC;
    background: #FDFDFE;
    color: #2C2A33;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.1s, background 0.1s;
    line-height: 1;
    min-height: 33px;
    padding: 0 11px;
  }

    .al-detail:hover {
      background: #f8fafc;
      border-color: #d4dae0;
    }

    /* =========================
       MORE MENU
    ========================= */

    .al-more {
      border: 0;
      background: transparent;
      color: #4b5563;
      font-size: 19px;
      line-height: 1;
      padding: 5px;
      cursor: pointer;
    }

    .al-more:hover {
      color: #111827;
    }

    /* =========================
       EMPTY / LOADING
    ========================= */

    .al-empty,
    .al-loading,
    .al-error {
      padding: 40px;
      text-align: center;
      font-size: 13px;
      color: #8a96a3;
    }

    .al-error {
      color: #dc2626;
    }


.al-growth-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*account growth*/
.acngrow_pane .panel {
    background: #ffffff;
    border: 1px solid #e8eceb;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 30, 25, 0.025);
}

.acngrow_pane .panel-title {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: #171c28;
}

.acngrow_pane .panel-subtitle {
    margin-top: 2px;
    font-size: 13px;
    color: #7b8491;
}

.acngrow_pane .panel-header {
    padding: 11px 14px 0;
}

.acngrow_pane .top-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 14px;
}

.acngrow_pane .chart-panel {
    height: 295px;
    position: relative;
}

.acngrow_pane .chart-legend {
    position: absolute;
    top: 35px;
    right: 19px;
    display: flex;
    align-items: center;
    gap: 17px;
    font-size: 13px;
    color: #202530;
        font-weight: 500;
}

.acngrow_pane .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.acngrow_pane .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.acngrow_pane .instagram {
    background: #e62f83;
}

.acngrow_pane .facebook {
    background: #2878ed;
}

.acngrow_pane .tiktok {
    background: #15171b;
}

.acngrow_pane .linkedin {
    background: #1686bd;
}

.acngrow_pane .chart-container {
       padding: 13px;
}

.acngrow_pane .chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.acngrow_pane .platform-panel {
    height: 295px;
}

.acngrow_pane .platform-list {
    padding: 12px 14px 0;
}

.acngrow_pane .platform-row {
    display: grid;
    grid-template-columns: 33px 1.2fr 0.85fr 0.85fr 0.9fr;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid #f1f3f3;
}

.acngrow_pane .platform-row:last-child {
    border-bottom: none;
}

.acngrow_pane .soplatform-icon {
       width: 29px;
    height: 29px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
}

.acngrow_pane .instagram-icon {
      background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="fi_15713420" viewBox="0 0 512 512"><defs><style>.cls-1{fill:url(%23Nepojmenovaný_přechod_27);}.cls-2{fill:%23fff;}</style><linearGradient gradientUnits="userSpaceOnUse" id="Nepojmenovaný_přechod_27" x1="328.27" x2="183.73" y1="508.05" y2="3.95"><stop offset="0" stop-color="%23ffdb73"></stop><stop offset="0.08" stop-color="%23fdad4e"></stop><stop offset="0.15" stop-color="%23fb832e"></stop><stop offset="0.19" stop-color="%23fa7321"></stop><stop offset="0.23" stop-color="%23f6692f"></stop><stop offset="0.37" stop-color="%23e84a5a"></stop><stop offset="0.48" stop-color="%23e03675"></stop><stop offset="0.55" stop-color="%23dd2f7f"></stop><stop offset="0.68" stop-color="%23b43d97"></stop><stop offset="0.97" stop-color="%234d60d4"></stop><stop offset="1" stop-color="%234264db"></stop></linearGradient></defs><title></title><rect class="cls-1" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"></rect><path class="cls-2" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"></path><path class="cls-2" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"></path><circle class="cls-2" cx="346.81" cy="163.23" r="21.07"></circle></svg>');
}

.acngrow_pane .facebook-icon {
   background-image:url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" height="6.827in" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.82666 6.82666" width="6.827in" xmlns="http://www.w3.org/2000/svg" id="fi_13051733"><g id="Layer_x0020_1"><rect fill="%231976d2" height="6.827" rx="1.456" width="6.827"></rect><path d="m4.19658 3.51299h-.546957v2.00372h-.82865v-2.00372h-.394118v-.704406h.394118v-.45565c0-.325795.154697-.83622.836161-.83622l.613618.00265354v.683575h-.445252c-.0731693 0-.175878.0365512-.175878.19187v.414602h.619563l-.0726063.703575z" fill="%23fff"></path></g></svg>'); 
 
}

.acngrow_pane .tiktok-icon {
     background-image: url('data:image/svg+xml,<svg height="512" viewBox="0 0 176 176" width="512" xmlns="http://www.w3.org/2000/svg" id="fi_3938055"><g id="Layer_2" data-name="Layer 2"><g id="_14.tiktok" data-name="14.tiktok"><path id="background" d="m144.52 173a532.59 532.59 0 0 1 -113 0 32.07 32.07 0 0 1 -28.52-28.48 532.59 532.59 0 0 1 0-113 32.07 32.07 0 0 1 28.48-28.52 532.59 532.59 0 0 1 113 0 32.07 32.07 0 0 1 28.52 28.48 532.59 532.59 0 0 1 0 113 32.07 32.07 0 0 1 -28.48 28.52z" fill="%23010101"></path><path id="icon" d="m74.73 143a35.1 35.1 0 0 1 0-70.2h8.57v17.13h-8.57a18 18 0 1 0 18 18v-74.93h17.13v8.56a18 18 0 0 0 18 18h8.57v17.1h-8.63a34.72 34.72 0 0 1 -18-5v36.24a35.13 35.13 0 0 1 -35.07 35.1z" fill="%23fff"></path></g></g></svg>');

}

 


.acngrow_pane .linkedin-icon {
    background-image: url('data:image/svg+xml,<svg height="512" viewBox="0 0 176 176" width="512" xmlns="http://www.w3.org/2000/svg" id="fi_3536569"><g id="Layer_2" data-name="Layer 2"><g id="linkedin"><path id="icon" d="m152 0h-128a24 24 0 0 0 -24 24v128a24 24 0 0 0 24 24h128a24 24 0 0 0 24-24v-128a24 24 0 0 0 -24-24zm-92 139.28a3.71 3.71 0 0 1 -3.71 3.72h-15.81a3.71 3.71 0 0 1 -3.72-3.72v-66.28a3.72 3.72 0 0 1 3.72-3.72h15.81a3.72 3.72 0 0 1 3.71 3.72zm-11.62-76.28a15 15 0 1 1 15-15 15 15 0 0 1 -15 15zm94.26 76.54a3.41 3.41 0 0 1 -3.42 3.42h-17a3.41 3.41 0 0 1 -3.42-3.42v-31.05c0-4.64 1.36-20.32-12.13-20.32-10.45 0-12.58 10.73-13 15.55v35.86a3.42 3.42 0 0 1 -3.37 3.42h-16.42a3.41 3.41 0 0 1 -3.41-3.42v-66.87a3.41 3.41 0 0 1 3.41-3.42h16.42a3.42 3.42 0 0 1 3.42 3.42v5.78c3.88-5.83 9.63-10.31 21.9-10.31 27.18 0 27 25.38 27 39.32z"></path></g></g></svg>');  

}

.acngrow_pane .platform-name {
    margin-left: 7px;
    font-size: 12px;
    font-weight: 650;
    color: #20242d;
}

.acngrow_pane .metric {
    line-height: 14px;
}

.acngrow_pane .metric-value {
    font-size: 13px;
    font-weight: 750;
}

.acngrow_pane .metric-label {
    font-size: 11px;
    color: #7f8995;
    margin-top: 1px;
}

.acngrow_pane .green {
    color: #10a957;
}

.acngrow_pane .red {
    color: #fa3b3f;
}

.acngrow_pane .bottom-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 15px;
}

 

.acngrow_pane .table-container {
    padding: 10px 13px 0;
}

.acngrow_pane .data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.acngrow_pane .data-table thead {
    background: #f8f8f9;
}

.acngrow_pane .data-table th {
   height: 29px;
    padding: 0 7px;
    text-align: left;
    color: #7c8795;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.acngrow_pane .data-table td {
    height: 35px;
    padding: 0 7px;
    border-top: 1px solid #f0f2f3;
    font-size: 11px;
    white-space: nowrap;
}

.acngrow_pane .date {
    color: #68727f;
    font-weight: 600;
}

.acngrow_pane .new {
    color: #0bab58;
    font-weight: 700;
}

.acngrow_pane .unfollow {
    color: #fa3e43;
    font-weight: 700;
}

.acngrow_pane .total {
    color: #0aa956;
    font-weight: 750;
}

.acngrow_pane .slash {
    color: #a7adb4;
    margin: 0 2px;
}

.acngrow_pane .column-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background-size: contain;
    margin-right: 4px;
    vertical-align: bottom;
}

.acngrow_pane .ig-column {
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="fi_15713420" viewBox="0 0 512 512"><defs><style>.cls-1{fill:url(%23Nepojmenovaný_přechod_27);}.cls-2{fill:%23fff;}</style><linearGradient gradientUnits="userSpaceOnUse" id="Nepojmenovaný_přechod_27" x1="328.27" x2="183.73" y1="508.05" y2="3.95"><stop offset="0" stop-color="%23ffdb73"></stop><stop offset="0.08" stop-color="%23fdad4e"></stop><stop offset="0.15" stop-color="%23fb832e"></stop><stop offset="0.19" stop-color="%23fa7321"></stop><stop offset="0.23" stop-color="%23f6692f"></stop><stop offset="0.37" stop-color="%23e84a5a"></stop><stop offset="0.48" stop-color="%23e03675"></stop><stop offset="0.55" stop-color="%23dd2f7f"></stop><stop offset="0.68" stop-color="%23b43d97"></stop><stop offset="0.97" stop-color="%234d60d4"></stop><stop offset="1" stop-color="%234264db"></stop></linearGradient></defs><title></title><rect class="cls-1" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"></rect><path class="cls-2" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"></path><path class="cls-2" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"></path><circle class="cls-2" cx="346.81" cy="163.23" r="21.07"></circle></svg>');
}

.acngrow_pane .fb-column {
     background-image:url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" height="6.827in" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.82666 6.82666" width="6.827in" xmlns="http://www.w3.org/2000/svg" id="fi_13051733"><g id="Layer_x0020_1"><rect fill="%231976d2" height="6.827" rx="1.456" width="6.827"></rect><path d="m4.19658 3.51299h-.546957v2.00372h-.82865v-2.00372h-.394118v-.704406h.394118v-.45565c0-.325795.154697-.83622.836161-.83622l.613618.00265354v.683575h-.445252c-.0731693 0-.175878.0365512-.175878.19187v.414602h.619563l-.0726063.703575z" fill="%23fff"></path></g></svg>'); 
 
}
.acngrow_pane .tt-column {
      background-image: url('data:image/svg+xml,<svg height="512" viewBox="0 0 176 176" width="512" xmlns="http://www.w3.org/2000/svg" id="fi_3938055"><g id="Layer_2" data-name="Layer 2"><g id="_14.tiktok" data-name="14.tiktok"><path id="background" d="m144.52 173a532.59 532.59 0 0 1 -113 0 32.07 32.07 0 0 1 -28.52-28.48 532.59 532.59 0 0 1 0-113 32.07 32.07 0 0 1 28.48-28.52 532.59 532.59 0 0 1 113 0 32.07 32.07 0 0 1 28.52 28.48 532.59 532.59 0 0 1 0 113 32.07 32.07 0 0 1 -28.48 28.52z" fill="%23010101"></path><path id="icon" d="m74.73 143a35.1 35.1 0 0 1 0-70.2h8.57v17.13h-8.57a18 18 0 1 0 18 18v-74.93h17.13v8.56a18 18 0 0 0 18 18h8.57v17.1h-8.63a34.72 34.72 0 0 1 -18-5v36.24a35.13 35.13 0 0 1 -35.07 35.1z" fill="%23fff"></path></g></g></svg>');

}

.acngrow_pane .li-column {
    background-image: url('data:image/svg+xml,<svg height="512" viewBox="0 0 176 176" width="512" xmlns="http://www.w3.org/2000/svg" id="fi_3536569"><g id="Layer_2" data-name="Layer 2"><g id="linkedin"><path id="icon" d="m152 0h-128a24 24 0 0 0 -24 24v128a24 24 0 0 0 24 24h128a24 24 0 0 0 24-24v-128a24 24 0 0 0 -24-24zm-92 139.28a3.71 3.71 0 0 1 -3.71 3.72h-15.81a3.71 3.71 0 0 1 -3.72-3.72v-66.28a3.72 3.72 0 0 1 3.72-3.72h15.81a3.72 3.72 0 0 1 3.71 3.72zm-11.62-76.28a15 15 0 1 1 15-15 15 15 0 0 1 -15 15zm94.26 76.54a3.41 3.41 0 0 1 -3.42 3.42h-17a3.41 3.41 0 0 1 -3.42-3.42v-31.05c0-4.64 1.36-20.32-12.13-20.32-10.45 0-12.58 10.73-13 15.55v35.86a3.42 3.42 0 0 1 -3.37 3.42h-16.42a3.41 3.41 0 0 1 -3.41-3.42v-66.87a3.41 3.41 0 0 1 3.41-3.42h16.42a3.42 3.42 0 0 1 3.42 3.42v5.78c3.88-5.83 9.63-10.31 21.9-10.31 27.18 0 27 25.38 27 39.32z"></path></g></g></svg>');  

}

.acngrow_pane .sort {
    color: #b1b7bf;
    font-size: 8px;
    margin-left: 2px;
}

 

.acngrow_pane .distribution-content {
    display: flex;
    align-items: center;
    height: 195px;
    padding: 8px 18px 10px;
}

.acngrow_pane .donut {
     width: 30%;
}

 .acngrow_pane .donut svg {
    width: 100%;
    height: auto;
}

.acngrow_pane .donut-label {
    font-size: 10px;
    color: #7d8793;
    margin-top: 1px;
}

.acngrow_pane .distribution-list {
       margin-left: 26px;
    width: 70%;
}

.acngrow_pane .distribution-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    min-height: 38px;
    border-bottom: 1px solid #f0f2f3;
}

.acngrow_pane .distribution-row:last-child {
    border-bottom: none;
}

.acngrow_pane .distribution-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.acngrow_pane .distribution-name {
       font-size: 13px;
    font-weight: 600;
    color: #272c35;
}

.acngrow_pane .distribution-values {
    text-align: right;
    white-space: nowrap;
}

.acngrow_pane .distribution-number {
       font-size: 13px;
    font-weight: 700;
    color: #292e37;
}

.acngrow_pane .distribution-percent {
       margin-left: 39px;
    color: #7e8792;
    font-size: 12px;
}

.acngrow_pane .stat-icon.blue{
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" data-name="Layer 8" fill="%230060f3"><path d="M26 24h-1v-1c0-.55-.45-1-1-1s-1 .45-1 1v1h-1c-.55 0-1 .45-1 1s.45 1 1 1h1v1c0 .55.45 1 1 1s1-.45 1-1v-1h1c.55 0 1-.45 1-1s-.45-1-1-1m-4.26-3.09a1 1 0 0 0 .48-1.33A8 8 0 0 0 18 15.61a6.5 6.5 0 1 0-8.03-.01A8 8 0 0 0 4.99 23v4c0 .55.45 1 1 1s1-.45 1-1v-4a6 6 0 0 1 6-6h2a6 6 0 0 1 5.42 3.42 1 1 0 0 0 1.33.48zM14 6a4.5 4.5 0 1 1-.01 9.01A4.5 4.5 0 0 1 14 6"/></svg>');
}
.acngrow_pane .stat-icon.orange{
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg" fill="%23ff7600"><path d="M3.038.257a1.676 1.676 0 0 0-.965 3.05A2.73 2.73 0 0 0 .359 5.834a.265.265 0 0 0 .53 0 2.19 2.19 0 0 1 3.345-1.865.266.266 0 1 0 .28-.452 2.7 2.7 0 0 0-.484-.23c.416-.305.688-.796.688-1.35 0-.923-.756-1.68-1.68-1.68m0 .53c.638 0 1.15.513 1.15 1.15s-.512 1.149-1.15 1.149-1.148-.51-1.148-1.149S2.4.787 3.038.787m1.358 3.44a.265.265 0 0 0-.184.455l.474.474-.474.474a.265.265 0 1 0 .373.375l.475-.475.474.475a.266.266 0 0 0 .376-.375l-.475-.474.475-.474a.265.265 0 0 0-.194-.455.27.27 0 0 0-.182.08l-.474.475-.475-.475a.27.27 0 0 0-.189-.08" paint-order="stroke fill markers"/></svg>');
}

/*inbox css*/
.inbox_wrapper,
.inbox_wrapper * {
    box-sizing: border-box;
}

.inbox_wrapper {
    width: 100%; 
       height: calc(100vh - 230px);
    min-height: 600px;
    display: grid;
    grid-template-columns:340px 380px minmax(450px, 1fr);
    gap: 8px;
   
}

.inbox_wrapper button,
.inbox_wrapper input,
.inbox_wrapper textarea {
    font-family: inherit;
}

.inbox_wrapper button {
    cursor: pointer;
}


/* =========================
   LEFT SIDEBAR
========================= */

.inbox_wrapper .conacf_bar {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    overflow: hidden;
}

.inbox_wrapper .conacf-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
}

.inbox_wrapper .conacf-title h3 {
    margin: 0;
    font-size: 15px;
}

.inbox_wrapper .add-account {
    border: 1px solid #e4e7ec;
    background: #fff;
    color:#0194D5;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 13px;    font-weight: 500;
}

.inbox_wrapper .accounts {
    padding: 0 10px 12px;
}

.inbox_wrapper .account {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px;
    border: 1px solid #edf0f4;
    border-radius: 8px;
}

.inbox_wrapper .account + .account {
    margin-top: 4px;
}

.inbox_wrapper .account-icon {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 25px;
    font-weight: bold;
}

.inbox_wrapper .instagram {
 background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="fi_15713420" viewBox="0 0 512 512"><defs><style>.cls-1{fill:url(%23Nepojmenovaný_přechod_27);}.cls-2{fill:%23fff;}</style><linearGradient gradientUnits="userSpaceOnUse" id="Nepojmenovaný_přechod_27" x1="328.27" x2="183.73" y1="508.05" y2="3.95"><stop offset="0" stop-color="%23ffdb73"></stop><stop offset="0.08" stop-color="%23fdad4e"></stop><stop offset="0.15" stop-color="%23fb832e"></stop><stop offset="0.19" stop-color="%23fa7321"></stop><stop offset="0.23" stop-color="%23f6692f"></stop><stop offset="0.37" stop-color="%23e84a5a"></stop><stop offset="0.48" stop-color="%23e03675"></stop><stop offset="0.55" stop-color="%23dd2f7f"></stop><stop offset="0.68" stop-color="%23b43d97"></stop><stop offset="0.97" stop-color="%234d60d4"></stop><stop offset="1" stop-color="%234264db"></stop></linearGradient></defs><title></title><rect class="cls-1" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"></rect><path class="cls-2" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"></path><path class="cls-2" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"></path><circle class="cls-2" cx="346.81" cy="163.23" r="21.07"></circle></svg>'); 
  background-size: contain;
}

.inbox_wrapper .facebook {
     background-image:url('data:image/svg+xml,<svg clip-rule="evenodd" fill-rule="evenodd" height="6.827in" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.82666 6.82666" width="6.827in" xmlns="http://www.w3.org/2000/svg" id="fi_13051733"><g id="Layer_x0020_1"><rect fill="%231976d2" height="6.827" rx="1.456" width="6.827"></rect><path d="m4.19658 3.51299h-.546957v2.00372h-.82865v-2.00372h-.394118v-.704406h.394118v-.45565c0-.325795.154697-.83622.836161-.83622l.613618.00265354v.683575h-.445252c-.0731693 0-.175878.0365512-.175878.19187v.414602h.619563l-.0726063.703575z" fill="%23fff"></path></g></svg>');
     background-size: contain;
}

.inbox_wrapper .account-info {
    flex: 1;
}

.inbox_wrapper .account-info strong {
    display: block;
    font-size: 14px;
}

.inbox_wrapper .account-info span {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
}

.inbox_wrapper .account-info i {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: #16b364;
}

.inbox_wrapper .check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #1677e8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}


/* =========================
   FILTERS
========================= */

.inbox_wrapper .filters {
    padding: 14px 18px;
    border-top: 1px solid #e4e7ec;
}

.inbox_wrapper .filter-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 13px;
}

.inbox_wrapper .filter-heading strong {
    font-size: 15px;
}

.inbox_wrapper .filter-heading a {
    color: #4599ef;
    font-size: 13px;
    text-decoration: none;
}

.inbox_wrapper .search {
    height: 38px;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.inbox_wrapper .search svg {
    width: 16px;
    height: 16px;
}

.inbox_wrapper .search span {
    font-size: 23px;
    color: #475467;
}

.inbox_wrapper .search input {
    width: 100%;
    border: 0;
    outline: 0;
    padding-left: 8px;
    font-size: 14px;
}

.inbox_wrapper .keyword-filter {
    margin-top: 10px;
}

.inbox_wrapper .keyword-filter > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
}
 
.inbox_wrapper .select select {
    width: 100%;
}

.inbox_wrapper .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.inbox_wrapper .tags span {
       background: #eef7ff;
    color: #0194D5;
    border-radius: 8px;
    padding: 6px 10px;

    font-size: 12px;    font-weight: 500;
}


/* =========================
   MENU
========================= */

.inbox_wrapper .keytaglist {
    padding: 0 10px;    overflow-y: auto;
        height: calc(27vh - 0px);
}

.inbox_wrapper .keytaglist a {
       height: 35px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    color: #070517;
    text-decoration: none;
    font-size: 14px;
    border-radius: 7px;
    font-weight: 500;
}

.inbox_wrapper .keytaglist a + a {
    margin-top: 2px;
}

.inbox_wrapper .keytaglist a span:first-child {
    width: 17px;
    text-align: center;
    font-size: 18px;
}

.inbox_wrapper .keytaglist a span:nth-child(2) {
    flex: 1;
}

.inbox_wrapper .keytaglist a b {
       color: #515876;
    font-weight: 500;
    background: #eff1f5;
    padding: 1px 6px;
    border-radius: 6px;
}
.inbox_wrapper .keytaglist a.active b{
  background:#bfe0fe;
  color:#0077fd;
}

.inbox_wrapper .keytaglist a.active {
    background: #eaf4ff;
    color: #0194D5;
}


/* =========================
   MESSAGE LIST
========================= */

.inbox_wrapper .message-list {
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    overflow: hidden;
}

.inbox_wrapper .list-header {
    height: 60px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaecf0;
}

.inbox_wrapper .list-header h2 {
    margin: 0;
    font-size: 16px;
}

.inbox_wrapper .list-header h2 span {
    color: #667085;
    font-weight: 400;
}

.inbox_wrapper .list-actions {
    display: flex;
    gap: 8px;
}
.sortmsg .al-select {
    width: auto;
    padding-right: 27px;
    font-weight: 600;
}

.inbox_wrapper .list-actions button {
    height: 36px;
    background: white;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    padding: 0 10px;
    color: #344054;
}

.inbox_wrapper .list-actions .filter-btn {
    width: 38px;
        padding: 5px;
}

.inbox_wrapper .messages {
    overflow-y: auto;
    height:calc(100vh - 290px);
}

.inbox_wrapper .message {
    min-height: 98px;
    padding: 13px 15px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid #edf0f3;
    cursor: pointer;
}

.inbox_wrapper .message:hover,
.inbox_wrapper .message.active {
    background: #f1f8ff;
}
.ins_icon svg {
    width: 100%;
    vertical-align: middle;
}

.ins_icon {
        position: absolute;
    bottom: -9px;
    right: 0;
    width: 21px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    height: 20px;
    padding: 0 1px;
}

.inbox_wrapper .avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    background: linear-gradient(135deg, #8b5e3c, #e7a77c); 
    position:relative;
}
.inbox_wrapper .avatar img {
    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;
}

.inbox_wrapper .avatar.blue {
    background: linear-gradient(135deg, #276b93, #80b4d2);
}

.inbox_wrapper .avatar.pink {
    background: linear-gradient(135deg, #704631, #d69a78);
}

.inbox_wrapper .message-content {
    min-width: 0;
    flex: 1;
}

.inbox_wrapper .message-content strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.inbox_wrapper .message-content p {
       margin: 0;
    color: #475467;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.inbox_wrapper .message-content small {
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
}

.inbox_wrapper .ig {
    color: #d62976;
    font-weight: bold;
}

.inbox_wrapper .fb {
    color: #1877f2;
    font-weight: bold;
}

.inbox_wrapper .message-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.inbox_wrapper .ig svg {
    width: 20px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.inbox_wrapper .message-meta .time {
       white-space: nowrap;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}

.inbox_wrapper .message-meta .count {
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0194D5;
    color: white;
    font-size: 12px;
}


/* =========================
   CHAT
========================= */

.inbox_wrapper .chat {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inbox_wrapper .chat-header {
    height: 82px;
    flex: 0 0 82px;
    padding: 0 24px;
    border-bottom: 1px solid #eaecf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inbox_wrapper .customer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 40%;
}

.inbox_wrapper .avatar.big {
    width: 45px;
    height: 45px;
}

.inbox_wrapper .customer h2 {
    margin:0px;
    font-size: 18px;
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox_wrapper .customer span {
        color: #667085;
    font-size: 14px;
    font-weight: 400;
}

.inbox_wrapper .chat-actions {
    display: flex;
    align-items: center;justify-content: flex-end;
    gap: 9px;
        width: 56%;
}

.inbox_wrapper .chat-actions button {
    height: 38px;
    padding: 0 14px;
    background:#f9fafb;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    font-size: 13px;
}

.inbox_wrapper .chat-actions .more {
    width: 40px;
    padding: 0;
}

.inbox_wrapper .instagram-logo {
    color: #d62976;
    font-size: 25px;
    font-weight: bold;
    margin-right: 5px;
}
.inbox_wrapper .chat-actions select.al-select {
   background-color: transparent;
    width: auto;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 8px;
    font-weight: 600;
}
.inbox_wrapper .chat-actions button svg {
    width: 20px;
}
.inbox_wrapper .soc_logo svg{    width: 32px;
    vertical-align: middle;}

.inbox_wrapper .conversation {
    flex: 1;
    overflow-y: auto;
    padding: 20px 25px;
}

.inbox_wrapper .date {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #667085;    font-weight: 400;
    font-size: 14px;
    margin: 0 0 28px;
}

.inbox_wrapper .date::before,
.inbox_wrapper .date::after {
    content: "";
    height: 1px;
    background: #e4e7ec;
    flex: 1;
}

.inbox_wrapper .incoming {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.inbox_wrapper .incoming .avatar {
    width: 42px;
    height: 42px;
}

.inbox_wrapper .bubble {
       border-radius: 12px;
    padding: 15px 18px;
    line-height: 1.45;
    font-size: 14px;
    color: #000;
    font-weight: 500;
  }

.inbox_wrapper .incoming-bubble {
    background: #f1f3f5;
    max-width: 395px;
}

.inbox_wrapper .incoming time {
    display: block;
    color: #667085;
    font-size: 12px;
    margin-top: 8px;
}

.inbox_wrapper .outgoing {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    margin: 5px 0 28px;
        gap: 12px;
}

.inbox_wrapper .outgoing-bubble {
    max-width: 425px;
    background: #1683f5;
    color: white;
}

.inbox_wrapper .sent-time {
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
}
.inbox_wrapper .sent-time svg {
    width: 20px;
    vertical-align: middle;
    fill: #7c7c7c;
}
.inbox_wrapper .sent-time_seen svg {
  
    fill: #1f81fe;
}
.outgoing .sent-time {
    text-align: right;
}

.inbox_wrapper .second {
    margin-top: 5px;
}


/* =========================
   REPLY
========================= */

.inbox_wrapper .reply-area {
    margin: 0 25px 15px;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    overflow: hidden;
        padding: 15px;
}

.inbox_wrapper .reply-tabs {
    height: auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaecf0;
    padding-left: 12px;
}

.inbox_wrapper .reply-tabs button {
   height: auto;
    border: 0;
    background: transparent;
    padding: 5px 15px;
    color: #667085;
    font-weight: 600;
}

.inbox_wrapper .reply-tabs button.active {
    color: #0194D5;
    border-bottom: 2px solid #0194D5;
}
.inbox_wrapper .keytaglist a svg {
    vertical-align: middle;
}

.inbox_wrapper .reply-area textarea {
    width: 100%;
    height: 100px;
    display: block;

    outline: 0;
    resize: none;
    padding: 14px;
    font-size: 14px;
        border: 1px solid #e4e7ec;
        border-top:none;
}
.inbox_wrapper .reply-bottom .tools svg {
    width: 17px;
}
.inbox_wrapper .reply-bottom {
         padding: 6px 0px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inbox_wrapper .tools {
    display: flex;
    gap: 15px;
    color: #344054;
    font-size: 20px;
}
.chat-header .avatarinfo{
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox_wrapper .send {
    background: #087ff5;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 14px;
}

.inbox_wrapper .send svg {
    width: 18px;
    vertical-align: middle;
    fill: #fff;
    margin-bottom: 2px;
}
.inbox_wrapper .send svg path{
   fill: #fff;
}

/*brand tags*/

/* =========================================
   RESET / WRAPPER
========================================= */

.mentions_wrapper,
.mentions_wrapper * {
    box-sizing: border-box;
}

.mentions_wrapper {
    width: 100%; 
    color: #101828; 
}

.mentions_wrapper button,
.mentions_wrapper input,
.mentions_wrapper select {
    font-family: inherit;
}


/* =========================================
   PLATFORM TABS
========================================= */

.mentions_wrapper .platform-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mentions_wrapper .platform-tabs::-webkit-scrollbar {
    display: none;
}

.mentions_wrapper .platform-tab {
       flex: 0 0 auto;
    height: 38px;
    padding: 0 18px;
    border: 1px solid #edf0f3;
    border-radius: 22px;
    background: #fff;
    color: #344054;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 16px;
    white-space: nowrap;
    font-weight: 500;
}
.mentions_wrapper .platform-tab svg {
    width: 25px; vertical-align: middle;
}

.mentions_wrapper .platform-tab.active {
    border-color:#0194D5;
    color: #0194D5;
    background: #e5f0fe;
    font-weight: 700;
}

.mentions_wrapper .platform-tab span {
    font-weight: 700;
    font-size: 17px;
}


/* PLATFORM COLORS */

.mentions_wrapper .instagram-icon {
    color: #e1306c;
}

.mentions_wrapper .facebook-icon {
    color: #1877f2;
}

.mentions_wrapper .linkedin-icon {
    color: #0a66c2;
}

.mentions_wrapper .tiktok-icon {
    color: #000;
}

.mentions_wrapper .youtube-icon {
    color: #ff0000;
}

.mentions_wrapper .twitter-icon {
    color: #111;
}

.mentions_wrapper .pinterest-icon {
    color: #e60023;
}


/* =========================================
   GRID
========================================= */

.mentions_wrapper .top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


/* =========================================
   CARD
========================================= */

.mentions_wrapper .dashboard-card {
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 8px;
    overflow: hidden;
}

.mentions_wrapper .card-header {
    min-height: 61px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mentions_wrapper .card-header h2,
.mentions_wrapper .card-header-title h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.mentions_wrapper .card-header p,
.mentions_wrapper .card-header-title p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 15px;
}

.mentions_wrapper .view-all {
    height: 34px;
    padding: 0 13px;
    border: 1px solid #e4e7ec;
    background: #fff;
    border-radius: 7px;
    color: #1d2939;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   TABLE
========================================= */

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

.mentions_wrapper .mentions-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mentions_wrapper .mentions-table th {
        height: 31px;
    padding: 0 10px;
    background: #f8fafb;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #e8eaed;
}

.mentions_wrapper .mentions-table td {
       height: auto;
    padding: 7px 10px;
    color: #2a2a2a;
    font-size: 14px;
    border-bottom: 1px solid #eaecf0;
    white-space: nowrap;
}

.mentions_wrapper .mentions-table tbody tr:last-child td {
    border-bottom: 0;
}

.mentions_wrapper .mentions-table td:first-child,
.mentions_wrapper .mentions-table th:first-child {
    width: 48px;
    text-align: center;
}

.mentions_wrapper .mentions-table td:nth-child(2),
.mentions_wrapper .mentions-table th:nth-child(2) {
    width: 29%;
}

.mentions_wrapper .mentions-table a {
    color: #0194D5;
    text-decoration: none;
    font-weight: 600;
}


/* =========================================
   POST TYPE
========================================= */

.mentions_wrapper .post-type-table td:nth-child(2),
.mentions_wrapper .post-type-table th:nth-child(2) {
    width: 34%;
}

.mentions_wrapper .type-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    font-size: 17px;
    font-weight: 600;
    vertical-align: middle;
}

.mentions_wrapper .image-icon *{
    fill: #1595f5;
}

.mentions_wrapper .reel-icon *{
   stroke: #8d35ff;
}

.mentions_wrapper .story-icon *{
    fill: #a134ff;
}

.mentions_wrapper .youtube-small *{
    stroke: #ff0000;
}

.mentions_wrapper .pinterest-small *{
    stroke: #e60023;
}

 


/* =========================================
   RECENT MENTIONS
========================================= */

.mentions_wrapper .recent-card {
    margin-top: 14px;
}

.mentions_wrapper .recent-header {
    min-height: 63px;
    padding: 8px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mentions_wrapper .card-header-title {
    flex: 1;
    min-width: 250px;
}

.mentions_wrapper .mention-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mentions_wrapper .mention-search {
    height: 36px;
    width: 370px;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.mentions_wrapper .mention-search > span {
    padding-left: 10px;
    color: #667085;
}

.mentions_wrapper .mention-search input {
    min-width: 0;
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0 8px;
    font-size: 13px;
}
.mention-search svg {
    width: 12px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.mentions_wrapper .mention-search input::placeholder {
    color: #98a2b3;
}

.mentions_wrapper .mention-search button {
    width: 38px;
    height: 100%;
    border: 0;
    border-left: 1px solid #e4e7ec;
    background: #fff;
    font-size: 18px;
}

.mentions_wrapper .mention-filters select {
      width: 140px;
    outline: none;
        color: #000;
    font-weight: 600;
}

.mentions_wrapper .reset-btn {
    height: 36px;
    padding: 0 15px;
    border: 1px solid #e4e7ec;
    background: #fff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================
   RECENT TABLE
========================================= */

.mentions_wrapper .recent-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mentions_wrapper .recent-table th {
       height: auto;
    padding: 8px 10px;
    background: #f8fafb;
    color: #373e4c;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #cdcdcd;
}

.mentions_wrapper .recent-table td { 
   padding: 4px 10px;
    border-bottom: 1px solid #eaecf0;
    font-size: 13px;
    color: #282828;
    white-space: nowrap;
    font-weight: 400;
}

.mentions_wrapper .recent-table tbody tr:last-child td {
    border-bottom: 0;
}

.mentions_wrapper .recent-table th:first-child,
.mentions_wrapper .recent-table td:first-child {
    width: 40px;
    text-align: center;
}

.mentions_wrapper .recent-table th:nth-child(2) {
    width: 27%;
}

.mentions_wrapper .recent-table th:nth-child(3) {
    width: 8%;
}

.mentions_wrapper .recent-table th:nth-child(4) {
    width: 10%;
}

.mentions_wrapper .recent-table th:nth-child(5) {
    width: 17%;
}

.mentions_wrapper .recent-table th:nth-child(6) {
    width: 11%;
}

.mentions_wrapper .recent-table th:nth-child(7) {
    width: 16%;
}

.mentions_wrapper .recent-table th:nth-child(8) {
    width: 6%;
}


/* =========================================
   POST PREVIEW
========================================= */

.mentions_wrapper .post-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.mentions_wrapper .post-preview p {
      margin: 0 0 2px;
    font-size: 13px;
    color: #2a2a2a;
}

.mentions_wrapper .post-preview a {
       color: #0194D5;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}

.mentions_wrapper .brandpost_image {
    width: 60px;
    height: 31px;
    flex: 0 0 60px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}
.mentions_wrapper .brandpost_image img{
  width: 100%;
  height: 100%;    border-radius: 6px;
}
 
 

/* =========================================
   SOCIAL ICONS
========================================= */

.mentions_wrapper .social {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.mentions_wrapper .instagram-bg {
    background: linear-gradient(135deg, #feda75, #d62976, #4f5bd5);
}

.mentions_wrapper .facebook-bg {
    background: #1877f2;
}

.mentions_wrapper .tiktok-bg {
    background: #000;
}

.mentions_wrapper .linkedin-bg {
    background: #0a66c2;
}

.mentions_wrapper .pinterest-bg {
    background: #e60023;
}
 

.mentions_wrapper .hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mentions_wrapper .hashtags span {
display: inline-block;
    padding: 5px 8px;
    border-radius: 5px;
    background: #e8f4ff;
    color: #0194D5;
    font-size: 12px;
    font-weight: 500;
}
 

.mentions_wrapper .action-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mentions_wrapper .view-btn {
     height: 29px;
    padding: 0 13px;
    border: 1px solid #c5c5c5;
    border-radius: 6px;
    background: #fff;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
}

/* ── Card media library picker (prefix: cmp-) ── */
.cmp-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 15, 0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 10050;
  padding: 24px;
}
.cmp-overlay.is-open { display: flex; }
.cmp-modal {
  background: #FFFFFF;
  border-radius: 10px;
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.cmp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #E8E8E5;
  flex-shrink: 0;
}
.cmp-title { font-size: 14px; font-weight: 600; color: #0F0F0F; flex-shrink: 0; }
.cmp-search {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: #0F0F0F;
  background: #F7F7F5;
  border: 1px solid #E8E8E5;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
}
.cmp-search:focus { border-color: #6366F1; background: #FFFFFF; }
.cmp-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: #6B7280; cursor: pointer;
}
.cmp-close:hover { background: #F3F3F1; color: #0F0F0F; }
.cmp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px;
  background: #FAFAFA;
}
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  align-content: start;
}
.cmp-tile {
  position: relative;
  border: 1px solid #E8E8E5;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cmp-tile:hover { border-color: #D4D4D0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); }
.cmp-tile.is-selected {
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.cmp-tile.is-attached { opacity: 0.55; cursor: not-allowed; }
.cmp-tile.is-attached:hover { border-color: #E8E8E5; box-shadow: none; }
.cmp-tile-thumb {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: #F3F3F1;
}
.cmp-tile-fill { width: 100%; height: 100%; object-fit: cover; display: block; background: #F3F3F1; }
.cmp-tile-badge {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  padding: 2px 6px;
  background: rgba(15, 15, 15, 0.65);
  color: #FFFFFF;
  border-radius: 4px;
  text-transform: uppercase;
}
.cmp-tile-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #D4D4D0;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
}
.cmp-tile.is-selected .cmp-tile-check {
  background: #6366F1;
  border-color: #6366F1;
  color: #FFFFFF;
}
.cmp-tile.is-attached .cmp-tile-check {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
}
.cmp-tile-name {
  padding: 6px 8px;
  font-size: 11px;
  color: #4B5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-empty {
  padding: 40px 20px;
  text-align: center;
  color: #9CA3AF;
  font-size: 13px;
}
.cmp-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #E8E8E5;
  background: #FFFFFF;
  flex-shrink: 0;
}
.cmp-footer-info { font-size: 12px; color: #6B7280; }
.cmp-footer-actions { display: flex; gap: 8px; }
.cmp-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: opacity 0.1s, background 0.1s;
}
.cmp-btn-ghost { background: #FFFFFF; border-color: #E8E8E5; color: #4B5563; }
.cmp-btn-ghost:hover { background: #F7F7F5; }
.cmp-btn-primary { background: #171717; color: #FFFFFF; border-color: #171717; }
.cmp-btn-primary:hover:not(:disabled) { opacity: 0.85; }
.cmp-btn-primary:disabled { background: #D4D4D0; border-color: #D4D4D0; cursor: not-allowed; }

#panel-media-library-btn:hover { border-color: #9CA3AF; color: #4B5563; }