/* Social Media HQ — hq.css — Phase 1 */

/* ══ Reset ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ══ Tokens ══════════════════════════════════════════════════════════════ */
:root {
  --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bg:         #F2F4F7;
  --surface:    #FFFFFF;
  --surface-2:  #F8F9FB;
  --border:     #E3E6EB;
  --border-2:   #CDD1D9;
  --t1:         #181C23;
  --t2:         #525A69;
  --t3:         #97A0B0;
  --accent:     #3D5AFE;
  --accent-h:   #2B46E8;
  --accent-bg:  #EEF1FF;
  --accent-ring: rgba(61,90,254,.18);
  --r:          8px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.09);
  --sidebar-w:  240px;
  --header-h:   56px;

  /* Platform brand colors */
  --ig-c:#C13584; --ig-bg:#FEF0F8; --ig-br:#F5C6E6;
  --tt-c:#111111; --tt-bg:#F4F4F4; --tt-br:#D8D8D8;
  --fb-c:#1877F2; --fb-bg:#EEF4FF; --fb-br:#BDD3FE;
  --tw-c:#111111; --tw-bg:#F4F4F4; --tw-br:#D8D8D8;
  --li-c:#0A66C2; --li-bg:#EEF5FF; --li-br:#BFDBFE;
  --yt-c:#FF0000; --yt-bg:#FFF0F0; --yt-br:#FECACA;
  --gb-c:#4285F4; --gb-bg:#EEF3FF; --gb-br:#BDD0FE;
  --pi-c:#E60023; --pi-bg:#FFF0F1; --pi-br:#FECACA;

  /* Status palette — muted */
  --s-scheduled-c:#1E40AF; --s-scheduled-bg:#EFF6FF; --s-scheduled-br:#BFDBFE;
  --s-draft-c:    #4A5568; --s-draft-bg:    #F1F4F8; --s-draft-br:    #C9D0DB;
  --s-approved-c: #065F46; --s-approved-bg: #ECFDF5; --s-approved-br: #A7F3D0;
  --s-pending-c:  #7C5500; --s-pending-bg:  #FFFBEB; --s-pending-br:  #FCD34D;
  --s-declined-c: #9B1C1C; --s-declined-bg: #FFF5F5; --s-declined-br: #FEB2B2;
  --s-published-c:#15803D; --s-published-bg:#F0FDF4; --s-published-br:#86EFAC;
  --s-failed-c:   #9B1C1C; --s-failed-bg:   #FFF5F5; --s-failed-br:   #FEB2B2;

  /* Content-type palette */
  --ct-promo-c:#9A3412;  --ct-promo-bg:#FFF7ED;  --ct-promo-br:#FDBA74;
  --ct-edu-c:  #1E40AF;  --ct-edu-bg:  #EFF6FF;  --ct-edu-br:  #BFDBFE;
  --ct-bts-c:  #6B21A8;  --ct-bts-bg:  #FAF5FF;  --ct-bts-br:  #D8B4FE;
  --ct-seas-c: #065F46;  --ct-seas-bg: #F0FDFA;  --ct-seas-br: #A7F3D0;
  --ct-test-c: #15803D;  --ct-test-bg: #F0FDF4;  --ct-test-br: #86EFAC;
  --ct-eng-c:  #9F1239;  --ct-eng-bg:  #FFF0F3;  --ct-eng-br:  #FECDD3;
  --ct-prod-c: #3730A3;  --ct-prod-bg: #EEF2FF;  --ct-prod-br: #C7D2FE;
  --ct-comm-c: #3F6212;  --ct-comm-bg: #F7FEE7;  --ct-comm-br: #BEF264;
  --ct-ann-c:  #7C5500;  --ct-ann-bg:  #FEF9EC;  --ct-ann-br:  #FCD34D;
}

/* ══ Base ════════════════════════════════════════════════════════════════ */
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--t1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ══ Login ═══════════════════════════════════════════════════════════════ */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(160deg, #0D1B3E 0%, #1A2E6B 60%, #2B4199 100%);
}
.login-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.login-logo-mark {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.login-logo-text { font-size: 20px; font-weight: 700; color: var(--t1); letter-spacing: -.4px; }
.login-logo-text span { color: var(--accent); }
.login-tagline { font-size: 13px; color: var(--t2); margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--t2);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--t1);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--t3); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF5F5;
  border: 1px solid #FEB2B2;
  color: #9B1C1C;
  padding: 10px 12px;
  border-radius: var(--r);
  font-size: 13px;
  margin-top: 12px;
}

/* ══ Buttons ═════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn .ti { font-size: 15px; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-ghost { background: transparent; color: var(--t2); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: var(--bg); border-color: var(--border-2); color: var(--t1); }
.btn-danger { background: transparent; color: var(--s-declined-c); border: 1.5px solid var(--s-declined-br); }
.btn-danger:hover { background: var(--s-declined-bg); }
.btn-full { width: 100%; justify-content: center; padding: 11px 16px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-sm .ti { font-size: 13px; }
.btn-xs { padding: 4px 10px; font-size: 11px; font-weight: 600; }

/* ══ App shell ═══════════════════════════════════════════════════════════ */
#app { display: none; height: 100vh; flex-direction: column; overflow: hidden; }
#app.visible { display: flex; }

/* ══ Header ══════════════════════════════════════════════════════════════ */
#hdr {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 0;
  flex-shrink: 0;
  z-index: 30;
  position: relative;
}
.hdr-l { display: flex; align-items: center; gap: 0; }
.hamburger {
  width: var(--header-h);
  height: var(--header-h);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  font-size: 20px;
  flex-shrink: 0;
}
.hamburger:hover { color: var(--t1); background: var(--bg); }

/* Account switcher */
.acct-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 16px;
  cursor: pointer;
  border-radius: var(--r);
  user-select: none;
  position: relative;
}
.acct-switcher:hover { background: var(--bg); }
.acct-ic {
  width: 26px; height: 26px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.acct-name { font-size: 14px; font-weight: 600; color: var(--t1); }
.acct-caret { font-size: 14px; color: var(--t3); transition: transform .15s; }
.acct-switcher.open .acct-caret { transform: rotate(180deg); }
.acct-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  z-index: 50;
  display: none;
  padding: 4px 0;
}
.acct-switcher.open .acct-drop { display: block; }
.acct-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--t2);
  cursor: pointer;
}
.acct-drop-item:hover { background: var(--bg); color: var(--t1); }
.acct-drop-item.active { color: var(--accent); font-weight: 600; }
.acct-drop-item .ti { font-size: 15px; }
.acct-drop-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Header right */
.hdr-r { display: flex; align-items: center; gap: 8px; }
.hdr-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--t2);
  font-size: 18px;
}
.hdr-btn:hover { background: var(--bg); color: var(--t1); }
.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: #EF4444;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}

/* ══ Layout ══════════════════════════════════════════════════════════════ */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ══ Sidebar ═════════════════════════════════════════════════════════════ */
.sb-overlay {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,.35);
  z-index: 20;
}
#sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 25;
}
.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sb-logo-mark {
  width: 30px; height: 30px;
  background: var(--accent);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.sb-logo-text { font-size: 13px; color: var(--t2); line-height: 1.3; }
.sb-logo-text b { color: var(--t1); }
#sidebar nav { padding: 0 8px 16px; }
.nav-grp {
  padding: 12px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--t3);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  border-radius: var(--r);
  border-left: 2px solid transparent;
  transition: all .12s;
  margin-bottom: 1px;
  position: relative;
}
.nav-item:hover { background: var(--bg); color: var(--t1); }
.nav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}
.nav-item .ti { font-size: 17px; flex-shrink: 0; opacity: .7; }
.nav-item.active .ti { opacity: 1; }
.nav-item span.nb {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  display: none;
}
.nav-item span.nb.visible { display: inline-flex; }
.nb-amber { background: var(--s-pending-bg); color: var(--s-pending-c); border: 1px solid var(--s-pending-br); }
.nb-blue  { background: var(--accent-bg);     color: var(--accent);       border: 1px solid #c7d2fc; }
.nb-new   { background: var(--s-approved-bg); color: var(--s-approved-c); border: 1px solid var(--s-approved-br); }

/* ══ Main content ════════════════════════════════════════════════════════ */
#main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* ══ Page header ═════════════════════════════════════════════════════════ */
.pg-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}
.pg-title { font-size: 18px; font-weight: 700; color: var(--t1); letter-spacing: -.3px; }
.pg-sub { font-size: 13px; color: var(--t3); }

/* ══ Platform badges ═════════════════════════════════════════════════════ */
.plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}
.plat-badge .ti { font-size: 12px; }
.plat-instagram { color:var(--ig-c); background:var(--ig-bg); border-color:var(--ig-br); }
.plat-tiktok    { color:var(--tt-c); background:var(--tt-bg); border-color:var(--tt-br); }
.plat-facebook  { color:var(--fb-c); background:var(--fb-bg); border-color:var(--fb-br); }
.plat-twitter   { color:var(--tw-c); background:var(--tw-bg); border-color:var(--tw-br); }
.plat-linkedin  { color:var(--li-c); background:var(--li-bg); border-color:var(--li-br); }
.plat-youtube   { color:var(--yt-c); background:var(--yt-bg); border-color:var(--yt-br); }
.plat-gbp       { color:var(--gb-c); background:var(--gb-bg); border-color:var(--gb-br); }
.plat-pinterest { color:var(--pi-c); background:var(--pi-bg); border-color:var(--pi-br); }

/* ══ Status badges ═══════════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}
.status-badge .ti { font-size: 11px; }
.s-scheduled  { color:var(--s-scheduled-c);  background:var(--s-scheduled-bg);  border-color:var(--s-scheduled-br); }
.s-draft      { color:var(--s-draft-c);      background:var(--s-draft-bg);      border-color:var(--s-draft-br); }
.s-approved   { color:var(--s-approved-c);   background:var(--s-approved-bg);   border-color:var(--s-approved-br); }
.s-pending, .s-pending_approval { color:var(--s-pending-c); background:var(--s-pending-bg); border-color:var(--s-pending-br); }
.s-declined, .s-rejected { color:var(--s-declined-c); background:var(--s-declined-bg); border-color:var(--s-declined-br); }
.s-published  { color:var(--s-published-c);  background:var(--s-published-bg);  border-color:var(--s-published-br); }
.s-failed     { color:var(--s-failed-c);     background:var(--s-failed-bg);     border-color:var(--s-failed-br); }

/* ══ Content type badges ═════════════════════════════════════════════════ */
.ct-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid;
  letter-spacing: .02em;
}
.ct-Promotional               { color:var(--ct-promo-c); background:var(--ct-promo-bg); border-color:var(--ct-promo-br); }
.ct-Educational               { color:var(--ct-edu-c);   background:var(--ct-edu-bg);   border-color:var(--ct-edu-br); }
.ct-Behind-the-Scenes,
.ct-Behind\ the\ Scenes      { color:var(--ct-bts-c);   background:var(--ct-bts-bg);   border-color:var(--ct-bts-br); }
.ct-Seasonal                  { color:var(--ct-seas-c);  background:var(--ct-seas-bg);  border-color:var(--ct-seas-br); }
.ct-Testimonial               { color:var(--ct-test-c);  background:var(--ct-test-bg);  border-color:var(--ct-test-br); }
.ct-Engagement                { color:var(--ct-eng-c);   background:var(--ct-eng-bg);   border-color:var(--ct-eng-br); }
.ct-Product-Spotlight,
.ct-Product\/Service\ Spotlight { color:var(--ct-prod-c); background:var(--ct-prod-bg); border-color:var(--ct-prod-br); }
.ct-Community                 { color:var(--ct-comm-c);  background:var(--ct-comm-bg);  border-color:var(--ct-comm-br); }
.ct-Announcement              { color:var(--ct-ann-c);   background:var(--ct-ann-bg);   border-color:var(--ct-ann-br); }

/* ══ Dashboard cards ═════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.card-grid { display: grid; gap: 16px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); margin-bottom: 6px; }
.card-value { font-size: 28px; font-weight: 700; color: var(--t1); letter-spacing: -.5px; line-height: 1; }
.card-delta { font-size: 12px; font-weight: 600; margin-top: 4px; }
.delta-up   { color: var(--s-approved-c); }
.delta-down { color: var(--s-declined-c); }

/* ══ Placeholder / coming-soon views ═════════════════════════════════════ */
.view-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}
.placeholder-icon {
  width: 60px; height: 60px;
  background: var(--accent-bg);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 28px;
}
.view-placeholder h2 { font-size: 18px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.view-placeholder p { font-size: 14px; color: var(--t2); max-width: 420px; line-height: 1.6; margin-bottom: 24px; }
.placeholder-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ══ Approval queue ══════════════════════════════════════════════════════ */
.queue-section { margin-bottom: 32px; }
.section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.section-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.section-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--s-pending-bg);
  color: var(--s-pending-c);
  border: 1px solid var(--s-pending-br);
}
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-card-hdr { display: flex; align-items: center; gap: 8px; }
.post-card-meta { margin-left: auto; font-size: 11px; color: var(--t3); }
.graphic-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: var(--t3);
}
.graphic-placeholder .ti { font-size: 28px; }
.graphic-placeholder span { font-size: 12px; font-weight: 500; }
.graphic-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); display: block; }
.caption-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--t1);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.caption-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.time-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
.time-row .ti { font-size: 15px; color: var(--t3); }
.time-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--t1);
  outline: none;
  transition: border-color .15s;
}
.time-input:focus { border-color: var(--accent); }
.card-actions { display: flex; gap: 8px; }
.card-actions .btn { flex: 1; justify-content: center; }

/* ══ Calendar (existing logic kept) ═════════════════════════════════════ */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cal-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: var(--t1); }
.cal-toggle { display: flex; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.cal-mode-btn { padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--t2); cursor: pointer; transition: all .12s; border: none; }
.cal-mode-btn:hover { background: var(--bg); }
.cal-mode-btn.active { background: var(--accent); color: #fff; }
.week-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.day-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); min-height: 200px; overflow: hidden; box-shadow: var(--shadow-sm); }
.day-col-hdr { padding: 8px; text-align: center; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.day-col-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); }
.day-col-num { font-size: 18px; font-weight: 700; color: var(--t1); }
.day-col-num.today { color: var(--accent); }
.day-col-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-event { padding: 5px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: grab; line-height: 1.3; border-left: 2px solid transparent; }
.cal-event.approved  { background:var(--s-scheduled-bg); color:var(--s-scheduled-c); border-left:2px solid var(--accent); }
.cal-event.published { background:var(--s-published-bg);  color:var(--s-published-c);  border-left:2px solid #10B981; }
.cal-event.pending   { background:var(--s-pending-bg);    color:var(--s-pending-c);    border-left:2px solid #F59E0B; }
.month-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.month-hdr { text-align: center; padding: 6px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); }
.month-day { background: var(--surface); border: 1px solid var(--border); min-height: 90px; padding: 6px; border-radius: 4px; }
.month-day.other-month { background: var(--bg); }
.month-day-num { font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 4px; }
.month-day-num.today { color: var(--accent); font-weight: 700; }
.month-day.other-month .month-day-num { color: var(--t3); }
.month-event { padding: 2px 5px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-event.approved  { background:var(--s-scheduled-bg); color:var(--s-scheduled-c); }
.month-event.published { background:var(--s-published-bg);  color:var(--s-published-c); }
.month-event.pending   { background:var(--s-pending-bg);    color:var(--s-pending-c); }

/* ══ Settings tab (placeholder) ══════════════════════════════════════════ */
.settings-section-group { margin-bottom: 32px; }
.settings-section-group h2 { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.settings-section-group .desc { font-size: 13px; color: var(--t3); margin-bottom: 16px; }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.connection-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.conn-card-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.conn-plat-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.conn-plat-name { font-weight: 600; font-size: 14px; color: var(--t1); }
.conn-status { font-size: 12px; color: var(--t3); margin-top: 1px; }
.conn-username { font-size: 12px; font-weight: 500; color: var(--t2); margin-bottom: 12px; min-height: 18px; }
.conn-expiry { font-size: 11px; color: var(--t3); margin-bottom: 12px; min-height: 16px; }
.conn-expiry.warn { color: #7C5500; }
.conn-actions { display: flex; gap: 8px; }

/* ══ Empty state ═════════════════════════════════════════════════════════ */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; text-align: center; }
.empty-icon { width: 52px; height: 52px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--t3); font-size: 24px; }
.empty-state h4 { font-size: 15px; font-weight: 600; color: var(--t1); margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: var(--t3); }

/* ══ Form elements ════════════════════════════════════════════════════════ */
.form-row { display: grid; gap: 16px; margin-bottom: 16px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t2); margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--t1);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-field textarea { resize: vertical; min-height: 80px; }

/* ══ Toggle ══════════════════════════════════════════════════════════════ */
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track { position: absolute; inset: 0; background: var(--border-2); border-radius: 100px; transition: background .2s; }
.toggle input:checked ~ .toggle-track { background: var(--accent); }
.toggle-thumb { position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }

/* ══ Modal ════════════════════════════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(2px); }
.modal { background: var(--surface); border-radius: var(--r); padding: 28px; width: 420px; max-width: 92vw; box-shadow: var(--shadow-md); }
.modal h3 { font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.modal p { font-size: 13px; color: var(--t2); margin-bottom: 16px; }
.modal-textarea { width: 100%; border: 1.5px solid var(--border); border-radius: var(--r); padding: 10px 12px; font-size: 13px; min-height: 80px; resize: vertical; outline: none; margin-bottom: 20px; font-family: var(--font); color: var(--t1); transition: border-color .15s; }
.modal-textarea:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ══ Toast ════════════════════════════════════════════════════════════════ */
#toast { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--r); font-size: 13px; font-weight: 500; background: var(--t1); color: #fff; box-shadow: var(--shadow-md); z-index: 200; transform: translateY(72px); opacity: 0; transition: transform .25s, opacity .25s; max-width: 360px; }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { background: #065F46; }
#toast.error   { background: #9B1C1C; }
#toast .ti { font-size: 16px; flex-shrink: 0; }

/* ══ Misc ════════════════════════════════════════════════════════════════ */
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .65s linear infinite; display: inline-block; }
.loading-wrap { display: flex; align-items: center; justify-content: center; padding: 56px; gap: 10px; color: var(--t3); font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.divider { height: 1px; background: var(--border); margin: 24px 0; }
.text-muted { color: var(--t3); }
.fw-600 { font-weight: 600; }

/* ══ Mobile ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sidebar-w: 240px; }
  #main { padding: 20px 16px; }
  .hamburger { display: flex; }
  .sb-logo { display: none; }
  #sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 25;
  }
  #sidebar.open { transform: translateX(0); }
  .sb-overlay.open { display: block; }
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .post-cards { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: repeat(7,1fr); gap: 4px; }
  .form-row-2 { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Phase 2: Advanced API Setup ════════════════════════════════ */
.conn-adv { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.conn-adv summary {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--t3); cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px; list-style: none;
}
.conn-adv summary::-webkit-details-marker { display: none; }
.conn-adv-caret { font-size: 13px; transition: transform .15s; display: inline-block; }
details[open] .conn-adv-caret { transform: rotate(90deg); }
.conn-adv-body { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.conn-adv-body .form-field label { font-size: 10px; }
.conn-adv-body .form-field input { font-size: 12px; padding: 6px 10px; }

/* ══ Phase 2: Business Profile ═══════════════════════════════════ */
.voice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-btn {
  padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--t2); background: var(--surface);
  transition: all .12s; display: inline-flex; align-items: center; gap: 6px;
}
.voice-btn .ti { font-size: 14px; }
.voice-btn:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.voice-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.goals-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--border); color: var(--t2); background: var(--surface);
  cursor: pointer; transition: all .12s; user-select: none;
}
.goal-chip .ti { font-size: 14px; }
.goal-chip:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.goal-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.competitor-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.competitor-input-row .at-prefix { font-size: 14px; font-weight: 500; color: var(--t3); flex-shrink: 0; }
.competitor-input-row input { flex: 1; }
.section-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; padding: 2px 8px; border-radius: 100px;
}
.tag-live  { background: var(--s-approved-bg); color: var(--s-approved-c); border: 1px solid var(--s-approved-br); }
.tag-local { background: var(--accent-bg); color: var(--accent); border: 1px solid #c7d2fc; }

/* ══ Phase 3: Home — metric cards ════════════════════════════════ */
.metric-card { transition: box-shadow .15s, transform .12s; }
.metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ══ Phase 3: Home — briefing card ══════════════════════════════ */
.briefing-hdr {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.briefing-hdr-icon {
  width: 28px; height: 28px; background: var(--accent); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.briefing-hdr-icon .ti { color: #fff; font-size: 14px; }
.briefing-hdr-title { font-size: 14px; font-weight: 700; color: var(--t1); }
.briefing-hdr-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--t3);
}

.briefing-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.briefing-row:last-child { border-bottom: none; padding-bottom: 0; }
.briefing-row-icon {
  width: 32px; height: 32px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--t3); font-size: 16px;
}
.briefing-row-icon.accent { background: var(--accent-bg); color: var(--accent); }
.briefing-row-icon.warn   { background: var(--s-pending-bg); color: var(--s-pending-c); }
.briefing-row-body { flex: 1; min-width: 0; }
.briefing-row-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); margin-bottom: 2px; }
.briefing-row-value { font-size: 13px; font-weight: 500; color: var(--t1); line-height: 1.4; }
.briefing-row-sub   { font-size: 11px; color: var(--t3); margin-top: 2px; }
.briefing-row .btn-xs { flex-shrink: 0; align-self: center; margin-left: 8px; white-space: nowrap; }

/* ══ Phase 3: Home — upcoming grid ══════════════════════════════ */
.upcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.upcoming-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.upcoming-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-2); }
.upcoming-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.upcoming-dt { font-size: 12px; font-weight: 700; color: var(--t1); margin-left: auto; }
.upcoming-tm { font-size: 11px; color: var(--t3); }
.upcoming-caption { font-size: 13px; color: var(--t2); line-height: 1.5; }

@media (max-width: 768px) {
  #main > .card-grid[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
  }
  .upcoming-grid { grid-template-columns: 1fr; }
}

/* ══ Phase 4: Weekly Planner ═════════════════════════════════════ */
.planner-week-label {
  display: flex; align-items: center; padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--t1);
  border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); height: 34px; white-space: nowrap;
}
.planner-stats {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--t2);
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.planner-stats strong { color: var(--t1); }
.ps-approved { color: var(--s-approved-c); display: flex; align-items: center; gap: 4px; }
.ps-pending  { color: var(--s-pending-c);  display: flex; align-items: center; gap: 4px; }
.ps-declined { color: var(--s-declined-c); display: flex; align-items: center; gap: 4px; }
.planner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.planner-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .15s;
}
.planner-card:hover { box-shadow: var(--shadow-md); }
.planner-card.pc-approved { border-top: 3px solid #10B981; }
.planner-card.pc-declined { opacity: .55; }

.pc-day-hdr {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pc-day-name { font-size: 13px; font-weight: 700; color: var(--t1); }
.pc-day-date { font-size: 12px; color: var(--t3); font-weight: 500; }

.pc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pc-graphic {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--surface-2);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: var(--t3);
}
.pc-graphic .ti { font-size: 32px; }
.pc-graphic span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

.pc-title { font-size: 14px; font-weight: 700; color: var(--t1); line-height: 1.4; }

.pc-cap-area { flex: 1; }
.pc-caption {
  font-size: 13px; color: var(--t2); line-height: 1.6;
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-hashtags { font-size: 12px; color: var(--accent); line-height: 1.4; }

.pc-details { display: flex; flex-direction: column; gap: 5px; }
.pc-detail-row { font-size: 12px; color: var(--t2); display: flex; gap: 6px; }
.pc-detail-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--t3); flex-shrink: 0; width: 36px; padding-top: 2px;
}

.pc-actions { display: flex; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.pc-actions .btn-primary { flex: 1; justify-content: center; }

@media (max-width: 768px) { .planner-grid { grid-template-columns: 1fr; } }

/* ── Phase 5: Status filter chips ──────────────────────────────── */
.sf-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 24px 12px;
}
.sf-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--t2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sf-chip:hover { border-color: var(--accent); color: var(--accent); }
.sf-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Phase 5: Balance widget ────────────────────────────────────── */
.balance-widget {
  margin: 0 24px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.bal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.bal-title { font-size: 13px; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 6px; }
.bal-sections { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .bal-sections { grid-template-columns: 1fr; } }
.bal-section { padding: 14px 16px; }
.bal-section + .bal-section { border-left: 1px solid var(--border); }
.bal-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--t3); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.bal-total { font-weight: 700; color: var(--accent); text-transform: none; letter-spacing: 0; }
.bal-bar-row { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 8px; margin-bottom: 8px; }
.bal-bar-label { font-size: 12px; color: var(--t2); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.bal-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s ease; min-width: 0; }
.bal-fill.plat-instagram { background: #E1306C; }
.bal-fill.plat-facebook  { background: #1877F2; }
.bal-fill.plat-tiktok    { background: #555; }
.bal-fill.plat-twitter   { background: #1DA1F2; }
.bal-fill.s-approved     { background: var(--s-approved-c, #10B981); }
.bal-fill.s-published    { background: var(--s-published-c, #3D5AFE); }
.bal-fill.s-pending_approval { background: var(--s-pending-c, #F59E0B); }
.bal-fill.s-draft        { background: #94A3B8; }
.bal-fill.s-rejected     { background: var(--s-rejected-c, #EF4444); }
.bal-fill.s-failed       { background: #EF4444; }
.bal-bar-count { font-size: 11px; font-weight: 600; color: var(--t2); text-align: right; }

/* ── Phase 5: Quick-add panel ───────────────────────────────────── */
.quick-add {
  margin: 0 24px 16px;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: var(--r);
  overflow: hidden;
}
.quick-add-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(61,90,254,.05);
  border-bottom: 1px solid rgba(61,90,254,.15);
}
.quick-add-title { font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.quick-add-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.qa-row { display: flex; gap: 10px; align-items: center; }
.qa-select {
  padding: 7px 10px; font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--t1); outline: none; cursor: pointer;
}
.quick-add-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Phase 5: Day view ──────────────────────────────────────────── */
.day-view { padding: 0 24px 24px; }
.day-view-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 2px solid var(--border); margin-bottom: 16px;
}
.day-view-title { font-size: 15px; font-weight: 600; color: var(--t1); }
.day-view-count { font-size: 12px; color: var(--t3); }
.day-event {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.day-event-time { font-size: 12px; font-weight: 600; color: var(--t3); padding-top: 4px; white-space: nowrap; }
.day-event-body { display: flex; flex-direction: column; gap: 8px; }
.day-event-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-event-cap { font-size: 13px; color: var(--t1); line-height: 1.55; }
.day-event-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty-day {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 24px; color: var(--t3);
}
.empty-day i { font-size: 40px; }
.empty-day p { font-size: 14px; margin: 0; }

/* ── Phase 5: List view ─────────────────────────────────────────── */
.list-view { padding: 0 24px 24px; }
.list-hdr, .list-row {
  display: grid;
  grid-template-columns: 130px 130px 1fr 120px 90px;
  gap: 12px; align-items: center;
}
.list-hdr {
  padding: 8px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--t3);
  border-bottom: 2px solid var(--border); margin-bottom: 4px;
}
.list-row {
  padding: 10px 12px;
  border-radius: var(--r);
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.list-row:hover { background: var(--bg); }
.lv-date { font-size: 12px; font-weight: 500; color: var(--t2); white-space: nowrap; }
.lv-cap  { font-size: 12px; color: var(--t1); }
.lv-actions { display: flex; gap: 4px; }
@media (max-width: 768px) {
  .list-hdr, .list-row { grid-template-columns: 90px 80px 1fr; }
  .list-hdr span:nth-child(4), .list-row .lv-status,
  .list-hdr span:nth-child(5), .list-row .lv-actions { display: none; }
}

/* ── Phase 5: Drag-drop ─────────────────────────────────────────── */
.day-col.drag-over {
  background: rgba(61,90,254,.06);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: var(--r);
}

/* ── Phase 5: Create Post form ──────────────────────────────────── */
.create-form { max-width: 720px; }

/* Platform chips (multi-select) */
.platform-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  border: 2px solid var(--border);
  background: var(--surface); color: var(--t2);
  cursor: pointer; transition: all .15s; user-select: none;
}
.plat-chip:hover { border-color: var(--accent); color: var(--accent); }
.plat-chip.active { border-color: var(--accent); background: rgba(61,90,254,.08); color: var(--accent); }
.plat-chip-check { opacity: 0; font-size: 12px; transition: opacity .15s; }
.plat-chip.active .plat-chip-check { opacity: 1; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--r);
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.upload-zone:hover { border-color: var(--accent); background: rgba(61,90,254,.03); }
.upload-zone.drag-over { border-color: var(--accent); background: rgba(61,90,254,.07); }
.upload-zone i.ti-photo-up { font-size: 32px; color: var(--t3); }
.upload-zone span { font-size: 13px; color: var(--t2); }
.upload-hint { font-size: 11px; color: var(--t3); }
.upload-file-name { font-size: 12px; font-weight: 500; color: var(--t2); margin-top: 6px; }

/* ── Phase 5: calendar event uses status colours ────────────────── */
.cal-event.s-approved          { background: rgba(16,185,129,.15); color: #059669;       border-left: 2px solid #10B981; }
.cal-event.s-published         { background: rgba(61,90,254,.12);  color: var(--accent); border-left: 2px solid var(--accent); }
.cal-event.s-pending_approval  { background: rgba(245,158,11,.15); color: #D97706;       border-left: 2px solid #F59E0B; }
.cal-event.s-rejected          { background: rgba(239,68,68,.12);  color: #DC2626;       border-left: 2px solid #EF4444; }
.cal-event.s-draft             { background: var(--bg);            color: var(--t3);     border-left: 2px solid #CBD5E1; }
.cal-event.s-failed            { background: rgba(239,68,68,.12);  color: #DC2626;       border-left: 2px solid #EF4444; }