/* ============================================================
   LinkedIn Planning Studio — Design System v2
   ============================================================ */

/* ---- Variables -------------------------------------------- */
:root {
  /* Brand */
  --li-blue:        #0a66c2;
  --li-blue-dark:   #004182;
  --li-blue-light:  #dce8f8;

  /* Sidebar */
  --sidebar-bg:     #0f172a;
  --sidebar-hover:  #1e293b;
  --sidebar-active: #1e3a5f;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-text:   #cbd5e1;
  --sidebar-muted:  #64748b;
  --sidebar-width:  256px;

  /* Surface */
  --bg:             #f1f5f9;
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --border:         #e2e8f0;
  --border-focus:   #0a66c2;

  /* Text */
  --text:           #0f172a;
  --text-2:         #475569;
  --text-3:         #94a3b8;
  --text-inv:       #ffffff;

  /* Status */
  --s-idea:         #94a3b8;
  --s-draft:        #f59e0b;
  --s-scheduled:    #3b82f6;
  --s-approved:     #10b981;
  --s-published:    #0a66c2;
  --s-archived:     #6b7280;

  /* Semantic */
  --success:        #10b981;
  --success-bg:     #ecfdf5;
  --warning:        #f59e0b;
  --warning-bg:     #fffbeb;
  --error:          #ef4444;
  --error-bg:       #fef2f2;
  --info:           #3b82f6;
  --info-bg:        #eff6ff;

  /* Spacing (8-point grid) */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;  --s10: 40px;

  /* Radius */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.05);
  --sh-sm:  0 1px 4px rgba(0,0,0,0.08);
  --sh:     0 4px 12px rgba(0,0,0,0.08);
  --sh-lg:  0 8px 30px rgba(0,0,0,0.10);
  --sh-xl:  0 20px 60px rgba(0,0,0,0.15);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }
dialog:not([open]) { display: none !important; }
dialog[open] { margin: auto; }

body.modal-open { overflow: hidden; }

html { font-size: 15px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a { color: var(--li-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: var(--font); cursor: pointer; }
input, textarea, select { font-family: var(--font); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--li-blue);
  outline-offset: 2px;
}

/* ---- Loading bar ------------------------------------------ */
#loadingBar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--li-blue), #60a5fa);
  z-index: 9999;
  display: none;
  animation: loadPulse 1.4s ease-in-out infinite;
}
@keyframes loadPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px 16px;
  border: none;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 90ms, box-shadow 90ms, background 120ms;
}
.btn:active { transform: translateY(1px); }

.btn-primary    { background: var(--li-blue);  color: #fff; box-shadow: 0 2px 8px rgba(10,102,194,0.30); }
.btn-primary:hover { background: var(--li-blue-dark); box-shadow: 0 4px 14px rgba(10,102,194,0.38); }

.btn-success    { background: var(--success);  color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.30); }
.btn-success:hover { background: #059669; }

.btn-danger     { background: var(--error);    color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,0.25); }
.btn-danger:hover  { background: #dc2626; }

.btn-secondary  { background: var(--surface);  color: var(--text); border: 1px solid var(--border); box-shadow: var(--sh-xs); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost      { background: transparent;     color: var(--text-2); border: 1px solid transparent; }
.btn-ghost:hover{ background: var(--surface-2); border-color: var(--border); }

.btn-linkedin   { background: #0a66c2;         color: #fff; }
.btn-linkedin:hover { background: #004182; }

.btn-sm         { padding: 5px 12px; font-size: 12px; }
.btn-full       { width: 100%; justify-content: center; }
.btn-icon       { padding: 6px; background: transparent; border: none; color: var(--text-3); border-radius: var(--r-sm); }
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
.btn-link       { background: none; border: none; color: var(--li-blue); font-size: inherit; padding: 0; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* ---- Forms ------------------------------------------------- */
.form-group   { display: flex; flex-direction: column; gap: var(--s1); }
.form-row     { display: grid; gap: var(--s4); }
.form-row-2   { grid-template-columns: 1fr 1fr; }
.form-row-3   { grid-template-columns: 1fr 1fr 1fr; }

label { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 0.03em; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="datetime-local"],
input[type="number"],
input:not([type]),
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(10,102,194,0.12);
}
textarea { resize: vertical; min-height: 80px; }
select   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
           background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }

.form-hint  { font-size: 12px; color: var(--text-3); }
.form-error { font-size: 13px; color: var(--error); background: var(--error-bg); padding: var(--s3) var(--s4); border-radius: var(--r); border: 1px solid #fecaca; }

.char-counter { font-size: 12px; color: var(--text-3); text-align: right; margin-top: var(--s1); }
.char-counter.warn  { color: var(--warning); }
.char-counter.limit { color: var(--error); }

/* ---- Badges ----------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.badge::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.7; }
.badge-idea      { background: #f1f5f9; color: #64748b; }
.badge-draft     { background: #fffbeb; color: #92400e; }
.badge-scheduled { background: #eff6ff; color: #1d4ed8; }
.badge-approved  { background: #ecfdf5; color: #065f46; }
.badge-published { background: #dce8f8; color: #004182; }
.badge-archived  { background: #f8fafc; color: #475569; }

.role-badge      { display:inline-flex; padding:2px 8px; border-radius:var(--r-full); font-size:11px; font-weight:700; text-transform:uppercase; }
.role-admin      { background:#fef3c7; color:#92400e; }
.role-member     { background:#f1f5f9; color:#475569; }

/* ---- Toast notifications ---------------------------------- */
#toastContainer { position:fixed; bottom:24px; right:24px; z-index:10000; display:flex; flex-direction:column; gap:var(--s2); pointer-events:none; }

.toast {
  display: flex; align-items: center; gap: var(--s3);
  min-width: 280px; max-width: 400px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  font-size: 14px;
  pointer-events: all;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms, transform 220ms;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--error); }
.toast-info    { border-left: 3px solid var(--info); }
.toast-warning { border-left: 3px solid var(--warning); }

/* ---- Confirm dialog --------------------------------------- */
#confirmDialog {
  border: none; border-radius: var(--r-xl); padding: var(--s8);
  max-width: 440px; width: 92vw;
  box-shadow: var(--sh-xl);
}
#confirmDialog::backdrop { background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); }
.confirm-title { font-size: 17px; font-weight: 700; margin-bottom: var(--s3); }
.confirm-body  { color: var(--text-2); margin-bottom: var(--s6); white-space: pre-wrap; word-break: break-word; }
.confirm-actions { display:flex; justify-content:flex-end; gap:var(--s2); }

/* ---- App shell -------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ---------------------------------------------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--s5);
  gap: var(--s4);
}

.sidebar-logo {
  display: flex; align-items: center; gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--sidebar-border);
}
.li-badge {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--li-blue);
  font: 700 20px var(--font);
  color: #fff;
  flex-shrink: 0;
}
.sidebar-logo strong { display:block; font-size:14px; color:#fff; line-height:1.2; }
.sidebar-logo span   { display:block; font-size:12px; color: var(--sidebar-muted); }

.li-connection {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r);
  color: var(--sidebar-text);
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms;
}
.li-connection:hover { background: rgba(255,255,255,0.08); }
.li-connection .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-online  { background: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,0.25); }
.dot-offline { background: var(--sidebar-muted); }
.li-connection .conn-name { font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.sidebar-divider { height:1px; background: var(--sidebar-border); margin: var(--s2) 0; }

.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3);
  border: none; background: transparent;
  color: var(--sidebar-text); font-size: 14px; font-weight: 500;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  text-align: left; width: 100%;
}
.nav-item svg { flex-shrink:0; opacity:0.7; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { background: var(--sidebar-active); color: #fff; }
.nav-item.active svg { opacity: 1; }

.sidebar-spacer { flex: 1; }

.sidebar-user {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3);
  border-top: 1px solid var(--sidebar-border);
  margin-top: auto;
}
.user-avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--li-blue);
  color: #fff; font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.user-info { flex:1; min-width:0; }
.user-info strong { display:block; font-size:13px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-info span   { display:block; font-size:11px; color: var(--sidebar-muted); }

.btn-logout {
  background: transparent; border: 1px solid var(--sidebar-border);
  color: var(--sidebar-muted); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: 11px; flex-shrink: 0;
}
.btn-logout:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.15); }

/* ---- Main area -------------------------------------------- */
.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
}

.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: var(--s4);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
}
.top-bar-left  { display:flex; align-items:center; gap:var(--s4); min-width:0; }
.top-bar-right { display:flex; align-items:center; gap:var(--s2); flex-shrink:0; }
.top-bar h2    { font-size:17px; font-weight:700; }

.cal-nav { display:flex; align-items:center; gap:var(--s2); }
.cal-nav button {
  width:32px; height:32px; display:grid; place-items:center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size:16px; color:var(--text-2);
}
.cal-nav button:hover { background:var(--surface-2); color:var(--text); }
.cal-nav strong { font-size:14px; font-weight:600; white-space:nowrap; min-width:160px; text-align:center; }

.view-content { flex:1; min-width:0; padding:var(--s5) var(--s6) var(--s10); overflow:auto; }

/* ---- Calendar --------------------------------------------- */
.cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.cal-dow {
  text-align:center; font-size:11px; font-weight:700;
  text-transform:uppercase; color: var(--text-3);
  letter-spacing:0.06em; padding: var(--s2);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s2);
}
.cal-day {
  min-height: 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s3);
  box-shadow: var(--sh-xs);
  transition: box-shadow 120ms;
}
.cal-day:hover { box-shadow: var(--sh-sm); }
.cal-day.today { border-color: var(--li-blue); box-shadow: 0 0 0 2px rgba(10,102,194,0.15); }
.cal-day.other-month { opacity:0.45; }

.cal-day-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: var(--s2);
}
.cal-day-num {
  font-size:13px; font-weight:700; color:var(--text);
}
.cal-day.today .cal-day-num {
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--li-blue); color:#fff;
  font-size:12px;
}
.cal-add-btn {
  width:22px; height:22px; border-radius:50%;
  background:transparent; border:1px solid var(--border);
  color:var(--text-3); font-size:15px; line-height:1;
  display:grid; place-items:center;
}
.cal-add-btn:hover { background:var(--li-blue); color:#fff; border-color:var(--li-blue); }

.post-chip {
  display:block; width:100%;
  background:var(--surface); border:1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 7px;
  margin-bottom: 4px;
  border-left: 3px solid var(--s-idea);
  text-align:left; cursor:pointer;
  transition: box-shadow 100ms, transform 100ms;
}
.post-chip:hover { box-shadow: var(--sh-sm); transform: translateX(1px); }
.post-chip-type  { font-size:10px; font-weight:700; text-transform:uppercase; color: var(--s-idea); letter-spacing:0.05em; display:block; }
.post-chip-title { font-size:12px; font-weight:600; color:var(--text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-chip-time  { font-size:11px; color:var(--text-3); display:block; }

.post-chip[data-status="draft"]     { border-left-color: var(--s-draft); }
.post-chip[data-status="draft"] .post-chip-type { color: var(--s-draft); }
.post-chip[data-status="scheduled"] { border-left-color: var(--s-scheduled); }
.post-chip[data-status="scheduled"] .post-chip-type { color: var(--s-scheduled); }
.post-chip[data-status="approved"]  { border-left-color: var(--s-approved); }
.post-chip[data-status="approved"]  .post-chip-type { color: var(--s-approved); }
.post-chip[data-status="published"] { border-left-color: var(--s-published); }
.post-chip[data-status="published"] .post-chip-type { color: var(--s-published); }
.post-chip[data-status="archived"]  { border-left-color: var(--s-archived); opacity:0.7; }

/* ---- Pipeline / Kanban ------------------------------------ */
.pipeline-board {
  display: flex; gap: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s5);
  min-height: 70vh;
  align-items: flex-start;
}
.pipeline-col {
  display: flex; flex-direction: column; gap: var(--s3);
  min-width: 260px; max-width: 300px; flex-shrink: 0;
}
.pipeline-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 13px; font-weight: 700;
}
.pipeline-col-title { display:flex; align-items:center; gap:var(--s2); }
.pipeline-count {
  font-size:12px; font-weight:700;
  background:var(--bg); padding:2px 8px; border-radius:var(--r-full);
  color: var(--text-2);
}
.pipeline-cards { display:flex; flex-direction:column; gap:var(--s3); min-height:80px; }
.pipeline-cards.drag-over {
  background: var(--li-blue-light);
  border: 2px dashed var(--li-blue);
  border-radius: var(--r-lg);
  padding: var(--s3);
}
.pipeline-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: var(--sh-xs);
  cursor: grab;
  border-top: 3px solid var(--s-idea);
  transition: box-shadow 120ms, transform 120ms;
}
.pipeline-card:hover { box-shadow: var(--sh); transform: translateY(-1px); }
.pipeline-card.dragging { opacity:0.5; cursor:grabbing; }
.pipeline-card[data-status="draft"]     { border-top-color: var(--s-draft); }
.pipeline-card[data-status="scheduled"] { border-top-color: var(--s-scheduled); }
.pipeline-card[data-status="approved"]  { border-top-color: var(--s-approved); }
.pipeline-card[data-status="published"] { border-top-color: var(--s-published); }

.card-type   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-3); margin-bottom:4px; }
.card-title  { font-size:14px; font-weight:600; margin-bottom: var(--s2); line-height:1.3; }
.card-meta   { display:flex; align-items:center; gap: var(--s2); flex-wrap:wrap; }
.card-date   { font-size:12px; color:var(--text-3); }
.card-author { font-size:12px; color:var(--text-3); }

/* ---- Analytics -------------------------------------------- */
.analytics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-bottom:var(--s6); }
.metric-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-xl); padding:var(--s5) var(--s6);
  box-shadow: var(--sh-xs);
}
.metric-label { font-size:12px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--s2); }
.metric-value { font-size:34px; font-weight:800; color:var(--text); line-height:1; }
.metric-sub   { font-size:12px; color:var(--text-3); margin-top: var(--s1); }

.chart-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-bottom:var(--s4); }
.chart-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-xl); padding:var(--s5) var(--s6);
  box-shadow: var(--sh-xs);
}
.chart-card h3 { font-size:14px; font-weight:700; margin-bottom:var(--s5); }
.chart-card svg { width:100%; }

.timeline-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--s5) var(--s6); box-shadow:var(--sh-xs); margin-bottom:var(--s4); }
.timeline-card h3 { font-size:14px; font-weight:700; margin-bottom:var(--s5); }

/* ---- Team management -------------------------------------- */
.team-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s5); }
.team-table  { width:100%; border-collapse:collapse; overflow-x:auto; }
.team-table th { text-align:left; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; padding:var(--s3) var(--s4); border-bottom:2px solid var(--border); }
.team-table td { padding:var(--s4); border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.team-table tr:last-child td { border-bottom:none; }
.team-table tr:hover td { background:var(--surface-2); }
.team-avatar { width:32px; height:32px; border-radius:50%; background:var(--li-blue); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; flex-shrink:0; }
.team-user-cell { display:flex; align-items:center; gap:var(--s3); }
.team-name  { font-weight:600; }
.team-email { font-size:12px; color:var(--text-3); }
.inactive-row td { opacity:0.5; }

.team-add-card {
  background: var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding: var(--s6); margin-top:var(--s5); box-shadow:var(--sh-xs);
}
.team-add-card h3 { font-size:14px; font-weight:700; margin-bottom:var(--s4); }

/* ---- Settings --------------------------------------------- */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start; }
.settings-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-xl); padding:var(--s6);
  box-shadow: var(--sh-xs);
}
.settings-card h3 { font-size:14px; font-weight:700; margin-bottom:var(--s4); display:flex; align-items:center; gap:var(--s2); }
.settings-card .form-group + .form-group { margin-top:var(--s4); }
.settings-card footer { margin-top:var(--s5); display:flex; justify-content:flex-end; gap:var(--s2); }

.api-key-display {
  display:flex; align-items:center; gap:var(--s2);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:var(--s3) var(--s4);
  font-family:monospace; font-size:13px; color:var(--text-2);
  word-break:break-all;
}

.li-connected-badge {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4); background:var(--success-bg);
  border:1px solid #a7f3d0; border-radius:var(--r);
  font-size:14px; margin-bottom:var(--s4);
}
.li-connected-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }

/* ---- Post editor modal ------------------------------------ */
.post-editor-dialog {
  border: none; padding: 0;
  border-radius: var(--r-xl);
  max-width: 860px;
  width: 95vw;
  max-height: calc(100dvh - 48px);
  background: var(--surface);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}
.post-editor-dialog[open] {
  display: flex;
  flex-direction: column;
}
.post-editor-dialog::backdrop { background:rgba(15,23,42,0.55); backdrop-filter:blur(6px); }

.editor-wrapper { display:flex; flex-direction:column; height:100%; max-height:calc(100dvh - 48px); }

.editor-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5);
  background: var(--sidebar-bg);
  color: #fff;
  flex-shrink: 0;
}
.editor-header-left { display:flex; align-items:center; gap:var(--s3); }
.editor-type-icon   { font-size:20px; }
.editor-header h3   { font-size:16px; font-weight:700; color:#fff; margin-bottom:2px; }
.editor-header-close {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:rgba(255,255,255,0.08); border:none;
  color:#fff; font-size:18px; display:grid; place-items:center;
}
.editor-header-close:hover { background:rgba(255,255,255,0.15); }

.editor-tab-nav {
  display:flex; gap:0; border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--surface);
}
.tab-btn {
  padding:11px var(--s5);
  background:transparent; border:none; border-bottom:2px solid transparent;
  font-size:13px; font-weight:600; color:var(--text-3);
  cursor:pointer; transition:color 120ms, border-color 120ms;
  display:flex; align-items:center; gap:var(--s2);
  white-space:nowrap;
}
.tab-btn:hover  { color:var(--text); }
.tab-btn.active { color:var(--li-blue); border-bottom-color:var(--li-blue); }
.tab-badge {
  display:grid; place-items:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--li-blue); color:#fff;
  font-size:10px; font-weight:700;
}

.editor-body   { flex:1; overflow-y:auto; }
.editor-tab    { padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
.editor-tab .form-group + .form-group,
.editor-tab .form-row  + .form-group,
.editor-tab .form-group + .form-row { margin-top: var(--s1); }

.type-fields { display:flex; flex-direction:column; gap:var(--s4); }

/* Poll options */
.poll-options-list   { display:flex; flex-direction:column; gap:var(--s2); }
.poll-option-row     { display:flex; align-items:center; gap:var(--s2); }
.poll-option-row input { flex:1; }

/* Comments */
.comments-section  { margin-top:var(--s5); border-top:1px solid var(--border); padding-top:var(--s5); }
.comments-section h4 { font-size:13px; font-weight:700; margin-bottom:var(--s4); }
.comment-item      { padding:var(--s3) var(--s4); border-radius:var(--r); background:var(--surface-2); margin-bottom:var(--s2); }
.comment-meta      { font-size:12px; color:var(--text-3); margin-bottom:4px; }
.comment-body      { font-size:14px; }
.comment-form      { display:flex; gap:var(--s2); margin-top:var(--s3); align-items:flex-end; }
.comment-form textarea { flex:1; height:60px; }

/* Media upload */
.media-dropzone {
  border: 2px dashed var(--border); border-radius:var(--r-xl);
  padding:var(--s10); text-align:center;
  color:var(--text-3); transition:border-color 120ms, background 120ms;
  cursor:pointer;
}
.media-dropzone:hover, .media-dropzone.drag-over {
  border-color: var(--li-blue); background: var(--li-blue-light); color:var(--li-blue);
}
.media-dropzone-icon { font-size:32px; margin-bottom:var(--s3); }
.media-dropzone p    { font-size:14px; margin-bottom:var(--s1); }

.media-list { display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s4); }
.media-item {
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s3) var(--s4);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.media-thumb {
  width:48px; height:48px; border-radius:var(--r-sm);
  background:var(--bg); overflow:hidden; flex-shrink:0;
  display:grid; place-items:center; font-size:24px;
}
.media-thumb img { width:100%; height:100%; object-fit:contain; }
.media-item-info { flex:1; min-width:0; }
.media-item-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-item-size { font-size:12px; color:var(--text-3); }
.media-item-alt  { font-size:12px; border:1px solid var(--border); border-radius:var(--r-sm); padding:4px 8px; background:var(--surface); width:100%; margin-top:4px; }

/* LinkedIn preview */
.preview-wrapper { max-width:580px; margin:0 auto; }
.preview-note    { font-size:12px; color:var(--text-3); text-align:center; margin-bottom:var(--s4); }
.li-preview-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow: var(--sh);
}
.lp-header {
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4);
}
.lp-avatar {
  width:48px; height:48px; border-radius:50%;
  background: var(--li-blue); color:#fff;
  display:grid; place-items:center; font-size:17px; font-weight:700;
  flex-shrink:0;
}
.lp-meta { flex:1; }
.lp-name     { font-size:14px; font-weight:700; display:block; }
.lp-headline { font-size:12px; color:var(--text-2); display:block; }
.lp-time     { font-size:12px; color:var(--text-3); display:flex; align-items:center; gap:4px; margin-top:2px; }
.lp-follow   { font-size:14px; font-weight:700; color:var(--li-blue); cursor:pointer; }
.lp-body {
  padding:0 var(--s4) var(--s4);
  font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-word;
}
.lp-body .lp-hashtag { color:var(--li-blue); font-weight:500; }
.lp-body .lp-url     { color:var(--li-blue); }
.lp-body .lp-see-more { color:var(--text-3); cursor:pointer; }
.li-preview-card .lp-media-img { width:100%; background:var(--bg); overflow:visible; }
.li-preview-card .lp-media-img img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
.lp-article-card {
  margin:0 var(--s4) var(--s4);
  border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden;
}
.lp-article-body { padding:var(--s3) var(--s4); }
.lp-article-title { font-size:14px; font-weight:700; }
.lp-article-url   { font-size:12px; color:var(--text-3); }
.lp-poll {
  margin:0 var(--s4) var(--s4);
  border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s4);
}
.lp-poll-question { font-size:14px; font-weight:600; margin-bottom:var(--s3); }
.lp-poll-option   { padding:10px var(--s4); border:1px solid var(--border); border-radius:var(--r-full); margin-bottom:var(--s2); font-size:14px; cursor:pointer; transition:background 120ms; }
.lp-poll-option:hover { background:var(--li-blue-light); border-color:var(--li-blue); }
.lp-reactions {
  display:flex; border-top:1px solid var(--border); padding:4px;
}
.lp-reaction-btn {
  flex:1; padding:10px;
  background:transparent; border:none;
  font-size:13px; font-weight:600; color:var(--text-3);
  border-radius:var(--r-sm); cursor:pointer;
}
.lp-reaction-btn:hover { background:var(--surface-2); color:var(--text); }

/* AI assistant */
.ai-panel { display:flex; flex-direction:column; gap:var(--s5); }
.ai-section h4 { font-size:13px; font-weight:700; margin-bottom:var(--s3); }
.ai-divider { height:1px; background:var(--border); }
.ai-output  { margin-top:var(--s3); }
.ai-result  { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s4); }
.ai-result-text { font-size:14px; line-height:1.6; white-space:pre-wrap; margin-bottom:var(--s3); }
.ai-result-actions { display:flex; gap:var(--s2); }
.ai-loading { display:flex; align-items:center; gap:var(--s3); color:var(--text-3); font-size:14px; padding:var(--s4); }
.ai-loading::before { content:''; width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--li-blue); border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }

.hashtag-chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.hashtag-chip  {
  padding:4px 10px; background:var(--li-blue-light); color:var(--li-blue);
  border-radius:var(--r-full); font-size:13px; font-weight:600;
  cursor:pointer; border:1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.hashtag-chip:hover { background:var(--li-blue); color:#fff; }
.hashtag-chip.selected { background:var(--li-blue); color:#fff; }

/* Editor footer */
.editor-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5);
  border-top:1px solid var(--border);
  background:var(--surface-2);
  flex-shrink:0; gap:var(--s3);
  flex-wrap:wrap;
}
.editor-footer-left  { display:flex; gap:var(--s2); flex-wrap:wrap; }
.editor-footer-right { display:flex; gap:var(--s2); flex-wrap:wrap; }

/* ---- Login screen ----------------------------------------- */
.login-screen {
  display: grid; place-items: center;
  min-height: 100vh;
  background: var(--sidebar-bg);
}
.login-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s8);
  width:100%; max-width:380px;
  box-shadow:var(--sh-xl);
}
.login-logo {
  display:flex; align-items:center; gap:var(--s4);
  margin-bottom:var(--s8);
}
.login-logo h1  { font-size:20px; font-weight:800; margin:0; }
.login-logo p   { font-size:13px; color:var(--text-3); margin:2px 0 0; }
.login-card .form-group + .form-group { margin-top:var(--s4); }
.login-card .btn { margin-top:var(--s5); }

/* ---- Setup page ------------------------------------------- */
.setup-page { background:var(--sidebar-bg); min-height:100vh; }
.setup-shell { display:grid; place-items:center; min-height:100vh; padding:var(--s6); }
.setup-card  {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s8);
  width:100%; max-width:680px;
  box-shadow:var(--sh-xl);
}
.setup-logo { display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s8); }
.setup-logo h1 { font-size:22px; font-weight:800; }
.setup-logo p  { font-size:13px; color:var(--text-3); margin:2px 0 0; }
.setup-form h2 { font-size:14px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--s4); margin-top:var(--s5); border-top:1px solid var(--border); padding-top:var(--s5); }
.setup-form h2:first-child { margin-top:0; border-top:none; padding-top:0; }
.setup-form .form-group + .form-group { margin-top:var(--s3); }
.setup-error {
  background:var(--error-bg); border:1px solid #fecaca;
  border-radius:var(--r); padding:var(--s3) var(--s4);
  font-size:14px; color:var(--error); margin-bottom:var(--s4);
}
.setup-success { text-align:center; }
.setup-success-icon { font-size:48px; margin-bottom:var(--s4); }
.setup-success h2   { font-size:20px; font-weight:800; margin-bottom:var(--s3); }
.setup-key {
  display:block; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:var(--s4);
  font-family:monospace; font-size:13px; word-break:break-all;
  text-align:left; margin:var(--s4) 0;
}
.setup-hint { font-size:13px; color:var(--text-3); margin-top:var(--s3); }

/* ---- Spinners / loading ----------------------------------- */
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--li-blue); border-radius:50%; animation:spin 0.7s linear infinite; }

/* ---- Empty states ----------------------------------------- */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--s10);
  color:var(--text-3); text-align:center;
}
.empty-state-icon  { font-size:40px; margin-bottom:var(--s4); }
.empty-state h3    { font-size:16px; font-weight:700; color:var(--text-2); margin-bottom:var(--s2); }
.empty-state p     { font-size:14px; }

/* ---- Section headings ------------------------------------- */
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s5); }
.section-header h3 { font-size:15px; font-weight:700; }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar   {
    position: sticky;
    top: 0;
    z-index: 120;
    height: auto;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--s3);
    gap: var(--s2);
    overflow: visible;
  }
  .sidebar-logo {
    padding: 0;
    border-bottom: none;
    margin-right: auto;
  }
  .sidebar-logo .li-badge { width:34px; height:34px; border-radius:8px; font-size:17px; }
  .sidebar-logo span { display:none; }
  .li-connection { order:3; width:100%; }
  .sidebar-nav {
    order:2;
    width:100%;
    flex-direction:row;
    gap:var(--s2);
    overflow-x:auto;
    padding-bottom:2px;
  }
  .sidebar-divider { display:none; }
  .nav-item {
    width:auto;
    flex:0 0 auto;
    padding:8px var(--s3);
    white-space:nowrap;
  }
  .sidebar > .nav-item[data-view="settings"] { order:2; }
  .sidebar-spacer { display:none; }
  .sidebar-user  { border-top:none; margin:0; padding:0; }
  .user-info { display:none; }
  .top-bar h2    { font-size:15px; }
  .top-bar { flex-wrap:wrap; padding:var(--s3) var(--s4); }
  .top-bar-left, .top-bar-right { width:100%; justify-content:space-between; }
  .analytics-grid { grid-template-columns:1fr 1fr; }
  .chart-row      { grid-template-columns:1fr; }
  .settings-grid  { grid-template-columns:1fr; }
  .form-row-2, .form-row-3 { grid-template-columns:1fr; }
  .pipeline-board { flex-direction:column; }
  .pipeline-col   { width:100%; min-width:unset; max-width:unset; }
  .cal-grid, .cal-dow-row { grid-template-columns:repeat(7,minmax(80px,1fr)); }
  .post-editor-dialog { max-width:100%; width:100vw; border-radius:0; }
}

@media (max-width: 600px) {
  #toastContainer { left:var(--s3); right:var(--s3); bottom:var(--s3); }
  .toast { min-width:0; max-width:none; width:100%; }
  .analytics-grid { grid-template-columns:1fr; }
  .cal-grid, .cal-dow-row { grid-template-columns:1fr; }
  .cal-dow { display:none; }
  .view-content { padding:var(--s4) var(--s3) var(--s8); }
  .top-bar-left { align-items:flex-start; flex-direction:column; gap:var(--s3); }
  .top-bar-right { justify-content:flex-start; overflow-x:auto; padding-bottom:2px; }
  .cal-nav { width:100%; justify-content:space-between; }
  .cal-nav strong { min-width:0; flex:1; }
  .editor-tab-nav { overflow-x:auto; }
  .editor-tab { padding:var(--s4); }
  .post-editor-dialog {
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    margin:0;
  }
  .editor-wrapper { max-height:100dvh; }
  .media-dropzone { padding:var(--s8) var(--s4); }
  .comment-form { flex-direction:column; align-items:stretch; }
  .media-item { align-items:flex-start; }
  .editor-footer  { flex-direction:column; align-items:stretch; }
  .editor-footer-left, .editor-footer-right { justify-content:center; }
  .confirm-actions { flex-direction:column-reverse; }
  .confirm-actions .btn { justify-content:center; }
}