:root {
  --bg: #0a0a0a;
  --panel: #141414;
  --panel-2: #1a1a1a;
  --line: #1f1f1f;
  --line-soft: #2a2a2a;
  --ink: #f5f5f5;
  --ink-soft: #cccccc;
  --muted: #888888;
  --muted-2: #555555;
  --green: #2d5f3f;
  --green-soft: #3a7a51;
  --green-deep: #1f4530;
  --cream: #faf6ef;
  --cream-line: #e8e0d2;
  --danger: #a13838;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ============================================
   LOGIN
   ============================================ */
.login-card {
  max-width: 380px;
  margin: 12vh auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.login-card h1 {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--ink);
}
.login-card .tag {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 13px;
  letter-spacing: 1px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.login-form label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.login-form input {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.login-form input:focus {
  outline: 2px solid var(--green);
  border-color: var(--green);
}
.login-form button {
  margin-top: 6px;
  padding: 11px 14px;
  font-size: 13px;
  background: var(--green);
  color: var(--ink);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.login-form button:hover { background: var(--green-soft); }
.error {
  color: var(--danger);
  font-size: 13px;
  margin: 4px 0 0;
}



/* ============================================
   HEADER
   ============================================ */
.command-header {
  text-align: center;
  margin-bottom: 28px;
}
.command-header h1 {
  font-size: 56px;
  margin: 0;
  letter-spacing: 6px;
  font-weight: 400;
  color: var(--ink);
  font-family: 'Bebas Neue', 'Helvetica Neue', sans-serif;
}
.command-header .subtitle {
  font-size: 13px;
  color: var(--green);
  margin: 4px 0 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================
   GENERIC PANELS
   ============================================ */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.panel.accent {
  border: 1px solid var(--green);
}
.panel-label {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--green);
  text-transform: uppercase;
}

/* ============================================
   TOP GRID: photo / center stack / calendar
   ============================================ */
.top-grid {
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}

.photo-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 480px;
}
.photo-panel .photo-slot {
  width: 100%;
  height: 100%;
  min-height: 480px;
  background-color: var(--panel-2);
  background-size: cover;
  background-position: center top;
}

.center-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.center-stack .plate-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.status-card .field-label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.status-card .field-value {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.status-card .field-value.green {
  color: var(--green);
}
.status-card .field-value:last-child { margin-bottom: 0; }

/* On Your Plate */
.plate-card .panel-label {
  margin-bottom: 12px;
}
.plate-section {
  margin-bottom: 12px;
}
.plate-section:last-child { margin-bottom: 0; }
.plate-section .label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.plate-section ul {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.right-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
/* ============================================
   CALENDAR WIDGET (cream)
   ============================================ */
.calendar-widget {
  background: #faf6ef !important;
  background-color: #faf6ef !important;
  background-image: none !important;
  border-radius: 10px;
  padding: 16px 18px;
  color: #1f1b16;
  display: flex;
  flex-direction: column;
  align-self: start;
  isolation: isolate;
}
.cal-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #1f1b16;
  padding-bottom: 6px;
}
.cal-year {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #1f1b16;
}
.cal-month {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #1f1b16;
  flex: 1;
  text-align: right;
}
.cal-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.cal-grid th {
  color: #1f1b16;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 11px;
  padding: 6px 0 10px;
  text-transform: uppercase;
  width: 14.28%;
  text-align: center;
}
.cal-grid td {
  text-align: center;
  padding: 8px 0;
  color: #1f1b16;
  font-size: 14px;
  width: 14.28%;
}
.cal-grid td.empty {
  color: transparent;
}
.cal-grid td.today span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid #2d5f3f;
  border-radius: 50%;
  color: #2d5f3f;
  font-weight: 600;
}
/* ============================================
   PITCH LOGGER (two rows)
   ============================================ */
.pitch-logger .logger-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.pitch-logger .logger-head .arrow {
  font-size: 12px;
  color: var(--muted-2);
}
.pitch-logger form {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-template-rows: auto auto;
  gap: 10px;
}
.pitch-logger .row-1-brand {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.pitch-logger .row-2-niche {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.pitch-logger .right-stack {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pitch-logger input,
.pitch-logger select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
}
.pitch-logger input::placeholder { color: var(--muted-2); }
.pitch-logger input:focus,
.pitch-logger select:focus {
  outline: 1px solid var(--green);
  border-color: var(--green);
}
.pitch-logger button {
  background: var(--green);
  border: 0;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 1.5px;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
  flex: 1;
}
.pitch-logger button:hover { background: var(--green-soft); }

/* ============================================
   CHAIN OF COMMAND (Elle)
   ============================================ */
.elle-card {
  padding: 24px;
}
.elle-card .elle-grid {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: 24px;
  align-items: center;
}
.elle-card .elle-photo {
  height: 220px;
  background: var(--panel-2);
  border-radius: 8px;
  background-size: cover;
  background-position: center top;
}
.elle-card .elle-name {
  margin: 0 0 4px;
  font-size: 28px;
  color: var(--ink);
  font-weight: 500;
}
.elle-card .elle-role {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.elle-card .elle-tagline {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--green);
  font-style: italic;
}
.elle-card .elle-bullets {
  margin: 0;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.elle-card .elle-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.elle-card .elle-actions a {
  text-decoration: none;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 14px;
  font-size: 14px;
}
.elle-card .elle-actions .primary {
  background: var(--green);
  color: var(--ink);
}
.elle-card .elle-actions .primary:hover { background: var(--green-soft); }
.elle-card .elle-actions .secondary {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  padding: 12px;
  font-size: 13px;
}
.elle-card .elle-actions .secondary:hover {
  background: var(--green);
  color: var(--ink);
}

/* ============================================
   AGENT GRID
   ============================================ */
.team-label {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--green);
  text-transform: uppercase;
}
.agent-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.agent-grid:last-of-type {
  margin-bottom: 16px;
}
.agent-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s;
}
.agent-card:hover {
  border-color: var(--green);
}
.agent-card .name {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
}
.agent-card .role {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================
   TODAY'S VIBE
   ============================================ */
.vibe-card {
  background: var(--panel);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.vibe-card .vibe-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.big-clock {
  background: #0a0a0a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Orbitron', 'Courier New', monospace;
  font-weight: 700;
  flex: 1;
  min-height: 140px;
}
.big-clock #clock-time {
  font-size: 56px;
  color: #f5f5f5;
  text-shadow: 0 0 12px rgba(245, 245, 245, 0.3);
  line-height: 1;
  letter-spacing: 4px;
}
.big-clock .clock-ampm {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 4px;
}
/* ============================================
   ELLE LINKS ON HOME PAGE
   ============================================ */
.elle-photo-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.2s;
}
.elle-photo-link:hover {
  opacity: 0.85;
}
.elle-name-link {
  text-decoration: none;
}
.elle-name-link:hover .elle-name {
  color: #ff3399;
}

/* ============================================
   ELLE'S PROFILE PAGE
   ============================================ */
.elle-page {
  background: #0a0a0a;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #1a1a1a;
}

.elle-page-back {
  display: inline-block;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
}
.elle-page-back:hover {
  background: #1a1a1a;
  color: #faf6ef;
}

.elle-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: white;
  border: 2px solid #ff3399;
  border-radius: 14px;
  padding: 32px;
}

.elle-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #f08fb3;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #ff3399;
}

.elle-hero-info .elle-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.elle-hero-info h1 {
  font-size: 56px;
  margin: 0 0 8px;
  color: #1a1a1a;
  font-weight: 700;
  letter-spacing: 1px;
}

.elle-hero-info .elle-title {
  font-size: 16px;
  color: #1a1a1a;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.elle-hero-info .elle-quote {
  font-size: 28px;
  color: #ff3399;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 500;
}

.elle-hero-info .elle-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #1a1a1a;
  margin: 0;
}

/* Quick actions section */
.elle-actions-section {
  background: white;
  border: 2px solid #f08fb3;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}
.elle-actions-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}
.elle-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.elle-action-btn {
  background: #ff3399;
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
  text-align: center;
}
.elle-action-btn:hover {
  background: #1a1a1a;
}
.elle-action-btn.soft {
  background: #f08fb3;
}
.elle-action-btn.soft:hover {
  background: #1a1a1a;
}

/* Chat box */
.elle-chat {
  background: white;
  border: 2px solid #ff3399;
  border-radius: 14px;
  padding: 28px;
}
.elle-chat h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}
.elle-chat-window {
  min-height: 240px;
  background: #faf6ef;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #1a1a1a;
  line-height: 1.6;
}
.elle-chat-placeholder {
  color: #888;
  font-style: italic;
}
.elle-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
}
.elle-chat-form input {
  background: #faf6ef;
  border: 1.5px solid #f08fb3;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #1a1a1a;
  font-family: inherit;
}
.elle-chat-form input:focus {
  outline: 2px solid #ff3399;
  border-color: #ff3399;
}
.elle-chat-form input::placeholder {
  color: #888;
}
.elle-chat-form button {
  background: #ff3399;
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.elle-chat-form button:hover {
  background: #1a1a1a;
}
/* ============================================
   ELLE PAGE - TODAY'S BRIEFING
   ============================================ */
.elle-briefing {
  background: white;
  border: 2px solid #ff3399;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}
.elle-briefing h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 600;
}
.elle-briefing .briefing-sub {
  font-size: 15px;
  color: #888;
  margin: 0 0 24px;
  font-style: italic;
}
.briefing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.briefing-col h3 {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
}
.briefing-col.p0 h3 {
  background: #ff3399;
  color: white;
}
.briefing-col.p1 h3 {
  background: #f08fb3;
  color: white;
}
.briefing-col.p2 h3 {
  background: #ffd6e7;
  color: #ff3399;
  border: 1.5px solid #ff3399;
}
.briefing-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.briefing-col li {
  background: #faf6ef;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: #1a1a1a;
}
.briefing-col li .est {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============================================
   ELLE PAGE - TOP 8
   ============================================ */
.elle-top8 {
  background: white;
  border: 2px solid #f08fb3;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}
.elle-top8 h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 600;
}
.elle-top8 .top8-sub {
  font-size: 15px;
  color: #888;
  margin: 0 0 20px;
  font-style: italic;
}
.top8-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.top8-card {
  background: #faf6ef;
  border: 1.5px solid #f08fb3;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: all 0.15s;
}
.top8-card:hover {
  background: #ff3399;
  border-color: #ff3399;
}
.top8-card:hover .top8-name,
.top8-card:hover .top8-role {
  color: white;
}
.top8-card .top8-num {
  display: inline-block;
  background: #ff3399;
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 10px;
}
.top8-card .top8-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
}
.top8-card .top8-role {
  margin: 5px 0 0;
  font-size: 12px;
  color: #888;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.top8-card .top8-role {
  margin: 3px 0 0;
  font-size: 10px;
  color: #888;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============================================
   ELLE PAGE - NOTES FROM ELLE
   ============================================ */
.elle-notes {
  margin-bottom: 32px;
}
.elle-notes h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 600;
}
.elle-notes .notes-sub {
  font-size: 15px;
  color: #888;
  margin: 0 0 20px;
  font-style: italic;
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.note-card {
  background: #ffe1ec;
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  transform: rotate(-1deg);
  box-shadow: 0 4px 12px rgba(255, 51, 153, 0.1);
}
.note-card:nth-child(2) {
  background: #fff;
  border: 1.5px solid #f08fb3;
  transform: rotate(0.5deg);
}
.note-card:nth-child(3) {
  background: #faf6ef;
  border: 1.5px solid #ff3399;
  transform: rotate(-0.5deg);
}
.note-card .note-tag {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff3399;
  margin: 0 0 10px;
  font-weight: 600;
}
.note-card .note-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #1a1a1a;
}
.note-card .note-sig {
  margin: 14px 0 0;
  font-size: 13px;
  font-style: italic;
  color: #888;
  text-align: right;
}
/* ============================================
   ELLE CHAT MESSAGES
   ============================================ */
.elle-msg {
  margin-bottom: 16px;
}
.elle-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.elle-msg-user .elle-msg-label {
  color: #1a1a1a;
  text-align: right;
}
.elle-msg-elle .elle-msg-label {
  color: #ff3399;
}
.elle-bubble {
  background: white;
  border: 1.5px solid #f08fb3;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: #1a1a1a;
  white-space: normal;
  word-wrap: break-word;
}
.elle-bubble p {
  margin: 0 0 8px;
}
.elle-bubble p:last-child {
  margin-bottom: 0;
}
.elle-bubble strong {
  color: #ff3399;
}
.elle-msg-user .elle-bubble {
  background: #ff3399;
  color: white;
  border-color: #ff3399;
  margin-left: 80px;
}
.elle-msg-elle .elle-bubble {
  background: #ffe1ec;
  border-color: #ff3399;
  margin-right: 80px;
}
.elle-typing {
  font-style: italic;
  color: #888;
}
.elle-error {
  background: #fff !important;
  border-color: #a13838 !important;
  color: #a13838 !important;
}
/* ============================================
   PLATE EMPTY STATE + EVENT DOTS
   ============================================ */
.plate-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
  list-style: none;
  margin-left: -18px;
}
.cal-grid td.has-event {
  position: relative;
}
.cal-grid td.has-event::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--green);
  border-radius: 50%;
}
.cal-grid td.today.has-event::after {
  display: none;
}
/* ============================================
   ELLE NOTES SECTION (real notes)
   ============================================ */
.elle-notes-section {
  margin-bottom: 32px;
}
.elle-notes-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff3399;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 600;
}
.elle-notes-section .notes-sub {
  font-size: 15px;
  color: #888;
  margin: 0 0 20px;
  font-style: italic;
}
.notes-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  margin-bottom: 24px;
}
.notes-form textarea {
  background: white;
  border: 2px solid #f08fb3;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  color: #1a1a1a;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}
.notes-form textarea:focus {
  outline: 2px solid #ff3399;
  border-color: #ff3399;
}
.notes-form button {
  background: #ff3399;
  color: white;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.notes-form button:hover {
  background: #1a1a1a;
}
.notes-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 20px;
}
.note-card.rot-1 {
  background: #ffe1ec;
  transform: rotate(-1deg);
}
.note-card.rot-2 {
  background: white;
  border: 1.5px solid #f08fb3;
  transform: rotate(0.5deg);
}
.note-card.rot-3 {
  background: #faf6ef;
  border: 1.5px solid #ff3399;
  transform: rotate(-0.5deg);
}
.note-card {
  position: relative;
}
.note-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  line-height: 1;
}
.note-delete:hover {
  background: #ff3399;
  color: white;
}

/* ============================================
   BRIEFING EMPTY + LOADING STATES
   ============================================ */
.briefing-loading,
.briefing-empty {
  color: #888;
  font-style: italic;
  font-size: 14px;
  list-style: none;
  margin-left: -18px;
  background: transparent !important;
}
/* ============================================
   REGINA PAGE
   ============================================ */
.regina-page {
  background: #000000;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #f5f5f5;
}

.regina-page-back {
  display: inline-block;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #ff1493;
  border-radius: 6px;
}
.regina-page-back:hover {
  background: #ff1493;
  color: #000;
}

.regina-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #0a0a0a;
  border: 2px solid #ff1493;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(255, 20, 147, 0.15);
}

.regina-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #1a0510;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #ff1493;
}

.regina-hero-info .regina-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #ff1493;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.regina-hero-info h1 {
  font-size: 56px;
  margin: 0 0 8px;
  color: #f5f5f5;
  font-weight: 700;
  letter-spacing: 1px;
}

.regina-hero-info .regina-title {
  font-size: 16px;
  color: #f5f5f5;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.regina-hero-info .regina-quote {
  font-size: 28px;
  color: #ff1493;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 500;
}

.regina-hero-info .regina-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0;
}

.regina-actions-section {
  background: #0a0a0a;
  border: 2px solid #ff1493;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}
.regina-actions-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff1493;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}
.regina-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.regina-action-btn {
  background: #ff1493;
  color: #000;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}
.regina-action-btn:hover {
  background: #f5f5f5;
}
.regina-action-btn.soft {
  background: transparent;
  color: #ff1493;
  border: 1.5px solid #ff1493;
}
.regina-action-btn.soft:hover {
  background: #ff1493;
  color: #000;
}

.regina-chat {
  background: #0a0a0a;
  border: 2px solid #ff1493;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}
.regina-chat h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff1493;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}
.regina-chat-window {
  min-height: 240px;
  background: #000;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #f5f5f5;
  line-height: 1.6;
}
.regina-chat-placeholder {
  color: #888;
  font-style: italic;
}
.regina-chat-form {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  align-items: stretch;
}
.regina-chat-form textarea {
  background: #000;
  border: 1.5px solid #ff1493;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  line-height: 1.5;
  min-height: 60px;
  overflow-y: auto;
}
.regina-chat-form textarea:focus {
  outline: 2px solid #ff1493;
  border-color: #ff1493;
}
.regina-chat-form textarea::placeholder {
  color: #666;
}
.regina-chat-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.regina-chat-form button {
  background: #ff1493;
  color: #000;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  padding: 14px 16px;
  width: 100%;
}
.regina-chat-form button:hover {
  background: #f5f5f5;
}
.regina-new-pitch-btn {
  background: #1a0510 !important;
  color: #ff1493 !important;
  border: 1.5px solid #ff1493 !important;
}
.regina-new-pitch-btn:hover {
  background: #ff1493 !important;
  color: #1a0510 !important;
  border-color: #ff1493 !important;
}

.regina-msg {
  margin-bottom: 16px;
}
.regina-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.regina-msg-user .regina-msg-label {
  color: #f5f5f5;
  text-align: right;
}
.regina-msg-regina .regina-msg-label {
  color: #ff1493;
}
.regina-bubble {
  background: #1a1a1a;
  border: 1.5px solid #ff1493;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: #f5f5f5;
  white-space: normal;
  word-wrap: break-word;
}
.regina-msg-user .regina-bubble {
  background: #ff1493;
  color: #000;
  border-color: #ff1493;
  margin-left: 80px;
  font-weight: 500;
}
.regina-msg-regina .regina-bubble {
  background: #1a0510;
  border-color: #ff1493;
  margin-right: 80px;
}
.regina-typing {
  font-style: italic;
  color: #888;
}
.regina-error {
  background: #2a0a0a !important;
  border-color: #a13838 !important;
  color: #ff6b6b !important;
}

/* BURN BOOK */
.burn-book-section {
  background: #1a0510;
  border: 3px solid #a13838;
  border-radius: 14px;
  padding: 32px 28px;
  margin-bottom: 32px;
  position: relative;
  box-shadow: 0 0 60px rgba(161, 56, 56, 0.2);
}
.burn-book-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px dashed #a13838;
}
.burn-book-header h2 {
  font-family: 'Caveat', cursive;
  font-size: 48px;
  margin: 0;
  color: #ff1493;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #a13838, 4px 4px 0 #000;
}
.burn-book-header .burn-book-sub {
  margin: 8px 0 0;
  font-size: 14px;
  color: #f5f5f5;
  font-style: italic;
}

.burn-form {
  display: grid;
  grid-template-columns: 1fr 1.5fr 180px;
  gap: 12px;
  margin-bottom: 28px;
}
.burn-form input {
  background: #000;
  border: 1.5px solid #a13838;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.burn-form input:focus {
  outline: 2px solid #ff1493;
  border-color: #ff1493;
}
.burn-form input::placeholder {
  color: #666;
}
.burn-form button {
  background: #a13838;
  color: #f5f5f5;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.burn-form button:hover {
  background: #ff1493;
  color: #000;
}

.burn-grid .burn-empty {
  color: #888 !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 30px !important;
  font-family: 'Caveat', cursive !important;
  font-size: 22px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  grid-column: 1 / -1 !important;
}

.burn-card {
  background: #fff5f0;
  border-radius: 6px;
  padding: 20px 18px 16px;
  position: relative;
  font-family: 'Caveat', cursive;
  color: #1a0510;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border-left: 4px solid #a13838;
}
.burn-card.burn-rot-1 { transform: rotate(-1.5deg); background: #fff5f0; }
.burn-card.burn-rot-2 { transform: rotate(1deg); background: #ffeded; }
.burn-card.burn-rot-3 { transform: rotate(-0.5deg); background: #fff0f5; }

.burn-card .burn-brand {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #a13838;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.burn-card .burn-reason {
  font-size: 18px;
  margin: 0 0 12px;
  color: #1a0510;
  line-height: 1.3;
  font-weight: 600;
}
.burn-card .burn-date {
  font-size: 14px;
  color: #888;
  margin: 0;
  font-style: italic;
  font-family: -apple-system, sans-serif;
}
.burn-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #a13838;
  font-size: 22px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  line-height: 1;
  font-weight: 700;
}
.burn-delete:hover {
  background: #a13838;
  color: #fff;
}
/* Burn book cover photo banner */
.burn-book-cover {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin: -10px 0 24px;
  border: 2px solid #a13838;
  box-shadow: 0 0 30px rgba(255, 20, 147, 0.3);
}
/* Elle dark mode override */
.elle-page {
  color: #f5f5f5;
}
.elle-page h1,
.elle-page h2,
.elle-page h3 {
  color: #f5f5f5;
}
.elle-hero {
  background: #1a0a14 !important;
  border: 2px solid #ff3399 !important;
}
.elle-hero-info .elle-bio {
  color: #cccccc !important;
}
.elle-actions-section,
.elle-briefing,
.elle-top8,
.elle-notes-section,
.elle-chat {
  background: #1a0a14 !important;
  border: 2px solid #ff3399 !important;
  color: #f5f5f5 !important;
}
.elle-page .briefing-col {
  background: #0a0a0a !important;
}
.elle-page .top8-card {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
}
.elle-page .top8-card:hover {
  background: #ff3399 !important;
  color: #000 !important;
}
.elle-chat-window {
  background: #000 !important;
  color: #f5f5f5 !important;
  border: 1px solid #1a1a1a !important;
}
.elle-chat-form input {
  background: #000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff3399 !important;
}
.elle-chat-form input::placeholder {
  color: #666 !important;
}
.notes-form textarea {
  background: #000 !important;
  color: #f5f5f5 !important;
  border: 2px solid #ff3399 !important;
}
.notes-form textarea::placeholder {
  color: #666 !important;
}
.elle-bubble {
  background: #1a0510 !important;
  color: #f5f5f5 !important;
}
.elle-msg-user .elle-bubble {
  background: #ff3399 !important;
  color: #000 !important;
}
.elle-page-back {
  color: #f5f5f5 !important;
  border: 1px solid #ff3399 !important;
}
/* Top 8 cards stay pink always */
.elle-page .top8-card .top8-name,
.elle-page .top8-card .top8-role {
  color: #ff3399 !important;
}
.elle-page .top8-card:hover .top8-name,
.elle-page .top8-card:hover .top8-role {
  color: #f5f5f5 !important;
}

/* Briefing column labels - all readable */
.elle-page .briefing-col h3 {
  color: #f5f5f5 !important;
  background: #ff3399 !important;
}
.elle-page .briefing-col.p0 h3 {
  background: #ff3399 !important;
  color: #f5f5f5 !important;
}
.elle-page .briefing-col.p1 h3 {
  background: #ff3399 !important;
  color: #1a0a14 !important;
}
.elle-page .briefing-col.p2 h3 {
  background: transparent !important;
  color: #ff3399 !important;
  border: 2px solid #ff3399 !important;
}
.elle-page .briefing-col.p1 ul li,
.elle-page .briefing-col.p2 ul li {
  color: #f5f5f5 !important;
}
.elle-page .briefing-col li {
  background: #faf6ef !important;
  color: #1a0a14 !important;
}
.elle-page .briefing-col li .est {
  color: #888 !important;
}
.elle-page .briefing-empty {
  background: transparent !important;
  color: #888 !important;
}

/* Hero subtitle - readable */
.elle-page .elle-hero-info .elle-title {
  color: #f08fb3 !important;
}
/* Notes + Chat alignment fixes */
.elle-page .notes-form {
  padding: 0 !important;
}
.elle-page .notes-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}
.elle-page .notes-grid {
  padding: 0 !important;
}
.elle-page .notes-empty {
  padding-left: 0 !important;
  text-align: left !important;
}
.elle-page .elle-chat-window {
  width: 100% !important;
  box-sizing: border-box !important;
}
.elle-page .elle-chat-form input {
  width: 100% !important;
  box-sizing: border-box !important;
}
.elle-page .notes-form {
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}
.elle-page .notes-form textarea {
  min-height: 60px !important;
  max-height: 200px !important;
}
.elle-page .notes-form button {
  align-self: stretch !important;
  height: auto !important;
}
.elle-page .elle-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 12px !important;
}
/* Briefing column fixes - prevent overlap, show full title */
.elle-page .briefing-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

.elle-page .briefing-col {
  min-width: 0 !important;
  overflow: hidden !important;
}

.elle-page .briefing-col h3 {
  margin: 0 0 12px !important;
  padding: 14px !important;
  text-align: center !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.elle-page .briefing-col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elle-page .briefing-col ul li {
  display: block !important;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.elle-page .briefing-col ul li .est {
  display: block !important;
  font-size: 13px !important;
  color: #888 !important;
  margin-top: 6px !important;
  font-weight: normal !important;
}

/* Notes form alignment with section padding */
.elle-page .notes-form {
  padding: 0 !important;
  width: 100% !important;
}
.elle-page .elle-chat-form {
  width: 100% !important;
  padding: 0 !important;
}
.elle-page .notes-empty {
  padding: 12px 0 0 !important;
  text-align: left !important;
}
.elle-page .notes-grid {
  padding: 16px 0 0 !important;
  margin: 0 !important;
}
/* Briefing event card text - dark text on cream background */
.elle-page .briefing-col li,
.elle-page .briefing-col ul li,
.elle-page #briefing-immediate li,
.elle-page #briefing-by3pm li,
.elle-page #briefing-signoff li {
  background: #faf6ef !important;
  color: #1a0a14 !important;
  font-weight: 500 !important;
}

.elle-page .briefing-col li .est,
.elle-page .briefing-col ul li .est {
  color: #888 !important;
}

.elle-page .briefing-empty,
.elle-page li.briefing-empty {
  background: transparent !important;
  color: #888 !important;
  font-style: italic !important;
  border: none !important;
}
/* ============================================
   FINAL FIXES - briefing + notes alignment
   ============================================ */

/* All briefing headers: outlined pink style (like Before You Sign Off) */
.elle-page .briefing-col h3,
.elle-page .briefing-col.p0 h3,
.elle-page .briefing-col.p1 h3,
.elle-page .briefing-col.p2 h3 {
  background: transparent !important;
  background-color: transparent !important;
  color: #ff3399 !important;
  border: 2px solid #ff3399 !important;
  border-radius: 8px !important;
  padding: 14px !important;
  text-align: center !important;
  margin: 0 0 12px !important;
}

/* Empty state messages centered */
.elle-page .briefing-col li.briefing-empty,
.elle-page .briefing-empty {
  background: transparent !important;
  color: #888 !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 14px !important;
  border: none !important;
}

/* Notes section internal padding to match Talk to Elle exactly */
.elle-page .elle-notes-section {
  padding: 28px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.elle-page .elle-chat {
  padding: 28px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.elle-page .notes-form,
.elle-page .elle-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.elle-page .notes-form textarea,
.elle-page .elle-chat-form input {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.elle-page .elle-chat-window {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 16px !important;
}

.elle-page .notes-grid {
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

.elle-page .notes-empty {
  text-align: left !important;
  padding: 16px 0 0 !important;
  margin: 0 !important;
}
/* ============================================
   SHARPAY PAGE - hot pink + gold + black
   ============================================ */
.sharpay-page {
  background: #0a0a0a;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #f5f5f5;
}

.sharpay-page-back {
  display: inline-block;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #d4af37;
  border-radius: 6px;
}
.sharpay-page-back:hover {
  background: #d4af37;
  color: #000;
}

.sharpay-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #15040d;
  border: 2px solid #d4af37;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

.sharpay-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #2a0a1a;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #d4af37;
}

.sharpay-hero-info .sharpay-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #d4af37;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.sharpay-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  margin: 0 0 8px;
  color: #ff3399;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #d4af37;
}

.sharpay-hero-info .sharpay-title {
  font-size: 16px;
  color: #d4af37;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: italic;
}

.sharpay-hero-info .sharpay-quote {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #ff3399;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 700;
}

.sharpay-hero-info .sharpay-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0;
}

.sharpay-actions-section,
.sharpay-chat,
.hook-library-section {
  background: #15040d;
  border: 2px solid #d4af37;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
  overflow: visible;
}
.sharpay-actions-section h2,
.sharpay-chat h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #d4af37;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}

.sharpay-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sharpay-action-btn {
  background: linear-gradient(135deg, #ff3399 0%, #d4af37 100%);
  color: #000;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}
.sharpay-action-btn:hover {
  background: #d4af37;
  color: #000;
}
.sharpay-action-btn.soft {
  background: transparent;
  color: #d4af37;
  border: 1.5px solid #d4af37;
}
.sharpay-action-btn.soft:hover {
  background: #d4af37;
  color: #000;
}

.sharpay-chat-window {
  min-height: 240px;
  background: #000;
  border: 1px solid #2a0a1a;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #f5f5f5;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
}
.sharpay-chat-placeholder {
  color: #888;
  font-style: italic;
}
.sharpay-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.sharpay-chat-form input {
  background: #000;
  border: 1.5px solid #d4af37;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.sharpay-chat-form input:focus {
  outline: 2px solid #ff3399;
  border-color: #ff3399;
}
.sharpay-chat-form input::placeholder {
  color: #666;
}
.sharpay-chat-form button {
  background: linear-gradient(135deg, #ff3399 0%, #d4af37 100%);
  color: #000;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.sharpay-chat-form button:hover {
  background: #d4af37;
}

.sharpay-msg {
  margin-bottom: 16px;
}
.sharpay-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.sharpay-msg-user .sharpay-msg-label {
  color: #f5f5f5;
  text-align: right;
}
.sharpay-msg-sharpay .sharpay-msg-label {
  color: #d4af37;
}
.sharpay-bubble {
  background: #15040d;
  border: 1.5px solid #d4af37;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: #f5f5f5;
  white-space: normal;
  word-wrap: break-word;
}
.sharpay-msg-user .sharpay-bubble {
  background: linear-gradient(135deg, #ff3399 0%, #d4af37 100%);
  color: #000;
  border-color: #d4af37;
  margin-left: 80px;
  font-weight: 500;
}
.sharpay-msg-sharpay .sharpay-bubble {
  background: #2a0a1a;
  border-color: #d4af37;
  margin-right: 80px;
}
.sharpay-typing {
  font-style: italic;
  color: #888;
}
.sharpay-error {
  background: #2a0a0a !important;
  border-color: #a13838 !important;
  color: #ff6b6b !important;
}

/* HOOK LIBRARY */
.hook-library-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px dashed #d4af37;
}
.hook-library-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  margin: 0;
  color: #d4af37;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #ff3399;
}
.hook-library-header .hook-library-sub {
  margin: 8px 0 0;
  font-size: 14px;
  color: #f5f5f5;
  font-style: italic;
}

.hook-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 140px;
  gap: 12px;
  margin-bottom: 28px;
}
.hook-form input {
  background: #000;
  border: 1.5px solid #d4af37;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.hook-form input:focus {
  outline: 2px solid #ff3399;
  border-color: #ff3399;
}
.hook-form input::placeholder {
  color: #666;
}
.hook-form button {
  background: linear-gradient(135deg, #ff3399 0%, #d4af37 100%);
  color: #000;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.hook-form button:hover {
  background: #d4af37;
}

.hook-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 30px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  grid-column: 1 / -1;
}

.hook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hook-card {
  background: #2a0a1a;
  border: 1.5px solid #d4af37;
  border-radius: 10px;
  padding: 20px 22px 16px;
  position: relative;
}
.hook-card .hook-text {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 10px;
  line-height: 1.4;
  font-style: italic;
}
.hook-card .hook-meta {
  font-size: 12px;
  color: #d4af37;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.hook-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #d4af37;
  font-size: 22px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  line-height: 1;
  font-weight: 700;
}
.hook-delete:hover {
  background: #d4af37;
  color: #000;
}
/* Sharpay - kill gold gradient, pink only */
.sharpay-page .sharpay-action-btn {
  background: #ff3399 !important;
  color: #000 !important;
  border: 0 !important;
}
.sharpay-page .sharpay-action-btn:hover {
  background: #f5f5f5 !important;
  color: #000 !important;
}
.sharpay-page .sharpay-action-btn.soft {
  background: transparent !important;
  color: #ff3399 !important;
  border: 1.5px solid #ff3399 !important;
}
.sharpay-page .sharpay-action-btn.soft:hover {
  background: #ff3399 !important;
  color: #000 !important;
}

.sharpay-page .sharpay-chat-form button {
  background: #ff3399 !important;
  color: #000 !important;
}
.sharpay-page .sharpay-chat-form button:hover {
  background: #f5f5f5 !important;
}

.sharpay-page .sharpay-msg-user .sharpay-bubble {
  background: #ff3399 !important;
  color: #000 !important;
  border-color: #ff3399 !important;
}

.sharpay-page .hook-form button {
  background: #ff3399 !important;
  color: #000 !important;
}
.sharpay-page .hook-form button:hover {
  background: #f5f5f5 !important;
}

/* Hook Library title - solid pink, readable */
.sharpay-page .hook-library-header h2 {
  color: #ff3399 !important;
  text-shadow: 2px 2px 0 #000 !important;
  background: transparent !important;
  -webkit-text-fill-color: #ff3399 !important;
}

/* Sharpay name in hero - pink solid, readable */
.sharpay-page .sharpay-hero-info h1 {
  color: #ff3399 !important;
  text-shadow: none !important;
}

/* Hero quote stays pink */
.sharpay-page .sharpay-hero-info .sharpay-quote {
  color: #ff3399 !important;
}

/* Borders gold becomes pink */
.sharpay-page .sharpay-hero,
.sharpay-page .sharpay-actions-section,
.sharpay-page .sharpay-chat,
.sharpay-page .hook-library-section {
  border-color: #ff3399 !important;
}
.sharpay-page .sharpay-hero-photo {
  border-color: #ff3399 !important;
}
.sharpay-page .sharpay-page-back {
  border-color: #ff3399 !important;
}
.sharpay-page .sharpay-page-back:hover {
  background: #ff3399 !important;
  color: #000 !important;
}

/* Headers gold to pink */
.sharpay-page .sharpay-actions-section h2,
.sharpay-page .sharpay-chat h2,
.sharpay-page .sharpay-tag,
.sharpay-page .sharpay-title {
  color: #ff3399 !important;
}

.sharpay-page .hook-library-header {
  border-bottom-color: #ff3399 !important;
}

/* Form inputs - pink borders */
.sharpay-page .sharpay-chat-form input,
.sharpay-page .hook-form input {
  border-color: #ff3399 !important;
}

/* Hook cards - pink accents */
.sharpay-page .hook-card {
  border-color: #ff3399 !important;
}
.sharpay-page .hook-card .hook-meta {
  color: #ff3399 !important;
}
.sharpay-page .hook-delete {
  color: #ff3399 !important;
}
.sharpay-page .hook-delete:hover {
  background: #ff3399 !important;
  color: #000 !important;
}

/* Sharpay chat label */
.sharpay-page .sharpay-msg-sharpay .sharpay-msg-label {
  color: #ff3399 !important;
}
.sharpay-page .sharpay-bubble {
  border-color: #ff3399 !important;
}
.sharpay-page .sharpay-msg-sharpay .sharpay-bubble {
  border-color: #ff3399 !important;
}
.hook-library-cover {
  width: 100%;
  aspect-ratio: 4 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  margin-bottom: 20px;
}
/* Pitch logger - new fields + feedback */
.pitch-logger .row-3-notes {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 14px;
  color: #f5f5f5;
  font-size: 14px;
  margin-top: 8px;
  box-sizing: border-box;
}
.pitch-logger .row-3-notes::placeholder {
  color: #888;
}
.pitch-logger #pitch-follow-up {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  color: #f5f5f5;
  font-size: 13px;
  margin-bottom: 8px;
  font-family: inherit;
}
.pitch-feedback {
  margin: 12px 0 0;
  font-size: 14px;
  font-style: italic;
  min-height: 18px;
}
.pitch-feedback.success {
  color: #4ade80;
}
.pitch-feedback.error {
  color: #ff6b6b;
}

/* ============================================
   SELENA PAGE - black + dusty rose + cream
   ============================================ */
.selena-page {
  background: #0a0a0a;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #faf6ef;
}

.selena-page-back {
  display: inline-block;
  color: #faf6ef;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #c4798f;
  border-radius: 6px;
}
.selena-page-back:hover {
  background: #c4798f;
  color: #000;
}

.selena-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #1a0e12;
  border: 2px solid #c4798f;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(196, 121, 143, 0.2);
}

.selena-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #2a151c;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #c4798f;
}

.selena-hero-info .selena-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #c4798f;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.selena-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  margin: 0 0 8px;
  color: #faf6ef;
  font-weight: 700;
  letter-spacing: 1px;
}

.selena-hero-info .selena-title {
  font-size: 16px;
  color: #c4798f;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: italic;
}

.selena-hero-info .selena-quote {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #c4798f;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 500;
}

.selena-hero-info .selena-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0;
}

.selena-actions-section,
.selena-chat,
.deals-board-section {
  background: #1a0e12;
  border: 2px solid #c4798f;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}
.selena-actions-section h2,
.selena-chat h2,
.deals-board-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #c4798f;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}

.selena-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.selena-action-btn {
  background: #c4798f;
  color: #000;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}
.selena-action-btn:hover {
  background: #faf6ef;
}
.selena-action-btn.soft {
  background: transparent;
  color: #c4798f;
  border: 1.5px solid #c4798f;
}
.selena-action-btn.soft:hover {
  background: #c4798f;
  color: #000;
}

.selena-chat-window {
  min-height: 240px;
  background: #000;
  border: 1px solid #2a151c;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  color: #faf6ef;
  width: 100%;
  box-sizing: border-box;
}
.selena-chat-placeholder {
  color: #888;
  font-style: italic;
}
.selena-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.selena-chat-form input {
  background: #000;
  border: 1.5px solid #c4798f;
  border-radius: 8px;
  padding: 14px 16px;
  color: #faf6ef;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.selena-chat-form input::placeholder {
  color: #666;
}
.selena-chat-form button {
  background: #c4798f;
  color: #000;
  border: 0;
  border-radius: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}

.selena-msg { margin-bottom: 16px; }
.selena-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.selena-msg-user .selena-msg-label { color: #faf6ef; text-align: right; }
.selena-msg-selena .selena-msg-label { color: #c4798f; }
.selena-bubble {
  background: #2a151c;
  border: 1.5px solid #c4798f;
  border-radius: 12px;
  padding: 14px 18px;
  color: #faf6ef;
  white-space: normal;
}
.selena-msg-user .selena-bubble {
  background: #c4798f;
  color: #000;
  margin-left: 80px;
}
.selena-msg-selena .selena-bubble { margin-right: 80px; }
.selena-typing { font-style: italic; color: #888; }
.selena-error { background: #2a0a0a !important; color: #ff6b6b !important; }

/* DEALS BOARD */
.deals-board-header { margin-bottom: 24px; }
.deals-board-sub {
  font-size: 14px;
  color: #888;
  font-style: italic;
  margin: 8px 0 0;
}
.deals-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 40px;
}
.deals-columns {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  overflow-x: auto;
}
.deals-column {
  background: #0a0a0a;
  border: 1px solid #2a151c;
  border-radius: 8px;
  padding: 12px;
  min-height: 200px;
}
.deals-column h3 {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #c4798f;
  text-transform: uppercase;
  margin: 0 0 12px;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a151c;
}
.col-count {
  display: inline-block;
  background: #c4798f;
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 700;
}
.col-empty {
  color: #444;
  text-align: center;
  font-size: 18px;
  margin: 20px 0;
}
.deals-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deal-card {
  background: #1a0e12;
  border: 1px solid #c4798f;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.deal-card:hover {
  background: #2a151c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(196, 121, 143, 0.3);
}
.deal-brand {
  font-size: 14px;
  font-weight: 700;
  color: #faf6ef;
  margin: 0 0 4px;
}
.deal-niche {
  font-size: 11px;
  color: #c4798f;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.deal-meta {
  font-size: 11px;
  color: #999;
  margin: 0 0 2px;
}

/* MODAL */
.deal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}
.deal-modal.hidden { display: none; }
.deal-modal-content {
  background: #1a0e12;
  border: 2px solid #c4798f;
  border-radius: 14px;
  padding: 36px 32px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.deal-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  color: #c4798f;
  font-size: 28px;
  cursor: pointer;
}
.deal-modal-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  margin: 0 0 4px;
  color: #faf6ef;
}
.modal-niche {
  color: #c4798f;
  margin: 0 0 24px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.modal-section {
  margin-bottom: 24px;
}
.modal-section label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #c4798f;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}
.modal-section select,
.modal-section input {
  background: #000;
  border: 1.5px solid #c4798f;
  border-radius: 6px;
  padding: 10px 12px;
  color: #faf6ef;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.deliverables-list {
  margin-bottom: 12px;
}
.deliverable-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 36px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: #000;
  border-radius: 6px;
  margin-bottom: 6px;
}
.deliv-desc {
  font-size: 14px;
  color: #faf6ef;
}
.deliv-due {
  font-size: 12px;
  color: #888;
}
.deliv-status {
  background: #1a0e12 !important;
  border: 1px solid #c4798f !important;
  font-size: 12px !important;
  padding: 6px !important;
}
.deliv-delete {
  background: transparent;
  border: 0;
  color: #c4798f;
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
}
.deliv-delete:hover { color: #ff6b6b; }
.deliverable-empty {
  color: #888;
  font-style: italic;
  margin: 8px 0;
}
.add-deliv-form {
  display: grid;
  grid-template-columns: 2fr 1fr 80px;
  gap: 8px;
  margin-top: 10px;
}
.add-deliv-form button {
  background: #c4798f;
  color: #000;
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
}
.payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-notes {
  color: #cccccc;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.modal-actions {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.modal-save {
  background: #c4798f;
  color: #000;
  border: 0;
  border-radius: 8px;
  padding: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
}
.modal-save:hover { background: #faf6ef; }
.modal-delete {
  background: transparent;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
  border-radius: 8px;
  padding: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
}
.modal-delete:hover { background: #ff6b6b; color: #000; }

/* ============================================
   QUICK LAUNCH BAR
   ============================================ */
.quick-launch {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin: 0 0 28px;
  padding: 16px;
  background: #0a0a0a;
  border: 1px solid #2d5f3f;
  border-radius: 12px;
}

.ql-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  text-decoration: none;
  color: #faf6ef;
  transition: all 0.15s;
  cursor: pointer;
}

.ql-btn:hover {
  background: #252525;
  border-color: #2d5f3f;
  transform: translateY(-2px);
}

.ql-btn img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: brightness(1.1);
}

.ql-btn span {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}

/* ============================================
   BRITNEY PAGE - bubblegum pink + chrome silver + black
   ============================================ */
.britney-page {
  background: #0a0a0a;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #f5f5f5;
}

.britney-page-back {
  display: inline-block;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #ff66b8;
  border-radius: 6px;
}
.britney-page-back:hover {
  background: #ff66b8;
  color: #000;
}

.britney-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #150b14;
  border: 2px solid #ff66b8;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(255, 102, 184, 0.2);
}

.britney-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #1a0e18;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #c0c0c0;
}

.britney-hero-info .britney-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #ff66b8;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.britney-hero-info h1 {
  font-size: 60px;
  margin: 0 0 8px;
  color: #ff66b8;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #c0c0c0;
}

.britney-hero-info .britney-title {
  font-size: 16px;
  color: #c0c0c0;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: italic;
}

.britney-hero-info .britney-quote {
  font-size: 28px;
  color: #ff66b8;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 600;
}

.britney-hero-info .britney-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0;
}

.britney-actions-section,
.britney-chat,
.rates-section {
  background: #150b14;
  border: 2px solid #ff66b8;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}
.britney-actions-section h2,
.britney-chat h2,
.rates-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #ff66b8;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}

.britney-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.britney-action-btn {
  background: #ff66b8;
  color: #000;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}
.britney-action-btn:hover {
  background: #c0c0c0;
}
.britney-action-btn.soft {
  background: transparent;
  color: #ff66b8;
  border: 1.5px solid #ff66b8;
}
.britney-action-btn.soft:hover {
  background: #ff66b8;
  color: #000;
}

.britney-chat-window {
  min-height: 240px;
  background: #000;
  border: 1px solid #1a0e18;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  color: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
}
.britney-chat-placeholder {
  color: #888;
  font-style: italic;
}
.britney-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.britney-chat-form input {
  background: #000;
  border: 1.5px solid #ff66b8;
  border-radius: 8px;
  padding: 14px 16px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.britney-chat-form input::placeholder {
  color: #666;
}
.britney-chat-form button {
  background: #ff66b8;
  color: #000;
  border: 0;
  border-radius: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.britney-chat-form button:hover { background: #c0c0c0; }

.britney-msg { margin-bottom: 16px; }
.britney-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.britney-msg-user .britney-msg-label { color: #f5f5f5; text-align: right; }
.britney-msg-britney .britney-msg-label { color: #ff66b8; }
.britney-bubble {
  background: #1a0e18;
  border: 1.5px solid #ff66b8;
  border-radius: 12px;
  padding: 14px 18px;
  color: #f5f5f5;
  white-space: normal;
}
.britney-msg-user .britney-bubble {
  background: #ff66b8;
  color: #000;
  margin-left: 80px;
}
.britney-msg-britney .britney-bubble { margin-right: 80px; }
.britney-typing { font-style: italic; color: #888; }
.britney-error { background: #2a0a0a !important; color: #ff6b6b !important; }

/* RATES TRACKER */
.rates-header {
  margin-bottom: 24px;
}
.rates-sub {
  font-size: 14px;
  color: #c0c0c0;
  font-style: italic;
  margin: 8px 0 0;
}

.rates-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 140px;
  gap: 12px;
  margin-bottom: 24px;
}
.rates-form input {
  background: #000;
  border: 1.5px solid #c0c0c0;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.rates-form input:focus {
  outline: 2px solid #ff66b8;
  border-color: #ff66b8;
}
.rates-form input::placeholder {
  color: #666;
}
.rates-form button {
  background: #ff66b8;
  color: #000;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.rates-form button:hover { background: #c0c0c0; }

.rates-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 30px;
  grid-column: 1 / -1;
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.rate-card {
  background: linear-gradient(135deg, #1a0e18 0%, #2a151c 100%);
  border: 1.5px solid #c0c0c0;
  border-radius: 10px;
  padding: 18px 20px 14px;
  position: relative;
}
.rate-card .rate-type {
  font-size: 12px;
  font-weight: 700;
  color: #c0c0c0;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.rate-card .rate-amount {
  font-size: 32px;
  font-weight: 900;
  color: #ff66b8;
  margin: 0 0 8px;
  line-height: 1;
}
.rate-card .rate-notes {
  font-size: 12px;
  color: #999;
  margin: 0;
  font-style: italic;
}
.rate-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #c0c0c0;
  font-size: 20px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  line-height: 1;
  font-weight: 700;
}
.rate-delete:hover {
  background: #ff66b8;
  color: #000;
}

/* ============================================
   BLAIR PAGE - navy + gold + cream
   ============================================ */
.blair-page {
  background: #0a0e1a;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #faf6ef;
}

.blair-page-back {
  display: inline-block;
  color: #faf6ef;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #d4af37;
  border-radius: 6px;
}
.blair-page-back:hover {
  background: #d4af37;
  color: #0a0e1a;
}

.blair-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #0f1a2e;
  border: 2px solid #d4af37;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

.blair-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #15243a;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #d4af37;
}

.blair-hero-info .blair-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #d4af37;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.blair-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  margin: 0 0 8px;
  color: #faf6ef;
  font-weight: 900;
  letter-spacing: 1px;
}

.blair-hero-info .blair-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #d4af37;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: italic;
}

.blair-hero-info .blair-quote {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #d4af37;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 700;
}

.blair-hero-info .blair-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0;
}

.blair-actions-section,
.blair-chat,
.wishlist-section {
  background: #0f1a2e;
  border: 2px solid #d4af37;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}
.blair-actions-section h2,
.blair-chat h2,
.wishlist-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #d4af37;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}

.blair-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.blair-action-btn {
  background: #d4af37;
  color: #0a0e1a;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}
.blair-action-btn:hover {
  background: #faf6ef;
}
.blair-action-btn.soft {
  background: transparent;
  color: #d4af37;
  border: 1.5px solid #d4af37;
}
.blair-action-btn.soft:hover {
  background: #d4af37;
  color: #0a0e1a;
}

.blair-chat-window {
  min-height: 240px;
  background: #0a0e1a;
  border: 1px solid #15243a;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  color: #faf6ef;
  width: 100%;
  box-sizing: border-box;
}
.blair-chat-placeholder {
  color: #888;
  font-style: italic;
}
.blair-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.blair-chat-form input {
  background: #0a0e1a;
  border: 1.5px solid #d4af37;
  border-radius: 8px;
  padding: 14px 16px;
  color: #faf6ef;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.blair-chat-form input::placeholder {
  color: #666;
}
.blair-chat-form button {
  background: #d4af37;
  color: #0a0e1a;
  border: 0;
  border-radius: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.blair-chat-form button:hover { background: #faf6ef; }

.blair-msg { margin-bottom: 16px; }
.blair-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.blair-msg-user .blair-msg-label { color: #faf6ef; text-align: right; }
.blair-msg-blair .blair-msg-label { color: #d4af37; }
.blair-bubble {
  background: #15243a;
  border: 1.5px solid #d4af37;
  border-radius: 12px;
  padding: 14px 18px;
  color: #faf6ef;
  white-space: normal;
}
.blair-msg-user .blair-bubble {
  background: #d4af37;
  color: #0a0e1a;
  margin-left: 80px;
}
.blair-msg-blair .blair-bubble { margin-right: 80px; }
.blair-typing { font-style: italic; color: #888; }
.blair-error { background: #2a0a0a !important; color: #ff6b6b !important; }

/* WISHLIST */
.wishlist-header { margin-bottom: 24px; }
.wishlist-sub {
  font-size: 14px;
  color: #cccccc;
  font-style: italic;
  margin: 8px 0 0;
}

.wishlist-form {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 100px;
  gap: 12px;
  margin-bottom: 24px;
}
.wishlist-form input,
.wishlist-form select {
  background: #0a0e1a;
  border: 1.5px solid #d4af37;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #faf6ef;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.wishlist-form input::placeholder { color: #666; }
.wishlist-form button {
  background: #d4af37;
  color: #0a0e1a;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.wishlist-form button:hover { background: #faf6ef; }

.wishlist-section .wishlist-empty {
  color: #888 !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 30px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
}

.wishlist-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wishlist-tier {
  background: #0a0e1a;
  border: 1px solid #15243a;
  border-radius: 10px;
  padding: 16px;
}
.wishlist-tier h3 {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #d4af37;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed #d4af37;
}
.tier-ready h3 { color: #d4af37; }
.tier-building h3 { color: #faf6ef; }
.tier-dreaming h3 { color: #888; }

.tier-count {
  display: inline-block;
  background: #d4af37;
  color: #0a0e1a;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 700;
}
.tier-empty {
  color: #444;
  text-align: center;
  font-size: 18px;
  margin: 20px 0;
}
.wishlist-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wishlist-card {
  background: #15243a;
  border: 1px solid #d4af37;
  border-radius: 8px;
  padding: 14px;
  position: relative;
}
.wish-brand {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: #faf6ef;
  margin: 0 0 6px;
}
.wish-why {
  font-size: 12px;
  color: #cccccc;
  margin: 0 0 10px;
  font-style: italic;
  line-height: 1.4;
}
.wish-readiness-select {
  background: #0a0e1a;
  border: 1px solid #d4af37;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #faf6ef;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
}
.wish-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #d4af37;
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  line-height: 1;
  font-weight: 700;
}
.wish-delete:hover {
  background: #d4af37;
  color: #0a0e1a;
}

/* ============================================
   MILEY PAGE - black + silver + red
   ============================================ */
.miley-page {
  background: #0a0a0a;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #f5f5f5;
}

.miley-page-back {
  display: inline-block;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 1px solid #c0c0c0;
  border-radius: 6px;
}
.miley-page-back:hover {
  background: #c0c0c0;
  color: #000;
}

.miley-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #141414;
  border: 2px solid #c0c0c0;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 0 40px rgba(192, 192, 192, 0.15);
}

.miley-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  border: 3px solid #dc2626;
}

.miley-hero-info .miley-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #dc2626;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.miley-hero-info h1 {
  font-size: 60px;
  margin: 0 0 8px;
  color: #f5f5f5;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.miley-hero-info .miley-title {
  font-size: 16px;
  color: #c0c0c0;
  margin: 0 0 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: italic;
}

.miley-hero-info .miley-quote {
  font-size: 28px;
  color: #dc2626;
  font-style: italic;
  margin: 0 0 24px;
  line-height: 1.3;
  font-weight: 700;
}

.miley-hero-info .miley-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0;
}

.miley-actions-section,
.miley-chat,
.inventory-section {
  background: #141414;
  border: 2px solid #c0c0c0;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}
.miley-actions-section h2,
.miley-chat h2,
.inventory-section h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #c0c0c0;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}

.miley-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.miley-action-btn {
  background: #dc2626;
  color: #f5f5f5;
  border: 0;
  border-radius: 8px;
  padding: 20px 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}
.miley-action-btn:hover {
  background: #c0c0c0;
  color: #000;
}
.miley-action-btn.soft {
  background: transparent;
  color: #c0c0c0;
  border: 1.5px solid #c0c0c0;
}
.miley-action-btn.soft:hover {
  background: #c0c0c0;
  color: #000;
}

.miley-chat-window {
  min-height: 240px;
  background: #000;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 16px;
  color: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
}
.miley-chat-placeholder {
  color: #888;
  font-style: italic;
}
.miley-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.miley-chat-form input {
  background: #000;
  border: 1.5px solid #c0c0c0;
  border-radius: 8px;
  padding: 14px 16px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.miley-chat-form input::placeholder {
  color: #666;
}
.miley-chat-form button {
  background: #dc2626;
  color: #f5f5f5;
  border: 0;
  border-radius: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.miley-chat-form button:hover { background: #c0c0c0; color: #000; }

.miley-msg { margin-bottom: 16px; }
.miley-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
  color: #888;
}
.miley-msg-user .miley-msg-label { color: #f5f5f5; text-align: right; }
.miley-msg-miley .miley-msg-label { color: #dc2626; }
.miley-bubble {
  background: #1a1a1a;
  border: 1.5px solid #c0c0c0;
  border-radius: 12px;
  padding: 14px 18px;
  color: #f5f5f5;
  white-space: normal;
}
.miley-msg-user .miley-bubble {
  background: #dc2626;
  color: #f5f5f5;
  margin-left: 80px;
}
.miley-msg-miley .miley-bubble { margin-right: 80px; }
.miley-typing { font-style: italic; color: #888; }
.miley-error { background: #2a0a0a !important; color: #ff6b6b !important; }

/* INVENTORY */
.inventory-header { margin-bottom: 24px; }
.inventory-sub {
  font-size: 14px;
  color: #c0c0c0;
  font-style: italic;
  margin: 8px 0 0;
}

.inventory-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 140px;
  gap: 12px;
  margin-bottom: 24px;
}
.inventory-form input {
  background: #000;
  border: 1.5px solid #c0c0c0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #f5f5f5;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.inventory-form input:focus {
  outline: 2px solid #dc2626;
  border-color: #dc2626;
}
.inventory-form input::placeholder { color: #666; }
.inventory-form button {
  background: #dc2626;
  color: #f5f5f5;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.inventory-form button:hover { background: #c0c0c0; color: #000; }

.inventory-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 30px;
  white-space: nowrap;
  margin: 0;
  grid-column: 1 / -1;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.product-card {
  background: #1a1a1a;
  border: 1.5px solid #c0c0c0;
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
}
.product-card:hover {
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.product-card.no-content {
  border-color: #dc2626;
  background: #2a0a0a;
}
.product-card .prod-name {
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0 0 6px;
}
.product-card .prod-brand {
  font-size: 12px;
  color: #c0c0c0;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.product-card .prod-category {
  font-size: 11px;
  color: #888;
  margin: 0 0 10px;
  font-style: italic;
}
.product-card .prod-status {
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.product-card.no-content .prod-status {
  color: #dc2626;
}
.product-card.has-content .prod-status {
  color: #c0c0c0;
}
.prod-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #c0c0c0;
  font-size: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  line-height: 1;
  font-weight: 700;
}
.prod-delete:hover {
  background: #dc2626;
  color: #f5f5f5;
}

/* PRODUCT MODAL */
.product-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}
.product-modal.hidden { display: none; }
.product-modal-content {
  background: #141414;
  border: 2px solid #c0c0c0;
  border-radius: 14px;
  padding: 36px 32px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.product-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  color: #c0c0c0;
  font-size: 28px;
  cursor: pointer;
}
.product-modal-content h2 {
  font-size: 28px;
  margin: 0 0 4px;
  color: #f5f5f5;
  font-weight: 900;
  text-transform: uppercase;
}
.product-modal-content .modal-niche {
  color: #dc2626;
  margin: 0 0 24px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.videos-list {
  margin-bottom: 12px;
}
.video-row {
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #000;
  border-radius: 6px;
  margin-bottom: 6px;
}
.video-date {
  font-size: 13px;
  color: #c0c0c0;
  font-weight: 600;
}
.video-notes {
  font-size: 13px;
  color: #999;
  font-style: italic;
}
.video-delete {
  background: transparent;
  border: 0;
  color: #c0c0c0;
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
}
.video-delete:hover { color: #dc2626; }
.video-empty {
  color: #888;
  font-style: italic;
  margin: 8px 0;
}
.add-video-form {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 10px;
  margin-top: 14px;
}
.add-video-form input {
  background: #000;
  border: 1.5px solid #c0c0c0;
  border-radius: 6px;
  padding: 10px 12px;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 13px;
}
.add-video-form input::placeholder { color: #666; }
.add-video-form button {
  background: #dc2626;
  color: #f5f5f5;
  border: 0;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.2px;
}
.add-video-form button:hover { background: #c0c0c0; color: #000; }

/* ============================================
   JADE WEST — Black + Teal + Silver
   ============================================ */
.jade-page {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  color: #e8e8e8;
}

.jade-page-back {
  display: inline-block;
  color: #2dd4bf;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.jade-page-back:hover {
  color: #14b8a6;
}

/* HERO */
.jade-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f2a2a 100%);
  border: 1px solid #2dd4bf;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(45, 212, 191, 0.15);
}

.jade-hero-photo {
  width: 280px;
  height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 2px solid #2dd4bf;
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.3);
}

.jade-hero-info .jade-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: #c0c0c0;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 8px 0;
}

.jade-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 3.5rem;
  margin: 0 0 8px 0;
  color: #2dd4bf;
  line-height: 1;
}

.jade-title {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: #c0c0c0;
  margin: 0 0 16px 0;
}

.jade-quote {
  font-style: italic;
  color: #2dd4bf;
  border-left: 3px solid #2dd4bf;
  padding-left: 12px;
  margin: 16px 0;
  font-size: 1rem;
}

.jade-bio {
  color: #d0d0d0;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 16px 0 0 0;
}

/* ACTIONS */
.jade-actions-section {
  margin-bottom: 32px;
}

.jade-actions-section h2 {
  font-family: 'Playfair Display', serif;
  color: #2dd4bf;
  margin-bottom: 16px;
}

.jade-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.jade-action-btn {
  background: #2dd4bf;
  color: #000;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.jade-action-btn:hover {
  background: #14b8a6;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.5);
  transform: translateY(-1px);
}

.jade-action-btn.soft {
  background: transparent;
  color: #2dd4bf;
  border: 1px solid #2dd4bf;
}

.jade-action-btn.soft:hover {
  background: #2dd4bf;
  color: #000;
}

/* CHAT */
.jade-chat {
  background: #0d0d0d;
  border: 1px solid #2dd4bf;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.jade-chat h2 {
  font-family: 'Playfair Display', serif;
  color: #2dd4bf;
  margin: 0 0 16px 0;
}

.jade-chat-window {
  background: #000;
  border: 1px solid #1a3a3a;
  border-radius: 8px;
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.jade-chat-placeholder {
  color: #888;
  font-style: italic;
  margin: 0;
}

.jade-msg {
  margin-bottom: 12px;
}

.jade-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: #c0c0c0;
  margin: 0 0 4px 0;
}

.jade-bubble {
  background: #1a1a1a;
  color: #e8e8e8;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0;
  border-left: 3px solid #c0c0c0;
  display: inline-block;
  max-width: 85%;
  white-space: normal;
}

.jade-msg-user .jade-bubble {
  background: #2dd4bf;
  color: #000;
  border-left: none;
  border-right: 3px solid #14b8a6;
  border-radius: 12px 12px 0 12px;
}

.jade-msg-user {
  text-align: right;
}

.jade-typing {
  opacity: 0.6;
}

.jade-error {
  color: #ff6b6b;
}

.jade-chat-form {
  display: flex;
  gap: 8px;
}

.jade-chat-form input {
  flex: 1;
  background: #1a1a1a;
  color: #e8e8e8;
  border: 1px solid #2dd4bf;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.jade-chat-form input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.5);
}

.jade-chat-form button {
  background: #2dd4bf;
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-size: 1rem;
}

.jade-chat-form button:hover {
  background: #14b8a6;
}

/* CLIP LOG */
.cliplog-section {
  background: #0d0d0d;
  border: 1px solid #2dd4bf;
  border-radius: 12px;
  padding: 24px;
}

.cliplog-header h2 {
  font-family: 'Playfair Display', serif;
  color: #2dd4bf;
  margin: 0 0 4px 0;
}

.cliplog-sub {
  color: #c0c0c0;
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

.cliplog-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto;
  gap: 8px;
  margin-bottom: 20px;
}

.cliplog-form input,
.cliplog-form select {
  background: #1a1a1a;
  color: #e8e8e8;
  border: 1px solid #2dd4bf;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.cliplog-form button {
  background: #2dd4bf;
  color: #000;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}

.cliplog-form button:hover {
  background: #14b8a6;
}

.cliplog-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

.cliplog-source-card {
  background: #1a1a1a;
  border: 1px solid #2dd4bf;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.source-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.source-type-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #c0c0c0;
  font-size: 0.75rem;
  margin: 0 0 4px 0;
  text-transform: uppercase;
}

.source-card-header h3 {
  font-family: 'Playfair Display', serif;
  color: #2dd4bf;
  margin: 0 0 4px 0;
  font-size: 1.3rem;
}

.source-duration {
  color: #c0c0c0;
  font-size: 0.85rem;
  margin: 0;
}

.source-notes {
  color: #d0d0d0;
  font-size: 0.85rem;
  font-style: italic;
  margin: 4px 0 0 0;
}

.source-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #c0c0c0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.source-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

.source-clips {
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px solid #333;
}

.clips-empty {
  color: #888;
  font-style: italic;
  font-size: 0.85rem;
  margin: 8px 0;
}

.clip-row {
  display: grid;
  grid-template-columns: 110px 90px 80px 1fr 28px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #222;
  font-size: 0.85rem;
}

.clip-status-select {
  background: #0d0d0d;
  color: #2dd4bf;
  border: 1px solid #2dd4bf;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.clip-platform {
  color: #2dd4bf;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.clip-time {
  color: #c0c0c0;
  font-family: monospace;
}

.clip-hook {
  color: #e8e8e8;
}

.clip-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #333;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}

.clip-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

.add-clip-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

.add-clip-form input {
  background: #0d0d0d;
  color: #e8e8e8;
  border: 1px solid #333;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.add-clip-form input:focus {
  outline: none;
  border-color: #2dd4bf;
}

.add-clip-form button {
  background: #2dd4bf;
  color: #000;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 0.85rem;
}

.add-clip-form button:hover {
  background: #14b8a6;
}

/* ============================================
   AGENT BANNERS — Reusable across all agents
   ============================================ */
.agent-banner {
  width: 100%;
  aspect-ratio: 15 / 4;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  margin-bottom: 24px;
  background-color: transparent;
}

/* Hide if no background image is set (graceful fallback for missing banners) */
.agent-banner:not([style*="url"]) {
  display: none;
}

/* ============================================
   BACK TO HQ — Bottom link on agent pages
   ============================================ */
.agent-page-back-bottom {
  display: block;
  text-align: center;
  margin: 40px auto 24px auto;
  padding: 16px 32px;
  color: #c0c0c0;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 1rem;
  border: 1px solid #c0c0c0;
  border-radius: 8px;
  width: fit-content;
  transition: all 0.2s ease;
}

.agent-page-back-bottom:hover {
  background: #c0c0c0;
  color: #000;
}

/* ============================================
   KESHA — Black + Electric Blue + Gold
   ============================================ */
.kesha-page {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  color: #f0f0f0;
}

.kesha-page-back {
  display: inline-block;
  color: #00d4ff;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.kesha-page-back:hover {
  color: #d4af37;
}

/* HERO */
.kesha-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  background: linear-gradient(135deg, #0a0a0a 0%, #0a1a2a 100%);
  border: 1px solid #00d4ff;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
}

.kesha-hero-photo {
  width: 280px;
  height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 2px solid #00d4ff;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.kesha-hero-info .kesha-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: #d4af37;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 8px 0;
}

.kesha-hero-info h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 700;
  font-size: 4rem;
  margin: 0 0 8px 0;
  color: #00d4ff;
  line-height: 1;
  letter-spacing: 2px;
}

.kesha-title {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: #d4af37;
  margin: 0 0 16px 0;
}

.kesha-quote {
  font-style: italic;
  color: #00d4ff;
  border-left: 3px solid #00d4ff;
  padding-left: 12px;
  margin: 16px 0;
  font-size: 1rem;
}

.kesha-bio {
  color: #d0d0d0;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 16px 0 0 0;
}

/* ACTIONS */
.kesha-actions-section {
  margin-bottom: 32px;
}

.kesha-actions-section h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #00d4ff;
  margin-bottom: 16px;
}

.kesha-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.kesha-action-btn {
  background: #00d4ff;
  color: #000;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kesha-action-btn:hover {
  background: #d4af37;
  color: #000;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}

.kesha-action-btn.soft {
  background: transparent;
  color: #d4af37;
  border: 1px solid #d4af37;
}

.kesha-action-btn.soft:hover {
  background: #d4af37;
  color: #000;
}

/* CHAT */
.kesha-chat {
  background: #0d0d0d;
  border: 1px solid #00d4ff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.kesha-chat h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #00d4ff;
  margin: 0 0 16px 0;
}

.kesha-chat-window {
  background: #000;
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.kesha-chat-placeholder {
  color: #888;
  font-style: italic;
  margin: 0;
}

.kesha-msg {
  margin-bottom: 12px;
}

.kesha-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: #d4af37;
  margin: 0 0 4px 0;
}

.kesha-bubble {
  background: #1a1a1a;
  color: #f0f0f0;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0;
  border-left: 3px solid #d4af37;
  display: inline-block;
  max-width: 85%;
  white-space: normal;
}

.kesha-msg-user .kesha-bubble {
  background: #00d4ff;
  color: #000;
  border-left: none;
  border-right: 3px solid #d4af37;
  border-radius: 12px 12px 0 12px;
}

.kesha-msg-user {
  text-align: right;
}

.kesha-typing {
  opacity: 0.6;
}

.kesha-error {
  color: #ff6b6b;
}

.kesha-chat-form {
  display: flex;
  gap: 8px;
}

.kesha-chat-form input {
  flex: 1;
  background: #1a1a1a;
  color: #f0f0f0;
  border: 1px solid #00d4ff;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.kesha-chat-form input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.kesha-chat-form button {
  background: #00d4ff;
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-size: 1rem;
}

.kesha-chat-form button:hover {
  background: #d4af37;
}

/* STREAM KIT */
.streamkit-section {
  background: #0d0d0d;
  border: 1px solid #00d4ff;
  border-radius: 12px;
  padding: 24px;
}

.streamkit-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #00d4ff;
  margin: 0 0 4px 0;
}

.streamkit-sub {
  color: #c0c0c0;
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

.streamkit-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #333;
}

.kit-tab {
  background: transparent;
  color: #888;
  border: none;
  padding: 12px 20px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.kit-tab:hover {
  color: #00d4ff;
}

.kit-tab.active {
  color: #00d4ff;
  border-bottom-color: #00d4ff;
}

.kit-tab-panel {
  display: none;
}

.kit-tab-panel.active {
  display: block;
}

.streamkit-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto;
  gap: 8px;
  margin-bottom: 20px;
}

.streamkit-form input,
.streamkit-form select {
  background: #1a1a1a;
  color: #f0f0f0;
  border: 1px solid #00d4ff;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.streamkit-form button {
  background: #00d4ff;
  color: #000;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}

.streamkit-form button:hover {
  background: #d4af37;
}

.kit-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

.kit-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr 1fr 28px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #1a1a1a;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.kit-status {
  background: #0d0d0d;
  color: #00d4ff;
  border: 1px solid #00d4ff;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.kit-type {
  color: #d4af37;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.kit-name {
  color: #f0f0f0;
  font-weight: 600;
}

.kit-source {
  color: #c0c0c0;
  font-size: 0.85rem;
  font-style: italic;
}

.kit-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #333;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}

.kit-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

/* ============================================
   SABRINA — Baby Blue + Black + White
   ============================================ */
.sabrina-page {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  color: #f5f5f5;
}

.sabrina-page .form-field label {
  color: #a8d8ff !important;
}

.sabrina-page .form-field input,
.sabrina-page .form-field input[type="number"] {
  background: #1a1a1a !important;
  color: #f5f5f5 !important;
  border: 1px solid #a8d8ff !important;
}

.sabrina-page .field-submit button {
  background: #a8d8ff !important;
  color: #0a0a0a !important;
  height: 36px;
  margin-top: auto;
}

.sabrina-page-back {
  display: inline-block;
  color: #a8d8ff;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.sabrina-page-back:hover {
  color: #ffffff;
}

/* HERO */
.sabrina-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f1f2f 100%);
  border: 1px solid #a8d8ff;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(168, 216, 255, 0.15);
}

.sabrina-hero-photo {
  width: 280px;
  height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 2px solid #a8d8ff;
  box-shadow: 0 0 20px rgba(168, 216, 255, 0.3);
}

.sabrina-hero-info .sabrina-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 8px 0;
}

.sabrina-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 3.5rem;
  margin: 0 0 8px 0;
  color: #a8d8ff;
  line-height: 1;
}

.sabrina-title {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.sabrina-quote {
  font-style: italic;
  color: #a8d8ff;
  border-left: 3px solid #a8d8ff;
  padding-left: 12px;
  margin: 16px 0;
  font-size: 1rem;
}

.sabrina-bio {
  color: #d8d8d8;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 16px 0 0 0;
}

/* ACTIONS */
.sabrina-actions-section {
  margin-bottom: 32px;
}

.sabrina-actions-section h2 {
  font-family: 'Playfair Display', serif;
  color: #a8d8ff;
  margin-bottom: 16px;
}

.sabrina-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sabrina-action-btn {
  background: #a8d8ff;
  color: #0a0a0a;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sabrina-action-btn:hover {
  background: #ffffff;
  box-shadow: 0 0 15px rgba(168, 216, 255, 0.5);
  transform: translateY(-1px);
}

.sabrina-action-btn.soft {
  background: transparent;
  color: #a8d8ff;
  border: 1px solid #a8d8ff;
}

.sabrina-action-btn.soft:hover {
  background: #a8d8ff;
  color: #0a0a0a;
}

/* CHAT */
.sabrina-chat {
  background: #0d0d0d;
  border: 1px solid #a8d8ff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.sabrina-chat h2 {
  font-family: 'Playfair Display', serif;
  color: #a8d8ff;
  margin: 0 0 16px 0;
}

.sabrina-chat-window {
  background: #000;
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.sabrina-chat-placeholder {
  color: #888;
  font-style: italic;
  margin: 0;
}

.sabrina-msg {
  margin-bottom: 12px;
}

.sabrina-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.sabrina-bubble {
  background: #1a1a1a;
  color: #f5f5f5;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0;
  border-left: 3px solid #ffffff;
  display: inline-block;
  max-width: 85%;
  white-space: normal;
}

.sabrina-msg-user .sabrina-bubble {
  background: #a8d8ff;
  color: #0a0a0a;
  border-left: none;
  border-right: 3px solid #ffffff;
  border-radius: 12px 12px 0 12px;
}

.sabrina-msg-user {
  text-align: right;
}

.sabrina-typing {
  opacity: 0.6;
}

.sabrina-error {
  color: #ff6b6b;
}

.sabrina-chat-form {
  display: flex;
  gap: 8px;
}

.sabrina-chat-form input {
  flex: 1;
  background: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid #a8d8ff;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.sabrina-chat-form input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(168, 216, 255, 0.5);
}

.sabrina-chat-form button {
  background: #a8d8ff;
  color: #0a0a0a;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-size: 1rem;
}

.sabrina-chat-form button:hover {
  background: #ffffff;
}

/* GAME LIBRARY */
.gamelibrary-section {
  background: #0d0d0d;
  border: 1px solid #a8d8ff;
  border-radius: 12px;
  padding: 24px;
}

.gamelibrary-header h2 {
  font-family: 'Playfair Display', serif;
  color: #a8d8ff;
  margin: 0 0 4px 0;
}

.gamelibrary-sub {
  color: #c0c0c0;
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

.gamelibrary-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 80px auto;
  gap: 8px;
  margin-bottom: 20px;
}

.gamelibrary-form input {
  background: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid #a8d8ff;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.gamelibrary-form button {
  background: #a8d8ff;
  color: #0a0a0a;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}

.gamelibrary-form button:hover {
  background: #ffffff;
}

.game-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

.game-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr 110px 110px 28px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #1a1a1a;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.game-status {
  background: #0d0d0d;
  color: #a8d8ff;
  border: 1px solid #a8d8ff;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.game-genre {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.game-title {
  color: #f5f5f5;
  font-weight: 600;
}

.game-last {
  color: #c0c0c0;
  font-size: 0.85rem;
  font-family: monospace;
}

.request-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.req-btn {
  background: transparent;
  color: #a8d8ff;
  border: 1px solid #a8d8ff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}

.req-btn:hover {
  background: #a8d8ff;
  color: #0a0a0a;
}

.req-count {
  color: #ffffff;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.game-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #333;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}

.game-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

/* ============================================
   BARBIE — Barbie Pink + Navy + White
   ============================================ */
.barbie-page {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  color: #f5f5f5;
}

.barbie-page-back {
  display: inline-block;
  color: #e0218a;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.barbie-page-back:hover {
  color: #ffffff;
}

/* HERO */
.barbie-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  background: linear-gradient(135deg, #1a2855 0%, #0d1530 100%);
  border: 2px solid #e0218a;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(224, 33, 138, 0.25);
}

.barbie-hero-photo {
  width: 280px;
  height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 2px solid #e0218a;
  box-shadow: 0 0 20px rgba(224, 33, 138, 0.4);
}

.barbie-hero-info .barbie-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 8px 0;
}

.barbie-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 4rem;
  margin: 0 0 8px 0;
  color: #e0218a;
  line-height: 1;
}

.barbie-title {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.barbie-quote {
  font-style: italic;
  color: #e0218a;
  border-left: 3px solid #e0218a;
  padding-left: 12px;
  margin: 16px 0;
  font-size: 1rem;
}

.barbie-bio {
  color: #e0e0e0;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 16px 0 0 0;
}

/* ACTIONS */
.barbie-actions-section {
  margin-bottom: 32px;
}

.barbie-actions-section h2 {
  font-family: 'Playfair Display', serif;
  color: #e0218a;
  margin-bottom: 16px;
}

.barbie-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.barbie-action-btn {
  background: #e0218a;
  color: #ffffff;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.barbie-action-btn:hover {
  background: #ffffff;
  color: #1a2855;
  box-shadow: 0 0 15px rgba(224, 33, 138, 0.6);
  transform: translateY(-1px);
}

.barbie-action-btn.soft {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.barbie-action-btn.soft:hover {
  background: #ffffff;
  color: #1a2855;
}

/* CHAT */
.barbie-chat {
  background: #0d1530;
  border: 1px solid #e0218a;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.barbie-chat h2 {
  font-family: 'Playfair Display', serif;
  color: #e0218a;
  margin: 0 0 16px 0;
}

.barbie-chat-window {
  background: #050a1a;
  border: 1px solid #1a2855;
  border-radius: 8px;
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.barbie-chat-placeholder {
  color: #888;
  font-style: italic;
  margin: 0;
}

.barbie-msg {
  margin-bottom: 12px;
}

.barbie-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.barbie-bubble {
  background: #1a2855;
  color: #f5f5f5;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0;
  border-left: 3px solid #ffffff;
  display: inline-block;
  max-width: 85%;
  white-space: normal;
}

.barbie-msg-user .barbie-bubble {
  background: #e0218a;
  color: #ffffff;
  border-left: none;
  border-right: 3px solid #ffffff;
  border-radius: 12px 12px 0 12px;
}

.barbie-msg-user {
  text-align: right;
}

.barbie-typing {
  opacity: 0.6;
}

.barbie-error {
  color: #ff6b6b;
}

.barbie-chat-form {
  display: flex;
  gap: 8px;
}

.barbie-chat-form input {
  flex: 1;
  background: #1a2855;
  color: #f5f5f5;
  border: 1px solid #e0218a;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.barbie-chat-form input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(224, 33, 138, 0.5);
}

.barbie-chat-form button {
  background: #e0218a;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-size: 1rem;
}

.barbie-chat-form button:hover {
  background: #ffffff;
  color: #1a2855;
}

/* EDIT QUEUE — Kanban Board */
.editqueue-section {
  background: #0d1530;
  border: 1px solid #e0218a;
  border-radius: 12px;
  padding: 24px;
}

.editqueue-header h2 {
  font-family: 'Playfair Display', serif;
  color: #e0218a;
  margin: 0 0 4px 0;
}

.editqueue-sub {
  color: #c0c0c0;
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

/* Top stat cards (display only, not clickable) */
.queue-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: #1a2855;
  border: 1px solid #e0218a;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #e0218a;
  line-height: 1;
}

.stat-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #ffffff;
  font-size: 0.85rem;
}

/* Add form */
.editqueue-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr auto;
  gap: 8px;
  margin-bottom: 24px;
}

.editqueue-form input,
.editqueue-form select {
  background: #1a2855;
  color: #f5f5f5;
  border: 1px solid #e0218a;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.editqueue-form button {
  background: #e0218a;
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}

.editqueue-form button:hover {
  background: #ffffff;
  color: #1a2855;
}

/* Kanban Board */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.kanban-column {
  background: #050a1a;
  border-radius: 8px;
  padding: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.kanban-filmed { border-top: 4px solid #ffd700; }
.kanban-editing { border-top: 4px solid #e0218a; }
.kanban-ready { border-top: 4px solid #00ff88; }
.kanban-posted { border-top: 4px solid #888; }

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a2855;
}

.kanban-column-header h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #ffffff;
  margin: 0;
  font-size: 1rem;
}

.column-count {
  background: #e0218a;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 12px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-size: 0.8rem;
  min-width: 24px;
  text-align: center;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.kanban-empty {
  color: #555;
  font-style: italic;
  text-align: center;
  font-size: 0.85rem;
  padding: 16px 8px;
  margin: 0;
}

/* Card */
.kanban-card {
  background: #1a2855;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 3px solid #e0218a;
}

.card-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.card-type {
  background: #0d1530;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-size: 0.7rem;
}

.card-brand {
  background: #e0218a;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-style: italic;
}

.card-deadline {
  background: #ffd700;
  color: #1a2855;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: monospace;
}

.card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.card-back,
.card-forward,
.card-kill,
.card-delete,
.card-revive {
  background: #0d1530;
  color: #ffffff;
  border: 1px solid #e0218a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  transition: all 0.15s ease;
}

.card-forward {
  background: #e0218a;
  border-color: #e0218a;
}

.card-forward:hover {
  background: #ffffff;
  color: #1a2855;
}

.card-back:hover,
.card-revive:hover {
  background: #ffffff;
  color: #1a2855;
}

.card-kill:hover {
  background: #888;
  border-color: #888;
}

.card-delete {
  background: transparent;
  border-color: #444;
  color: #888;
}

.card-delete:hover {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: #ffffff;
}

/* Killed section */
.killed-toggle {
  text-align: center;
  margin-top: 16px;
}

#show-killed-btn {
  background: transparent;
  color: #888;
  border: 1px solid #333;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-size: 0.85rem;
  cursor: pointer;
}

#show-killed-btn:hover {
  background: #333;
  color: #fff;
}

.kanban-killed {
  margin-top: 16px;
  padding: 16px;
  background: #050a1a;
  border-radius: 8px;
  border: 1px dashed #555;
}

.kanban-killed.hidden {
  display: none;
}

.killed-header {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #888;
  margin: 0 0 12px 0;
}

/* Mobile responsive — stack columns on small screens */
@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: 1fr 1fr;
  }
  .editqueue-form {
    grid-template-columns: 1fr 1fr;
  }
  .queue-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   OLIVIA — Lavender + Black + Cream
   ============================================ */
.olivia-page {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  color: #f5f0e8;
}

.olivia-page-back {
  display: inline-block;
  color: #c8b6e0;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.olivia-page-back:hover {
  color: #f5f0e8;
}

/* HERO */
.olivia-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1028 100%);
  border: 1px solid #c8b6e0;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(200, 182, 224, 0.15);
}

.olivia-hero-photo {
  width: 280px;
  height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 2px solid #c8b6e0;
  box-shadow: 0 0 20px rgba(200, 182, 224, 0.3);
}

.olivia-hero-info .olivia-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: #f5f0e8;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 8px 0;
}

.olivia-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 3.5rem;
  margin: 0 0 8px 0;
  color: #c8b6e0;
  line-height: 1;
}

.olivia-title {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: #f5f0e8;
  margin: 0 0 16px 0;
}

.olivia-quote {
  font-style: italic;
  color: #c8b6e0;
  border-left: 3px solid #c8b6e0;
  padding-left: 12px;
  margin: 16px 0;
  font-size: 1rem;
}

.olivia-bio {
  color: #e0d8ce;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 16px 0 0 0;
}

/* ACTIONS */
.olivia-actions-section {
  margin-bottom: 32px;
}

.olivia-actions-section h2 {
  font-family: 'Playfair Display', serif;
  color: #c8b6e0;
  margin-bottom: 16px;
}

.olivia-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.olivia-action-btn {
  background: #c8b6e0;
  color: #0a0a0a;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.olivia-action-btn:hover {
  background: #f5f0e8;
  box-shadow: 0 0 15px rgba(200, 182, 224, 0.5);
  transform: translateY(-1px);
}

.olivia-action-btn.soft {
  background: transparent;
  color: #f5f0e8;
  border: 1px solid #f5f0e8;
}

.olivia-action-btn.soft:hover {
  background: #f5f0e8;
  color: #0a0a0a;
}

/* CHAT */
.olivia-chat {
  background: #0d0d0d;
  border: 1px solid #c8b6e0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.olivia-chat h2 {
  font-family: 'Playfair Display', serif;
  color: #c8b6e0;
  margin: 0 0 16px 0;
}

.olivia-chat-window {
  background: #000;
  border: 1px solid #1a1028;
  border-radius: 8px;
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.olivia-chat-placeholder {
  color: #888;
  font-style: italic;
  margin: 0;
}

.olivia-msg {
  margin-bottom: 12px;
}

.olivia-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 0.75rem;
  color: #f5f0e8;
  margin: 0 0 4px 0;
}

.olivia-bubble {
  background: #1a1028;
  color: #f5f0e8;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0;
  border-left: 3px solid #f5f0e8;
  display: inline-block;
  max-width: 85%;
  white-space: normal;
}

.olivia-msg-user .olivia-bubble {
  background: #c8b6e0;
  color: #0a0a0a;
  border-left: none;
  border-right: 3px solid #f5f0e8;
  border-radius: 12px 12px 0 12px;
}

.olivia-msg-user {
  text-align: right;
}

.olivia-typing {
  opacity: 0.6;
}

.olivia-error {
  color: #ff6b6b;
}

.olivia-chat-form {
  display: flex;
  gap: 8px;
}

.olivia-chat-form input {
  flex: 1;
  background: #1a1028;
  color: #f5f0e8;
  border: 1px solid #c8b6e0;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}

.olivia-chat-form input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(200, 182, 224, 0.5);
}

.olivia-chat-form button {
  background: #c8b6e0;
  color: #0a0a0a;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-size: 1rem;
}

.olivia-chat-form button:hover {
  background: #f5f0e8;
}

/* ANALYTICS SECTION */
.analytics-section {
  background: #0d0d0d;
  border: 1px solid #c8b6e0;
  border-radius: 12px;
  padding: 24px;
}

.analytics-header h2 {
  font-family: 'Playfair Display', serif;
  color: #c8b6e0;
  margin: 0 0 4px 0;
}

.analytics-sub {
  color: #c0c0c0;
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

.analytics-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #333;
}

.analytics-tab {
  background: transparent;
  color: #888;
  border: none;
  padding: 12px 20px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.analytics-tab:hover {
  color: #c8b6e0;
}

.analytics-tab.active {
  color: #c8b6e0;
  border-bottom-color: #c8b6e0;
}

.analytics-tab-panel {
  display: none;
}

.analytics-tab-panel.active {
  display: block;
}

.analytics-form {
  display: grid;
  gap: 12px 8px;
  margin-bottom: 24px;
}

/* Posts form: 2 rows */
.post-form-grid {
  grid-template-columns: 2fr 1fr 90px 90px 110px 90px;
  grid-template-areas:
    "title title platform date views interactions"
    "tier notes notes notes notes submit";
}

.post-form-grid .field-title { grid-area: title; }
.post-form-grid .field-platform { grid-area: platform; }
.post-form-grid .field-date { grid-area: date; }
.post-form-grid .field-views { grid-area: views; }
.post-form-grid .field-interactions { grid-area: interactions; }
.post-form-grid .field-tier { grid-area: tier; }
.post-form-grid .field-notes { grid-area: notes; }
.post-form-grid .field-submit { grid-area: submit; }


/* Goals form: 1 row */
.goal-form-grid {
  grid-template-columns: 1.4fr 1fr 1fr 80px 80px 90px 90px;
}

.goal-form-grid .field-goal-name {
  /* no grid-area needed, normal flow */
}



.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.form-field label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  color: #c8b6e0;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.form-field input,
.form-field select {
  background: #1a1028;
  color: #f5f0e8;
  border: 1px solid #c8b6e0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

.field-submit {
  justify-content: flex-end;
}

.field-submit button {
  background: #c8b6e0;
  color: #0a0a0a;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 0.85rem;
  width: 100%;
  height: 36px;
}

.field-submit button:hover {
  background: #f5f0e8;
}ckground: #f5f0e8;
}

.analytics-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* POST ROW */
.post-row {
  display: grid;
  grid-template-columns: 90px 80px 1fr 100px 110px 110px 70px 28px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #1a1028;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.post-row.tier-flop { border-left: 3px solid #ff6b6b; }
.post-row.tier-mid { border-left: 3px solid #888; }
.post-row.tier-hit { border-left: 3px solid #c8b6e0; }
.post-row.tier-viral { border-left: 3px solid #f5f0e8; box-shadow: 0 0 8px rgba(245, 240, 232, 0.3); }

.post-tier-select {
  background: #0d0d0d;
  color: #c8b6e0;
  border: 1px solid #c8b6e0;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.post-platform {
  color: #f5f0e8;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.post-title-text {
  color: #f5f0e8;
  font-weight: 600;
}

.post-date,
.post-views,
.post-interactions {
  color: #c0c0c0;
  font-family: monospace;
  font-size: 0.8rem;
}

.post-engagement {
  color: #c8b6e0;
  font-weight: 700;
  font-family: monospace;
  text-align: right;
}

.post-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #333;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}

.post-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

/* GOAL CARD */
.goal-card {
  background: #1a1028;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid #888;
}

.goal-card.status-on\ track,
.goal-card.status-on,
.goal-card.status-active {
  border-left-color: #c8b6e0;
}

.goal-card.status-achieved {
  border-left-color: #00ff88;
}

.goal-card.status-at\ risk,
.goal-card.status-at {
  border-left-color: #ffd700;
}

.goal-card.status-overdue {
  border-left-color: #ff6b6b;
}

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

.goal-status-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #c8b6e0;
  font-size: 0.7rem;
  margin: 0 0 4px 0;
  text-transform: uppercase;
}

.goal-name-block h3 {
  font-family: 'Playfair Display', serif;
  color: #f5f0e8;
  margin: 0 0 4px 0;
  font-size: 1.2rem;
}

.goal-meta {
  color: #c0c0c0;
  font-size: 0.8rem;
  margin: 0;
  font-style: italic;
}

.goal-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #444;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
}

.goal-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

.goal-progress {
  margin-bottom: 12px;
}

.goal-progress-bar {
  background: #0d0d0d;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid #2a1f3a;
}

.goal-progress-fill {
  background: linear-gradient(90deg, #c8b6e0, #f5f0e8);
  height: 100%;
  transition: width 0.3s ease;
}

.goal-progress-stats {
  display: flex;
  justify-content: space-between;
  color: #f5f0e8;
  font-family: monospace;
  font-size: 0.85rem;
}

.goal-pct {
  color: #c8b6e0;
  font-weight: 700;
}

.goal-pace {
  color: #ffd700;
  font-size: 0.8rem;
  font-style: italic;
  margin: 6px 0 0 0;
}

.goal-update {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #2a1f3a;
}

.goal-current-input {
  flex: 1;
  background: #0d0d0d;
  color: #f5f0e8;
  border: 1px solid #c8b6e0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.goal-update-btn {
  background: #c8b6e0;
  color: #0a0a0a;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 0.85rem;
}

.goal-update-btn:hover {
  background: #f5f0e8;
}

/* Mobile */
@media (max-width: 900px) {
  .analytics-form {
    grid-template-columns: 1fr 1fr;
  }
  #goal-form {
    grid-template-columns: 1fr 1fr;
  }
  .post-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* THEME CALENDAR (Sharpay) */
.theme-calendar-section {
  background: #1a0d1a;
  border: 1px solid #ff69b4;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.theme-header h2 {
  font-family: 'Playfair Display', serif;
  color: #ff69b4;
  margin: 0 0 4px 0;
}

.theme-sub {
  color: #c0c0c0;
  font-size: 0.9rem;
  margin: 0 0 20px 0;
}

.theme-form {
  display: grid;
  gap: 12px 8px;
  margin-bottom: 20px;
}

.theme-form-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px 90px minmax(0, 1.5fr) 110px;
}

.theme-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.theme-form .form-field label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  color: #ff69b4;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.theme-form input,
.theme-form select {
  background: #2a1525;
  color: #fff;
  border: 1px solid #ff69b4;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

.theme-form .field-submit {
  justify-content: flex-end;
}

.theme-form .field-submit button {
  background: #ff69b4;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 0.85rem;
  width: 100%;
  height: 36px;
}

.theme-form .field-submit button:hover {
  background: #fff;
  color: #ff69b4;
}

.theme-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

.theme-row {
  display: grid;
  grid-template-columns: 110px 90px 1fr 1fr 130px 28px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #2a1525;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  border-left: 3px solid #888;
}

.theme-row.status-active { border-left-color: #ff69b4; }
.theme-row.status-upcoming { border-left-color: #ffd700; }
.theme-row.status-complete { border-left-color: #888; opacity: 0.6; }
.theme-row.status-killed { border-left-color: #ff6b6b; opacity: 0.4; }

.theme-status-select {
  background: #1a0d1a;
  color: #ff69b4;
  border: 1px solid #ff69b4;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.theme-period-tag {
  color: #ff69b4;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.theme-name {
  color: #fff;
  font-weight: 600;
}

.theme-vibe {
  color: #ffd1e8;
  font-style: italic;
  font-size: 0.85rem;
}

.theme-dates {
  color: #c0c0c0;
  font-family: monospace;
  font-size: 0.8rem;
}

.theme-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #333;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}

.theme-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

/* ============================================
   CAMPAIGN CALENDAR (Miley) — black/silver/red
   ============================================ */
.campaign-calendar-section {
  background: #141414;
  border: 2px solid #c0c0c0;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.campaign-calendar-section .campaign-header h2 {
  font-size: 16px;
  letter-spacing: 3px;
  color: #c0c0c0;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.campaign-calendar-section .campaign-sub {
  color: #888;
  font-size: 14px;
  margin: 0 0 20px 0;
  font-style: italic;
}

.campaign-calendar-section .campaign-form {
  display: grid;
  gap: 12px 8px;
  margin-bottom: 20px;
}

.campaign-calendar-section .campaign-form-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px 90px minmax(0, 1.5fr) 130px;
}

.campaign-calendar-section .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.campaign-calendar-section .form-field label {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #dc2626;
  font-weight: 600;
  text-transform: uppercase;
}

.campaign-calendar-section .form-field input,
.campaign-calendar-section .form-field select {
  background: #000;
  color: #f5f5f5;
  border: 1.5px solid #c0c0c0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.campaign-calendar-section .form-field input::placeholder {
  color: #666;
}

.campaign-calendar-section .field-submit {
  justify-content: flex-end;
}

.campaign-calendar-section .field-submit button {
  background: #dc2626;
  color: #f5f5f5;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  height: 40px;
}

.campaign-calendar-section .field-submit button:hover {
  background: #c0c0c0;
  color: #000;
}

.campaign-calendar-section .campaign-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

.campaign-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr 1fr 130px 28px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  border-left: 3px solid #888;
}

.campaign-row.status-live { border-left-color: #dc2626; }
.campaign-row.status-planned { border-left-color: #c0c0c0; }
.campaign-row.status-complete { border-left-color: #888; opacity: 0.6; }
.campaign-row.status-killed { border-left-color: #ff6b6b; opacity: 0.4; }

.campaign-status-select {
  background: #000;
  color: #dc2626;
  border: 1px solid #c0c0c0;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}

.campaign-type-tag {
  color: #dc2626;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

.campaign-name-text {
  color: #f5f5f5;
  font-weight: 600;
}

.campaign-angle {
  color: #c0c0c0;
  font-style: italic;
  font-size: 13px;
}

.campaign-dates {
  color: #888;
  font-family: monospace;
  font-size: 12px;
}

.campaign-delete {
  background: transparent;
  color: #c0c0c0;
  border: 1px solid #333;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.campaign-delete:hover {
  background: #ff6b6b;
  color: #000;
  border-color: #ff6b6b;
}

/* ============================================
   ARIANA — Pastel Pink + Lavender + White
   ============================================ */
.ariana-page {
  background: linear-gradient(180deg, #ffd6e8 0%, #e8d4f5 100%);
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #2a1a3a;
}

.ariana-page-back {
  display: inline-block;
  color: #2a1a3a;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 8px 16px;
  border: 2px solid #b890d4;
  background: #fff8fb;
  border-radius: 20px;
  font-weight: 600;
}
.ariana-page-back:hover {
  background: #b890d4;
  color: #fff;
}

.ariana-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #fff8fb;
  border: 3px solid #f5a3c7;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(245, 163, 199, 0.4);
}

.ariana-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #f5a3c7;
  background-size: cover;
  background-position: center top;
  border-radius: 16px;
  border: 4px solid #b890d4;
}

.ariana-hero-info .ariana-tag {
  font-size: 12px;
  letter-spacing: 3px;
  color: #b04a8c;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-weight: 700;
}

.ariana-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  margin: 0 0 8px;
  color: #2a1a3a;
  font-weight: 900;
}

.ariana-hero-info .ariana-title {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  color: #b04a8c;
  margin: 0 0 16px;
}

.ariana-hero-info .ariana-quote {
  font-size: 22px;
  color: #2a1a3a;
  font-style: italic;
  margin: 0 0 20px;
  border-left: 4px solid #f5a3c7;
  padding-left: 14px;
  font-weight: 600;
}

.ariana-hero-info .ariana-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #4a3a5a;
  margin: 0;
}

.ariana-actions-section,
.ariana-chat,
.vending-section {
  background: #fff8fb;
  border: 3px solid #f5a3c7;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.ariana-actions-section h2,
.ariana-chat h2,
.vending-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #b04a8c;
  margin: 0 0 14px;
  font-weight: 700;
}

.ariana-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ariana-action-btn {
  background: linear-gradient(135deg, #f5a3c7 0%, #b890d4 100%);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 18px 14px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(42, 26, 58, 0.2);
}
.ariana-action-btn:hover {
  background: linear-gradient(135deg, #f08bb8 0%, #a47ec4 100%);
}
.ariana-action-btn.soft {
  background: #fff8fb;
  color: #b04a8c;
  border: 2px solid #b890d4;
  text-shadow: none;
}
.ariana-action-btn.soft:hover {
  background: #f5edff;
}

.ariana-chat-window {
  min-height: 240px;
  background: #fff;
  border: 2px solid #f5a3c7;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
  color: #2a1a3a;
  width: 100%;
  box-sizing: border-box;
}
.ariana-chat-placeholder {
  color: #9070a0;
  font-style: italic;
}
.ariana-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.ariana-chat-form input {
  background: #fff8fb;
  border: 2px solid #b890d4;
  border-radius: 12px;
  padding: 14px 16px;
  color: #2a1a3a;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.ariana-chat-form input::placeholder {
  color: #9070a0;
}
.ariana-chat-form button {
  background: linear-gradient(135deg, #f5a3c7 0%, #b890d4 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.ariana-chat-form button:hover {
  background: linear-gradient(135deg, #f08bb8 0%, #a47ec4 100%);
}

.ariana-msg { margin-bottom: 16px; }
.ariana-msg-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 700;
  color: #9070a0;
}
.ariana-msg-user .ariana-msg-label { color: #b04a8c; text-align: right; }
.ariana-bubble {
  background: #ffff;
  border: 2px solid #f5a3c7;
  border-radius: 14px;
  padding: 14px 18px;
  color: #2a1a3a;
  white-space: normal;
}
.ariana-msg-user .ariana-bubble {
  background: linear-gradient(135deg, #f5a3c7 0%, #b890d4 100%);
  border: 0;
  color: #fff;
  margin-left: 80px;
}
.ariana-msg-ariana .ariana-bubble { margin-right: 80px; }
.ariana-typing { font-style: italic; color: #9070a0; }
.ariana-error { background: #ffe5e5 !important; color: #c44 !important; }

/* VENDING TABS */
.vending-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 3px solid #f5edff;
}
.vending-tab {
  background: transparent;
  color: #9070a0;
  border: 0;
  padding: 12px 24px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  font-weight: 600;
}
.vending-tab:hover { color: #b04a8c; }
.vending-tab.active {
  color: #b04a8c;
  border-bottom-color: #b04a8c;
}
.vending-tab-panel { display: none; }
.vending-tab-panel.active { display: block; }

/* VENDING FORMS */
.vending-section .vending-form {
  display: grid;
  gap: 12px 8px;
  margin-bottom: 24px;
}
.vending-section .machine-form-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 110px minmax(0, 1.5fr) 130px;
}
.vending-section .transaction-form-grid {
  grid-template-columns: 100px 110px minmax(0, 1.4fr) 100px minmax(0, 1fr) minmax(0, 1.4fr) 80px;
}
.vending-section .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vending-section .form-field label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #b04a8c;
  font-weight: 700;
  text-transform: uppercase;
}
.vending-section .form-field input,
.vending-section .form-field select {
  background: #fff8fb;
  color: #2a1a3a;
  border: 2px solid #b890d4;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.vending-section .form-field input::placeholder {
  color: #9070a0;
}
.vending-section .field-submit {
  justify-content: flex-end;
}
.vending-section .field-submit button {
  background: linear-gradient(135deg, #f5a3c7 0%, #b890d4 100%);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  height: 40px;
}
.vending-section .field-submit button:hover {
  background: linear-gradient(135deg, #f08bb8 0%, #a47ec4 100%);
}

.vending-empty {
  color: #9070a0;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* MACHINE CARDS */
.machine-card {
  background: #ffff;
  border: 2px solid #f5a3c7;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  border-left: 5px solid #b04a8c;
}
.machine-card.status-paused { border-left-color: #d4a017; opacity: 0.85; }
.machine-card.status-retired { border-left-color: #888; opacity: 0.6; }

.machine-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f5edff;
}
.machine-info { flex: 1; }
.machine-info h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  margin: 8px 0 4px;
  color: #2a1a3a;
  font-weight: 700;
}
.machine-loc {
  color: #9070a0;
  font-size: 13px;
  font-style: italic;
  margin: 0;
}
.machine-status-select {
  background: #fff8fb;
  color: #b04a8c;
  border: 2px solid #b890d4;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
}
.machine-actions { display: flex; gap: 8px; }
.add-product-btn,
.machine-delete {
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.add-product-btn {
  background: linear-gradient(135deg, #f5a3c7 0%, #b890d4 100%);
  color: #fff;
}
.add-product-btn:hover {
  background: linear-gradient(135deg, #f08bb8 0%, #a47ec4 100%);
}
.machine-delete {
  background:#fff8fb;
  color: #c44;
  border: 2px solid #f5c8c8;
}
.machine-delete:hover {
  background: #ffe5e5;
}

.machine-empty-products {
  color: #9070a0;
  font-style: italic;
  text-align: center;
  padding: 16px;
  margin: 0;
}

.product-row {
  display: grid;
  grid-template-columns: 100px 80px 1fr 200px 100px 28px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: #ffd6e8;
  border: 2px solid #e8a8c4;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  border-left: 6px solid #b890d4;
  box-shadow: 0 2px 4px rgba(176, 74, 140, 0.08);
}
.product-row.velocity-top { border-left-color: #00a878; }
.product-row.velocity-steady { border-left-color: #8a3a6c; }
.product-row.velocity-slow { border-left-color: #d4a017; }
.product-row.velocity-dead { border-left-color: #c44; opacity: 0.65; }
.product-row.low-stock {
  background: #ffd699;
  border-color: #ff8c00;
}

.product-velocity-tag {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #fff;
  background: #8a3a6c;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}
.product-cat {
  color: #fff;
  background: #b890d4;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
}
.product-name {
  color: #2a1a3a;
  font-weight: 700;
  font-size: 15px;
}

.product-stock {
  background: #fff;
  border: 2px solid #8a3a6c;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  justify-content: center;
}
.stock-input {
  width: 60px;
  padding: 4px 6px;
  border: 1.5px solid #b890d4;
  border-radius: 4px;
  font-size: 15px;
  background: #fff8fb;
  color: #2a1a3a;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
}
.stock-input:focus {
  outline: none;
  border-color: #b04a8c;
  box-shadow: 0 0 0 3px rgba(176, 74, 140, 0.25);
}
.product-stock-label {
  color: #2a1a3a;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.product-margin {
  color: #fff;
  background: #00a878;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: monospace;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.5px;
}
.product-delete {
  background: #fff;
  color: #c44;
  border: 2px solid #c44;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.product-delete:hover {
  background: #c44;
  color: #fff;
}

/* MONEY SUMMARY */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.summary-card {
  background: linear-gradient(135deg, #fff5fa 0%, #f5edff 100%);
  border: 2px solid #f5a3c7;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.summary-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  color: #9070a0;
  font-size: 11px;
  margin: 0 0 6px;
  text-transform: uppercase;
  font-weight: 700;
}
.summary-value {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  margin: 0;
}
.summary-value.income { color: #00a878; }
.summary-value.expense { color: #c44; }

/* TRANSACTIONS */
.txn-row {
  display: grid;
  grid-template-columns: 90px 90px 130px 110px 100px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: #ffd6e8;
  border: 2px solid #e8a8c4;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  border-left: 5px solid #b890d4;
  box-shadow: 0 2px 4px rgba(176, 74, 140, 0.08))
}
.txn-row.type-income { border-left-color: #00a878; }
.txn-row.type-expense { border-left-color: #c44; }

.txn-date { color: #9070a0; font-family: monospace; font-size: 12px; }
.txn-type {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-size: 12px;
  text-transform: uppercase;
  color: #b04a8c;
  font-weight: 700;
}
.txn-cat { color: #4a3a5a; }
.txn-machine { color: #9070a0; font-size: 12px; }
.txn-amount {
  font-family: monospace;
  font-weight: 700;
  text-align: right;
}
.txn-row.type-income .txn-amount { color: #00a878; }
.txn-row.type-expense .txn-amount { color: #c44; }
.txn-notes {
  color: #4a3a5a;
  font-style: italic;
  font-size: 12px;
}
.txn-delete {
  background: transparent;
  color: #9070a0;
  border: 2px solid #b890d4;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.txn-delete:hover { background: #ffe5e5; color: #c44; border-color: #c44; }

/* PRODUCT ADD MODAL */
.ariana-modal {
  position: fixed;
  inset: 0;
  background: rgba(42, 26, 58, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.ariana-modal.hidden { display: none; }
.ariana-modal-content {
  background: #fff8fb;
  border-radius: 20px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  border: 3px solid #f5a3c7;
}
.ariana-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: 2px solid #b890d4;
  color: #9070a0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
}
.ariana-modal-content h2 {
  font-family: 'Playfair Display', serif;
  color: #b04a8c;
  margin: 0 0 18px;
}
.product-add-form .form-field { margin-bottom: 14px; }
.product-add-form .form-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.product-add-form .form-field label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #b04a8c;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}
.product-add-form input,
.product-add-form select {
  background: #ffff;
  color: #2a1a3a;
  border: 2px solid #b890d4;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.modal-submit-btn {
  background: linear-gradient(135deg, #f5a3c7 0%, #b890d4 100%);
  color: #fff;
  border: 0;
  padding: 12px 20px;
  border-radius: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  font-family: inherit;
  margin-top: 8px;
}
.modal-submit-btn:hover {
  background: linear-gradient(135deg, #f08bb8 0%, #a47ec4 100%);
}

/* ============================================
   ARIANA — Polish pass: headers, buttons, spacing
   ============================================ */

/* Column headers */
.product-row-header,
.txn-row-header {
  display: grid;
  gap: 16px;
  padding: 8px 20px;
  margin-bottom: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 11px;
  color: #b04a8c;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 2px solid #b890d4;
  padding-bottom: 10px;
}
.product-row-header {
  grid-template-columns: 100px 80px 1fr 200px 100px 28px;
}
.txn-row-header {
  grid-template-columns: 90px 90px 130px 110px 100px 1fr 28px;
}

/* Spacing between machine card and product list */
.machine-products {
  margin-top: 16px;
}

/* Override ALL Ariana buttons to the unified mauve #b04a8c */
.ariana-action-btn,
.ariana-chat-form button,
.add-product-btn,
.vending-section .field-submit button,
.modal-submit-btn {
  background: #b04a8c !important;
  color: #fff !important;
  text-shadow: none !important;
}
.ariana-action-btn:hover,
.ariana-chat-form button:hover,
.add-product-btn:hover,
.vending-section .field-submit button:hover,
.modal-submit-btn:hover {
  background: #8a3a6c !important;
}

/* User chat bubble matches */
.ariana-msg-user .ariana-bubble {
  background: #b04a8c !important;
  color: #fff !important;
}

/* Soft buttons stay outlined but use the new color */
.ariana-action-btn.soft {
  background: #fff !important;
  color: #b04a8c !important;
  border: 2px solid #b04a8c !important;
  text-shadow: none !important;
}
.ariana-action-btn.soft:hover {
  background: #ffe0ec !important;
}

/* Bottom back button — visible mauve */
.ariana-page .agent-page-back-bottom,
.ariana-page a.agent-page-back-bottom {
  display: inline-block;
  color: #fff !important;
  background: #b04a8c !important;
  text-decoration: none;
  padding: 14px 28px;
  border: 2px solid #b04a8c !important;
  border-radius: 24px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 24px;
}
.ariana-page .agent-page-back-bottom:hover,
.ariana-page a.agent-page-back-bottom:hover {
  background: #8a3a6c !important;
  border-color: #8a3a6c !important;
}

/* Top back button — match */
.ariana-page-back {
  background: #b04a8c !important;
  color: #fff !important;
  border: 2px solid #b04a8c !important;
}
.ariana-page-back:hover {
  background: #8a3a6c !important;
  border-color: #8a3a6c !important;
}

/* ============================================
   VENDING ARCHIVE — Close out banner + Past Months
   ============================================ */
.close-out-banner {
  background: linear-gradient(135deg, #ffd6e8 0%, #e8d4f5 100%);
  border: 2px solid #b04a8c;
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(176, 74, 140, 0.15);
}
.close-out-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.close-out-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #2a1a3a;
  margin: 0 0 4px;
  font-weight: 700;
}
.close-out-sub {
  color: #4a3a5a;
  font-size: 13px;
  margin: 0;
}
.close-out-btn {
  background: #b04a8c;
  color: #fff;
  border: 0;
  padding: 12px 20px;
  border-radius: 10px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.close-out-btn:hover {
  background: #8a3a6c;
}

.past-months-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px dashed #d4b8e8;
}
.past-months-heading {
  font-family: 'Playfair Display', serif;
  color: #b04a8c;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}
.past-months-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.past-month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #ffd6e8;
  border: 2px solid #e8a8c4;
  border-radius: 10px;
  border-left: 5px solid #b890d4;
}
.past-month-info { flex: 1; }
.past-month-title {
  font-family: 'Playfair Display', serif;
  color: #2a1a3a;
  font-size: 16px;
  margin: 0 0 4px;
  font-weight: 700;
}
.past-month-meta {
  color: #4a3a5a;
  font-size: 13px;
  margin: 0;
}
.past-month-net.income { color: #00a878; font-weight: 700; }
.past-month-net.expense { color: #c44; font-weight: 700; }
.past-month-download {
  background: #fff;
  color: #b04a8c;
  border: 2px solid #b04a8c;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
}
.past-month-download:hover {
  background: #b04a8c;
  color: #fff;
}

/* Closeout reminder modal extras */
.closeout-reminder {
  background: #fff8e1;
  border: 2px solid #ffd700;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.modal-secondary-btn {
  background: #fff;
  color: #b04a8c;
  border: 2px solid #b04a8c;
  padding: 12px 20px;
  border-radius: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  flex: 1;
  font-family: inherit;
}
.modal-secondary-btn:hover {
  background: #ffe0ec;
}

/* ============================================
   CAMERON DIAZ — Black + Champagne Gold + Cream
   ============================================ */
.cameron-page {
  background: #0d0d0d;
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #f5f0e6;
}

.cameron-page-back {
  display: inline-block;
  color: #d4a85a;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 10px 20px;
  border: 2px solid #d4a85a;
  background: transparent;
  border-radius: 6px;
  font-weight: 700;
}
.cameron-page-back:hover {
  background: #d4a85a;
  color: #0d0d0d;
}

.cameron-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #1a1a1a;
  border: 2px solid #d4a85a;
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(212, 168, 90, 0.15);
}

.cameron-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center top;
  border-radius: 4px;
  border: 3px solid #d4a85a;
}

.cameron-hero-info .cameron-tag {
  font-size: 12px;
  letter-spacing: 4px;
  color: #d4a85a;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 700;
}

.cameron-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  margin: 0 0 8px;
  color: #f5f0e6;
  font-weight: 900;
  letter-spacing: 1px;
}

.cameron-hero-info .cameron-title {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: #d4a85a;
  margin: 0 0 18px;
}

.cameron-hero-info .cameron-quote {
  font-size: 20px;
  color: #f5f0e6;
  font-style: italic;
  margin: 0 0 20px;
  border-left: 4px solid #d4a85a;
  padding-left: 16px;
  font-weight: 600;
}

.cameron-hero-info .cameron-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #c8c0b0;
  margin: 0;
}

.cameron-actions-section,
.cameron-chat,
.schedule-section {
  background: #1a1a1a;
  border: 2px solid #d4a85a;
  border-radius: 6px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.cameron-actions-section h2,
.cameron-chat h2,
.schedule-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #d4a85a;
  margin: 0 0 14px;
  font-weight: 700;
}

.cameron-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cameron-action-btn {
  background: #d4a85a;
  color: #0d0d0d;
  border: 0;
  border-radius: 6px;
  padding: 22px 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}
.cameron-action-btn:hover {
  background: #f5f0e6;
}
.cameron-action-btn.soft {
  background: transparent;
  color: #d4a85a;
  border: 2px solid #d4a85a;
}
.cameron-action-btn.soft:hover {
  background: #d4a85a;
  color: #0d0d0d;
}

.cameron-chat-window {
  min-height: 240px;
  background: #0d0d0d;
  border: 1.5px solid #d4a85a;
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 16px;
  color: #f5f0e6;
  width: 100%;
  box-sizing: border-box;
}
.cameron-chat-placeholder {
  color: #807a6c;
  font-style: italic;
}
.cameron-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
}
.cameron-chat-form input {
  background: #0d0d0d;
  border: 2px solid #d4a85a;
  border-radius: 6px;
  padding: 14px 16px;
  color: #f5f0e6;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.cameron-chat-form input::placeholder { color: #807a6c; }
.cameron-chat-form button {
  background: #d4a85a;
  color: #0d0d0d;
  border: 0;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.cameron-chat-form button:hover { background: #f5f0e6; }

.cameron-msg { margin-bottom: 16px; }
.cameron-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 700;
  color: #807a6c;
}
.cameron-msg-user .cameron-msg-label { color: #d4a85a; text-align: right; }
.cameron-bubble {
  background: #1a1a1a;
  border: 1.5px solid #d4a85a;
  border-radius: 6px;
  padding: 14px 18px;
  color: #f5f0e6;
  white-space: normal;
}
.cameron-msg-user .cameron-bubble {
  background: #d4a85a;
  border: 0;
  color: #0d0d0d;
  margin-left: 80px;
}
.cameron-msg-cameron .cameron-bubble { margin-right: 80px; }
.cameron-typing { font-style: italic; color: #807a6c; }
.cameron-error { background: #2a0a0a !important; color: #ff6b6b !important; border-color: #ff6b6b !important; }

/* SCHEDULE FORM */
.schedule-section .schedule-form {
  display: grid;
  gap: 12px 8px;
  margin-bottom: 24px;
}
.schedule-form-grid {
  grid-template-columns: 100px 110px minmax(0, 1.6fr) 130px 90px 130px 110px;
}
.schedule-section .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.schedule-section .form-field label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: #d4a85a;
  font-weight: 700;
  text-transform: uppercase;
}
.schedule-section .form-field input,
.schedule-section .form-field select {
  background: #0d0d0d;
  color: #f5f0e6;
  border: 2px solid #d4a85a;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.schedule-section .form-field input::placeholder { color: #807a6c; }
.schedule-section .field-submit { justify-content: flex-end; }
.schedule-section .field-submit button {
  background: #d4a85a;
  color: #0d0d0d;
  border: 0;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  height: 40px;
}
.schedule-section .field-submit button:hover { background: #f5f0e6; }

.schedule-empty {
  color: #807a6c;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* DAY GROUPS */
.day-group {
  margin-bottom: 24px;
}
.day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 10px;
}
.day-heading h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: #d4a85a;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.day-hours {
  font-family: monospace;
  color: #c8c0b0;
  font-size: 12px;
}
.day-overcommit {
  background: #ff6b6b;
  color: #0d0d0d;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 11px;
  font-weight: 700;
}

/* EVENT ROWS */
.event-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr 130px 60px 110px 28px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: #0d0d0d;
  border: 1.5px solid #2a2a2a;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 14px;
  border-left: 4px solid #d4a85a;
}

/* event types */
.event-row.type-content-shoot { border-left-color: #d4a85a; }
.event-row.type-brand-deadline { border-left-color: #ff6b6b; }
.event-row.type-stream { border-left-color: #b890d4; }
.event-row.type-restock { border-left-color: #00a878; }
.event-row.type-meeting { border-left-color: #4a9bd4; }
.event-row.type-personal { border-left-color: #f5a3c7; }
.event-row.type-other { border-left-color: #807a6c; }

.event-row.status-complete { opacity: 0.5; text-decoration: line-through; }
.event-row.status-cancelled { opacity: 0.4; }
.event-row.status-moved { opacity: 0.6; font-style: italic; }

.event-status-select {
  background: #1a1a1a;
  color: #d4a85a;
  border: 1px solid #d4a85a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}
.event-block {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  color: #d4a85a;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
.event-title {
  color: #f5f0e6;
  font-weight: 600;
}
.event-type-tag {
  color: #c8c0b0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-style: italic;
}
.event-duration {
  color: #d4a85a;
  font-family: monospace;
  font-weight: 700;
  text-align: right;
  font-size: 13px;
}
.event-linked {
  color: #807a6c;
  font-size: 12px;
  font-style: italic;
}
.event-delete {
  background: transparent;
  color: #807a6c;
  border: 1px solid #2a2a2a;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.event-delete:hover {
  background: #ff6b6b;
  color: #0d0d0d;
  border-color: #ff6b6b;
}

/* Bottom back button */
.cameron-page .agent-page-back-bottom {
  display: inline-block;
  color: #d4a85a;
  background: transparent;
  border: 2px solid #d4a85a;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  margin-top: 24px;
}
.cameron-page .agent-page-back-bottom:hover {
  background: #d4a85a;
  color: #0d0d0d;
}

/* ============================================
   PARIS HILTON — Lavender + Deep Purple + Silver + White
   ============================================ */
.paris-page {
  background: linear-gradient(180deg, #f3edfa 0%, #e8dff5 100%);
  min-height: 100vh;
  margin: -32px -20px -80px;
  padding: 40px 20px 80px;
  color: #2a1a3a;
}

.paris-page-back {
  display: inline-block;
  color: #fff;
  background: #6b3aa0;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 10px 20px;
  border: 2px solid #6b3aa0;
  border-radius: 24px;
  font-weight: 700;
}
.paris-page-back:hover {
  background: #4d2780;
  border-color: #4d2780;
}

.paris-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  background: #fff;
  border: 3px solid #a890d8;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(107, 58, 160, 0.18);
}

.paris-hero-photo {
  width: 100%;
  height: 380px;
  background-color: #e8dff5;
  background-size: cover;
  background-position: center top;
  border-radius: 14px;
  border: 4px solid #6b3aa0;
}

.paris-hero-info .paris-tag {
  font-size: 12px;
  letter-spacing: 4px;
  color: #6b3aa0;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 700;
}

.paris-hero-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: 60px;
  margin: 0 0 8px;
  color: #2a1a3a;
  font-weight: 900;
}

.paris-hero-info .paris-title {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: #6b3aa0;
  margin: 0 0 18px;
}

.paris-hero-info .paris-quote {
  font-size: 22px;
  color: #2a1a3a;
  font-style: italic;
  margin: 0 0 20px;
  border-left: 4px solid #6b3aa0;
  padding-left: 16px;
  font-weight: 600;
}

.paris-hero-info .paris-bio {
  font-size: 15px;
  line-height: 1.7;
  color: #4a3a5a;
  margin: 0;
}

.paris-actions-section,
.paris-chat,
.pets-section {
  background: #fff;
  border: 3px solid #a890d8;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.paris-actions-section h2,
.paris-chat h2,
.pets-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #6b3aa0;
  margin: 0 0 14px;
  font-weight: 700;
}

.paris-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.paris-action-btn {
  background: linear-gradient(135deg, #6b3aa0 0%, #a890d8 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 22px 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}
.paris-action-btn:hover {
  background: linear-gradient(135deg, #4d2780 0%, #8a72c0 100%);
}
.paris-action-btn.soft {
  background: #fff;
  color: #6b3aa0;
  border: 2px solid #6b3aa0;
}
.paris-action-btn.soft:hover {
  background: #f3edfa;
}

.paris-chat-window {
  min-height: 240px;
  background: #f9f5fc;
  border: 2px solid #a890d8;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
  color: #2a1a3a;
  width: 100%;
  box-sizing: border-box;
}
.paris-chat-placeholder { color: #9070a0; font-style: italic; }
.paris-chat-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
}
.paris-chat-form input {
  background: #fff;
  border: 2px solid #6b3aa0;
  border-radius: 12px;
  padding: 14px 16px;
  color: #2a1a3a;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.paris-chat-form input::placeholder { color: #9070a0; }
.paris-chat-form button {
  background: #6b3aa0;
  color: #fff;
  border: 0;
  border-radius: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.paris-chat-form button:hover { background: #4d2780; }

.paris-msg { margin-bottom: 16px; }
.paris-msg-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 700;
  color: #9070a0;
}
.paris-msg-user .paris-msg-label { color: #6b3aa0; text-align: right; }
.paris-bubble {
  background: #f9f5fc;
  border: 2px solid #a890d8;
  border-radius: 14px;
  padding: 14px 18px;
  color: #2a1a3a;
  white-space: normal;
}
.paris-msg-user .paris-bubble {
  background: #6b3aa0;
  border: 0;
  color: #fff;
  margin-left: 80px;
}
.paris-msg-paris .paris-bubble { margin-right: 80px; }
.paris-typing { font-style: italic; color: #9070a0; }
.paris-error { background: #ffe5e5 !important; color: #c44 !important; }

/* PETS TABS */
.pets-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 3px solid #e8dff5;
}
.pets-tab {
  background: transparent;
  color: #9070a0;
  border: 0;
  padding: 12px 24px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  font-weight: 600;
}
.pets-tab:hover { color: #6b3aa0; }
.pets-tab.active {
  color: #6b3aa0;
  border-bottom-color: #6b3aa0;
}
.pets-tab-panel { display: none; }
.pets-tab-panel.active { display: block; }

/* PETS FORMS */
.pets-section .pets-form {
  display: grid;
  gap: 12px 8px;
  margin-bottom: 24px;
}
.pets-section .brand-form-grid {
  grid-template-columns: minmax(0, 1.4fr) 110px 110px 100px 100px minmax(0, 1.6fr) 110px;
}
.pets-section .product-form-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 100px 110px 100px minmax(0, 1.6fr) 110px;
}
.pets-section .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pets-section .form-field label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: #6b3aa0;
  font-weight: 700;
  text-transform: uppercase;
}
.pets-section .form-field input,
.pets-section .form-field select {
  background: #fff;
  color: #2a1a3a;
  border: 2px solid #a890d8;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.pets-section .form-field input::placeholder { color: #9070a0; }
.pets-section .field-submit { justify-content: flex-end; }
.pets-section .field-submit button {
  background: #6b3aa0;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  height: 40px;
}
.pets-section .field-submit button:hover { background: #4d2780; }

.pets-empty {
  color: #9070a0;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* COLUMN HEADERS */
.brand-row-header,
.pets-section .product-row-header {
  display: grid;
  gap: 12px;
  padding: 8px 18px 10px;
  margin-bottom: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 12px;
  color: #6b3aa0;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 2px solid #a890d8;
}
.brand-row-header {
  grid-template-columns: 110px 1fr 100px 1.2fr 110px 90px 28px;
}
.pets-section .product-row-header {
  grid-template-columns: 120px 1.2fr 1fr 110px 100px 1fr 28px;
}

/* BRAND ROWS */
.brand-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px 1.2fr 110px 90px 28px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: #f9f5fc;
  border: 2px solid #d4c5e8;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  border-left: 5px solid #a890d8;
  box-shadow: 0 2px 4px rgba(107, 58, 160, 0.08);
}
.brand-row.status-active { border-left-color: #00a878; }
.brand-row.status-negotiating { border-left-color: #6b3aa0; }
.brand-row.status-pitched { border-left-color: #d4a85a; }
.brand-row.status-wishlist { border-left-color: #a890d8; }
.brand-row.status-completed { border-left-color: #888; opacity: 0.7; }
.brand-row.status-declined { border-left-color: #c44; opacity: 0.5; }

.brand-status-select {
  background: #fff;
  color: #6b3aa0;
  border: 1.5px solid #a890d8;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
}
.brand-name-text {
  color: #2a1a3a;
  font-weight: 700;
  font-size: 15px;
}
.brand-type-tag {
  color: #fff;
  background: #a890d8;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
}
.brand-fit {
  color: #5a4a6a;
  font-style: italic;
  font-size: 13px;
}
.brand-contact {
  color: #9070a0;
  font-family: monospace;
  font-size: 12px;
}
.brand-deal {
  color: #00a878;
  font-family: monospace;
  font-weight: 700;
  text-align: right;
}
.brand-delete,
.product-delete {
  background: #fff;
  color: #c44;
  border: 2px solid #c44;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}
.brand-delete:hover,
.product-delete:hover {
  background: #c44;
  color: #fff;
}

/* PRODUCT ROWS */
.prod-row {
  display: grid;
  grid-template-columns: 120px 1.2fr 1fr 110px 100px 1fr 28px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: #f9f5fc;
  border: 2px solid #d4c5e8;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  border-left: 5px solid #a890d8;
  box-shadow: 0 2px 4px rgba(107, 58, 160, 0.08);
}


/* Bottom back button */
.paris-page .agent-page-back-bottom {
  display: inline-block;
  color: #fff;
  background: #6b3aa0;
  border: 2px solid #6b3aa0;
  padding: 14px 28px;
  border-radius: 24px;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  margin-top: 24px;
}
.paris-page .agent-page-back-bottom:hover {
  background: #4d2780;
  border-color: #4d2780;
}
/* ============================================
   PARIS — Final palette: dark pink buttons + lavender backgrounds
   ============================================ */

/* Page bg stays the soft lavender gradient */
.paris-page {
  background: linear-gradient(180deg, #e8dff5 0%, #d4c5e8 100%) !important;
}

/* All card/section backgrounds go lavender */
.paris-page .paris-hero,
.paris-page .paris-actions-section,
.paris-page .paris-chat,
.paris-page .pets-section {
  background: #f3edfa !important;
  border-color: #6b3aa0 !important;
}

/* Chat window slightly lighter lavender so it sits within the card */
.paris-page .paris-chat-window {
  background: #faf6fd !important;
  border-color: #a890d8 !important;
}

/* Form inputs lavender tinted */
.paris-page .paris-chat-form input,
.paris-page .pets-section .form-field input,
.paris-page .pets-section .form-field select {
  background: #faf6fd !important;
}

/* Brand and product rows */
.paris-page .brand-row,
.paris-page .prod-row {
  background: #e8dff5 !important;
}

/* DARK PINK BUTTONS — quick actions, send, submit, page back */
.paris-page .paris-action-btn,
.paris-page .paris-chat-form button,
.paris-page .pets-section .field-submit button,
.paris-page .paris-page-back,
.paris-page .agent-page-back-bottom {
  background: #b04a8c !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #b04a8c !important;
}

.paris-page .paris-action-btn:hover,
.paris-page .paris-chat-form button:hover,
.paris-page .pets-section .field-submit button:hover,
.paris-page .paris-page-back:hover,
.paris-page .agent-page-back-bottom:hover {
  background: #8a3a6c !important;
  border-color: #8a3a6c !important;
}

/* Soft (outlined) action buttons — same dark pink but outlined */
.paris-page .paris-action-btn.soft {
  background: #faf6fd !important;
  background-image: none !important;
  color: #b04a8c !important;
  border: 2px solid #b04a8c !important;
}
.paris-page .paris-action-btn.soft:hover {
  background: #ffe0ec !important;
}

/* User chat bubble matches button color */
.paris-page .paris-msg-user .paris-bubble {
  background: #b04a8c !important;
  color: #fff !important;
  border-color: #b04a8c !important;
}

/* Headings stay deep purple for contrast on lavender */
.paris-page .paris-hero-info h1,
.paris-page .paris-actions-section h2,
.paris-page .paris-chat h2,
.paris-page .pets-section h2 {
  color: #4d2780 !important;
}

/* Tag colors */
.paris-page .paris-hero-info .paris-tag,
.paris-page .paris-hero-info .paris-title,
.paris-page .paris-hero-info .paris-quote {
  color: #6b3aa0 !important;
}

/* Form field labels */
.paris-page .pets-section .form-field label {
  color: #b04a8c !important;
}

/* Tab styling */
.paris-page .pets-tab.active {
  color: #b04a8c !important;
  border-bottom-color: #b04a8c !important;
}

/* Column headers */
.paris-page .brand-row-header,
.paris-page .pets-section .product-row-header {
  color: #b04a8c !important;
  border-bottom-color: #a890d8 !important;
}

/* Status select dropdowns within rows */
.paris-page .brand-status-select,
.paris-page .product-status-select {
  background: #faf6fd !important;
  color: #b04a8c !important;
  border-color: #a890d8 !important;
}

/* Brand pipeline left-border colors stay status-tied (don't change those) */


/* PARIS — TRUE PURPLE BUTTONS (matching dress) */
.paris-page .paris-action-btn,
.paris-page .paris-chat-form button,
.paris-page .pets-section .field-submit button,
.paris-page .paris-page-back,
.paris-page .agent-page-back-bottom,
.paris-page .paris-msg-user .paris-bubble {
  background: #6b3aa0 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #6b3aa0 !important;
}

.paris-page .paris-action-btn:hover,
.paris-page .paris-chat-form button:hover,
.paris-page .pets-section .field-submit button:hover,
.paris-page .paris-page-back:hover,
.paris-page .agent-page-back-bottom:hover {
  background: #4d2780 !important;
  border-color: #4d2780 !important;
}

.paris-page .paris-action-btn.soft {
  background: #faf6fd !important;
  background-image: none !important;
  color: #6b3aa0 !important;
  border: 2px solid #6b3aa0 !important;
}
.paris-page .paris-action-btn.soft:hover {
  background: #e8dff5 !important;
}

.paris-page .pets-section .form-field label,
.paris-page .pets-tab.active,
.paris-page .brand-row-header,
.paris-page .pets-section .product-row-header {
  color: #6b3aa0 !important;
}
.paris-page .pets-tab.active {
  border-bottom-color: #6b3aa0 !important;
}
.paris-page .brand-status-select,
.paris-page .product-status-select {
  color: #6b3aa0 !important;
}
/* TOP NAV — left-aligned, green, clean */
.top-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  padding: calc(env(safe-area-inset-top) + 18px) 24px 14px 24px;
  border: 1px solid #2d5f3f;
  border-radius: 8px;
  background: #0f0f0f;
  margin-bottom: 24px;
}

.top-nav .nav-link {
  color: #6a8a6a;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-family: inherit;
  padding: 0;
  background: transparent;
  border: 0;
}

.top-nav .nav-link:hover {
  color: #8fbf8f;
}

.top-nav .nav-link {
  font-weight: 600;
}
.top-nav .nav-link.active {
  color: #8fbf8f;
  font-weight: 700;
}

.top-nav .nav-signout {
  margin-left: auto;
  color: #6a8a6a;
}

.nav-notifications {
  cursor: pointer;
  background: none;
  border: none;
  padding: inherit;
  font: inherit;
  color: inherit;
}

/* ============================================
   SHARED AGENT BANNER — applies to all 15 agents
   ============================================ */
.agent-banner {
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  margin: 32px 0;
  background-color: #1a1a1a;
}

/* ============================================
   REGINA — Burn Book matches Quick Actions pink
   ============================================ */
.regina-page .burn-book-section {
  background: #0d0d0d !important;
  border: none !important;
}

.regina-page .burn-book-cover {
  border: 3px solid #ff1493 !important;
}

.regina-page .burn-book-header h2,
.regina-page .burn-book-section h2 {
  color: #ff1493 !important;
}

.regina-page .burn-book-sub {
  color: #ff85b3 !important;
}

.regina-page .burn-form input,
.regina-page .burn-form select {
  background: #0d0d0d !important;
  color: #fff !important;
  border: 2px solid #ff1493 !important;
}

.regina-page .burn-form input::placeholder {
  color: #ff85b3 !important;
}

.regina-page .burn-form button {
  background: #ff1493 !important;
  color: #0d0d0d !important;
  border: 0 !important;
  font-weight: 700 !important;
}

.regina-page .burn-form button:hover {
  background: #ff4daa !important;
}

.regina-page .burn-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.regina-page .burn-entry,
.regina-page .burn-card {
  background: #1a0510 !important;
  border: 2px solid #ff1493 !important;
  color: #fff !important;
  transform: rotate(-1.5deg);
}

.regina-page .burn-card.burn-rot-1 { transform: rotate(-1.5deg) !important; }
.regina-page .burn-card.burn-rot-2 { transform: rotate(1deg) !important; }
.regina-page .burn-card.burn-rot-3 { transform: rotate(-0.5deg) !important; }

.regina-page .burn-entry h3,
.regina-page .burn-card h3,
.regina-page .burn-brand-name {
  color: #ff1493 !important;
}

.regina-page .burn-entry p,
.regina-page .burn-card p,
.regina-page .burn-reason {
  color: #ff85b3 !important;
}

.regina-page .burn-delete,
.regina-page .burn-remove {
  background: transparent !important;
  color: #ff1493 !important;
  border: 1px solid #ff1493 !important;
}
.regina-page .burn-delete:hover,
.regina-page .burn-remove:hover {
  background: #ff1493 !important;
  color: #0d0d0d !important;
}

/* SHARPAY — banner edge-to-edge match */
.sharpay-page .agent-banner {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 14px !important;
}

/* BARBIE — fix add to queue button overflow */
.barbie-page .field-submit,
.barbie-page .add-to-queue-field {
  min-width: 0 !important;
  overflow: hidden !important;
}

.barbie-page .field-submit button,
.barbie-page .add-to-queue-btn {
  width: 100% !important;
  white-space: normal !important;
  font-size: 12px !important;
  padding: 10px 8px !important;
  line-height: 1.2 !important;
  word-wrap: break-word !important;
}

/* ARIANA — dark background per Autumn's request */
.ariana-page {
  background: #100312 !important;
  color: #f5e8f5 !important;
}

.ariana-page .ariana-hero,
.ariana-page .ariana-actions-section,
.ariana-page .ariana-chat,
.ariana-page .vending-section {
  background: #f5d8e8 !important;
  border-color: #b04a8c !important;
  color: #2a1a3a !important;
}

.ariana-page .ariana-page-back,
.ariana-page .agent-page-back-bottom {
  background: #b04a8c !important;
  color: #fff !important;
  border-color: #b04a8c !important;
}
.ariana-page .ariana-page-back:hover,
.ariana-page .agent-page-back-bottom:hover {
  background: #8a3a6c !important;
  border-color: #8a3a6c !important;
}


/* PARIS — dark background, light cards, light buttons */
.paris-page {
  background: linear-gradient(180deg, #1a0d2e 0%, #2a1a4a 100%) !important;
  color: #f5edff !important;
}

.paris-page .paris-hero,
.paris-page .paris-actions-section,
.paris-page .paris-chat,
.paris-page .pets-section {
  background: #e8dff5 !important;
  border-color: #6b3aa0 !important;
}

.paris-page .paris-hero-info h1 {
  color: #2a1a4a !important;
}

.paris-page .paris-hero-info .paris-tag,
.paris-page .paris-hero-info .paris-title,
.paris-page .paris-hero-info .paris-quote {
  color: #6b3aa0 !important;
}

.paris-page .paris-actions-section h2,
.paris-page .paris-chat h2,
.paris-page .pets-section h2 {
  color: #4d2780 !important;
}

/* Buttons go white with purple text + purple border */
.paris-page .paris-action-btn,
.paris-page .paris-chat-form button,
.paris-page .pets-section .field-submit button,
.paris-page .paris-page-back,
.paris-page .agent-page-back-bottom {
  background: #faf6fd !important;
  background-image: none !important;
  color: #6b3aa0 !important;
  border: 2px solid #6b3aa0 !important;
}

.paris-page .paris-action-btn:hover,
.paris-page .paris-chat-form button:hover,
.paris-page .pets-section .field-submit button:hover,
.paris-page .paris-page-back:hover,
.paris-page .agent-page-back-bottom:hover {
  background: #6b3aa0 !important;
  color: #fff !important;
}

.paris-page .paris-action-btn.soft {
  background: transparent !important;
  color: #6b3aa0 !important;
  border: 2px solid #6b3aa0 !important;
}
.paris-page .paris-action-btn.soft:hover {
  background: #faf6fd !important;
}

.paris-page .paris-msg-user .paris-bubble {
  background: #6b3aa0 !important;
  color: #fff !important;
  border-color: #6b3aa0 !important;
}

/* PARIS — restore lavender cards */
.paris-page .paris-hero,
.paris-page .paris-actions-section,
.paris-page .paris-chat,
.paris-page .pets-section {
  background: #c8b0e8 !important;
  border: 3px solid #6b3aa0 !important;
}

/* PARIS — quick action buttons & tabs polish */

/* Quick action buttons: white bg, purple text, purple border */
.paris-page .paris-action-btn,
.paris-page .paris-action-btn.soft {
  background: #ffffff !important;
  background-image: none !important;
  color: #6b3aa0 !important;
  border: 2px solid #6b3aa0 !important;
}

.paris-page .paris-action-btn:hover,
.paris-page .paris-action-btn.soft:hover {
  background: #6b3aa0 !important;
  color: #ffffff !important;
  border-color: #6b3aa0 !important;
}

/* PARIS — quick action buttons, tabs, and tab underline */

/* Quick action buttons: white bg, purple text, purple border */
.paris-page .paris-action-btn,
.paris-page .paris-action-btn.soft {
  background: #ffffff !important;
  background-image: none !important;
  color: #6b3aa0 !important;
  border: 2px solid #6b3aa0 !important;
}

.paris-page .paris-action-btn:hover,
.paris-page .paris-action-btn.soft:hover {
  background: #6b3aa0 !important;
  color: #ffffff !important;
  border-color: #6b3aa0 !important;
}

/* Tab container: kill the white line under the tabs */
.paris-page .pets-tabs {
  border-bottom: 3px solid #6b3aa0 !important;
}

/* Pet tabs: both labels in dark purple */
.paris-page .pets-tab,
.paris-page .pets-tab.active {
  color: #4d2780 !important;
}

.paris-page .pets-tab.active {
  border-bottom-color: #4d2780 !important;
}

.paris-page .pets-tab:hover {
  color: #6b3aa0 !important;
}

/* PARIS — fix product row visibility */
.paris-page .prod-row {
  background: #faf6fd !important;
  border: 2px solid #a890d8 !important;
  border-left: 5px solid #6b3aa0 !important;
  color: #2a1a3a !important;
}

.paris-page .prod-row .prod-name,
.paris-page .prod-row .prod-brand,
.paris-page .prod-row .prod-category,
.paris-page .prod-row .prod-source,
.paris-page .prod-row .prod-notes {
  color: #2a1a3a !important;
}

.paris-page .product-status-select {
  background: #ffffff !important;
  color: #6b3aa0 !important;
  border: 1.5px solid #6b3aa0 !important;
}

/* PARIS — subhead text under section headings */
.paris-page .pets-sub,
.paris-page .pets-section > p {
  color: #4d2780 !important;
}

/* ============================================
   SHARPAY — WRITERS ROOM (tabbed section)
   ============================================ */
.sharpay-page .writers-room-section {
  background: #15040d;
  border: 2px solid #ff3399;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.sharpay-page .writers-room-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #ff3399;
  margin: 0 0 4px;
  font-weight: 700;
}

.sharpay-page .writers-room-sub {
  color: #d4af37;
  font-size: 14px;
  margin: 0 0 20px;
  font-style: italic;
}

.sharpay-page .writers-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 3px solid #ff3399;
}

.sharpay-page .writers-tab {
  background: transparent;
  color: #888;
  border: 0;
  padding: 12px 24px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  font-weight: 600;
  margin-bottom: -3px;
}

.sharpay-page .writers-tab:hover {
  color: #ff3399;
}

.sharpay-page .writers-tab.active {
  color: #ff3399;
  border-bottom-color: #ff3399;
}

.sharpay-page .writers-tab-panel {
  display: none;
}

.sharpay-page .writers-tab-panel.active {
  display: block;
}

.sharpay-page .tab-panel-sub {
  color: #d4af37;
  font-size: 14px;
  margin: 0 0 20px;
  font-style: italic;
}

/* SCRIPTS FORM (inside Scripts Vault tab) */
.sharpay-page .scripts-form {
  display: grid;
  gap: 12px 10px;
  margin-bottom: 16px;
}

.sharpay-page .scripts-form-grid {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "title brand platform length status"
    "hook hook hook hook hook"
    "body body body body body"
    "cta cta cta cta cta"
    "notes notes notes notes notes"
    ".  .  .  . submit";
}

.sharpay-page .field-script-title { grid-area: title; }
.sharpay-page .field-script-hook { grid-area: hook; }
.sharpay-page .field-script-body { grid-area: body; }
.sharpay-page .field-script-cta { grid-area: cta; }
.sharpay-page .field-script-notes { grid-area: notes; }
.sharpay-page .field-script-submit { grid-area: submit; }

.sharpay-page .scripts-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}



.sharpay-page .scripts-form input,
.sharpay-page .scripts-form select,
.sharpay-page .scripts-form textarea {
  background: #000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff3399 !important;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.sharpay-page .scripts-form input::placeholder,
.sharpay-page .scripts-form textarea::placeholder {
  color: #666;
}

.sharpay-page .scripts-form input:focus,
.sharpay-page .scripts-form select:focus,
.sharpay-page .scripts-form textarea:focus {
  outline: 2px solid #d4af37 !important;
  border-color: #d4af37 !important;
}

.sharpay-page .field-script-submit button {
  background: #ff3399;
  color: #000;
  border: 0;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  height: 42px;
}

.sharpay-page .field-script-submit button:hover {
  background: #f5f5f5;
}

.sharpay-page .scripts-feedback {
  margin: 8px 0 16px;
  font-size: 13px;
  font-style: italic;
  min-height: 18px;
  color: #888;
}

.sharpay-page .scripts-feedback.success { color: #4ade80; }
.sharpay-page .scripts-feedback.error { color: #ff6b6b; }

.sharpay-page .scripts-recent-heading {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: #d4af37;
  font-size: 16px;
  margin: 16px 0 12px;
  text-transform: uppercase;
}

.sharpay-page .scripts-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.sharpay-page .script-card {
  background: #2a0a1a;
  border: 1.5px solid #ff3399;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 4px solid #ff3399;
}

.sharpay-page .script-card.status-draft { border-left-color: #888; }
.sharpay-page .script-card.status-ready-to-film { border-left-color: #d4af37; }
.sharpay-page .script-card.status-filmed { border-left-color: #ff3399; }
.sharpay-page .script-card.status-posted { border-left-color: #4ade80; }
.sharpay-page .script-card.status-killed { border-left-color: #555; opacity: 0.5; }

.sharpay-page .script-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.sharpay-page .script-card .script-title {
  color: #f5f5f5;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  flex: 1;
}

.sharpay-page .script-card .script-title:hover { color: #ff3399; }

.sharpay-page .script-card .script-status {
  background: #ff3399;
  color: #000;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sharpay-page .script-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.sharpay-page .script-card-meta span {
  background: #15040d;
  color: #d4af37;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.sharpay-page .script-hook-preview {
  color: #cccccc;
  font-size: 13px;
  margin: 6px 0 0;
  font-style: italic;
  line-height: 1.4;
}

.sharpay-page .script-hook-preview strong {
  color: #ff3399;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 900px) {
  .sharpay-page .scripts-form-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "brand status"
      "platform length"
      "hook hook"
      "body body"
      "cta cta"
      "notes notes"
      "submit submit";
  }
}

/* SHARPAY — force textarea styling AND bigger labels */

/* Bigger, gold labels */
.sharpay-page .scripts-form .form-field label,
.sharpay-page .scripts-form label {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px !important;
  color: #d4af37 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
}

/* Force textareas black */
.sharpay-page .scripts-form textarea,
.sharpay-page textarea#script-hook,
.sharpay-page textarea#script-body,
.sharpay-page textarea#script-cta,
.sharpay-page textarea#script-notes {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff3399 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

.sharpay-page .scripts-form textarea::placeholder {
  color: #666 !important;
}

/* Save to Notion button pink */
.sharpay-page .field-script-submit button {
  background: #ff3399 !important;
  color: #000 !important;
  border: 0 !important;
  font-weight: 700 !important;
}

.sharpay-page .field-script-submit button:hover {
  background: #f5f5f5 !important;
  color: #000 !important;
}

/* SHARPAY — bigger tab labels + matching theme/hook form labels */

/* Tab buttons (Scripts Vault, Theme Calendar, Hooks That Worked) */
body .sharpay-page .writers-tab {
  font-size: 1.25rem !important;
  letter-spacing: 2.5px !important;
  padding: 14px 28px !important;
}

/* Theme Calendar form labels */
body .sharpay-page .theme-form .form-field label,
body .sharpay-page .theme-form label {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px !important;
  color: #d4af37 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
}

/* Theme Calendar inputs to match scripts vault */
body .sharpay-page .theme-form input,
body .sharpay-page .theme-form select {
  background-color: #000000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff3399 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 13px !important;
}

body .sharpay-page .theme-form input::placeholder {
  color: #666 !important;
}

/* Hook form inputs to match */
body .sharpay-page .hook-form input {
  background-color: #000000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff3399 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 13px !important;
}

body .sharpay-page .hook-form input::placeholder {
  color: #666 !important;
}

/* Add Theme + Add Hook buttons pink */
body .sharpay-page .theme-form .field-submit button,
body .sharpay-page .hook-form button {
  background: #ff3399 !important;
  color: #000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
}

body .sharpay-page .theme-form .field-submit button:hover,
body .sharpay-page .hook-form button:hover {
  background: #f5f5f5 !important;
}

/* SHARPAY — tab buttons match Writers Room title font */
body .sharpay-page .writers-tab {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
}

body .sharpay-page .writers-tab.active {
  color: #ff3399 !important;
}

body .sharpay-page .writers-tab:not(.active) {
  color: #aa6090 !important;
}

/* SHARPAY — switch form labels to Playfair Display */
body .sharpay-page .scripts-form .form-field label,
body .sharpay-page .scripts-form label,
body .sharpay-page .theme-form .form-field label,
body .sharpay-page .theme-form label {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* ============================================
   REGINA — PITCH DESK (tabbed section)
   ============================================ */
body .regina-page .pitch-desk-section {
  background: #0a0a0a;
  border: 2px solid #ff1493;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

body .regina-page .pitch-desk-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #ff1493;
  margin: 0 0 4px;
  font-weight: 700;
}

body .regina-page .pitch-desk-sub {
  color: #ff85b3;
  font-size: 14px;
  margin: 0 0 20px;
  font-style: italic;
}

body .regina-page .pitch-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 3px solid #ff1493;
}

body .regina-page button.pitch-tab,
body .regina-page .pitch-tab {
  background: transparent !important;
  color: #aa6090 !important;
  border: 0 !important;
  padding: 14px 28px !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  cursor: pointer;
  border-bottom: 4px solid transparent !important;
  margin-bottom: -3px !important;
}

body .regina-page button.pitch-tab:hover,
body .regina-page .pitch-tab:hover {
  color: #ff1493 !important;
}

body .regina-page button.pitch-tab.active,
body .regina-page .pitch-tab.active {
  color: #ff1493 !important;
  border-bottom-color: #ff1493 !important;
}

body .regina-page .pitch-tab-panel {
  display: none;
}

body .regina-page .pitch-tab-panel.active {
  display: block;
}

body .regina-page .tab-panel-sub {
  color: #ff85b3;
  font-size: 14px;
  margin: 0 0 20px;
  font-style: italic;
}

/* TEMPLATE FORM */
body .regina-page .template-form,
body .regina-page .tracker-form {
  display: grid;
  gap: 14px 12px;
  margin-bottom: 20px;
}

body .regina-page .template-form-grid {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-areas:
    "title type category"
    "body body body"
    "notes notes notes"
    ".  .  submit";
}

body .regina-page .field-template-title { grid-area: title; }
body .regina-page .field-template-body { grid-area: body; }
body .regina-page .field-template-notes { grid-area: notes; }
body .regina-page .field-template-submit { grid-area: submit; }

body .regina-page .tracker-form-grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-areas:
    "brand date channel status"
    "template template template template"
    "notes notes notes notes"
    ".  .  .  submit";
}

body .regina-page .field-tracker-brand { grid-area: brand; }
body .regina-page .field-tracker-template { grid-area: template; }
body .regina-page .field-tracker-notes { grid-area: notes; }
body .regina-page .field-tracker-submit { grid-area: submit; }

/* Form fields shared */
body .regina-page .pitch-tab-panel .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body .regina-page .pitch-tab-panel .form-field label {
  font-family: 'Playfair Display', serif !important;
  letter-spacing: 0.5px !important;
  color: #ffd700 !important;
  font-size: 1.05rem !important;
  text-transform: none !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

body .regina-page .pitch-tab-panel input,
body .regina-page .pitch-tab-panel select,
body .regina-page .pitch-tab-panel textarea {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff1493 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

body .regina-page .pitch-tab-panel input::placeholder,
body .regina-page .pitch-tab-panel textarea::placeholder {
  color: #666 !important;
}

body .regina-page .field-template-submit button,
body .regina-page .field-tracker-submit button {
  background: #ff1493 !important;
  color: #000 !important;
  border: 0 !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  width: 100% !important;
  height: 44px !important;
}

body .regina-page .field-template-submit button:hover,
body .regina-page .field-tracker-submit button:hover {
  background: #f5f5f5 !important;
}

body .regina-page .pitch-feedback-msg {
  margin: 8px 0 16px;
  font-size: 13px;
  font-style: italic;
  min-height: 18px;
  color: #888;
}

body .regina-page .pitch-feedback-msg.success { color: #4ade80; }
body .regina-page .pitch-feedback-msg.error { color: #ff6b6b; }

body .regina-page .pitch-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* TEMPLATE CARDS */
body .regina-page .template-card {
  background: #1a0510;
  border: 1.5px solid #ff1493;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

body .regina-page .template-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

body .regina-page .template-card .template-title {
  color: #f5f5f5;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  flex: 1;
  font-family: 'Playfair Display', serif;
}

body .regina-page .template-card .template-title:hover {
  color: #ff1493;
}

body .regina-page .template-delete,
body .regina-page .tracker-delete {
  background: transparent;
  color: #ff1493;
  border: 1px solid #ff1493;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

body .regina-page .template-delete:hover,
body .regina-page .tracker-delete:hover {
  background: #ff1493;
  color: #000;
}

body .regina-page .template-card-meta,
body .regina-page .tracker-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

body .regina-page .meta-tag {
  background: #2a0a1a;
  color: #ffd700;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 600;
}

body .regina-page .template-body-preview {
  color: #cccccc;
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.5;
  font-style: italic;
}

/* TRACKER CARDS */
body .regina-page .tracker-card {
  background: #1a0510;
  border: 1.5px solid #ff1493;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 4px solid #ff1493;
}

body .regina-page .tracker-card.status-sent { border-left-color: #4a9bd4; }
body .regina-page .tracker-card.status-opened { border-left-color: #ffd700; }
body .regina-page .tracker-card.status-replied { border-left-color: #888; }
body .regina-page .tracker-card.status-negotiating { border-left-color: #ff85b3; }
body .regina-page .tracker-card.status-closed-won { border-left-color: #4ade80; }
body .regina-page .tracker-card.status-closed-lost { border-left-color: #ff6b6b; opacity: 0.6; }
body .regina-page .tracker-card.status-no-reply { border-left-color: #555; opacity: 0.5; }

body .regina-page .tracker-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

body .regina-page .tracker-card .tracker-brand {
  color: #f5f5f5;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  flex: 1;
  font-family: 'Playfair Display', serif;
}

body .regina-page .tracker-card .tracker-brand:hover {
  color: #ff1493;
}

body .regina-page .tracker-status-select {
  background: #2a0a1a !important;
  color: #ff1493 !important;
  border: 1.5px solid #ff1493 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: auto !important;
}

body .regina-page .tracker-notes-line {
  color: #cccccc;
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 900px) {
  body .regina-page .template-form-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "type category"
      "body body"
      "notes notes"
      "submit submit";
  }
  body .regina-page .tracker-form-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "date channel"
      "status status"
      "template template"
      "notes notes"
      "submit submit";
  }
}

/* REGINA — kill yellow, use red/pink palette */
body .regina-page .pitch-tab-panel .form-field label {
  color: #ff85b3 !important;
}

body .regina-page .meta-tag {
  background: #2a0a1a !important;
  color: #ff85b3 !important;
}

/* REGINA — swap yellow labels to pink */
body .regina-page .pitch-tab-panel .form-field label {
  color: #ff85b3 !important;
}

body .regina-page .meta-tag {
  background: #2a0a1a !important;
  color: #ff85b3 !important;
}

/* SHARPAY — markdown rendering inside chat bubbles */
body .sharpay-page .sharpay-bubble h1,
body .sharpay-page .sharpay-bubble h2,
body .sharpay-page .sharpay-bubble h3 {
  color: #ff3399 !important;
  margin: 12px 0 6px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

body .sharpay-page .sharpay-bubble h1 { font-size: 1.3rem; }
body .sharpay-page .sharpay-bubble h2 { font-size: 1.15rem; }
body .sharpay-page .sharpay-bubble h3 { font-size: 1.05rem; }

body .sharpay-page .sharpay-bubble strong {
  color: #d4af37 !important;
  font-weight: 700;
}

body .sharpay-page .sharpay-bubble em {
  color: #ff85b3;
  font-style: italic;
}

body .sharpay-page .sharpay-bubble p {
  margin: 8px 0;
  line-height: 1.5;
}

body .sharpay-page .sharpay-bubble ul,
body .sharpay-page .sharpay-bubble ol {
  margin: 8px 0;
  padding-left: 24px;
}

body .sharpay-page .sharpay-bubble li {
  margin: 4px 0;
  line-height: 1.5;
}

body .sharpay-page .sharpay-bubble hr {
  border: 0;
  border-top: 1px solid #ff3399;
  margin: 16px 0;
  opacity: 0.5;
}

body .sharpay-page .sharpay-bubble code {
  background: #000;
  color: #d4af37;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

body .sharpay-page .sharpay-bubble blockquote {
  border-left: 3px solid #ff3399;
  padding-left: 12px;
  margin: 8px 0;
  color: #cccccc;
  font-style: italic;
}

/* Chat bubble formatting — clean single source of truth */
[class*="-bubble"] {
  line-height: 1.4;
}

[class*="-bubble"] p {
  margin: 8px 0;
}

[class*="-bubble"] p:first-child { margin-top: 0; }
[class*="-bubble"] p:last-child { margin-bottom: 0; }

[class*="-bubble"] ul,
[class*="-bubble"] ol {
  margin: 8px 0;
  padding-left: 22px;
}

[class*="-bubble"] li {
  margin: 0;
  padding: 0;
}

[class*="-bubble"] li > p {
  margin: 0;
  display: inline;
}

[class*="-bubble"] h1,
[class*="-bubble"] h2,
[class*="-bubble"] h3 {
  margin: 12px 0 4px;
  font-weight: 700;
}

[class*="-bubble"] h1:first-child,
[class*="-bubble"] h2:first-child,
[class*="-bubble"] h3:first-child {
  margin-top: 0;
}

[class*="-bubble"] hr {
  margin: 8px 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}

[class*="-bubble"] strong { font-weight: 700; }
[class*="-bubble"] em { font-style: italic; }

/* ============================================
   BRITNEY — Brand Briefs Log
   ============================================ */
body .britney-page .briefs-section {
  background: #1a0e18;
  border: 1.5px solid #ff66b8;
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
}

body .britney-page .briefs-header h2 {
  font-family: 'Playfair Display', serif;
  color: #ff3399;
  font-size: 1.6rem;
  margin: 0 0 4px;
}

body .britney-page .briefs-sub {
  color: #ff85b3;
  font-style: italic;
  margin: 0 0 18px;
  font-size: 0.9rem;
}

body .britney-page .briefs-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

body .britney-page .briefs-form-grid .form-field {
  display: flex;
  flex-direction: column;
}

body .britney-page .briefs-form-grid .field-brief-brand,
body .britney-page .briefs-form-grid .field-brief-deliverables,
body .britney-page .briefs-form-grid .field-brief-redflags,
body .britney-page .briefs-form-grid .field-brief-notes {
  grid-column: 1 / -1;
}

body .britney-page .briefs-form-grid .field-brief-submit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

body .britney-page .briefs-form-grid label {
  font-family: 'Playfair Display', serif;
  color: #ff3399;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

body .britney-page .briefs-form-grid input,
body .britney-page .briefs-form-grid select,
body .britney-page .briefs-form-grid textarea {
  background: #000;
  border: 1.5px solid #ff66b8;
  border-radius: 6px;
  padding: 8px 12px;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 0.95rem;
}

body .britney-page .briefs-form-grid textarea {
  resize: vertical;
  min-height: 50px;
}

body .britney-page .briefs-form-grid button[type="submit"] {
  background: #ff3399;
  color: #000;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}

body .britney-page .briefs-form-grid button[type="submit"]:hover {
  background: #ff66b8;
}

body .britney-page .brief-feedback-msg {
  margin: 0 0 12px;
  font-style: italic;
  color: #ff85b3;
  min-height: 18px;
}

body .britney-page .brief-feedback-msg.success { color: #4ade80; }
body .britney-page .brief-feedback-msg.error { color: #ff4444; }

body .britney-page .briefs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body .britney-page .briefs-empty {
  color: #ff85b3;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}

body .britney-page .brief-card {
  background: #2a0a1a;
  border: 1.5px solid #ff66b8;
  border-radius: 8px;
  padding: 14px 18px;
}

body .britney-page .brief-card.decision-accepted { border-color: #4ade80; }
body .britney-page .brief-card.decision-declined { border-color: #888; opacity: 0.7; }
body .britney-page .brief-card.decision-ghosted { border-color: #555; opacity: 0.6; }
body .britney-page .brief-card.decision-negotiating { border-color: #ffd700; }

body .britney-page .brief-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

body .britney-page .brief-brand {
  font-family: 'Playfair Display', serif;
  color: #ff3399;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  flex: 1;
}

body .britney-page .brief-brand:hover { text-decoration: underline; }

body .britney-page .brief-decision-select {
  background: #000;
  border: 1px solid #ff66b8;
  border-radius: 4px;
  color: #f5f5f5;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

body .britney-page .brief-delete {
  background: none;
  border: none;
  color: #ff66b8;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
}

body .britney-page .brief-delete:hover { color: #ff3399; }

body .britney-page .brief-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

body .britney-page .brief-card-meta .meta-tag {
  background: #1a0e18;
  border: 1px solid #ff66b8;
  color: #ff85b3;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
}

body .britney-page .brief-line {
  margin: 4px 0;
  color: #f5f5f5;
  font-size: 0.92rem;
  line-height: 1.4;
}

body .britney-page .brief-line strong {
  color: #ff3399;
  font-weight: 700;
}

body .britney-page .brief-line.brief-redflags strong {
  color: #ff4444;
}

/* Selena — fix empty board message width */
body .selena-page .deals-columns .deals-empty {
  text-align: center;
  font-style: italic;
  color: #ff85b3;
  padding: 30px 20px;
  width: 100%;
  margin: 0;
}

/* ============================================
   SELENA — Add Deal form
   ============================================ */
body .selena-page .deals-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  background: rgba(196, 121, 143, 0.08);
  border: 1px solid rgba(196, 121, 143, 0.3);
  border-radius: 8px;
}

body .selena-page .deals-form-grid .form-field {
  display: flex;
  flex-direction: column;
}

body .selena-page .deals-form-grid .field-deal-brand,
body .selena-page .deals-form-grid .field-deal-notes {
  grid-column: 1 / -1;
}

body .selena-page .deals-form-grid .field-deal-submit {
  grid-column: 1 / -1;
}

body .selena-page .deals-form-grid label {
  font-family: 'Bebas Neue', sans-serif;
  color: #c4798f;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

body .selena-page .deals-form-grid input,
body .selena-page .deals-form-grid select,
body .selena-page .deals-form-grid textarea {
  background: #000;
  border: 1.5px solid #c4798f;
  border-radius: 6px;
  padding: 9px 12px;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 0.95rem;
}

body .selena-page .deals-form-grid input:focus,
body .selena-page .deals-form-grid select:focus,
body .selena-page .deals-form-grid textarea:focus {
  outline: none;
  border-color: #d99baa;
  box-shadow: 0 0 0 2px rgba(196, 121, 143, 0.25);
}

body .selena-page .deals-form-grid textarea {
  resize: vertical;
  min-height: 50px;
}

body .selena-page .deals-form-grid button[type="submit"] {
  width: 100%;
  background: #c4798f;
  color: #1a0d12;
  border: none;
  padding: 14px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s;
}

body .selena-page .deals-form-grid button[type="submit"]:hover {
  background: #d99baa;
}

body .selena-page .deal-feedback-msg {
  margin: 0 0 12px;
  font-style: italic;
  color: #c4798f;
  min-height: 18px;
}

body .selena-page .deal-feedback-msg.success { color: #4ade80; }
body .selena-page .deal-feedback-msg.error { color: #ff4444; }

body .selena-page .deals-columns .deals-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  color: #c4798f;
  padding: 30px 20px;
  width: 100%;
  margin: 0;
}

/* ============================================
   PIN BUTTON + TOAST (universal)
   ============================================ */
[class*="-bubble"] {
  position: relative;
}

.pin-message-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
  color: #fff;
}

[class*="-bubble"]:hover .pin-message-btn {
  opacity: 0.7;
}

.pin-message-btn:hover {
  opacity: 1 !important;
  background: rgba(212, 163, 193, 0.6);
  transform: scale(1.1);
}

.pin-message-btn.pinned {
  opacity: 1 !important;
  background: rgba(255, 215, 0, 0.3);
}

/* Toast */
.pin-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2a1626;
  color: #f5f5f5;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1px solid #d4a3c1;
  font-size: 14px;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  max-width: 380px;
}

.pin-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pin-toast.error {
  border-color: #ff4444;
}

/* ============================================
   ELLE — OUTBOX
   ============================================ */
body .elle-page .elle-outbox {
  margin: 40px 0;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 192, 203, 0.06), rgba(255, 105, 180, 0.04));
  border: 1px solid rgba(255, 105, 180, 0.25);
  border-radius: 12px;
}

body .elle-page .outbox-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

body .elle-page .outbox-header h2 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  color: #ff85b3;
  font-size: 1.6rem;
}

body .elle-page .outbox-sub {
  margin: 4px 0 0;
  color: #999;
  font-size: 0.9rem;
  font-style: italic;
}

body .elle-page .outbox-actions {
  display: flex;
  gap: 10px;
}

body .elle-page .outbox-clear,
body .elle-page .outbox-send {
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
}

body .elle-page .outbox-clear {
  background: transparent;
  border: 1px solid #888;
  color: #aaa;
}

body .elle-page .outbox-clear:hover {
  border-color: #ff85b3;
  color: #ff85b3;
}

body .elle-page .outbox-send {
  background: #ff85b3;
  color: #1a0d12;
  font-weight: 700;
}

body .elle-page .outbox-send:hover:not(:disabled) {
  background: #ffa3c7;
}

body .elle-page .outbox-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body .elle-page .outbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body .elle-page .outbox-empty {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 30px 0;
  margin: 0;
}

body .elle-page .outbox-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 133, 179, 0.2);
  border-radius: 8px;
  padding: 14px 18px;
}

body .elle-page .outbox-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

body .elle-page .outbox-agent {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  color: #ff85b3;
  font-size: 0.95rem;
}

body .elle-page .outbox-time {
  color: #888;
  font-size: 0.8rem;
  font-style: italic;
  margin-right: auto;
}

body .elle-page .outbox-remove {
  background: transparent;
  border: none;
  color: #888;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}

body .elle-page .outbox-remove:hover {
  color: #ff4444;
}

body .elle-page .outbox-content {
  color: #ddd;
  font-size: 0.95rem;
  line-height: 1.6;
}

body .elle-page .outbox-content h1,
body .elle-page .outbox-content h2,
body .elle-page .outbox-content h3 {
  color: #ff85b3;
  margin: 12px 0 6px;
  font-family: inherit;
}

body .elle-page .outbox-content h1 { font-size: 1.15rem; }
body .elle-page .outbox-content h2 { font-size: 1.05rem; }
body .elle-page .outbox-content h3 { font-size: 0.98rem; }

body .elle-page .outbox-content p {
  margin: 8px 0;
}

body .elle-page .outbox-content strong {
  color: #fff;
}

body .elle-page .outbox-content em {
  color: #ffb3d1;
}

body .elle-page .outbox-content hr {
  border: none;
  border-top: 1px solid rgba(255, 133, 179, 0.2);
  margin: 14px 0;
}

body .elle-page .outbox-content ul,
body .elle-page .outbox-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

body .elle-page .outbox-content code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}


/* ============================================
   MOBILE — phones only (≤768px)
   Desktop and tablet styles above are untouched.
   Last updated: deploy night
   ============================================ */
@media (max-width: 768px) {

  /* ---- Page container ---- */
  .page {
    padding: 12px 12px 40px !important;
  }

  /* ---- Top nav ---- */
  .top-nav {
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    padding: calc(env(safe-area-inset-top) + 10px) 14px 10px 14px !important;
  }
  .top-nav .nav-link {
    font-size: 13px !important;
  }
  .top-nav .nav-signout {
    margin-left: auto !important;
  }

  /* ---- Command Center header ---- */
  .command-header h1 {
    font-size: 32px !important;
    letter-spacing: 3px !important;
  }
  .command-header .subtitle {
    font-size: 11px !important;
  }

  /* ---- Top grid (photo / center / calendar) STACKS ---- */
  .top-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .photo-panel {
    min-height: 0 !important;
    height: auto !important;
  }
  .photo-panel .photo-slot {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  .photo-panel img,
  .photo-panel .photo-slot img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  .right-column,
  .center-stack {
    height: auto !important;
  }

  /* ---- Calendar widget ---- */
  .calendar-widget {
    padding: 14px 14px !important;
  }
  .cal-month {
    font-size: 18px !important;
  }
  .big-clock #clock-time {
    font-size: 42px !important;
    letter-spacing: 2px !important;
  }
  .big-clock {
    min-height: 110px !important;
    padding: 18px 16px !important;
  }

  /* ---- Pitch logger ---- */
  .pitch-logger form {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .pitch-logger .row-1-brand,
  .pitch-logger .row-2-niche,
  .pitch-logger .right-stack,
  .pitch-logger .row-3-notes {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .pitch-logger .right-stack {
    flex-direction: column !important;
  }

  /* ---- Quick launch bar ---- */
  .quick-launch {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .ql-btn {
    padding: 12px 4px !important;
    gap: 6px !important;
  }
  .ql-btn img {
    width: 44px !important;
    height: 44px !important;
  }
  .ql-btn span {
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }

  /* ---- Chain of command (Elle on home) ---- */
  .elle-card {
    padding: 16px !important;
  }
  .elle-card .elle-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .elle-card .elle-photo {
    height: 240px !important;
  }
  .elle-card .elle-name {
    font-size: 24px !important;
  }
  .elle-card .elle-bullets {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Elle's action buttons: equal heights, never wrap weirdly */
  .elle-card .elle-actions {
    gap: 10px !important;
  }
  .elle-card .elle-actions a {
    padding: 18px 14px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }
  .elle-card .elle-actions .secondary {
    padding: 18px 14px !important;
    font-size: 14px !important;
  }

  /* ---- Agent grid: 2 per row ---- */
  .agent-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .agent-card {
    padding: 16px 10px !important;
    min-height: 72px !important;
  }
  .agent-card .name {
    font-size: 16px !important;
  }
  .agent-card .role {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  /* ---- All hero sections (Elle / Regina / Sharpay / Selena / Britney / Blair / Miley / Jade / Kesha / Sabrina / Barbie / Olivia / Ariana / Cameron / Paris) ---- */
  .elle-page,
  .regina-page,
  .sharpay-page,
  .selena-page,
  .britney-page,
  .blair-page,
  .miley-page,
  .jade-page,
  .kesha-page,
  .sabrina-page,
  .barbie-page,
  .olivia-page,
  .ariana-page,
  .cameron-page,
  .paris-page {
    margin: -12px -12px -40px !important;
    padding: 24px 14px 40px !important;
  }

  .elle-hero,
  .regina-hero,
  .sharpay-hero,
  .selena-hero,
  .britney-hero,
  .blair-hero,
  .miley-hero,
  .jade-hero,
  .kesha-hero,
  .sabrina-hero,
  .barbie-hero,
  .olivia-hero,
  .ariana-hero,
  .cameron-hero,
  .paris-hero {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
  }

  /* Hero photos: full image, no crop */
  .elle-hero-photo,
  .regina-hero-photo,
  .sharpay-hero-photo,
  .selena-hero-photo,
  .britney-hero-photo,
  .blair-hero-photo,
  .miley-hero-photo,
  .jade-hero-photo,
  .kesha-hero-photo,
  .sabrina-hero-photo,
  .barbie-hero-photo,
  .olivia-hero-photo,
  .ariana-hero-photo,
  .cameron-hero-photo,
  .paris-hero-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Hero h1 sizing (was 56-60px) */
  .elle-hero-info h1,
  .regina-hero-info h1,
  .sharpay-hero-info h1,
  .selena-hero-info h1,
  .britney-hero-info h1,
  .blair-hero-info h1,
  .miley-hero-info h1,
  .jade-hero-info h1,
  .kesha-hero-info h1,
  .sabrina-hero-info h1,
  .barbie-hero-info h1,
  .olivia-hero-info h1,
  .ariana-hero-info h1,
  .cameron-hero-info h1,
  .paris-hero-info h1 {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }

  /* Hero quote sizing */
  .elle-hero-info .elle-quote,
  .regina-hero-info .regina-quote,
  .sharpay-hero-info .sharpay-quote,
  .selena-hero-info .selena-quote,
  .britney-hero-info .britney-quote,
  .blair-hero-info .blair-quote,
  .miley-hero-info .miley-quote,
  .kesha-quote,
  .jade-quote,
  .sabrina-quote,
  .barbie-quote,
  .olivia-quote,
  .ariana-hero-info .ariana-quote,
  .cameron-hero-info .cameron-quote,
  .paris-hero-info .paris-quote {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }

  /* Hero bio */
  .elle-hero-info .elle-bio,
  .regina-hero-info .regina-bio,
  .sharpay-hero-info .sharpay-bio,
  .selena-hero-info .selena-bio,
  .britney-hero-info .britney-bio,
  .blair-hero-info .blair-bio,
  .miley-hero-info .miley-bio,
  .jade-bio,
  .kesha-bio,
  .sabrina-bio,
  .barbie-bio,
  .olivia-bio,
  .ariana-hero-info .ariana-bio,
  .cameron-hero-info .cameron-bio,
  .paris-hero-info .paris-bio {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ---- All action grids (4 cols → 2 cols) ---- */
  .elle-actions-grid,
  .regina-actions-grid,
  .sharpay-actions-grid,
  .selena-actions-grid,
  .britney-actions-grid,
  .blair-actions-grid,
  .miley-actions-grid,
  .jade-actions-grid,
  .kesha-actions-grid,
  .sabrina-actions-grid,
  .barbie-actions-grid,
  .olivia-actions-grid,
  .ariana-actions-grid,
  .cameron-actions-grid,
  .paris-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .elle-action-btn,
  .regina-action-btn,
  .sharpay-action-btn,
  .selena-action-btn,
  .britney-action-btn,
  .blair-action-btn,
  .miley-action-btn,
  .jade-action-btn,
  .kesha-action-btn,
  .sabrina-action-btn,
  .barbie-action-btn,
  .olivia-action-btn,
  .ariana-action-btn,
  .cameron-action-btn,
  .paris-action-btn {
    padding: 16px 10px !important;
    font-size: 12px !important;
    min-height: 48px !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* ---- Sections (action / chat / data) ---- */
  .elle-actions-section,
  .elle-chat,
  .elle-briefing,
  .elle-top8,
  .elle-notes-section,
  .regina-actions-section,
  .regina-chat,
  .burn-book-section,
  .sharpay-actions-section,
  .sharpay-chat,
  .hook-library-section,
  .writers-room-section,
  .theme-calendar-section,
  .selena-actions-section,
  .selena-chat,
  .deals-board-section,
  .britney-actions-section,
  .britney-chat,
  .rates-section,
  .briefs-section,
  .blair-actions-section,
  .blair-chat,
  .wishlist-section,
  .miley-actions-section,
  .miley-chat,
  .inventory-section,
  .campaign-calendar-section,
  .jade-chat,
  .cliplog-section,
  .kesha-chat,
  .streamkit-section,
  .sabrina-chat,
  .gamelibrary-section,
  .barbie-chat,
  .editqueue-section,
  .olivia-chat,
  .analytics-section,
  .ariana-actions-section,
  .ariana-chat,
  .vending-section,
  .cameron-actions-section,
  .cameron-chat,
  .schedule-section,
  .paris-actions-section,
  .paris-chat,
  .pets-section,
  .pitch-desk-section {
    padding: 16px !important;
    margin-bottom: 18px !important;
  }

  /* ---- Chat bubbles: kill the 80px margin on phone ---- */
  .elle-msg-user .elle-bubble,
  .regina-msg-user .regina-bubble,
  .sharpay-msg-user .sharpay-bubble,
  .selena-msg-user .selena-bubble,
  .britney-msg-user .britney-bubble,
  .blair-msg-user .blair-bubble,
  .miley-msg-user .miley-bubble,
  .ariana-msg-user .ariana-bubble,
  .cameron-msg-user .cameron-bubble,
  .paris-msg-user .paris-bubble {
    margin-left: 24px !important;
  }

  .elle-msg-elle .elle-bubble,
  .regina-msg-regina .regina-bubble,
  .sharpay-msg-sharpay .sharpay-bubble,
  .selena-msg-selena .selena-bubble,
  .britney-msg-britney .britney-bubble,
  .blair-msg-blair .blair-bubble,
  .miley-msg-miley .miley-bubble,
  .ariana-msg-ariana .ariana-bubble,
  .cameron-msg-cameron .cameron-bubble,
  .paris-msg-paris .paris-bubble {
    margin-right: 24px !important;
  }

  /* ---- Chat forms: stack input + button ---- */
  .elle-chat-form,
  .regina-chat-form,
  .sharpay-chat-form,
  .selena-chat-form,
  .britney-chat-form,
  .blair-chat-form,
  .miley-chat-form,
  .ariana-chat-form,
  .cameron-chat-form,
  .paris-chat-form,
  .notes-form {
    grid-template-columns: 1fr !important;
  }

  /* ---- All form grids in agent pages ---- */
  .briefing-grid,
  .top8-grid,
  .notes-grid,
  .post-form-grid,
  .goal-form-grid,
  .theme-form-grid,
  .schedule-form-grid,
  .machine-form-grid,
  .transaction-form-grid,
  .product-form-grid,
  .brand-form-grid,
  .scripts-form-grid,
  .template-form-grid,
  .tracker-form-grid,
  .briefs-form-grid,
  .deals-form-grid,
  .campaign-form-grid,
  .rates-form,
  .wishlist-form,
  .inventory-form,
  .burn-form,
  .hook-form,
  .cliplog-form,
  .streamkit-form,
  .gamelibrary-form,
  .editqueue-form {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 10px !important;
  }

  /* Reset all field-area assignments for phone */
  .post-form-grid .field-title,
  .post-form-grid .field-platform,
  .post-form-grid .field-date,
  .post-form-grid .field-views,
  .post-form-grid .field-interactions,
  .post-form-grid .field-tier,
  .post-form-grid .field-notes,
  .post-form-grid .field-submit,
  .scripts-form .field-script-title,
  .scripts-form .field-script-hook,
  .scripts-form .field-script-body,
  .scripts-form .field-script-cta,
  .scripts-form .field-script-notes,
  .scripts-form .field-script-submit,
  .template-form .field-template-title,
  .template-form .field-template-body,
  .template-form .field-template-notes,
  .template-form .field-template-submit,
  .tracker-form .field-tracker-brand,
  .tracker-form .field-tracker-template,
  .tracker-form .field-tracker-notes,
  .tracker-form .field-tracker-submit {
    grid-area: auto !important;
  }

  /* Top 8 mini-grid: 4 → 2 cols */
  .top8-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Briefing 3 cols → 1 */
  .briefing-grid {
    grid-template-columns: 1fr !important;
  }

  /* Wishlist tiers, rates, hooks: multi → 1 */
  .wishlist-tiers,
  .rates-grid,
  .hook-grid,
  .notes-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blair's empty wishlist message: wrap properly, center, fit */
  .wishlist-section .wishlist-empty,
  .blair-page .wishlist-empty {
    white-space: normal !important;
    text-align: center !important;
    padding: 24px 16px !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    word-wrap: break-word !important;
  }

  /* Burn book grid: just stack */
  .burn-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inventory: 4 → 2 */
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ---- Tabular row layouts: stack on phone ---- */
  .post-row,
  .clip-row,
  .add-clip-form,
  .kit-row,
  .game-row,
  .add-video-form,
  .video-row,
  .deliverable-row,
  .add-deliv-form,
  .theme-row,
  .campaign-row,
  .event-row,
  .brand-row,
  .prod-row,
  .product-row,
  .product-row-header,
  .brand-row-header,
  .txn-row,
  .txn-row-header {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px !important;
  }

  /* Hide column headers on phone since rows are stacked */
  .product-row-header,
  .brand-row-header,
  .txn-row-header {
    display: none !important;
  }

  /* ---- Selena deals kanban: scroll horizontally ---- */
  .deals-columns {
    grid-template-columns: repeat(7, 240px) !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Barbie kanban: 4 → 2 */
  .kanban-board {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .queue-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Summary card grids */
  .summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Stat / quick-launch sizing ---- */
  .stat-num {
    font-size: 1.6rem !important;
  }

  /* ---- Burn book header ---- */
  .burn-book-header h2 {
    font-size: 32px !important;
  }
  .burn-book-cover {
    height: 140px !important;
  }

  /* Hook library header */
  .hook-library-header h2 {
    font-size: 26px !important;
  }

  /* ---- Tabs (Sharpay writers, Olivia analytics, Kesha streamkit, Sabrina/Paris/Ariana, Regina pitch) ---- */
  .vending-tabs,
  .pets-tabs,
  .writers-tabs,
  .pitch-tabs,
  .analytics-tabs,
  .streamkit-tabs {
    gap: 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .vending-tab,
  .pets-tab,
  .writers-tab,
  .pitch-tab,
  .analytics-tab,
  .kit-tab {
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  body .sharpay-page .writers-tab,
  body .regina-page .pitch-tab {
    font-size: 1rem !important;
    padding: 10px 16px !important;
  }

  /* ---- Modals ---- */
  .deal-modal,
  .product-modal,
  .ariana-modal {
    padding: 16px !important;
  }
  .deal-modal-content,
  .product-modal-content,
  .ariana-modal-content {
    padding: 20px 16px !important;
    max-height: 92vh !important;
  }
  .modal-actions,
  .payment-row,
  .product-add-form .form-field-row {
    grid-template-columns: 1fr !important;
  }

  /* ---- Outbox (Elle) ---- */
  body .elle-page .outbox-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body .elle-page .outbox-actions {
    flex-direction: row !important;
  }
  body .elle-page .outbox-clear,
  body .elle-page .outbox-send {
    flex: 1 !important;
  }

  /* ---- Login card ---- */
  .login-card {
    margin: 8vh 12px 0 !important;
    padding: 28px 22px !important;
  }

  /* ---- Touch target safety ---- */
  button,
  a.elle-action-btn,
  a.regina-action-btn,
  a.sharpay-action-btn,
  a.selena-action-btn,
  a.britney-action-btn,
  a.blair-action-btn,
  a.miley-action-btn,
  a.jade-action-btn,
  a.kesha-action-btn,
  a.sabrina-action-btn,
  a.barbie-action-btn,
  a.olivia-action-btn,
  a.ariana-action-btn,
  a.cameron-action-btn,
  a.paris-action-btn,
  input[type="submit"] {
    min-height: 44px !important;
  }

  /* ---- Banners ---- */
  .agent-banner {
    height: 140px !important;
    margin: 16px 0 !important;
  }
  .hook-library-cover {
    aspect-ratio: 5 / 2 !important;
  }

  /* Sabrina banner: shift right so face shows */
  .sabrina-page .agent-banner {
    background-position: 70% center !important;
  }
}

/* ============================================
   SCROLL JUMP BUTTON (top/bottom)
   ============================================ */
#scroll-jump-btn {
  position: fixed;
  right: 18px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.15s ease, background 0.15s ease;
  font-family: inherit;
  line-height: 1;
}

#scroll-jump-btn:hover {
  background: rgba(40, 40, 40, 0.95);
  transform: scale(1.06);
}

#scroll-jump-btn:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  #scroll-jump-btn {
    right: 14px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
}


/* ============================================
   FINAL FIX — sign out fits, nav centered, no right gap
   ============================================ */

.top-nav {
  padding: 14px 24px !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 16px 22px !important;
  align-items: center !important;
}

/* Sign out stays inside the nav box, pushed right */
.top-nav .nav-signout {
  margin-left: auto !important;
}

/* Stats counter: real green, sits between analytics and bell */
.top-nav .nav-stats {
  font: inherit;
  color: #8fbf8f;
  font-size: 14px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-nav .nav-stats strong {
  color: #8fbf8f;
  font-weight: 600;
}

.top-nav .nav-stats .stat-sep {
  color: #d4a3c1;
  margin: 0 2px;
}

/* Search bar: centered, narrower, between command center and top grid */
.search-bar-wrapper {
  max-width: 480px;
  margin: 0 auto 20px;
  position: relative;
}

.search-bar-wrapper .dashboard-search {
  width: 100%;
  padding: 10px 40px 10px 16px;
  background: transparent;
  border: 1px solid #2a4a2a;
  border-radius: 24px;
  color: #8fbf8f;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.search-bar-wrapper .dashboard-search:focus {
  outline: none;
  border-color: #4a7a4a;
}

.search-bar-wrapper .dashboard-search::placeholder {
  color: #4a5a4a;
  font-style: italic;
}

.search-bar-wrapper::after {
  content: "🔍";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  opacity: 0.6;
}

.search-bar-wrapper .search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #0f0f0f;
  border: 1px solid #2a4a2a;
  border-radius: 12px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
}

.search-bar-wrapper .search-results.open {
  display: block;
}

.search-bar-wrapper .search-item {
  display: block;
  padding: 10px 16px;
  color: #8fbf8f;
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid #1a1a1a;
}

.search-bar-wrapper .search-item:hover {
  background: #1a2a1a;
}

/* ============================================
   FINAL CLEAN-UP
   ============================================ */

/* 1. Push the whole page down so sign out is never cut off */
.page {
  padding-top: 48px !important;
}

/* 2. Quick-launch: green border + green-tinted buttons to match nav */
.quick-launch {
  border: 1px solid #2d5f3f !important;
}

.ql-btn {
  border: 1px solid #2d5f3f !important;
}

.ql-btn span {
  color: #faf6ef !important;
  text-align: center !important;
}

/* 3. Force calendar back to cream/white — kill any dark mode override */
.calendar-widget {
  background: #faf6ef !important;
  color: #1f1b16 !important;
}

.calendar-widget * {
  color: #1f1b16 !important;
}

.cal-grid td.today span {
  color: #2d5f3f !important;
  border-color: #2d5f3f !important;
}

.cal-grid td.has-event::after {
  background: #2d5f3f !important;
}

/* ============================================
   FINAL NAV + CALENDAR — last word
   ============================================ */

body .top-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px 26px !important;
  padding: 22px 28px !important;
  margin-top: 16px !important;
  margin-bottom: 28px !important;
  border: 1px solid #2d5f3f !important;
  border-radius: 8px !important;
  background: #0f0f0f !important;
}

body .top-nav .nav-link,
body .top-nav .nav-stats,
body .top-nav .nav-notifications,
body .top-nav .nav-signout,
body .top-nav a,
body .top-nav button,
body .top-nav span {
  color: #8fbf8f !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  font-family: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}

body .top-nav .nav-link.active {
  color: #8fbf8f !important;
  font-weight: 700 !important;
}

body .top-nav .nav-link:hover,
body .top-nav .nav-signout:hover {
  color: #c5e8c5 !important;
}

body .top-nav .nav-signout {
  margin-left: 0 !important;
}

/* Search bar centered at top */
body .search-bar-wrapper {
  max-width: 480px !important;
  margin: 24px auto 16px !important;
}

/* Calendar: WHITE, no exceptions */
body .calendar-widget {
  background: #faf6ef !important;
}

body .calendar-widget,
body .calendar-widget .cal-header,
body .calendar-widget .cal-year,
body .calendar-widget .cal-month,
body .calendar-widget .cal-grid,
body .calendar-widget .cal-grid th,
body .calendar-widget .cal-grid td {
  color: #1f1b16 !important;
  background-color: transparent !important;
}

body .calendar-widget {
  background-color: #faf6ef !important;
}

body .cal-grid td.today span {
  background: transparent !important;
  color: #2d5f3f !important;
  border: 1.5px solid #2d5f3f !important;
}

body .cal-grid td.has-event::after {
  background: #2d5f3f !important;
}

/* Bold all nav text to match home */
body .top-nav .nav-link,
body .top-nav .nav-stats,
body .top-nav .nav-notifications,
body .top-nav .nav-signout,
body .top-nav a,
body .top-nav button,
body .top-nav span {
  font-weight: 600 !important;
}

/* Calendar: nuke brown completely with maximum specificity */
html body .calendar-widget,
html body div.calendar-widget {
  background: #faf6ef !important;
  background-color: #faf6ef !important;
  background-image: none !important;
}

html body .calendar-widget .cal-header,
html body .calendar-widget .cal-grid,
html body .calendar-widget .cal-grid thead,
html body .calendar-widget .cal-grid tbody,
html body .calendar-widget .cal-grid tr,
html body .calendar-widget .cal-grid th,
html body .calendar-widget .cal-grid td {
  background: #faf6ef !important;
  background-color: #faf6ef !important;
  background-image: none !important;
  color: #1f1b16 !important;
}

html body .calendar-widget .cal-year,
html body .calendar-widget .cal-month {
  color: #1f1b16 !important;
  background: transparent !important;
}

html body .cal-grid td.today span {
  background: #faf6ef !important;
  color: #2d5f3f !important;
  border: 1.5px solid #2d5f3f !important;
}

/* ============================================
   BRIEFS WAITING POPUP (replaces Status/Mood)
   ============================================ */
.briefs-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
}

.briefs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.briefs-header .panel-label {
  margin: 0;
}

.briefs-count {
  background: #4ade80;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  min-width: 24px;
  text-align: center;
}

.briefs-count:empty,
.briefs-count[data-empty="true"] {
  background: #333;
  color: #888;
}

.briefs-empty {
  color: #888;
  font-size: 13px;
  font-style: italic;
  margin: 8px 0 0;
  text-align: center;
  padding: 12px 0;
}

.brief-row {
  border-top: 1px solid #2a2a2a;
  padding: 10px 0;
}

.brief-row:first-child {
  border-top: none;
  padding-top: 4px;
}

.brief-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease;
}

.brief-row-head:hover {
  opacity: 0.8;
}

.brief-emoji {
  font-size: 18px;
}

.brief-name {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  color: #4ade80;
  font-size: 15px;
}

.brief-role {
  color: #888;
  font-size: 12px;
  flex: 1;
}

.brief-arrow {
  color: #4ade80;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.brief-preview {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin-top 0.25s ease;
}

.brief-preview.open {
  max-height: 300px;
  margin-top: 10px;
}

.brief-text {
  color: #ccc;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #0f0f0f;
  border-radius: 6px;
  border-left: 2px solid #4ade80;
}

.brief-visit {
  background: #4ade80;
  color: #000;
  border: none;
  padding: 8px 14px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
}

.brief-visit:hover {
  background: #22c55e;
}

/* ============================================
   WISHLIST — TABBED LAYOUT (Sharpay-style)
   ============================================ */

/* Tabs nav */
.wl-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #d4af37;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.wl-tab {
  background: transparent;
  border: none;
  color: #f5f0e1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-tab:hover {
  color: #d4af37;
}

.wl-tab.active {
  color: #d4af37;
  border-bottom: 2px solid #d4af37;
  margin-bottom: -2px;
}

.wl-tab-count {
  display: inline-block;
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: inherit;
  min-width: 22px;
  text-align: center;
}

.wl-tab.active .wl-tab-count {
  background: #d4af37;
  color: #0a1628;
}

/* Panels (hidden by default) */
.wl-panel {
  display: none;
}

.wl-panel.active {
  display: block;
}

.wl-panel-intro {
  color: #999;
  font-style: italic;
  margin: 0 0 18px;
  font-size: 14px;
}

/* Form (Log a Brand tab) — same layout as before */
.wishlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.wishlist-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wishlist-form-row > input,
.wishlist-form-row > select {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  background: #0a1628;
  border: 1px solid #d4af37;
  color: #f5f0e1;
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}

.wishlist-form-row > select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
  cursor: pointer;
}

.wishlist-form-row > select option {
  background: #0a1628;
  color: #f5f0e1;
  padding: 10px;
}

.wishlist-form-row > input:focus,
.wishlist-form-row > select:focus {
  outline: none;
  border-color: #e8c349;
}

.wishlist-form-row .wish-why-input {
  width: 100%;
  flex: 1 1 100%;
}

.wishlist-add-btn {
  background: #d4af37;
  color: #0a1628;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s ease;
}

.wishlist-add-btn:hover {
  background: #e8c349;
}

.blair-page .wl-list,
.wishlist-section .wl-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  flex-direction: unset !important;
}

@media (max-width: 1000px) {
  .blair-page .wl-list,
  .wishlist-section .wl-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .blair-page .wl-list,
  .wishlist-section .wl-list {
    grid-template-columns: 1fr !important;
  }
}

.wl-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 32px 0;
  margin: 0;
}

/* Card */
.wl-card {
  background: #0a1628;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.wl-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
}

.wl-card.expanded {
  border-color: #d4af37;
}

/* Card head (always visible) */
.wl-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.blair-page .wl-card-brand,
.wishlist-section .wl-card-brand {
  flex: 1 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #f5f0e1 !important;
  text-transform: none !important;
}

.wl-card-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.wl-badge-email {
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
}

.wl-badge-dm {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.wl-card-arrow {
  color: #d4af37;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.wl-card.expanded .wl-card-arrow {
  transform: rotate(180deg);
}

/* Card body (expanded) */
.wl-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 18px;
}

.wl-card.expanded .wl-card-body {
  max-height: 400px;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 14px;
}

.wl-detail {
  margin: 6px 0;
  font-size: 13px;
  color: #ccc;
}

.wl-niche {
  font-style: italic;
  color: #999;
}

.wl-why {
  color: #f5f0e1;
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(212, 175, 55, 0.05);
  border-left: 2px solid #d4af37;
  border-radius: 3px;
  margin: 10px 0;
}

.wl-flags {
  font-size: 11px;
  color: #4ade80;
  margin: 8px 0 0;
  font-style: italic;
}

/* Action row inside expanded card */
.wl-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.wl-status-select {
  flex: 1;
  padding: 8px 12px;
  background: #050d18;
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f5f0e1;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px;
  padding-right: 32px;
  cursor: pointer;
}

.wl-status-select option {
  background: #0a1628;
  color: #f5f0e1;
}

.wl-delete-btn {
  background: transparent;
  border: 1px solid rgba(255, 100, 100, 0.4);
  color: #ff6464;
  padding: 8px 16px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wl-delete-btn:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: #ff6464;
}

/* ============================================
   WISHLIST — TABBED LAYOUT (Sharpay-style)
   ============================================ */

.wl-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #d4af37;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.wl-tab {
  background: transparent;
  border: none;
  color: #f5f0e1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-tab:hover {
  color: #d4af37;
}

.wl-tab.active {
  color: #d4af37;
  border-bottom: 2px solid #d4af37;
  margin-bottom: -2px;
}

.wl-tab-count {
  display: inline-block;
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: inherit;
  min-width: 22px;
  text-align: center;
}

.wl-tab.active .wl-tab-count {
  background: #d4af37;
  color: #0a1628;
}

.wl-panel {
  display: none;
}

.wl-panel.active {
  display: block;
}

.wl-panel-intro {
  color: #999;
  font-style: italic;
  margin: 0 0 18px;
  font-size: 14px;
}

.wishlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.wishlist-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wishlist-form-row > input,
.wishlist-form-row > select {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  background: #0a1628;
  border: 1px solid #d4af37;
  color: #f5f0e1;
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}

.wishlist-form-row > select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
  cursor: pointer;
}

.wishlist-form-row > select option {
  background: #0a1628;
  color: #f5f0e1;
  padding: 10px;
}

.wishlist-form-row > input:focus,
.wishlist-form-row > select:focus {
  outline: none;
  border-color: #e8c349;
}

.wishlist-form-row .wish-why-input {
  width: 100%;
  flex: 1 1 100%;
}

.wishlist-add-btn {
  background: #d4af37;
  color: #0a1628;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s ease;
}

.wishlist-add-btn:hover {
  background: #e8c349;
}

.wl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-empty {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 32px 0;
  margin: 0;
}

.wl-card {
  background: #0a1628;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.wl-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
}

.wl-card.expanded {
  border-color: #d4af37;
}

.wl-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.wl-card-brand {
  flex: 1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #f5f0e1;
}

.wl-card-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.wl-badge-email {
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
}

.wl-badge-dm {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.wl-card-arrow {
  color: #d4af37;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.wl-card.expanded .wl-card-arrow {
  transform: rotate(180deg);
}

.wl-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 18px;
}

.wl-card.expanded .wl-card-body {
  max-height: 400px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.wl-detail {
  margin: 6px 0;
  font-size: 13px;
  color: #ccc;
}

.wl-niche {
  font-style: italic;
  color: #999;
}

.wl-why {
  color: #f5f0e1;
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(212, 175, 55, 0.05);
  border-left: 2px solid #d4af37;
  border-radius: 3px;
  margin: 10px 0;
}

.wl-flags {
  font-size: 11px;
  color: #4ade80;
  margin: 8px 0 0;
  font-style: italic;
}

.wl-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.wl-status-select {
  flex: 1;
  padding: 8px 12px;
  background: #050d18;
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f5f0e1;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px;
  padding-right: 32px;
  cursor: pointer;
}

.wl-status-select option {
  background: #0a1628;
  color: #f5f0e1;
}

.wl-delete-btn {
  background: transparent;
  border: 1px solid rgba(255, 100, 100, 0.4);
  color: #ff6464;
  padding: 8px 16px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wl-delete-btn:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: #ff6464;
}

/* ============================================
   REGINA — OUTBOX TAB
   ============================================ */

/* Outbox tab badge (on main tab button) */
body .regina-page .outbox-badge {
  display: none;
  background: #ff1493;
  color: #000;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  margin-left: 6px;
  min-width: 22px;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
}

/* Header row with Run Now button */
body .regina-page .outbox-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

body .regina-page .outbox-run-btn {
  background: #ff1493 !important;
  color: #000 !important;
  border: 0 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

body .regina-page .outbox-run-btn:hover {
  background: #ff4daa !important;
}

body .regina-page .outbox-run-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sub-tabs (Drafts / Approved / Sent / Killed) */
body .regina-page .outbox-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #ff1493;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

body .regina-page .outbox-subtab {
  background: transparent;
  border: 0;
  color: #aa6090;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 10px 18px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease;
}

body .regina-page .outbox-subtab:hover {
  color: #ff1493;
}

body .regina-page .outbox-subtab.active {
  color: #ff1493;
  border-bottom-color: #ff1493;
}

body .regina-page .outbox-subtab-count {
  background: rgba(255, 20, 147, 0.2);
  color: #ff1493;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: inherit;
  min-width: 22px;
  text-align: center;
}

body .regina-page .outbox-subtab.active .outbox-subtab-count {
  background: #ff1493;
  color: #000;
}

/* Outbox list */
body .regina-page .outbox-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Outbox card */
body .regina-page .outbox-card {
  background: #1a0510;
  border: 1.5px solid rgba(255, 20, 147, 0.4);
  border-radius: 10px;
  padding: 18px;
  border-left: 4px solid #ff1493;
}

body .regina-page .outbox-card.outbox-status-draft {
  border-left-color: #ff1493;
}

body .regina-page .outbox-card.outbox-status-approved {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.04);
}

body .regina-page .outbox-card.outbox-status-sent {
  border-left-color: #4ade80;
  opacity: 0.8;
}

body .regina-page .outbox-card.outbox-status-killed {
  border-left-color: #888;
  opacity: 0.5;
}

/* Card header */
body .regina-page .outbox-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

body .regina-page .outbox-brand {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  flex-shrink: 0;
}

body .regina-page .outbox-channel-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

body .regina-page .outbox-channel-email {
  background: rgba(255, 20, 147, 0.2);
  color: #ff1493;
}

body .regina-page .outbox-channel-dm {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

body .regina-page .outbox-source-tag,
body .regina-page .outbox-date-tag {
  font-size: 10px;
  color: #888;
  font-style: italic;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* Contact line */
body .regina-page .outbox-contact {
  color: #ff85b3;
  font-size: 13px;
  margin: 6px 0;
  font-family: monospace;
}

/* Subject line */
body .regina-page .outbox-subject {
  color: #f5f5f5;
  font-size: 14px;
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(255, 20, 147, 0.05);
  border-left: 2px solid #ff1493;
  border-radius: 3px;
}

body .regina-page .outbox-subject strong {
  color: #ff1493;
  margin-right: 6px;
}

/* Body display */
body .regina-page .outbox-body-display {
  color: #ddd;
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Edit form (in-place editing) */
body .regina-page .outbox-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

body .regina-page .outbox-edit-subject,
body .regina-page .outbox-edit-body {
  background: #000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff1493 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

body .regina-page .outbox-edit-subject:focus,
body .regina-page .outbox-edit-body:focus {
  outline: 2px solid #ff85b3 !important;
}

body .regina-page .outbox-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Action buttons */
body .regina-page .outbox-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 20, 147, 0.15);
}

body .regina-page .outbox-btn {
  background: transparent;
  border: 1.5px solid #ff1493;
  color: #ff1493;
  padding: 8px 14px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.15s ease;
}

body .regina-page .outbox-btn:hover:not(:disabled) {
  background: #ff1493;
  color: #000;
}

body .regina-page .outbox-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Approve button is filled (primary action) */
body .regina-page .outbox-btn-approve {
  background: #ff1493;
  color: #000;
}

body .regina-page .outbox-btn-approve:hover:not(:disabled) {
  background: #ff4daa;
}

/* Save edits button is filled */
body .regina-page .outbox-btn-save {
  background: #ff1493;
  color: #000;
}

body .regina-page .outbox-btn-save:hover {
  background: #ff4daa;
}

/* Mark Sent button (DM flow) */
body .regina-page .outbox-btn-mark-sent {
  background: #4ade80;
  color: #000;
  border-color: #4ade80;
}

body .regina-page .outbox-btn-mark-sent:hover {
  background: #22c55e;
  border-color: #22c55e;
}

/* Kill button (red accent) */
body .regina-page .outbox-btn-kill {
  border-color: rgba(255, 100, 100, 0.5);
  color: #ff6b6b;
}

body .regina-page .outbox-btn-kill:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* Revive button */
body .regina-page .outbox-btn-revive {
  border-color: #4ade80;
  color: #4ade80;
}

body .regina-page .outbox-btn-revive:hover {
  background: #4ade80;
  color: #000;
}

/* Cancel edit button (subdued) */
body .regina-page .outbox-btn-cancel-edit {
  border-color: #666;
  color: #888;
}

body .regina-page .outbox-btn-cancel-edit:hover {
  background: rgba(136, 136, 136, 0.15);
  border-color: #888;
  color: #aaa;
}

/* Status note (e.g. "Sending..." or "✓ Sent") */
body .regina-page .outbox-status-note {
  color: #4ade80;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-style: italic;
  padding: 8px 0;
}

/* Mobile */
@media (max-width: 768px) {
  body .regina-page .outbox-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  body .regina-page .outbox-run-btn {
    width: 100% !important;
  }
  body .regina-page .outbox-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
  body .regina-page .outbox-actions {
    flex-direction: column;
  }
  body .regina-page .outbox-btn {
    width: 100%;
  }
}

/* ============================================
   REGINA — OUTBOX (Pitch Drafts UI)
   ============================================ */

/* Tab badge (number of drafts on main Outbox tab) */
body .regina-page .outbox-badge {
  display: none;
  background: #ff1493;
  color: #000;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: 700;
  vertical-align: middle;
}

/* Header row: subhead + run button */
body .regina-page .outbox-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

body .regina-page .outbox-run-btn {
  background: #ff1493;
  color: #000;
  border: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

body .regina-page .outbox-run-btn:hover:not(:disabled) {
  background: #ff85b3;
}

body .regina-page .outbox-run-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sub-tabs (Draft / Approved / Sent / Killed) */
body .regina-page .outbox-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(255, 20, 147, 0.3);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

body .regina-page .outbox-subtab {
  background: transparent;
  border: none;
  color: #aa6090;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

body .regina-page .outbox-subtab:hover {
  color: #ff1493;
}

body .regina-page .outbox-subtab.active {
  color: #ff1493;
  border-bottom-color: #ff1493;
}

body .regina-page .outbox-subtab-count {
  display: inline-block;
  background: rgba(255, 20, 147, 0.2);
  color: #ff1493;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  font-family: inherit;
  min-width: 20px;
  text-align: center;
}

body .regina-page .outbox-subtab.active .outbox-subtab-count {
  background: #ff1493;
  color: #000;
}

/* Outbox list */
body .regina-page .outbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Outbox card */
body .regina-page .outbox-card {
  background: #1a0510;
  border: 1.5px solid rgba(255, 20, 147, 0.4);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 4px solid #ff1493;
}

body .regina-page .outbox-card.outbox-status-approved {
  border-left-color: #ffd700;
  background: linear-gradient(135deg, #1a0510 0%, #2a1a05 100%);
}

body .regina-page .outbox-card.outbox-status-sent {
  border-left-color: #4ade80;
  opacity: 0.85;
}

body .regina-page .outbox-card.outbox-status-killed {
  border-left-color: #555;
  opacity: 0.5;
}

/* Card header (brand + tags) */
body .regina-page .outbox-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

body .regina-page .outbox-brand {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5f5f5;
  flex: 1;
}

/* Channel badge */
body .regina-page .outbox-channel-badge {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
}

body .regina-page .outbox-channel-email {
  background: rgba(255, 20, 147, 0.2);
  color: #ff1493;
}

body .regina-page .outbox-channel-dm {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

/* Source + date tags */
body .regina-page .outbox-source-tag,
body .regina-page .outbox-date-tag {
  font-size: 10px;
  color: #aa6090;
  letter-spacing: 0.05em;
  font-style: italic;
}

/* Contact line + subject */
body .regina-page .outbox-contact {
  margin: 6px 0;
  color: #cccccc;
  font-size: 13px;
}

body .regina-page .outbox-subject {
  margin: 8px 0;
  color: #f5f5f5;
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(255, 20, 147, 0.05);
  border-left: 2px solid #ff1493;
  border-radius: 3px;
}

body .regina-page .outbox-subject strong {
  color: #ff85b3;
}

/* Body display */
body .regina-page .outbox-body-display {
  color: #e5e5e5;
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  border: 1px solid rgba(255, 20, 147, 0.15);
  white-space: pre-wrap;
}

/* Edit form (hidden by default, shows when Edit clicked) */
body .regina-page .outbox-edit-form {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body .regina-page .outbox-edit-subject,
body .regina-page .outbox-edit-body {
  background: #000 !important;
  color: #f5f5f5 !important;
  border: 1.5px solid #ff1493 !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body .regina-page .outbox-edit-body {
  resize: vertical;
  min-height: 150px;
  line-height: 1.5;
}

body .regina-page .outbox-edit-actions {
  display: flex;
  gap: 8px;
}

/* Action buttons row */
body .regina-page .outbox-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 20, 147, 0.15);
  flex-wrap: wrap;
}

body .regina-page .outbox-btn {
  background: transparent;
  border: 1.5px solid #ff1493;
  color: #ff1493;
  padding: 8px 14px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.15s ease;
}

body .regina-page .outbox-btn:hover:not(:disabled) {
  background: rgba(255, 20, 147, 0.15);
}

body .regina-page .outbox-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Specific button variants */
body .regina-page .outbox-btn-approve,
body .regina-page .outbox-btn-mark-sent {
  background: #ff1493;
  color: #000;
  border-color: #ff1493;
  font-weight: 700;
  flex: 1;
  min-width: 140px;
}

body .regina-page .outbox-btn-approve:hover:not(:disabled),
body .regina-page .outbox-btn-mark-sent:hover:not(:disabled) {
  background: #ff85b3;
}

body .regina-page .outbox-btn-save {
  background: #4ade80;
  color: #000;
  border-color: #4ade80;
}

body .regina-page .outbox-btn-save:hover {
  background: #6ef0a0;
}

body .regina-page .outbox-btn-cancel-edit {
  border-color: #888;
  color: #888;
}

body .regina-page .outbox-btn-cancel-edit:hover {
  border-color: #aaa;
  color: #aaa;
  background: rgba(255, 255, 255, 0.05);
}

body .regina-page .outbox-btn-kill {
  border-color: rgba(255, 100, 100, 0.5);
  color: #ff6464;
}

body .regina-page .outbox-btn-kill:hover {
  background: rgba(255, 100, 100, 0.15);
  border-color: #ff6464;
}

body .regina-page .outbox-btn-revive {
  border-color: #ffd700;
  color: #ffd700;
}

body .regina-page .outbox-btn-revive:hover {
  background: rgba(255, 215, 0, 0.15);
}

/* Status note (for in-flight or sent) */
body .regina-page .outbox-status-note {
  color: #4ade80;
  font-style: italic;
  font-size: 13px;
  padding: 8px 0;
}

/* Mobile */
@media (max-width: 768px) {
  body .regina-page .outbox-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  body .regina-page .outbox-run-btn {
    width: 100%;
  }
  body .regina-page .outbox-actions {
    flex-direction: column;
  }
  body .regina-page .outbox-btn-approve,
  body .regina-page .outbox-btn-mark-sent {
    width: 100%;
  }
}

/* ============================================
   OLIVIA — INSTAGRAM SYNC BUTTON
   ============================================ */
.olivia-sync-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #2a1a3a 0%, #1a0a1f 100%);
  border: 1px solid #6b4d8a;
  border-radius: 10px;
  flex-wrap: wrap;
}

.olivia-sync-btn {
  background: linear-gradient(135deg, #b85ea8 0%, #8a3d7a 100%);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(184, 94, 168, 0.3);
}

.olivia-sync-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184, 94, 168, 0.5);
}

.olivia-sync-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.olivia-sync-status {
  margin: 0;
  font-size: 13px;
  color: #c9b8d4;
  flex: 1;
  min-width: 200px;
}

.olivia-sync-status.success {
  color: #7dd3a8;
  font-weight: 600;
}

.olivia-sync-status.error {
  color: #ff6b8a;
  font-weight: 600;
}

/* ============================================
   ELLE — New Conversation button
   ============================================ */
.elle-page .elle-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.elle-chat-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.elle-page .elle-chat-form button[type="submit"],
.elle-new-convo-btn {
  flex: 1;
  width: auto;
  border-radius: 8px;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
}

.elle-new-convo-btn {
  background: #1a0510 !important;
  color: #ff3399 !important;
  border: 1.5px solid #ff3399 !important;
}

.elle-new-convo-btn:hover {
  background: #ff3399 !important;
  color: #1a0510 !important;
}

@media (max-width: 768px) {
  .elle-page .elle-chat-form {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   SHARPAY — New Conversation button
   ============================================ */
.sharpay-page .sharpay-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.sharpay-chat-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.sharpay-page .sharpay-chat-form button[type="submit"],
.sharpay-page .sharpay-chat-form .sharpay-new-convo-btn {
  flex: 1;
  width: auto;
  border-radius: 8px;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
}

.sharpay-page .sharpay-chat-form .sharpay-new-convo-btn,
.sharpay-page .sharpay-chat-buttons .sharpay-new-convo-btn,
button.sharpay-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #d4af37 !important;
  border: 2px solid #d4af37 !important;
}

.sharpay-page .sharpay-chat-form .sharpay-new-convo-btn:hover,
.sharpay-page .sharpay-chat-buttons .sharpay-new-convo-btn:hover,
button.sharpay-new-convo-btn:hover {
  background: #d4af37 !important;
  background-color: #d4af37 !important;
  color: #000 !important;
}

@media (max-width: 768px) {
  .sharpay-page .sharpay-chat-form {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   ALL AGENTS — New Conversation button (BATCH)
   ============================================ */

/* ---------- SELENA (dusty rose) ---------- */
.selena-page .selena-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.selena-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.selena-page .selena-chat-form button[type="submit"],
.selena-page .selena-chat-form .selena-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.selena-page .selena-chat-form .selena-new-convo-btn,
.selena-page .selena-chat-buttons .selena-new-convo-btn,
button.selena-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #c4798f !important;
  border: 2px solid #c4798f !important;
}
.selena-page .selena-chat-form .selena-new-convo-btn:hover,
.selena-page .selena-chat-buttons .selena-new-convo-btn:hover,
button.selena-new-convo-btn:hover {
  background: #c4798f !important;
  background-color: #c4798f !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .selena-page .selena-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- BRITNEY (chrome silver) ---------- */
.britney-page .britney-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.britney-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.britney-page .britney-chat-form button[type="submit"],
.britney-page .britney-chat-form .britney-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.britney-page .britney-chat-form .britney-new-convo-btn,
.britney-page .britney-chat-buttons .britney-new-convo-btn,
button.britney-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #c0c0c0 !important;
  border: 2px solid #c0c0c0 !important;
}
.britney-page .britney-chat-form .britney-new-convo-btn:hover,
.britney-page .britney-chat-buttons .britney-new-convo-btn:hover,
button.britney-new-convo-btn:hover {
  background: #c0c0c0 !important;
  background-color: #c0c0c0 !important;
  color: #000 !important;
}
@media (max-width: 768px) {
  .britney-page .britney-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- BLAIR (cream against gold Send) ---------- */
.blair-page .blair-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.blair-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.blair-page .blair-chat-form button[type="submit"],
.blair-page .blair-chat-form .blair-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.blair-page .blair-chat-form .blair-new-convo-btn,
.blair-page .blair-chat-buttons .blair-new-convo-btn,
button.blair-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #faf6ef !important;
  border: 2px solid #faf6ef !important;
}
.blair-page .blair-chat-form .blair-new-convo-btn:hover,
.blair-page .blair-chat-buttons .blair-new-convo-btn:hover,
button.blair-new-convo-btn:hover {
  background: #faf6ef !important;
  background-color: #faf6ef !important;
  color: #1a1525 !important;
}
@media (max-width: 768px) {
  .blair-page .blair-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- MILEY (silver) ---------- */
.miley-page .miley-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.miley-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.miley-page .miley-chat-form button[type="submit"],
.miley-page .miley-chat-form .miley-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.miley-page .miley-chat-form .miley-new-convo-btn,
.miley-page .miley-chat-buttons .miley-new-convo-btn,
button.miley-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #c0c0c0 !important;
  border: 2px solid #c0c0c0 !important;
}
.miley-page .miley-chat-form .miley-new-convo-btn:hover,
.miley-page .miley-chat-buttons .miley-new-convo-btn:hover,
button.miley-new-convo-btn:hover {
  background: #c0c0c0 !important;
  background-color: #c0c0c0 !important;
  color: #000 !important;
}
@media (max-width: 768px) {
  .miley-page .miley-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- JADE (silver against teal Send) ---------- */
.jade-page .jade-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.jade-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.jade-page .jade-chat-form button[type="submit"],
.jade-page .jade-chat-form .jade-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.jade-page .jade-chat-form .jade-new-convo-btn,
.jade-page .jade-chat-buttons .jade-new-convo-btn,
button.jade-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #c0c0c0 !important;
  border: 2px solid #c0c0c0 !important;
}
.jade-page .jade-chat-form .jade-new-convo-btn:hover,
.jade-page .jade-chat-buttons .jade-new-convo-btn:hover,
button.jade-new-convo-btn:hover {
  background: #c0c0c0 !important;
  background-color: #c0c0c0 !important;
  color: #000 !important;
}
@media (max-width: 768px) {
  .jade-page .jade-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- KESHA (gold against electric blue Send) ---------- */
.kesha-page .kesha-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.kesha-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.kesha-page .kesha-chat-form button[type="submit"],
.kesha-page .kesha-chat-form .kesha-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.kesha-page .kesha-chat-form .kesha-new-convo-btn,
.kesha-page .kesha-chat-buttons .kesha-new-convo-btn,
button.kesha-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #d4af37 !important;
  border: 2px solid #d4af37 !important;
}
.kesha-page .kesha-chat-form .kesha-new-convo-btn:hover,
.kesha-page .kesha-chat-buttons .kesha-new-convo-btn:hover,
button.kesha-new-convo-btn:hover {
  background: #d4af37 !important;
  background-color: #d4af37 !important;
  color: #000 !important;
}
@media (max-width: 768px) {
  .kesha-page .kesha-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- SABRINA (white against baby blue Send) ---------- */
.sabrina-page .sabrina-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.sabrina-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.sabrina-page .sabrina-chat-form button[type="submit"],
.sabrina-page .sabrina-chat-form .sabrina-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.sabrina-page .sabrina-chat-form .sabrina-new-convo-btn,
.sabrina-page .sabrina-chat-buttons .sabrina-new-convo-btn,
button.sabrina-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #d4a8e8 !important;
  border: 2px solid #d4a8e8 !important;
}
.sabrina-page .sabrina-chat-form .sabrina-new-convo-btn:hover,
.sabrina-page .sabrina-chat-buttons .sabrina-new-convo-btn:hover,
button.sabrina-new-convo-btn:hover {
  background: #d4a8e8 !important;
  background-color: #d4a8e8 !important;
  color: #1a4a6e !important;
}
@media (max-width: 768px) {
  .sabrina-page .sabrina-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- BARBIE (white against Barbie pink Send) ---------- */
.barbie-page .barbie-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.barbie-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.barbie-page .barbie-chat-form button[type="submit"],
.barbie-page .barbie-chat-form .barbie-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.barbie-page .barbie-chat-form .barbie-new-convo-btn,
.barbie-page .barbie-chat-buttons .barbie-new-convo-btn,
button.barbie-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
.barbie-page .barbie-chat-form .barbie-new-convo-btn:hover,
.barbie-page .barbie-chat-buttons .barbie-new-convo-btn:hover,
button.barbie-new-convo-btn:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #d63384 !important;
}
@media (max-width: 768px) {
  .barbie-page .barbie-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- OLIVIA (cream against lavender Send) ---------- */
.olivia-page .olivia-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.olivia-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.olivia-page .olivia-chat-form button[type="submit"],
.olivia-page .olivia-chat-form .olivia-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.olivia-page .olivia-chat-form .olivia-new-convo-btn,
.olivia-page .olivia-chat-buttons .olivia-new-convo-btn,
button.olivia-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #f5f0e8 !important;
  border: 2px solid #f5f0e8 !important;
}
.olivia-page .olivia-chat-form .olivia-new-convo-btn:hover,
.olivia-page .olivia-chat-buttons .olivia-new-convo-btn:hover,
button.olivia-new-convo-btn:hover {
  background: #f5f0e8 !important;
  background-color: #f5f0e8 !important;
  color: #4a3a6e !important;
}
@media (max-width: 768px) {
  .olivia-page .olivia-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- ARIANA (dark mauve against lighter mauve Send) ---------- */
.ariana-page .ariana-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.ariana-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.ariana-page .ariana-chat-form button[type="submit"],
.ariana-page .ariana-chat-form .ariana-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.ariana-page .ariana-chat-form .ariana-new-convo-btn,
.ariana-page .ariana-chat-buttons .ariana-new-convo-btn,
button.ariana-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #f5edff !important;
  border: 2px solid #f5edff !important;
}
.ariana-page .ariana-chat-form .ariana-new-convo-btn:hover,
.ariana-page .ariana-chat-buttons .ariana-new-convo-btn:hover,
button.ariana-new-convo-btn:hover {
  background: #f5edff !important;
  background-color: #f5edff !important;
  color: #2a1a3a !important;
}
@media (max-width: 768px) {
  .ariana-page .ariana-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- CAMERON (cream against champagne Send) ---------- */
.cameron-page .cameron-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.cameron-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.cameron-page .cameron-chat-form button[type="submit"],
.cameron-page .cameron-chat-form .cameron-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.cameron-page .cameron-chat-form .cameron-new-convo-btn,
.cameron-page .cameron-chat-buttons .cameron-new-convo-btn,
button.cameron-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
.cameron-page .cameron-chat-form .cameron-new-convo-btn:hover,
.cameron-page .cameron-chat-buttons .cameron-new-convo-btn:hover,
button.cameron-new-convo-btn:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2a2520 !important;
}
@media (max-width: 768px) {
  .cameron-page .cameron-chat-form { grid-template-columns: 1fr !important; }
}

/* ---------- PARIS (white against pink Send) ---------- */
.paris-page .paris-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.paris-chat-buttons {
  display: flex; flex-direction: row; gap: 8px;
}
.paris-page .paris-chat-form button[type="submit"],
.paris-page .paris-chat-form .paris-new-convo-btn {
  flex: 1; width: auto; border-radius: 8px; padding: 14px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit; margin: 0;
}
.paris-page .paris-chat-form .paris-new-convo-btn,
.paris-page .paris-chat-buttons .paris-new-convo-btn,
button.paris-new-convo-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
.paris-page .paris-chat-form .paris-new-convo-btn:hover,
.paris-page .paris-chat-buttons .paris-new-convo-btn:hover,
button.paris-new-convo-btn:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #d63384 !important;
}
@media (max-width: 768px) {
  .paris-page .paris-chat-form { grid-template-columns: 1fr !important; }
}


/* ============================================
   ARIANA — Pink overhaul (Option A)
   ============================================ */

/* Form inputs, selects, textareas — light pink */
.ariana-page input[type="text"],
.ariana-page input[type="number"],
.ariana-page input[type="email"],
.ariana-page select,
.ariana-page textarea {
  background: #2a1525 !important;
  border: 1.5px solid #ff6fa3 !important;
  color: #ffd6e5 !important;
  border-radius: 8px !important;
}

.ariana-page input::placeholder,
.ariana-page textarea::placeholder {
  color: #c98ab0 !important;
  opacity: 0.7 !important;
}

.ariana-page input:focus,
.ariana-page select:focus,
.ariana-page textarea:focus {
  border-color: #ff85b8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 111, 163, 0.2) !important;
}

/* Form field labels */
.ariana-page .form-field label,
.ariana-page label {
  color: #ff85b8 !important;
}

/* Submit buttons within forms (Add Machine, Log, Add Product) */
.ariana-page .vending-form button[type="submit"],
.ariana-page .machine-form-grid button[type="submit"],
.ariana-page .transaction-form-grid button[type="submit"],
.ariana-page .product-add-form button[type="submit"],
.ariana-page .modal-submit-btn {
  background: linear-gradient(135deg, #ff6fa3 0%, #ff85b8 100%) !important;
  background-color: #ff6fa3 !important;
  color: #2a1525 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.ariana-page .vending-form button[type="submit"]:hover,
.ariana-page .machine-form-grid button[type="submit"]:hover,
.ariana-page .transaction-form-grid button[type="submit"]:hover,
.ariana-page .product-add-form button[type="submit"]:hover,
.ariana-page .modal-submit-btn:hover {
  background: linear-gradient(135deg, #ff85b8 0%, #ffa3cc 100%) !important;
  transform: translateY(-1px) !important;
}

/* Tab buttons */
.ariana-page .vending-tab {
  color: #c98ab0 !important;
  border-bottom: 2px solid transparent !important;
}

.ariana-page .vending-tab.active {
  color: #ff85b8 !important;
  border-bottom: 2px solid #ff6fa3 !important;
}

/* Money summary cards — pink palette */
.ariana-page .summary-card {
  background: linear-gradient(135deg, #2a1525 0%, #3a1f35 100%) !important;
  border: 1.5px solid #ff6fa3 !important;
  border-radius: 12px !important;
}

.ariana-page .summary-label {
  color: #ff85b8 !important;
}

/* Income amounts — bright pink */
.ariana-page .summary-value.income,
.ariana-page .past-month-net.income {
  color: #ff6fa3 !important;
}

/* Expense amounts — soft warm coral pink */
.ariana-page .summary-value.expense,
.ariana-page .past-month-net.expense {
  color: #ff8fa8 !important;
}

/* Section headings + subs */
.ariana-page .vending-header h2,
.ariana-page .past-months-heading {
  color: #ff85b8 !important;
}

.ariana-page .vending-sub {
  color: #c98ab0 !important;
}

/* Machine cards */
.ariana-page .machine-card {
  background: linear-gradient(135deg, #2a1525 0%, #3a1f35 100%) !important;
  border: 1.5px solid #ff6fa3 !important;
  border-radius: 12px !important;
}

.ariana-page .machine-card h3 {
  color: #ffd6e5 !important;
}

.ariana-page .machine-loc {
  color: #c98ab0 !important;
}

/* Transaction rows */
.ariana-page .txn-row,
.ariana-page .product-row {
  border-bottom: 1px solid rgba(255, 111, 163, 0.2) !important;
}

.ariana-page .txn-row-header,
.ariana-page .product-row-header {
  color: #ff85b8 !important;
  border-bottom: 2px solid #ff6fa3 !important;
}

/* Income transactions — pink, expenses — soft coral */
.ariana-page .txn-row.type-income .txn-amount {
  color: #ff6fa3 !important;
}
.ariana-page .txn-row.type-expense .txn-amount {
  color: #ff8fa8 !important;
}

/* Empty state */
.ariana-page .vending-empty {
  color: #c98ab0 !important;
}

/* Past months / archive section */
.ariana-page .past-month-row {
  background: rgba(255, 111, 163, 0.08) !important;
  border: 1px solid rgba(255, 111, 163, 0.3) !important;
}

.ariana-page .past-month-title {
  color: #ffd6e5 !important;
}

.ariana-page .past-month-meta {
  color: #c98ab0 !important;
}

.ariana-page .past-month-download {
  color: #ff85b8 !important;
}

/* Add product / machine action buttons */
.ariana-page .add-product-btn {
  background: rgba(255, 111, 163, 0.15) !important;
  color: #ff85b8 !important;
  border: 1.5px solid #ff6fa3 !important;
  border-radius: 6px !important;
}

.ariana-page .add-product-btn:hover {
  background: #ff6fa3 !important;
  color: #2a1525 !important;
}

/* Delete buttons stay subtle */
.ariana-page .machine-delete,
.ariana-page .txn-delete,
.ariana-page .product-delete {
  color: #c98ab0 !important;
  background: transparent !important;
}

.ariana-page .machine-delete:hover,
.ariana-page .txn-delete:hover,
.ariana-page .product-delete:hover {
  color: #ff6fa3 !important;
}

/* Close-out banner */
.ariana-page .close-out-banner {
  background: linear-gradient(135deg, #2a1525 0%, #3a1f35 100%) !important;
  border: 1.5px solid #ff6fa3 !important;
  border-radius: 12px !important;
}

.ariana-page .close-out-title {
  color: #ff85b8 !important;
}

.ariana-page .close-out-sub {
  color: #c98ab0 !important;
}

.ariana-page .close-out-btn {
  background: linear-gradient(135deg, #ff6fa3 0%, #ff85b8 100%) !important;
  color: #2a1525 !important;
  border: none !important;
  font-weight: 700 !important;

}

/* ============================================
   SEND + NEW BUTTONS — UNIFIED RULES (all 15 profiles)
   Paste at bottom of stylesheet to override everything above.
   ============================================ */

/* ---------- ELLE: match each other (size + shape) ---------- */
.elle-page .elle-chat-form {
  grid-template-columns: 1fr 200px !important;
}
.elle-chat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.elle-page .elle-chat-form button[type="submit"],
.elle-new-convo-btn {
  flex: 1 !important;
  padding: 14px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: #ff3399 !important;
  color: #1a0510 !important;
  border: 2px solid #ff3399 !important;
}

/* ============================================
   GROUP 2 — Regina-sized, SEND + NEW SAME color
   Members: Regina, Britney, Blair, Sharpay, Selena,
            Miley, Arianna, Cameron, Paris
   ============================================ */

/* ---------- REGINA (the gold standard, untouched) ---------- */
/* Regina's existing styling stays — pink #ff1493 pill */

/* ---------- BRITNEY ---------- */
.britney-page .britney-chat-form button[type="submit"],
button.britney-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #ff66b8 !important;
  background-color: #ff66b8 !important;
  background-image: none !important;
  color: #1a0e18 !important;
  border: 0 !important;
}

/* ---------- BLAIR ---------- */
.blair-page .blair-chat-form button[type="submit"],
button.blair-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #d4af37 !important;
  background-color: #d4af37 !important;
  background-image: none !important;
  color: #0a0e1a !important;
  border: 0 !important;
}

/* ---------- SHARPAY ---------- */
.sharpay-page .sharpay-chat-form button[type="submit"],
button.sharpay-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #ff3399 !important;
  background-color: #ff3399 !important;
  background-image: none !important;
  color: #15040d !important;
  border: 0 !important;
}

/* ---------- SELENA ---------- */
.selena-page .selena-chat-form button[type="submit"],
button.selena-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #c4798f !important;
  background-color: #c4798f !important;
  background-image: none !important;
  color: #1a0d12 !important;
  border: 0 !important;
}

/* ---------- MILEY ---------- */
.miley-page .miley-chat-form button[type="submit"],
button.miley-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  background-image: none !important;
  color: #f5f5f5 !important;
  border: 0 !important;
}

/* ---------- ARIANNA ---------- */
.ariana-page .ariana-chat-form button[type="submit"],
button.ariana-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #ff6fa3 !important;
  background-color: #ff6fa3 !important;
  background-image: none !important;
  color: #2a1525 !important;
  border: 0 !important;
}

/* ---------- CAMERON ---------- */
.cameron-page .cameron-chat-form button[type="submit"],
button.cameron-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #d4a85a !important;
  background-color: #d4a85a !important;
  background-image: none !important;
  color: #0d0d0d !important;
  border: 0 !important;
}

/* ---------- PARIS ---------- */
.paris-page .paris-chat-form button[type="submit"],
button.paris-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #6b3aa0 !important;
  background-color: #6b3aa0 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* ============================================
   GROUP 3 — Regina-sized, SEND darker + NEW lighter
   Members: Jade, Kesha, Sabrina, Barbie, Olivia
   ============================================ */

/* ---------- JADE: teal ---------- */
.jade-page .jade-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
}
.jade-chat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.jade-page .jade-chat-form button[type="submit"] {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #0d9488 !important;       /* darker teal */
  background-color: #0d9488 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}
button.jade-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #5eead4 !important;       /* lighter teal */
  background-color: #5eead4 !important;
  background-image: none !important;
  color: #042f2e !important;
  border: 0 !important;
}

/* ---------- KESHA: electric blue ---------- */
.kesha-page .kesha-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
}
.kesha-chat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.kesha-page .kesha-chat-form button[type="submit"] {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #0284c7 !important;       /* darker blue */
  background-color: #0284c7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}
button.kesha-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #7dd3fc !important;       /* lighter blue */
  background-color: #7dd3fc !important;
  background-image: none !important;
  color: #0c4a6e !important;
  border: 0 !important;
}

/* ---------- SABRINA: baby blue ---------- */
.sabrina-page .sabrina-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
}
.sabrina-chat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.sabrina-page .sabrina-chat-form button[type="submit"] {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #5b9bd5 !important;       /* darker baby blue */
  background-color: #5b9bd5 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}
button.sabrina-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #c5e0f5 !important;       /* lighter baby blue */
  background-color: #c5e0f5 !important;
  background-image: none !important;
  color: #1e3a5f !important;
  border: 0 !important;
}

/* ---------- BARBIE: Barbie pink ---------- */
.barbie-page .barbie-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
}
.barbie-chat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.barbie-page .barbie-chat-form button[type="submit"] {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #b01874 !important;       /* darker Barbie pink */
  background-color: #b01874 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}
button.barbie-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #f06ab8 !important;       /* lighter Barbie pink */
  background-color: #f06ab8 !important;
  background-image: none !important;
  color: #4a0832 !important;
  border: 0 !important;
}

/* ---------- OLIVIA: lavender ---------- */
.olivia-page .olivia-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 200px !important;
  gap: 12px !important;
}
.olivia-chat-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.olivia-page .olivia-chat-form button[type="submit"] {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #8b6bb8 !important;       /* darker lavender */
  background-color: #8b6bb8 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}
button.olivia-new-convo-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: #d4c4ec !important;       /* lighter lavender */
  background-color: #d4c4ec !important;
  background-image: none !important;
  color: #2d1f4a !important;
  border: 0 !important;
}

/* ---------- MOBILE: stack input + button row on phones ---------- */
@media (max-width: 768px) {
  .elle-page .elle-chat-form,
  .britney-page .britney-chat-form,
  .blair-page .blair-chat-form,
  .sharpay-page .sharpay-chat-form,
  .selena-page .selena-chat-form,
  .miley-page .miley-chat-form,
  .ariana-page .ariana-chat-form,
  .cameron-page .cameron-chat-form,
  .paris-page .paris-chat-form,
  .jade-page .jade-chat-form,
  .kesha-page .kesha-chat-form,
  .sabrina-page .sabrina-chat-form,
  .barbie-page .barbie-chat-form,
  .olivia-page .olivia-chat-form {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   ARIANNA NEW + ELLE NEW — only NEW buttons changed
   SENDs untouched.
   ============================================ */

/* ---------- ARIANNA: NEW = dark maroon (chat window color) ---------- */
button.ariana-new-convo-btn {
  background: #2a151c !important;
  background-color: #2a151c !important;
  background-image: none !important;
  color: #ffd6e5 !important;
  border: 0 !important;
}

/* ---------- ELLE: NEW = light pink ---------- */
.elle-new-convo-btn {
  background: #f08fb3 !important;
  background-color: #f08fb3 !important;
  background-image: none !important;
  color: #1a0510 !important;
  border: 0 !important;
}

/* ============================================
   ARIANNA NEW — match input field dark plum
   ============================================ */
button.ariana-new-convo-btn {
  background: #2a1a2e !important;
  background-color: #2a1a2e !important;
  background-image: none !important;
  color: #ffd6e5 !important;
  border: 0 !important;
}

/* ============================================
   ARIANA — NEW button + input field overhaul
   Paste at very bottom of stylesheet.
   ============================================ */

/* ---------- NEW button: dark plum ---------- */
button.ariana-new-convo-btn {
  background: #2a1525 !important;
  background-color: #2a1525 !important;
  background-image: none !important;
  color: #ffd6e5 !important;
  border: 0 !important;
}

/* ---------- ALL Ariana input fields: white bg, dark plum text ---------- */
.ariana-page input[type="text"],
.ariana-page input[type="number"],
.ariana-page input[type="email"],
.ariana-page input[type="date"],
.ariana-page select,
.ariana-page textarea,
.ariana-page .ariana-chat-form input,
.ariana-page .vending-section input,
.ariana-page .vending-section select,
.ariana-page .vending-section textarea,
.ariana-page .machine-form-grid input,
.ariana-page .machine-form-grid select,
.ariana-page .transaction-form-grid input,
.ariana-page .transaction-form-grid select,
.ariana-page .product-add-form input,
.ariana-page .product-add-form select,
.ariana-page .stock-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2a1525 !important;
  border: 1.5px solid #ff6fa3 !important;
}

/* Placeholder text inside fields */
.ariana-page input::placeholder,
.ariana-page textarea::placeholder,
.ariana-page select::placeholder {
  color: #2a1525 !important;
  opacity: 0.6 !important;
}

/* Focus state — keep dark text, just brighten border */
.ariana-page input:focus,
.ariana-page select:focus,
.ariana-page textarea:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2a1525 !important;
  border-color: #ff85b8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 111, 163, 0.2) !important;
}

/* Money summary cards: white bg, dark plum text */
.ariana-page .summary-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #ff6fa3 !important;
}

.ariana-page .summary-label {
  color: #2a1525 !important;
}

.ariana-page .summary-value,
.ariana-page .summary-value.income,
.ariana-page .summary-value.expense {
  color: #2a1525 !important;
}

/* ============================================
   ARIANA NEW button — override transparent rule
   Targets the exact selector chain that's setting transparent.
   ============================================ */
.ariana-page .ariana-chat-form .ariana-new-convo-btn,
.ariana-page .ariana-chat-buttons .ariana-new-convo-btn,
button.ariana-new-convo-btn {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  background-image: none !important;
  color: #ffd6e5 !important;
  border: 2px solid #1a1a1a !important;
}

/* ============================================
   CAMERON — Restructured event list (TODAY/TOMORROW/THIS WEEK/LATER)
   ============================================ */

/* Filter chip bar */
.cameron-page .events-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 20px 0;
  padding: 14px 16px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
}

.cameron-page .filter-chip {
  padding: 7px 16px;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  color: #d4af37;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cameron-page .filter-chip:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
}

.cameron-page .filter-chip.active {
  background: #d4af37;
  color: #1a1410;
  border-color: #d4af37;
  font-weight: 700;
}

/* Bucket containers */
.cameron-page .bucket {
  margin-bottom: 32px;
  border-radius: 12px;
  overflow: hidden;
}

.cameron-page .bucket-today {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.04));
  border: 2px solid rgba(212, 175, 55, 0.5);
  padding: 20px;
}

.cameron-page .bucket-tomorrow {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 16px;
}

.cameron-page .bucket-week {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
}

.cameron-page .bucket-overdue {
  background: rgba(180, 60, 60, 0.04);
  border: 1px solid rgba(180, 60, 60, 0.2);
  padding: 12px;
}

.cameron-page .bucket-later {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0;
}

.cameron-page .bucket-later[open] {
  padding: 14px;
}

.cameron-page .bucket-later summary {
  cursor: pointer;
  padding: 16px;
  list-style: none;
}

.cameron-page .bucket-later summary::-webkit-details-marker {
  display: none;
}

.cameron-page .bucket-later[open] summary {
  padding: 0 0 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

/* Bucket headers */
.cameron-page .bucket-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.cameron-page .bucket-header-xl {
  margin-bottom: 18px;
}

.cameron-page .bucket-header-xl h3 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 900;
  color: #f5e9c8;
  margin: 4px 0 0 0;
  line-height: 1.1;
}

.cameron-page .bucket-header-lg h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #e8d8a8;
  margin: 4px 0 0 0;
  line-height: 1.1;
}

.cameron-page .bucket-header-md h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #d4af37;
  margin: 2px 0 0 0;
  line-height: 1.2;
}

.cameron-page .bucket-header-sm h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #c0a868;
  margin: 0;
}

.cameron-page .bucket-overdue .bucket-header h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #c87878;
  margin: 0;
}

.cameron-page .bucket-tag {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #d4af37;
  padding: 3px 10px;
  background: rgba(212, 175, 55, 0.15);
  border-radius: 4px;
  text-transform: uppercase;
}

.cameron-page .bucket-today .bucket-tag {
  background: #d4af37;
  color: #1a1410;
  font-weight: 700;
  font-size: 12px;
}

.cameron-page .bucket-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cameron-page .bucket-hours {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #d4af37;
}

.cameron-page .bucket-today .bucket-hours {
  font-size: 22px;
  color: #f5e9c8;
}

.cameron-page .bucket-hours.overcommit {
  color: #e88e8e;
}

.cameron-page .bucket-warn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #e88e8e;
  padding: 3px 10px;
  background: rgba(232, 142, 142, 0.12);
  border-radius: 4px;
}

.cameron-page .bucket-empty {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: #a89868;
  font-weight: 600;
}

.cameron-page .bucket-expand {
  font-size: 11px;
  color: #c0a868;
  letter-spacing: 0.1em;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
}

/* Week day groups (inside THIS WEEK and LATER buckets) */
.cameron-page .week-day-group {
  margin-bottom: 16px;
}

.cameron-page .week-day-group:last-child {
  margin-bottom: 0;
}

.cameron-page .week-day-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #c0a868;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  padding-left: 4px;
}

/* Event row size variants */
.cameron-page .event-row.size-lg {
  padding: 14px 16px;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid #d4af37;
  margin-bottom: 8px;
}

.cameron-page .event-row.size-lg .event-title {
  font-size: 16px;
  font-weight: 600;
}

.cameron-page .event-row.size-md {
  padding: 11px 14px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 2px solid rgba(212, 175, 55, 0.6);
  margin-bottom: 6px;
}

.cameron-page .event-row.size-sm {
  padding: 8px 12px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.15);
  border-left: 2px solid rgba(212, 175, 55, 0.3);
  margin-bottom: 4px;
}

/* Dimmed (past/overdue) events */
.cameron-page .event-row.is-dim {
  opacity: 0.5;
}

.cameron-page .event-row.is-dim:hover {
  opacity: 0.85;
}

/* Google Calendar imported icon */
.cameron-page .gcal-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  opacity: 0.6;
  vertical-align: middle;
}

/* Empty state for no-match-filter */
.cameron-page .schedule-empty {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: #c0a868;
  font-weight: 600;
}

/* Mobile: stack everything tighter */
@media (max-width: 600px) {
  .cameron-page .bucket-today {
    padding: 14px;
  }
  .cameron-page .bucket-header-xl h3 {
    font-size: 24px;
  }
  .cameron-page .bucket-header-lg h3 {
    font-size: 18px;
  }
  .cameron-page .bucket-meta {
    gap: 6px;
  }
  .cameron-page .filter-chip {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* ============================================
   REGINA — Inline edit drafts (auto-save + restore original)
   ============================================ */

/* The edit zone replaces the old display + edit-form pair on Draft cards */
.regina-page .outbox-edit-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 14px 0;
  position: relative;
}

.regina-page .outbox-edit-subject {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 100, 150, 0.3);
  border-radius: 8px;
  color: #fce4ec;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.regina-page .outbox-edit-subject:focus {
  outline: none;
  border-color: #ff6fa3;
  background: rgba(0, 0, 0, 0.5);
}

.regina-page .outbox-edit-subject::placeholder {
  color: rgba(252, 228, 236, 0.4);
  font-weight: 400;
}

.regina-page .outbox-edit-body {
  width: 100%;
  padding: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 100, 150, 0.3);
  border-radius: 8px;
  color: #fce4ec;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 180px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.regina-page .outbox-edit-body:focus {
  outline: none;
  border-color: #ff6fa3;
  background: rgba(0, 0, 0, 0.5);
}

.regina-page .outbox-edit-body::placeholder {
  color: rgba(252, 228, 236, 0.4);
}

/* Save indicator (live, bottom-right of edit zone) */
.regina-page .outbox-save-indicator {
  position: absolute;
  bottom: -22px;
  right: 4px;
  font-size: 11px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 228, 236, 0.5);
  transition: color 0.2s ease;
  pointer-events: none;
}

.regina-page .outbox-save-indicator.editing {
  color: rgba(252, 228, 236, 0.5);
}

.regina-page .outbox-save-indicator.saving {
  color: #ffb3d1;
}

.regina-page .outbox-save-indicator.saved {
  color: #7fd99c;
}

.regina-page .outbox-save-indicator.error {
  color: #e88e8e;
}

/* "edited" tag — shows in card header when content differs from original */
.regina-page .outbox-edited-tag {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(255, 179, 209, 0.15);
  border: 1px solid rgba(255, 179, 209, 0.4);
  border-radius: 999px;
  color: #ffb3d1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 8px;
}

/* Restore original button */
.regina-page .outbox-restore-btn {
  margin-left: auto;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(255, 179, 209, 0.5);
  border-radius: 999px;
  color: #ffb3d1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.regina-page .outbox-restore-btn:hover {
  background: rgba(255, 179, 209, 0.15);
  border-color: #ff6fa3;
  color: #ffd6e5;
}

/* Make sure the card head wraps cleanly when edited tag + restore button appear */
.regina-page .outbox-status-draft .outbox-card-head {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Slight lift on Draft cards so they read as the "active work" cards */
.regina-page .outbox-status-draft {
  border-color: rgba(255, 111, 163, 0.4);
}

/* Mobile: tighten edit zone */
@media (max-width: 600px) {
  .regina-page .outbox-edit-body {
    min-height: 140px;
    font-size: 13px;
  }
  .regina-page .outbox-edit-subject {
    font-size: 13px;
  }
  .regina-page .outbox-restore-btn {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ============================================
   REGINA — Editable email input on Draft cards
   ============================================ */

.regina-page .outbox-contact-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px 0;
}

.regina-page .outbox-contact-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.regina-page .outbox-edit-email {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 100, 150, 0.3);
  border-radius: 8px;
  color: #fce4ec;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.regina-page .outbox-edit-email:focus {
  outline: none;
  border-color: #ff6fa3;
  background: rgba(0, 0, 0, 0.5);
}

.regina-page .outbox-edit-email::placeholder {
  color: rgba(252, 228, 236, 0.4);
}

/* Mobile */
@media (max-width: 600px) {
  .regina-page .outbox-edit-email {
    font-size: 12px;
    padding: 7px 10px;
  }
}


/* ============================================
   MARCUS — Red theme overrides
   Wrap Marcus pages in <div class="marcus-page"> for these to apply.
   We override hardcoded green hex values here, not just the CSS variables,
   because the existing styles bake in the green colors directly.
   ============================================ */

/* CSS variable overrides (for any rules that DO use var(--green)) */
.marcus-page {
  --green: #8b1e1e;
  --green-soft: #b03030;
  --green-deep: #5a0e0e;
}

/* === Top nav === */
.marcus-page .top-nav {
  border-color: #8b1e1e;
}
.marcus-page .top-nav .nav-link {
  color: #b03030;
}
.marcus-page .top-nav .nav-link.active {
  color: #faf6ef;
}
.marcus-page .top-nav .nav-stats {
  color: #b03030;
}

/* === Search bar === */
.marcus-page .dashboard-search {
  border-color: #8b1e1e;
}
.marcus-page .dashboard-search:focus {
  border-color: #b03030;
}

/* === Quick launch buttons === */
.marcus-page .ql-btn {
  border-color: #8b1e1e;
}
.marcus-page .ql-btn:hover {
  border-color: #b03030;
  background: rgba(139, 30, 30, 0.08);
}

/* === Panels === */
.marcus-page .panel {
  border-color: #8b1e1e;
}
.marcus-page .panel-label {
  color: #b03030;
}
.marcus-page .panel.accent {
  border-color: #8b1e1e;
}

/* === Briefs card === */
.marcus-page .briefs-card .briefs-count {
  background: #8b1e1e;
  color: #faf6ef;
}
.marcus-page .brief-visit {
  background: #8b1e1e;
  color: #faf6ef;
  border-color: #8b1e1e;
}
.marcus-page .brief-visit:hover {
  background: #b03030;
}

/* === Plate sections === */
.marcus-page .plate-section .label {
  color: #b03030;
}

/* === Calendar widget === */
.marcus-page .calendar-widget {
  border-color: #8b1e1e;
}
html body .marcus-page .cal-grid td.today span {
  background: #faf6ef !important;
  color: #8b1e1e !important;
  border: 1.5px solid #8b1e1e !important;
}
.marcus-page .cal-grid td.has-event {
  color: #b03030;
}

/* === Big clock === */
.marcus-page .big-clock {
  border-color: #8b1e1e;
}

/* === Pitch logger === */
.marcus-page .pitch-logger button {
  background: #8b1e1e;
  color: #faf6ef;
}
.marcus-page .pitch-logger button:hover {
  background: #b03030;
}
.marcus-page .pitch-logger select,
.marcus-page .pitch-logger input[type="date"] {
  border-color: #8b1e1e;
}

/* === Chain of Command card === */
.marcus-page .elle-card {
  border-color: #8b1e1e;
}
.marcus-page .elle-name {
  color: #faf6ef;
}
.marcus-page .elle-tagline {
  color: #b03030;
}
.marcus-page .elle-actions .primary {
  background: #8b1e1e;
  color: #faf6ef;
  border-color: #8b1e1e;
}
.marcus-page .elle-actions .primary:hover {
  background: #b03030;
}
.marcus-page .elle-actions .secondary {
  border-color: #8b1e1e;
  color: #b03030;
}
.marcus-page .elle-actions .secondary:hover {
  background: rgba(139, 30, 30, 0.1);
  color: #faf6ef;
}

/* === Cabinet (agent grid — 6 instead of 14) === */
.marcus-page .agent-grid {
  grid-template-columns: repeat(3, 1fr);
}
.marcus-page .agent-card {
  border-color: #8b1e1e;
}
.marcus-page .agent-card:hover {
  border-color: #b03030;
  background: rgba(139, 30, 30, 0.08);
}
.marcus-page .agent-card .role {
  color: #b03030;
}
.marcus-page .team-label {
  color: #b03030;
}

/* === Vibe card (red theme) === */
.marcus-page .vibe-card {
  border-color: #8b1e1e;
  background: linear-gradient(135deg, rgba(139, 30, 30, 0.08), rgba(0, 0, 0, 0.3));
}

/* === HERO PHOTO — show whole image without cropping === */
.marcus-page .photo-slot {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #0a0a0a;
}

/* === Mobile === */
@media (max-width: 720px) {
  .marcus-page .agent-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   MARCUS — Top section overrides
   Targets the search bar / nav / command header / quick launch
   that didn't get caught by the previous rules.
   ============================================ */

/* Command header title */
.marcus-page .command-header h1 {
  color: #faf6ef;
}
.marcus-page .command-header .subtitle {
  color: #b03030;
}

/* Search bar wrapper */
.marcus-page .search-bar-wrapper input {
  border-color: #8b1e1e;
}
.marcus-page .search-bar-wrapper input:focus {
  border-color: #b03030;
}

/* Top nav — more aggressive override */
.marcus-page .top-nav,
.marcus-page nav.top-nav {
  border-color: #8b1e1e !important;
}
.marcus-page .top-nav a,
.marcus-page .top-nav .nav-link {
  color: #b03030 !important;
}
.marcus-page .top-nav a.active,
.marcus-page .top-nav .nav-link.active {
  color: #faf6ef !important;
}
.marcus-page .top-nav .nav-stats {
  color: #b03030 !important;
}
.marcus-page .top-nav .nav-signout {
  color: #b03030 !important;
}

/* Search results dropdown */
.marcus-page .search-results {
  border-color: #8b1e1e;
}
.marcus-page .search-item {
  color: #b03030;
}
.marcus-page .search-item:hover {
  background: rgba(139, 30, 30, 0.1);
}

/* Quick launch tiles */
.marcus-page .quick-launch .ql-btn,
.marcus-page .ql-btn {
  border-color: #8b1e1e !important;
}
.marcus-page .ql-btn:hover {
  border-color: #b03030 !important;
  background: rgba(139, 30, 30, 0.08);
}
.marcus-page .ql-btn span {
  color: #b03030;
}

/* === HERO PHOTO + 3-COLUMN ALIGNMENT === */

/* Force the top grid columns to all stretch to match the tallest column */
.marcus-page .top-grid {
  align-items: stretch;
}

/* Photo column — fills full height of the row */
.marcus-page .photo-panel {
  height: 100%;
  display: flex;
}

/* Hero photo — fills its container fully, no white space */
.marcus-page .photo-slot {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #0a0a0a;
}

/* Make sure the center stack and right column also use full height */
.marcus-page .center-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.marcus-page .right-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make plate-card grow to fill remaining space */
.marcus-page .plate-card {
  flex: 1;
}

/* Make clock grow to fill remaining space on the right */
.marcus-page .big-clock {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ============================================
   MARCUS — More precise top section + masculine vibe banner
   ============================================ */

/* Wrapper around the quick launch tiles */
.marcus-page .quick-launch {
  border-color: #8b1e1e !important;
}

/* Search bar — text + placeholder both red */
.marcus-page .dashboard-search {
  color: #b03030;
}
.marcus-page .dashboard-search::placeholder {
  color: #b03030;
  opacity: 0.7;
}
.marcus-page .dashboard-search::-webkit-input-placeholder {
  color: #b03030;
  opacity: 0.7;
}

/* ============================================
   MARCUS PIN ICON (red, matches Peaky theme)
   ============================================ */
.pin-icon-svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  background-color: #b03030;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/></svg>") no-repeat center / contain;
}
.pin-icon-svg.pinned-state {
  background-color: #ffd700;
}
.pin-message-btn-marcus {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.pin-message-btn-marcus:hover {
  background: rgba(176, 48, 48, 0.15);
  border-color: rgba(176, 48, 48, 0.3);
}
.pin-message-btn-marcus.pinned .pin-icon-svg.pinned-state {
  background-color: #ffd700;
}