@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* 
   DESIGN TOKENS
 */
:root {
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --mono: 'IBM Plex Mono', monospace;
  --sans: 'DM Sans', sans-serif;

  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill: 999px;

  --transition: 180ms ease;
  --transition-fast: 100ms ease;
  --transition-slow: 300ms ease;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lift: 0 2px 8px rgba(0,0,0,0.16), 0 8px 32px rgba(0,0,0,0.12);
  --shadow-modal:0 8px 32px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.24);

  --topbar-h: 56px;
  --tab-h:    44px;
  --strip-h:  44px;

  /*  PCS MODAL LAYOUT CONTRACT  */

  /* Modal geometry */
  --pcs-modal-width: 520px;
  --pcs-content-padding: 24px;
  --pcs-content-width: 472px;

  /* Alignment spines */
  --pcs-left-spine: 24px;
  --pcs-right-spine: 496px;

  /* Grid */
  --pcs-column-width: 220px;
  --pcs-column-gap: 32px;

  /* Vertical rhythm */
  --pcs-space-1: 4px;
  --pcs-space-2: 8px;
  --pcs-space-3: 12px;
  --pcs-space-4: 10px;
  --pcs-space-5: 20px;

  /* Header system */
  --pcs-header-icon-zone: 32px;
  --pcs-header-gap: 24px;
  --pcs-header-padding: 48px;

  /* Icons */
  --pcs-icon-size: 20px;

  /* Pipeline system */
  --pcs-pipeline-dot: 8px;
  --pcs-pipeline-line: 1.5px;
  --pcs-pipeline-label-gap: 12px;
  --pcs-pipeline-offset: calc(
    (var(--pcs-pipeline-dot) - var(--pcs-pipeline-line)) / 2
  );

  /* Buttons */
  --pcs-button-height: 36px;
  --pcs-button-radius: 10px;

  /* Notes */
  --pcs-notes-radius: 12px;
  --pcs-notes-padding: 14px;

  /* Safe area */
  --pcs-safe-bottom: 20px;

  /* Inline separator */
  --pcs-inline-separator-gap: 6px;

  /* Insights layout */
  --pcs-card-padding: 20px;
  --pcs-row-gap: var(--pcs-space-3);
  --pcs-section-gap: var(--pcs-space-5);
  --pcs-bar-height: 6px;

  /* Dashboard layout tokens */
  --pcs-gap-1: 8px;
  --pcs-gap-2: 12px;
  --pcs-gap-3: 16px;
  --pcs-gap-4: 24px;
  --pcs-gap-5: 32px;
  --pcs-radius: 16px;
  --pcs-surface-1: var(--surface);
  --pcs-surface-2: var(--surface2);
  --pcs-surface-3: var(--surface3);
  --pcs-border-soft: rgba(255,255,255,0.06);

  /*  New design system tokens  */
  --bg:       #080808;
  --surface:  #111111;
  --dotline:  rgba(255,255,255,0.10);
  --dotfaint: rgba(255,255,255,0.05);
  --text:     #FFFFFF;
  --text2:    #BBBBBB;
  --muted:    #555555;
  --muted2:   #222222;
  --gold:     #C8A84B;
  --gold-hi:  #E2C06A;
  --gold-bg:  rgba(200,168,75,0.10);
  --red:      #FF4B4B;
  --red-bg:   rgba(255,75,75,0.08);
  --green:    #3ECF8E;
  --green-bg: rgba(62,207,142,0.08);
  --amber:    #F6A623;
  --amber-bg: rgba(246,166,35,0.08);
  --cyan:     #22D3EE;
  --cyan-bg:  rgba(34,211,238,0.08);
  --purple:   #9b87f5;
  --purple-bg:rgba(155,135,245,0.08);

  /* Semantic tokens  dark-only design */
  --text-primary: #FFFFFF;
  --text-secondary: #BBBBBB;
  --text-tertiary: #555555;
  --surface-bg: #080808;

  --surface2:   #1a1a1a;
  --surface3:   #252525;
  --border:     rgba(255,255,255,0.10);
  --border2:    rgba(255,255,255,0.14);
  --accent:     #C8A84B;
  --accent-dim: rgba(200,168,75,0.12);
  --accent-hover: rgba(200,168,75,0.18);
  --accent-glow:  rgba(200,168,75,0.07);
  --c-amber:  #F6A623;  --c-amber-dim:  rgba(246,166,35,0.14);
  --c-blue:   #3b82f6;  --c-blue-dim:   rgba(59,130,246,0.14);
  --c-green:  #3ECF8E;  --c-green-dim:  rgba(62,207,142,0.14);
  --c-cyan:   #06b6d4;  --c-cyan-dim:   rgba(6,182,212,0.14);
  --c-purple: #8b5cf6;  --c-purple-dim: rgba(139,92,246,0.14);
  --c-red:    #FF4B4B;  --c-red-dim:    rgba(255,75,75,0.14);
  --c-pub:    #3ECF8E;  --c-pub-dim:    rgba(62,207,142,0.14);
  --c-muted:  #555555;  --c-muted-dim:  rgba(85,85,85,0.14);

  /* Legacy aliases  semantic tokens */
  --text3:      var(--text-tertiary);
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  transition: var(--transition);
}
button:active { transform: scale(0.97); }

input, select, textarea {
  font-family: var(--font-body);
  font-size: 16px; /* prevent iOS zoom */
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

select { appearance: none; 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='%238892aa' 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; }

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

/* 
   VIEWS  show/hide
 */
#login-overlay,
#approval-view,
#dashboard-view,
#client-view {
  display: none;
}
#login-overlay:not(.hidden) { display: flex; }
#approval-view.active       { display: flex; }
#dashboard-view.active      { display: flex; }
#client-view.active         { display: flex; }

/* 
   LOGIN OVERLAY
 */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login-overlay.hidden { display: none !important; }

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px dotted var(--dotline);
  padding: 32px 28px 28px;
}

.login-top-strip {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--dotline);
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-gold-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

.login-brand {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.login-brand span { color: var(--gold); }

.login-subtitle {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.login-form-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.login-input {
  width: 100%;
  background: var(--bg);
  border: 1px dotted rgba(255,255,255,0.12);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
}
.login-input:focus {
  border-color: rgba(200,168,75,0.4);
}

.login-submit-btn {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 1px dotted rgba(200,168,75,0.4);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.login-submit-btn:hover {
  background: var(--gold-bg);
}

.login-otp-confirm {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dotted var(--dotline);
  flex-direction: row;
  gap: 10px;
}
.login-step.active .login-otp-confirm {
  display: flex;
}
.login-otp-arrow {
  font-family: var(--mono);
  color: var(--gold);
  font-size: 13px;
  line-height: 1.4;
}
.login-otp-info { flex: 1; }
.login-otp-line1 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.login-otp-line1 span { color: var(--gold); }
.login-otp-line2 {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.login-back-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.login-back-btn:hover { color: var(--text); }

.login-bottom-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dotted var(--dotline);
}
.login-bottom-dots {
  display: flex;
  gap: 5px;
}
.login-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted2);
}
.login-dot--gold {
  background: var(--gold);
  opacity: 0.5;
}
.login-bottom-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--muted2);
  text-transform: uppercase;
}

.login-step { display: none; }
.login-step.active { display: block; }
#login-role-step { display: block; }

.role-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 72px;
  transition: var(--transition);
}
.role-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.role-btn:active { transform: scale(0.97); }

/* PIN step */
.pin-dot.error  { background: var(--c-red); border-color: var(--c-red); animation: shake 0.3s ease; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-4px); }
  40%,80%  { transform: translateX(4px); }
}

.pin-key.del    { font-size: 14px; color: var(--text2); }

.login-error {
  text-align: center;
  font-size: 13px;
  color: var(--c-red);
  min-height: 20px;
  margin-top: var(--sp-3);
}

/* 
   TOPBAR
 */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.topbar-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  white-space: nowrap;
}
.topbar-brand span { color: var(--accent); }

#topbar-role-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: 4px;
}

.topbar-spacer { flex: 1; }

/* Action button */
.btn-primary-action {
  height: 34px;
  padding: 0 var(--sp-4);
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-primary-action:hover { opacity: 0.88; }
.btn-primary-action:active { transform: scale(0.96); }

/* Icon buttons */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  flex-shrink: 0;
  position: relative;
  font-size: 15px;
}
.icon-btn:hover { background: var(--surface2); color: var(--text); }
.icon-btn:active { transform: scale(0.93); }

/* Notification bell */
.notif-panel.open { display: flex; }

.notif-list {
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
}

.notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast), transform 0.1s ease;
  cursor: pointer;
  opacity: 0.7;
}
.notif-item:hover { background: var(--surface2); opacity: 1; }
.notif-item:active { transform: scale(0.98); }
.notif-item.unread {
  background: var(--accent-dim);
  opacity: 1;
}
.notif-item.unread .notif-primary { font-weight: 700; }
.notif-item.unread:hover { background: var(--accent-hover); }

/* Flash highlight when post opens from notification */
@keyframes flashBg {
  0%   { box-shadow: inset 0 0 0 2px rgba(50,215,75,0.5); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
.notif-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text3);
  font-size: 13px;
}

/* User menu */
.user-menu-wrap { position: relative; }
.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  z-index: 200;
  overflow: hidden;
  padding: var(--sp-1) 0;
}
.user-menu.open { display: block; }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast);
}
.user-menu-item:hover { background: var(--surface2); }
.user-menu-item.danger { color: var(--c-red); }

/* 
   GLOBAL ADMIN MENU (fixed, all views)
 */
/* User-menu inline role-switch (replaces floating GAM) */
.um-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  padding: 8px 14px 4px;
}
.um-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 12px 8px;
}
.um-role-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.um-role-btn:hover { background: var(--surface2); }
.um-role-btn.active {
  background: var(--c-blue);
  color: #fff;
  border-color: var(--c-blue);
}
.um-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-1) 0;
}

/* 
   PIPELINE STRIP
 */
.pipeline-strip-wrap {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.pipeline-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  gap: var(--sp-2);
  min-height: var(--strip-h);
  overflow: hidden;
}

/*  Mobile typography  */
@media (max-width: 539px) {
  .hero-title { font-size: 22px !important; }
  .hero-comments, .hero-design-link, .hero-meta .tag { font-size: 15px !important; }
  .ps-stage { padding: 4px 10px; min-height: 32px; font-size: 12px; }
}

.ps-stage {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  min-height: 36px;
  background: var(--surface2);
  border: 1px solid var(--border1);
}
.ps-stage:hover { background: var(--surface3); }
.ps-stage:active { transform: scale(0.97); }
.ps-stage.active { border-color: var(--accent); background: var(--accent-dim,rgba(232,195,122,0.12)); }

.ps-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ps-label { font-size: 12px; color: var(--text2); font-weight: 600; }
.ps-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  min-width: 16px;
  text-align: center;
}
.ps-count.warn { background: var(--c-red-dim); color: var(--c-red); }
.ps-count.warn { color: var(--c-red); }
.ps-count.ok   { color: var(--c-green); }

/* 
   TABS
 */
.tabs {
  display: flex;
  align-items: center;
  height: var(--tab-h);
  padding: 0 var(--sp-4);
  gap: 0;
  min-width: max-content;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 var(--sp-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
  position: relative;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--c-red);
  color: white;
  border-radius: var(--r-pill);
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
}

/* tab-panel display rules moved to dashboard layout section */

/* 
   DASHBOARD VIEW LAYOUT
 */
#dashboard-view {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
}

/* Tab panels fill remaining height and scroll internally */
.tab-panel { display: none; }
.tab-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.dash-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 140px;
  min-height: 0;
  position: relative;
}




/* 
   DASHBOARD  CALM VERTICAL FLOW
 */

/*  Top Task (legacy compat)  */
/* 
   DASHBOARD  New Design System
 */
.pcs-dash-surface { padding: 0; }

/* Status badge */
@keyframes criticalPulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(255,75,75,0.4);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 14px rgba(255,75,75,0.8);
  }
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Big numbers */
/* Dot bar */

/* Person section body */
/* Section action button */
/* Client grid */
/* Do this now section */

/* 
   HERO CARD  Zone 1 (legacy, hidden sections)
 */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--sp-3);
}

.hero-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin-bottom: var(--sp-3);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  align-items: center;
}

.hero-comments {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface2);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
  margin-bottom: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-comments.expanded { -webkit-line-clamp: unset; }

.hero-read-more {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: var(--sp-4);
  padding: 0;
  font-weight: 500;
}

.hero-design-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--sp-4);
  width: fit-content;
}
.hero-design-link:hover { background: var(--accent-hover); text-decoration: none; }

.hero-no-design {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-amber-dim);
  border-radius: var(--r-sm);
  color: var(--c-amber);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--sp-4);
}

.hero-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

.btn-hero-primary {
  flex: 1;
  min-width: 140px;
  height: 48px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.btn-hero-primary:hover { opacity: 0.88; }
.btn-hero-primary:active { transform: scale(0.97); }
.btn-hero-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-hero-ghost {
  height: 48px;
  padding: 0 var(--sp-4);
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-hero-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-hero-more {
  width: 48px;
  height: 48px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 20px;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-hero-more:hover { background: var(--surface3); color: var(--text); }

/* 
   COMPACT METER
 */
.meter-section { margin-bottom: var(--sp-4); }

.compact-meter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.compact-meter-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.compact-meter-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
}
.compact-meter-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}
.compact-meter-gap {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}
.compact-meter-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.compact-meter-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.6s ease;
}
.compact-meter-fill.ok   { background: var(--c-green); }
.compact-meter-fill.warn { background: var(--c-red); }

/* 
   BUCKET GRID  Zone 2
 */

/* Stale badges */
.stale-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.stale-badge.amber { background: var(--c-amber-dim); color: var(--c-amber); }
.stale-badge.red   { background: var(--c-red-dim);   color: var(--c-red); }

/*  Activity Timeline Modal  */
#timeline-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.55); align-items: flex-end; justify-content: center;
}
#timeline-overlay.open { display: flex; }
#timeline-panel {
  background: var(--surface1); border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%; max-width: 600px; max-height: 78vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.timeline-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
}
.timeline-title { font-size: 15px; font-weight: 700; color: var(--text1); flex: 1; padding-right: var(--sp-3); }
.timeline-close {
  background: none; border: none; color: var(--text3);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.timeline-body { overflow-y: auto; padding: var(--sp-4) var(--sp-5); flex: 1; }
.timeline-empty { text-align: center; color: var(--text3); font-size: 14px; padding: var(--sp-6) 0; }
/*  Approval design preview  */
/*  Schedule date grouping  */
.schedule-date-header.soon { color: var(--c-amber); }
/*  Admin Quick-Edit bottom sheet  */
#admin-edit-overlay {
  display: none; position: fixed; inset: 0; z-index: 8500;
  background: rgba(0,0,0,0.55); align-items: flex-end; justify-content: center;
}
#admin-edit-overlay.open { display: flex; }
#admin-edit-sheet {
  background: var(--surface1); border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-5);
}
.admin-edit-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--text1); margin-bottom: var(--sp-4);
}
.admin-edit-id { font-size: 11px; color: var(--text3); margin-top: -12px; margin-bottom: var(--sp-4); }
/*  Admin Insight Panels  */
.insight-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.insight-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.insight-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--sp-3);
}
.insight-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.insight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.insight-row-label { color: var(--text2); }
.insight-row-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text1); }
.insight-row-val.warn  { color: var(--c-amber); }
.insight-row-val.ok    { color: var(--c-green); }
.insight-flag {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--text2); padding: var(--sp-1) 0;
}
.insight-flag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.insight-flag-dot.amber { background: var(--c-amber); }
.insight-flag-dot.red   { background: var(--c-red); }
.insight-parked-link {
  font-size: 11px; color: var(--accent); cursor: pointer;
  text-decoration: underline; margin-left: auto; flex-shrink: 0;
}
/*  Task Banner (Creative / Servicing)  */
.task-banner {
  background: var(--accent-dim, rgba(232,195,122,0.12));
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.task-banner-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2);
}
.task-banner-item {
  position: relative; z-index: 5; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 12px 0;
  min-height: 48px;
  border-bottom: 1px solid rgba(232,195,122,0.15);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.task-banner-item * { pointer-events: auto; }
.task-banner-item:last-child { border-bottom: none; }
.task-banner-msg { font-size: 14px; color: var(--text1); line-height: 1.5; flex: 1; }
.task-banner-due { font-size: 11px; color: var(--text3); margin-top: 2px; }
.task-check {
  width: 20px; height: 20px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--accent);
  pointer-events: auto; position: relative; z-index: 10;
}
.btn-task-done {
  background: none; border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  padding: 3px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  min-height: 28px;
}
.btn-task-done:hover { background: var(--accent); color: var(--surface); }
.btn-task-done:disabled { opacity: 0.4; pointer-events: none; }
.btn-task-done:active { transform: scale(0.9); }
.task-done { animation: taskComplete 0.25s ease; }
.task-done .task-banner-msg { text-decoration: line-through; opacity: 0.5; }
.task-done .btn-task-done { opacity: 0.3; pointer-events: none; }
.task-done .task-check { opacity: 0.3; pointer-events: none; }

@keyframes taskComplete {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* -- Task Detail Modal -- */
.task-detail-card { max-width: 440px; }
.task-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.task-detail-title { font-size: 16px; font-weight: 700; color: var(--text1); }
.task-detail-body { margin-bottom: var(--sp-4); }
.task-detail-msg { font-size: 15px; color: var(--text1); line-height: 1.6; margin-bottom: var(--sp-3); }
.task-detail-meta { font-size: 13px; color: var(--text3); margin-bottom: var(--sp-1); }
.task-detail-actions { display: flex; justify-content: flex-end; }

.score-flash { animation: scorePulse 0.3s ease; }
@keyframes scorePulse {
  0%   { background: rgba(50, 215, 75, 0.15); }
  100% { background: transparent; }
}

/*  Admin Task Panel  */
.admin-task-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.admin-task-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.admin-task-row { display: flex; gap: var(--sp-2); }
@media (max-width: 539px) { .admin-task-row { flex-direction: column; } }
.admin-task-list { display: flex; flex-direction: column; gap: 0; }
.admin-task-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.admin-task-item:last-child { border-bottom: none; }
.admin-task-item-body { flex: 1; min-width: 0; }
.admin-task-item-msg { font-size: 13px; color: var(--text1); line-height: 1.5; }
.admin-task-item-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.admin-task-item-done { text-decoration: line-through; opacity: 0.5; }
.btn-task-delete {
  background: none; border: none; color: var(--text3); font-size: 14px;
  cursor: pointer; padding: 2px 6px; flex-shrink: 0;
}
.btn-task-delete:hover { color: var(--c-red); }
.admin-task-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text3);
  margin: var(--sp-3) 0 var(--sp-2);
}

.parked-overlay {
  display: none; position: fixed; inset: 0; z-index: 9300;
  background: rgba(0,0,0,0.6); align-items: flex-end; justify-content: center;
}
.parked-overlay.open { display: flex; }
.parked-sheet {
  background: var(--surface1); border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%; max-width: 520px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.parked-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border1); flex-shrink: 0;
}
.parked-sheet-title { font-weight: 700; font-size: 16px; color: var(--text1); }
.parked-sheet-close { background: none; border: none; color: var(--text3); font-size: 20px; cursor: pointer; }
.parked-sheet-list { overflow-y: auto; padding: var(--sp-3) var(--sp-5) var(--sp-5); }

#zen-overlay {
  display: none; position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
  padding: var(--sp-5);
}
#zen-overlay.open { display: flex; }
#zen-card {
  background: var(--surface1); border-radius: var(--r-xl);
  width: 100%; max-width: 560px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.zen-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
}
.zen-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text1); }
.zen-close { background: none; border: none; color: var(--text3); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.zen-body { overflow-y: auto; padding: var(--sp-6); flex: 1; }
.zen-brief { font-size: 17px; line-height: 1.75; color: var(--text1); white-space: pre-wrap; }
.btn-zen {
  background: none; border: none; color: var(--accent); font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 2px 0; margin-top: var(--sp-1);
  display: block;
}

/*  Snooze UI  */
#snooze-overlay {
  display: none; position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,0.55); align-items: flex-end; justify-content: center;
}
#snooze-overlay.open { display: flex; }
#snooze-panel {
  background: var(--surface1); border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%; max-width: 480px; padding: var(--sp-5);
}
.snooze-title { font-size: 16px; font-weight: 700; color: var(--text1); margin-bottom: var(--sp-4); }
.snooze-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.snooze-opt {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--surface2); border: 1px solid var(--border1);
  color: var(--text1); font-size: 15px; font-weight: 500;
  cursor: pointer; text-align: left; min-height: 48px;
}
.snooze-opt:hover { background: var(--surface3); }
.snooze-cancel { width: 100%; padding: var(--sp-3); background: none; border: none; color: var(--text3); font-size: 14px; cursor: pointer; }
/*  Payload buttons (Ready to Send)  */
/*  Flag Issue button  */
.btn-flag {
  background: none; border: 1px solid var(--c-amber); color: var(--c-amber);
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  padding: 6px 12px; cursor: pointer; min-height: 36px; white-space: nowrap;
}
.btn-flag:hover { background: var(--c-amber-dim); }

/* Nudge client button */
/* 
   TAGS / CHIPS
 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-stage { }
.tag-pillar { background: var(--surface2); color: var(--text2); }
.tag-owner  { background: var(--surface2); color: var(--text2); }
.tag-date   { font-family: var(--font-mono); background: var(--surface2); color: var(--text2); }
.tag-date.overdue { background: var(--c-red-dim); color: var(--c-red); }
.tag-date.today   { background: var(--c-amber-dim); color: var(--c-amber); }
.tag-date.soon    { background: var(--c-green-dim); color: var(--c-green); }

/* 
   UPCOMING TABLE
 */
.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  padding: var(--sp-2) var(--sp-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }
.mono { font-family: var(--font-mono); font-size: 12px; }
/* 
   CLIENT VIEW
 */
#client-view {
  flex-direction: column;
  min-height: 100vh;
}

.client-body {
  flex: 1;
  padding: var(--sp-4);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Client section cards */
.client-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.client-section-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.client-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}
.client-section-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
}
.client-count-badge {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-family: var(--font-mono);
}

.client-items { padding: var(--sp-2); }

/* Input pending item */
.client-input-item {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-2);
  background: var(--surface2);
}
.client-input-item:last-child { margin-bottom: 0; }

.client-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.client-item-need {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.client-item-waiting {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  margin-bottom: var(--sp-3);
}
.client-item-waiting.amber { color: var(--c-amber); }
.client-item-waiting.red   { color: var(--c-red); }

.client-item-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.btn-client-upload {
  flex: 1;
  min-width: 120px;
  height: 40px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: var(--transition);
  cursor: pointer;
}
.btn-client-upload:hover { opacity: 0.88; }

.btn-client-ack {
  height: 40px;
  padding: 0 var(--sp-4);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text2);
  transition: var(--transition);
}
.btn-client-ack:hover { border-color: var(--text2); color: var(--text); }

/* Approval item */
.client-approval-item {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-2);
  background: var(--surface2);
}
.client-approval-item:last-child { margin-bottom: 0; }

.approval-item-preview {
  width: 100%;
  height: 120px;
  background: var(--surface3);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 13px;
  overflow: hidden;
  object-fit: cover;
}
.approval-item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.approval-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.btn-approve-green {
  height: 44px;
  background: var(--c-green);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: var(--transition);
}
.btn-approve-green:hover { opacity: 0.88; }
.btn-approve-green:active { transform: scale(0.97); }

.btn-revise-outline {
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--border2);
  color: var(--text2);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: var(--transition);
}
.btn-revise-outline:hover { border-color: var(--c-red); color: var(--c-red); }

.change-input-wrap {
  display: none;
  margin-top: var(--sp-2);
}
.change-input-wrap.active, .change-input-wrap.open { display: block; }

.change-textarea {
  resize: vertical;
  min-height: 80px;
  font-size: 15px;
}
.btn-send-changes {
  width: 100%;
  height: 40px;
  background: var(--c-red);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: var(--transition);
}
.btn-send-changes:hover { opacity: 0.88; }

.approval-confirmed {
  display: none;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-green-dim);
  border: 1px solid var(--c-green);
  border-radius: var(--r-sm);
  color: var(--c-green);
  font-size: 13px;
  font-weight: 600;
  margin-top: var(--sp-2);
  align-items: center;
  gap: var(--sp-2);
}
.approval-confirmed.show { display: flex; }

.btn-whatsapp {
  width: 100%;
  height: 40px;
  background: #25D366;
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  transition: var(--transition);
}
.btn-whatsapp:hover { opacity: 0.88; }

/* New request form */
.client-request-form {
  padding: var(--sp-4) var(--sp-5);
}
.form-field {
  margin-bottom: var(--sp-4);
}
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: var(--sp-2);
}
.form-label span { color: var(--c-red); }

.btn-submit-full {
  width: 100%;
  height: 52px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: var(--transition);
  margin-top: var(--sp-5);
}
.btn-submit-full:hover { opacity: 0.88; }
.btn-submit-full:active { transform: scale(0.98); }
.btn-submit-full:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 
   PUBLIC APPROVAL VIEW
 */
#approval-view {
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--bg);
}

.apv-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-modal);
}
.apv-brand {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text3);
  margin-bottom: var(--sp-5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.apv-brand span { color: var(--accent); }

.apv-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.3px;
}
.apv-meta {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
  margin-bottom: var(--sp-5);
}
.apv-preview {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  padding: var(--sp-4);
  background: var(--surface2);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  white-space: pre-wrap;
}
.approval-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  transition: opacity 0.3s;
}
.btn-approve {
  height: 52px;
  background: var(--c-green);
  color: #fff;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  transition: var(--transition);
}
.btn-approve:hover { opacity: 0.88; }
.btn-revise {
  height: 52px;
  background: transparent;
  border: 2px solid var(--border2);
  color: var(--text2);
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  transition: var(--transition);
}
.btn-revise:hover { border-color: var(--c-red); color: var(--c-red); }
.approval-msg {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--sp-4);
  display: none;
}
.approval-msg:not(:empty) { display: block; }
.approval-msg.success { background: var(--c-green-dim); color: var(--c-green); border: 1px solid var(--c-green); }
.approval-msg.changes { background: var(--c-amber-dim); color: var(--c-amber); border: 1px solid var(--c-amber); }

/* 
   MODALS
 */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal-overlay.open { display: flex; }

@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: var(--sp-5); }
}

.modal-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-5);
  box-shadow: var(--shadow-modal);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 640px) {
  .modal-card { border-radius: var(--r-xl); }
}

/* Fix 7: All form inputs full width on mobile */
@media (max-width: 539px) {
  .form-row { grid-template-columns: 1fr !important; }
}

.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto var(--sp-4);
}
@media (min-width: 640px) { .modal-handle { display: none; } }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  gap: var(--sp-3);
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--surface3); color: var(--text); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 539px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-field { margin-bottom: var(--sp-4); }
.form-label-sm {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--sp-2);
}

.modal-footer {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
  z-index: 1;
}
.btn-modal-primary {
  flex: 1;
  height: 48px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: var(--transition);
}
.btn-modal-primary:hover { opacity: 0.88; }
.btn-modal-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

#login-email-step .btn-modal-primary {
  background: transparent;
  border: 1px dotted rgba(200,168,75,0.4);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 16px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 0;
}

#login-email-step .btn-modal-primary:hover {
  background: rgba(200,168,75,0.08);
}

.btn-modal-ghost {
  height: 48px;
  padding: 0 var(--sp-5);
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}
.btn-modal-ghost:hover { border-color: var(--text2); color: var(--text); }

.saving-msg.active { display: block; }

.draft-status {
  font-size: 11px;
  color: var(--text3);
  margin-top: var(--sp-2);
  opacity: 0;
  transition: opacity 0.3s;
  font-family: var(--font-mono);
}

/* 
   POST DETAIL MODAL
 */
/* 
   ERROR BANNER
 */
#error-banner {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-amber-dim);
  border-bottom: 1px solid var(--c-amber);
  font-size: 12px;
  color: var(--c-amber);
  flex-shrink: 0;
}
#error-banner-stale { color: var(--text3); margin-left: auto; font-family: var(--font-mono); font-size: 11px; }

/* 
   TOAST
 */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 9999;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#toast.success { background: var(--c-green); color: #fff; }
#toast.error   { background: var(--c-red); color: #fff; }
#toast.info    { background: var(--surface3); color: var(--text); border: 1px solid var(--border2); }

/* Undo toast */
#undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px 10px 18px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow-lift);
}
#undo-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#undo-toast-msg { color: var(--text2); }
.btn-undo {
  padding: 4px 12px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  transition: var(--transition-fast);
}
.btn-undo:hover { opacity: 0.88; }

/* 
   SKELETON LOADING
 */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton-card {
  height: 100px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}

/* 
   EMPTY STATES
 */
.empty-state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--text3);
}
.empty-icon {
  font-size: 32px;
  margin-bottom: var(--sp-3);
  opacity: 0.5;
}
.empty-state p { font-size: 13px; line-height: 1.5; }
.empty-state strong { color: var(--text2); }

/* 
   SECTION HEADERS
 */
.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
/* 
   SEARCH / FILTER (Library)
 */

/*  Library panel layout  */
#panel-library {
  overflow: hidden; /* keep tab-panel clipping, content area scrolls internally */
}

/*  Unified Search + Filter Block  */
.search-block { border-bottom: 1px dotted var(--dotline); background: var(--bg); position: relative; }
.search-row { display: flex; align-items: center; border-bottom: 1px dotted var(--dotline); }
.search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--muted); cursor: text; }
.search-input-real { background: none; border: none; outline: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text); flex: 1; min-width: 0; }
.search-input-real::placeholder { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.search-divider { width: 1px; height: 36px; background: var(--dotline); flex-shrink: 0; }
.view-toggle { display: flex; flex-shrink: 0; }
.vt-btn { padding: 12px 16px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: pointer; background: transparent; border: none; border-left: 1px dotted var(--dotline); transition: all 0.15s; }
.vt-btn.active { color: var(--text); background: var(--surface); }
.filter-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.filter-chip {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase; cursor: pointer;
  border: none; border-right: 1px dotted var(--dotline); transition: all 0.15s;
  white-space: nowrap; background: transparent; min-width: 0; width: 100%;
  box-sizing: border-box; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; padding-right: 18px;
  text-overflow: ellipsis; overflow: hidden;
}
.filter-chip:last-child { border-right: none; }
.filter-chip:focus { outline: none; }
.filter-chip.chip-active { color: var(--gold); background: rgba(200,168,75,0.10); }

/* Library content scroll area */
#library-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 140px;
  position: relative;
  min-height: 0;
}

/*  Library List: time-based groups  */
.time-label { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 8px; }
.time-label-text { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.time-label-count { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.time-label-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.lib-card { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px dotted var(--muted2); cursor: pointer; position: relative; transition: background 0.15s; }
.lib-card:hover { background: var(--surface); }
.lib-card.overdue::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.lib-card.today::before   { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.lib-date { font-family: var(--mono); font-size: 10px; color: var(--muted); min-width: 42px; flex-shrink: 0; letter-spacing: 0.04em; }
.lib-date.overdue { color: var(--red); }
.lib-date.today   { color: var(--gold); }
.lib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.lib-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.lib-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted2); }
.lib-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/*  Calendar: month bar  */
.month-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px dotted var(--dotline); gap: 12px; }
.month-nav { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.month-title { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--text); white-space: nowrap; }
.month-arrow { width: 26px; height: 26px; border: 1px dotted rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); flex-shrink: 0; background: none; }
.month-arrow svg { width: 11px; height: 11px; }
.month-stats { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.mstat-pill { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px dotted; font-family: var(--mono); font-size: 10px; font-weight: 600; white-space: nowrap; }
.mstat-pill.sched { color: var(--cyan); border-color: rgba(34,211,238,0.3); background: var(--cyan-bg); }
.mstat-pill.ready { color: var(--green); border-color: rgba(62,207,142,0.3); background: var(--green-bg); }
.mstat-pill.late  { color: var(--red); border-color: rgba(255,75,75,0.3); background: var(--red-bg); }
.mstat-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/*  Calendar: cell dots  */
.cal-cell { background: var(--surface); border: 1px solid var(--muted2); border-radius: 3px; padding: 5px 4px 4px; cursor: pointer; display: flex; flex-direction: column; min-height: 52px; transition: background 0.15s; }
.cal-cell.today { border-color: var(--gold); }
.cal-cell.today .cc-num { color: var(--gold); font-weight: 700; }
.cal-cell.selected { background: var(--surface2); border-color: rgba(255,255,255,0.18); }
.cal-cell-empty { background: transparent; border-color: transparent; min-height: 52px; }
.cc-num { font-family: var(--mono); font-size: 10px; color: var(--text2); margin-bottom: 4px; line-height: 1; }
.cc-dots { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; align-content: flex-start; }
.cc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cc-overflow { font-family: var(--mono); font-size: 7px; color: var(--muted); margin-top: 2px; }

/*  Calendar: day drawer  */
.day-drawer { border-top: 1px dotted var(--dotline); background: var(--surface); display: none; flex-direction: column; }
.day-drawer.open { display: flex; }
.drawer-hdr { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px; border-bottom: 1px dotted var(--dotline); }
.drawer-date { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.drawer-close { font-family: var(--mono); font-size: 9px; color: var(--muted); cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; }
.drawer-post { display: flex; align-items: flex-start; gap: 12px; padding: 13px 20px; border-bottom: 1px dotted var(--muted2); cursor: pointer; }
.drawer-post:last-child { border-bottom: none; }
.drawer-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.drawer-post-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
.drawer-post-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.meta-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border: 1px dotted; white-space: nowrap; }
.meta-pill.owner  { color: var(--green); border-color: rgba(62,207,142,0.3); }
.meta-pill.pillar { color: var(--muted); border-color: var(--muted2); }
.meta-pill.s-ready  { color: var(--green); border-color: rgba(62,207,142,0.3); }
.meta-pill.s-sched  { color: var(--cyan); border-color: rgba(34,211,238,0.3); }
.meta-pill.s-appr   { color: var(--red); border-color: rgba(255,75,75,0.3); }
.meta-pill.s-prod   { color: var(--amber); border-color: rgba(246,166,35,0.3); }
.meta-pill.s-input  { color: var(--purple); border-color: rgba(155,135,245,0.3); }
.drawer-empty { padding: 20px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }

/* Board view */
.search-input { flex: 1; min-width: 160px; }


/* 
   RESPONSIVE  DESKTOP
 */
@media (min-width: 768px) {
  #dashboard-view { max-width: 820px; margin: 0 auto; }
  .insights-view  { max-width: 820px; margin: 0 auto; }
  #library-view   { max-width: 820px; margin: 0 auto; }
}

/* 
   CONTENT LIBRARY POST LINK
 */
.post-link-cell a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

/* 
   HIDDEN STAT ELEMENTS (preserve JS compat)
 */
.stat-pill { display: none !important; }
#pipeline-label, #library-label { display: none; }

/* 
   V2  MICRO-INTERACTIONS
 */

/* Tab buttons */
.tab-btn:active { transform: scale(0.96); }

/* 
   V2  DATE PICKER CALENDAR ICON
 */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238892aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* 
   V2  TOPBAR REFRESH SPIN ANIMATION
 */
#btn-refresh {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
#btn-refresh:hover { opacity: 1; }
@keyframes spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#btn-refresh.spinning svg {
  animation: spin-once 0.5s ease;
}

/* 
   V2  ADMIN INSIGHTS POPUP (fix 19)
 */
#insights-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8600;
  background: rgba(0,0,0,0.55);
  align-items: flex-end;
  justify-content: center;
}
#insights-overlay.open { display: flex; }
#insights-panel {
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
}
.insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.insights-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* Compact insight bar (always visible in admin view) */
.insight-summary-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  cursor: pointer;
  transition: border-color var(--transition);
  flex-wrap: wrap;
}
.insight-summary-bar:hover { border-color: var(--accent); }
.insight-summary-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface2);
}
.insight-summary-pill.red    { background: var(--c-red-dim);    color: var(--c-red); }
.insight-summary-pill.amber  { background: var(--c-amber-dim);  color: var(--c-amber); }
.insight-summary-pill.green  { background: var(--c-green-dim);  color: var(--c-green); }
.insight-summary-pill.blue   { background: var(--c-blue-dim);   color: var(--c-blue); }
.insight-summary-expand {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* 
   V2  LIBRARY VIEW TOGGLE (fix 17)
 */
/* lib-view-btn rules moved to new library search bar section */

/* Pillar view */
/* Calendar view  pillar grid */
.pcs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  padding: 0 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.pcs-cal-dow {
  gap: 0;
  margin-bottom: 4px;
}
.pcs-cal-dow-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-align: center;
  padding: 4px 0;
}

.pcs-cal-cell {
  min-height: 72px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
/*
   V2  CREATIVE TARGET TRACKER (fix 20)
 */
.creative-tracker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.creative-tracker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.creative-tracker-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}
.creative-tracker-period {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.creative-tracker-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.ct-stat {
  text-align: center;
  padding: var(--sp-3);
  background: var(--surface2);
  border-radius: var(--r-sm);
}
.ct-stat-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.ct-stat-num.ok { color: var(--c-green); }
.ct-stat-num.warn { color: var(--c-amber); }
.ct-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
}
.creative-tracker-bar {
  margin-top: var(--sp-3);
  height: 6px;
  background: var(--surface2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.creative-tracker-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 0.6s ease;
}

/* 
   STAGE CHIP GRID  My Tasks summary
 */

.stage-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 12px;
}

.stage-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  width: 100%;
  text-align: left;
}
.stage-chip:active { background: var(--surface2); }

.stage-chip.chip-active {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.stage-chip.chip-warn {
  border-color: rgba(239, 68, 68, 0.35);
}
.stage-chip.chip-warn .chip-count { color: var(--c-red); }

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  flex-shrink: 0;
  min-width: 16px;
  text-align: right;
}

/* 
   PSTAGE  vertical stage sections (My Tasks, Pipeline)
 */

/* Direct scroll containers for task/pipeline lists */
#tasks-container,
#pipeline-container {
  display: block;
  padding-bottom: var(--sp-6);
}

.pstage-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 4;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.pstage-name {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text2);
  flex: 1;
}
.pstage-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.pstage-badge.warn { background: var(--c-red-dim); color: var(--c-red); }

.pstage-empty {
  font-size: 13px;
  color: var(--text3);
  padding: var(--sp-3) var(--sp-2);
}

.pstage-overflow {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  padding: var(--sp-2) 0;
  text-align: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
}

/* 
   ROW TILE  universal compact list row
 */

.row-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px;
}
.post-list {
  gap: 1px;
  padding: 0 10px;
  margin-bottom: 4px;
}

.row-tile {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  transition: background 0.12s ease;
  width: 100%;
  text-align: left;
}
.row-tile:active { background: var(--surface2); }

/* First actionable card  subtle emphasis */
.row-tile.pc-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 12px rgba(59, 130, 246, 0.12);
  scroll-margin-top: 16px;
}

/* All posts fully visible  no role-based dimming */
.row-tile.pc-primary { opacity: 1; }

.row-date {
  grid-column: 1;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  opacity: 0.89;
  width: 64px;
  min-width: 64px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.row-date.today { color: var(--accent); }

.row-body {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-pillar {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-dot {
  grid-column: 3;
  justify-self: end;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Action slot  reserved for future stage-progression button */
.row-action {
  display: none;
}

/* 
   PERSON STRIP
 */
.person-strip {
  display: flex;
  align-items: stretch;
  border-bottom: 1px dotted var(--dotline);
}
.person-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 6px 8px;
  cursor: pointer;
  border-right: 1px dotted var(--dotline);
  border-bottom: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.person-btn:last-child { border-right: none; }
.person-btn:hover { background: var(--surface2); }
.person-num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  transition: color 0.15s;
}
.person-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.15s;
}
.person-btn.active.client { border-bottom-color: var(--red); background: rgba(255,75,75,0.04); }
.person-btn.active.chitra { border-bottom-color: var(--green); background: rgba(62,207,142,0.04); }
.person-btn.active.pranav { border-bottom-color: var(--amber); background: rgba(246,166,35,0.04); }
.person-btn.active.client .person-num,
.person-btn.active.client .person-label { color: var(--red); }
.person-btn.active.chitra .person-num,
.person-btn.active.chitra .person-label { color: var(--green); }
.person-btn.active.pranav .person-num,
.person-btn.active.pranav .person-label { color: var(--amber); }

/* 
   STAGE CHIPS -- Monday weight
 */
.stage-strip {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px dotted var(--dotline);
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.stage-strip::-webkit-scrollbar { display: none; }

.stage-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 80px;
  gap: 10px;
  border: none;
  border-top: 3px solid transparent;
  background: #141414;
  transition: background 0.15s;
  width: auto;
  min-width: 80px;
}
.stage-chip:hover { background: #1c1c1c; }

.chip-count {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  opacity: 0.4;
}
.chip-label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}

/* Inactive chip colors */
.stage-chip.all { border-top-color: rgba(255,255,255,0.2); }
.stage-chip.all .chip-count { color: var(--text2); }
.stage-chip.awaiting_approval { border-top-color: rgba(255,75,75,0.4); }
.stage-chip.awaiting_approval .chip-count { color: var(--red); }
.stage-chip.awaiting_brand_input { border-top-color: rgba(155,135,245,0.4); }
.stage-chip.awaiting_brand_input .chip-count { color: var(--purple); }
.stage-chip.scheduled { border-top-color: rgba(34,211,238,0.4); }
.stage-chip.scheduled .chip-count { color: var(--cyan); }
.stage-chip.ready { border-top-color: rgba(62,207,142,0.4); }
.stage-chip.ready .chip-count { color: var(--green); }
.stage-chip.in_production { border-top-color: rgba(246,166,35,0.4); }
.stage-chip.in_production .chip-count { color: var(--amber); }

/* Active chip -- full background fill */
.stage-chip.active .chip-count { opacity: 1; }
.stage-chip.active .chip-label { opacity: 0.85; }
.stage-chip.active.all { background: #2a2a2a; border-top-color: rgba(255,255,255,0.7); }
.stage-chip.active.all .chip-count { color: var(--text); }
.stage-chip.active.all .chip-label { color: var(--text2); }
.stage-chip.active.awaiting_approval { background: rgba(255,75,75,0.15); border-top-color: var(--red); }
.stage-chip.active.awaiting_approval .chip-count { color: var(--red); }
.stage-chip.active.awaiting_approval .chip-label { color: var(--red); }
.stage-chip.active.awaiting_brand_input { background: rgba(155,135,245,0.15); border-top-color: var(--purple); }
.stage-chip.active.awaiting_brand_input .chip-count { color: var(--purple); }
.stage-chip.active.awaiting_brand_input .chip-label { color: var(--purple); }
.stage-chip.active.scheduled { background: rgba(34,211,238,0.12); border-top-color: var(--cyan); }
.stage-chip.active.scheduled .chip-count { color: var(--cyan); }
.stage-chip.active.scheduled .chip-label { color: var(--cyan); }
.stage-chip.active.ready { background: rgba(62,207,142,0.12); border-top-color: var(--green); }
.stage-chip.active.ready .chip-count { color: var(--green); }
.stage-chip.active.ready .chip-label { color: var(--green); }
.stage-chip.active.in_production { background: rgba(246,166,35,0.12); border-top-color: var(--amber); }
.stage-chip.active.in_production .chip-count { color: var(--amber); }
.stage-chip.active.in_production .chip-label { color: var(--amber); }

/* 
   PIPELINE GROUP HEADER
 */

.group-hdr { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px 6px; }
.group-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.group-label[data-stage="production"] { color: var(--amber); }
.group-label[data-stage="ready"]      { color: var(--green); }
.group-label[data-stage="input"]      { color: var(--purple); }
.group-label[data-stage="approval"]   { color: var(--red); }
.group-label[data-stage="scheduled"]  { color: var(--cyan); }
.group-count { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text2); background: var(--surface2); border: 1px solid var(--muted2); padding: 2px 8px; }

/*  Group collapse/expand  */
.group-section { }

.group-hdr {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.group-hdr:hover { background: rgba(255,255,255,0.02); }
.group-hdr:active { background: rgba(255,255,255,0.04); }

.group-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-chevron {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s, color 0.15s;
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
}
.group-hdr:hover .group-chevron { color: var(--text2); }
.group-section.collapsed .group-chevron { transform: rotate(-90deg); }

.group-section.collapsed .group-hdr {
  border-bottom: 1px dotted var(--dotline);
  margin-bottom: 0;
}

.group-post-list {
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s, margin 0.2s;
}
.group-section.collapsed .group-post-list {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0 !important;
}

.group-section.collapsed .group-count { color: var(--text); }
.group-section.collapsed[data-stage="awaiting_approval"] .group-count {
  color: var(--red);
  border-color: rgba(255,75,75,0.3);
  background: rgba(255,75,75,0.06);
}
.group-section.collapsed[data-stage="ready"] .group-count {
  color: var(--green);
  border-color: rgba(62,207,142,0.3);
  background: rgba(62,207,142,0.06);
}
.group-section.collapsed[data-stage="awaiting_brand_input"] .group-count {
  color: var(--purple);
  border-color: rgba(155,135,245,0.3);
  background: rgba(155,135,245,0.06);
}
.group-section.collapsed[data-stage="scheduled"] .group-count {
  color: var(--cyan);
  border-color: rgba(34,211,238,0.3);
  background: rgba(34,211,238,0.06);
}
.group-section.collapsed[data-stage="in_production"] .group-count {
  color: var(--amber);
  border-color: rgba(246,166,35,0.3);
  background: rgba(246,166,35,0.06);
}

/* --- Published collapsed group in Pipeline --- */
.pipeline-pub-cards { display: none; opacity: 0.35; }
.pipeline-pub-expanded .pipeline-pub-cards { display: block; opacity: 0.45; }
.pipeline-pub-toggle { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--dotline); opacity: 0.5; border-top: 1px solid var(--dotline); }
.pipeline-pub-toggle:hover { opacity: 0.7; }
.pipeline-pub-arrow { transition: transform 0.2s, color 0.15s; color: var(--muted); font-family: var(--mono); font-size: 10px; display: inline-block; line-height: 1; flex-shrink: 0; }
.pipeline-pub-expanded .pipeline-pub-arrow { transform: rotate(0deg); }
.pipeline-pub-group:not(.pipeline-pub-expanded) .pipeline-pub-arrow { transform: rotate(-90deg); }

/*
   PIPELINE POST CARD
 */

.post-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 2px;
}
.post-card.overdue::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.post-card.due-today::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }

.pc-date { font-family: var(--mono); font-size: 10px; min-width: 40px; flex-shrink: 0; color: var(--muted); }
.pc-date.overdue { color: var(--red); }
.pc-date.today   { color: var(--gold); }
.pc-date.nodate  { color: var(--muted2); }

.pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }

.pc-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* 
   RESPONSIBILITY BADGE + STATUS DOT
 */

.resp-badge { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 8px; font-weight: 700; flex-shrink: 0; }
.resp-badge.p          { background: var(--amber-bg); border: 1px solid rgba(246,166,35,0.35); color: var(--amber); }
.resp-badge.ch         { background: var(--green-bg); border: 1px solid rgba(62,207,142,0.35); color: var(--green); }
.resp-badge.cl-input   { background: var(--purple-bg); border: 1px solid rgba(155,135,245,0.35); color: var(--purple); }
.resp-badge.cl-approval{ background: var(--red-bg); border: 1px solid rgba(255,75,75,0.35); color: var(--red); }
.resp-badge.sched      { background: var(--cyan-bg); border: 1px solid rgba(34,211,238,0.35); color: var(--cyan); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* 
   UPC  Universal Post Card
   Minimal scan-mode list row
 */

.upc-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 var(--sp-4);
}

/* Single row: [badge] [title] [] */
.upc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  width: 100%;
  background: transparent;
  text-align: left;
}
.upc:active { background: var(--surface2); }

/* Overflow menu dropdown */
.upc-menu button.danger { color: var(--c-red); }

/* 
   PRIORITY CARD
 */

/* 
   APP HEADER
 */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 9px;
  border-bottom: 1px dotted var(--dotline);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--bg);
}
.app-header-title {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
}
/* Option B number-forward headers */
.hdr-nums { display:flex; align-items:baseline; gap:10px; }
.hdr-num-block { display:flex; align-items:baseline; gap:4px; }
.hdr-n { font-family:var(--mono); font-size:18px; font-weight:500; line-height:1; }
.hdr-nl { font-family:var(--mono); font-size:7px; letter-spacing:0.15em; text-transform:uppercase; color:#444; }
.hdr-vdiv { width:1px; height:14px; background:rgba(255,255,255,0.08); flex-shrink:0; }
.app-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.app-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--muted);
  position: relative;
  flex-shrink: 0;
}
.app-icon-btn:active { background: var(--surface); }

/* Pipeline search icon */
/* Pipeline search overlay */
.search-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid var(--border, #444);
  background: var(--surface1, #1a1a2e);
  color: var(--text1, #fff);
  outline: none;
  box-sizing: border-box;
}
.search-input:focus { border-color: var(--c-blue, #5b8def); }
/*  Hide old topbar in dashboard (kept for client view)  */
#dashboard-view .topbar { display: none; }
#dashboard-view .pipeline-strip-wrap { display: none !important; }
#dashboard-view .tabs-wrap { display: none !important; }

/* 
   BOTTOM NAVIGATION
 */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: stretch;
  background: rgba(8,8,8,0.97);
  border-top: 1px dotted var(--dotline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 0 7px;
  cursor: pointer;
  position: relative;
}
.nav-item:not(:last-child) { border-right: 1px dotted var(--dotline); }
.nav-item .nav-icon { width: 20px; height: 20px; color: var(--muted); transition: color 0.15s; }
.nav-item .nav-label { font-family: var(--mono); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.15s; }
.nav-item.active .nav-icon { color: var(--text); }
.nav-item.active .nav-label { color: var(--text); }
.nav-item.active { border-bottom: none; border-bottom-color: transparent; background: none; text-decoration: none; color: inherit; }

.nav-badge { position: absolute; top: 8px; right: calc(50% - 20px); background: var(--red); color: #fff; font-family: var(--mono); font-size: 7px; font-weight: 700; padding: 1px 4px; border-radius: 8px; min-width: 14px; text-align: center; border: 1.5px solid var(--bg); }

/* 
   ACTION BAR (persistent, above bottom nav)
 */
.fab {
  position: fixed;
  bottom: 74px;
  right: max(20px, calc(50% - 175px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}
.action-bar { display: none; }
.fab:hover { background: #F0F0F0; }
.fab.open { transform: rotate(45deg); background: #EFEFEF; }
.fab:active { transform: scale(0.94); }
.fab.hidden {
  transform: translateY(16px) scale(0.9);
  opacity: 0;
  pointer-events: none;
}
.fab-icon { color: #080808; font-size: 22px; font-weight: 300; line-height: 1; user-select: none; }

/* FAB menu */
.fab-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 198; pointer-events: none; transition: background 0.2s; }
.fab-backdrop.open { background: rgba(0,0,0,0.55); pointer-events: all; }

.fab-menu { position: fixed; bottom: 134px; right: max(20px, calc(50% - 175px)); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; z-index: 199; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.18s, transform 0.18s; }
.fab-menu.open { pointer-events: all; opacity: 1; transform: translateY(0); }
.fab-option { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fab-option-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text2); background: rgba(20,20,20,0.95); border: 1px dotted var(--dotline); padding: 7px 14px; white-space: nowrap; backdrop-filter: blur(8px); transition: color 0.15s, border-color 0.15s; }
.fab-option-dot { width: 38px; height: 38px; border-radius: 50%; border: 1px dotted; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }

.fab-post .fab-option-dot    { color: var(--green);  border-color: rgba(62,207,142,0.45);  background: rgba(62,207,142,0.07); }
.fab-request .fab-option-dot { color: var(--amber);  border-color: rgba(246,166,35,0.45);  background: rgba(246,166,35,0.07); }
.fab-task .fab-option-dot    { color: var(--purple); border-color: rgba(155,135,245,0.45); background: rgba(155,135,245,0.07); }
.fab-post:hover .fab-option-dot    { background: rgba(62,207,142,0.14); }
.fab-request:hover .fab-option-dot { background: rgba(246,166,35,0.14); }
.fab-task:hover .fab-option-dot    { background: rgba(155,135,245,0.14); }
.fab-post:hover .fab-option-label    { color: var(--green);  border-color: rgba(62,207,142,0.3); }
.fab-request:hover .fab-option-label { color: var(--amber);  border-color: rgba(246,166,35,0.3); }
.fab-task:hover .fab-option-label    { color: var(--purple); border-color: rgba(155,135,245,0.3); }

@media (min-width: 481px) {
}

/* 
   REQUEST SHEET
 */

#request-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.5);
  align-items: flex-end;
  justify-content: center;
}
#request-sheet-overlay.open { display: flex; }
#request-sheet {
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%;
  max-width: 540px;
  padding: var(--sp-5);
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 
   PCS  Post Control Screen (Apple-style modal sheet)
   Redesigned: 3-zone layout with consistent spacing rhythm
   8px micro  16px section  24px major
 */

/*  Overlay  */
#pcs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  background: rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
}
#pcs-overlay.open { display: flex; }

/*  Modal card  theme-aware with dark mode separation (Section 11)  */
#pcs-screen {
  display: flex;
  flex-direction: column;
  width: var(--pcs-modal-width);
  max-width: var(--pcs-modal-width);
  height: 92vh;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
  overflow: hidden;
  will-change: transform;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
#pcs-overlay.open #pcs-screen {
  transform: translateY(0);
  opacity: 1;
}

/* Stage-change confirmation glow */
#pcs-screen.pcs-confirm {
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.6),
    0 0 16px rgba(59,130,246,0.15),
    0 10px 30px rgba(0,0,0,0.45);
  transition: box-shadow 220ms ease;
}

/* Mobile: bottom sheet on small screens */
@media (max-width: 540px) {
  #pcs-overlay { align-items: flex-end; }
  #pcs-screen {
    max-width: 100%;
    height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    opacity: 1;
  }
  #pcs-overlay.open #pcs-screen {
    transform: translateY(0);
  }
}

/* Progressive enhancement  stable visible viewport (svh) */
@supports (height: 100svh) {
  #pcs-screen {
    height: 92svh;
  }
}

/* 
   ZONE 1  HEADER (title + metadata + pipeline)
 */
.pcs-close-btn,
.pcs-close-btn:hover,
.pcs-close-btn:active,
/* Title  most visually prominent element */
.pcs-title {
  font-size: 22px;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}
/* Editable title affordance */
.pcs-title--editable { cursor: text; }
.pcs-title--editable:hover {
  background: var(--surface2);
  border-radius: 8px;
}
.pcs-title-input {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-align: left;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: var(--pcs-space-1) var(--pcs-space-2);
  font-family: inherit;
  outline: none;
}
.pcs-title-input:focus { border-color: var(--c-blue); }

/* Metadata row  Pillar  Owner  Date */
.pcs-subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pcs-inline-separator-gap);
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcs-subtitle span { white-space: nowrap; }
/*  Scroll area  */
.pcs-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--pcs-content-padding) 20px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pcs-space-4);
}
.pcs-scroll::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 12px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
  flex-shrink: 0;
}

/* Body sections  spacing controlled by .pcs-scroll gap */
.pcs-body-section:empty {
  display: none;
}

/*  Pipeline progress row  */
/*  Pipeline stage indicator  */
.pipeline-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 6px;
}
.pipeline-dot.completed {
  background: var(--c-green);
  opacity: 1;
}
.pipeline-dot.active {
  background: var(--surface);
  border: 2px solid var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue-dim);
  opacity: 1;
}
.pipeline-dot.pending {
  background: var(--border2);
  opacity: 0.45;
}
.pipeline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
  margin-top: 2px;
}
.pipeline-stage:has(.pipeline-dot.active) .pipeline-label {
  color: var(--c-blue);
  font-weight: 700;
}
.pipeline-stage:has(.pipeline-dot.completed) .pipeline-label {
  color: var(--c-green);
}

/*  Design section layout  */
/* Legacy horizontal layout kept for compatibility */
/*  Divider  */
/* Action chip system */
/* Press feedback */
/* Stage advance chip  subtle primary emphasis */
/* Informational chip (no action) */
/* Canva chip */
/* LinkedIn chip */
/* Secondary chip (+ Design) */
/* Low-emphasis text action (Replace design / Replace link) */
/* Legacy action controls  matched to 36px chip height */
/* Section 6: Attach URL row */
.pcs-attach-row {
  display: flex;
  gap: var(--pcs-space-3);
  align-items: center;
  padding: 0;
}
.pcs-attach-input {
  flex: 1;
  height: var(--pcs-button-height);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--pcs-space-2);
  padding: 0 var(--pcs-space-3);
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  min-width: 0;
}
.pcs-attach-input:focus { outline: none; border-color: var(--c-blue); }
.pcs-attach-save {
  height: var(--pcs-button-height);
  width: 80px;
  padding: 0;
  background: var(--c-blue);
  color: #ffffff;
  border-radius: var(--pcs-space-2);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.pcs-attach-save:hover { filter: brightness(1.1); }
.pcs-attach-save:active { transform: scale(0.97); }
/* Cancel text under attach row */
.pcs-attach-cancel {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: var(--pcs-space-1) var(--pcs-space-2);
  transition: color 120ms ease;
}
.pcs-attach-cancel:hover { color: var(--text-secondary); }

/*  Fields container  vertical rhythm for grid + notes  */
#pcs-fields {
  display: flex;
  flex-direction: column;
  gap: var(--pcs-space-5);
}

/*  Information section divider  */
/*  Notes section  lighter feel  */

/* Legacy design block classes  heights matched to 36px */
/* 
   ZONE 3  CONTENT (Info grid, Notes, Activity)
 */

/*  Section containers  */
/*  Information grid  stacked single-column layout  */
.pcs-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  width: 100%;
}
/*  Typography tokens  */
.pcs-subtitle {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.pcs-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
/* Section 7: Unified value shell  all metadata fields */
.pcs-value-shell .pcs-date-text {
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  Target Date  subtle signal via color only  */
.pcs-field[data-field="targetDate"] .pcs-value {
  color: var(--text-primary);
}

/* Date tap  inside .pcs-value-shell */
div.pcs-date-tap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-primary);
}
label.pcs-date-tap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-primary);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
label.pcs-date-tap:active { transform: scale(0.98); }
.pcs-date-tap .pcs-date-input-native {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: transparent;
  background: transparent;
  border: none;
}

/*  Notes box  preview card with fade  */
/*  Activity section (collapsed by default)  */
.pcs-activity-section.expanded .pcs-activity-chevron {
  transform: rotate(90deg);
}

/*  Desktop hover lift (pointer devices only)  */
@media (hover: hover) {
  .pcs-action-chip:hover,
  .pcs-close-btn:hover,
}

.pcs-activity-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: var(--pcs-space-2);
}
.pcs-activity-row {
  display: flex;
  align-items: baseline;
  gap: var(--pcs-space-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.pcs-activity-row:last-child { border-bottom: none; }
.pcs-activity-loading,
.pcs-activity-empty { font-size: 12px; color: var(--text-tertiary); padding: var(--pcs-space-1) 0; }

/*  Delete confirm  theme-aware  */
.pcs-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pcs-space-5);
}
.pcs-confirm-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pcs-space-4);
  padding: var(--pcs-space-5);
  width: 100%;
  max-width: 360px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.pcs-confirm-msg {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--pcs-space-4);
  line-height: 1.4;
}
.pcs-confirm-btns { display: flex; gap: var(--pcs-space-2); }
.pcs-confirm-cancel {
  flex: 1; height: 44px; border-radius: 8px;
  border: 1px solid var(--border2); color: var(--text2);
  font-size: 15px; font-weight: 600; background: var(--surface2);
  cursor: pointer; transition: transform 0.1s ease;
}
.pcs-confirm-cancel:hover { background: var(--surface3); }
.pcs-confirm-cancel:active { transform: scale(0.97); }
.pcs-confirm-delete {
  flex: 1; height: 44px; border-radius: 8px;
  background: var(--c-red); color: #fff;
  font-size: 15px; font-weight: 700;
  border: none; cursor: pointer;
  transition: transform 0.1s ease;
}
.pcs-confirm-delete:hover { filter: brightness(1.1); }
.pcs-confirm-delete:active { transform: scale(0.97); }
/* Stage confirm button */
.pcs-confirm-stage {
  flex: 1; height: 44px; border-radius: 8px;
  background: var(--c-blue); color: #fff;
  font-size: 15px; font-weight: 700;
  border: none; cursor: pointer;
  transition: transform 0.1s ease;
}
.pcs-confirm-stage:hover { filter: brightness(1.1); }
.pcs-confirm-stage:active { transform: scale(0.97); }

/* 
   PC  Post Card redesign (dotted border system)
 */

/*  FIX 10: Card structure  fixed height, internal scroll  */
.pc-sheet {
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.pc-scroll-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 24px;
}
.pc-scroll-body::-webkit-scrollbar { display: none; }

/*  FIX 2: Topbar  X left, trash right  */
.pc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 14px;
  flex-shrink: 0;
}
.pc-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--muted2);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text2);
  transition: all 0.15s;
}
.pc-icon-btn:hover { background: var(--surface2); }
.pc-icon-btn svg { width: 15px; height: 15px; }
.pc-icon-btn.danger:hover { border-color: rgba(255,75,75,0.4); color: var(--red); }

/*  FIX 3: Title block  */
.pc-title-block {
  padding: 0 20px 14px;
  border-bottom: 1px dotted var(--dotline);
}
.pc-title-block .pc-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin-bottom: 5px;
}
.pc-title-block .pc-title.pcs-title--editable { cursor: text; }
.pc-title-block .pc-title.pcs-title--editable:hover { background: var(--surface2); border-radius: 8px; }
.pc-subtitle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pc-sub-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted2);
  flex-shrink: 0;
}
.pc-overdue-badge {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px dotted rgba(255,75,75,0.5);
  padding: 1px 6px;
}

/*  FIX 4: Pipeline dots with dotted connectors  */
.pc-pipeline {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 20px;
  border-bottom: 1px dotted var(--dotline);
}
.pc-pipeline::-webkit-scrollbar { display: none; }
.pc-pipe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  position: relative;
  min-width: 58px;
}
.pc-pipe-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 9px);
  right: calc(-50% + 9px);
  height: 1px;
  border-top: 1px dotted var(--muted2);
}
.pc-pipe-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.pc-pipe-dot.done    { background: var(--green); }
.pc-pipe-dot.current { background: transparent; border: 2px solid var(--cyan); box-shadow: 0 0 5px rgba(34,211,238,0.25); }
.pc-pipe-dot.future  { background: var(--muted2); }
.pc-pipe-lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}
.pc-pipe-lbl.done    { color: var(--green); }
.pc-pipe-lbl.current { color: var(--cyan); }
.pc-pipe-lbl.future  { color: var(--muted); }

/*  FIX 5: Action links  Canva / LinkedIn  */
.pc-actions-block {
  padding: 12px 20px;
  border-bottom: 1px dotted var(--dotline);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pc-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dotted;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  border-radius: 0;
}
.pc-action-link svg { width: 9px; height: 9px; }
.pc-action-link.canva { color: var(--purple); border-color: rgba(155,135,245,0.4); background: rgba(155,135,245,0.06); }
.pc-action-link.canva:hover { background: rgba(155,135,245,0.12); }
.pc-action-link.linkedin { color: var(--cyan); border-color: rgba(34,211,238,0.35); background: transparent; }
.pc-action-link.linkedin:hover { background: rgba(34,211,238,0.06); }

/*  FIX 6: Meta grid  mono labels  */
.pc-meta-block {
  padding: 16px 20px;
  border-bottom: 1px dotted var(--dotline);
}
.pc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.pc-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pc-meta-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pc-meta-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.pc-meta-val select {
  border: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  padding: 0;
  width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}
.pc-meta-val select:focus { color: var(--cyan); }
.pc-meta-val select:disabled { opacity: 0.45; cursor: default; }
.pc-meta-val--production { color: var(--amber); }
.pc-meta-val--ready      { color: var(--green); }
.pc-meta-val--approval   { color: var(--red); }
.pc-meta-val--scheduled  { color: var(--cyan); }
.pc-meta-val--published  { color: var(--muted); }
.pc-meta-val--overdue    { color: var(--red); }
.pc-meta-val .pcs-date-tap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  position: relative;
  min-height: 32px;
  cursor: pointer;
}
.pc-meta-val .pcs-date-tap .pcs-date-input-native {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/*  FIX 7: Stage advance button  */
.pc-advance-block {
  padding: 14px 20px;
  border-bottom: 1px dotted var(--dotline);
}
.pc-advance-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px dotted;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.pc-advance-btn.to-ready    { color: var(--green);  border-color: rgba(62,207,142,0.35); }
.pc-advance-btn.to-approval { color: var(--red);    border-color: rgba(255,75,75,0.35); }
.pc-advance-btn.to-scheduled{ color: var(--cyan);   border-color: rgba(34,211,238,0.35); }
.pc-advance-btn.to-published{ color: var(--muted);  border-color: var(--muted2); }
.pc-advance-btn:hover { background: rgba(255,255,255,0.04); }
.pc-advance-arrow { font-size: 14px; }

/*  FIX 8: Notes compact  */
.pc-notes-block {
  padding: 14px 20px;
  border-bottom: 1px dotted var(--dotline);
}
.pc-notes-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pc-notes-area {
  width: 100%;
  height: 56px;
  background: var(--surface2);
  border: 1px dotted rgba(255,255,255,0.1);
  border-radius: 0;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text);
  resize: none;
  outline: none;
  transition: border-color 0.15s;
  display: block;
  box-sizing: border-box;
}
.pc-notes-area::placeholder { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; }
.pc-notes-area:focus { border-color: rgba(255,255,255,0.2); }
.pc-notes-ro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text2);
  line-height: 1.5;
}

/*  FIX 9: Activity link row  */
.pc-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px 20px;
}
.pc-activity-row:hover .pc-act-arrow { color: #e2c06a; }
.pc-act-arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gold);
  transition: color 0.15s;
}
.pc-act-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.pc-act-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px dotted var(--muted2);
}

/* ===============================================
   BATCH APPROVAL BAR
=============================================== */
.batch-bar {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px dotted var(--dotline);
  border-radius: 8px;
  z-index: 150;
  backdrop-filter: blur(12px);
}

.batch-bar-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text2);
  text-transform: uppercase;
  flex-shrink: 0;
}

.batch-bar-count span {
  color: var(--text);
  font-weight: 700;
}

.batch-bar-actions {
  display: flex;
  gap: 8px;
}

.batch-btn {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 1px dotted;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.batch-btn-input {
  color: var(--purple);
  border-color: rgba(155,135,245,0.4);
}
.batch-btn-input:hover { background: rgba(155,135,245,0.08); }

.batch-btn-approval {
  color: var(--green);
  border-color: rgba(62,207,142,0.4);
}
.batch-btn-approval:hover { background: rgba(62,207,142,0.08); }

.batch-select-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px dotted rgba(255,255,255,0.2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.batch-select-btn.active {
  color: var(--text);
  border-color: rgba(255,255,255,0.4);
}

.post-card.batch-mode { cursor: pointer; }
.post-card.batch-selected {
  border-color: rgba(62,207,142,0.4);
  background: rgba(62,207,142,0.04);
}

.batch-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.post-card.batch-selected .batch-checkbox {
  background: var(--green);
  border-color: var(--green);
}
.batch-checkbox::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.post-card.batch-selected .batch-checkbox::after { opacity: 1; }

/*  Chase Toast  */
.chase-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--surface2);
  border: 1px dotted rgba(200,168,75,0.4);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
}
.chase-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/*  Chase Button (individual card)  */
.chase-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  margin-top: 6px;
  border-top: 1px dotted rgba(200,168,75,0.2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.chase-btn:hover { opacity: 1; }
.chase-arrow { font-weight: 600; }
.chase-label { flex: 1; }
.chase-days { opacity: 0.5; font-size: 8px; }

/*  Chase All Button (group header)  */
.chase-all-btn {
  background: none;
  border: 1px dotted rgba(200,168,75,0.4);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: opacity 0.15s;
  opacity: 0.7;
}
.chase-all-btn:hover { opacity: 1; }

/*  Pipeline Expandable Search  */
.search-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.search-icon-btn:hover { color: var(--text2); }

.pipeline-search-bar {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 12px;
  background: var(--bg);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.15s;
  pointer-events: none;
}
.pipeline-search-bar.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

.pipeline-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  caret-color: var(--gold);
}
.pipeline-search-input::placeholder { color: var(--muted); font-size: 14px; }

.pipeline-search-underline {
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--dotline);
  overflow: hidden;
}
.pipeline-search-underline::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transition: left 0.3s ease;
}
.pipeline-search-bar.open .pipeline-search-underline::after { left: 0; }

.pipeline-search-cancel {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 4px 0 0;
  white-space: nowrap;
  transition: color 0.15s;
  flex-shrink: 0;
}
.pipeline-search-cancel:hover { color: var(--text2); }

.app-header.searching .app-header-title {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.15s, transform 0.15s;
}
.app-header.searching .app-header-right {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.pipeline-search-results {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px dotted var(--dotline);
  max-height: 60vh;
  overflow-y: auto;
}
.pipeline-search-results.visible { display: flex; }

.pipeline-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px dotted var(--dotline);
  transition: background 0.15s;
}
.pipeline-search-result-item:last-child { border-bottom: none; }
.pipeline-search-result-item:hover { background: var(--surface2); }

.result-stage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pipeline-result-body { flex: 1; min-width: 0; }
.pipeline-result-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.pipeline-result-title mark {
  background: rgba(200,168,75,0.25);
  color: var(--gold);
  border-radius: 2px;
  padding: 0 1px;
}
.pipeline-result-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.result-stage-badge {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pipeline-search-empty {
  display: none;
  padding: 20px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px dotted var(--dotline);
}
.pipeline-search-empty.visible { display: block; }

#pipeline-container.search-dimmed {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* 
   UPDATES / NOTIFICATIONS TAB
 */

.notif-header {
  padding: 22px 20px 14px;
  border-bottom: 1px dotted var(--dotline);
  flex-shrink: 0;
}

.notif-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.notif-role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.notif-hey {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.4px;
  line-height: 1.1;
}

.notif-hey span { color: var(--gold); }

.mark-all-btn {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dotted var(--dotline);
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.mark-all-btn:hover { color: var(--text2); }

.notif-attention {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text2);
  margin-bottom: 5px;
}

.notif-attention strong {
  font-weight: 600;
  color: var(--text);
}

.notif-breakdown {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

.bk-item {
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.bk-item:hover { opacity: 0.7; }
.bk-urgent { color: var(--red); font-weight: 600; }
.bk-new    { color: var(--green); font-weight: 600; }
.bk-info   { color: var(--gold); font-weight: 600; }
.bk-unread { color: var(--text2); font-weight: 500; }
.bk-sep    { color: var(--muted2); margin: 0 7px; user-select: none; }
.bk-allclear { color: var(--green); font-weight: 600; }

.notif-filter-tabs {
  display: flex;
  border-bottom: 1px dotted var(--dotline);
  flex-shrink: 0;
}

.nftab {
  flex: 1;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 0;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.nftab.active { color: var(--text); border-bottom-color: var(--gold); }

.nftab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.notif-list-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 100px;
}
.notif-list-scroll::-webkit-scrollbar { display: none; }

.notif-day-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 20px 7px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.notif-day-label::after {
  content: '';
  flex: 1;
  height: 1px;
  border-top: 1px dotted var(--dotline);
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px 10px 20px;
  border-bottom: 1px dotted var(--muted2);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.notif-item:hover { background: var(--surface); }
.notif-item.unread { background: rgba(255,255,255,0.012); }

.notif-item::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:1px; background:var(--muted2); }
.notif-item.ntype-awaiting_approval::before { background:var(--red); }
.notif-item.ntype-ready::before { background:var(--green); }
.notif-item.ntype-scheduled::before { background:var(--cyan); }
.notif-item.ntype-in_production::before { background:var(--amber); }
.notif-item.ntype-published::before { background:var(--green); }
.notif-item.ntype-awaiting_brand_input::before { background:var(--purple); }

.notif-avatar { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:9px; font-weight:700; flex-shrink:0; margin-top:1px; }
.av-pranav  { background:var(--amber-bg); color:var(--amber); border:1px solid rgba(246,166,35,0.2); }
.av-chitra  { background:var(--green-bg); color:var(--green); border:1px solid rgba(62,207,142,0.2); }
.av-shubham { background:var(--gold-bg);  color:var(--gold);  border:1px solid rgba(200,168,75,0.2); }
.av-client  { background:var(--red-bg);   color:var(--red);   border:1px solid rgba(255,75,75,0.2); }
.av-system  { background:var(--surface2); color:var(--muted); border:1px solid var(--muted2); }

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

.notif-msg {
  font-size: 13px;
  font-weight: 400;
  color: var(--text2);
  line-height: 1.4;
  margin-bottom: 3px;
}
.notif-item.unread .notif-msg { color: var(--text); }
.notif-msg .actor { font-weight: 600; color: var(--text); }

.notif-meta {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.notif-stage-pill { padding:1px 6px; border-radius:2px; font-family:var(--mono); font-size:7px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }
.pill-approval  { background:var(--red-bg);    color:var(--red); }
.pill-ready     { background:var(--green-bg);  color:var(--green); }
.pill-scheduled { background:var(--cyan-bg);   color:var(--cyan); }
.pill-production{ background:var(--amber-bg);  color:var(--amber); }
.pill-published { background:var(--green-bg);  color:var(--green); }
.pill-input     { background:var(--purple-bg); color:var(--purple); }

.notif-actions-inline { display:flex; gap:12px; align-items:center; margin-top:5px; }

.notif-action-link { font-family:var(--mono); font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); cursor:pointer; border-bottom:1px dotted var(--muted); display:inline; transition:color 0.15s; background:none; border-top:none; border-left:none; border-right:none; padding:0; }
.notif-action-link:hover { color:var(--text2); }
.notif-action-link.danger { color:var(--red); border-bottom-color:var(--red); }
.notif-action-link.success { color:var(--green); border-bottom-color:var(--green); }

.notif-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.notif-time {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
  white-space: nowrap;
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

#panel-updates .notif-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
}
#panel-updates .notif-empty.visible { display: flex; }
.notif-empty-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
}
.notif-empty-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ===================================================
   DASHBOARD REDESIGN
   =================================================== */

/* DASHBOARD SHELL */
#pcs-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 80px;
}
#pcs-dashboard::-webkit-scrollbar { display: none; }

/* DASHBOARD HEADER */
.dash-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--dotline);
  flex-shrink: 0;
}
.dash-hdr-left {}
.dash-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.04em;
}
.dash-updated {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}
.dash-edition {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--c-text3);
  font-style: normal;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* HEADLINE BLOCK */
.dash-headline-block {
  padding: 8px 18px 0;
  border-bottom: 1px solid var(--dotline);
  flex-shrink: 0;
}
.dash-kicker {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.dash-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-headline {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin-bottom: 5px;
  color: var(--text);
}
.dash-headline .hl-num {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -1px;
}
.dash-deck {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.55;
  padding-top: 0;
}

/* METRIC ROWS */
.dash-metric-rows {
  border-bottom: 1px solid var(--dotline);
  flex-shrink: 0;
}
.dash-metric-row {
  display: flex;
  align-items: center;
  padding: 8px 18px;
  border-bottom: 1px solid var(--dotline);
  transition: background 0.15s;
  cursor: pointer;
}
.dash-metric-row:active { background: var(--surface2); }
.dash-metric-row:last-child { border-bottom: none; }
.dash-metric-row:hover { background: var(--surface); }

/* PREFIX */
.dash-metric-prefix {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  width: 22px;
  flex-shrink: 0;
  text-align: center;
}

/* NUMBER */
.dash-metric-num {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  width: 50px;
  flex-shrink: 0;
}

/* DIVIDER LINE between number and info */
.dash-metric-divider {
  width: 1px;
  align-self: stretch;
  background: var(--muted2);
  margin: 0 14px;
  flex-shrink: 0;
}

/* INFO COLUMN */
.dash-metric-info {
  flex: 1;
  min-width: 0;
}
.dash-metric-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.dash-metric-msg {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
}

/* TASK STRIP */
.dash-tasks {
  padding: 8px 18px 12px;
  flex-shrink: 0;
}
.dash-tasks-label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-tasks-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dotline);
}
.dash-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--muted2);
  cursor: pointer;
  transition: opacity 0.15s;
}
.dash-task-row:last-child { border-bottom: none; }
.dash-task-row:hover { opacity: 0.8; }
.dash-task-cb {
  width: 14px;
  height: 14px;
  border: 1px dotted var(--muted);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.dash-task-cb.done {
  background: var(--green);
  border-color: var(--green);
}
.dash-task-cb.done::after {
  content: '';
  width: 6px;
  height: 4px;
  border-left: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}
.dash-task-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  flex: 1;
}
.dash-task-text.done {
  text-decoration: line-through;
  color: var(--muted);
}
.dash-task-who {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* COLOR HELPERS */
.dc-muted  { color: var(--muted); }

@keyframes dash-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.dc-pulse { animation: dash-pulse 1.4s ease-in-out infinite; }

@keyframes dashGlow {
  0%,100% {
    color: #FF4B4B;
    filter: drop-shadow(0 0 6px rgba(255,75,75,0.8)) drop-shadow(0 0 12px rgba(255,75,75,0.5));
  }
  50% {
    color: #ff6b6b;
    filter: drop-shadow(0 0 10px rgba(255,75,75,1)) drop-shadow(0 0 20px rgba(255,75,75,0.8)) drop-shadow(0 0 30px rgba(255,75,75,0.4));
  }
}

.dash-metric-streak {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
  line-height: 1.2;
}
.dms-on   { color: var(--amber); opacity: 0.7; }
.dms-idle { color: var(--red);   opacity: 0.65; }
.dms-good { color: var(--green); opacity: 0.65; }
.dms-muted{ color: var(--muted); opacity: 0.8; }

.dash-task-urgent {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  padding: 7px 0;
  border-bottom: 1px dotted var(--muted2);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dash-task-urgent:hover { opacity: 0.7; }
.dash-task-urgent:last-child { border-bottom: none; }
.dash-task-urgent::before { content: '\2192'; flex-shrink: 0; }
.dash-task-amber { color: var(--amber); }

.dash-empty-state {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  padding: 8px 0;
}

/* -- New Request Sheet (NRS) ------------------- */
.nrs-sheet {
  width:100%; max-width:480px; background:var(--surface);
  border-top:1px dotted var(--dotline);
  max-height:92vh; display:flex; flex-direction:column;
}
.nrs-handle {
  width:36px; height:3px; background:var(--muted2);
  border-radius:2px; margin:10px auto 0; flex-shrink:0;
}
.nrs-red-strip { height:2px; background:var(--red); flex-shrink:0; }
.nrs-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px 12px;
  border-bottom:1px dotted var(--dotline); flex-shrink:0;
}
.nrs-hdr-left {}
.nrs-title {
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text2); margin-bottom:2px;
}
.nrs-subtitle {
  font-family:var(--mono); font-size:8px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--red); opacity:0.8;
}
.nrs-close {
  width:28px; height:28px; border:1px dotted var(--dotline);
  background:transparent; color:var(--muted); font-size:13px;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-family:var(--mono);
  transition:color 0.15s;
}
.nrs-close:hover { color:var(--text); }
.nrs-body { flex:1; overflow-y:auto; scrollbar-width:none; }
.nrs-body::-webkit-scrollbar { display:none; }
.nrs-field-label {
  font-family:var(--mono); font-size:8px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
  display:flex; align-items:center; gap:4px;
}
.nrs-req { color:var(--red); }
.nrs-section {
  padding:14px 18px 12px;
  border-bottom:1px dotted var(--dotline);
}
.nrs-section:last-child { border-bottom:none; }
.nrs-brief {
  display:block; width:100%; background:transparent; border:none;
  color:var(--text); font-family:var(--sans);
  font-size:16px; font-weight:500; line-height:1.55;
  outline:none; padding:0; margin:4px 0 0 0;
  resize:none; min-height:80px; caret-color:var(--gold);
}
.nrs-brief::placeholder { color:var(--muted); font-weight:400; }
.nrs-grid { display:grid; grid-template-columns:1fr 1fr; }
.nrs-cell {
  padding:12px 18px 10px;
  border-bottom:1px dotted var(--dotline);
  border-right:1px dotted var(--dotline);
  min-height:62px; display:flex;
  flex-direction:column; justify-content:flex-start;
}
.nrs-cell:nth-child(2n) { border-right:none; }
.nrs-cell-full { grid-column:1/-1; border-right:none !important; }
.nrs-select, .nrs-date {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:block; width:100%; margin:4px 0 0 0; padding:0;
  font-family:var(--sans); font-size:15px; font-weight:500;
  line-height:1.3; color:var(--text2); background:transparent;
  border:none; outline:none; text-align:left; text-align-last:left;
  cursor:pointer; box-sizing:border-box; min-height:0; height:auto;
}
.nrs-select:focus, .nrs-date:focus { color:var(--text); }
.nrs-date { color-scheme:dark; }
.nrs-urgency-opts { display:flex; gap:6px; margin-top:4px; }
.nrs-urg-opt {
  font-family:var(--mono); font-size:8px; letter-spacing:0.1em;
  text-transform:uppercase; padding:4px 10px;
  border:1px dotted var(--muted2); color:var(--muted);
  cursor:pointer; transition:all 0.15s; background:transparent;
}
.nrs-urg-opt.urg-normal { color:var(--amber); border-color:rgba(246,166,35,0.4); background:rgba(246,166,35,0.06); }
.nrs-prod-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:8px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--amber);
  border:1px dotted rgba(246,166,35,0.35);
  background:rgba(246,166,35,0.06); padding:4px 10px; margin-top:4px;
}
.nrs-prod-dot {
  width:5px; height:5px; border-radius:50%; background:var(--amber);
}
.nrs-footer {
  display:flex; border-top:1px dotted var(--dotline); flex-shrink:0;
}
.nrs-btn-cancel {
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); border:none;
  border-right:1px dotted var(--dotline); background:transparent;
  padding:16px 20px; cursor:pointer; transition:color 0.15s; flex-shrink:0;
}
.nrs-btn-cancel:hover { color:var(--text2); }
.nrs-btn-send {
  flex:1; font-family:var(--mono); font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  background:transparent; border:none; padding:16px; cursor:pointer;
  transition:all 0.15s; display:flex; align-items:center;
  justify-content:center; gap:8px; color:var(--muted);
}
.nrs-btn-send:not(:disabled) { color:var(--red); }
.nrs-btn-send:not(:disabled):hover { background:rgba(255,75,75,0.06); }
.nrs-btn-send:disabled { cursor:not-allowed; }

/* -- New Post Sheet (NPS) ---------------------- */
.new-post-sheet {
  width:100%; max-width:480px; background:var(--surface);
  border-top:1px dotted var(--dotline);
  max-height:92vh; display:flex; flex-direction:column;
}
.nps-handle {
  width:36px; height:3px; background:var(--muted2);
  border-radius:2px; margin:10px auto 0; flex-shrink:0;
}
.nps-color-strip {
  height:2px; background:transparent;
  transition:background 0.25s; flex-shrink:0;
}
.nps-color-strip.owner-pranav { background:var(--amber); }
.nps-color-strip.owner-chitra { background:var(--green); }
.nps-color-strip.owner-client { background:var(--red); }
.nps-hdr {
  display:flex; justify-content:space-between;
  align-items:center; padding:14px 18px 12px;
  border-bottom:1px dotted var(--dotline); flex-shrink:0;
}
.nps-title {
  font-family:var(--mono); font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text2);
}
.nps-close {
  width:28px; height:28px; border:1px dotted var(--dotline);
  background:transparent; color:var(--muted); font-size:13px;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-family:var(--mono);
  transition:color 0.15s; border-radius:0;
}
.nps-close:hover { color:var(--text); }
.nps-body { flex:1; overflow-y:auto; scrollbar-width:none; }
.nps-body::-webkit-scrollbar { display:none; }
.nps-title-field {
  padding:16px 18px 14px;
  border-bottom:1px dotted var(--dotline);
}
.nps-field-label {
  font-family:var(--mono); font-size:8px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
  display:flex; align-items:center; gap:4px;
}
.nps-req { color:var(--red); }
.nps-title-input {
  display:block; width:100%; background:transparent;
  border:none; border-radius:0;
  color:var(--text); font-family:var(--sans);
  font-size:20px; font-weight:600; letter-spacing:-0.3px;
  outline:none; padding:0; margin:0;
  caret-color:var(--gold);
  box-shadow:none;
}
.nps-title-input::placeholder {
  color:var(--muted); font-weight:400; font-size:18px;
}
.nps-grid { display:grid; grid-template-columns:1fr 1fr; }
.nps-cell {
  padding:12px 18px 10px;
  border-bottom:1px dotted var(--dotline);
  border-right:1px dotted var(--dotline);
  min-height:62px; display:flex;
  flex-direction:column; justify-content:flex-start;
}
.nps-cell:nth-child(2n) { border-right:none; }
.nps-select {
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  display:block !important;
  width:100% !important;
  margin:4px 0 0 0 !important;
  padding:0 !important;
  font-family:var(--sans) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  color:var(--text2) !important;
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:0 !important;
  outline:none !important;
  text-align:left !important;
  text-align-last:left !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  height:auto !important;
  box-shadow:none !important;
}
.nps-select:focus { color:var(--text) !important; }
.nps-date {
  -webkit-appearance:none !important;
  appearance:none !important;
  display:block !important;
  width:100% !important;
  margin:4px 0 0 0 !important;
  padding:0 !important;
  font-family:var(--sans) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  color:var(--text2) !important;
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:0 !important;
  outline:none !important;
  text-align:left !important;
  text-align-last:left !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  height:auto !important;
  color-scheme:dark;
  box-shadow:none !important;
}
.nps-date:focus { color:var(--text) !important; }
.nps-full {
  padding:12px 18px 10px;
  border-bottom:1px dotted var(--dotline);
}
.nps-full:last-child { border-bottom:none; }
.nps-text {
  display:block !important; width:100% !important;
  background:transparent !important;
  border:none !important; border-radius:0 !important;
  color:var(--text2) !important;
  font-family:var(--sans) !important;
  font-size:14px !important; outline:none !important;
  padding:0 !important; margin:4px 0 0 0 !important;
  caret-color:var(--gold); box-shadow:none !important;
}
.nps-textarea {
  display:block !important; width:100% !important;
  background:transparent !important;
  border:none !important; border-radius:0 !important;
  color:var(--text2) !important;
  font-family:var(--sans) !important;
  font-size:14px !important; outline:none !important;
  padding:0 !important; margin:4px 0 0 0 !important;
  resize:none !important; min-height:68px !important;
  line-height:1.55 !important;
  caret-color:var(--gold); box-shadow:none !important;
}
.nps-text::placeholder, .nps-textarea::placeholder {
  color:var(--muted) !important;
}
.nps-text:focus, .nps-textarea:focus {
  color:var(--text) !important;
}
.nps-footer {
  display:flex; border-top:1px dotted var(--dotline);
  flex-shrink:0;
}
.nps-btn-cancel {
  font-family:var(--mono); font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); border:none;
  border-right:1px dotted var(--dotline);
  background:transparent; padding:16px 20px;
  cursor:pointer; transition:color 0.15s;
  flex-shrink:0; border-radius:0;
}
.nps-btn-cancel:hover { color:var(--text2); }
.nps-btn-create {
  flex:1; font-family:var(--mono); font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  background:transparent; border:none; padding:16px;
  cursor:pointer; transition:all 0.15s;
  display:flex; align-items:center;
  justify-content:center; gap:8px;
  color:var(--muted); border-radius:0;
}
.nps-btn-create:not(:disabled) { color:var(--gold); }
.nps-btn-create:not(:disabled):hover { background:var(--gold-bg); }
.nps-btn-create:disabled { cursor:not-allowed; }
/* ===============================================
   INSIGHTS TAB - All CSS
   Append to end of styles.css
   =============================================== */

.insights-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.insights-view.active{display:flex}
.ins-hdr{display:flex;justify-content:space-between;align-items:center;padding:13px 18px 11px;border-bottom:1px dotted var(--dotline);flex-shrink:0}
.ins-hdr-left{display:flex;align-items:center;gap:10px}
.ins-hdr-title{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-text3)}
.ins-view-toggle{display:flex;border:1px dotted var(--muted2);overflow:hidden}
.ins-vt{font-family:var(--mono);font-size:7px;letter-spacing:0.12em;text-transform:uppercase;padding:4px 9px;cursor:pointer;color:var(--muted);background:transparent;border:none;transition:all 0.15s;border-right:1px dotted var(--muted2)}
.ins-vt:last-child{border-right:none}
.ins-vt.active{color:var(--text);background:var(--surface2)}
.ins-main-tabs{display:flex;border-bottom:1px dotted var(--dotline);flex-shrink:0}
.ins-main-tab{flex:1;font-family:var(--mono);font-size:8px;letter-spacing:0.14em;text-transform:uppercase;padding:10px 0;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--muted);border-bottom:2px solid transparent;transition:all 0.15s}
.ins-main-tab.active{color:var(--text);border-bottom-color:var(--gold)}
.ins-controls{position:sticky;top:0;background:var(--bg);z-index:20;border-bottom:1px dotted var(--dotline)}
.ins-date-row{display:flex;align-items:center;padding:8px 18px;border-bottom:1px dotted var(--muted2);gap:10px}
.ins-row-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text3);flex-shrink:0}
.ins-chips{display:flex;gap:6px}
.ins-chip{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border:1px dotted var(--muted2);color:var(--muted);cursor:pointer;transition:all 0.15s;background:transparent}
.ins-chip.active{color:var(--text);border-color:rgba(255,255,255,0.3);background:var(--surface2)}
.ins-custom-row{display:none;padding:8px 18px;border-bottom:1px dotted var(--muted2);gap:8px;align-items:center;background:var(--surface)}
.ins-custom-row.open{display:flex}
.ins-cd-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);flex-shrink:0}
.ins-cd-input{font-family:var(--mono);font-size:10px;color:var(--text2);background:transparent;border:none;border-bottom:1px dotted var(--dotline);outline:none;padding:2px 0;color-scheme:dark;flex:1}
.ins-cd-apply{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);border:1px dotted rgba(200,168,75,0.4);background:transparent;padding:4px 10px;cursor:pointer}
.ins-pillar-row{display:flex;overflow-x:auto;scrollbar-width:none;padding:8px 18px;gap:6px}
.ins-pillar-row::-webkit-scrollbar{display:none}
.ins-pchip{font-family:var(--mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border:1px dotted var(--muted2);color:var(--muted);cursor:pointer;transition:all 0.15s;background:transparent;white-space:nowrap;flex-shrink:0}
.ins-pchip.active{color:var(--text);border-color:rgba(255,255,255,0.3);background:var(--surface2)}
.ins-tab-body{flex:1;overflow-y:auto;scrollbar-width:none;padding-bottom:80px}
.ins-tab-body::-webkit-scrollbar{display:none}
.ins-tab-body.ins-hidden{display:none}
.ins-hero{padding:16px 18px 14px;border-bottom:1px dotted var(--dotline)}
.ins-hero-ctx{font-family:var(--mono);font-size:8px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.ins-hero-ctx-right{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase}
.ins-li-badge{width:16px;height:16px;background:#0A66C2;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;color:#fff;flex-shrink:0;font-family:var(--mono)}
.ins-hero-val{font-family:var(--mono);font-size:52px;font-weight:700;line-height:1;letter-spacing:-2px;transition:color 0.2s}
.ins-hero-lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-top:4px}
.ins-hero-delta{font-family:var(--mono);font-size:11px;margin-top:6px;display:flex;align-items:center;gap:8px}
.ins-metric-row{display:flex;border-bottom:1px dotted var(--dotline);flex-shrink:0}
.ins-mt{flex:1;font-family:var(--mono);font-size:7px;letter-spacing:0.09em;text-transform:uppercase;padding:9px 0;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--muted);border-bottom:2px solid transparent;transition:all 0.15s;border-right:1px dotted var(--muted2)}
.ins-mt:last-child{border-right:none}
.ins-chart-sec{padding:14px 18px 10px;border-bottom:1px dotted var(--dotline)}
.ins-chart-wrap{height:100px;position:relative;margin-bottom:6px}
.ins-chart-svg{width:100%;height:100%;overflow:visible}
.ins-chart-xlabels{display:flex;justify-content:space-between}
.ins-chart-xlabel{font-family:var(--mono);font-size:7px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
.ins-dow-sec{padding:12px 18px 14px;border-bottom:1px dotted var(--dotline)}
.ins-dow-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.ins-dow-vals{display:flex;gap:4px;margin-bottom:3px}
.ins-dow-val{flex:1;text-align:center;font-family:var(--mono);font-size:7px;font-weight:700;color:var(--text3)}
.ins-dow-chart{display:flex;align-items:flex-end;gap:4px;height:55px;margin-bottom:5px}
.ins-dow-bar{flex:1;border-radius:2px 2px 0 0;min-height:3px;cursor:pointer;transition:opacity 0.15s}
.ins-dow-bar:hover{opacity:0.75}
.ins-dow-labels{display:flex;gap:4px}
.ins-dow-day-lbl{flex:1;text-align:center;font-family:var(--mono);font-size:7px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text3)}
.ins-dow-note{margin-top:8px;padding:9px 12px;border:1px dotted;font-family:var(--mono);font-size:8px;letter-spacing:0.06em;text-transform:uppercase;line-height:1.5}
.ins-top-sec{padding:14px 18px;border-bottom:1px dotted var(--dotline)}
.ins-sec-hdr{font-family:var(--mono);font-size:7px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.ins-sec-action{cursor:pointer;transition:color 0.15s;color:var(--text3)}
.ins-sec-action:hover{color:var(--gold)}
.ins-tp-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dotted var(--muted2);cursor:pointer;transition:background 0.1s}
.ins-tp-row:last-child{border-bottom:none}
.ins-tp-rank{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);width:20px;flex-shrink:0}
.ins-tp-rank.r1{color:var(--gold)}
.ins-tp-rank.r2{color:var(--text2)}
.ins-tp-rank.r3{color:var(--amber)}
.ins-tp-body{flex:1;min-width:0}
.ins-tp-title{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.ins-tp-meta{font-family:var(--mono);font-size:7px;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase}
.ins-tp-val{font-family:var(--mono);font-size:13px;font-weight:700;flex-shrink:0;min-width:40px;text-align:right}
.ins-fol-sec{padding:12px 18px 14px;border-bottom:1px dotted var(--dotline)}
.ins-fol-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.ins-fol-big{font-family:var(--mono);font-size:32px;font-weight:700;color:var(--green);line-height:1}
.ins-fol-sub{font-family:var(--mono);font-size:8px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text3);margin-top:3px}
.ins-fol-total-n{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--text2);line-height:1;text-align:right}
.ins-fol-total-l{font-family:var(--mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-top:2px;text-align:right}
.ins-fol-bars{display:flex;align-items:flex-end;gap:2px;height:36px}
.ins-fol-bar-col{flex:1}
.ins-fol-bar-item{width:100%;border-radius:1px 1px 0 0;min-height:2px;cursor:pointer;transition:opacity 0.15s}
.ins-fol-bar-item:hover{opacity:0.7}
.ins-fol-insight{margin-top:8px;padding-top:8px;border-top:1px dotted var(--muted2);font-family:var(--mono);font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
.ins-fol-insight span{color:var(--green)}
.ins-agency-wrap{margin:14px 18px;border:1px dotted rgba(200,168,75,0.25);background:rgba(200,168,75,0.025)}
.ins-agency-hdr{font-family:var(--mono);font-size:7px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);padding:8px 14px;border-bottom:1px dotted rgba(200,168,75,0.15);display:flex;align-items:center;gap:5px}
.ins-agency-body{padding:12px 14px}
.ins-vel-grid{display:flex;border:1px dotted var(--muted2);margin-bottom:10px}
.ins-vel-item{flex:1;padding:10px 12px;text-align:center;border-right:1px dotted var(--muted2)}
.ins-vel-item:last-child{border-right:none}
.ins-vel-lbl{font-family:var(--mono);font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.ins-vel-val{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1}
.ins-vel-sub{font-family:var(--mono);font-size:7px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);margin-top:2px}
.ins-life-grid{display:flex;gap:8px;margin-bottom:12px}
.ins-life-item{flex:1;padding:9px 12px;border:1px dotted var(--muted2);background:var(--surface);text-align:center}
.ins-life-val{font-family:var(--mono);font-size:20px;font-weight:700;line-height:1;margin-bottom:3px}
.ins-life-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text3)}
.ins-alert{padding:11px 14px;border:1px dotted rgba(255,75,75,0.35);background:rgba(255,75,75,0.05);margin-bottom:8px}
.ins-alert:last-child{margin-bottom:0}
.ins-alert-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.18em;text-transform:uppercase;color:var(--red);margin-bottom:5px;display:flex;align-items:center;gap:4px}
.ins-alert-dot{width:4px;height:4px;border-radius:50%;background:var(--red)}
.ins-alert-title{font-size:14px;font-weight:500;color:var(--text);margin-bottom:3px}
.ins-alert-sub{font-family:var(--mono);font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);line-height:1.5}
.ins-report-sec{padding:14px 18px}
.ins-report-card{padding:14px;border:1px dotted var(--muted2);background:var(--surface);margin-bottom:8px}
.ins-rc-month{font-size:20px;font-weight:700;letter-spacing:-0.3px;margin-bottom:2px}
.ins-rc-agency{font-family:var(--mono);font-size:8px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.ins-rc-stats{display:flex;gap:0;margin-bottom:10px}
.ins-rc-stat{flex:1;border-right:1px dotted var(--muted2);padding:0 10px}
.ins-rc-stat:first-child{padding-left:0}
.ins-rc-stat:last-child{border-right:none}
.ins-rc-n{font-family:var(--mono);font-size:18px;font-weight:700;line-height:1}
.ins-rc-l{font-family:var(--mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-top:2px}
.ins-rc-rows{border-top:1px dotted var(--muted2);padding-top:10px;display:flex;flex-direction:column;gap:5px}
.ins-rc-row{font-family:var(--mono);font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text2);display:flex;gap:6px}
.ins-rc-rl{color:var(--text3);flex-shrink:0}
.ins-share-btn{width:100%;font-family:var(--mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);border:1px dotted rgba(200,168,75,0.45);background:transparent;padding:13px;cursor:pointer;transition:all 0.15s}
.ins-share-btn:hover{background:rgba(200,168,75,0.08)}
.ins-lens-row{display:flex;border-bottom:1px dotted var(--dotline);flex-shrink:0}
.ins-lens-btn{flex:1;font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;padding:9px 0;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--muted);border-bottom:2px solid transparent;border-right:1px dotted var(--muted2);transition:all 0.15s}
.ins-lens-btn:last-child{border-right:none}
.ins-lens-reach{color:var(--cyan);border-bottom-color:var(--cyan)}
.ins-lens-resonance{color:var(--purple);border-bottom-color:var(--purple)}
.ins-lens-growth{color:var(--green);border-bottom-color:var(--green)}
.ins-post-item{display:flex;align-items:flex-start;padding:11px 18px;border-bottom:1px dotted var(--muted2);cursor:pointer;transition:background 0.15s;position:relative}
.ins-post-item:hover{background:var(--surface)}
.ins-post-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:1px}
.ins-post-item.feb::before{background:var(--purple)}
.ins-post-item.mar::before{background:var(--cyan)}
.ins-pi-rank{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted);width:22px;flex-shrink:0;padding-top:2px}
.ins-pi-rank.r1{color:var(--gold)}
.ins-pi-rank.r2{color:var(--text2)}
.ins-pi-rank.r3{color:var(--amber)}
.ins-pi-body{flex:1;min-width:0}
.ins-pi-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-pi-meta{font-family:var(--mono);font-size:7px;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:5px}
.ins-pi-bar{height:2px;background:var(--muted2);border-radius:2px;overflow:hidden}
.ins-pi-bar-fill{height:100%;border-radius:2px}
.ins-pi-right{text-align:right;flex-shrink:0;min-width:52px;margin-left:10px}
.ins-pi-val{font-family:var(--mono);font-size:14px;font-weight:700;line-height:1}
.ins-pi-sub{font-family:var(--mono);font-size:8px;color:var(--text3);margin-top:2px}
.ins-month-sep{padding:8px 18px;background:var(--surface);border-bottom:1px dotted var(--muted2)}
.ins-month-sep-lbl{font-family:var(--mono);font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text3)}
.ins-ds-sec{padding:14px 18px;border-bottom:1px dotted var(--dotline)}
.ins-ds-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.ins-li-connected{padding:12px 14px;border:1px dotted rgba(10,102,194,0.4);background:rgba(10,102,194,0.06);display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ins-li-logo-badge{width:24px;height:24px;background:#0A66C2;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.ins-li-info{flex:1}
.ins-li-t1{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text2);margin-bottom:2px}
.ins-li-t2{font-family:var(--mono);font-size:7px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
.ins-csv-list{display:flex;flex-direction:column;gap:8px}
.ins-csv-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px dotted var(--muted2);background:var(--surface)}
.ins-csv-item.ins-csv-done{border-color:rgba(62,207,142,0.3)}
.ins-csv-left{display:flex;align-items:center;gap:10px}
.ins-csv-icon{width:8px;height:8px;border-radius:50%}
.ins-csv-icon.done{background:var(--green)}
.ins-csv-icon.pending{background:var(--muted2);border:1px dotted var(--muted)}
.ins-csv-name{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text2)}
.ins-csv-date{font-family:var(--mono);font-size:7px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
.ins-csv-btn{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);border:1px dotted rgba(200,168,75,0.4);background:transparent;padding:4px 10px;cursor:pointer;transition:all 0.15s}
.ins-csv-btn:hover{background:rgba(200,168,75,0.08)}
.ins-csv-btn.ins-csv-uploaded{color:var(--green);border-color:rgba(62,207,142,0.3)}
.ins-missing-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ins-missing-count{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:5px}
.ins-missing-dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.ins-missing-item{padding:10px 0;border-bottom:1px dotted var(--muted2)}
.ins-missing-item:last-child{border-bottom:none}
.ins-missing-top{display:flex;align-items:center;justify-content:space-between}
.ins-mi-date{font-family:var(--mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-bottom:3px}
.ins-mi-title{font-size:13px;font-weight:500;color:var(--text)}
.ins-mi-add-btn{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan);border:1px dotted rgba(34,211,238,0.35);background:transparent;padding:4px 10px;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0}
.ins-mi-add-btn:hover{background:rgba(34,211,238,0.06)}
.ins-mi-input-row{display:none;margin-top:6px;gap:6px}
.ins-mi-input-row.open{display:flex}
.ins-mi-url-input{flex:1;font-family:var(--mono);font-size:9px;color:var(--text2);background:var(--surface);border:1px dotted var(--muted2);outline:none;padding:6px 10px}
.ins-mi-url-input::placeholder{color:var(--muted)}
.ins-mi-save-btn{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);border:1px dotted rgba(200,168,75,0.4);background:transparent;padding:6px 10px;cursor:pointer}
.ins-card-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:500;display:none;align-items:flex-end;justify-content:center}
.ins-card-overlay.open{display:flex}
.ins-post-card{width:100%;max-width:480px;background:var(--surface);border-top:1px dotted var(--dotline);max-height:88vh;overflow-y:auto;scrollbar-width:none}
.ins-post-card::-webkit-scrollbar{display:none}
.ins-pcard-handle{width:36px;height:3px;background:var(--muted2);border-radius:2px;margin:10px auto 0}
.ins-pcard-hdr{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px 12px;border-bottom:1px dotted var(--dotline)}
.ins-pcard-date{font-family:var(--mono);font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.ins-pcard-title{font-size:16px;font-weight:600;letter-spacing:-0.2px;color:var(--text);line-height:1.2;max-width:280px}
.ins-pcard-close{font-family:var(--mono);font-size:13px;color:var(--muted);cursor:pointer;background:none;border:none;padding:2px 6px}
.ins-pcard-badge{font-family:var(--mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;padding:4px 9px;border:1px dotted;margin-top:6px;display:inline-block}
.ins-pcard-badge.top{color:var(--gold);border-color:rgba(200,168,75,0.4);background:rgba(200,168,75,0.08)}
.ins-pcard-badge.high{color:var(--green);border-color:rgba(62,207,142,0.4);background:rgba(62,207,142,0.06)}
.ins-pcard-badge.low{color:var(--red);border-color:rgba(255,75,75,0.3);background:rgba(255,75,75,0.04)}
.ins-pcard-hero{padding:16px 18px;border-bottom:1px dotted var(--dotline)}
.ins-pcard-hero-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.ins-pcard-hero-val{font-family:var(--mono);font-size:44px;font-weight:700;line-height:1;letter-spacing:-1px;color:var(--cyan)}
.ins-pcard-hero-sub{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);margin-top:3px}
.ins-pcard-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px dotted var(--dotline)}
.ins-pm{padding:12px 14px;border-right:1px dotted var(--dotline)}
.ins-pm:nth-child(3n){border-right:none}
.ins-pm:nth-child(n+4){border-top:1px dotted var(--dotline)}
.ins-pm-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.ins-pm-val{font-family:var(--mono);font-size:20px;font-weight:700;line-height:1;margin-bottom:2px}
.ins-pm-sub{font-family:var(--mono);font-size:7px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
.ins-pcard-eng{padding:14px 18px;border-bottom:1px dotted var(--dotline)}
.ins-pcard-eng-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.ins-pcard-eng-track{height:6px;background:var(--muted2);border-radius:3px;overflow:hidden;margin-bottom:6px}
.ins-pcard-eng-fill{height:100%;border-radius:3px}
.ins-pcard-eng-cmp{font-family:var(--mono);font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3)}
.ins-pcard-eng-cmp span{color:var(--text2)}
.ins-pcard-fol{padding:12px 18px 14px;border-bottom:1px dotted var(--dotline);display:flex;align-items:center;justify-content:space-between}
.ins-pcard-fol-lbl{font-family:var(--mono);font-size:7px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.ins-pcard-fol-val{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--green);line-height:1}
.ins-pcard-fol-sub{font-family:var(--mono);font-size:8px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);margin-top:3px}
.ins-pcard-fol-pct{font-family:var(--mono);font-size:32px;font-weight:700;color:var(--green);opacity:0.2}
.ins-pcard-li{margin:14px 18px;padding:10px 14px;border:1px dotted rgba(10,102,194,0.35);background:rgba(10,102,194,0.06);display:flex;align-items:center;gap:10px;cursor:pointer}
.ins-pcard-li-logo{width:20px;height:20px;background:#0A66C2;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.ins-pcard-li-text{flex:1;font-family:var(--mono);font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text2)}
.ins-pcard-li-arr{font-family:var(--mono);font-size:11px;color:var(--text3)}

/* =============================================
   LIBRARY VIEW  -  Header, Filters, Tabs, List,
   Calendar, Board, Post-Card Overlay
   ============================================= */

/* --- Header bar (row 1: title + icons) --- */
.lib-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.lib-hdr-title { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text3); margin: 0; }
.lib-hdr-right { display: flex; align-items: center; gap: 8px; }
.lib-icon-btn { background: none; border: none; padding: 6px; cursor: pointer; color: var(--muted); display: flex; align-items: center; position: relative; }
.lib-icon-btn:hover { color: var(--text); }
.lib-filter-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: absolute; top: 2px; right: 2px; }
.lib-filter-dot.active { display: block; }

/* --- View tabs (row 2: full-width, gold underline) --- */
.lib-tabs-row { display: flex; border-bottom: 1px solid var(--muted2); }
.lib-vt { flex: 1; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 0; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; text-align: center; transition: color 0.15s, border-color 0.15s; }
.lib-vt:hover { color: var(--text2); }
.lib-vt.active { color: var(--text); border-bottom-color: var(--gold); }

/* --- Active filter strip --- */
.lib-active-strip { display: none; padding: 6px 20px; overflow-x: auto; white-space: nowrap; }
.lib-active-strip.has-tags { display: flex; gap: 6px; align-items: center; }
.lib-af-tag { font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px dotted var(--muted2); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lib-af-tag span { color: var(--red); font-weight: 700; }

/* --- Filter sheet overlay --- */
.lib-filter-sheet-overlay { z-index: 200; background: rgba(0,0,0,0.55); }
.lib-filter-sheet { background: var(--bg2, #141414); border: 1px dotted var(--dotline); padding: 20px; max-width: 340px; width: 90%; margin: auto; }
.lib-fs-hdr { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.lib-fs-section { margin-bottom: 14px; }
.lib-fs-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lib-fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-fsd-chip,
.lib-fss-chip,
.lib-fsp-chip { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; padding: 7px 13px; border: 1px dotted var(--muted2); color: var(--muted); cursor: pointer; text-transform: capitalize; min-width: 80px; text-align: center; }
.lib-fsd-chip.active,
.lib-fss-chip.active,
.lib-fsp-chip.active { background: var(--surface); color: var(--text); border-color: var(--text2); }
.lib-fs-actions { display: flex; gap: 10px; margin-top: 16px; }
.lib-fs-reset { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; background: none; border: 1px dotted var(--muted2); color: var(--muted); cursor: pointer; }
.lib-fs-apply { background: transparent; color: var(--c-gold); border: 1px solid rgba(200,168,75,0.5); font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 13px; width: calc(100% - 36px); margin: 14px 18px 0; cursor: pointer; }

/* --- Search bar --- */
.lib-search-bar { width: 100%; border-bottom: 1px solid var(--dotline); background: var(--bg); }
.lib-search-input { width: 100%; padding: 8px 18px; font-family: var(--mono); font-size: 13px; color: var(--text1); background: var(--bg); border: none; border-bottom: 1px solid var(--dotline); outline: none; box-sizing: border-box; }

/* --- Custom date row --- */
.lib-fs-custom-row { display: none; gap: 8px; align-items: center; padding: 8px 0 4px; flex-wrap: wrap; }
.lib-fs-custom-row.open { display: flex; }
.lib-fs-cd-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lib-fs-cd-input { font-family: var(--mono); font-size: 10px; color: var(--text1); background: var(--bg); border: 1px solid var(--dotline); padding: 4px 8px; outline: none; }

/* --- Tab body / visibility --- */
.lib-tab-body { display: block; }
.lib-hidden { display: none !important; }

/* --- Pillar bar section (between tabs and list) --- */
.lib-pillar-bar-section { padding: 12px 20px 8px; }
.lib-pillar-bar { height: 6px; display: flex; border-radius: 3px; overflow: hidden; margin-bottom: 8px; background: var(--muted2); }
.lib-pillar-labels { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-pb-seg { height: 100%; transition: opacity 0.2s; }
.lib-pb-leadership    { background: var(--c-gold, var(--gold)); }
.lib-pb-innovation    { background: var(--c-purple, var(--purple)); }
.lib-pb-sustainability{ background: var(--c-cyan, var(--cyan)); }
.lib-pb-inclusivity   { background: #f472b6; }
.lib-pb-label { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lib-pb-dot { width: 6px; height: 6px; border-radius: 50%; }
.lib-dimmed { opacity: 0.15; }

/* =============================================
   LIST VIEW  -  Month groups, post rows, bars
   ============================================= */
.lib-month-hdr { display: flex; align-items: center; gap: 8px; padding: 14px 20px 8px; cursor: pointer; user-select: none; }
.lib-mh-arrow { font-family: var(--mono); font-size: 10px; color: var(--muted); transition: transform 0.15s; display: inline-block; }
.lib-mh-arrow.collapsed { transform: rotate(-90deg); }
.lib-mh-title { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); }
.lib-mh-counts { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.lib-mh-dot { font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 2px; }
.lib-mh-dot-pub  { color: var(--green); background: var(--green-bg); }
.lib-mh-dot-park { color: var(--amber); background: var(--amber-bg); }
.lib-mh-dot-rej  { color: var(--red); background: var(--red-bg); }
.lib-mh-grade { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text2); margin-left: 4px; }
.lib-month-content { /* collapsible wrapper */ }
.lib-month-content.collapsed { display: none; }

.lib-pace-line { display: flex; align-items: center; gap: 10px; padding: 6px 20px 8px; }
.lib-pace-bar { flex: 1; height: 1px; border-top: 1px dotted var(--muted2); }
.lib-pace-txt { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }

/* Post row */
.lib-post-row { display: flex; align-items: stretch; gap: 6px; padding: 8px 20px; margin-top: 0; margin-bottom: 0; border-bottom: 1px solid var(--dotline); cursor: pointer; transition: background 0.15s; }
.lib-post-row:hover { background: var(--surface); }
.lib-item { /* generic filterable item marker */ }

/* Colour bar */
.lib-bar { width: 4px; min-height: 100%; border-radius: 2px; flex-shrink: 0; align-self: stretch; background: var(--muted2); }
.lib-bar-pub  { background: var(--green); }
.lib-bar-park { background: var(--amber); }
.lib-bar-rej  { background: var(--red); }
.lib-bar-best { background: var(--gold); }

.lib-post-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 8px 10px; }
.lib-p-date  { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 2px; }
.lib-p-title { font-family: 'DM Sans', var(--sans); font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.lib-p-meta  { font-family: var(--mono); font-size: 7px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }

/* Right side: impressions */
.lib-p-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; margin-left: auto; }
.lib-p-imp { font-family: var(--mono); font-size: 16px; font-weight: 700; padding: 2px 6px; border-radius: 2px; flex-shrink: 0; white-space: nowrap; }
.lib-p-imp-lbl { font-family: var(--mono); font-size: 6px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lib-imp-best   { color: var(--gold); background: rgba(255,215,0,0.12); }
.lib-imp-normal { color: var(--green); background: var(--green-bg); }
.lib-imp-nodata { color: var(--muted); }
.lib-imp-park   { color: var(--amber); font-size: 9px; }
.lib-imp-rej    { color: var(--red); font-size: 9px; }

/* Reason text */
.lib-p-reason { font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; margin-top: 2px; padding: 3px 6px; border-left: 2px solid; }
.lib-reason-park { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.lib-reason-rej  { color: var(--red); border-color: var(--red); background: var(--red-bg); }

/* Star badges */
.lib-star-best { color: var(--gold); font-size: 13px; }
.lib-star-week { color: var(--gold); font-size: 10px; opacity: 0.7; }

/* Lifespan badge */
.lib-life-badge { display: inline-block; font-family: var(--mono); font-size: 7px; letter-spacing: 0.04em; padding: 1px 4px; border: 1px solid var(--muted2); border-radius: 2px; margin-left: 2px; vertical-align: middle; }
.lib-arr-fast { color: var(--green); border-color: rgba(62,207,142,0.3); }
.lib-arr-slow { color: var(--amber); border-color: rgba(245,158,11,0.3); }
.lib-arr-avg  { color: var(--muted); }

/* Wed tag */
.lib-wed-tag { font-family: var(--mono); font-size: 7px; letter-spacing: 0.06em; color: var(--gold); margin-left: 4px; }

/* Gap alert */
.lib-gap-alert { font-family: var(--mono); font-size: 9px; color: var(--red); padding: 6px 20px; letter-spacing: 0.06em; text-transform: uppercase; }

/* =============================================
   CALENDAR VIEW
   ============================================= */
.lib-cal-month-blk { margin-bottom: 24px; }
.lib-cal-month-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); }
.lib-cal-hdr-counts { display: flex; gap: 8px; font-size: 9px; }
.lib-cal-cnt-pub  { color: var(--green); }
.lib-cal-cnt-park { color: var(--amber); }
.lib-cal-cnt-rej  { color: var(--red); }

.lib-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 16px; }
.lib-cal-dlbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; }
.lib-cal-cell { min-height: 48px; background: var(--surface); border: 1px solid var(--muted2); border-radius: 3px; padding: 4px; cursor: default; transition: background 0.15s; }
.lib-cal-cell.lib-empty { background: transparent; border-color: transparent; }
.lib-cal-cell.lib-has-post { cursor: pointer; }
.lib-cal-cell.lib-c-pub1 { border-color: rgba(62,207,142,0.35); }
.lib-cal-cell.lib-c-pub2 { border-color: rgba(62,207,142,0.55); background: var(--green-bg); }
.lib-cal-cell.lib-c-park { border-color: rgba(246,166,35,0.35); }
.lib-cal-cell.lib-c-rej  { border-color: rgba(255,75,75,0.35); }
.lib-cal-cell.lib-c-best { border-color: var(--gold); background: rgba(255,215,0,0.06); }

.lib-cal-inner { display: flex; flex-direction: column; gap: 3px; }
.lib-cal-num { font-family: var(--mono); font-size: 9px; color: var(--text3); line-height: 1; }
.lib-cal-dots { display: flex; flex-wrap: wrap; gap: 2px; }
.lib-cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted2); }
.lib-dot-pub  { background: var(--green); }
.lib-dot-park { background: var(--amber); }
.lib-dot-rej  { background: var(--red); }
.lib-dot-best { background: var(--gold); }

/* Calendar pillar breakdown */
.lib-cal-pillar-wrap { padding: 16px 20px; }
.lib-cal-pillar-bar { height: 6px; display: flex; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.lib-cal-pillar-seg { height: 100%; }
.lib-cal-ps-leadership    { background: var(--cyan); }
.lib-cal-ps-innovation    { background: var(--purple); }
.lib-cal-ps-sustainability{ background: var(--green); }
.lib-cal-ps-inclusivity   { background: var(--amber); }
.lib-cal-pillar-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-cal-pl-item { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lib-cal-pl-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Calendar popup */
#lib-cal-popup { position: fixed; z-index: 400; background: #141414; border: 1px dotted var(--dotline); padding: 0; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: none; }
#lib-cal-popup.open { display: block; }
.lib-cal-popup-inner { padding: 10px 14px; }
.lib-cal-popup-hdr { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lib-cal-popup-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; cursor: pointer; }
.lib-cal-popup-row:hover { color: var(--text); }
.lib-cal-popup-title { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.lib-cal-popup-stage { font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; flex-shrink: 0; }
.lib-cal-popup-stage.lib-cal-ps-published { color: var(--green); background: var(--green-bg); }
.lib-cal-popup-stage.lib-cal-ps-parked    { color: var(--amber); background: var(--amber-bg); }
.lib-cal-popup-stage.lib-cal-ps-rejected  { color: var(--red); background: var(--red-bg); }

/* =============================================
   BOARD VIEW
   ============================================= */
#lib-tab-board { overflow-x: auto; display: block; }
#lib-board-cols { display: flex; flex-direction: row; min-width: max-content; }
.lib-board-col { width: 240px; flex-shrink: 0; margin-bottom: 20px; border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; }
.lib-board-col:last-child { border-right: none; }
.lib-board-col-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 2px solid; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); }
.lib-board-cnt { font-family: var(--mono); font-size: 9px; color: var(--muted); }

.lib-bp-row { display: flex; align-items: stretch; gap: 8px; padding: 10px 20px; margin: 0; border-bottom: 1px solid var(--dotline); cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
.lib-bp-row:hover { background: var(--surface); }
.lib-bp-bar { width: 4px; border-radius: 0; flex-shrink: 0; align-self: stretch; }
.lib-bp-bar-published { background: var(--green); }
.lib-bp-bar-parked    { background: var(--amber); }
.lib-bp-bar-rejected  { background: var(--red); }
.lib-bp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px 7px 8px; }
.lib-bp-date  { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 2px; }
.lib-bp-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.lib-bp-meta  { font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin-bottom: 2px; }
.lib-bp-stats { font-family: var(--mono); font-size: 9px; color: var(--green); margin-top: 4px; }
.lib-bp-nd    { font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 2px; }
.lib-bp-reason { font-family: var(--mono); font-size: 8px; margin-top: 3px; padding: 3px 6px; border-left: 2px solid; }
.lib-bp-reason-park { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.lib-bp-reason-rej  { color: var(--red); border-color: var(--red); background: var(--red-bg); }

/* =============================================
   LIBRARY POST-CARD OVERLAY
   ============================================= */
#lib-card-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.6); display: none; align-items: flex-end; justify-content: center; }
#lib-card-overlay.open { display: flex; }
#lib-card-overlay .lib-card-inner { width: 100%; max-width: 480px; background: var(--bg2, #141414); border-top: 2px solid var(--gold, #c8a84b); border-left: 1px solid rgba(255,255,255,0.06); border-right: 1px solid rgba(255,255,255,0.06); max-height: 88vh; overflow-y: auto; scrollbar-width: none; border-radius: 12px 12px 0 0; }
#lib-card-overlay .pc-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--muted2); margin: 10px auto 6px; }
#lib-card-overlay .pc-hdr { padding: 10px 20px 12px; border-bottom: 1px dotted var(--dotline); position: relative; }
#lib-card-overlay .pc-hdr-date { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
#lib-card-overlay .pc-hdr-title { font-size: 15px; font-weight: 600; color: var(--text); padding-right: 30px; }
#lib-card-overlay .pc-close-btn { position: absolute; top: 10px; right: 16px; background: none; border: none; font-family: var(--mono); font-size: 16px; color: var(--muted); cursor: pointer; }
#lib-card-overlay .pc-body { padding: 16px 20px; overflow-y: auto; max-height: 60vh; }
#lib-card-overlay .pc-hero { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
#lib-card-overlay .pc-hero-imp { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--text); }
#lib-card-overlay .pc-hero-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#lib-card-overlay .pc-metrics { display: flex; gap: 16px; margin-bottom: 14px; }
#lib-card-overlay .pc-metric { display: flex; flex-direction: column; gap: 2px; }
#lib-card-overlay .pc-m-val { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--text); }
#lib-card-overlay .pc-m-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#lib-card-overlay .pc-m-likes    { }
#lib-card-overlay .pc-m-comments { }
#lib-card-overlay .pc-m-eng      { }
#lib-card-overlay .pc-life { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#lib-card-overlay .pc-life-days { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.06em; white-space: nowrap; }
#lib-card-overlay .pc-life-bar { flex: 1; height: 4px; background: var(--muted2); border-radius: 2px; overflow: hidden; }
#lib-card-overlay .pc-life-fill { height: 100%; background: var(--green); border-radius: 2px; }
#lib-card-overlay .pc-nodata { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 12px; }
#lib-card-overlay .pc-reason-block { padding: 10px 14px; border-left: 3px solid; margin-bottom: 12px; }
#lib-card-overlay .pc-reason-block.pc-reason-parked   { border-color: var(--amber); background: var(--amber-bg); }
#lib-card-overlay .pc-reason-block.pc-reason-rejected  { border-color: var(--red); background: var(--red-bg); }
#lib-card-overlay .pc-reason-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
#lib-card-overlay .pc-reason-text { font-size: 12px; color: var(--text2); line-height: 1.5; }
#lib-card-overlay .pc-action-btn { width: 100%; padding: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface); border: 1px dotted var(--muted2); color: var(--text); cursor: pointer; margin-top: 8px; }
#lib-card-overlay .pc-action-btn:hover { background: var(--surface2); }