/* ClearCast design tokens */
:root {
  --bg: #0a0f0d;
  --bg-2: #0e1411;
  --card: #131a16;
  --card-2: #182019;
  --elev: #1c2521;
  --border: #1f2823;
  --border-2: #2a342e;
  --text: #e8efea;
  --text-2: #9aa6a0;
  --text-3: #6b766f;
  --accent: #14b88a;
  --accent-2: #1ad29c;
  --accent-soft: rgba(20, 184, 138, 0.12);
  --accent-softer: rgba(20, 184, 138, 0.06);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.12);
  --purple: #a78bfa;
  --pink: #ec4899;
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.4);
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: 'cv11','ss01','ss03';
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.main { flex: 1; min-width: 0; }
.topbar {
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
.page { padding: 24px 32px 48px; }

/* Sidebar bits */
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background-color: #0e1411;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NiA5NiIgd2lkdGg9Ijk2IiBoZWlnaHQ9Ijk2IiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNsZWFyQ2FzdCBtYXJrIj4KICA8ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwIiB5MT0iMSIgeDI9IjEiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxNGI4OGEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYWQyOWMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz4KICA8Y2lyY2xlIGN4PSI0OCIgY3k9IjY0IiByPSI2IiBmaWxsPSJ1cmwoI2cpIi8+CiAgPHBhdGggZD0iTTMyIDU2IFE0OCA0MCA2NCA1NiIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTI0IDUyIFE0OCAyNCA3MiA1MiIgc3Ryb2tlPSJ1cmwoI2cpIiBzdHJva2Utd2lkdGg9IjUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNyIvPgogIDxwYXRoIGQ9Ik0xNiA0OCBRNDggMTAgODAgNDgiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSI1LjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iLjQ1Ii8+Cjwvc3ZnPgo=");
  background-size: 66%; background-position: center; background-repeat: no-repeat;
  display: grid; place-items: center;
  font-size: 0; color: transparent;
  box-shadow: 0 0 0 1px rgba(20,184,138,0.22), 0 6px 18px -6px rgba(20,184,138,0.35);
}
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--text-2);
  font-weight: 500;
  font-size: 13.5px;
  transition: background .15s, color .15s;
  position: relative;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(20,184,138,0.16);
}
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.nav-item.active .ico { opacity: 1; }
.nav-badge {
  margin-left: auto;
  min-width: 22px; height: 18px;
  border-radius: 9px;
  background: var(--accent);
  color: #06120d;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.nav-badge.warn { background: var(--warn); color: #2a1a02; }
.nav-section-label {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 11px 6px;
}

.sidebar-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.app-promo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
}
.app-promo:hover { background: var(--card-2); }
.app-promo-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--elev); display: grid; place-items: center; color: var(--accent-2); }
.app-promo-text { line-height: 1.25; }
.app-promo-text .t1 { font-size: 12.5px; font-weight: 600; }
.app-promo-text .t2 { font-size: 11px; color: var(--text-3); }

.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.user-card:hover { background: var(--card); }
.avatar {
  border-radius: 999px;
  background: linear-gradient(135deg, #2a342e, #182019);
  display: grid; place-items: center;
  color: var(--text-2);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar.sz-28 { width: 28px; height: 28px; font-size: 11px; }
.avatar.sz-32 { width: 32px; height: 32px; font-size: 12px; }
.avatar.sz-36 { width: 36px; height: 36px; font-size: 12.5px; }
.avatar.sz-40 { width: 40px; height: 40px; font-size: 13px; }
.avatar.sz-48 { width: 48px; height: 48px; font-size: 15px; }
.user-card .who { line-height: 1.2; flex: 1; min-width: 0; }
.user-card .who .name { font-size: 13px; font-weight: 600; }
.user-card .who .role { font-size: 11.5px; color: var(--text-3); }

/* Topbar */
.tb-left { display: flex; align-items: center; gap: 16px; }
.tb-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.tb-right { display: flex; align-items: center; gap: 10px; }
.tb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.tb-chip:hover { background: var(--card-2); }
.tb-chip .ico { width: 15px; height: 15px; color: var(--text-2); }
.tb-bell {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-2);
}
.tb-bell:hover { color: var(--text); }
.tb-bell .dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 17px; height: 16px; border-radius: 8px;
  background: var(--danger); color: white;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
}

/* Cards / panels */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px;
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card-h .sub { font-size: 12px; color: var(--text-3); }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: rgba(24, 32, 25, 0.96);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: 160ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.settings-savebar {
  position: sticky;
  bottom: 18px;
  z-index: 20;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 14px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: rgba(19, 26, 22, 0.96);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

@media (max-width: 1320px) {
  .page > div[style*="540px"],
  .page > div[style*="420px"],
  .page > div[style*="380px"],
  .page > div[style*="360px"],
  .page > div[style*="320px"] {
    grid-template-columns: 1fr !important;
  }

  .page > div[style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  div[style*="position: sticky"] {
    position: static !important;
  }
}

@media (max-width: 900px) {
  .app {
    display: block;
  }

  .sidebar {
    position: static;
    width: auto;
    height: auto;
  }

  .topbar {
    position: static;
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .tb-right {
    flex-wrap: wrap;
  }

  .page {
    padding: 18px;
  }

  .page > div[style*="repeat(5, 1fr)"],
  .page > div[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    font-size: 13px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app {
    display: block;
    min-height: 100dvh;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .main {
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 80;
    width: 100%;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--border);
    background: rgba(10, 15, 13, 0.94);
    backdrop-filter: blur(18px);
  }

  .brand,
  .sidebar-foot,
  .nav-section-label {
    display: none !important;
  }

  .nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    min-width: 58px;
    height: 52px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-item .ico {
    width: 18px;
    height: 18px;
  }

  .nav-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 16px;
    height: 15px;
    padding: 0 4px;
    font-size: 9px;
    border: 1px solid rgba(0,0,0,0.35);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 58px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    flex-direction: row;
    align-items: center;
    background: rgba(10, 15, 13, 0.94);
    backdrop-filter: blur(18px);
  }

  .tb-left {
    min-width: 0;
  }

  .tb-title {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tb-right {
    flex: 1;
    justify-content: flex-end;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .tb-right::-webkit-scrollbar {
    display: none;
  }

  .tb-chip {
    height: 36px;
    padding: 8px 10px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .tb-chip:nth-child(1) {
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tb-bell {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .topbar .user-card {
    display: none;
  }

  .topbar div[style*="width: 420px"] {
    position: fixed !important;
    top: calc(62px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 150px) !important;
  }

  .page {
    width: 100%;
    padding: 14px 12px 22px;
  }

  .card {
    border-radius: 14px;
    padding: 14px;
  }

  .page div[style*="grid-template-columns"],
  .page div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }

  .page div[style*="height: calc(100vh - 72px)"],
  .page div[style*="min-height: calc(100vh - 72px)"],
  .page div[style*="height:calc(100vh - 72px)"],
  .page div[style*="min-height:calc(100vh - 72px)"] {
    height: auto !important;
    min-height: 0 !important;
  }

  .page div[style*="width: 320px"],
  .page div[style*="width: 360px"],
  .page div[style*="width: 420px"],
  .page div[style*="width: 540px"],
  .page div[style*="max-width: 820px"],
  .page input[style*="max-width"],
  .page select[style*="max-width"],
  .page textarea[style*="max-width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .tabs .tab {
    flex-shrink: 0;
    padding: 6px 10px;
  }

  .tbl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .calendar-list-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px;
  }

  .calendar-list-date,
  .calendar-list-platforms,
  .calendar-list-row > .pill {
    grid-column: 2;
  }

  .calendar-day {
    min-height: 108px;
  }

  .modal-scrim {
    padding: 10px;
  }

  .modal-panel {
    width: min(100%, 640px);
    max-height: calc(100dvh - 24px);
    padding: 16px;
  }

  .form-grid-2,
  .platform-toggle-grid {
    grid-template-columns: 1fr !important;
  }

  .settings-savebar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-width: none;
  }

  .mobile-create-page {
    padding-bottom: 28px;
  }

  .mobile-create-page > .card:first-child {
    margin-bottom: 12px !important;
    padding: 12px !important;
  }

  .mobile-create-page > .card:first-child > div,
  .mobile-create-page .card-h,
  .mobile-calendar-page > div > .card:first-child > div:first-child,
  .mobile-reports-page > div:first-child,
  .mobile-bulk-page > div:first-child,
  .mobile-team-page > div:first-child,
  .mobile-integrations-page > div:first-child {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .mobile-create-page div[style*="position: sticky"] {
    position: static !important;
    width: 100% !important;
  }

  .mobile-create-page div[style*="justify-content: center"] {
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }

  .mobile-create-page div[style*="width: 240px"][style*="height: 480px"] {
    width: min(72vw, 240px) !important;
    height: min(144vw, 480px) !important;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .mobile-create-page label[style*="width: 92"] {
    width: 76px !important;
    height: 76px !important;
  }

  .mobile-create-page div[style*="width: 64"] {
    width: 56px !important;
  }

  .mobile-create-page button[style*="width: 64"] {
    width: 56px !important;
    height: 56px !important;
  }

  .mobile-create-page .create-content-row,
  .mobile-create-page .create-action-row {
    align-items: stretch !important;
    flex-direction: column !important;
    width: 100%;
  }

  .mobile-create-page .create-action-row {
    margin-left: 0 !important;
    gap: 8px !important;
  }

  .mobile-create-page .create-action-row .btn,
  .mobile-create-page .create-action-row .tb-chip {
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  .mobile-create-page .create-mini-panels {
    grid-template-columns: 1fr !important;
  }

  .mobile-create-page .tb-chip,
  .mobile-calendar-page .btn,
  .mobile-inbox-page .btn,
  .mobile-media-page .btn,
  .mobile-linkbio-page .btn,
  .mobile-settings-page .btn,
  .mobile-bulk-page .btn,
  .mobile-team-page .btn,
  .mobile-integrations-page .btn {
    min-height: 42px;
  }

  .tabs .tab {
    min-height: 38px;
  }

  .btn-sm {
    min-height: 38px;
  }

  .icon-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .btn-ghost {
    min-width: 40px;
  }

  .mobile-reports-page .btn-ghost,
  .mobile-linkbio-page .btn-ghost,
  .mobile-inbox-page .btn-ghost {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .mobile-calendar-page .calendar-main-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-calendar-page .calendar-toolbar,
  .mobile-calendar-page .calendar-month-nav,
  .mobile-calendar-page .calendar-view-actions,
  .mobile-calendar-page .calendar-quick-filter-bar,
  .mobile-calendar-page .calendar-bulk-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .mobile-calendar-page .calendar-month-nav {
    gap: 8px !important;
  }

  .mobile-calendar-page .calendar-month-nav > div:last-child {
    margin-left: 0 !important;
    text-align: center;
  }

  .mobile-calendar-page .calendar-view-actions .tabs {
    width: 100%;
    overflow-x: auto;
  }

  .mobile-calendar-page .calendar-view-actions .tab {
    flex: 1 0 auto;
    text-align: center;
  }

  .mobile-calendar-page .calendar-filter-bar {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .mobile-calendar-page .calendar-quick-filter-bar,
  .mobile-calendar-page .calendar-bulk-actions {
    padding: 10px 12px !important;
  }

  .mobile-calendar-page .calendar-quick-filter-bar .muted {
    margin-left: 0 !important;
    text-align: center;
  }

  .mobile-calendar-page .calendar-bulk-actions .input {
    width: 100% !important;
  }

  .mobile-calendar-page .calendar-side-panel {
    gap: 12px !important;
  }

  .mobile-calendar-page .calendar-day {
    min-height: auto;
    border-right: 0 !important;
    padding: 10px 12px;
  }

  .mobile-calendar-page .calendar-day > div:first-child {
    margin-bottom: 8px !important;
  }

  .mobile-calendar-page div[style*="repeat(7, 1fr)"] {
    display: block !important;
  }

  .mobile-calendar-page div[style*="repeat(7, 1fr)"] > div {
    border-right: 0 !important;
  }

  .mobile-calendar-page div[style*="repeat(7, 1fr)"]:first-of-type {
    display: none !important;
  }

  .mobile-calendar-page .calendar-list-row {
    align-items: start;
    padding: 10px;
  }

  .mobile-calendar-page .calendar-list-platforms {
    flex-wrap: wrap;
  }

  .mobile-calendar-page .calendar-post-chip,
  .mobile-calendar-page .queue-health-row {
    min-height: 40px;
  }

  .mobile-calendar-page .calendar-post-chip {
    padding: 7px 8px;
  }

  .post-editor-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  .post-editor-actions > div {
    display: none;
  }

  .post-editor-actions .btn {
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  .post-editor-actions .btn-primary {
    grid-column: 1 / -1;
  }

  .mobile-inbox-page > div,
  .mobile-settings-page > div {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .mobile-inbox-page > div > div:first-child,
  .mobile-settings-page > div > div:first-child {
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden !important;
    padding: 10px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }

  .mobile-inbox-page > div > div:first-child::-webkit-scrollbar,
  .mobile-settings-page > div > div:first-child::-webkit-scrollbar {
    display: none;
  }

  .mobile-inbox-page > div > div:first-child .nav-section-label,
  .mobile-settings-page > div > div:first-child .nav-section-label {
    display: none !important;
  }

  .mobile-inbox-page > div > div:first-child .nav-item,
  .mobile-settings-page > div > div:first-child .nav-item {
    width: auto;
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--card);
  }

  .mobile-inbox-page > div > div:nth-child(2),
  .mobile-inbox-page > div > div:nth-child(3) {
    border-right: 0 !important;
    min-height: 0;
  }

  .mobile-inbox-page > div > div:nth-child(2) {
    max-height: 45dvh;
    overflow: auto;
    border-bottom: 1px solid var(--border);
  }

  .mobile-inbox-page textarea {
    min-height: 96px !important;
  }

  .mobile-inbox-page .inbox-reply-shell {
    padding: 12px !important;
  }

  .mobile-inbox-page .inbox-reply-actions,
  .mobile-inbox-page .inbox-reply-buttons {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .mobile-inbox-page .inbox-reply-buttons {
    margin-left: 0 !important;
    margin-top: 10px;
  }

  .mobile-inbox-page .inbox-reply-buttons .btn {
    justify-content: center;
    width: 100%;
  }

  .mobile-settings-page > div > div:nth-child(2) {
    max-width: none !important;
    padding: 16px 12px 24px !important;
  }

  .mobile-settings-page div[style*="grid-template-columns: 260px 1fr"] {
    display: block !important;
  }

  .mobile-settings-page div[style*="grid-template-columns: 1fr 80px 80px 80px"] {
    grid-template-columns: minmax(0, 1fr) repeat(3, 52px) !important;
    gap: 6px;
  }

  .mobile-reports-page .report-preview {
    padding: 8px;
    overflow-x: auto;
    justify-items: start;
  }

  .mobile-reports-page .report-page {
    min-width: 720px;
    min-height: 860px;
  }

  .mobile-bulk-page .bulk-csv-input {
    min-height: 220px;
    font-size: 11px;
  }

  .mobile-bulk-page .tbl,
  .mobile-reports-page .tbl,
  .mobile-team-page .tbl,
  .mobile-integrations-page .tbl {
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .mobile-bulk-page .tbl th,
  .mobile-bulk-page .tbl td,
  .mobile-reports-page .tbl th,
  .mobile-reports-page .tbl td,
  .mobile-team-page .tbl th,
  .mobile-team-page .tbl td,
  .mobile-integrations-page .tbl th,
  .mobile-integrations-page .tbl td {
    padding: 10px 12px;
    font-size: 12px;
  }

  .mobile-team-page div[style*="grid-template-columns: 240px minmax(0, 1fr)"] {
    display: block !important;
  }

  .mobile-media-page > div,
  .mobile-linkbio-page > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .mobile-media-page > div > div:first-child {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }

  .mobile-media-page div[style*="padding: 20px 24px"] {
    padding: 14px 12px 24px !important;
  }

  .mobile-media-page div[style*="width: 320px"] {
    width: 100% !important;
  }

  .mobile-media-page div[style*="justify-content: space-between"] {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .mobile-media-page .media-tile-action {
    min-height: 36px;
    width: 100%;
  }

  .mobile-linkbio-page div[style*="grid-template-columns: 1fr 1fr"],
  .mobile-linkbio-page div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  .mobile-linkbio-page div[style*="position: sticky"] {
    position: static !important;
  }

  .mobile-linkbio-page div[style*="align-items: center"][style*="gap: 12"][style*="padding: 12"] {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .mobile-linkbio-page .icon-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .mobile-linkbio-page div[style*="text-align: right"] {
    text-align: left !important;
  }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--card-2); border-color: var(--border-2); }
.btn-primary {
  background: var(--accent);
  color: #06120d;
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--card); color: var(--text); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn.danger { color: var(--danger); border-color: rgba(239,68,68,0.28); background: var(--danger-soft); }
.btn.danger:hover { background: rgba(239,68,68,0.18); }
.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text-2);
}
.icon-btn:hover { background: var(--card-2); color: var(--text); }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--elev);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.pill.green { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(20,184,138,0.2); }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(245,158,11,0.2); }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(239,68,68,0.2); }
.pill.info { background: var(--info-soft); color: var(--info); border-color: rgba(59,130,246,0.25); }
.pill-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.field-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }

/* Tabs (inline) */
.tabs {
  display: inline-flex;
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
}
.tabs .tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.tabs .tab.active { background: var(--elev); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-2); }

/* Tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; font-size: 13px; }
.tbl th { color: var(--text-3); font-weight: 500; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.tbl tbody tr { border-bottom: 1px solid var(--border); }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody tr:hover { background: var(--card-2); }

/* Misc */
.scroll-hide::-webkit-scrollbar { display: none; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.grow { flex: 1; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* Calendar MVP interactions */
.calendar-day {
  padding: 8px;
  position: relative;
  min-height: 128px;
  transition: background .15s, box-shadow .15s;
}
.calendar-day.drop-active {
  background: var(--accent-softer) !important;
  box-shadow: inset 0 0 0 1px rgba(20,184,138,0.34);
}
.calendar-post-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 10.5px;
  overflow: hidden;
  text-align: left;
}
.calendar-post-chip:hover {
  border-color: var(--border-2);
  background: var(--elev);
}
.calendar-post-chip.needs-approval {
  background: var(--accent-soft);
  border-color: rgba(20,184,138,0.25);
}
.calendar-post-time {
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
}
.calendar-post-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}
.calendar-more {
  color: var(--text-3);
  font-size: 10.5px;
  padding: 3px 6px;
  text-align: left;
}
.calendar-more:hover { color: var(--accent-2); }
.calendar-list {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.calendar-list-row {
  display: grid;
  grid-template-columns: auto 150px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  text-align: left;
}
.calendar-list-row:hover { background: var(--card-2); }
.calendar-list-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-3);
  font-size: 12px;
}
.calendar-list-date b { color: var(--text); font-size: 13px; }
.calendar-list-main {
  overflow: hidden;
  line-height: 1.3;
}
.calendar-list-main div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.calendar-list-main span {
  color: var(--text-3);
  font-size: 12px;
  text-transform: capitalize;
}
.calendar-list-platforms {
  display: flex;
  gap: 6px;
}
.queue-health-row {
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  text-align: left;
  cursor: pointer;
}
.queue-health-row:hover .muted {
  color: var(--text);
}
.today-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid transparent;
}
.today-row + .today-row { border-top-color: var(--border); }
.today-row:hover { color: var(--accent-2); }
.empty-note {
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12.5px;
}
.bulk-csv-input {
  min-height: 150px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}
.bulk-empty-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  color: var(--text-3);
  text-align: center;
}
.media-tile {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  text-align: left;
  transition: transform .15s, border-color .15s;
}
.media-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
}
.media-tile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-top: 8px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
}
.media-tile:hover .media-tile-action {
  color: var(--accent-2);
  border-color: rgba(20,184,138,0.28);
  background: var(--accent-soft);
}
.media-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  overflow: hidden;
}
.media-thumb img,
.media-editor-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.media-file-preview {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1c2521, #0e1411);
  color: var(--text-2);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.media-kind-badge,
.media-size-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.64);
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.media-size-badge {
  left: auto;
  top: auto;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
}
.media-meta {
  padding: 10px 12px;
}
.media-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
}
.media-sub {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
}
.media-editor { width: min(780px, 100%); }
.media-editor-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 18px;
}
.media-editor-preview {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.public-bio {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.public-bio-card {
  width: min(420px, 100%);
  text-align: center;
}
.public-bio h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
}
.public-bio p {
  margin: 8px auto 22px;
  max-width: 320px;
  line-height: 1.5;
  opacity: 0.76;
}
.public-bio-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.public-bio-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.22);
  color: inherit;
  text-align: left;
  backdrop-filter: blur(10px);
}
.public-bio-link b {
  font-size: 14px;
  font-weight: 650;
}
.report-preview {
  display: grid;
  place-items: start center;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.report-page {
  width: min(920px, 100%);
  min-height: 980px;
  padding: 44px;
  background: #f8faf8;
  color: #14201a;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #d9e1dc;
  padding-bottom: 22px;
  margin-bottom: 24px;
}
.report-head h1 {
  margin: 8px 0 4px;
  font-size: 34px;
  letter-spacing: 0;
}
.report-head p { margin: 0; color: #617069; }
.report-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.report-kpis div {
  padding: 16px;
  border: 1px solid #d9e1dc;
  border-radius: 8px;
  background: white;
}
.report-kpis span {
  display: block;
  color: #617069;
  font-size: 12px;
  margin-bottom: 8px;
}
.report-kpis b { font-size: 22px; }
.report-page h2 {
  margin: 24px 0 12px;
  font-size: 18px;
}
.report-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-bars div {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.report-bars strong {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #14b88a;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.report-table th,
.report-table td {
  border-bottom: 1px solid #d9e1dc;
  padding: 10px 8px;
  text-align: left;
}
.report-table th { color: #617069; }

@media print {
  .sidebar,
  .topbar,
  .toast,
  .report-preview ~ * {
    display: none !important;
  }
  body { background: white; }
  .page { padding: 0; }
  .report-preview { border: none; padding: 0; background: white; }
  .report-page { box-shadow: none; width: 100%; min-height: auto; }
}
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
}
.modal-panel {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  padding: 20px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.modal-title {
  font-size: 18px;
  font-weight: 650;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.platform-toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.platform-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12.5px;
}
.platform-toggle.active {
  color: var(--text);
  border-color: rgba(20,184,138,0.3);
  background: var(--accent-soft);
}
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* Placeholder image (subtly striped) */
.imgph {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #2a3530, #1a2420);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: rgba(232,239,234,0.45);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Platform brand colors (subtle bg + accent) */
.pf { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.pf-fb { background: #1877F2; color: white; }
.pf-ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); color: white; }
.pf-x { background: #0a0a0a; color: white; }
.pf-li { background: #0a66c2; color: white; }
.pf-tt { background: #0a0a0a; color: white; }
.pf-yt { background: #ff0000; color: white; }
.pf-pin { background: #e60023; color: white; }
.pf-th { background: #000; color: white; }

/* Animations */
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page > * { animation: fadein .25s ease-out; }

/* Sparkline */
.spark { display: block; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a443d; }

/* ---- Business / workspace switcher ------------------------------------- */
.ws-switcher { position: relative; margin: 0 0 16px; }
.ws-switcher-sidebar { padding: 0 4px; }
.ws-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.ws-trigger:hover { background: var(--card-2); border-color: var(--border-2); }
.ws-avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06231a;
}
.ws-avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.ws-trigger-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; }
.ws-trigger-label { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.ws-trigger-name { font-size: 13.5px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-caret { color: var(--text-3); flex-shrink: 0; }

.ws-overlay { position: fixed; inset: 0; z-index: 90; background: transparent; }
.ws-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 91;
  min-width: 248px; padding: 8px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border-2);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.ws-menu-head { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px 8px; }
.ws-menu-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.ws-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text);
}
.ws-item:hover { background: var(--bg-2); }
.ws-item.active { background: var(--accent-soft); border-color: var(--accent-soft); }
.ws-item:disabled { opacity: 0.55; cursor: default; }
.ws-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ws-item-body b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item-body small { font-size: 11px; color: var(--text-3); }
.ws-check { color: var(--accent-2); flex-shrink: 0; }

.ws-add {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 12.5px;
  background: transparent; border: 1px dashed var(--border-2); color: var(--accent-2);
}
.ws-add:hover { background: var(--accent-softer); border-color: var(--accent); }
.ws-add-form { margin-top: 8px; padding: 8px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); }
.ws-add-input {
  width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 13px;
  background: var(--card); border: 1px solid var(--border-2); color: var(--text); outline: none;
}
.ws-add-input:focus { border-color: var(--accent); }
.ws-add-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Switcher lives in the sidebar on desktop, in the topbar on mobile */
.tb-switcher-mobile { display: none; }
.tb-switcher-mobile .ws-switcher { margin: 0; }
.tb-switcher-mobile .ws-menu { left: 0; right: auto; min-width: 260px; }

@media (max-width: 760px) {
  .ws-switcher-sidebar { display: none !important; }
  .tb-switcher-mobile { display: block; width: 100%; }
  .tb-switcher-mobile .ws-trigger { width: auto; max-width: 70vw; }
}

/* ---- AI media generation row (composer) -------------------------------- */
.ai-media-row { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-media-row .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .ai-media-row { flex-direction: column; align-items: stretch; }
  .ai-media-row .btn { width: 100%; justify-content: center; }
}
.ai-usage-note { margin-top: 8px; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.ai-mode-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.ai-mode-dot.live { background: var(--accent); }
.ai-mode-dot.preview { background: var(--warn, #d8a13a); }

/* ---- First-run onboarding ---------------------------------------------- */
.onboarding-wrap { max-width: 640px; margin: 0 auto; }
.onboarding-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.onboarding-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.onboarding-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.onboarding-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.3s; }
.onboarding-steps { display: grid; gap: 12px; }
.onboarding-step { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.onboarding-step.done { opacity: 0.8; }
.onboarding-step.done .onboarding-step-num { background: var(--accent); color: #06231a; border-color: var(--accent); }
.onboarding-step-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-2); }
.onboarding-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onboarding-step-body b { font-size: 14px; }
.onboarding-step-body small { font-size: 12.5px; color: var(--text-3); }
.onboarding-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .onboarding-step { flex-wrap: wrap; }
  .onboarding-step .btn { width: 100%; justify-content: center; }
}

/* ---- Responsive composer + mobile "More" nav sheet -------------------- */
@media (max-width: 760px) {
  .composer-split { grid-template-columns: 1fr !important; }
}
.more-sheet {
  position: fixed; left: 8px; right: 8px; z-index: 95;
  bottom: calc(72px + env(safe-area-inset-bottom));
  padding: 10px; border-radius: 16px;
  background: rgba(14, 20, 17, 0.98); border: 1px solid var(--border-2);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5); backdrop-filter: blur(18px);
}
.more-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; font-weight: 700; font-size: 13px; }
.more-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.more-sheet-grid .nav-item { width: 100%; }
.nav-more .ico { transform: rotate(90deg); }

/* ---- Billing & pricing ------------------------------------------------- */
.billing-guarantees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.billing-guarantee { display: flex; gap: 8px; align-items: flex-start; }
.billing-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.billing-plan { position: relative; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.billing-plan.popular { border-color: var(--accent); }
.billing-plan.current { background: var(--accent-softer); border-color: rgba(20,184,138,0.4); }
.billing-plan-tag { position: absolute; top: -9px; left: 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent); color: #06231a; padding: 2px 8px; border-radius: 999px; }
.billing-calc-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.billing-calc-input { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.billing-calc-rows { display: grid; gap: 8px; }
.billing-calc-row { display: grid; grid-template-columns: 200px 1fr 90px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); }
.billing-calc-row.us { background: var(--accent-softer); border-color: rgba(20,184,138,0.35); }
.billing-calc-name { display: flex; flex-direction: column; min-width: 0; }
.billing-calc-name small { font-size: 10.5px; }
.billing-calc-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.billing-calc-bar span { display: block; height: 100%; background: var(--text-3); }
.billing-calc-row.us .billing-calc-bar span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.billing-calc-cost { text-align: right; font-weight: 700; font-size: 14px; }
.billing-calc-cost small { font-weight: 500; font-size: 10.5px; }
@media (max-width: 760px) {
  .billing-guarantees, .billing-plans, .billing-calc-inputs { grid-template-columns: 1fr; }
  .billing-calc-row { grid-template-columns: 1fr auto; }
  .billing-calc-bar { display: none; }
}

/* ---- Manage businesses ------------------------------------------------- */
.ws-manage { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 12.5px; background: transparent; border: 1px solid transparent; color: var(--text-2); }
.ws-manage:hover { background: var(--bg-2); color: var(--text); }
.biz-list { display: grid; gap: 12px; }
.biz-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.biz-row.active { border-color: rgba(20,184,138,0.4); }
.biz-avatar { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #06231a; }
.biz-fields { min-width: 0; }
.biz-fields-top { display: flex; gap: 8px; align-items: center; }
.biz-fields-top .input:first-child { flex: 1; min-width: 0; }
.biz-fields-top .input { height: 36px; }
.biz-color { display: inline-flex; }
.biz-color input[type=color] { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-2); border-radius: 8px; background: var(--bg-2); cursor: pointer; }
.biz-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 8px; flex-wrap: wrap; }
.biz-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .biz-row { grid-template-columns: 1fr; }
  .biz-fields-top { flex-wrap: wrap; }
  .biz-actions { flex-wrap: wrap; }
}

/* ---- Published & Live feed -------------------------------------------- */
.published-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.published-platforms { display: flex; gap: 4px; flex-wrap: wrap; max-width: 120px; }
.published-body { min-width: 0; }
.published-caption { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.published-meta { display: flex; gap: 6px; font-size: 11.5px; margin-top: 3px; flex-wrap: wrap; }
.published-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pill.ok { color: var(--accent-2); border-color: rgba(20,184,138,0.3); }
.pill.danger { color: var(--danger); border-color: rgba(220,80,80,0.3); }
.pill.info { color: #6aa8ff; border-color: rgba(80,140,255,0.3); }
@media (max-width: 760px) {
  .published-page > div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  .published-row { grid-template-columns: 1fr; }
  .published-right { flex-wrap: wrap; }
}

/* ---- Public client-review page ---------------------------------------- */
.review-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(20,184,138,0.08), transparent), var(--bg); }
.review-card { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.review-post { padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); margin-bottom: 18px; }
.review-actions { display: grid; gap: 10px; }
.review-done { padding: 14px; border-radius: 12px; background: var(--accent-softer); border: 1px solid rgba(20,184,138,0.3); color: var(--accent-2); font-weight: 600; text-align: center; }

/* ---- Analytics: freshness + present mode ------------------------------ */
.analytics-freshness { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); margin-bottom: 16px; }
.present-mode .analytics-toolbar { display: none !important; }
.present-mode .analytics-freshness { justify-content: center; }

/* ---- Short links ------------------------------------------------------- */
.links-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: center; }
.links-row { display: flex; align-items: center; gap: 16px; }
@media (max-width: 760px) {
  .links-form { grid-template-columns: 1fr; }
  .links-row { flex-wrap: wrap; }
}

/* ---- Inbox saved replies ---------------------------------------------- */
.inbox-saved-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.inbox-saved-replies .tb-chip { height: 28px; padding: 4px 10px; font-size: 11.5px; }

/* ---- Competitor benchmarking ------------------------------------------ */
.bench-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 0.8fr; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bench-row:last-child { border-bottom: none; }
.bench-head { background: var(--bg-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.bench-row.you { background: var(--accent-softer); }
@media (max-width: 760px) { .bench-row { grid-template-columns: 1.5fr 1fr 1fr; } .bench-row > div:nth-child(4), .bench-row > div:nth-child(5) { display: none; } }

/* ---- Grouped nav sections (desktop) ----------------------------------- */
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-section + .nav-section { margin-top: 12px; }
.nav-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 4px 12px 2px; font-weight: 600; }

/* ====================================================================== */
/* Landing / marketing front door (.lp-*)                                  */
/* ====================================================================== */
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--r-md); }

.lp { min-height: 100vh; background: radial-gradient(1200px 600px at 80% -10%, rgba(20,184,138,0.10), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(26,210,156,0.07), transparent 55%), var(--bg); color: var(--text); overflow-x: hidden; }
.lp button { font-family: inherit; cursor: pointer; }

/* Nav */
.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(10,15,13,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.lp-nav-inner { max-width: 1140px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.lp-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.lp-nav-links { display: flex; gap: 6px; margin-left: 18px; }
.lp-nav-links button { background: none; border: 0; color: var(--text-2); font-size: 14px; padding: 8px 12px; border-radius: 8px; }
.lp-nav-links button:hover { color: var(--text); background: var(--card); }
.lp-nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Hero */
.lp-hero { max-width: 1140px; margin: 0 auto; padding: 64px 24px 36px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--accent-2); background: var(--accent-soft); border: 1px solid rgba(20,184,138,0.25); padding: 6px 12px; border-radius: 999px; margin-bottom: 22px; }
.lp-hero h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 56px; line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 20px; }
.lp-hero h1 em { color: var(--accent-2); font-style: italic; }
.lp-hero-sub { font-size: 17.5px; line-height: 1.6; color: var(--text-2); max-width: 540px; margin: 0 0 28px; }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-platforms { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--text-3); }
.lp-platforms .muted { font-size: 12.5px; }
.lp-platforms svg { color: var(--text-2); opacity: 0.8; }

/* Hero visual mock */
.lp-hero-visual { display: flex; justify-content: center; }
.lp-mock { width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--border-2); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: 18px; transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); }
.lp-mock-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.lp-mock-biz { font-weight: 600; font-size: 14px; }
.lp-mock-pill { margin-left: auto; font-size: 11px; color: var(--accent-2); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; }
.lp-mock-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 10px; }
.lp-mock-day { width: 34px; flex-shrink: 0; font-size: 11px; color: var(--text-3); padding-top: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.lp-mock-card { flex: 1; border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; background: var(--bg-2); position: relative; }
.lp-mock-card b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.lp-mock-card small { color: var(--text-3); font-size: 11.5px; }
.lp-mock-card.a { border-left: 3px solid var(--accent); }
.lp-mock-card.b { border-left: 3px solid var(--info); }
.lp-mock-card.c { border-left: 3px solid var(--warn); }
.lp-mock-ai { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--purple); background: rgba(167,139,250,0.14); padding: 2px 7px; border-radius: 999px; margin-bottom: 6px; }
.lp-mock-foot { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px; }
.lp-mock-foot span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.lp-mock-foot svg { color: var(--accent-2); }

/* Proof strip */
.lp-proof { text-align: center; font-size: 14px; color: var(--text-2); padding: 14px 24px 8px; max-width: 760px; margin: 0 auto; }
.lp-proof b { color: var(--text); }

/* Sections */
.lp-section { max-width: 1140px; margin: 0 auto; padding: 72px 24px; }
.lp-section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.lp-section-head h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 38px; line-height: 1.12; margin: 14px 0 14px; letter-spacing: -0.01em; }
.lp-section-head p { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 0; }
.lp-section-head .lp-eyebrow { margin-bottom: 0; }

/* Features grid */
.lp-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 20px; transition: border-color 0.2s, transform 0.2s; }
.lp-feature:hover { border-color: var(--border-2); transform: translateY(-2px); }
.lp-feature-icon { width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-2); margin-bottom: 16px; }
.lp-feature h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.lp-feature p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin: 0; }

/* Why / differentiators */
.lp-why { background: linear-gradient(180deg, transparent, rgba(20,184,138,0.04), transparent); }
.lp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; }
.lp-why-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px; }
.lp-why-x { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--danger); margin-bottom: 6px; }
.lp-why-card > p { font-size: 14px; color: var(--text-3); margin: 0 0 16px; line-height: 1.5; }
.lp-why-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); margin-bottom: 6px; }
.lp-why-card .lp-why-good { font-size: 14.5px; color: var(--text); font-weight: 500; margin: 0; line-height: 1.5; }

/* Pricing */
.lp-pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.lp-plan { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 22px; position: relative; display: flex; flex-direction: column; }
.lp-plan.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); background: linear-gradient(180deg, var(--accent-softer), var(--card)); }
.lp-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #04140e; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.lp-plan-name { font-size: 14px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.lp-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px; min-height: 46px; }
.lp-plan-amt { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.lp-plan-per { font-size: 12px; color: var(--text-3); line-height: 1.2; }
.lp-plan-cta { width: 100%; justify-content: center; margin-bottom: 20px; }
.lp-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.lp-plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.lp-plan-features svg { color: var(--accent-2); flex-shrink: 0; margin-top: 2px; }
.lp-pricing-note { text-align: center; margin-top: 28px; font-size: 13.5px; }
.lp-inline-link, .lp-modal-switch button { background: none; border: 0; color: var(--accent-2); font-weight: 600; cursor: pointer; }
.lp-inline-link:hover, .lp-modal-switch button:hover { text-decoration: underline; }

/* Final CTA band */
.lp-cta-band { max-width: 900px; margin: 24px auto 0; padding: 56px 24px 72px; text-align: center; }
.lp-cta-band h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 36px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
.lp-cta-band p { font-size: 16px; color: var(--text-2); margin: 0 0 26px; }

/* Footer */
.lp-footer { border-top: 1px solid var(--border); background: var(--bg-2); }
.lp-footer-inner { max-width: 1140px; margin: 0 auto; padding: 30px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-footer-links { display: flex; gap: 4px; margin-left: 12px; }
.lp-footer-links button { background: none; border: 0; color: var(--text-2); font-size: 13.5px; padding: 6px 10px; border-radius: 7px; }
.lp-footer-links button:hover { color: var(--text); background: var(--card); }
.lp-footer-copy { margin-left: auto; font-size: 12.5px; }

/* Auth modal */
.lp-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(4,8,6,0.74); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lp-fade 0.16s ease; }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.lp-modal { position: relative; width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 28px; }
.lp-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; color: var(--text-3); padding: 6px; border-radius: 8px; line-height: 0; }
.lp-modal-close:hover { color: var(--text); background: var(--card-2); }
.lp-modal-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lp-field { display: block; margin-bottom: 14px; }
.lp-field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.lp-field .input { width: 100%; }
.lp-modal-error { color: var(--danger); font-size: 13px; margin-bottom: 12px; background: var(--danger-soft); border-radius: 8px; padding: 8px 11px; }
.lp-modal-submit { width: 100%; justify-content: center; margin-top: 4px; }
.lp-modal-trust { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }
.lp-modal-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.lp-modal-trust svg { color: var(--accent-2); }
.lp-modal-switch { text-align: center; margin-top: 18px; font-size: 13px; }

/* Google sign-in button + divider (used in landing modal and LoginPage) */
.lp-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-md); background: #ffffff; color: #1f2328; font-weight: 600; font-size: 14px; border: 1px solid #dadce0; cursor: pointer; margin-bottom: 14px; transition: background 0.15s, box-shadow 0.15s; }
.lp-google-btn:hover { background: #f6f7f8; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.lp-google-btn svg { flex-shrink: 0; }
.lp-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; margin: 2px 0 14px; }
.lp-or::before, .lp-or::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.lp-auth-notice { background: var(--info-soft); color: var(--text); font-size: 12.5px; line-height: 1.45; border-radius: 8px; padding: 9px 11px; margin-bottom: 14px; border: 1px solid rgba(59,130,246,0.25); }

/* ====================================================================== */
/* Admin Console (.admin-*)                                                */
/* ====================================================================== */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.admin-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); font-size: 14px; font-weight: 600; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; white-space: nowrap; }
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.admin-metric { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.admin-metric span { font-size: 12px; color: var(--text-3); }
.admin-metric b { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.admin-metric small { font-size: 11px; color: var(--text-3); }
.admin-metric.accent { border-color: rgba(20,184,138,0.3); background: linear-gradient(135deg, var(--accent-softer), var(--card)); }
.admin-metric.accent b { color: var(--accent-2); }
.admin-planrow { display: grid; grid-template-columns: 160px 1fr 90px; align-items: center; gap: 12px; padding: 7px 0; }
.admin-planname { font-size: 13px; font-weight: 600; }
.admin-planbar { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.admin-planbar span { display: block; height: 100%; background: var(--accent); }
.admin-plancount { font-size: 12px; color: var(--text-3); text-align: right; }
.admin-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.admin-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; flex: 1; max-width: 360px; color: var(--text-3); }
.admin-search .input { border: 0; background: none; padding: 9px 0; flex: 1; }
.admin-create { margin-bottom: 14px; }
.admin-create-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr auto; gap: 10px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { min-width: 880px; }
.admin-trow { display: grid; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.admin-table.users .admin-trow { grid-template-columns: 2fr 1.1fr 1fr 0.9fr 0.9fr 2.2fr; }
.admin-table.subs .admin-trow { grid-template-columns: 2fr 1.1fr 1fr 0.7fr 2fr; }
.admin-trow:last-child { border-bottom: 0; }
.admin-thead { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); background: var(--bg-2); font-weight: 600; }
.admin-trow.is-suspended { opacity: 0.6; }
.admin-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-avatar { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--info)); color: #04140e; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.admin-uname { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-uemail { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-muted { font-size: 12.5px; color: var(--text-3); }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-actions .btn-sm { padding: 5px 9px; font-size: 12px; }
.admin-danger { color: var(--danger); }
.adm-select { padding: 6px 8px; font-size: 12.5px; max-width: 150px; }
.adm-note { padding: 6px 10px; font-size: 12.5px; }
.admin-mrr { font-weight: 600; font-size: 13px; }
.adm-status { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.adm-status.green { background: var(--accent-soft); color: var(--accent-2); }
.adm-status.info { background: var(--info-soft); color: var(--info); }
.adm-status.purple { background: rgba(167,139,250,0.16); color: var(--purple); }
.adm-status.warn { background: var(--warn-soft); color: var(--warn); }
.adm-status.danger { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 760px) {
  .admin-create-grid { grid-template-columns: 1fr 1fr; }
  .admin-head { flex-direction: column; }
}

/* Responsive */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 40px; gap: 36px; }
  .lp-hero-visual { order: -1; }
  .lp-mock { transform: none; max-width: 360px; }
  .lp-hero h1 { font-size: 42px; }
  .lp-features { grid-template-columns: repeat(2, 1fr); }
  .lp-pricing { grid-template-columns: repeat(2, 1fr); }
  .lp-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lp-nav-links { display: none; }
  .lp-nav-inner { padding: 12px 16px; }
  .lp-hero { padding: 28px 16px; }
  .lp-hero h1 { font-size: 34px; }
  .lp-hero-sub { font-size: 15.5px; }
  .lp-section { padding: 48px 16px; }
  .lp-section-head h2 { font-size: 28px; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-pricing { grid-template-columns: 1fr; }
  .lp-plan.popular { order: -1; }
  .lp-cta-band h2 { font-size: 27px; }
  .lp-footer-inner { flex-direction: column; align-items: flex-start; }
  .lp-footer-copy { margin-left: 0; }
  .btn-lg { padding: 11px 18px; font-size: 14.5px; }
}

/* ====================================================================== */
/* Light mode — overrides the :root (dark) palette via [data-theme=light]  */
/* The brand accent (green) is kept; neutrals invert. Most of the app uses */
/* the CSS variables below, so it flips automatically.                     */
/* ====================================================================== */
:root { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8f7;
  --bg-2: #eef2f0;
  --card: #ffffff;
  --card-2: #f4f7f5;
  --elev: #ffffff;
  --border: #e3e9e5;
  --border-2: #d2dbd5;
  --text: #0e1a14;
  --text-2: #4b5a52;
  --text-3: #79857d;
  --accent: #0f9e75;
  --accent-2: #12b287;
  --accent-soft: rgba(20, 184, 138, 0.12);
  --accent-softer: rgba(20, 184, 138, 0.07);
  --warn: #b45309;
  --warn-soft: rgba(245, 158, 11, 0.16);
  --danger: #dc2626;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --info: #2563eb;
  --info-soft: rgba(59, 130, 246, 0.12);
  --purple: #7c3aed;
  --pink: #db2777;
  --shadow-lg: 0 24px 48px -12px rgba(16, 40, 30, 0.16);
  --shadow-md: 0 8px 24px -8px rgba(16, 40, 30, 0.10);
}
/* Hardcoded-dark spots that need a light counterpart */
html[data-theme="light"] .lp-nav { background: rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .lp { background: radial-gradient(1200px 600px at 80% -10%, rgba(20,184,138,0.10), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(26,210,156,0.07), transparent 55%), var(--bg); }
html[data-theme="light"] .lp-google-btn { border-color: #d0d7d3; }

/* Theme toggle button in the topbar */
.tb-theme { padding: 8px 9px; }
.tb-theme svg { display: block; }

/* Create Post composer: drop the preview below the form (no sticky overlap) on
   anything narrower than a wide desktop, so it never "gets in the way" on scroll. */
@media (max-width: 1080px) {
  .composer-split { grid-template-columns: 1fr !important; }
  .composer-preview { position: static !important; max-height: none !important; overflow: visible !important; }
}