/* ── BASE & VARIABLES ────────────────────────────────────────── */
:root {
  --font-main: 'Cinzel', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Color Palette */
  --sidebar-bg: #060A12;
  --sidebar-hover: #1D2130;
  --sidebar-active: #FF5500;
  
  --canvas-bg: #F4F6F9;
  --card-bg: #FFFFFF;
  --border-light: #E2E8F0;
  --border-dark: rgba(255, 255, 255, 0.08);

  --text-dark: #0F172A;
  --text-muted: #64748B;
  --text-light: #F8FAFC;

  --orange-primary: #FF5500;
  --orange-hover: #E04B00;
  --orange-glow: rgba(255, 85, 0, 0.25);

  --yellow-bg: #FEF9C3;
  --yellow-border: #FEF08A;
  --yellow-text: #854D0E;
}

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

/* Browsers don't inherit font-family into <button> by default (they use the
   OS UI font instead) — every button lacking its own explicit font-family
   (like .auth-tab-btn's "Sign In"/"Create Account") was falling back to
   that instead of the site's Cinzel/Outfit stack. NOT extended to
   input/select/textarea — .form-input-settings deliberately opts OUT of
   Cinzel there (see its own comment: Cinzel renders lowercase as
   small-caps, which reads as broken on typed email/password text). Buttons
   are static labels, not user-typed content, so that concern doesn't apply. */
button {
  font-family: inherit;
}

body {
  font-family: var(--font-main);
  background-color: var(--canvas-bg);
  color: var(--text-dark);
  height: 100vh;
  overflow: hidden;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: 250px;
  background-color: var(--sidebar-bg);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-dark);
  flex-shrink: 0;
  z-index: 10;
}

.sidebar-header {
  padding: 24px 20px 16px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: var(--orange-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.brand-icon svg {
  width: 20px;
  height: 20px;
}

.brand-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.sidebar-cta {
  padding: 0 16px 16px 16px;
}

.btn-create-post {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--orange-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--orange-glow);
}

.btn-create-post:hover {
  background-color: var(--orange-hover);
  transform: translateY(-1px);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.nav-item:hover {
  background-color: var(--sidebar-hover);
  color: #F8FAFC;
}

.nav-item.active {
  background-color: var(--orange-primary);
  color: #FFFFFF;
  font-weight: 600;
}

.sidebar-user {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.sidebar-user:hover {
  background: var(--sidebar-hover);
}

.user-avatar-wrapper {
  position: relative;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.user-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #22C55E;
  border: 2px solid var(--sidebar-bg);
  border-radius: 50%;
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #F8FAFC;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.user-menu-chevron {
  color: #64748B;
}

/* ── MAIN WRAPPER ────────────────────────────────────────────── */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--canvas-bg);
}

/* ── TOP HEADER ──────────────────────────────────────────────── */
.top-header {
  height: 64px;
  background-color: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  flex-shrink: 0;
}

.header-title-area h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: -0.01em;
}

.header-right-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.account-select-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 6px 14px;
  border-radius: 20px;
}

.dot.live {
  width: 8px;
  height: 8px;
  background-color: #22C55E;
  border-radius: 50%;
}

.account-select-pill select {
  background: transparent;
  border: none;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
}

.icon-btn-header {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  cursor: pointer;
  position: relative;
}

.icon-btn-header:hover {
  background: var(--sidebar-hover);
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  background-color: var(--orange-primary);
  border-radius: 50%;
}

.badge-dot.hidden { display: none; }

/* ── NOTIFICATIONS DROPDOWN ── */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notif-dropdown.hidden { display: none; }

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px 18px;
  border-bottom: 1px solid var(--border-light);
}

.notif-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.notif-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #F1F5F9;
  border-radius: 20px;
  padding: 3px;
}

.notif-tab {
  border: none;
  background: transparent;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: var(--font-main);
}

.notif-tab.active {
  background: var(--orange-primary);
  color: #FFFFFF;
}

.notif-list {
  overflow-y: auto;
  padding: 6px 0 4px 0;
}

.notif-section-label {
  padding: 10px 18px 6px 18px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
}

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.notif-row:hover {
  background: rgba(15, 23, 42, 0.04);
}

.notif-row.is-unread {
  background: rgba(255, 85, 0, 0.05);
}

.notif-row.is-unread:hover {
  background: rgba(255, 85, 0, 0.1);
}

.notif-row-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.notif-row-body {
  flex: 1;
  min-width: 0;
}

.notif-row-msg {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
}

.notif-row-time {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 3px;
}

.notif-row-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--orange-primary);
  margin-top: 5px;
}

/* Per-item read/unread toggle — a hit target around .notif-row-dot so it's
   easy to tap without the row's own click (navigate + close) firing. */
.notif-row-toggle {
  background: none;
  border: none;
  padding: 8px 4px;
  margin: -8px -4px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.notif-row-dot-empty {
  background: transparent;
  border: 1.5px solid #CBD5E1;
}

.notif-row-toggle:hover .notif-row-dot-empty {
  border-color: var(--orange-primary);
}

.notif-empty {
  padding: 32px 18px;
  text-align: center;
  color: #94A3B8;
  font-size: 13px;
}

.notif-footer {
  border-top: 1px solid var(--border-light);
  padding: 10px;
  text-align: center;
}

.notif-footer a {
  color: var(--orange-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.notif-footer a:hover { text-decoration: underline; }

.header-profile-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E2E8F0;
}

/* ── VIEW PANELS ─────────────────────────────────────────────── */
.view-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.view-panel.active {
  display: flex;
  flex-direction: column;
}

/* ── VIEW 1: SCHEDULER / CALENDAR (Image 1) ─────────────────── */
.scheduler-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.scheduler-title h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}

.calendar-controls-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.date-navigator {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 4px 8px;
}

.nav-arrow-btn {
  background: transparent;
  border: none;
  color: #64748B;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}

.current-month-text {
  font-size: 14px;
  font-weight: 600;
  padding: 0 12px;
  color: var(--text-dark);
}

.btn-filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-cal-util {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 8px;
  padding: 6px 16px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-cal-util:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 #0F172A;
}

.filter-dropdown-container {
  position: relative;
}

.filter-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 14px;
  width: 200px;
  z-index: 20;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-menu.hidden {
  display: none;
}

.filter-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}

.filter-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-dark);
  border-radius: 6px;
  cursor: pointer;
}

.filter-opt.active, .filter-opt:hover {
  background-color: #FFF7ED;
  color: var(--orange-primary);
  font-weight: 600;
}

.view-switch-container {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}

.view-switch-opt {
  border: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.view-switch-opt:hover:not(.active) {
  color: #0F172A;
  background: #F1F5F9;
}

.view-switch-opt.active {
  background: var(--orange-primary);
  color: #FFFFFF;
}

.btn-create-orange {
  background-color: var(--orange-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-create-orange:hover {
  background-color: var(--orange-hover);
}

#btn-reconnect-linkedin {
  display: inline-block;
  text-decoration: none;
}

/* CALENDAR CANVAS */
.calendar-card-canvas {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #F8FAFC;
  border-bottom: 1px solid var(--border-light);
}

.day-head {
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.calendar-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
  flex: 1;
  overflow-y: auto;
}

.cal-day-cell {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #FFFFFF;
  position: relative;
  min-height: 110px;
  /* Without this, a post card wider than the cell (e.g. a long carousel
     title) doesn't shrink to fit — it visibly bleeds into the neighboring
     day columns instead of clipping, since grid cells don't clip overflow
     by default (confirmed live: a single post appeared to "sit across"
     three day columns in the weekly view). */
  overflow: hidden;
}

.cal-day-cell:nth-child(7n) {
  border-right: none;
}

.day-number {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.cal-post-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--orange-primary);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.15s ease;
  /* Flex items default to min-width:auto (won't shrink below their
     content's natural width) — without this a long title still forces the
     card wider than its cell even with .cal-day-cell's overflow:hidden. */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.cal-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.cal-post-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.btn-delete-post {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: #FFFFFF;
  color: #94A3B8;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.cal-post-card:hover .btn-delete-post {
  opacity: 1;
}

.btn-delete-post:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #B91C1C;
}

.cal-post-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.cal-post-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  width: fit-content;
}

.badge-published {
  background: #0F172A;
  color: #FFFFFF;
}

.badge-scheduled {
  background: var(--orange-primary);
  color: #FFFFFF;
  border: 1px solid var(--orange-primary);
}

.autopilot-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #F1F5F9;
  color: #475569;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.autopilot-toggle .autopilot-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94A3B8;
}

.autopilot-toggle[data-active="true"] {
  background: rgba(255, 85, 0, 0.1);
  border-color: var(--orange-primary);
  color: var(--orange-primary);
}

.autopilot-toggle[data-active="true"] .autopilot-dot {
  background: var(--orange-primary);
  box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.2);
}

.style-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

@media (max-width: 1100px) {
  .style-picker-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .style-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

.style-swatch-card {
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  background: #FFFFFF;
  text-align: left;
}

.style-swatch-card.selected {
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 1px var(--orange-primary);
}

.style-swatch-card-ai-decide {
  width: 100%;
}

.style-swatch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.style-swatch-chip {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.08);
}

.style-swatch-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}

.style-swatch-sub {
  font-size: 11px;
  color: #64748B;
  display: block;
  margin-top: 2px;
}

.image-mode-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.image-mode-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.image-mode-btn.selected {
  border-color: var(--orange-primary);
  background: rgba(255, 85, 0, 0.08);
  color: var(--orange-primary);
}

.topics-picker {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.topic-parent-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.topic-parent-group:first-child {
  padding-top: 0;
  border-top: none;
}

.topic-parent-label {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
}

.topic-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topic-group-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94A3B8;
}

.topic-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.topic-pill:hover {
  border-color: var(--orange-primary);
}

.topic-pill.active {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #FFFFFF;
}

.topic-pill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-remove-subtopic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #94A3B8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-remove-subtopic:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.btn-remove-topic-group {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-remove-topic-group:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.inline-add-control {
  margin-top: 4px;
}

.inline-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.inline-add-form.hidden {
  display: none;
}

.inline-add-control .btn-cal-util.hidden {
  display: none;
}

#save-topic-modal-new-name.hidden {
  display: none;
}

#save-topic-modal-category {
  width: 100%;
}

.inline-add-form .form-input-settings {
  flex: 1;
  min-width: 160px;
}

.add-topic-suggest-form {
  margin-top: 4px;
}

.add-topic-suggest-form.hidden {
  display: none;
}

.add-topic-suggest-area {
  margin-top: 12px;
  padding: 14px;
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

.add-topic-suggest-area.hidden {
  display: none;
}

.add-topic-suggest-loading {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.add-topic-suggest-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.badge-pending {
  background: rgba(255, 85, 0, 0.12);
  color: var(--orange-primary);
  border: 1px solid var(--orange-primary);
}

.pending-approval-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
}

.pending-approval-card {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  background: #FFFFFF;
}

.pending-approval-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #64748B;
}

.pending-approval-content {
  font-size: 13px;
  color: #334155;
  white-space: pre-wrap;
  margin-bottom: 12px;
  max-height: 120px;
  overflow-y: auto;
}

.pending-approval-actions {
  display: flex;
  gap: 8px;
}

.btn-approve-post, .btn-reject-post {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn-approve-post {
  background: var(--orange-primary);
  color: #FFFFFF;
}

.btn-reject-post {
  background: #F1F5F9;
  color: #475569;
}

.badge-draft {
  background: #1E293B;
  color: #94A3B8;
}

.badge-approval {
  background: #0F172A;
  color: #F1F5F9;
}

/* ── VIEW 2: ARTICLE BUILDER & EDITOR (Image 2) ─────────────── */
.editor-two-column {
  display: flex;
  gap: 24px;
  flex: 1;
}

.editor-left-pane {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Without this, a flex child's default min-width:auto refuses to shrink
     below its content's min-content size — and since .ai-toolbar-bar's
     buttons all sit on one row before flex-wrap gets a chance to engage,
     that unwrapped width becomes this pane's effective minimum, forcing
     the whole row wider than the viewport regardless of window size. */
  min-width: 0;
}

.editor-right-pane {
  flex: 0.8;
  display: flex;
  /* Height is pinned to editor-left-pane's rendered height by
     syncFeedPanelHeight() in app.js — without min-height:0 a flex child
     can't shrink below its content's natural size, so the feed card would
     keep growing the whole row taller as article content/media get added. */
  min-height: 0;
}

/* AI TOOLBAR — restyled to the Kinetic/POPAI design system (slate + orange, no yellow) */
.ai-toolbar-bar {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-toolbar-label {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #584237;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ai-tab-btn {
  /* Neutral by default, not a permanently-"selected"-looking thick orange
     border — these are one-shot action buttons, not tabs, so nothing
     should look permanently active. Orange only shows up on hover/focus
     and while a button's own request is in flight (via :disabled below). */
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.ai-tab-btn:hover:not(:disabled) {
  color: var(--orange-primary);
  border-color: var(--orange-primary);
  box-shadow: 0 2px 6px rgba(255, 85, 0, 0.1);
}

.ai-tab-btn:disabled {
  color: var(--orange-primary);
  border-color: var(--orange-primary);
  background: rgba(255, 85, 0, 0.06);
  cursor: wait;
  opacity: 1;
}

.ai-language-select {
  background: #FFFFFF;
  border: 2px solid var(--orange-primary);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  text-transform: uppercase;
  cursor: pointer;
}

.ai-language-select:hover, .ai-language-select:focus {
  box-shadow: 0 2px 6px rgba(255, 85, 0, 0.1);
  outline: none;
}

.btn-undo-ai {
  margin-left: auto;
}

/* Generic disabled look for role-gated controls (view-only team members) —
   these buttons have explicit background colors that would otherwise still
   look fully clickable when just given the native `disabled` attribute. */
.btn-create-orange:disabled,
.btn-upgrade-plan:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.settings-form input:disabled,
.settings-form select:disabled,
.settings-form textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--canvas-bg);
}

.btn-undo-ai:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-undo-ai:disabled:hover {
  color: #475569;
}

.ai-tool-input-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px;
}

.ai-input-row {
  display: flex;
  gap: 10px;
}

.form-input-ai {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input-ai:focus {
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 3px var(--orange-glow);
}

.ai-topic-select {
  /* Shrinkable, unlike the old flex:0 0 220px, which pinned both selects at
     220px no matter the viewport and forced editor-left-pane wider than its
     60% share — pushing the Real-time LinkedIn Feed pane off the page. */
  flex: 1 1 130px;
  min-width: 0;
  cursor: pointer;
}

/* Own row below the Topic/Sub-topic/custom-prompt inputs (not squeezed
   into the same row as them) so those inputs get full width to breathe. */
.ai-generate-row {
  margin-top: 10px;
}

.btn-generate-ai-gold {
  background: var(--orange-primary);
  color: #FFFFFF;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}

.btn-generate-ai-gold:hover {
  background: var(--orange-hover);
}

/* COMPOSER CARD */
.composer-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.form-group-editor label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #584237;
  margin-bottom: 8px;
}

.editor-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.editor-label-row label {
  margin-bottom: 0;
}

.media-attachments-label {
  color: #0F172A;
  font-weight: 800;
}

.char-counter {
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 8px;
  transition: color 0.15s;
}

.char-counter.char-counter-warn {
  color: #D97706;
}

.char-counter.char-counter-over {
  color: #DC2626;
}

.input-editor-title {
  width: 100%;
  padding: 4px 0;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #0F172A;
  outline: none;
  transition: border-color 0.2s;
  /* A <textarea> now, not <input> — wraps a long title across 2-3 rows
     (JS grows it via scrollHeight, see autoResizeTitleField) instead of
     staying single-line and forcing horizontal scroll to read the rest. */
  resize: none;
  overflow-y: auto;
  max-height: 130px;
  /* Hidden chrome, not hidden function — JS grows the box to exactly fit
     normal titles (no scrollbar ever needed then), this is purely a safety
     cap for pathologically long ones; still scrollable by wheel/touch/
     keyboard without showing the scrollbar widget, which was appearing
     even for a normal 2-line title due to a few px of rounding between
     scrollHeight and clientHeight once overflow:auto reserves space. */
  scrollbar-width: none;
}

.input-editor-title::-webkit-scrollbar {
  display: none;
}

.input-editor-title:focus {
  border-bottom-color: var(--orange-primary);
}

.rich-toolbar {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tb-btn {
  background: transparent;
  border: none;
  padding: 5px 9px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  color: #475569;
  transition: background 0.15s, color 0.15s;
}

.tb-btn:hover {
  background: #E2E8F0;
  color: var(--orange-primary);
}

.tb-divider {
  width: 1px;
  height: 16px;
  background: #E2E8F0;
  margin: 0 4px;
}

.editor-textarea {
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 0 0 10px 10px;
  padding: 16px;
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dark);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.editor-textarea:focus {
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 3px var(--orange-glow);
}

.media-attachments-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.dropzone-box {
  flex: 1;
  border: 2px dashed #FED7AA;
  background: #FFF7ED;
  border-radius: 12px;
  padding: 36px 20px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone-box.dropzone-active {
  border-color: var(--orange-primary);
  background: #FFEDD5;
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #C2410C;
  font-size: 13px;
  font-weight: 600;
}

#file-media-input.hidden {
  display: none;
}

.btn-choose-file {
  background: var(--orange-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-choose-file:hover {
  background: var(--orange-hover);
}

.btn-generate-image {
  background: #FFFFFF;
  color: var(--orange-primary);
  border: 2px solid var(--orange-primary);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-generate-image:hover {
  background: var(--orange-primary);
  color: #FFFFFF;
}

.btn-generate-image:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.media-preview-box {
  position: relative;
  flex: 1;
  min-height: 160px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-preview-box img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: contain;
}

.btn-remove-image {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.65);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-image:hover {
  background: rgba(15, 23, 42, 0.85);
}

.btn-remove-image.hidden {
  display: none;
}

.media-example-card span {
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
}

.schedule-post-bar {
  border-top: 2px solid var(--text-dark);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Now fits on one row at desktop widths — the date picker no longer
     shows the time portion inline (see #input-schedule-time's
     ::-webkit-datetime-edit-*-field rules below), which was the main
     thing eating the width that used to force wrapping. The <=900px media
     query below still explicitly wraps for narrower/mobile layouts. */
  flex-wrap: nowrap;
}

.schedule-inputs {
  display: flex;
  gap: 10px;
}

.date-time-picker-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--orange-primary);
  border-radius: 10px;
  padding: 9px 14px;
  background: #FFFFFF;
  color: var(--orange-primary);
  transition: transform 0.15s, box-shadow 0.15s;
}

.date-time-picker-box:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--text-dark);
}

#schedule-date-label {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

/* The real <input type="datetime-local"> is kept fully functional (its
   .value drives what gets scheduled, and showPicker() opens the native
   date+time picker on click — see app.js) but never shown inline — the
   browser's own rendering of a datetime-local always includes an hour/
   minute/AM-PM segment plus their separators, and there's no reliable
   cross-browser way to hide just those and not the "/" separators between
   the date parts (tried; left a stray dangling ":" with nothing on either
   side once hour/minute were hidden). #schedule-date-label above shows a
   clean, fully-controlled "MM/DD/YYYY"-only string instead, kept in sync
   by updateScheduleDateLabel() in app.js. opacity (not display:none) is
   required — showPicker() throws on a non-rendered element. */
.schedule-time-input-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  border: none;
}

.select-tz {
  border: 2px solid var(--text-dark);
  border-radius: 10px;
  padding: 9px 14px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  background: #FFFFFF;
  outline: none;
  cursor: pointer;
  accent-color: var(--orange-primary);
  transition: transform 0.15s, box-shadow 0.15s;
}

.select-tz:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--text-dark);
}

.schedule-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.schedule-action-buttons > button {
  flex: 1;
}

/* Draft/Delete/Schedule/Publish are meant to read as one consistent row —
   Schedule previously had its own larger padding (26px vs 20px) and
   font-size (15px vs 14px), so it visually stood taller/wider than the
   other three even though flex:1 already equalized their width. */
.btn-schedule-orange {
  background: var(--orange-primary);
  color: #FFFFFF;
  border: 2px solid var(--text-dark);
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-schedule-orange:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--text-dark);
}

.btn-publish-now {
  background: var(--text-dark);
  color: #FFFFFF;
  border: 2px solid var(--text-dark);
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-publish-now:hover {
  background: #1E293B;
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--orange-primary);
}

.btn-save-draft {
  background: #000000;
  color: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.btn-delete-editor {
  background: #FFFFFF;
  color: #DC2626;
  border: 2px solid #DC2626;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-delete-editor:hover:not(:disabled) {
  background: #FEE2E2;
}

.btn-delete-editor:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-save-draft:hover {
  background: #1A1A1A;
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--orange-primary);
}

/* REAL-TIME LINKEDIN FEED PREVIEW */
/* Stands in for the "1️⃣/2️⃣/3️⃣" keycap emoji in the LinkedIn Feed preview —
   real color emoji ignore CSS color entirely, so this is a plain span
   substituted in for them at render time (see renderPreviewBodyHtml). */
.step-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  height: 1.2em;
  padding: 0 0.15em;
  /* LinkedIn's own brand blue — this preview is meant to look like a real
     LinkedIn post, so the numbered step badges (1/2/3) use LinkedIn's
     actual color instead of the app's own orange branding. */
  background: #0A66C2;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1;
  border-radius: 4px;
  vertical-align: -0.05em;
}

.feed-preview-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  /* Flips the scrollbar to the left edge of this card, away from the
     browser window's own right-side scrollbar — the two sit right next to
     each other otherwise and are easy to grab by mistake. direction:ltr on
     the direct children below undoes the RTL flip for actual content/text,
     so only the scrollbar itself moves. */
  direction: rtl;
}

.feed-card-header {
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 2;
  direction: ltr;
}

.feed-card-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #854D0E;
  margin-bottom: 16px;
}

.linkedin-post-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  direction: ltr;
}

.li-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.li-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.li-author-info {
  flex: 1;
}

.li-author-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.li-author-info p {
  font-size: 12px;
  color: var(--text-muted);
}

.li-meta-time {
  font-size: 11px;
  color: #94A3B8;
}

.btn-li-follow {
  background: transparent;
  border: none;
  color: #0A66C2;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-li-dots {
  background: transparent;
  border: none;
  color: #94A3B8;
  cursor: pointer;
}

.li-post-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
}

/* Clamps the post-text preview to a few lines by default, like a real
   LinkedIn feed card — .li-see-more's click handler (app.js) toggles
   .expanded to reveal the rest. Without this cap, a long AI-generated
   post renders in full here, inflating this card's natural height enough
   that .editor-two-column's flex stretch drags the whole row (including
   the left editor pane) up to match — which is what silently ate the
   feed card's own internal scrollbar (overflow-y:auto below) in the
   first place, since there was nothing left to scroll past. */
.li-body-text {
  max-height: 110px;
  overflow: hidden;
}

.li-body-text.expanded {
  max-height: none;
  overflow: visible;
}

.li-title-text {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.li-see-more {
  color: #64748B;
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  margin-top: 4px;
}

.li-media-container img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
}

.li-reactions-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}

.li-actions-bar {
  display: flex;
  justify-content: space-around;
  padding-top: 4px;
}

.li-action-btn {
  background: transparent;
  border: none;
  color: #64748B;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
}

.li-action-btn:hover {
  background: #F1F5F9;
}

/* DASHBOARD & OTHER VIEWS */
.dashboard-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 #0F172A;
}

.metric-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  background: var(--orange-primary);
  color: #FFFFFF;
}

.metric-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-lbl { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.m-val { font-size: 26px; font-weight: 800; color: var(--text-dark); }
.m-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.text-green { color: #16A34A; }
.text-orange { color: var(--orange-primary); }
.text-blue { color: #0284C7; }
.green-text { color: #16A34A; }

.recent-activity-card {
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 14px;
  padding: 20px;
}

.recent-activity-card h3 {
  font-size: 18px;
  font-weight: 800;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  border: 2px solid #0F172A;
  border-radius: 10px;
  overflow: hidden;
}

.activity-table th, .activity-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #0F172A;
  font-size: 13px;
}

.activity-table th {
  font-weight: 800;
  color: #FFFFFF;
  background: #0F172A;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Queue used to hard-cap at 8 rows so it never needed to scroll; now it
   renders every post, so the wrapper scrolls instead of pushing the rest
   of the dashboard down. */
.activity-table-wrapper {
  max-height: 420px;
  overflow-y: auto;
}

.activity-table tbody tr:last-child td { border-bottom: none; }

.analytics-card, .team-card, .settings-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 24px;
}

.account-card-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 2px solid var(--orange-primary);
  border-radius: 12px;
  margin-top: 16px;
}

.acc-info { display: flex; align-items: center; gap: 12px; }
.acc-info img { width: 44px; height: 44px; border-radius: 50%; }
.acc-plan-sub { color: #94A3B8; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.mt-30 { margin-top: 30px; }
.mb-20 { margin-bottom: 20px; }

.team-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 20px;
}

.team-member-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #FFFFFF;
}

.team-member-card img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.team-member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}

.team-member-role {
  font-size: 12px;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.btn-remove-member {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: #FFFFFF;
  color: #94A3B8;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-member:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #B91C1C;
}

.btn-invite-team {
  display: block;
  margin: 0 auto;
  padding: 10px 24px;
}

.invite-member-form {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.invite-member-form.hidden {
  display: none;
}

.invite-member-form .form-input-settings {
  width: auto;
  flex: 1;
  min-width: 180px;
  max-width: 260px;
}

.settings-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.form-input-settings {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  /* NOT var(--font-main) — that stack starts with Cinzel, a display font
     whose lowercase glyphs are drawn as small-caps (visually all-caps
     letterforms). A correctly-typed lowercase email/password looked
     capitalized purely from font rendering, not any actual case change —
     this affects every input using this class, not just auth. */
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
}

.password-input-wrapper {
  position: relative;
  display: flex;
}

.password-input-wrapper .form-input-settings {
  padding-right: 42px;
}

.btn-toggle-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-toggle-password:hover {
  color: var(--text-dark);
}

.cron-help-box code {
  display: block;
  background: #0F172A;
  color: #38BDF8;
  padding: 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 8px;
}

/* ── SAAS AUTH MODAL STYLES (Task 2a) ── */
.auth-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(6, 10, 18, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}
.auth-modal-overlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.auth-modal-card {
  background: var(--sidebar-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #F8FAFC;
}
.auth-modal-header {
  text-align: center;
  margin-bottom: 24px;
}
.auth-modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 8px;
}
.auth-modal-header p {
  color: #94A3B8;
  font-size: 13px;
  margin-top: 4px;
}
.inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EA580C;
  color: #FFFFFF;
  border-radius: 10px;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
.auth-tabs {
  display: flex;
  background: #1E293B;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}
.auth-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #94A3B8;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.auth-tab-btn.active {
  background: #EA580C;
  color: #FFFFFF;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-form.hidden {
  display: none;
}
.btn-full {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.auth-error-msg {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #EF4444;
  color: #F87171;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.auth-error-msg.hidden { display: none; }

/* Login/register inputs get an orange border to match the Google button —
   scoped to the auth modal so the same .form-input-settings class used
   elsewhere (e.g. Settings) is untouched. */
.auth-modal-card .form-input-settings {
  border: 1.5px solid var(--orange-primary);
}

/* ── PRICING & BILLING STYLES (Task 2f) ── */
.billing-status-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border: none;
  padding: 28px 32px;
  border-radius: 14px;
}
.billing-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  margin-bottom: 6px;
}
.billing-current-info h3 {
  font-size: 30px;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 2px 0 8px 0;
}
.billing-plan-sub {
  font-size: 14px;
  font-weight: 500;
  color: #CBD5E1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.billing-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.billing-active-pill {
  background: var(--orange-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: 8px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.plan-card {
  background: #FFFFFF;
  border: 2px solid var(--orange-primary);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.plan-card.featured {
  box-shadow: 0 10px 30px rgba(255, 85, 0, 0.15);
}
.popular-tag {
  position: absolute;
  top: 20px;
  right: -42px;
  background: var(--orange-primary);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 46px;
  transform: rotate(45deg);
}
.plan-card h3 {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dark);
}
.price-val {
  font-size: 40px;
  font-weight: 800;
  color: var(--orange-primary);
  margin: 12px 0 20px 0;
}
.price-val span {
  font-size: 14px;
  font-weight: 500;
  color: #94A3B8;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  text-align: left;
}
.plan-features li {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan-features li::before {
  content: "✓";
  color: var(--orange-primary);
  font-weight: 800;
}
.btn-upgrade-plan {
  align-self: stretch;
  padding: 12px 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  border-radius: 10px;
  margin-top: auto;
}
.btn-logout-icon {
  background: var(--orange-primary);
  border: none;
  color: #FFFFFF;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s ease;
}
.btn-logout-icon:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
}



/* TOAST NOTIFICATIONS — replaces blocking browser alert() popups */
.toast {
  pointer-events: auto;
  min-width: 360px;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.12);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  color: #0F172A;
  border-left: 6px solid var(--orange-primary);
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.toast-success {
  border-left-color: #10B981;
  background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 45%);
}
.toast.toast-error {
  border-left-color: #EF4444;
  background: linear-gradient(135deg, #FEF2F2 0%, #FFFFFF 45%);
}
.toast.toast-warning {
  border-left-color: #F59E0B;
  background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 45%);
}

.toast-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-message { flex: 1; line-height: 1.5; }
.toast-close {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.toast-close:hover { color: #0F172A; }

.toast.toast-hide {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Generic confirm dialog (replaces blocking browser confirm()) ── */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.confirm-dialog-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.confirm-dialog-card {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: 28px;
  margin: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  /* Without this, a modal whose content grows taller than the viewport
     (e.g. the Carousel modal with several slide thumbnails + a long
     caption) gets centered by the overlay's flexbox with its top AND
     bottom clipped off-screen, and there's nothing to scroll — the action
     buttons at the bottom become permanently unreachable (confirmed live:
     "can not access the button"). This applies to every modal sharing this
     class, not just Carousel, since any of them could grow long content. */
  max-height: 90vh;
  overflow-y: auto;
}

.confirm-dialog-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.confirm-dialog-card p {
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
  margin: 0 0 24px;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Generic fallback: every OTHER ".hidden" usage in this file pairs it with
   a specific selector (.notif-dropdown.hidden, .filter-menu.hidden, etc.)
   rather than relying on a plain ".hidden{display:none}" utility — so any
   element using a bare class="hidden" with no matching scoped rule was a
   silent no-op. Confirmed live as a real bug three separate times: the
   Carousel modal's Topic/Document/URL field groups all stayed visible at
   once despite correct JS toggle logic (#carousel-document-fields,
   #carousel-url-fields), plus two more pre-existing instances found while
   fixing it (#carousel-modal-preview, #bulk-generate-progress). Rather
   than add a fourth one-off scoped rule, this plain low-specificity
   fallback covers all of them at once and any future one — every existing
   ".x.hidden" rule already has higher specificity (two classes/an ID vs.
   one class here), so this can't override any of them on properties they
   already set.
   One deliberate exclusion: .confirm-dialog-overlay.hidden (below) relies
   on an opacity-only transition with no display change, for its fade —
   it doesn't set `display` itself, so this generic rule would otherwise
   still apply display:none on top of it and kill the fade entirely. */
.hidden:not(.confirm-dialog-overlay) {
  display: none;
}

.btn-confirm-cancel {
  background: #FFFFFF;
  color: var(--text-dark);
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  padding: 9px 18px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-confirm-cancel:hover {
  border-color: var(--text-dark);
}

.btn-confirm-delete {
  background: #DC2626;
  color: #FFFFFF;
  border: 2px solid #DC2626;
  border-radius: 10px;
  padding: 9px 18px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-confirm-delete:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   ══════════════════════════════════════════════════════════════ */

.btn-sidebar-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-light);
  padding: 6px;
  margin-right: 6px;
  cursor: pointer;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 40;
}

.sidebar-overlay.hidden {
  display: none;
}

@media (max-width: 900px) {
  .header-title-area {
    display: flex;
    align-items: center;
  }

  .btn-sidebar-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
  }

  /* Above .bottom-tab-bar (60) and .btn-mobile-fab (61) only while actually
     open — otherwise the fixed bottom tab bar paints over the drawer's
     bottom edge, hiding .sidebar-user (name + logout, pinned there via
     margin-top: auto) underneath it. Scoped to .open (not the base rule)
     so the off-canvas, closed state's stacking is untouched. */
  .sidebar.open {
    transform: translateX(0);
    z-index: 70;
  }

  .top-header {
    padding: 0 16px;
  }

  .view-panel {
    padding: 16px;
  }

  .editor-two-column {
    flex-direction: column;
  }

  .editor-left-pane,
  .editor-right-pane {
    flex: 1 1 auto;
  }

  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-card-canvas {
    overflow-x: auto;
  }

  .calendar-grid-header,
  .calendar-grid-body {
    min-width: 640px;
  }

  .schedule-post-bar {
    flex-wrap: wrap;
  }

  .schedule-inputs,
  .schedule-action-buttons {
    flex-wrap: wrap;
  }

  /* Explicit 2-per-row basis (not just flex:1, which can let 4 items
     squeeze onto one cramped row instead of wrapping predictably) — gives
     the requested Draft+Delete / Schedule+Publish 2x2 layout on mobile. */
  .schedule-action-buttons > button {
    flex: 1 1 calc(50% - 5px);
  }

  /* 28px was overflowing the input's width on mobile with any reasonably
     long title, forcing horizontal scroll inside the field to read it. */
  .input-editor-title {
    font-size: 19px;
  }

  .composer-card {
    padding: 16px;
  }

  .media-attachments-row {
    flex-direction: column;
  }

  .media-preview-box {
    flex: 1 1 auto;
  }


  .notif-dropdown {
    width: min(360px, calc(100vw - 32px));
    right: -8px;
  }

  .auth-modal-overlay {
    padding: 16px;
  }

  .header-right-actions {
    gap: 8px;
  }

  .account-select-pill {
    display: none;
  }
}

@media (max-width: 600px) {
  .header-title-area h1 {
    font-size: 16px;
  }

  .dashboard-metrics-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .schedule-inputs {
    width: 100%;
  }

  .date-time-picker-box,
  .select-tz {
    flex: 1;
  }

  .schedule-action-buttons {
    width: 100%;
  }

  .auth-modal-card {
    padding: 24px 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE SHELL (≤768px) — bottom tab bar replaces the sidebar
   entirely (distinct from the 900px tablet drawer above, which still
   applies between 769px–900px). Kept as one contiguous block, not
   interleaved with the older breakpoints, so the whole mobile nav
   shell can be read/maintained in one place.
   ══════════════════════════════════════════════════════════════ */

/* Base (desktop/tablet) state for the two new mobile-only components —
   hidden by default, shown only inside the ≤768px block below, mirroring
   how .btn-sidebar-toggle/.sidebar-overlay are defined above. */
.bottom-tab-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--border-dark);
  /* No safe-area-inset-bottom padding — on Android (e.g. Firefox with
     3-button nav) the viewport already excludes the system nav bar, so
     this padding was pure redundant empty space under the tab bar. */
  padding-bottom: 0;
}

.bottom-tab-bar .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 11px;
  cursor: pointer;
  min-height: 44px;
}

.bottom-tab-bar .nav-item.active {
  color: var(--orange-primary);
}

.btn-mobile-fab {
  display: none;
  position: fixed;
  right: 20px;
  z-index: 61;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orange-primary);
  color: #fff;
  border: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px var(--orange-glow);
  cursor: pointer;
}

.btn-mobile-fab:active {
  transform: scale(0.95);
}

/* Mobile card-list equivalent of the dashboard's activity table — hidden
   on desktop/tablet, shown instead of the table at ≤768px. */
.dash-queue-cards {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.dash-queue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
}

.dash-queue-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dash-queue-card-main strong {
  font-size: 14px;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-queue-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* "Scheduled for Today" agenda list under the calendar grid — mobile-only. */
.agenda-list {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.agenda-list h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.agenda-list-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agenda-list-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Article Builder: mobile-only LinkedIn preview toggle button. */
.btn-toggle-preview {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-dark);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 768px) {
  /* NOT hiding .sidebar/.btn-sidebar-toggle/#sidebar-overlay here — that
     was the actual bug behind "Settings is missing on mobile". The bottom
     tab bar only covers 4 of the 6 views (Dashboard/Calendar/Studio/Team);
     Settings and Billing were only ever reachable through the sidebar, and
     forcing it to display:none with no replacement made them completely
     unreachable. The existing 900px rule already turns the sidebar into an
     off-canvas hamburger drawer — that behavior is left intact and simply
     continues to work at this width too, giving a path to the other 2
     views + logout, alongside the tab bar for the 4 primary ones. */

  .bottom-tab-bar {
    display: flex;
  }

  /* Topic / Sub-topic / custom-prompt were all cramped into one row on
     mobile (flex:1 1 130px each, 3-wide) — shrank far enough that the
     select text became unreadable even though picking an option still
     worked functionally. Stacking full-width fixes the readability
     problem the "subtopic doesn't work" report actually was. */
  .ai-input-row {
    flex-direction: column;
  }

  .ai-topic-select,
  .form-input-ai {
    width: 100%;
  }

  .btn-mobile-fab {
    display: flex;
    /* Sits just above the tab bar; the tab bar's own height (~64px content
       + safe-area) plus a gap, not a hardcoded guess. */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Every view-panel needs bottom clearance so its last content isn't
     hidden behind the fixed tab bar — .view-panel is already its own
     internal scroll container (overflow-y:auto), so padding here is
     enough, no change to the overflow model itself. */
  .view-panel {
    padding-bottom: calc(24px + 64px + env(safe-area-inset-bottom, 0px));
  }

  .main-wrapper {
    width: 100%;
  }

  .top-header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(64px + env(safe-area-inset-top, 0px));
  }

  /* Plain 2x2 grid, not the old 2-up + 2 full-width "bento" stack — that
     spanning pushed the page to 3 stat rows tall, contributing to needing
     a scroll to see the whole Dashboard Overview on one phone screen. */
  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .metric-card {
    padding: 12px;
    gap: 10px;
  }

  .metric-card-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .metric-card-icon svg {
    width: 16px;
    height: 16px;
  }

  .m-val { font-size: 20px; }
  .m-lbl { font-size: 11px; }
  .m-sub { font-size: 11px; }

  .activity-table-wrapper {
    display: none;
  }

  .dash-queue-cards {
    display: flex;
  }

  /* Recent Content Queue: compact rows + a lower cap than the desktop
     table's 8, so this section doesn't dominate the page height. */
  .dash-queue-card {
    padding: 8px 10px;
  }

  .dash-queue-card:nth-child(n+5) {
    display: none;
  }

  .recent-activity-card {
    padding: 12px;
  }

  .recent-activity-card h3 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  /* Calendar: compact grid with dot indicators instead of full post-card
     detail (which lives in the #agenda-list below the grid instead).
     Layout-only overrides — desktop's .cal-post-card styling is untouched
     above this breakpoint. */
  .calendar-card-canvas {
    overflow-x: visible;
  }

  .calendar-grid-header,
  .calendar-grid-body {
    min-width: 0;
  }

  .cal-day-cell {
    min-height: 48px;
    padding: 4px;
    gap: 3px;
  }

  .cal-post-card {
    padding: 0;
    border: none;
    box-shadow: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange-primary);
  }

  .cal-post-thumb,
  .cal-post-info,
  .btn-delete-post {
    display: none;
  }

  .agenda-list {
    display: flex;
  }

  /* Article Builder: preview collapsed behind a toggle instead of always
     stacked below (a full LinkedIn card under a full editor is a very
     long scroll on a phone). */
  .btn-toggle-preview {
    display: flex;
  }

  .editor-right-pane {
    display: none;
  }

  .editor-right-pane.open {
    display: flex;
    /* Overrides syncFeedPanelHeight()'s inline height (a desktop
       side-by-side-columns concern) in case it ran before a resize down
       to mobile width — on mobile the pane should size to its own
       content, not match editor-left-pane's height. */
    height: auto !important;
  }

  /* Wraps into rows instead of needing a horizontal scroll to see the rest
     of the toolbar — smaller buttons so more fit per row on a phone. */
  .ai-toolbar-bar {
    flex-wrap: wrap;
  }

  .ai-toolbar-label {
    width: 100%;
    padding: 0 0 2px 0;
  }

  .ai-tab-btn,
  .ai-language-select {
    font-size: 12px;
    padding: 7px 10px;
  }

  .btn-undo-ai {
    margin-left: 0;
  }

  /* NOT position:sticky here — confirmed broken in this nested-scroll-
     container layout (.view-panel > .editor-two-column > .editor-left-pane):
     it visually "stuck" the bar partway up the page, sandwiched between the
     toolbar and the body text, instead of at the bottom of the viewport.
     Normal in-flow positioning at the end of the content is correct and
     reliable, even though it costs the "always reachable" nicety. */
  .schedule-post-bar {
    background: var(--card-bg);
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
  }

  /* Team & Billing status rows — avoid the info block and action button
     crowding each other at narrow widths. */
  .account-card-box,
  .billing-status-box {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}