/* ============================================================
   PC THEME - Production CSS - v3.1 (page title fix)
   Drop-in design system for UM CRM redesign.
   Coexists with app.css. Use .pc-* classes on migrated pages.
   Build: 2026-05-09-23-50
   ============================================================ */

:root {
  /* Earlybird #4 (calmer palette pass): category colours muted significantly.
     These feed ~100 gradient declarations across the dashboard and module pages,
     so toning the tokens is far more effective than rewriting every gradient.
     Hues kept distinct so categories remain visually different, but saturation
     and brightness reduced to read as "professional dark UI" rather than neon. */
  --pc-leads:          #7c6ba8;   /* was #a78bfa - bright violet */
  --pc-leads-glow:     rgba(124,107,168,.18);
  --pc-sales:          #4f9ba8;   /* was #22d3ee - cyan */
  --pc-sales-glow:     rgba(79,155,168,.18);
  --pc-marketing:      #a86b8a;   /* was #f472b6 - hot pink */
  --pc-marketing-glow: rgba(168,107,138,.18);
  --pc-operations:     #b8945a;   /* was #fbbf24 - amber */
  --pc-operations-glow:rgba(184,148,90,.18);
  --pc-finance:        #4d9374;   /* was #34d399 - emerald */
  --pc-finance-glow:   rgba(77,147,116,.18);
  --pc-comms:          #5d7eb0;   /* was #60a5fa - bright blue */
  --pc-comms-glow:     rgba(93,126,176,.18);
  --pc-alerts:         #b87171;   /* was #f87171 - bright red */
  --pc-alerts-glow:    rgba(184,113,113,.18);

  --pc-grid-color:     rgba(255,255,255,.018);
  --pc-hero-glow:      rgba(255,255,255,.04);
  --pc-orb-shadow:     rgba(0,0,0,.5);

  --pc-font-head:      'Orbitron', 'Rajdhani', sans-serif;
  --pc-font-body:      'Inter', 'DM Sans', sans-serif;
  --pc-font-mono:      'JetBrains Mono', monospace;

  --pc-transition:     .2s cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  /* Earlybird #2 (light mode WCAG): category colours rebuilt to pass AA strict
     as text on white (4.5:1+). All values verified - none below 5.7:1 on bg-base. */
  --pc-leads:          #5b3da8;   /* 7.33:1 on bg-base */
  --pc-leads-glow:     rgba(91,61,168,.12);
  --pc-sales:          #1f6b78;   /* 5.72:1 */
  --pc-sales-glow:     rgba(31,107,120,.12);
  --pc-marketing:      #7a3d5a;   /* 7.43:1 */
  --pc-marketing-glow: rgba(122,61,90,.12);
  --pc-operations:     #7a5c1a;   /* 5.82:1 */
  --pc-operations-glow:rgba(122,92,26,.12);
  --pc-finance:        #1f6750;   /* 6.31:1 */
  --pc-finance-glow:   rgba(31,103,80,.12);
  --pc-comms:          #2c4f80;   /* 7.74:1 */
  --pc-comms-glow:     rgba(44,79,128,.12);
  --pc-alerts:         #8a2424;   /* 8.33:1 */
  --pc-alerts-glow:    rgba(138,36,36,.12);
  --pc-grid-color:     rgba(0,0,0,.025);
  --pc-hero-glow:      rgba(0,0,0,.05);
  --pc-orb-shadow:     rgba(0,0,0,.15);
}

@keyframes pc-pulse-glow {
  0%, 100% { opacity: .9; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.04); }
}
@keyframes pc-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}
@keyframes pc-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
}
@keyframes pc-hue-shift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(15deg); }
}

.pc-page {
  position: relative;
  min-height: 100%;
  isolation: isolate;
}
.pc-page::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--pc-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pc-grid-color) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
}
.pc-page::after {
  content: '';
  position: fixed;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pc-hero-glow) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: pc-pulse-glow 8s ease-in-out infinite;
}
.pc-page > * { position: relative; z-index: 1; }

/* HERO */
.pc-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap;
  position: relative; padding: 1rem 0;
}
.pc-hero-text { flex: 1; min-width: 0; position: relative; }
.pc-hero-text::before {
  content: ''; position: absolute; top: -8px; left: -16px;
  width: 24px; height: 24px;
  border-top: 2px solid var(--pc-sales);
  border-left: 2px solid var(--pc-sales);
}
.pc-hero-overline {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--pc-font-mono); font-size: .72rem;
  color: var(--pc-sales); letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: .85rem;
}
.pc-hero-overline::before {
  content: ''; width: 24px; height: 1px; background: var(--pc-sales);
}
.pc-hero-overline .pc-live {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .15rem .5rem;
  background: color-mix(in srgb, var(--pc-finance) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-finance) 35%, transparent);
  color: var(--pc-finance); font-size: .65rem;
}
.pc-hero-overline .pc-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pc-finance); box-shadow: 0 0 6px var(--pc-finance);
  animation: pc-flicker 1.5s infinite;
}
.pc-hero-greeting {
  font-family: var(--pc-font-head); font-size: 1.5rem;
  font-weight: 500; line-height: 1.1; letter-spacing: -.01em;
  margin: 0;
  color: var(--text-secondary, #b8b4d8);
  text-transform: none;
}
.pc-hero-name {
  font-family: var(--pc-font-head); font-size: 2.25rem;
  font-weight: 700; line-height: 1.1;
  letter-spacing: -.015em; margin: .15rem 0 0 0;
  text-transform: none;
  color: var(--text-heading, #fff);
}
.pc-hero-meta {
  display: flex; align-items: center;
  gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap;
}
.pc-hero-actions { display: flex; gap: .6rem; flex-shrink: 0; }

/* PILLS */
.pc-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem;
  font-family: var(--pc-font-mono); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase;
  position: relative;
  background: color-mix(in srgb, var(--pc-leads) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-leads) 30%, transparent);
  color: var(--pc-leads);
  text-decoration: none;
}
.pc-pill::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.pc-pill::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 6px; height: 6px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.pc-pill.sales      { background: color-mix(in srgb, var(--pc-sales) 8%, transparent); border-color: color-mix(in srgb, var(--pc-sales) 30%, transparent); color: var(--pc-sales); }
.pc-pill.marketing  { background: color-mix(in srgb, var(--pc-marketing) 8%, transparent); border-color: color-mix(in srgb, var(--pc-marketing) 30%, transparent); color: var(--pc-marketing); }
.pc-pill.finance    { background: color-mix(in srgb, var(--pc-finance) 8%, transparent); border-color: color-mix(in srgb, var(--pc-finance) 30%, transparent); color: var(--pc-finance); }
.pc-pill.operations { background: color-mix(in srgb, var(--pc-operations) 8%, transparent); border-color: color-mix(in srgb, var(--pc-operations) 30%, transparent); color: var(--pc-operations); }
.pc-pill.alerts     { background: color-mix(in srgb, var(--pc-alerts) 8%, transparent); border-color: color-mix(in srgb, var(--pc-alerts) 30%, transparent); color: var(--pc-alerts); }
.pc-pill.comms      { background: color-mix(in srgb, var(--pc-comms) 8%, transparent); border-color: color-mix(in srgb, var(--pc-comms) 30%, transparent); color: var(--pc-comms); }

/* BUTTONS */
.pc-btn {
  padding: .65rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: .78rem; font-weight: 600;
  font-family: var(--pc-font-mono); letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer; transition: all var(--pc-transition);
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pc-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--pc-leads);
}
.pc-btn.primary {
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-marketing) 50%, var(--pc-sales) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 24px var(--pc-leads-glow), inset 0 1px 0 rgba(255,255,255,.2);
  background-size: 200% 200%;
  animation: pc-hue-shift 8s ease-in-out infinite;
}
.pc-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px var(--pc-leads-glow), inset 0 1px 0 rgba(255,255,255,.3);
  color: #fff;
}

/* FOCUS BANNER */
.pc-focus-banner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.5rem 1.75rem; margin-bottom: 1.5rem;
  background:
    color-mix(in srgb, var(--pc-leads) 8%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--pc-leads) 22%, transparent);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.pc-focus-banner:hover {
  border-color: var(--pc-leads);
  transform: translateY(-1px);
}
.pc-focus-banner::before { content: none; }
.pc-focus-banner::after { content: none; }
.pc-focus-icon {
  width: 64px; height: 64px;
  background: var(--pc-leads);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
  position: relative; z-index: 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.pc-focus-content { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pc-focus-label {
  font-family: var(--pc-font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--pc-sales); font-weight: 600; margin-bottom: .35rem;
  display: flex; align-items: center; gap: .5rem;
}
.pc-focus-label::before {
  content: '◆'; color: var(--pc-sales); animation: pc-flicker 2s infinite;
}
.pc-focus-title {
  font-family: var(--pc-font-head); font-size: 1.5rem;
  font-weight: 700; color: var(--text-heading);
  margin-bottom: .35rem; letter-spacing: -.005em;
  text-transform: uppercase;
}
.pc-focus-meta {
  font-family: var(--pc-font-mono); font-size: .78rem;
  color: var(--text-secondary); letter-spacing: .04em;
}
.pc-focus-cta { flex-shrink: 0; position: relative; z-index: 1; }

.pc-focus-banner.sales {
  background: color-mix(in srgb, var(--pc-sales) 8%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--pc-sales) 22%, transparent);
}
.pc-focus-banner.sales:hover { border-color: var(--pc-sales); }
.pc-focus-banner.sales::before { content: none; }
.pc-focus-banner.sales .pc-focus-icon { background: var(--pc-sales); }
.pc-focus-banner.sales .pc-focus-label,
.pc-focus-banner.sales .pc-focus-label::before { color: var(--pc-finance); }
.pc-focus-banner.sales .pc-focus-label,
.pc-focus-banner.sales .pc-focus-label::before { color: var(--pc-finance); }

.pc-dual-focus {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 2.5rem;
}
.pc-dual-focus .pc-focus-banner { margin-bottom: 0; }

/* MULTI-MODULE STATS */
.pc-multi-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-bottom: 2.5rem;
}
.pc-mstat {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1.4rem 1.5rem;
  position: relative; overflow: hidden;
  transition: all var(--pc-transition);
  text-decoration: none; color: inherit;
  display: block;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pc-mstat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--pc-module);
  opacity: .8;
}
.pc-mstat::after { content: none; }
.pc-mstat:hover {
  transform: translateY(-2px);
  border-color: var(--pc-module);
  box-shadow: 0 8px 24px var(--pc-module-glow);
}
.pc-mstat-label {
  font-family: var(--pc-font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.pc-mstat-label::before {
  content: ''; width: 4px; height: 4px;
  background: var(--pc-module); border-radius: 50%;
  box-shadow: 0 0 6px var(--pc-module);
}
.pc-mstat-value {
  font-family: var(--pc-font-head); font-size: 2.6rem;
  font-weight: 700; letter-spacing: -.025em;
  color: var(--text-heading); line-height: 1;
  margin-bottom: .5rem;
}
.pc-mstat-sub {
  font-family: var(--pc-font-mono); font-size: .72rem;
  color: var(--text-muted); letter-spacing: .04em;
}
.pc-mstat-trend { color: var(--pc-finance); }
.pc-mstat-trend::before { content: '▲ '; }
.pc-mstat-trend.down { color: var(--pc-alerts); }
.pc-mstat-trend.down::before { content: '▼ '; }

.pc-mstat.leads      { --pc-module: var(--pc-leads);      --pc-module-glow: var(--pc-leads-glow); }
.pc-mstat.sales      { --pc-module: var(--pc-sales);      --pc-module-glow: var(--pc-sales-glow); }
.pc-mstat.marketing  { --pc-module: var(--pc-marketing);  --pc-module-glow: var(--pc-marketing-glow); }
.pc-mstat.operations { --pc-module: var(--pc-operations); --pc-module-glow: var(--pc-operations-glow); }
.pc-mstat.finance    { --pc-module: var(--pc-finance);    --pc-module-glow: var(--pc-finance-glow); }
.pc-mstat.comms      { --pc-module: var(--pc-comms);      --pc-module-glow: var(--pc-comms-glow); }
.pc-mstat.alerts     { --pc-module: var(--pc-alerts);     --pc-module-glow: var(--pc-alerts-glow); }

/* SECTION HEAD */
.pc-section-head {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin: 2rem 0 1.5rem; flex-wrap: wrap; gap: 1rem;
  position: relative; padding-left: 1.25rem;
}
.pc-section-head::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--pc-sales), var(--pc-leads), var(--pc-marketing));
}
.pc-section-title {
  font-family: var(--pc-font-head); font-size: 1.4rem;
  font-weight: 700; letter-spacing: .02em;
  color: var(--text-heading); text-transform: uppercase;
}
.pc-section-link {
  font-family: var(--pc-font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--pc-transition);
}
.pc-section-link:hover { color: var(--pc-leads); }

/* PIPELINE STAGES */
.pc-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-bottom: 2.5rem;
}
.pc-stage {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1.2rem 1.4rem;
  position: relative; overflow: hidden;
  transition: all var(--pc-transition);
  text-decoration: none; color: inherit;
  display: block;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pc-stage::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--pc-module);
}
.pc-stage::after { content: none; }
.pc-stage:hover {
  transform: translateY(-2px);
  border-color: var(--pc-module);
  box-shadow: 0 6px 20px var(--pc-module-glow);
}
.pc-stage-label {
  font-family: var(--pc-font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--pc-module); font-weight: 600; margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem;
}
.pc-stage-label::before {
  content: ''; width: 4px; height: 4px;
  background: var(--pc-module); border-radius: 50%;
}
.pc-stage-value {
  font-family: var(--pc-font-head); font-size: 2.2rem;
  font-weight: 700; letter-spacing: -.025em;
  color: var(--text-heading); line-height: 1;
  margin-bottom: .35rem;
}
.pc-stage-sub {
  font-family: var(--pc-font-mono); font-size: .7rem;
  color: var(--text-muted); letter-spacing: .04em;
}
.pc-stage.s-new        { --pc-module: var(--pc-leads);      --pc-module-glow: var(--pc-leads-glow); }
.pc-stage.s-contacted  { --pc-module: var(--pc-comms);      --pc-module-glow: var(--pc-comms-glow); }
.pc-stage.s-interested { --pc-module: var(--pc-sales);      --pc-module-glow: var(--pc-sales-glow); }
.pc-stage.s-proposal   { --pc-module: var(--pc-operations); --pc-module-glow: var(--pc-operations-glow); }
.pc-stage.s-follow     { --pc-module: var(--pc-marketing);  --pc-module-glow: var(--pc-marketing-glow); }
.pc-stage.s-won        { --pc-module: var(--pc-finance);    --pc-module-glow: var(--pc-finance-glow); }

/* CONTACT CARDS (rarity) */
.pc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.pc-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 95%, transparent) 0%, var(--bg-base) 100%);
  border: 1px solid var(--border);
  padding: 1.4rem;
  position: relative; overflow: hidden;
  transition: all var(--pc-transition);
  display: flex; flex-direction: column; gap: 1.1rem;
  cursor: pointer; text-decoration: none; color: inherit;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.pc-card::before {
  content: ''; position: absolute;
  top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .4;
}
.pc-card:hover {
  transform: translateY(-3px);
  border-color: currentColor;
}
.pc-card:hover::before { opacity: 1; }

.pc-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; height: 80px;
  position: relative;
}
.pc-card-orb {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pc-font-head); font-size: 1.4rem;
  font-weight: 900; color: #fff; letter-spacing: .04em;
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-marketing) 100%);
  text-shadow: 0 0 12px var(--pc-orb-shadow);
}
.pc-card-orb::after {
  content: ''; position: absolute; inset: -8px;
  background: inherit; filter: blur(20px);
  opacity: .5; z-index: -2;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.pc-rarity {
  font-family: var(--pc-font-mono); font-size: .68rem;
  font-weight: 700; letter-spacing: .2em;
  padding: .35rem .7rem;
  text-transform: uppercase;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  position: relative;
}
.pc-rarity::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.pc-rarity::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 6px; height: 6px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.pc-card.rarity-legendary { color: var(--pc-operations); border-color: color-mix(in srgb, var(--pc-operations) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc-operations) 12%, var(--bg-card)) 0%, var(--bg-base) 100%); }
.pc-card.rarity-legendary .pc-rarity { color: var(--pc-operations); background: color-mix(in srgb, var(--pc-operations) 10%, transparent); border-color: color-mix(in srgb, var(--pc-operations) 40%, transparent); }
.pc-card.rarity-legendary .pc-card-orb { background: linear-gradient(135deg, var(--pc-operations) 0%, var(--pc-marketing) 100%); }
.pc-card.rarity-legendary:hover { box-shadow: 0 8px 32px var(--pc-operations-glow); }

.pc-card.rarity-mythic { color: var(--pc-marketing); border-color: color-mix(in srgb, var(--pc-marketing) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc-marketing) 12%, var(--bg-card)) 0%, var(--bg-base) 100%); }
.pc-card.rarity-mythic .pc-rarity { color: var(--pc-marketing); background: color-mix(in srgb, var(--pc-marketing) 10%, transparent); border-color: color-mix(in srgb, var(--pc-marketing) 40%, transparent); }
.pc-card.rarity-mythic .pc-card-orb { background: linear-gradient(135deg, var(--pc-marketing) 0%, var(--pc-leads) 100%); }
.pc-card.rarity-mythic:hover { box-shadow: 0 8px 32px var(--pc-marketing-glow); }

.pc-card.rarity-epic { color: var(--pc-leads); border-color: color-mix(in srgb, var(--pc-leads) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc-leads) 12%, var(--bg-card)) 0%, var(--bg-base) 100%); }
.pc-card.rarity-epic .pc-rarity { color: var(--pc-leads); background: color-mix(in srgb, var(--pc-leads) 10%, transparent); border-color: color-mix(in srgb, var(--pc-leads) 40%, transparent); }
.pc-card.rarity-epic .pc-card-orb { background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-comms) 100%); }
.pc-card.rarity-epic:hover { box-shadow: 0 8px 32px var(--pc-leads-glow); }

.pc-card.rarity-rare { color: var(--pc-sales); border-color: color-mix(in srgb, var(--pc-sales) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sales) 12%, var(--bg-card)) 0%, var(--bg-base) 100%); }
.pc-card.rarity-rare .pc-rarity { color: var(--pc-sales); background: color-mix(in srgb, var(--pc-sales) 10%, transparent); border-color: color-mix(in srgb, var(--pc-sales) 40%, transparent); }
.pc-card.rarity-rare .pc-card-orb { background: linear-gradient(135deg, var(--pc-sales) 0%, var(--pc-comms) 100%); }
.pc-card.rarity-rare:hover { box-shadow: 0 8px 32px var(--pc-sales-glow); }

.pc-card.rarity-common { color: var(--pc-finance); border-color: color-mix(in srgb, var(--pc-finance) 25%, transparent); }
.pc-card.rarity-common .pc-rarity { color: var(--pc-finance); background: color-mix(in srgb, var(--pc-finance) 10%, transparent); border-color: color-mix(in srgb, var(--pc-finance) 35%, transparent); }
.pc-card.rarity-common .pc-card-orb { background: linear-gradient(135deg, var(--pc-finance) 0%, var(--pc-sales) 100%); }

.pc-card-meta {
  font-family: var(--pc-font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: currentColor; opacity: .8; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
.pc-card-meta::before { content: ''; width: 8px; height: 1px; background: currentColor; }
.pc-card-title {
  font-family: var(--pc-font-head); font-size: 1.2rem;
  font-weight: 700; letter-spacing: -.005em;
  color: var(--text-primary); margin: .35rem 0 0 0;
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2;
  line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: uppercase;
}
.pc-card-progress { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.pc-card-pct { font-family: var(--pc-font-head); font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; color: var(--text-primary); }
.pc-card-status { font-family: var(--pc-font-mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: currentColor; opacity: .85; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.pc-card-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pc-flicker 2s infinite; }
.pc-card-bar { height: 3px; background: var(--bg-elevated); overflow: hidden; position: relative; }
.pc-card-bar > span { display: block; height: 100%; background: linear-gradient(90deg, currentColor, currentColor 70%, color-mix(in srgb, currentColor 30%, white)); box-shadow: 0 0 8px currentColor; }
.pc-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.pc-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; flex: 1; min-width: 0; }
.pc-card-stat-val { font-family: var(--pc-font-mono); font-size: .9rem; font-weight: 700; color: var(--text-primary); letter-spacing: -.005em; line-height: 1; }
.pc-card-stat-lbl { font-family: var(--pc-font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .15em; color: var(--text-muted); font-weight: 600; margin-top: .4rem; }
.pc-card-score { width: 56px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; font-family: var(--pc-font-head); font-weight: 900; font-size: 1.1rem; color: #fff; letter-spacing: -.02em; }
.pc-card-score::before { content: ''; position: absolute; inset: 0; background: currentColor; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: -1; opacity: .25; }
.pc-card-score::after { content: ''; position: absolute; inset: 0; border: 1px solid currentColor; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: -1; opacity: .8; }

/* PANEL */
.pc-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1.5rem;
  position: relative;
  margin-bottom: 1.5rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.pc-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  opacity: .5;
}
.pc-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 1rem;
}
.pc-panel-title {
  font-family: var(--pc-font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--pc-leads); font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
.pc-panel-title::before {
  content: ''; width: 6px; height: 6px;
  background: var(--pc-leads); border-radius: 50%;
  box-shadow: 0 0 6px var(--pc-leads);
}
.pc-panel-meta { font-family: var(--pc-font-mono); font-size: .7rem; color: var(--text-muted); }

.pc-panel.leads      .pc-panel-title { color: var(--pc-leads); }
.pc-panel.leads      .pc-panel-title::before { background: var(--pc-leads); box-shadow: 0 0 6px var(--pc-leads); }
.pc-panel.sales      .pc-panel-title { color: var(--pc-sales); }
.pc-panel.sales      .pc-panel-title::before { background: var(--pc-sales); box-shadow: 0 0 6px var(--pc-sales); }
.pc-panel.marketing  .pc-panel-title { color: var(--pc-marketing); }
.pc-panel.marketing  .pc-panel-title::before { background: var(--pc-marketing); box-shadow: 0 0 6px var(--pc-marketing); }
.pc-panel.operations .pc-panel-title { color: var(--pc-operations); }
.pc-panel.operations .pc-panel-title::before { background: var(--pc-operations); box-shadow: 0 0 6px var(--pc-operations); }
.pc-panel.finance    .pc-panel-title { color: var(--pc-finance); }
.pc-panel.finance    .pc-panel-title::before { background: var(--pc-finance); box-shadow: 0 0 6px var(--pc-finance); }
.pc-panel.comms      .pc-panel-title { color: var(--pc-comms); }
.pc-panel.comms      .pc-panel-title::before { background: var(--pc-comms); box-shadow: 0 0 6px var(--pc-comms); }
.pc-panel.alerts     .pc-panel-title { color: var(--pc-alerts); }
.pc-panel.alerts     .pc-panel-title::before { background: var(--pc-alerts); box-shadow: 0 0 6px var(--pc-alerts); }

/* ACTIVITY STREAM */
.pc-stream-row {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.pc-stream-row:last-child { border-bottom: 0; }
.pc-stream-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.pc-stream-row.leads .pc-stream-icon      { background: var(--pc-leads); }
.pc-stream-row.sales .pc-stream-icon      { background: var(--pc-sales); }
.pc-stream-row.marketing .pc-stream-icon  { background: var(--pc-marketing); }
.pc-stream-row.operations .pc-stream-icon { background: var(--pc-operations); }
.pc-stream-row.finance .pc-stream-icon    { background: var(--pc-finance); }
.pc-stream-row.comms .pc-stream-icon      { background: var(--pc-comms); }
.pc-stream-row.alerts .pc-stream-icon     { background: var(--pc-alerts); }
.pc-stream-content { flex: 1; min-width: 0; }
.pc-stream-title { font-size: .82rem; color: var(--text-primary); font-weight: 500; margin-bottom: .15rem; }
.pc-stream-title strong { color: var(--text-heading); font-weight: 600; }
.pc-stream-meta { font-family: var(--pc-font-mono); font-size: .68rem; color: var(--text-muted); letter-spacing: .05em; }

/* TASK / APT LIST ROWS */
.pc-list-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.pc-list-row:last-child { border-bottom: 0; }
.pc-list-time {
  font-family: var(--pc-font-mono); font-size: .8rem;
  color: var(--pc-comms); font-weight: 700;
  min-width: 56px;
  letter-spacing: .04em;
}
.pc-list-content { flex: 1; min-width: 0; }
.pc-list-title { font-size: .85rem; color: var(--text-primary); font-weight: 500; }
.pc-list-meta { font-family: var(--pc-font-mono); font-size: .7rem; color: var(--text-muted); margin-top: .15rem; letter-spacing: .04em; }
.pc-list-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: .35rem .65rem;
  font-family: var(--pc-font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: all var(--pc-transition);
  text-decoration: none;
  flex-shrink: 0;
}
.pc-list-action:hover { border-color: var(--pc-leads); color: var(--pc-leads); }

/* DUAL COLUMN LAYOUT */
.pc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.pc-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

/* EMPTY STATE */
.pc-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-family: var(--pc-font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .pc-grid-2, .pc-grid-3, .pc-dual-focus { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pc-hero { flex-direction: column; }
  .pc-hero-greeting { font-size: 1.8rem; }
  .pc-hero-name { font-size: 2.5rem; }
  .pc-hero-actions { width: 100%; }
  .pc-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   SIDEBAR + TOPBAR OVERRIDES - v3
   Category colour cascade: each section colours its items.
   Fancier hover effects: holographic shimmer, glow pulse, perimeter trace.
   ============================================================ */

/* ── EXTRA ANIMATIONS ─────────────────────────────────── */
@keyframes pc-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pc-glow-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--pc-cat-glow), 2px 0 8px var(--pc-cat-glow); }
  50% { box-shadow: 0 0 16px var(--pc-cat-glow), 2px 0 16px var(--pc-cat-glow); }
}
@keyframes pc-icon-bloom {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px var(--pc-cat-glow)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px var(--pc-cat)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px var(--pc-cat-glow)); }
}
@keyframes pc-trace {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

/* ── SIDEBAR BASE ──────────────────────────────────────── */
.sidebar {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, color-mix(in srgb, var(--pc-leads) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, color-mix(in srgb, var(--pc-marketing) 18%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #060614 0%, #0a0a1f 50%, #060614 100%) !important;
  border-right: 1px solid color-mix(in srgb, var(--pc-leads) 25%, transparent) !important;
  box-shadow:
    4px 0 32px rgba(0,0,0,.7),
    inset -1px 0 0 color-mix(in srgb, var(--pc-leads) 14%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--pc-sales) 10%, transparent) !important;
  position: fixed;
  overflow: hidden;
}
.sidebar::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--pc-leads) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pc-leads) 4%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: .6;
  mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
}
.sidebar::after {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pc-leads) 28%, transparent) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  animation: pc-pulse-glow 10s ease-in-out infinite;
}
[data-theme="light"] .sidebar {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, color-mix(in srgb, var(--pc-leads) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, color-mix(in srgb, var(--pc-marketing) 8%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #f8f7fd 0%, #ffffff 50%, #f8f7fd 100%) !important;
  border-right-color: color-mix(in srgb, var(--pc-leads) 22%, transparent) !important;
  box-shadow:
    4px 0 24px rgba(0,0,0,.06),
    inset -1px 0 0 color-mix(in srgb, var(--pc-leads) 12%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--pc-sales) 8%, transparent) !important;
}
.sidebar > * { position: relative; z-index: 1; }

/* ── HEADER ────────────────────────────────────────────── */
.sidebar-header {
  border-bottom: 1px solid color-mix(in srgb, var(--pc-leads) 20%, transparent) !important;
  padding: 1.1rem 1rem !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pc-leads) 10%, transparent) 0%, transparent 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--pc-sales) 8%, transparent) 0%, transparent 50%) !important;
  position: relative;
  min-height: 70px !important;
}
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--pc-leads) 0%,
    var(--pc-sales) 30%,
    var(--pc-marketing) 60%,
    var(--pc-operations) 100%);
  opacity: .7;
  filter: blur(.5px);
}
.sidebar-header::before {
  content: 'LIVE';
  position: absolute;
  top: 1.1rem; right: 1rem;
  font-family: var(--pc-font-mono);
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--pc-finance);
  padding: .12rem .4rem .12rem .85rem;
  background: color-mix(in srgb, var(--pc-finance) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-finance) 35%, transparent);
  font-weight: 700;
  z-index: 2;
}
/* When sidebar is collapsed there's no room for the LIVE pill -
   it would overlap the logo. Hide it in collapsed mode. */
.sidebar.collapsed .sidebar-header::before { display: none; }
.sidebar-header > .sidebar-toggle {
  position: relative;
}
.sidebar-header > .sidebar-toggle::before {
  content: '';
  position: absolute;
  top: -2px; left: -10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pc-finance);
  box-shadow: 0 0 8px var(--pc-finance);
  animation: pc-flicker 1.5s infinite;
}
.logo-primary {
  font-family: var(--pc-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-sales) 50%, var(--pc-marketing) 100%) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: pc-hue-shift 8s ease-in-out infinite;
  font-size: 1.05rem !important;
}
.logo-secondary {
  font-family: var(--pc-font-mono) !important;
  letter-spacing: .25em !important;
  color: var(--text-muted) !important;
  font-size: .58rem !important;
}
.sidebar-toggle {
  color: var(--text-muted) !important;
  border-radius: 0 !important;
  padding: 4px !important;
  transition: all var(--pc-transition) !important;
}
.sidebar-toggle:hover {
  color: var(--pc-leads) !important;
  filter: drop-shadow(0 0 4px var(--pc-leads-glow));
}

/* ── COMPANY SWITCHER ──────────────────────────────────── */
.company-switcher {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 10%, transparent) 0%, transparent 100%),
    var(--bg-elevated) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 32%, transparent) !important;
  border-radius: 0 !important;
  margin: .65rem .8rem !important;
  padding: .7rem .85rem .7rem 1rem !important;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  overflow: hidden;
}
.company-switcher::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pc-leads), var(--pc-sales), var(--pc-marketing));
  box-shadow: 2px 0 12px color-mix(in srgb, var(--pc-leads) 45%, transparent);
}
.company-switcher::after {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 40px; height: 40px;
  background: radial-gradient(circle, var(--pc-leads-glow) 0%, transparent 70%);
  pointer-events: none;
}
.cs-label {
  font-family: var(--pc-font-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .2em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.cs-label::before {
  content: '◆';
  color: var(--pc-sales);
  font-size: .55rem;
}
.cs-value {
  font-family: var(--pc-font-mono) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--pc-leads) !important;
  letter-spacing: .04em !important;
  margin-top: .1rem;
}

/* ── CATEGORY → COLOUR MAPPING ─────────────────────────── */
/* This sets --pc-cat / --pc-cat-glow at each scope. CSS cascades it down. */
[data-cat="main"]               { --pc-cat: var(--pc-leads);      --pc-cat-glow: var(--pc-leads-glow); }
[data-cat="getting-started"]    { --pc-cat: var(--pc-sales);      --pc-cat-glow: var(--pc-sales-glow); }
[data-cat="sales-crm"]          { --pc-cat: var(--pc-leads);      --pc-cat-glow: var(--pc-leads-glow); }
[data-cat="operations"]         { --pc-cat: var(--pc-finance);    --pc-cat-glow: var(--pc-finance-glow); }
[data-cat="communications"]     { --pc-cat: var(--pc-operations); --pc-cat-glow: var(--pc-operations-glow); }
[data-cat="marketing"]          { --pc-cat: var(--pc-marketing);  --pc-cat-glow: var(--pc-marketing-glow); }
[data-cat="content-docs"]       { --pc-cat: var(--pc-sales);      --pc-cat-glow: var(--pc-sales-glow); }
[data-cat="compliance"]         { --pc-cat: var(--pc-alerts);     --pc-cat-glow: var(--pc-alerts-glow); }
[data-cat="reports"]            { --pc-cat: var(--pc-comms);      --pc-cat-glow: var(--pc-comms-glow); }
[data-cat="integrations"]       { --pc-cat: var(--pc-sales);      --pc-cat-glow: var(--pc-sales-glow); }
[data-cat="account"]            { --pc-cat: var(--pc-marketing);  --pc-cat-glow: var(--pc-marketing-glow); }
[data-cat="settings"]           { --pc-cat: var(--pc-leads);      --pc-cat-glow: var(--pc-leads-glow); }
[data-cat="other"]              { --pc-cat: var(--pc-leads);      --pc-cat-glow: var(--pc-leads-glow); }

/* Fallback for items not in any category */
.nav-item:not([data-cat]) {
  --pc-cat: var(--pc-leads);
  --pc-cat-glow: var(--pc-leads-glow);
}

/* ── NAV ──────────────────────────────────────────────── */
.sidebar-nav {
  padding: .25rem 0 1rem !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-leads) 35%, transparent) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--pc-leads) 35%, transparent);
}

/* ── CATEGORY HEADER - shows in own colour ─────────────── */
.nav-cat,
.sidebar-nav > div[style*="text-transform:uppercase"] {
  font-family: var(--pc-font-mono) !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .25em !important;
  padding: 1.25rem 1rem .5rem 1.1rem !important;
  position: relative;
  display: flex !important;
  align-items: center;
  gap: .5rem;
  text-transform: uppercase;
  color: var(--pc-cat, var(--pc-leads)) !important;
}
.nav-cat::before,
.sidebar-nav > div[style*="text-transform:uppercase"]::before {
  content: '';
  width: 5px; height: 5px;
  background: currentColor;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.nav-cat::after,
.sidebar-nav > div[style*="text-transform:uppercase"]::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: .35;
}

/* ── NAV ITEMS - inherit cat colour via --pc-cat ────────── */
.nav-item {
  height: 38px !important;
  padding: 0 .9rem 0 1.1rem !important;
  margin: 1px .65rem !important;
  border-radius: 0 !important;
  color: var(--text-secondary) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  position: relative;
  transition: all var(--pc-transition) !important;
  overflow: hidden;
  /* DEFAULT subtle background tint in category colour */
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc-cat) 4%, transparent) 0%, transparent 60%) !important;
}
/* Coloured icon-side pip (always visible) */
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--pc-cat);
  opacity: .35;
  transition: all var(--pc-transition);
  z-index: 0;
}
/* Scanning highlight on hover - sweeps left to right in cat colour */
.nav-item::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; bottom: 0;
  width: 60%;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--pc-cat) 18%, transparent),
    transparent);
  transition: left .55s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}
.nav-item:hover {
  color: var(--text-heading) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pc-cat) 18%, transparent) 0%,
      color-mix(in srgb, var(--pc-cat) 6%, transparent) 60%,
      transparent 100%) !important;
  padding-left: 1.4rem !important;
}
.nav-item:hover::before {
  width: 3px;
  top: 0; bottom: 0;
  opacity: 1;
  box-shadow: 0 0 10px var(--pc-cat-glow), 2px 0 8px var(--pc-cat-glow);
}
.nav-item:hover::after { left: 100%; }
.nav-item:hover .nav-icon {
  color: var(--pc-cat) !important;
  animation: pc-icon-bloom .5s ease-out;
}
.nav-item:hover .nav-label {
  background: linear-gradient(90deg,
    var(--text-heading) 0%,
    var(--pc-cat) 50%,
    var(--text-heading) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pc-shimmer 1.5s linear infinite;
}

/* ACTIVE state - permanent strong cat colour */
.nav-item.active {
  color: var(--text-heading) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pc-cat) 28%, transparent) 0%,
      color-mix(in srgb, var(--pc-cat) 10%, transparent) 50%,
      color-mix(in srgb, var(--pc-cat) 2%, transparent) 100%) !important;
  font-weight: 600 !important;
}
.nav-item.active::before {
  width: 4px;
  top: 0; bottom: 0;
  opacity: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pc-cat) 80%, white),
    var(--pc-cat));
  box-shadow:
    0 0 16px var(--pc-cat),
    2px 0 12px var(--pc-cat-glow),
    4px 0 24px var(--pc-cat-glow);
  animation: pc-glow-pulse 3s ease-in-out infinite;
}
.nav-item.active .nav-icon {
  color: var(--pc-cat) !important;
  filter: drop-shadow(0 0 8px var(--pc-cat-glow));
}
.nav-active-bar { display: none !important; }

.nav-icon {
  width: 18px !important;
  color: color-mix(in srgb, var(--pc-cat) 60%, var(--text-muted));
  transition: all var(--pc-transition);
  position: relative;
  z-index: 1;
}
.nav-label {
  position: relative;
  z-index: 1;
  transition: all var(--pc-transition);
}

/* Nav badges - now use category colour */
.nav-item span[style*="border-radius:99px"] {
  border-radius: 0 !important;
  background: var(--pc-alerts) !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .55rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: .2rem .45rem !important;
  box-shadow: 0 0 10px var(--pc-alerts-glow);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px));
  position: relative;
  z-index: 1;
}

/* ── SIDEBAR FOOTER (user card) ─────────────────────────── */
.sidebar-footer {
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--pc-marketing) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pc-leads) 8%, transparent) 100%) !important;
  border-top: 1px solid color-mix(in srgb, var(--pc-leads) 20%, transparent) !important;
  padding: .85rem !important;
  position: relative;
}
.sidebar-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--pc-marketing) 0%,
    var(--pc-leads) 50%,
    var(--pc-sales) 100%);
  opacity: .6;
  filter: blur(.5px);
}
.user-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 14%, transparent) 0%, transparent 80%),
    var(--bg-elevated) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 28%, transparent) !important;
  border-radius: 0 !important;
  padding: .65rem .75rem .65rem .8rem !important;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  overflow: hidden;
}
.user-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pc-leads), var(--pc-sales));
  box-shadow: 2px 0 8px color-mix(in srgb, var(--pc-leads) 35%, transparent);
}
.user-card::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  background: var(--pc-finance);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--pc-finance), 0 0 16px var(--pc-finance-glow);
  animation: pc-flicker 1.5s infinite;
}
.user-card .avatar {
  background: linear-gradient(135deg, var(--pc-leads), var(--pc-marketing)) !important;
  border-radius: 0 !important;
  font-family: var(--pc-font-head) !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  letter-spacing: .04em !important;
  box-shadow:
    0 0 16px var(--pc-leads-glow),
    inset 0 0 8px rgba(255,255,255,.15) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  width: 34px !important;
  height: 34px !important;
}
.user-card .user-name {
  font-family: var(--pc-font-body) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  color: var(--text-heading) !important;
}
.user-card .user-role {
  font-family: var(--pc-font-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--pc-sales) !important;
  font-weight: 700 !important;
}
.user-card .logout-btn {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--pc-alerts) 35%, transparent) !important;
  color: var(--pc-alerts) !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.user-card .logout-btn:hover {
  background: color-mix(in srgb, var(--pc-alerts) 14%, transparent) !important;
  box-shadow: 0 0 12px var(--pc-alerts-glow);
}

/* ── COLLAPSED-HANDLE ───────────────────────────────────── */
.sidebar-collapsed-handle {
  background: var(--bg-elevated) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 35%, transparent) !important;
  color: var(--pc-leads) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px var(--pc-leads-glow);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.sidebar-collapsed-handle:hover {
  background: var(--pc-leads) !important;
  color: #fff !important;
  border-color: var(--pc-leads) !important;
  box-shadow: 0 4px 28px var(--pc-leads-glow);
}

/* ============================================================
   TOPBAR (unchanged from v2)
   ============================================================ */
.topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 95%, transparent) 0%, color-mix(in srgb, var(--bg-base) 80%, transparent) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-leads) 20%, transparent) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--pc-leads) 12%, transparent),
    0 4px 24px rgba(0,0,0,.4) !important;
  position: sticky !important;
  padding: 0 1.5rem !important;
}
.topbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px; width: 30%;
  background: linear-gradient(90deg, transparent, var(--pc-sales), var(--pc-leads), transparent);
  filter: blur(.5px);
}
[data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,247,253,.85) 100%) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--pc-leads) 12%, transparent),
    0 4px 16px rgba(0,0,0,.05) !important;
}
/* PAGE TITLE - bulletproof: solid colour, no background-clip tricks */
.topbar .page-title,
header.topbar h1.page-title,
.topbar .topbar-left .page-title {
  font-family: var(--pc-font-head) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--text-heading) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-heading) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: 0 0 12px var(--pc-leads-glow);
}

/* SAFETY: Catch any topbar element that might be rendering white-on-white */
.topbar input[type="text"],
.topbar .topbar-left > *:not(.mobile-menu-btn) {
  color: var(--text-heading);
}
.topbar input[type="text"]::placeholder {
  color: var(--text-muted) !important;
}
.mobile-menu-btn {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  padding: 6px 8px !important;
  transition: all var(--pc-transition) !important;
}
.mobile-menu-btn:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
}
#globalSearchInput {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .75rem !important;
  letter-spacing: .04em !important;
  padding: .35rem .8rem .35rem 1.85rem !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
#globalSearchInput:focus {
  border-color: var(--pc-sales) !important;
  background: color-mix(in srgb, var(--pc-sales) 5%, var(--bg-elevated)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-sales) 25%, transparent) !important;
}
#globalSearchWrap kbd {
  font-family: var(--pc-font-mono) !important;
  border-radius: 0 !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  padding: .1rem .35rem !important;
  font-size: .6rem !important;
}
#notifBtn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  transition: all var(--pc-transition) !important;
}
#notifBtn:hover {
  border-color: var(--pc-comms) !important;
  color: var(--pc-comms) !important;
  background: color-mix(in srgb, var(--pc-comms) 8%, transparent) !important;
  filter: drop-shadow(0 0 4px var(--pc-comms-glow));
}
#notifBadge {
  border-radius: 0 !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .55rem !important;
  letter-spacing: .04em !important;
  background: var(--pc-alerts) !important;
  box-shadow: 0 0 6px var(--pc-alerts-glow);
  clip-path: polygon(0 0, calc(100% - 2px) 0, 100% 2px, 100% 100%, 2px 100%, 0 calc(100% - 2px));
}
#themeToggleBtn {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  width: 34px !important;
  height: 34px !important;
  transition: all var(--pc-transition) !important;
}
#themeToggleBtn:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
  background: color-mix(in srgb, var(--pc-leads) 8%, transparent) !important;
  filter: drop-shadow(0 0 4px var(--pc-leads-glow));
}
.topbar-time {
  font-family: var(--pc-font-mono) !important;
  font-size: .72rem !important;
  letter-spacing: .04em !important;
  color: var(--text-muted) !important;
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  background: var(--bg-elevated);
}
.topbar-right > div[style*="rgba(139,92,246,.12)"] {
  background: color-mix(in srgb, var(--pc-leads) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 35%, transparent) !important;
  border-radius: 0 !important;
  padding: .3rem .65rem !important;
  position: relative;
}
.topbar-right select {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .72rem !important;
  letter-spacing: .04em !important;
  padding: .35rem .55rem !important;
  color: var(--text-primary) !important;
  cursor: pointer;
  transition: all var(--pc-transition) !important;
}
.topbar-right select:focus,
.topbar-right select:hover {
  border-color: var(--pc-leads) !important;
  outline: none !important;
}

/* ============================================================
   PAGE CONTENT - tactical grid
   ============================================================ */
.main-wrap {
  position: relative;
}
.main-wrap::before {
  content: '';
  position: fixed;
  top: 0; left: var(--sidebar-w, 220px); right: 0; bottom: 0;
  background-image:
    linear-gradient(var(--pc-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pc-grid-color) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
}
.sidebar.collapsed ~ .main-wrap::before {
  left: var(--sidebar-collapsed, 64px);
}
.main-wrap > *:not(.topbar) { position: relative; z-index: 1; }
/* Topbar is chrome and needs to sit above page content for sticky to work visually */
.main-wrap > .topbar { position: sticky; top: 0; z-index: 500; background: var(--bg-surface, #0e0e24); }


/* ============================================================
   CONTACTS LIST + GENERIC LIST PATTERNS
   .pc-status-tabs, .pc-filter-panel, .pc-table-panel, .pc-bulk-bar,
   .pc-stage-badge, .pc-temp-badge, .pc-score, .pc-pagination,
   .pc-modal, .pc-input, .pc-label
   ============================================================ */

/* STATUS TABS - clipped buttons in module colours */
.pc-status-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.pc-status-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-family: var(--pc-font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all var(--pc-transition);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.pc-status-tab:hover {
  color: var(--text-heading);
  border-color: var(--pc-tab-color, var(--pc-leads));
}
.pc-status-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--pc-tab-color, var(--pc-leads)), color-mix(in srgb, var(--pc-tab-color, var(--pc-leads)) 75%, var(--pc-marketing)));
  border-color: transparent;
  box-shadow: 0 2px 12px var(--pc-tab-glow, var(--pc-leads-glow));
}
.pc-status-tab.leads      { --pc-tab-color: var(--pc-leads);      --pc-tab-glow: var(--pc-leads-glow); }
.pc-status-tab.sales      { --pc-tab-color: var(--pc-sales);      --pc-tab-glow: var(--pc-sales-glow); }
.pc-status-tab.marketing  { --pc-tab-color: var(--pc-marketing);  --pc-tab-glow: var(--pc-marketing-glow); }
.pc-status-tab.operations { --pc-tab-color: var(--pc-operations); --pc-tab-glow: var(--pc-operations-glow); }
.pc-status-tab.alerts     { --pc-tab-color: var(--pc-alerts);     --pc-tab-glow: var(--pc-alerts-glow); }
.pc-status-tab.comms      { --pc-tab-color: var(--pc-comms);      --pc-tab-glow: var(--pc-comms-glow); }
.pc-status-count {
  font-size: .65rem;
  opacity: .7;
  font-weight: 700;
}

/* FILTER PANEL */
.pc-filter-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pc-filter-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pc-leads), var(--pc-sales));
}
.pc-filter-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.pc-filter-search {
  flex: 1;
  min-width: 240px;
  position: relative;
  display: flex;
  align-items: center;
}
.pc-filter-search-icon {
  position: absolute;
  left: .8rem;
  color: var(--pc-sales);
  font-family: var(--pc-font-mono);
  font-size: .8rem;
  pointer-events: none;
}
.pc-filter-search input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--pc-font-body);
  font-size: .85rem;
  padding: .5rem .75rem .5rem 2rem;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.pc-filter-search input:focus {
  outline: 0;
  border-color: var(--pc-sales);
  background: color-mix(in srgb, var(--pc-sales) 4%, var(--bg-base));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-sales) 25%, transparent);
}
.pc-filter-select {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--pc-font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  padding: .5rem .65rem;
  cursor: pointer;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.pc-filter-select:hover,
.pc-filter-select:focus {
  outline: 0;
  border-color: var(--pc-leads);
}

/* BULK ACTION BAR */
.pc-bulk-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 15%, transparent) 0%, color-mix(in srgb, var(--pc-marketing) 8%, transparent) 100%),
    var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--pc-leads) 35%, transparent);
  padding: .65rem .9rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pc-bulk-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pc-leads), var(--pc-marketing));
  box-shadow: 2px 0 12px var(--pc-leads-glow);
}
.pc-bulk-count {
  font-family: var(--pc-font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--pc-leads);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.pc-bulk-count::before {
  content: '◆';
  color: var(--pc-leads);
  font-size: .65rem;
  animation: pc-flicker 1.5s infinite;
}

/* TABLE PANEL */
.pc-table-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pc-table-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  opacity: .5;
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.pc-table thead {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc-leads) 8%, transparent) 0%, transparent 100%);
}
.pc-table th {
  font-family: var(--pc-font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: .9rem .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-leads) 20%, transparent);
  white-space: nowrap;
}
.pc-table th.pc-table-num { text-align: right; }
.pc-table th.pc-table-check { width: 36px; padding-right: 0; }

.pc-table td {
  padding: .8rem .85rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.pc-table tbody tr {
  transition: background var(--pc-transition);
}
.pc-table tbody tr:hover {
  background: color-mix(in srgb, var(--pc-leads) 5%, transparent);
}
.pc-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--pc-leads);
}
.pc-table tbody tr:last-child td { border-bottom: 0; }

.pc-table-check { width: 36px; }
.pc-table-check input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--pc-leads);
}
.pc-table-num { text-align: right; font-variant-numeric: tabular-nums; }
.pc-table-mute { color: var(--text-muted); font-size: .82rem; }
.pc-table-link {
  color: var(--text-heading);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  transition: color var(--pc-transition);
}
.pc-table-link:hover {
  color: var(--pc-leads);
  text-shadow: 0 0 8px var(--pc-leads-glow);
}
.pc-table-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .15rem;
  font-family: var(--pc-font-mono);
  letter-spacing: .02em;
}
.pc-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .9rem;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.pc-table-action:hover {
  border-color: var(--pc-leads);
  color: var(--pc-leads);
  background: color-mix(in srgb, var(--pc-leads) 10%, transparent);
  box-shadow: 0 0 12px var(--pc-leads-glow);
}

/* STAGE + TEMP BADGES (small inline pill labels) */
.pc-stage-badge,
.pc-temp-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  font-family: var(--pc-font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--pc-badge-color, var(--pc-leads)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-badge-color, var(--pc-leads)) 35%, transparent);
  color: var(--pc-badge-color, var(--pc-leads));
  position: relative;
  white-space: nowrap;
}
.pc-stage-badge::before,
.pc-temp-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pc-badge-color, var(--pc-leads));
  box-shadow: 0 0 6px var(--pc-badge-color, var(--pc-leads));
}
.pc-stage-badge.leads      { --pc-badge-color: var(--pc-leads); }
.pc-stage-badge.sales      { --pc-badge-color: var(--pc-sales); }
.pc-stage-badge.marketing  { --pc-badge-color: var(--pc-marketing); }
.pc-stage-badge.operations { --pc-badge-color: var(--pc-operations); }
.pc-stage-badge.finance    { --pc-badge-color: var(--pc-finance); }
.pc-stage-badge.comms      { --pc-badge-color: var(--pc-comms); }
.pc-stage-badge.alerts     { --pc-badge-color: var(--pc-alerts); }

.pc-temp-badge.hot   { --pc-badge-color: var(--pc-alerts); }
.pc-temp-badge.warm  { --pc-badge-color: var(--pc-operations); }
.pc-temp-badge.cold  { --pc-badge-color: var(--pc-comms); }

/* LEAD SCORE - hex badge */
.pc-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 .5rem;
  font-family: var(--pc-font-head);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pc-score-color, var(--pc-leads));
  background: color-mix(in srgb, var(--pc-score-color, var(--pc-leads)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-score-color, var(--pc-leads)) 35%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--pc-score-color, var(--pc-leads)) 40%, transparent);
  clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}

/* PAGINATION */
.pc-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.pc-pagination-info {
  font-family: var(--pc-font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.pc-pagination-btns {
  display: flex;
  gap: .35rem;
}
.pc-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .65rem;
  font-family: var(--pc-font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.pc-pagination-btn:hover {
  border-color: var(--pc-leads);
  color: var(--pc-leads);
  background: color-mix(in srgb, var(--pc-leads) 8%, transparent);
}
.pc-pagination-btn.active {
  background: linear-gradient(135deg, var(--pc-leads), var(--pc-marketing));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 12px var(--pc-leads-glow);
}

/* MODAL OVERRIDES (for existing .modal-overlay markup) */
.modal-overlay:has(.pc-modal),
.pc-modal-overlay {
  display: flex;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal:has(.pc-modal-header),
.pc-modal {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--pc-leads) 10%, transparent) 0%, transparent 60%),
    var(--bg-card) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 30%, transparent) !important;
  max-width: 540px !important;
  width: 100% !important;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0 !important;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.pc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-leads) 18%, transparent);
  position: relative;
}
.pc-modal-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pc-leads), var(--pc-sales), var(--pc-marketing));
  opacity: .5;
}
.pc-modal-title {
  font-family: var(--pc-font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-heading);
}

/* INPUTS - generic */
.pc-input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--pc-font-body);
  font-size: .85rem;
  padding: .55rem .75rem;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.pc-input:focus {
  outline: 0;
  border-color: var(--pc-leads);
  background: color-mix(in srgb, var(--pc-leads) 4%, var(--bg-base));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-leads) 25%, transparent);
}
.pc-input::placeholder {
  color: var(--text-muted);
}
textarea.pc-input { resize: vertical; min-height: 80px; line-height: 1.5; }

.pc-label {
  display: block;
  font-family: var(--pc-font-mono);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .pc-table thead { display: none; }
  .pc-table, .pc-table tbody, .pc-table tr, .pc-table td { display: block; }
  .pc-table tr {
    margin-bottom: 1rem;
    padding: .75rem;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    border: 1px solid var(--border);
  }
  .pc-table td {
    padding: .35rem 0;
    border: 0;
  }
  .pc-table-check { display: none !important; }
  .pc-filter-form { flex-direction: column; }
  .pc-filter-search { min-width: 0; }
  .pc-filter-select { width: 100%; }
}

/* TAG CARDS */
.pc-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.pc-tag-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-tag-color) 12%, transparent) 0%, transparent 60%),
    var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--pc-tag-color) 30%, transparent);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.pc-tag-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--pc-tag-color);
  box-shadow: 2px 0 12px var(--pc-tag-color);
}
.pc-tag-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pc-tag-color) 30%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.pc-tag-card:hover {
  transform: translateY(-2px);
  border-color: var(--pc-tag-color);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--pc-tag-color) 25%, transparent);
}
.pc-tag-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.pc-tag-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--pc-tag-color);
  box-shadow: 0 0 8px var(--pc-tag-color);
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.pc-tag-name {
  font-family: var(--pc-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0;
  color: var(--text-heading);
  flex: 1;
}
.pc-tag-desc {
  color: var(--text-muted);
  font-size: .8rem;
  margin: 0 0 .75rem 0;
  line-height: 1.5;
}
.pc-tag-meta {
  margin-bottom: .85rem;
}
.pc-tag-count {
  font-family: var(--pc-font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pc-tag-color);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.pc-tag-count::before {
  content: '◆';
  font-size: .55rem;
}
.pc-tag-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

/* ============================================================
   CONTACT VIEW PAGE - styling existing markup
   No PHP changes needed. Targets .tab-btn, .tab-panel, .card,
   .card-title, .badge, .btn, etc as they appear in view.php.
   Scope: .pc-contact-view wrapper (added by adding 1 PHP line)
   OR catch all on /contacts/view path via body class.
   ============================================================ */

/* Global hooks: any .card on contact view picks up the new look.
   We're targeting body[data-page="contact-view"] which we'll add in JS,
   AND a fallback that affects .card on pages where pc-page wraps. */

body[data-page="contact-view"] .card,
.pc-page .card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 4%, transparent) 0%, transparent 50%),
    var(--bg-elevated) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 22%, transparent) !important;
  border-radius: 0 !important;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
body[data-page="contact-view"] .card::before,
.pc-page .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  opacity: .4;
}
body[data-page="contact-view"] .card-header,
.pc-page .card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: .85rem !important;
  padding-bottom: .65rem !important;
  border-bottom: 1px solid var(--border) !important;
}
body[data-page="contact-view"] .card-title,
.pc-page .card-title {
  font-family: var(--pc-font-mono) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--pc-leads) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
}
body[data-page="contact-view"] .card-title::before,
.pc-page .card-title::before {
  content: '◆';
  color: var(--pc-sales);
  font-size: .65rem;
}

/* TAB BUTTONS & PANELS */
body[data-page="contact-view"] .tab-btn,
.pc-page .tab-btn {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-muted) !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  padding: .65rem 1rem !important;
  cursor: pointer;
  transition: all var(--pc-transition);
  position: relative;
  border-radius: 0 !important;
}
body[data-page="contact-view"] .tab-btn:hover,
.pc-page .tab-btn:hover {
  color: var(--pc-leads) !important;
}
body[data-page="contact-view"] .tab-btn.active,
.pc-page .tab-btn.active {
  color: var(--pc-leads) !important;
  border-bottom-color: var(--pc-leads) !important;
  box-shadow: 0 2px 12px var(--pc-leads-glow);
}
body[data-page="contact-view"] .tab-btn.active::after,
.pc-page .tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 25%; right: 25%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  filter: blur(1px);
}

/* BADGES (tags etc) */
body[data-page="contact-view"] .badge,
.pc-page .badge {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  border: 1px solid currentColor !important;
  position: relative;
}

/* PAGE-LOCAL BUTTONS: don't override pc-btn but lift .btn to feel sharper */
body[data-page="contact-view"] .btn-primary,
.pc-page .btn-primary {
  background: linear-gradient(135deg, var(--pc-leads), var(--pc-marketing)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--pc-font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-size: .75rem !important;
  box-shadow: 0 2px 12px var(--pc-leads-glow);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
body[data-page="contact-view"] .btn-secondary,
.pc-page .btn-secondary {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--pc-font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-size: .75rem !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
body[data-page="contact-view"] .btn-secondary:hover,
.pc-page .btn-secondary:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
}
body[data-page="contact-view"] .btn-ghost,
.pc-page .btn-ghost {
  background: transparent !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
}
body[data-page="contact-view"] .btn-ghost:hover,
.pc-page .btn-ghost:hover {
  border-color: var(--border) !important;
  color: var(--pc-leads) !important;
}
body[data-page="contact-view"] .btn-danger,
.pc-page .btn-danger {
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--pc-alerts) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pc-alerts) 35%, transparent) !important;
  color: var(--pc-alerts) !important;
  font-family: var(--pc-font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-size: .75rem !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

/* FORM CONTROL */
body[data-page="contact-view"] .form-control,
.pc-page .form-control {
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--pc-font-body) !important;
  color: var(--text-primary) !important;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
body[data-page="contact-view"] .form-control:focus,
.pc-page .form-control:focus {
  outline: 0;
  border-color: var(--pc-leads) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-leads) 25%, transparent);
}
body[data-page="contact-view"] .form-label,
.pc-page .form-label {
  font-family: var(--pc-font-mono) !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

/* ============================================================
   EMAIL BUILDER (/emails/edit) - CSS overlay
   Targets .eb-* namespace. Keeps email canvas WHITE (intentional -
   email previews must show what recipient sees). Everything around
   it gets the PC theme treatment.
   ============================================================ */

/* Top bar */
.eb-topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 95%, transparent) 0%, color-mix(in srgb, var(--bg-base) 85%, transparent) 100%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-leads) 20%, transparent) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pc-leads) 10%, transparent), 0 2px 12px rgba(0,0,0,.2) !important;
  position: relative;
}
.eb-topbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 1px; width: 25%;
  background: linear-gradient(90deg, transparent, var(--pc-sales), transparent);
}

.eb-back-btn {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text-muted) !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.eb-back-btn:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
  background: color-mix(in srgb, var(--pc-leads) 8%, transparent) !important;
}

.eb-name-input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  color: var(--text-heading) !important;
  font-family: var(--pc-font-head) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  padding: .4rem .25rem !important;
  transition: all var(--pc-transition) !important;
}
.eb-name-input:focus,
.eb-name-input:hover {
  outline: 0 !important;
  border-bottom-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
}

.eb-save-status {
  font-family: var(--pc-font-mono) !important;
  font-size: .62rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  padding: .2rem .5rem .2rem .85rem !important;
  background: color-mix(in srgb, var(--pc-finance) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pc-finance) 35%, transparent) !important;
  color: var(--pc-finance) !important;
  border-radius: 0 !important;
  position: relative;
}
.eb-save-status::before {
  content: '';
  position: absolute;
  left: .4rem; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pc-finance);
  box-shadow: 0 0 6px var(--pc-finance);
  animation: pc-flicker 1.5s infinite;
}

/* Mode buttons (Design / HTML / Preview) - segmented control */
.eb-topbar-modes {
  display: inline-flex !important;
  gap: .25rem !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  padding: .25rem !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.eb-mode-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  padding: .45rem .85rem !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  cursor: pointer;
  transition: all var(--pc-transition) !important;
}
.eb-mode-btn:hover {
  color: var(--text-heading) !important;
  background: color-mix(in srgb, var(--pc-leads) 8%, transparent) !important;
}
.eb-mode-btn.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-marketing) 100%) !important;
  box-shadow: 0 2px 12px var(--pc-leads-glow), inset 0 1px 0 rgba(255,255,255,.15);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

/* Send test button + dropdown */
.eb-topbar-right .btn,
.eb-topbar-right button[id="ebSendTest"] {
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-marketing) 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: .5rem 1rem !important;
  box-shadow: 0 2px 12px var(--pc-leads-glow);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.eb-topbar-right button[id="ebSendTest"]:hover {
  box-shadow: 0 4px 20px var(--pc-leads-glow), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-1px);
}

.eb-icon-btn {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 0 !important;
  width: 34px !important; height: 34px !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.eb-icon-btn:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
  background: color-mix(in srgb, var(--pc-leads) 8%, transparent) !important;
  filter: drop-shadow(0 0 4px var(--pc-leads-glow));
}

.eb-dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 25%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 24px var(--pc-leads-glow) !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  padding: .25rem !important;
}
.eb-dropdown-menu button {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  font-family: var(--pc-font-body) !important;
  font-size: .82rem !important;
  padding: .55rem .85rem !important;
  text-align: left !important;
  width: 100% !important;
  transition: all var(--pc-transition) !important;
  border-radius: 0 !important;
}
.eb-dropdown-menu button:hover {
  background: color-mix(in srgb, var(--pc-leads) 12%, transparent) !important;
  color: var(--pc-leads) !important;
}
.eb-dropdown-menu button.eb-danger {
  color: var(--pc-alerts) !important;
}
.eb-dropdown-menu button.eb-danger:hover {
  background: color-mix(in srgb, var(--pc-alerts) 12%, transparent) !important;
  color: var(--pc-alerts) !important;
}
.eb-dropdown-sep {
  height: 1px !important;
  background: var(--border) !important;
  margin: .25rem 0 !important;
}

/* Subject bar */
.eb-subject-bar {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border) !important;
}
.eb-subject-row {
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: .55rem 1rem !important;
}
.eb-subject-row label {
  font-family: var(--pc-font-mono) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  min-width: 80px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
}
.eb-subject-row label::before {
  content: '◆';
  color: var(--pc-sales);
  font-size: .5rem;
}
.eb-subject-row input {
  flex: 1 !important;
  background: var(--bg-base) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: var(--pc-font-body) !important;
  font-size: .85rem !important;
  padding: .45rem .7rem !important;
  border-radius: 0 !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.eb-subject-row input:focus {
  outline: 0 !important;
  border-color: var(--pc-leads) !important;
  background: color-mix(in srgb, var(--pc-leads) 3%, var(--bg-base)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-leads) 25%, transparent) !important;
}
.eb-subject-row input::placeholder {
  color: var(--text-muted) !important;
}

/* Merge tag button {{ }} */
.eb-mt-btn {
  background: var(--bg-base) !important;
  border: 1px solid color-mix(in srgb, var(--pc-sales) 35%, transparent) !important;
  color: var(--pc-sales) !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: .4rem .65rem !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.eb-mt-btn:hover {
  background: color-mix(in srgb, var(--pc-sales) 10%, transparent) !important;
  border-color: var(--pc-sales) !important;
  box-shadow: 0 0 8px var(--pc-sales-glow);
}

/* LEFT pane - block palette */
.eb-pane-left {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, color-mix(in srgb, var(--pc-leads) 8%, transparent) 0%, transparent 60%),
    var(--bg-base) !important;
  border-right: 1px solid color-mix(in srgb, var(--pc-leads) 18%, transparent) !important;
  position: relative;
}
.eb-pane-left::before {
  content: '';
  position: absolute;
  top: 0; right: -1px;
  width: 1px; height: 30%;
  background: linear-gradient(180deg, transparent, var(--pc-leads), transparent);
  opacity: .5;
  pointer-events: none;
}

.eb-pane-title {
  font-family: var(--pc-font-mono) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase;
  color: var(--pc-sales) !important;
  padding: 1rem 1rem .5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}
.eb-pane-title::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--pc-sales);
  box-shadow: 0 0 6px var(--pc-sales);
  flex-shrink: 0;
}
.eb-pane-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--pc-sales), transparent);
  opacity: .35;
}
.eb-pane-title-spaced {
  margin-top: .5rem !important;
}

/* Block tiles - the draggable buttons */
.eb-blocks-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .55rem !important;
  padding: .5rem .75rem 1rem !important;
}
.eb-block-tile {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 6%, transparent) 0%, transparent 60%),
    var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: .9rem .5rem .65rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .4rem !important;
  cursor: grab !important;
  transition: all var(--pc-transition) !important;
  color: var(--text-secondary) !important;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.eb-block-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  opacity: 0;
  transition: opacity var(--pc-transition);
}
.eb-block-tile:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--pc-leads-glow);
}
.eb-block-tile:hover::before {
  opacity: .6;
}
.eb-block-tile:active {
  cursor: grabbing !important;
  transform: translateY(0);
}
.eb-block-tile svg {
  width: 26px !important;
  height: 26px !important;
  stroke: currentColor !important;
}
.eb-block-tile span {
  font-family: var(--pc-font-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

/* Email styling button (Globals section) */
.eb-globals-btn {
  width: calc(100% - 1.5rem) !important;
  margin: .25rem .75rem 1rem !important;
  background: var(--bg-elevated) !important;
  border: 1px solid color-mix(in srgb, var(--pc-marketing) 35%, transparent) !important;
  color: var(--pc-marketing) !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  padding: .65rem !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.eb-globals-btn:hover {
  background: color-mix(in srgb, var(--pc-marketing) 10%, transparent) !important;
  border-color: var(--pc-marketing) !important;
  box-shadow: 0 0 12px var(--pc-marketing-glow);
}

/* Centre canvas - INTENTIONALLY keeps light/white for email preview */
/* but the WRAPPER around it can get a subtle dark backdrop */
.eb-pane-centre {
  background: var(--bg-base) !important;
}
/* The actual canvas keeps its light email-style background */
.eb-canvas-wrap {
  /* unchanged - email content goes here */
}

/* HTML mode toolbar */
.eb-html-toolbar {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

/* Preview mode toolbar */
.eb-preview-toolbar {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border) !important;
}
.eb-device-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-family: var(--pc-font-mono) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  padding: .4rem .8rem !important;
  border-radius: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.eb-device-btn:hover {
  border-color: var(--pc-leads) !important;
  color: var(--pc-leads) !important;
}
.eb-device-btn.active {
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-marketing) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--pc-leads-glow);
}

/* RIGHT pane - settings */
.eb-pane-right {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, color-mix(in srgb, var(--pc-leads) 8%, transparent) 0%, transparent 60%),
    var(--bg-base) !important;
  border-left: 1px solid color-mix(in srgb, var(--pc-leads) 18%, transparent) !important;
  position: relative;
}
.eb-pane-right::before {
  content: '';
  position: absolute;
  top: 0; left: -1px;
  width: 1px; height: 30%;
  background: linear-gradient(180deg, transparent, var(--pc-leads), transparent);
  opacity: .5;
  pointer-events: none;
}

.eb-settings-empty {
  text-align: center !important;
  padding: 3rem 1rem !important;
  color: var(--text-muted) !important;
}
.eb-settings-empty-icon {
  margin-bottom: 1rem !important;
  opacity: .5;
  filter: drop-shadow(0 0 8px var(--pc-leads-glow));
}
.eb-settings-empty-icon svg {
  width: 40px !important;
  height: 40px !important;
  color: var(--pc-leads) !important;
}
.eb-settings-empty-text {
  font-family: var(--pc-font-head) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  color: var(--text-heading) !important;
  margin-bottom: .35rem !important;
}
.eb-settings-empty-sub {
  font-family: var(--pc-font-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
  color: var(--text-muted) !important;
  line-height: 1.5;
}

/* Settings content (when a block is selected) */
.eb-settings-content label,
.eb-settings-content .eb-settings-label {
  font-family: var(--pc-font-mono) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
.eb-settings-content input[type="text"],
.eb-settings-content input[type="url"],
.eb-settings-content input[type="number"],
.eb-settings-content select,
.eb-settings-content textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: var(--pc-font-body) !important;
  font-size: .85rem !important;
  border-radius: 0 !important;
  padding: .5rem .7rem !important;
  transition: all var(--pc-transition) !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.eb-settings-content input:focus,
.eb-settings-content select:focus,
.eb-settings-content textarea:focus {
  outline: 0 !important;
  border-color: var(--pc-leads) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-leads) 25%, transparent) !important;
}

/* Block-level toolbar that appears on canvas blocks (if any) */
.eb-block-toolbar {
  background: var(--bg-card) !important;
  border: 1px solid color-mix(in srgb, var(--pc-leads) 35%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 16px var(--pc-leads-glow) !important;
  border-radius: 0 !important;
}
.eb-block-toolbar button {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  transition: all var(--pc-transition) !important;
}
.eb-block-toolbar button:hover {
  color: var(--pc-leads) !important;
  background: color-mix(in srgb, var(--pc-leads) 10%, transparent) !important;
}

/* DROP INDICATORS when dragging blocks */
.eb-drop-indicator {
  background: var(--pc-leads) !important;
  box-shadow: 0 0 12px var(--pc-leads), 0 0 24px var(--pc-leads-glow) !important;
}


/* Image upload drop zone in email builder settings */
.eb-img-dropzone {
  background: var(--bg-base) !important;
  border: 1px dashed color-mix(in srgb, var(--pc-leads) 35%, transparent) !important;
  padding: 1rem !important;
  margin-bottom: .4rem !important;
  transition: all var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.eb-img-dropzone.has-image {
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--pc-leads) 25%, transparent) !important;
  background: color-mix(in srgb, var(--pc-leads) 4%, var(--bg-base)) !important;
}
.eb-img-dropzone.drag-over {
  border-color: var(--pc-leads) !important;
  background: color-mix(in srgb, var(--pc-leads) 12%, var(--bg-base)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-leads) 25%, transparent), 0 0 20px var(--pc-leads-glow) !important;
}
.eb-img-dropzone button {
  font-family: var(--pc-font-mono) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: all var(--pc-transition) !important;
}
.eb-img-dropzone button[id="ebImgUploadBtn"]:hover {
  background: linear-gradient(135deg, var(--pc-leads) 0%, var(--pc-marketing) 100%) !important;
  box-shadow: 0 4px 16px var(--pc-leads-glow) !important;
  transform: translateY(-1px);
}
.eb-img-dropzone img {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

/* ============================================================
   FILTER CHIPS + BENCHMARK TEMPLATE CARDS
   Used on: deals, quotes, appointments, lead-capture
   These classes (pc-filter-*, pc-tpl-*) were referenced in the
   page templates but missing from the stylesheet, leaving the
   benchmarks/filter sections unstyled. This block styles them to
   match the dark / purple / neon design system.
   ============================================================ */

/* ── STAGE FILTER ROW ─────────────────────────────────── */
.pc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
  align-items: center;
}

.pc-filter-chip {
  --pc-chip-color: var(--pc-leads);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  font-family: var(--pc-font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--text-secondary, rgba(255,255,255,.7));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 99px;
  transition: var(--pc-transition);
  white-space: nowrap;
  cursor: pointer;
}
.pc-filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--pc-chip-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pc-chip-color) 25%, transparent);
  transform: translateY(-1px);
}
.pc-filter-chip.active {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc-chip-color) 22%, transparent), color-mix(in srgb, var(--pc-chip-color) 8%, transparent));
  border-color: var(--pc-chip-color);
  box-shadow: 0 0 16px color-mix(in srgb, var(--pc-chip-color) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.1);
}
.pc-filter-chip-count {
  font-size: .68rem;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* ── BENCHMARK TEMPLATE SECTION ───────────────────────── */
#dealTplSection,
.pc-tpl-section {
  margin-bottom: 1.25rem;
}

.pc-tpl-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.pc-tpl-section-title {
  font-family: var(--pc-font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pc-tpl-section-hide {
  font-family: var(--pc-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .3rem .7rem;
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-tpl-section-hide:hover {
  color: var(--pc-alerts, #f87171);
  border-color: var(--pc-alerts, #f87171);
}

/* ── TEMPLATE CARD GRID ───────────────────────────────── */
.pc-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .9rem;
}

.pc-tpl-card {
  --pc-tpl-color: rgba(167,139,250,.12);
  position: relative;
  padding: 1.1rem 1.1rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--pc-transition);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  display: flex;
  flex-direction: column;
}
.pc-tpl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  opacity: .4;
  transition: var(--pc-transition);
}
.pc-tpl-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--pc-tpl-color), transparent 70%);
  opacity: 0;
  transition: var(--pc-transition);
  pointer-events: none;
}
.pc-tpl-card:hover {
  border-color: var(--pc-leads);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.3), 0 0 18px var(--pc-leads-glow);
}
.pc-tpl-card:hover::before { opacity: 1; }
.pc-tpl-card:hover::after { opacity: 1; }

.pc-tpl-title {
  font-family: var(--pc-font-head);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-primary);
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pc-tpl-desc {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-secondary, rgba(255,255,255,.65));
  margin-bottom: .8rem;
}

.pc-tpl-stages {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem;
  flex: 1;
}
.pc-tpl-stage-line {
  font-family: var(--pc-font-mono);
  font-size: .73rem;
  letter-spacing: .02em;
  color: var(--text-secondary, rgba(255,255,255,.7));
  padding: .3rem .55rem;
  background: rgba(255,255,255,.03);
  border-left: 2px solid var(--pc-leads);
  border-radius: 2px;
}

.pc-tpl-cta {
  font-family: var(--pc-font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--pc-leads);
  margin-top: auto;
  transition: var(--pc-transition);
}
.pc-tpl-card:hover .pc-tpl-cta {
  color: var(--pc-sales, #22d3ee);
  text-shadow: 0 0 8px var(--pc-sales-glow);
}

/* Responsive */
@media (max-width: 700px) {
  .pc-tpl-grid { grid-template-columns: 1fr; }
  .pc-filter-row { gap: .4rem; }
}

/* ============================================================
   APPOINTMENTS PAGE COMPONENTS
   ============================================================ */

.pc-appt-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.pc-appt-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: var(--pc-transition);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pc-appt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--pc-leads);
  opacity: .6;
  transition: var(--pc-transition);
}
.pc-appt-card:hover {
  border-color: color-mix(in srgb, var(--pc-leads) 50%, var(--border));
  transform: translateX(2px);
}
.pc-appt-card:hover::before { opacity: 1; }
.pc-appt-card.is-today::before { background: var(--pc-finance, #34d399); box-shadow: 0 0 10px var(--pc-finance-glow); }
.pc-appt-card.is-past { opacity: .6; }
.pc-appt-card.is-past::before { background: var(--text-muted); }

.pc-appt-main { flex: 1; min-width: 0; }

.pc-appt-name {
  font-family: var(--pc-font-head);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--pc-transition);
}
.pc-appt-name:hover { color: var(--pc-leads); }

.pc-appt-contact {
  font-size: .8rem;
  color: var(--text-secondary, rgba(255,255,255,.6));
}

.pc-appt-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: .35rem;
}
.pc-appt-meta-item {
  font-family: var(--pc-font-mono);
  font-size: .76rem;
  color: var(--text-secondary, rgba(255,255,255,.65));
}
.pc-appt-time {
  font-family: var(--pc-font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary, rgba(255,255,255,.7));
}
.pc-appt-time.is-today {
  color: var(--pc-finance, #34d399);
  text-shadow: 0 0 8px var(--pc-finance-glow);
}
.pc-appt-notes {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .4rem;
  line-height: 1.45;
}

.pc-appt-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Status badge (pending / confirmed / cancelled) */
.pc-status-badge {
  font-family: var(--pc-font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.pc-status-badge.pending {
  color: var(--pc-operations, #fbbf24);
  background: color-mix(in srgb, var(--pc-operations) 12%, transparent);
  border-color: color-mix(in srgb, var(--pc-operations) 40%, transparent);
}
.pc-status-badge.confirmed {
  color: var(--pc-finance, #34d399);
  background: color-mix(in srgb, var(--pc-finance) 12%, transparent);
  border-color: color-mix(in srgb, var(--pc-finance) 40%, transparent);
}
.pc-status-badge.cancelled {
  color: var(--pc-alerts, #f87171);
  background: color-mix(in srgb, var(--pc-alerts) 12%, transparent);
  border-color: color-mix(in srgb, var(--pc-alerts) 40%, transparent);
}

/* Mini icon button (calendar add) */
.pc-mini-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-size: .9rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
  text-decoration: none;
  transition: var(--pc-transition);
  cursor: pointer;
}
.pc-mini-icon-btn:hover {
  border-color: var(--pc-leads);
  box-shadow: 0 0 10px var(--pc-leads-glow);
}

/* Mini select (status dropdown) */
.pc-mini-select {
  font-family: var(--pc-font-mono);
  font-size: .74rem;
  padding: .35rem .6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-secondary, rgba(255,255,255,.8));
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-mini-select:hover { border-color: var(--pc-leads); }
.pc-mini-select:focus { outline: none; border-color: var(--pc-leads); box-shadow: 0 0 0 2px var(--pc-leads-glow); }

/* ============================================================
   EMPTY STATE - title + desc (pc-empty already exists)
   ============================================================ */
.pc-empty-title {
  font-family: var(--pc-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .4rem;
  letter-spacing: 0;
}
.pc-empty-desc {
  font-family: var(--pc-font-body);
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
  letter-spacing: 0;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ============================================================
   CALLOUT BANNER (e.g. outbound agent active)
   ============================================================ */
.pc-callout {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 12%, transparent), color-mix(in srgb, var(--pc-leads) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--pc-leads) 30%, transparent);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.pc-callout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pc-callout-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--pc-leads, #c4b5fd);
}
.pc-callout-text {
  font-size: .78rem;
  color: var(--text-secondary, rgba(255,255,255,.6));
  margin-top: .15rem;
}
.pc-callout-pill {
  font-family: var(--pc-font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--pc-finance) 15%, transparent);
  color: var(--pc-finance, #34d399);
  border: 1px solid color-mix(in srgb, var(--pc-finance) 40%, transparent);
  white-space: nowrap;
}

/* ============================================================
   LEAD CAPTURE - "How it works" step grid
   ============================================================ */
.pc-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
  margin: 1.25rem 0 1.5rem;
}

.pc-step-tile {
  position: relative;
  padding: 1.2rem 1.1rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: var(--pc-transition);
}
.pc-step-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-leads), transparent);
  opacity: .4;
}
.pc-step-tile:hover {
  border-color: color-mix(in srgb, var(--pc-leads) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.pc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-family: var(--pc-font-head);
  font-size: .85rem;
  font-weight: 700;
  color: var(--pc-leads);
  background: color-mix(in srgb, var(--pc-leads) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-leads) 40%, transparent);
  border-radius: 8px;
  margin-bottom: .7rem;
}

.pc-step-tile-title {
  font-family: var(--pc-font-head);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .35rem;
}
.pc-step-tile-desc {
  font-size: .79rem;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255,255,255,.65));
}

/* ============================================================
   CODE BOX (webhook URL display)
   ============================================================ */
.pc-code-box {
  font-family: var(--pc-font-mono);
  font-size: .82rem;
  color: var(--pc-sales, #22d3ee);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem 1rem;
  word-break: break-all;
  line-height: 1.5;
  user-select: all;
}

/* ============================================================
   PLATFORM TABS (Meta / Google / WordPress / etc.)
   ============================================================ */
.pc-platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.pc-platform-tab {
  font-family: var(--pc-font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .5rem .9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary, rgba(255,255,255,.7));
  cursor: pointer;
  transition: var(--pc-transition);
  white-space: nowrap;
}
.pc-platform-tab:hover {
  color: var(--text-primary);
  border-color: var(--pc-leads);
  transform: translateY(-1px);
}
.pc-platform-tab.active {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc-leads) 22%, transparent), color-mix(in srgb, var(--pc-leads) 8%, transparent));
  border-color: var(--pc-leads);
  box-shadow: 0 0 14px var(--pc-leads-glow);
}

/* ============================================================
   SOURCE BADGE (lead source tag)
   ============================================================ */
.pc-source-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--pc-font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .25rem .6rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--pc-comms) 12%, transparent);
  color: var(--pc-comms, #60a5fa);
  border: 1px solid color-mix(in srgb, var(--pc-comms) 35%, transparent);
}

/* ============================================================
   TABLE WRAP (horizontal scroll container - pc-table exists)
   ============================================================ */
.pc-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   FLOATING ACTION BUTTON (mobile)
   ============================================================ */
.pc-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--pc-leads), var(--pc-marketing));
  box-shadow: 0 6px 24px var(--pc-leads-glow), 0 2px 8px rgba(0,0,0,.4);
  cursor: pointer;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  transition: var(--pc-transition);
}
.pc-fab:hover { transform: scale(1.08); box-shadow: 0 8px 32px var(--pc-leads-glow); }
.pc-fab:active { transform: scale(.96); }
@media (max-width: 700px) {
  .pc-fab { display: flex; }
}