/* =========================================================
   DJSTAGECUE.COM — GLOBAL STYLESHEET
   One file controls look & feel across the entire site.
   Edit variables in :root to re-theme everything at once.
   ========================================================= */

 :root {
  --bg: #0a0d12;
  --bg-alt: #10151c;
  --surface: #131922;
  --surface-2: #18202b;
  --surface-3: #202a36;
  --surface-hover: #212c39;
  --border: #233040;
  --border-light: #324255;

  --text: #f4f7fb;
  --text-dim: #b7c2d0;
  --text-faint: #7f8b9a;
  --text-soft: #a7b3c2;
  --muted: #7f8b9a;
  --line: #324255;

  --gold: #c8a96b;
  --gold-soft: #e6d0a8;
  --blue: #5da9ff;
  --teal: #4ac8be;
  --red: #ff6f7d;
  --green: #45c78a;
  --yellow: #d8b26e;
  --purple: #7886ff;

  --gradient-brand: linear-gradient(135deg, #c8a96b 0%, #9f7f42 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(200,169,107,0.16), rgba(93,169,255,0.08));
  --gradient-accent: linear-gradient(135deg, rgba(93,169,255,0.22), rgba(74,200,190,0.16));
  --gradient-text: linear-gradient(90deg, #f0dec0, #c8a96b, #e6d0a8);
  --gradient-teal: linear-gradient(135deg, #5ee0d1 0%, #2a9c90 100%);
  --purple-light: #9aa3ff;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 20px rgba(0,0,0,0.18);
  --shadow-md: 0 20px 44px rgba(0,0,0,0.30);
  --shadow-glow: 0 0 0 1px rgba(200,169,107,0.18), 0 20px 40px rgba(0,0,0,0.28);

  --container: 1260px;
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { padding: 0; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(720px circle at 8% -8%, rgba(200,169,107,0.18), transparent 58%),
    radial-gradient(680px circle at 100% 0%, rgba(93,169,255,0.12), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%);
  pointer-events: none;
  z-index: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .5em; line-height: 1.2; }
p { margin: 0 0 1em; color: var(--text-dim); }
input, select, textarea { font-family: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

section { position: relative; z-index: 1; padding: 72px 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--bg-alt); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: rgba(200,169,107,0.10);
  border: 1px solid rgba(200,169,107,0.22);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 { font-size: 46px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }
.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.lede { font-size: 19px; color: var(--text-dim); max-width: 640px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gradient-brand); color: #0f1319; box-shadow: var(--shadow-glow); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(200,169,107,0.28), 0 18px 34px rgba(0,0,0,0.24); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-light); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--purple-light); }
.btn-teal { background: var(--gradient-teal); color: #08201d; }
.btn-outline { background: transparent; border-color: var(--border-light); color: var(--text); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: rgba(244,63,94,0.15); color: #ff8fa3; border-color: rgba(244,63,94,0.4); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 50%; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,13,18,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; height: 76px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(180deg, #1a222c, #121821);
  border: 1px solid rgba(200,169,107,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-soft); box-shadow: var(--shadow-glow);
  overflow: hidden; flex: 0 0 auto;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; min-width: 0; justify-content: center; }
.nav-links a {
  padding: 10px 14px; border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 500;
  color: var(--text-dim); transition: all .15s ease; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,0.04); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.nav-toggle { display: none; }
.avatar-chip {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  background: var(--surface-2); border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; min-width: 0; max-width: 220px;
}
.avatar-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-chip img, .avatar-chip .avatar-fallback { width: 28px; height: 28px; border-radius: 50%; }
.avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand); color: #fff; font-size: 12px; font-weight: 700;
}


.site-header.user-logged-in .nav-row { grid-template-columns: auto minmax(0,1fr) auto auto; gap: 14px; }
.site-header.user-logged-in .nav-links { gap: 2px; }
.site-header.user-logged-in .nav-links a { padding: 10px 12px; font-size: 14px; }
.site-header.user-logged-in .avatar-chip { max-width: 190px; }
.site-header.user-logged-in .btn-ghost.btn-sm[title="Messages"] { width: 38px; padding-inline: 0; }
.site-header.user-logged-in .dsc-notif-toggle { width: 38px; padding-inline: 0; }

/* ---------- Notification bell (header, every logged-in role) ---------- */
.dsc-notif-toggle { position: relative; }
.dsc-notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; line-height: 16px;
  text-align: center; font-weight: 700; border: 2px solid var(--bg, #0a0d12);
}
.dsc-notif-panel {
  position: absolute; top: 62px; right: 20px; width: min(380px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 100px)); overflow-y: auto;
  background: linear-gradient(180deg, #151d27, #0d131b); border: 1px solid var(--border-light);
  border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); z-index: 9600;
}
.dsc-notif-panel[hidden] { display: none; }
.dsc-notif-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: rgba(13,19,27,.95);
}
.dsc-notif-head strong { font-family: var(--font-display); font-size: 14px; }
.dsc-notif-mark-all { background: none; border: none; color: var(--purple-light); font-size: 12.5px; cursor: pointer; padding: 0; }
.dsc-notif-empty { padding: 28px 16px; text-align: center; color: var(--text-faint); font-size: 13.5px; }
.dsc-notif-item {
  display: block; width: 100%; text-align: left; padding: 12px 16px; border: none; background: none;
  border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text);
}
.dsc-notif-item:last-child { border-bottom: none; }
.dsc-notif-item:hover { background: var(--surface-hover); }
.dsc-notif-item.is-unread { background: rgba(200,169,107,.06); }
.dsc-notif-item-title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.dsc-notif-item-body { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.dsc-notif-item-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
@media (max-width: 520px) { .dsc-notif-panel { right: 10px; top: 58px; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 28px; margin-top: 80px; background: var(--bg-alt); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 40px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 14px; }
.footer-col a, .footer-col li { display: block; font-size: 14px; color: var(--text-dim); margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); flex-wrap: wrap; gap: 12px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, rgba(24,32,43,0.96), rgba(19,25,34,0.98));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color .15s ease, transform .15s ease;
  box-shadow: var(--shadow-sm);
}
.card-hover:hover { border-color: var(--purple-light); transform: translateY(-3px); }
.card-flat { background: rgba(19,25,34,0.98); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.card-glow { box-shadow: var(--shadow-glow); border-color: rgba(200,169,107,0.34); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-sidebar { grid-template-columns: 260px 1fr; align-items: start; }

/* ---------- Badges / Tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.badge-verified { background: rgba(20,184,166,0.16); color: #5eead4; border: 1px solid rgba(20,184,166,0.4); }
.badge-trending { background: rgba(255,107,53,0.16); color: #ffb088; border: 1px solid rgba(255,107,53,0.4); }
.badge-featured { background: rgba(251,191,36,0.16); color: #fde68a; border: 1px solid rgba(251,191,36,0.4); }
.badge-new { background: rgba(59,130,246,0.16); color: #93c5fd; border: 1px solid rgba(59,130,246,0.4); }
.badge-muted { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-light); }

.tag { display: inline-flex; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-light); font-size: 12.5px; color: var(--text-dim); }

/* Status pills for bookings */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-inquiry { background: rgba(59,130,246,0.15); color: #93c5fd; }
.status-review { background: rgba(251,191,36,0.15); color: #fde68a; }
.status-negotiation { background: rgba(255,107,53,0.15); color: #ffb088; }
.status-tentative { background: rgba(167,139,250,0.15); color: #c4b5fd; }
.status-confirmed { background: rgba(34,197,94,0.15); color: #86efac; }
.status-deposit { background: rgba(20,184,166,0.15); color: #5eead4; }
.status-paid { background: rgba(34,197,94,0.2); color: #86efac; }
.status-completed { background: rgba(148,163,184,0.15); color: #cbd5e1; }
.status-cancelled { background: rgba(244,63,94,0.15); color: #fda4af; }
.status-declined { background: rgba(244,63,94,0.15); color: #fda4af; }

/* ---------- Forms ---------- */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.field .hint { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: 13px 14px; border-radius: var(--radius-sm);
  background: #121821; border: 1px solid var(--border-light); color: var(--text);
  /* 16px, not 14.5px — anything smaller makes iOS Safari auto-zoom the
     whole page on focus, which is what this used to do. */
  font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
input::placeholder, textarea::placeholder { color: #708095; }
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 40px;
}
select option { background: #121821; color: var(--text); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(200,169,107,0.68); box-shadow: 0 0 0 3px rgba(200,169,107,0.12);
  background: #151c25;
}
textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); }
.checkbox-row input { width: auto; }
.select-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.select-card {
  border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 18px;
  cursor: pointer; text-align: center; transition: all .15s ease; background: var(--surface);
}
.select-card:hover { border-color: var(--gold); }
.select-card.selected { border-color: var(--gold); background: var(--gradient-brand-soft); box-shadow: var(--shadow-glow); }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option { padding: 8px 15px; border-radius: var(--radius-pill); border: 1px solid var(--border-light); font-size: 13px; background: var(--surface); transition: all .15s ease; }
.chip-option.selected { background: var(--gradient-brand); color: #0f1319; border-color: transparent; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 28px; overflow-x: auto; }
.tab-btn { padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--text-faint); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: #fff; border-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 12px 16px; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(19,25,34,0.98); box-shadow: var(--shadow-sm); }
.table-wrap table { min-width: 640px; }

/* ---------- Dashboard layout ---------- */
.dash-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: calc(100vh - 76px);
}
.dash-sidebar {
  width: 286px;
  min-width: 286px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(16,21,28,0.98), rgba(13,17,23,0.98));
  padding: 28px 16px;
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  overflow-y: auto;
  overflow-x: hidden;
}
.dash-sidebar a, .dash-sidebar button.side-link {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; background: transparent; border: 1px solid transparent;
}
.dash-sidebar a:hover, .dash-sidebar button.side-link:hover { background: rgba(255,255,255,0.04); color: #fff; border-color: rgba(255,255,255,0.04); }
.dash-sidebar a.active, .dash-sidebar button.side-link.active { background: rgba(200,169,107,0.10); color: #fff; border: 1px solid rgba(200,169,107,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.side-link-icon, .nav-icon, .brand-mark svg, .footer-social svg, .social-icon svg, .icon-inline svg { width: 16px; height: 16px; display: inline-block; flex: 0 0 16px; }
.side-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-main { padding: 36px 40px; min-width: 0; }
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }

.stat-card { background: linear-gradient(180deg, rgba(24,32,43,0.96), rgba(19,25,34,0.98)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.stat-card .stat-value { font-size: 30px; font-weight: 800; font-family: var(--font-display); }
.stat-card .stat-delta { font-size: 12.5px; margin-top: 6px; }
.stat-delta.up { color: #86efac; }
.stat-delta.down { color: #fda4af; }

/* ---------- Live (database-backed) dashboard pages ----------
   Same visual language as .stat-card/.card-flat/.table-wrap/.empty-state
   so live PHP pages render identically to the static demo pages. */
.live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.live-card, .live-card.kpi {
  background: linear-gradient(180deg, rgba(24,32,43,0.96), rgba(19,25,34,0.98));
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm);
}
.live-card .stat-label { font-size: 12.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.live-card .stat-value { font-size: 30px; font-weight: 800; font-family: var(--font-display); }
.live-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.live-table th { text-align: left; padding: 12px 16px; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.live-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim); background: rgba(19,25,34,0.6); }
.live-table tr:last-child td { border-bottom: none; }
.empty-live { text-align: center; padding: 60px 20px; color: var(--text-faint); border: 1px dashed var(--border-light); border-radius: var(--radius-md); }
@media (max-width: 700px) { .live-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .live-grid { grid-template-columns: 1fr; } }

/* ---------- AI blocks ---------- */
.ai-panel {
  border-radius: var(--radius-lg); padding: 24px; background: linear-gradient(180deg, rgba(200,169,107,0.12), rgba(93,169,255,0.06));
  border: 1px solid rgba(200,169,107,0.20); position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.ai-panel .ai-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px; }
.ai-insight { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); margin-bottom: 10px; }
.ai-insight .dot { width: 30px; height: 30px; border-radius: 50%; background: rgba(200,169,107,0.16); border: 1px solid rgba(200,169,107,0.22); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold-soft); font-size: 14px; }

/* ---------- Progress ---------- */
.progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.progress-fill { height: 100%; background: var(--gradient-brand); border-radius: var(--radius-pill); transition: width .3s ease; }

/* ---------- Calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; padding-bottom: 8px; }
.cal-day {
  aspect-ratio: 1 / 0.85; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border); padding: 8px; font-size: 12.5px; color: var(--text-dim); position: relative;
}
.cal-day .d-num { font-weight: 700; color: var(--text); }
.cal-day.is-blank { background: transparent; border: none; }
.cal-day.available { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.06); }
.cal-day.tentative { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
.cal-day.confirmed { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.12); }
.cal-day.blocked { border-color: rgba(244,63,94,0.4); background: rgba(244,63,94,0.06); }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; position: absolute; bottom: 8px; right: 8px; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-top: 14px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }

/* ---------- Messaging ---------- */
/* .msg-page-shell wraps .msg-shell on the real dj/promoter messages pages
   and cancels out .dash-main's own padding (at the same breakpoints that
   padding changes at) so the panel can measure itself against the header
   height alone instead of stacking two separate guesses at the page chrome
   — that mismatch was what made the panel spill past the bottom of the
   viewport / leave dead space before. */
.msg-page-shell { margin: -36px -40px; }
.msg-page-shell .msg-shell { border-radius: 0; }
.msg-shell { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 76px); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.msg-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--bg-alt); min-width: 0; height: 100%; }
.msg-item { display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); cursor: pointer; }
.msg-item:hover, .msg-item.active { background: var(--surface-2); }
.msg-thread { display: flex; flex-direction: column; height: 100%; min-width: 0; min-height: 0; background: rgba(19,25,34,0.98); }
.msg-thread-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex: none; }
.msg-back-btn { display: none; background: none; border: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 10px 4px 0; margin-right: 2px; }
.msg-bubbles { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 62%; padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; }
.bubble.mine { align-self: flex-end; background: var(--gradient-brand); color: #fff; border-bottom-right-radius: 4px; }
.bubble.theirs { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border-light); border-bottom-left-radius: 4px; }
.bubble-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.msg-compose { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex: none; }
.msg-compose input { flex: 1; }
@media (max-width: 980px) { .msg-page-shell { margin: -24px -18px; } }
@media (max-width: 640px) { .msg-page-shell { margin: -22px -18px; } .msg-shell { height: calc(100vh - 70px); } }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border); margin: 28px 0; border: none; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-lg { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); box-shadow: var(--shadow-md); }
.avatar-md { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.hero-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.rating-stars { color: var(--yellow); letter-spacing: 2px; }
.toast-host { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 9800; max-width: calc(100vw - 32px); }
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(165deg, rgba(26,34,46,.99), rgba(16,22,31,.995));
  border: 1px solid var(--border-light); border-left: 3px solid var(--gold);
  padding: 13px 16px; border-radius: var(--radius-md); box-shadow: 0 20px 50px rgba(0,0,0,.4);
  font-size: 13.5px; line-height: 1.45; min-width: 260px; max-width: 380px; color: var(--text);
  animation: dscToastIn .25s cubic-bezier(.2,.8,.2,1);
}
.toast.toast-ok { border-left-color: var(--green); }
.toast.toast-warn { border-left-color: var(--red); }
.toast.toast-leaving { animation: dscToastOut .18s ease forwards; }
.toast-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.toast-body { flex: 1; }
@keyframes dscToastIn { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes dscToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 520px) { .toast-host { right: 12px; bottom: 12px; left: 12px; } .toast { max-width: none; min-width: 0; } }
/* Modal system — a soft fade + rise-in on open/close (via opacity/visibility
   rather than display:none, so the transition can actually run) instead of
   the old instant display:flex pop, plus a glassier backdrop and a properly
   circular, hover-responsive close button. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,11,0.78); backdrop-filter: blur(10px) saturate(1.15);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box {
  background: linear-gradient(165deg, rgba(26,34,46,.99), rgba(16,22,31,.995));
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg);
  padding: 30px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 32px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(200,169,107,.06);
  transform: translateY(18px) scale(.97); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); opacity: 1; }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light); background: rgba(255,255,255,.04);
  color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.modal-close:hover { background: rgba(255,111,125,.14); color: #ff8992; border-color: rgba(255,111,125,.35); transform: rotate(90deg); }
@media (max-width: 640px) { .modal-box { padding: 24px 20px; border-radius: var(--radius-md); } }

/* Branded confirm modal (dsc-toast.js) — replaces native confirm() */
.dsc-confirm-box { max-width: 400px; text-align: center; }
.dsc-confirm-icon {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand-soft); border: 1px solid var(--gold); color: var(--gold-soft);
}
.dsc-confirm-icon svg { width: 26px; height: 26px; }
.dsc-confirm-icon-danger { background: rgba(255,111,125,.12); border-color: rgba(255,111,125,.4); color: #ff8992; }
.dsc-confirm-message { font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 0 0 22px; }
.dsc-confirm-actions { display: flex; gap: 10px; }
.dsc-confirm-actions .btn { flex: 1; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.hr-soft { border: none; border-top: 1px dashed var(--border-light); margin: 20px 0; }

/* ---------- Utility spacing ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:40px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:40px;}
.w-full { width: 100%; }
.rounded-full { border-radius: 999px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .site-header.user-logged-in .nav-links a { padding: 10px 10px; font-size: 13.5px; }
  .site-header.user-logged-in .avatar-chip { max-width: 168px; }
}
@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .dash-sidebar { width: 250px; min-width: 250px; }
  .msg-shell { grid-template-columns: 1fr; }
  .msg-shell .msg-thread { display: none; }
  .msg-shell.showing-thread .msg-list { display: none; }
  .msg-shell.showing-thread .msg-thread { display: flex; }
  .msg-back-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 820px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
}
@media (max-width: 720px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .select-cards { grid-template-columns: 1fr; }
  .dash-main { padding: 24px 18px; }
}


.contract-note{padding:14px 16px;border-radius:14px;background:rgba(200,169,107,0.08);border:1px solid rgba(200,169,107,0.18);font-size:13.5px;color:var(--text-dim);}
.pricing-note{padding:16px 18px;border-radius:16px;background:rgba(93,169,255,0.08);border:1px solid rgba(93,169,255,0.16);}
.review-line{padding-left:14px;border-left:2px solid rgba(200,169,107,0.26);}
.icon-list{display:grid;gap:10px;margin:16px 0;}
.icon-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-dim);}
.icon-bullet{width:18px;height:18px;border-radius:50%;background:rgba(200,169,107,0.12);border:1px solid rgba(200,169,107,0.18);display:inline-flex;align-items:center;justify-content:center;color:var(--gold-soft);font-size:11px;flex:0 0 18px;margin-top:2px;}

/* ===== 2026-07 premium dashboard fixes ===== */
.tab-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  color: var(--text-dim);
}
.tab-btn.active {
  background: linear-gradient(180deg, rgba(25,34,46,.98), rgba(18,24,33,.98));
  color: #f8fafc;
  border-color: rgba(200,169,107,.55);
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tab-btn:hover { background: rgba(255,255,255,.035); color: #fff; }

.site-header.user-logged-in .nav-links.auth-nav-links {
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}
.site-header.user-logged-in .nav-links.auth-nav-links a {
  padding-inline: 12px;
  font-size: 13.5px;
}
@media (max-width: 1180px) {
  .site-header.user-logged-in .nav-links.auth-nav-links a:nth-last-child(-n+2) { display: none; }
}
@media (max-width: 1024px) {
  .site-header.user-logged-in .nav-links.auth-nav-links a:nth-last-child(-n+4) { display: none; }
}

/* .modal-box has its own complete styling above now — this legacy
   !important rule only still needs to force dark styling on the other two
   (used on a couple of static/demo pages). */
.modal-card, .modal-surface {
  background: linear-gradient(180deg, rgba(24,32,43,.99), rgba(16,22,31,.995)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
}
select, input, textarea { color-scheme: dark; }
select option {
  background: #0e1520;
  color: #f8fafc;
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: rgba(200,169,107,.65);
  box-shadow: 0 0 0 3px rgba(200,169,107,.12);
}
.dash-shell {
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: calc(100vh - 76px);
}
.dash-sidebar {
  position: sticky;
  top: 76px;
  align-self: start;
  height: calc(100vh - 76px);
  overflow-y: auto;
  width: 250px;
  min-width: 250px;
}
.dash-main { min-width: 0; }
.msg-shell.with-sidebar {
  display: grid;
  grid-template-columns: 250px 320px minmax(0,1fr);
  min-height: calc(100vh - 76px);
}
.msg-shell.with-sidebar .msg-list,
.msg-shell.with-sidebar .msg-thread {
  height: calc(100vh - 76px);
}
.page-shell { min-height: calc(100vh - 76px); }
.page-shell.with-sidebar {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}
.page-shell.with-sidebar .page-main {
  min-width: 0;
  padding: 32px 36px 48px;
}
.search-topbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.search-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
.upload-drop {
  border: 1px dashed rgba(200,169,107,.4);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,.015);
  transition: border-color .15s ease, background .15s ease;
}
.upload-drop.drag-over { border-color: var(--gold); background: rgba(200,169,107,.08); }
.upload-drop-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.upload-drop-actions .btn { flex: 1; }
.upload-drop-icon { color: var(--text-faint); margin-bottom: 8px; }
.upload-drop-icon svg { width: 30px; height: 30px; }

/* Sectioned form headers (event create/edit, and reusable elsewhere) */
.form-section-label {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gold-soft);
  margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.form-section-label:first-child { margin-top: 0; }
.form-section-label svg { width: 15px; height: 15px; flex: none; }
.field.field-invalid input, .field.field-invalid textarea, .field.field-invalid select { border-color: #ff6f7d !important; box-shadow: 0 0 0 3px rgba(255,111,125,.12) !important; }
.field-error-msg { color: #ff8992; font-size: 12px; margin-top: 5px; display: none; }
.field.field-invalid .field-error-msg { display: block; }

/* Event cards — date badge + linked-booking count */
.event-card-flyer { position: relative; width: 100%; height: 150px; }
.event-date-badge {
  position: absolute; top: 10px; left: 10px; background: rgba(10,13,18,.88); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px 9px; text-align: center; line-height: 1.1;
}
.event-date-badge .month { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-soft); }
.event-date-badge .day { font-size: 16px; font-weight: 800; color: #fff; }
.table-wrap table td small { color: var(--text-faint); display:block; margin-top:4px; }
.subscription-stat {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24,32,43,.96), rgba(16,22,31,.98));
  border: 1px solid var(--border);
}
.event-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.msg-meta { font-size: 12px; color: var(--text-faint); }
.section-header-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
@media (max-width: 980px) {
  .msg-shell.with-sidebar { grid-template-columns: 1fr; }
  .page-shell.with-sidebar, .dash-shell { grid-template-columns: 1fr; }
  .page-shell.with-sidebar .page-main { padding: 24px; }
  .search-grid { grid-template-columns: 1fr; }
  /* Dashboard navigation lives in the hamburger menu on mobile/tablet now
     (see #dscMobileNav in dsc_page_start()) — a horizontally-scrolling
     strip of the same links was confusing (no visible affordance that
     there was more to scroll to). */
  .dash-sidebar { display: none; }
}


/* ===== 2026-07 contract / billing system ===== */
.clause-card{padding:16px 18px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.02);margin-bottom:12px;}
.clause-system{border-color:rgba(93,169,255,.22);background:rgba(93,169,255,.05);}
.clause-dj{border-color:rgba(200,169,107,.34);background:rgba(200,169,107,.08);}
.clause-promoter{border-color:rgba(124,58,237,.30);background:rgba(124,58,237,.09);}
.selected-row{border-color:rgba(200,169,107,.45)!important;box-shadow:var(--shadow-glow);}
.checkbox-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-dim);}
.checkbox-row input{width:16px;height:16px;accent-color:var(--gold);}


/* =========================================================
   HOSTINGER-READY SYSTEM PATCH: RESPONSIVE + SECURE AREAS
   ========================================================= */
.profile-banner, .dj-banner, .banner, .cover-image { display:none !important; }
.dj-card-identity { display:flex; align-items:center; gap:14px; }
.dj-card-identity .avatar-lg, .profile-photo-xl { flex:0 0 auto; }

/* Protected dashboard pages keep a steady sidebar on desktop */
.dash-shell { display:grid; grid-template-columns: 248px minmax(0,1fr); min-height:calc(100vh - 76px); }
.dash-sidebar { position:sticky; top:76px; height:calc(100vh - 76px); overflow:auto; background:rgba(13,18,25,.92); border-right:1px solid var(--border); padding:28px 14px; z-index:20; }
.dash-main { min-width:0; width:100%; }
.dash-sidebar a { display:flex; align-items:center; gap:12px; min-height:46px; padding:12px 14px; border-radius:12px; color:var(--text-dim); font-weight:600; white-space:normal; }
.dash-sidebar a:hover, .dash-sidebar a.active { background:rgba(200,169,107,.12); color:#fff; box-shadow: inset 0 0 0 1px rgba(200,169,107,.24); }
.side-link-icon { width:18px; height:18px; flex:0 0 18px; display:inline-flex; }
.side-link-icon svg, .nav-icon svg { width:100%; height:100%; }

/* Stronger forms/dropdowns/modals */
select, input, textarea { background:#111821 !important; color:var(--text) !important; border:1px solid var(--border-light) !important; }
select option { background:#111821 !important; color:#f4f7fb !important; }
.modal, .modal-card, .popup-card, .dialog-card { background:rgba(12,17,24,.72); }
.modal-content, .modal-card, .popup-card, .dialog-card, [role="dialog"] { background:#151c26 !important; color:var(--text) !important; border:1px solid var(--border-light) !important; box-shadow:0 28px 80px rgba(0,0,0,.5) !important; }
.tab-btn { background:#121922 !important; color:var(--text-dim) !important; border:1px solid var(--border-light) !important; }
.tab-btn.active { background:rgba(200,169,107,.16) !important; color:#fff !important; border-color:rgba(200,169,107,.72) !important; }

/* Public cards should use profile photos, not DJ banners */
.dj-card-photo-only { padding:22px !important; }
.dj-card-photo-only > img:first-child { width:76px !important; height:76px !important; border-radius:50% !important; object-fit:cover !important; margin:0 0 14px !important; }

@media (max-width: 1180px){
  .container, .container-wide, .container-narrow { padding-left:18px; padding-right:18px; }
  .nav-row { grid-template-columns:minmax(0,auto) minmax(0,1fr) 40px; gap:10px; }
  /* Below this width the tab bar can't fit every link without scrolling —
     rather than showing a scrollable-but-not-obviously-scrollable strip,
     jump straight to the hamburger menu (same as the narrower breakpoints
     below), so there's exactly one mobile/tablet nav pattern site-wide. */
  .nav-links { display:none; }
  .nav-toggle { display:inline-flex; }
  .avatar-chip { max-width:160px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  h1 { font-size:38px; }
}
@media (max-width: 900px){
  .dash-shell { display:block; min-height:auto; }
  .dash-sidebar { display:none; }
  .dash-main { padding:22px 18px !important; }
  .grid, .grid-2, .grid-3, .grid-4, .grid-sidebar { grid-template-columns:1fr !important; }
  .form-row { grid-template-columns:1fr !important; }
  table { display:block; overflow-x:auto; white-space:nowrap; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  section { padding:48px 0; }
}
@media (max-width: 640px){
  .nav-row { height:auto; min-height:70px; grid-template-columns:minmax(0,auto) minmax(0,1fr) 40px; padding:12px 0; }
  .brand { font-size:18px; }
  .brand-mark { width:34px; height:34px; }
  .nav-links { grid-column:1 / -1; order:3; width:100%; justify-content:flex-start; }
  .nav-actions { gap:6px; }
  .nav-actions .btn:not(.btn-icon) { padding:8px 11px; font-size:12.5px; }
  .avatar-chip span { display:none; }
  .avatar-chip { padding:5px; }
  h1 { font-size:32px; }
  h2 { font-size:26px; }
  .card { padding:20px; border-radius:18px; }
  .footer-grid { grid-template-columns:1fr; }
  .dash-sidebar { top:70px; }
}


/* =========================================================
   FINAL VISUAL / MOBILE / READABILITY FIXES
   ========================================================= */
button { color: inherit; }
.card, .card-flat, .contract-row, .clause-card, .subscription-stat, .table-wrap, table, td, th { color: var(--text) !important; }
.card strong, .card-flat strong, .contract-row strong, .clause-card strong, td strong { color: #f8fafc !important; }
.card p, .card-flat p, .contract-row .text-dim, .contract-row .text-faint, .clause-card p { color: var(--text-dim) !important; }
.selected-row, .contract-row:hover { background: linear-gradient(180deg, rgba(25,34,46,.98), rgba(18,24,33,.99)) !important; color: var(--text) !important; }
.selected-row * { color: inherit; }
.selected-row .text-faint { color: var(--text-faint) !important; }
.selected-row .text-dim { color: var(--text-dim) !important; }

/* DJ profiles now use one profile photo only: no banner strip and no duplicate top avatar. */
#profile-root section:first-child > div:first-child { display:none !important; height:0 !important; }
#profile-root section:first-child .container { margin-top:0 !important; padding-top:46px !important; }
#profile-root .avatar-lg { width:118px !important; height:118px !important; border-radius:50% !important; object-fit:cover !important; border:1px solid var(--border-light); box-shadow:var(--shadow-md); }
#profile-root .profile-photo-xl.mx-auto { display:none !important; }
.dj-card-photo-only .avatar-md { display:none !important; }
.dj-card-photo-only .profile-photo-xl { width:92px !important; height:92px !important; border-radius:50% !important; margin:0 0 20px 0 !important; object-fit:cover !important; }
.dj-card-photo-only { display:flex !important; flex-direction:column !important; min-height:0 !important; padding:28px !important; }
.dj-card-photo-only > div { padding:0 !important; }
.dj-card-photo-only .flex.items-center.gap-1.mb-1 { align-items:flex-start !important; }

/* Real document download buttons */
.document-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.document-preview-card { border:1px solid rgba(200,169,107,.22); background:rgba(200,169,107,.06); border-radius:16px; padding:16px; }

/* Force all page grids with inline two-column styles to become one-column on tablet/mobile. */
body { overflow-x:hidden; }
@media (max-width: 980px) {
  .section-tight > .container[style*="grid-template-columns"],
  section > .container[style*="grid-template-columns"],
  .grid[style*="grid-template-columns"],
  .container[style*="display:grid"] {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .container, .container-wide, .container-narrow { width:100% !important; max-width:100% !important; padding-left:22px !important; padding-right:22px !important; }
  .hero-media, .card img[style*="height:340px"] { height:auto !important; max-height:280px !important; }
  .dash-header { align-items:flex-start !important; gap:14px !important; }
  .flex.justify-between.items-end, .flex.justify-between.items-center { align-items:flex-start; }
}

@media (max-width: 760px) {
  html, body { width:100%; overflow-x:hidden; }
  .site-header { position:sticky; }
  /* 3 tracks, not 2 — .nav-links is display:none at this width, but
     .nav-actions AND .nav-toggle are both still real, separate grid
     children. With only 2 tracks, .nav-toggle had no track of its own and
     was auto-placed onto a new row, stretched to fill the full-width
     track — that's what made it render as a wide pill instead of a
     compact square button. */
  .nav-row { display:grid !important; grid-template-columns:minmax(0,auto) minmax(0,1fr) 40px !important; min-height:72px !important; height:auto !important; gap:10px !important; padding:12px 0 !important; }
  /* min-width:0 on the child only matters once its grid TRACK is also
     allowed to shrink below content size (minmax(0,...) above) — without
     both, "DJStageCue" was wide enough to overlap "Log in" on narrow
     phones instead of truncating. */
  .brand { min-width:0; font-size:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .brand-mark { width:42px; height:42px; }
  .nav-links { display:none !important; }
  .nav-toggle { display:inline-flex !important; }
  .nav-actions { justify-self:end; gap:8px; }
  .nav-actions .btn { padding:10px 14px !important; font-size:14px !important; }
  .avatar-chip { max-width:52px !important; padding:5px !important; }
  .avatar-chip span { display:none !important; }
  section { padding:44px 0 !important; }
  .section-tight { padding:36px 0 !important; }
  h1 { font-size:40px !important; line-height:1.08 !important; }
  h2 { font-size:28px !important; }
  h3 { font-size:20px !important; }
  .lede { font-size:20px !important; line-height:1.55 !important; }
  .btn-lg, .btn { width:100%; justify-content:center; }
  .btn-sm { width:auto; }
  .card { padding:22px !important; }
  .card-flat { padding:16px !important; }
  .grid, .grid-2, .grid-3, .grid-4 { display:grid !important; grid-template-columns:1fr !important; }
  /* Brand blurb full-width on top, then the 4 link columns 2-up instead
     of one long single-file stack — same content, about half the
     scrolling. */
  .site-footer { margin-top:48px !important; padding:36px 0 20px !important; }
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:28px 20px !important; margin-bottom:28px !important; }
  .footer-col:first-child { grid-column:1 / -1 !important; }
  .dash-shell { display:block !important; }
  .dash-sidebar { display:none !important; }
  .dash-main, .page-shell.with-sidebar .page-main { padding:22px !important; }
  table { min-width:760px; }
  .table-wrap { overflow-x:auto; }
  #profile-root .avatar-lg { width:104px !important; height:104px !important; }
  #profile-root section:first-child .container { padding-top:30px !important; }
  #profile-root .flex.items-end.gap-2 { align-items:center !important; }
}

@media (max-width: 420px) {
  .container, .container-wide, .container-narrow { padding-left:18px !important; padding-right:18px !important; }
  h1 { font-size:34px !important; }
  .lede { font-size:18px !important; }
  .brand { font-size:18px; }
  .nav-actions .btn { padding:9px 12px !important; font-size:13px !important; }
  /* "DJStageCue" + "Log in" + "Sign up free" + the hamburger button don't
     all fit on the narrowest phones — drop "Log in" here since it's still
     one tap away inside the hamburger menu. Logged-in header (messages/
     bell icons use the same .btn-ghost class) is untouched. */
  .site-header:not(.user-logged-in) .nav-actions .btn-ghost { display: none; }
}


/* Professional profile action buttons */
.profile-hero-clean { padding-top: 64px; padding-bottom: 34px; background: radial-gradient(circle at 0 0, rgba(200,169,107,.10), transparent 32%), linear-gradient(135deg, rgba(10,13,18,.96), rgba(13,20,32,.92)); }
.profile-hero-grid { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.profile-identity { display:flex; align-items:center; gap:22px; min-width:0; }
.profile-photo-main { width:136px; height:136px; border-radius:50%; object-fit:cover; border:1px solid rgba(200,169,107,.35); box-shadow:0 22px 50px rgba(0,0,0,.28); flex:0 0 auto; }
.profile-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn-action { min-height:52px; padding:0 22px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:800; letter-spacing:.01em; text-decoration:none; }
.btn-action .btn-svg, .btn-action svg { width:18px; height:18px; display:inline-block; }
.btn-message-pro { background:rgba(15,23,34,.78); border:1px solid rgba(148,163,184,.32); color:var(--text); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.btn-message-pro:hover { border-color:rgba(200,169,107,.55); transform:translateY(-1px); }
.btn-booking-pro { background:linear-gradient(135deg, #d8b66b, #b9944f); color:#0a0d12; border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 44px rgba(200,169,107,.20); }
.btn-booking-pro:hover { transform:translateY(-1px); filter:brightness(1.04); }
.review-form-card { border:1px solid rgba(200,169,107,.24); background:rgba(200,169,107,.07); }
.payout-policy-card { border:1px solid rgba(45,212,191,.24); background:rgba(45,212,191,.06); }
@media (max-width: 780px) {
  .profile-hero-clean { padding-top: 34px; }
  .profile-hero-grid { align-items:flex-start; }
  .profile-identity { align-items:flex-start; flex-direction:column; gap:14px; width:100%; }
  .profile-photo-main { width:112px; height:112px; }
  .profile-actions { width:100%; display:grid; grid-template-columns:1fr; }
  .btn-action { width:100%; min-height:48px; }
}


/* DJStageCue advanced management update */
.profile-actions { align-items:center; }
.btn-action { min-height:48px; border-radius:999px; padding:0 20px; gap:10px; font-weight:800; letter-spacing:.01em; box-shadow:0 14px 30px rgba(0,0,0,.22); }
.btn-action .btn-svg { width:18px; height:18px; flex:0 0 auto; }
.btn-message-pro { background:linear-gradient(180deg, rgba(20,27,37,.98), rgba(12,17,24,.98)); color:#f7fafc; border:1px solid rgba(148,163,184,.32); }
.btn-message-pro:hover { border-color:rgba(200,169,107,.55); transform:translateY(-1px); }
.btn-booking-pro { background:linear-gradient(180deg, #d6b76c, #b98f38); color:#081017; border:1px solid rgba(255,230,174,.38); }
.btn-booking-pro:hover { filter:brightness(1.04); transform:translateY(-1px); }
.fee-private { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(200,169,107,.12); border:1px solid rgba(200,169,107,.32); color:#f3e1b3; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.pro-panel { background:linear-gradient(180deg, rgba(19,26,36,.98), rgba(13,18,26,.98)); border:1px solid rgba(94,114,141,.44); border-radius:24px; box-shadow:0 18px 60px rgba(0,0,0,.24); }
.policy-box { background:rgba(200,169,107,.09); border:1px solid rgba(200,169,107,.28); border-radius:18px; padding:16px; color:var(--text); }
.detail-row { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.detail-row:last-child { border-bottom:0; }
.profile-photo-hero { width:150px; height:150px; border-radius:999px; object-fit:cover; border:2px solid rgba(200,169,107,.55); box-shadow:0 16px 50px rgba(0,0,0,.34); }
.profile-hero-clean { padding:56px 0 34px; background:radial-gradient(circle at 10% 10%, rgba(200,169,107,.16), transparent 34%), linear-gradient(180deg, rgba(12,17,24,.98), rgba(8,11,16,1)); }
.inline-checkbox-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:260px; overflow:auto; padding:10px; border:1px solid var(--border); border-radius:16px; background:rgba(7,11,16,.5); }
.inline-checkbox-grid label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); }
.social-row { display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; margin-bottom:10px; }
.social-row-icon { width:32px; height:32px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--gold); flex:none; }
.social-row-icon svg { width:16px; height:16px; }
.social-platform-chip { display:inline-flex; align-items:center; gap:6px; }
.social-platform-chip svg { width:15px; height:15px; }
.document-preview { aspect-ratio: 8.5 / 11; background:#f8fafc; color:#0f172a; border-radius:16px; padding:24px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12); }
.document-preview * { color:#0f172a !important; }
.invoice-detail, .payment-detail { display:none; margin-top:12px; }
.invoice-detail.open, .payment-detail.open { display:block; }
.block-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.block-day { min-height:76px; border:1px solid var(--border); border-radius:14px; padding:8px; background:rgba(15,23,34,.86); }
.block-day.blocked { background:rgba(244,63,94,.14); border-color:rgba(244,63,94,.38); }
.block-day.confirmed { background:rgba(167,139,250,.13); border-color:rgba(167,139,250,.38); }
.block-day.hold { background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.32); }
.mobile-only-nav { display:none; }
@media (max-width: 980px) { .inline-checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .social-row{grid-template-columns:1fr;} .profile-hero-grid{grid-template-columns:1fr!important;text-align:left;} .profile-actions{justify-content:flex-start;} .profile-photo-hero{width:120px;height:120px;} }
@media (max-width: 640px) { .btn-action{width:100%; justify-content:center; border-radius:18px;} .inline-checkbox-grid{grid-template-columns:1fr;max-height:320px;} .block-calendar-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .detail-row{display:block;} .profile-identity{align-items:flex-start!important;} .profile-photo-hero{width:104px;height:104px;} }

@media (max-width: 760px) { .card-glow { max-width:100%; overflow:hidden; } .hero-card-mobile-safe img { height:220px!important; } }


/* === Approval action visibility fix === */
.btn-teal,
button.btn-teal,
a.btn-teal {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.98), rgba(20, 184, 166, 0.98)) !important;
  color: #041412 !important;
  border: 1px solid rgba(153, 246, 228, 0.55) !important;
  box-shadow: 0 14px 30px rgba(20, 184, 166, 0.18), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.btn-teal:hover,
button.btn-teal:hover,
a.btn-teal:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
}
.card-flat .btn-teal,
.booking-card .btn-teal,
#bookings-list .btn-teal {
  min-width: 218px;
  justify-content: center;
  font-weight: 900;
  white-space: nowrap;
}
.booking-actions,
#bookings-list .flex.gap-1 {
  align-items: center;
}
@media (max-width: 820px) {
  #bookings-list .btn-teal,
  #bookings-list .btn-secondary,
  #bookings-list .btn-danger {
    width: 100%;
    min-width: 0;
  }
}


/* Contract/invoice professional document and signature fixes */
.signature-pad{width:100%;height:170px;background:#0b121b;border:1px solid var(--line);border-radius:16px;display:block;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.signature-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;padding:14px;border:1px solid rgba(201,167,96,.28);border-radius:16px;background:rgba(201,167,96,.07)}
.signature-summary span{color:var(--text-faint);font-size:12.5px}.document-preview-card{border-color:rgba(201,167,96,.22)}
.document-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}.document-actions .btn{min-height:38px}.clause-card p,.contract-note,.card-flat,.document-preview-card p{color:var(--text-soft)}
@media(max-width:720px){.signature-summary{grid-template-columns:1fr}.signature-pad{height:140px}.document-actions .btn{width:100%;justify-content:center}.page-main .dash-header{gap:18px}.page-main .dash-header .btn{width:100%;justify-content:center}}


/* Contract editor and role-specific signature upgrades */
.single-signature-card{max-width:820px}
.signature-draw-wrap{position:relative;border:1px dashed rgba(201,167,96,.42);background:linear-gradient(180deg,rgba(8,13,20,.92),rgba(13,22,33,.92));border-radius:18px;padding:14px;margin:12px 0 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.signature-directions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;color:var(--text)}
.signature-directions strong{font-size:14px;letter-spacing:.02em}.signature-directions span{font-size:12.5px;color:var(--text-faint)}
.signature-draw-wrap .signature-pad{height:220px;background:#f8fafc;border-color:rgba(201,167,96,.5);box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);cursor:crosshair}
.signature-guide{position:absolute;left:24px;right:24px;bottom:28px;border-top:1px solid rgba(15,23,42,.35);padding-top:6px;text-align:right;color:rgba(15,23,42,.5);font-size:12px;pointer-events:none;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.full-contract-editor{border-top:1px solid var(--line);padding-top:18px}.contract-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.contract-body-editor{min-height:520px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.55;resize:vertical}.contract-live-preview{min-height:520px;max-height:640px;overflow:auto;border-radius:18px}.contract-live-preview pre{white-space:pre-wrap;font-family:Inter,system-ui,sans-serif;font-size:12.5px;line-height:1.55;margin:18px 0 0;color:#0f172a}.document-mini-header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(15,23,42,.12);padding-bottom:12px;font-size:13px}.document-mini-header span{color:#475569!important}
@media(max-width:980px){.contract-editor-grid{grid-template-columns:1fr}.contract-live-preview{min-height:auto;max-height:none}.signature-draw-wrap .signature-pad{height:180px}.signature-directions{display:block}.signature-directions span{display:block;margin-top:4px}}

/* Contract agreement popup workflow */
body.modal-is-open{overflow:hidden;}
.agreement-queue-card{max-width:1120px;}
.contract-row{transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.contract-row:hover{transform:translateY(-1px);border-color:rgba(210,174,101,.55);background:linear-gradient(180deg,rgba(22,31,44,.96),rgba(15,21,30,.98));}
.contract-modal{position:fixed;inset:0;z-index:1000;background:rgba(2,6,12,.78);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:24px;}
.contract-modal.open{display:flex;}
.contract-modal-card{width:min(1180px,96vw);height:min(88vh,920px);background:linear-gradient(180deg,#121b28,#0b1119);border:1px solid rgba(98,125,157,.45);box-shadow:0 30px 90px rgba(0,0,0,.62);border-radius:28px;overflow:hidden;color:#f4f7fb;}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 28px;border-bottom:1px solid rgba(98,125,157,.28);background:linear-gradient(90deg,rgba(210,174,101,.12),rgba(17,26,39,.72));}
.modal-close{width:42px;height:42px;border-radius:999px;border:1px solid rgba(148,170,195,.38);background:#0c121b;color:#f6f7fb;font-size:30px;line-height:1;cursor:pointer;}
.modal-scroll{height:calc(88vh - 92px);overflow:auto;padding:26px 28px 34px;}
.contract-modal .full-contract-editor{margin-top:22px;border-top:1px solid rgba(98,125,157,.26);padding-top:22px;}
.contract-modal .contract-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.contract-modal .contract-body-editor{min-height:520px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.55;}
.contract-modal .contract-live-preview{min-height:520px;max-height:620px;overflow:auto;background:#f6f7fb;color:#17202d;border-radius:18px;padding:26px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.contract-modal .contract-live-preview pre{white-space:pre-wrap;font-family:Inter,system-ui,sans-serif;line-height:1.55;color:#17202d;margin:18px 0 0;}
.contract-modal .document-mini-header{display:flex;justify-content:space-between;border-bottom:1px solid rgba(15,25,38,.15);padding-bottom:12px;text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:#17202d;}
.linked-invoice-popup{border-color:rgba(210,174,101,.35);}
@media (max-width: 860px){.contract-modal{padding:10px;align-items:stretch}.contract-modal-card{width:100%;height:calc(100vh - 20px);border-radius:18px}.modal-head{padding:18px}.modal-scroll{height:calc(100vh - 98px);padding:18px}.contract-modal .contract-editor-grid{grid-template-columns:1fr}.contract-modal .contract-body-editor,.contract-modal .contract-live-preview{min-height:360px}.contract-row .document-actions{flex-direction:column;align-items:stretch}.contract-row .btn{width:100%;}}


/* Hero profile-card cleanup: no banner imagery, one DJ profile photo only */
.hero-grid-clean { display:grid; grid-template-columns:1.05fr .85fr; gap:56px; align-items:center; }
.hero-live-stats { display:flex; gap:30px; flex-wrap:wrap; margin-top:34px; }
.hero-live-stats > div { min-width:112px; }
.hero-stat-value { font-size:28px; line-height:1; font-weight:900; letter-spacing:-.04em; }
.hero-live-stats .text-faint { font-size:13px; margin-top:7px; }
.hero-dj-card { padding:0; overflow:hidden; max-width:560px; margin-left:auto; }
.hero-dj-card-inner { padding:36px; display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center; min-height:330px; }
.hero-dj-photo-wrap { width:150px; height:150px; border-radius:999px; padding:7px; background:linear-gradient(145deg, rgba(200,169,107,.55), rgba(49,70,96,.25)); box-shadow:0 22px 60px rgba(0,0,0,.36); }
.hero-dj-photo { width:100%; height:100%; border-radius:999px; object-fit:cover; display:block; background:#101722; border:1px solid rgba(255,255,255,.12); }
.hero-dj-label { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:900; margin-bottom:4px; }
.hero-dj-head { gap:14px; }
.hero-dj-tagline { color:var(--text); font-size:18px; line-height:1.42; margin:16px 0 18px; max-width:320px; }
.hero-dj-card .ai-insight { background:rgba(11,15,22,.62); }

@media (max-width: 980px) {
  .hero-grid-clean { grid-template-columns:1fr; gap:36px; }
  .hero-dj-card { margin-left:0; max-width:100%; }
}
@media (max-width: 640px) {
  .hero-section { padding-top:34px!important; }
  .hero-grid-clean { gap:28px; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .hero-live-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .hero-dj-card-inner { grid-template-columns:1fr; padding:28px; text-align:left; min-height:0; }
  .hero-dj-photo-wrap { width:132px; height:132px; }
  .hero-dj-head { align-items:flex-start; }
}


/* ---------- Premium DJ profile/logo presentation ---------- */
.dj-logo-lockup{display:inline-flex;align-items:center;justify-content:center;max-width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px 12px;background:rgba(255,255,255,.035);box-shadow:0 12px 34px rgba(0,0,0,.24);font-weight:950;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:#fff;}
.dj-logo-lockup img{display:block;max-width:100%;max-height:34px;object-fit:contain;}
.dj-logo-lockup span{display:block;white-space:nowrap;}
.dj-logo-sm{font-size:10px;padding:6px 9px;border-radius:11px;letter-spacing:.13em;}
.dj-logo-md{font-size:12px;min-height:34px;}
.dj-logo-lg{font-size:16px;min-height:46px;padding:12px 16px;border-radius:18px;}
.dj-logo-on-light{background:#fff;color:#070b11;border-color:rgba(255,255,255,.75);}
.dj-logo-white{background:rgba(8,11,16,.72);color:#fff;border-color:rgba(200,169,107,.28);}
.dj-logo-color{background:linear-gradient(135deg,rgba(200,169,107,.18),rgba(24,34,48,.76));color:#f8ead0;border-color:rgba(200,169,107,.32);}
.dj-lockup{display:flex;align-items:center;gap:18px;min-width:0;}
.dj-lockup.is-compact{gap:12px;}
.dj-lockup-body{min-width:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.dj-lockup-name{font-size:20px;line-height:1.05;color:var(--text);}
.dj-lockup-meta{font-size:13px;line-height:1.35;}
.dj-premium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.dj-premium-card{position:relative;display:flex!important;flex-direction:column;min-height:340px;padding:28px!important;overflow:hidden;border:1px solid rgba(73,96,124,.55);background:radial-gradient(circle at 18% 12%,rgba(200,169,107,.12),transparent 28%),linear-gradient(155deg,rgba(23,34,49,.98),rgba(11,16,24,.98));box-shadow:0 28px 90px rgba(0,0,0,.28);}
.dj-premium-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 35%);pointer-events:none;}
.dj-card-top{position:relative;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px;}
.dj-card-photo{width:96px;height:96px;border-radius:28px;object-fit:cover;border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 50px rgba(0,0,0,.32);background:#101722;}
.dj-card-logo-zone{display:flex;justify-content:flex-end;max-width:50%;}
.dj-card-main{position:relative;margin-top:auto;}
.dj-card-name{display:block;font-size:24px;letter-spacing:-.03em;margin-bottom:4px;}
.dj-card-bio{font-size:13.5px;line-height:1.55;color:var(--muted);margin:14px 0 18px;min-height:42px;}
.dj-card-meta-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);}
.dj-card-kpi{font-size:12px;color:var(--muted);}
.dj-card-kpi strong{display:block;color:var(--text);font-size:16px;}
.featured-dj-strip .dj-premium-card{min-height:300px;}
.search-layout-pro{display:grid;grid-template-columns:minmax(280px,390px) 1fr;gap:34px;align-items:start;}
.search-panel-sticky{position:sticky;top:110px;}
.search-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;}
.profile-page-pro .profile-hero-clean{padding:58px 0 42px;background:radial-gradient(circle at 16% 18%,rgba(200,169,107,.16),transparent 32%),linear-gradient(135deg,rgba(8,11,16,.98),rgba(13,20,31,.98));}
.profile-hero-pro-card{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:30px;align-items:center;border:1px solid rgba(73,96,124,.5);border-radius:34px;padding:30px;background:linear-gradient(145deg,rgba(20,30,44,.78),rgba(8,11,16,.72));box-shadow:0 30px 120px rgba(0,0,0,.32);}
.profile-photo-hero-pro{width:180px;height:180px;border-radius:38px;object-fit:cover;border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 70px rgba(0,0,0,.40);background:#101722;}
.profile-photo-hero-pro.avatar-fallback{font-size:64px;border-radius:38px;}
.profile-title-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 8px;}
.profile-title-line h1{margin:0;font-size:42px;letter-spacing:-.045em;}
.profile-pro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;max-width:680px;}
.profile-pro-stat{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);}
.profile-pro-stat span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;}
.profile-pro-stat strong{display:block;margin-top:4px;color:var(--text);font-size:18px;}
.profile-actions-pro{display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:280px;}
.profile-body-pro{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);gap:34px;align-items:start;}
.profile-side-card{position:sticky;top:110px;}
.profile-section-card{padding:28px;border-radius:28px;background:linear-gradient(145deg,rgba(20,30,44,.92),rgba(11,16,24,.96));border:1px solid rgba(73,96,124,.48);box-shadow:0 22px 70px rgba(0,0,0,.24);}
.logo-upload-preview{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035);}
.logo-upload-preview .dj-logo-lockup{flex:0 0 auto;}
@media (max-width:1100px){.dj-premium-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.search-layout-pro{grid-template-columns:1fr;}.search-panel-sticky,.profile-side-card{position:static;}.profile-hero-pro-card{grid-template-columns:150px 1fr;}.profile-actions-pro{grid-column:1/-1;justify-content:flex-start;}.profile-photo-hero-pro{width:150px;height:150px;border-radius:32px;}.profile-body-pro{grid-template-columns:1fr;}}
@media (max-width:680px){.dj-premium-grid{grid-template-columns:1fr;}.dj-premium-card{min-height:300px;padding:22px!important;}.dj-card-photo{width:82px;height:82px;border-radius:24px;}.dj-card-logo-zone{max-width:58%;}.profile-hero-pro-card{grid-template-columns:1fr;padding:22px;border-radius:26px;}.profile-photo-hero-pro{width:132px;height:132px;border-radius:30px;}.profile-title-line h1{font-size:34px;}.profile-pro-stats{grid-template-columns:1fr;}.profile-actions-pro .btn-action{width:100%;}.search-results-head{display:block;}.dj-logo-lg{font-size:13px;}.profile-section-card{padding:22px;border-radius:24px;}}


/* =========================================================
   SLICK DJ DIRECTORY + FEATURED CARD REDESIGN
   Fixes search page cornering and upgrades DJ card presentation.
   ========================================================= */
#search-shell.page-shell.with-sidebar{display:block;min-height:calc(100vh - 76px);} 
#search-shell.page-shell.with-sidebar .dash-sidebar{display:none!important;}
#search-shell.page-shell.with-sidebar .page-main{padding:0!important;width:100%;min-width:0;}
.search-discovery-section{padding:64px 0 88px;overflow:hidden;}
.search-discovery-section:before{content:"";position:absolute;inset:0;background:radial-gradient(900px circle at 84% 0%,rgba(93,169,255,.10),transparent 54%),radial-gradient(760px circle at 8% 18%,rgba(200,169,107,.12),transparent 48%);pointer-events:none;}
.search-hero-pro{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:42px;align-items:end;margin-bottom:36px;}
.search-hero-pro h1{font-size:clamp(42px,5.6vw,82px);letter-spacing:-.06em;line-height:.94;margin-bottom:20px;max-width:760px;}
.search-hero-copy .lede{max-width:560px;font-size:18px;line-height:1.7;}
.search-hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-self:stretch;}
.search-metric-card{padding:24px;border-radius:26px;background:linear-gradient(145deg,rgba(24,34,48,.78),rgba(10,14,20,.86));border:1px solid rgba(73,96,124,.42);box-shadow:0 22px 70px rgba(0,0,0,.24);}
.search-metric-card strong{display:block;font-size:34px;letter-spacing:-.04em;color:var(--text);line-height:1;}
.search-metric-card span{display:block;margin-top:8px;color:var(--text-faint);font-size:13px;font-weight:700;}
.search-layout-pro{display:grid!important;grid-template-columns:minmax(300px,360px) minmax(0,1fr)!important;gap:34px!important;align-items:start;width:100%;max-width:1500px;margin:0 auto;}
.search-results-area{min-width:0;width:100%;}
.search-panel-sticky{position:sticky;top:106px;min-width:0;}
.search-panel-sticky .card{border-radius:30px;background:linear-gradient(155deg,rgba(24,34,48,.96),rgba(10,14,20,.98));box-shadow:0 28px 100px rgba(0,0,0,.28);}
.search-results-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;min-width:0;}
.search-results-head .fee-private{flex:0 0 auto;}
.dj-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:22px;align-items:stretch;width:100%;min-width:0;}
.dj-directory-card{position:relative;display:flex!important;flex-direction:column;min-height:430px;padding:0!important;overflow:hidden;border-radius:32px;border:1px solid rgba(73,96,124,.52);background:linear-gradient(160deg,rgba(26,38,54,.98),rgba(9,13,20,.98));box-shadow:0 30px 90px rgba(0,0,0,.30);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.dj-directory-card:hover{transform:translateY(-5px);border-color:rgba(200,169,107,.52);box-shadow:0 38px 110px rgba(0,0,0,.42),0 0 0 1px rgba(200,169,107,.12);}
.dj-directory-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 8%,rgba(200,169,107,.14),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 44%);pointer-events:none;}
.dj-directory-card-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:30px;}
.dj-directory-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:26px;}
.dj-directory-photo{width:112px;height:112px;border-radius:34px;object-fit:cover;border:1px solid rgba(255,255,255,.16);background:#101722;box-shadow:0 22px 70px rgba(0,0,0,.42);}
.dj-directory-logo{display:flex;justify-content:flex-end;max-width:55%;}
.dj-directory-name{display:block;font-size:30px;font-weight:900;letter-spacing:-.055em;line-height:1.02;color:var(--text);margin-bottom:8px;}
.dj-directory-location{color:var(--text-faint);font-weight:700;font-size:14px;margin-bottom:18px;}
.dj-directory-bio{color:var(--text-dim);font-size:14.5px;line-height:1.62;margin:0 0 20px;min-height:70px;}
.dj-directory-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:auto;}
.dj-directory-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);}
.dj-directory-stat strong{display:block;color:var(--text);font-size:22px;line-height:1;font-weight:900;letter-spacing:-.03em;}
.dj-directory-stat span{display:block;color:var(--text-faint);font-size:12px;margin-top:5px;font-weight:700;}
.dj-directory-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;}
.dj-directory-foot .rating-stars{white-space:nowrap;}
.private-quote-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 12px;background:rgba(200,169,107,.12);border:1px solid rgba(200,169,107,.28);color:var(--gold-soft);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.private-quote-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(200,169,107,.11);}
.home-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
.home-featured-card{position:relative;display:grid!important;grid-template-columns:130px minmax(0,1fr);gap:28px;align-items:center;min-height:260px;padding:30px!important;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,rgba(26,38,54,.96),rgba(8,12,18,.98));border:1px solid rgba(73,96,124,.5);box-shadow:0 28px 90px rgba(0,0,0,.26);}
.home-featured-card:hover{transform:translateY(-4px);border-color:rgba(200,169,107,.50);}
.home-featured-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,rgba(200,169,107,.16),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%);pointer-events:none;}
.home-featured-photo{position:relative;z-index:1;width:128px;height:128px;border-radius:36px;object-fit:cover;border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 60px rgba(0,0,0,.38);background:#101722;}
.home-featured-info{position:relative;z-index:1;min-width:0;}
.home-featured-name{display:block;font-size:29px;font-weight:900;letter-spacing:-.055em;line-height:1.05;color:var(--text);margin:10px 0 8px;}
.home-featured-meta{color:var(--text-faint);font-weight:700;margin-bottom:16px;}
.home-featured-line{height:1px;background:rgba(255,255,255,.09);margin:20px 0;}
.home-featured-stats{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.home-featured-stats strong{display:block;font-size:19px;line-height:1;color:var(--text);}
.home-featured-stats span{font-size:12px;color:var(--text-faint);font-weight:700;}
.home-featured-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px;}
@media(max-width:1280px){.dj-directory-grid{grid-template-columns:repeat(2,minmax(280px,1fr));}.search-hero-pro{grid-template-columns:1fr}.search-hero-metrics{max-width:760px}.home-featured-grid{grid-template-columns:1fr}.home-featured-card{grid-template-columns:120px 1fr;}}
@media(max-width:980px){.search-discovery-section{padding:42px 0 68px}.search-layout-pro{grid-template-columns:1fr!important}.search-panel-sticky{position:static}.search-hero-metrics{grid-template-columns:1fr 1fr}.dj-directory-grid{grid-template-columns:1fr 1fr}.search-results-head{align-items:flex-start;flex-direction:column}.search-hero-pro h1{font-size:clamp(44px,10vw,70px);}}
@media(max-width:680px){.search-discovery-section{padding:32px 0 56px}.search-hero-pro{gap:24px;margin-bottom:26px}.search-hero-metrics{grid-template-columns:1fr}.search-metric-card{padding:18px;border-radius:22px}.dj-directory-grid{grid-template-columns:1fr}.dj-directory-card{min-height:0;border-radius:28px}.dj-directory-card-inner{padding:24px}.dj-directory-photo{width:92px;height:92px;border-radius:28px}.dj-directory-name{font-size:26px}.dj-directory-stats{grid-template-columns:repeat(3,1fr);gap:8px}.dj-directory-stat strong{font-size:18px}.dj-directory-foot{align-items:flex-start;flex-direction:column}.home-featured-card{grid-template-columns:1fr;gap:20px;padding:24px!important}.home-featured-photo{width:104px;height:104px;border-radius:30px}.home-featured-name{font-size:26px}}


/* =========================================================
   COMPACT DJ DIRECTORY + HOMEPAGE PREVIEW TIGHTENING
   Removes unused search hero stat cards and shortens DJ cards.
   ========================================================= */
.search-hero-pro{display:block!important;max-width:780px;margin:0 0 32px!important;}
.search-hero-metrics{display:none!important;}
.search-layout-pro{grid-template-columns:minmax(300px,350px) minmax(0,1fr)!important;gap:28px!important;max-width:1480px!important;}
.search-results-head{margin-bottom:16px!important;}
.dj-directory-grid{grid-template-columns:repeat(3,minmax(280px,1fr))!important;gap:18px!important;}
.dj-directory-card.compact-dj-result{min-height:0!important;border-radius:26px!important;}
.dj-directory-card.compact-dj-result .dj-directory-card-inner{padding:22px!important;}
.dj-compact-head{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:14px;}
.dj-directory-card.compact-dj-result .dj-directory-photo{width:86px!important;height:86px!important;border-radius:24px!important;}
.dj-compact-main{min-width:0;}
.dj-compact-main .dj-logo-lockup{margin-bottom:7px;}
.dj-directory-card.compact-dj-result .dj-directory-name{font-size:24px!important;margin-bottom:5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dj-directory-card.compact-dj-result .dj-directory-location{margin-bottom:0!important;font-size:13px!important;}
.dj-compact-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-self:start;}
.dj-directory-card.compact-dj-result .dj-directory-bio{min-height:0!important;margin:0 0 14px!important;font-size:13.5px!important;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dj-directory-card.compact-dj-result .dj-directory-tags{margin-bottom:16px!important;}
.dj-compact-bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:15px;border-top:1px solid rgba(255,255,255,.09);}
.dj-compact-bottom .rating-stars{font-size:13px;white-space:nowrap;}
.mini-stat{font-size:12px;color:var(--text-faint);font-weight:800;background:rgba(255,255,255,.04);border:1px solid rgba(73,96,124,.38);border-radius:999px;padding:7px 10px;}
.mini-stat strong{color:var(--text);}
.dj-compact-bottom .private-quote-chip{margin-left:auto;font-size:10px;padding:7px 10px;}

.home-featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;}
.home-featured-card.home-featured-card-compact{grid-template-columns:92px minmax(0,1fr)!important;min-height:150px!important;padding:20px!important;border-radius:28px!important;gap:18px!important;}
.home-featured-card.home-featured-card-compact .home-featured-photo{width:92px!important;height:92px!important;border-radius:26px!important;}
.home-featured-card.home-featured-card-compact .home-featured-name{font-size:23px!important;margin:6px 0 4px!important;}
.home-featured-card.home-featured-card-compact .home-featured-meta{font-size:13px!important;margin-bottom:8px!important;}
.home-featured-logo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.home-featured-rating{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;}
.home-featured-card.home-featured-card-compact .rating-stars{font-size:13px;}
@media(max-width:1180px){.dj-directory-grid{grid-template-columns:repeat(2,minmax(280px,1fr))!important;}.home-featured-grid{grid-template-columns:1fr!important;}.home-featured-card.home-featured-card-compact{max-width:620px;}}
@media(max-width:980px){.search-layout-pro{grid-template-columns:1fr!important}.search-panel-sticky{position:static!important}.search-hero-pro{max-width:100%!important}.dj-directory-grid{grid-template-columns:1fr!important}.home-featured-card.home-featured-card-compact{max-width:none;}}
@media(max-width:620px){.dj-compact-head{grid-template-columns:74px minmax(0,1fr);}.dj-compact-badges{grid-column:1/-1;justify-content:flex-start;}.dj-directory-card.compact-dj-result .dj-directory-photo{width:74px!important;height:74px!important;border-radius:22px!important;}.dj-compact-bottom .private-quote-chip{margin-left:0;}.home-featured-card.home-featured-card-compact{grid-template-columns:72px 1fr!important;padding:18px!important;}.home-featured-card.home-featured-card-compact .home-featured-photo{width:72px!important;height:72px!important;border-radius:22px!important;}.home-featured-card.home-featured-card-compact .home-featured-name{font-size:20px!important;}}


/* === FINAL HERO + SEARCH RESULTS FIX === */
.search-discovery-section{padding:56px 0 84px!important;}
.search-discovery-section .container-wide{max-width:1480px!important;width:min(1480px,calc(100% - 56px))!important;margin:0 auto!important;}
.search-hero-pro{display:block!important;margin:0 0 38px!important;max-width:none!important;}
.search-hero-copy{max-width:780px!important;}
.search-hero-pro h1{max-width:660px!important;font-size:clamp(54px,6.8vw,104px)!important;line-height:.9!important;letter-spacing:-.075em!important;margin-bottom:22px!important;}
.search-hero-copy .lede{max-width:640px!important;}
.search-layout-pro{display:grid!important;grid-template-columns:minmax(280px,360px) minmax(0,1fr)!important;gap:34px!important;align-items:start!important;width:100%!important;}
.search-panel-sticky{position:sticky!important;top:102px!important;min-width:0!important;}
.search-results-area{min-width:0!important;width:100%!important;}
.search-results-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:18px!important;gap:14px!important;}
.dj-directory-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;width:100%!important;min-width:0!important;}
.dj-directory-card.compact-dj-result{min-height:0!important;height:auto!important;display:block!important;border-radius:26px!important;overflow:hidden!important;background:linear-gradient(145deg,rgba(24,36,52,.98),rgba(8,12,18,.98))!important;}
.dj-directory-card.compact-dj-result .dj-directory-card-inner{padding:20px!important;height:auto!important;}
.dj-compact-head{display:grid!important;grid-template-columns:78px minmax(0,1fr) auto!important;gap:16px!important;align-items:center!important;margin-bottom:14px!important;}
.dj-directory-card.compact-dj-result .dj-directory-photo{width:78px!important;height:78px!important;border-radius:22px!important;}
.dj-compact-main{min-width:0!important;}
.dj-directory-card.compact-dj-result .dj-directory-name{font-size:25px!important;line-height:1!important;margin:4px 0 3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.dj-directory-card.compact-dj-result .dj-directory-location{font-size:13px!important;margin:0!important;}
.dj-compact-badges{display:flex!important;gap:7px!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;}
.dj-directory-card.compact-dj-result .dj-directory-bio{margin:0 0 13px!important;min-height:0!important;font-size:13.5px!important;line-height:1.5!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.dj-directory-card.compact-dj-result .dj-directory-tags{margin-bottom:14px!important;gap:7px!important;}
.dj-compact-bottom{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;padding-top:14px!important;border-top:1px solid rgba(255,255,255,.08)!important;}
.dj-compact-bottom .private-quote-chip{margin-left:auto!important;font-size:10px!important;padding:7px 10px!important;}
.mini-stat{font-size:12px!important;color:var(--text-dim)!important;font-weight:800!important;}
.mini-stat strong{color:var(--text)!important;}
.empty-state{grid-column:1/-1;padding:34px;border:1px solid rgba(73,96,124,.45);border-radius:24px;background:rgba(20,29,41,.72);color:var(--text-dim);}

.hero-dj-card.hero-dj-card-pro{padding:0!important;border-radius:34px!important;overflow:hidden!important;max-width:500px;margin-left:auto;}
.hero-dj-card-pro .hero-dj-card-inner{display:block!important;padding:28px!important;}
.hero-profile-showcase{display:grid;grid-template-columns:116px minmax(0,1fr);gap:22px;align-items:center;margin-bottom:22px;}
.hero-dj-card-pro .hero-dj-photo-wrap{margin:0!important;}
.hero-dj-card-pro .hero-dj-photo{width:116px!important;height:116px!important;border-radius:32px!important;object-fit:cover!important;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 70px rgba(0,0,0,.35);}
.hero-dj-label{font-size:11px!important;text-transform:uppercase;letter-spacing:.16em;color:rgba(230,210,169,.82);font-weight:900;margin-bottom:8px;}
.hero-dj-card-pro #hero-dj-name{display:block;font-size:34px;line-height:1;letter-spacing:-.06em;margin:6px 0;color:var(--text);}
.hero-dj-card-pro .hero-dj-tagline{font-size:15px!important;line-height:1.55!important;margin:0 0 18px!important;color:var(--text-dim);}
.hero-dj-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.09);}
.hero-dj-mini-stat{border-radius:18px;background:rgba(8,13,19,.55);border:1px solid rgba(73,96,124,.32);padding:14px;}
.hero-dj-mini-stat strong{display:block;font-size:20px;color:var(--text);line-height:1;font-weight:900;}
.hero-dj-mini-stat span{display:block;margin-top:6px;font-size:11px;color:var(--text-faint);font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.hero-dj-card-pro .hero-dj-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.hero-dj-card-pro .btn{min-height:44px;}

@media(max-width:1180px){
  .search-layout-pro{grid-template-columns:1fr!important;}
  .search-panel-sticky{position:static!important;}
  .search-panel-sticky{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;}
}
@media(max-width:920px){
  .search-discovery-section .container-wide{width:min(100% - 32px,1480px)!important;}
  .dj-directory-grid{grid-template-columns:1fr!important;}
  .hero-dj-card.hero-dj-card-pro{max-width:none;margin-left:0;}
}
@media(max-width:680px){
  .search-discovery-section{padding:34px 0 60px!important;}
  .search-hero-pro h1{font-size:clamp(44px,14vw,68px)!important;}
  .search-panel-sticky{grid-template-columns:1fr!important;}
  .dj-compact-head{grid-template-columns:70px minmax(0,1fr)!important;}
  .dj-compact-badges{grid-column:1/-1!important;justify-content:flex-start!important;}
  .dj-directory-card.compact-dj-result .dj-directory-photo{width:70px!important;height:70px!important;border-radius:20px!important;}
  .dj-compact-bottom .private-quote-chip{margin-left:0!important;}
  .hero-profile-showcase{grid-template-columns:86px minmax(0,1fr);gap:16px;}
  .hero-dj-card-pro .hero-dj-card-inner{padding:22px!important;}
  .hero-dj-card-pro .hero-dj-photo{width:86px!important;height:86px!important;border-radius:24px!important;}
  .hero-dj-card-pro #hero-dj-name{font-size:26px;}
  .hero-dj-mini-grid{grid-template-columns:1fr 1fr;}
}


/* FINAL HOMEPAGE FEATURED DJ HERO REFINEMENT */
.hero .hero-grid{
  align-items:center;
  gap:clamp(42px,6vw,88px);
}
.hero-dj-card.hero-dj-card-pro{
  max-width:460px!important;
  width:100%;
  margin-left:auto!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 18% 10%, rgba(200,169,107,.13), transparent 28%),
    linear-gradient(145deg, rgba(18,26,38,.96), rgba(9,13,19,.98))!important;
  border:1px solid rgba(200,169,107,.28)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.hero-dj-card-pro .hero-dj-card-inner{
  padding:28px!important;
  display:block!important;
}
.hero-dj-card-pro .hero-dj-head{
  display:grid!important;
  grid-template-columns:104px minmax(0,1fr)!important;
  gap:20px!important;
  align-items:center!important;
  margin-bottom:18px!important;
}
.hero-dj-card-pro .hero-dj-photo-wrap{
  width:104px!important;
  height:104px!important;
  padding:0!important;
  margin:0!important;
  border-radius:28px!important;
  background:transparent!important;
  box-shadow:none!important;
  position:relative!important;
}
.hero-dj-card-pro .hero-dj-photo-wrap::before,
.hero-dj-card-pro .hero-dj-photo-wrap::after{
  display:none!important;
  content:none!important;
}
.hero-dj-card-pro .hero-dj-photo{
  width:104px!important;
  height:104px!important;
  border-radius:28px!important;
  object-fit:cover!important;
  display:block!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.34)!important;
}
.hero-dj-card-pro .hero-dj-info{min-width:0!important;}
.hero-dj-card-pro .hero-dj-label{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  border:1px solid rgba(200,169,107,.32)!important;
  background:rgba(200,169,107,.08)!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.18em!important;
  color:rgba(235,218,179,.9)!important;
  margin:0 0 10px!important;
}
.hero-dj-card-pro #hero-dj-logo .dj-logo-wordmark,
.hero-dj-card-pro .dj-logo-wordmark{
  margin:0 0 8px!important;
  transform:none!important;
}
.hero-dj-card-pro #hero-dj-name{
  display:block!important;
  font-size:32px!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  margin:0 0 7px!important;
  color:var(--text)!important;
}
.hero-dj-card-pro #hero-dj-meta{
  font-size:14px!important;
  line-height:1.35!important;
  color:var(--text-faint)!important;
}
.hero-dj-card-pro #hero-dj-badge{
  margin-top:10px!important;
  padding:8px 12px!important;
  font-size:11px!important;
}
.hero-dj-card-pro .hero-dj-tagline{
  max-width:none!important;
  font-size:16px!important;
  line-height:1.5!important;
  margin:0!important;
  padding:18px 0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  color:var(--text-dim)!important;
}
.hero-dj-mini-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 16px!important;
  padding:0!important;
  border-top:0!important;
}
.hero-dj-mini-stat{
  min-height:76px!important;
  border-radius:18px!important;
  background:rgba(6,10,16,.58)!important;
  border:1px solid rgba(73,96,124,.34)!important;
  padding:14px 13px!important;
}
.hero-dj-mini-stat strong{
  font-size:22px!important;
  line-height:1!important;
}
.hero-dj-mini-stat span{
  font-size:10px!important;
  letter-spacing:.06em!important;
}
.hero-dj-card-pro .ai-insight{
  display:flex!important;
  gap:12px!important;
  align-items:center!important;
  margin:0 0 18px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:rgba(6,10,16,.54)!important;
  border:1px solid rgba(73,96,124,.34)!important;
}
.hero-dj-card-pro .ai-insight .icon-badge{flex:0 0 auto;width:34px;height:34px;}
.hero-dj-card-pro #hero-dj-insight{font-size:13.5px!important;line-height:1.45!important;color:var(--text)!important;}
.hero-dj-card-pro .hero-dj-actions{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-top:0!important;
}
.hero-dj-card-pro .hero-dj-actions .btn{
  min-height:44px!important;
  padding:0 18px!important;
  font-size:14px!important;
}

@media (max-width: 980px){
  .hero-dj-card.hero-dj-card-pro{margin:0!important;max-width:560px!important;}
}
@media (max-width: 560px){
  .hero-dj-card-pro .hero-dj-card-inner{padding:22px!important;}
  .hero-dj-card-pro .hero-dj-head{grid-template-columns:82px 1fr!important;gap:15px!important;}
  .hero-dj-card-pro .hero-dj-photo-wrap,
  .hero-dj-card-pro .hero-dj-photo{width:82px!important;height:82px!important;border-radius:22px!important;}
  .hero-dj-card-pro #hero-dj-name{font-size:25px!important;}
  .hero-dj-mini-grid{grid-template-columns:1fr 1fr 1fr!important;gap:8px!important;}
  .hero-dj-mini-stat{min-height:auto!important;padding:12px 10px!important;}
  .hero-dj-mini-stat strong{font-size:18px!important;}
  .hero-dj-card-pro .hero-dj-actions .btn{width:100%;justify-content:center;}
}

/* Live auth link spacing fix */
.auth-links-stack{margin-top:22px;padding-top:18px;border-top:1px solid rgba(58,78,105,.55);display:grid;gap:16px;text-align:center;}
.auth-recovery-link{display:inline-flex;align-items:center;justify-content:center;justify-self:center;color:#f6f7fb;text-decoration:none;font-weight:800;padding:10px 18px;border-radius:999px;border:1px solid rgba(214,177,94,.36);background:rgba(214,177,94,.08);}
.auth-recovery-link:hover{background:rgba(214,177,94,.16);}
.auth-secondary-links{display:grid;gap:10px;justify-items:center;}
.auth-secondary-links a{color:#c8d2df;text-decoration:none;font-weight:700;}
.auth-secondary-links a:hover{color:#fff;}
@media(max-width:640px){.auth-links-stack{gap:14px}.auth-secondary-links{gap:12px}.auth-secondary-links a{display:block;line-height:1.4}}

/* Live/auth routing fix mobile menu */
.mobile-nav-panel{position:fixed;inset:0;z-index:9999;background:rgba(3,6,10,.72);backdrop-filter:blur(10px);display:flex;justify-content:flex-end;padding:18px;}
.mobile-nav-card{width:min(360px,92vw);background:linear-gradient(145deg,#121a25,#080d13);border:1px solid rgba(58,78,105,.75);border-radius:22px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.45);display:grid;gap:10px;align-content:start;}
.mobile-nav-card a{display:block;padding:13px 14px;border-radius:14px;color:#eaf0f8;text-decoration:none;font-weight:800;border:1px solid rgba(58,78,105,.36);background:rgba(255,255,255,.025);}
.mobile-nav-card a:hover{background:rgba(214,177,94,.14);border-color:rgba(214,177,94,.45);}
.mobile-nav-card a.active{background:rgba(214,177,94,.18);border-color:rgba(214,177,94,.6);color:#fff;}
.mobile-nav-card{max-height:calc(100vh - 36px);overflow-y:auto;}
.mobile-nav-close{justify-self:end;width:38px;height:38px;border-radius:999px;background:#0d141e;border:1px solid #304055;color:#fff;font-size:22px;line-height:1;}
.mobile-nav-divider{height:1px;background:rgba(58,78,105,.6);margin:6px 0;}
@media(min-width:901px){.mobile-nav-panel{display:none}}

/* Restored auth confirmation popups */
.auth-success-modal{position:fixed;inset:0;z-index:10000;background:rgba(4,7,12,.74);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:22px;}
.auth-success-modal.is-visible{display:flex;}
.auth-success-modal[hidden]{display:none!important;}
.auth-success-card{width:min(540px,100%);background:linear-gradient(180deg,#17202b,#101720);border:1px solid rgba(200,169,107,.34);border-radius:28px;box-shadow:0 32px 90px rgba(0,0,0,.52);padding:34px;position:relative;text-align:center;}
.auth-success-close{position:absolute;right:18px;top:14px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(82,104,135,.8);background:rgba(255,255,255,.035);color:#f6f8fb;font-size:22px;line-height:1;cursor:pointer;}
.auth-success-icon{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(69,199,138,.14);border:1px solid rgba(69,199,138,.42);color:#7af0b1;font-weight:900;font-size:28px;}
.auth-success-icon.warning{background:rgba(216,178,110,.14);border-color:rgba(216,178,110,.42);color:#f2d28b;}
.auth-success-card h2{font-size:30px;margin:0 0 10px;color:#fff;}
.auth-success-card p{font-size:16px;line-height:1.65;margin:0;color:#cbd5e2;}
.auth-success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.auth-success-actions .btn{min-width:150px;justify-content:center;}
.auth-result-card{padding:48px 34px;}
@media(max-width:720px){.auth-success-card{padding:30px 22px;border-radius:24px;}.auth-success-actions .btn{width:100%;}.auth-result-card{padding:36px 22px;}}

/* ---------- AI Manager floating widget (DJ dashboard only) ---------- */
/* A small circular FAB by default (not a wide pill) so it never sits over
   page content — the label only shows as a hover tooltip. Shrinks further
   once the page has scrolled (see .is-scrolled, toggled in ai-assistant.js)
   and settles to a lower-opacity "parked" state until hovered/focused. */
#ai-manager-widget{position:fixed;right:22px;bottom:22px;z-index:9500;}
#ai-manager-toggle{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;border-radius:50%;
  border:1px solid rgba(200,169,107,.5);background:var(--gradient-brand);color:#0f1319;
  box-shadow:0 10px 26px rgba(0,0,0,.4);cursor:pointer;
  transition:transform .15s ease,width .2s ease,height .2s ease,opacity .2s ease;
}
#ai-manager-toggle:hover, #ai-manager-toggle:focus-visible{transform:translateY(-2px);opacity:1;}
#ai-manager-toggle svg{width:22px;height:22px;flex:none;}
#ai-manager-toggle span{display:none;}
#ai-manager-toggle.is-open{background:var(--surface-2);color:var(--text);border-color:var(--border-light);}
#ai-manager-toggle.is-scrolled:not(:hover):not(:focus-visible){width:40px;height:40px;opacity:.55;}
#ai-manager-toggle.is-scrolled:not(:hover):not(:focus-visible) svg{width:18px;height:18px;}
.ai-manager-panel{position:fixed;right:22px;bottom:88px;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));background:linear-gradient(180deg,#151d27,#0d131b);border:1px solid var(--border-light);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;z-index:9500;}
#ai-manager-panel[hidden]{display:none;}
.ai-manager-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);}
.ai-manager-head strong{font-family:var(--font-display);font-size:15px;}
.ai-manager-sub{font-size:12px;color:var(--text-faint);margin-top:3px;line-height:1.4;}
#ai-manager-close{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--border-light);background:var(--surface);color:var(--text);font-size:18px;line-height:1;cursor:pointer;}
.ai-manager-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0;}
.ai-bubble{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;word-wrap:break-word;}
.ai-bubble a{color:var(--purple-light);text-decoration:underline;}
.ai-bubble-assistant{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px;}
.ai-bubble-user{align-self:flex-end;background:var(--gradient-brand);color:#0f1319;border-bottom-right-radius:4px;font-weight:600;}
.ai-bubble-thinking{opacity:.6;font-style:italic;}
.ai-manager-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:rgba(255,255,255,.02);}
.ai-manager-form input{flex:1;background:var(--surface);border:1px solid var(--border-light);border-radius:999px;padding:9px 14px;color:var(--text);font-size:16px;}
.ai-manager-form input:focus{outline:none;border-color:var(--gold);}
@media(max-width:520px){
  #ai-manager-widget{right:14px;bottom:14px;}
  /* top/bottom insets (not vh/height) so the panel's actual height is
     whatever space is between those two edges of the REAL visible
     viewport — this is what keeps the close button and input reachable
     on mobile even when the browser's address bar/keyboard change how
     much of the screen is actually visible, which a fixed vh-based
     height can't account for. */
  .ai-manager-panel{left:10px;right:10px;top:16px;bottom:84px;width:auto;height:auto;}
}

/* AI Manager tool-call approval cards — nothing the assistant proposes
   executes until the DJ clicks Approve here. */
.ai-action-card{align-self:stretch;padding:12px 13px;border-radius:14px;background:rgba(200,169,107,.08);border:1px solid rgba(200,169,107,.32);font-size:13px;}
.ai-action-desc{color:var(--text);line-height:1.5;}
.ai-action-buttons{display:flex;gap:8px;margin-top:10px;}
.ai-action-buttons .btn{flex:1;}

/* Unread-count chip on the floating toggle button (proactive AI Manager
   recommendations — see #ai-manager-badge in ai-assistant.js). */
.ai-manager-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:10.5px;line-height:18px;text-align:center;font-weight:700;border:2px solid var(--bg,#0d131b);}
#ai-manager-toggle{position:relative;}

/* Proactive AI Manager recommendation cards — advisory nudges from the
   scheduled scan (backend/cron/ai_manager_scan.php), distinct from
   .ai-action-card above: no approve/decline, just a CTA link + a small
   dismiss (x). Shared between the floating widget's #ai-manager-recs
   container and the server-rendered "AI Manager Insights"/"Today's
   Priorities" cards on dj/dashboard.php and dj/ai.php — a priority-colored
   left border and a lighter tint than the surrounding .live-card give each
   nudge its own visual weight instead of blending into the card behind it. */
.ai-manager-recs{display:flex;flex-direction:column;gap:12px;padding:12px 14px;}
.ai-recommendation-card{
  position:relative;
  padding:14px 38px 14px 16px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.035);
  border:1px solid var(--border);
  border-left:3px solid var(--border-light);
  transition:border-color .15s ease,background .15s ease;
}
.ai-recommendation-card:hover{background:rgba(255,255,255,.055);}
.ai-recommendation-card.ai-rec-high{border-left-color:#fbbf24;}
.ai-recommendation-card.ai-rec-medium{border-left-color:#5eead4;}
.ai-recommendation-card.ai-rec-low{border-left-color:var(--border-light);}
.ai-rec-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px;}
.ai-rec-head .badge{font-size:10px;padding:3px 9px;font-weight:700;flex:none;}
.ai-rec-title{color:var(--text);font-size:13.5px;font-weight:700;line-height:1.35;}
.ai-rec-message{color:var(--text-dim);font-size:12.5px;line-height:1.55;}
.ai-rec-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;}
.ai-rec-actions .btn{font-size:12px;padding:6px 14px;}
.ai-rec-dismiss{
  position:absolute;top:10px;right:10px;width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:none;border-radius:50%;background:transparent;color:var(--text-faint);
  font-size:17px;line-height:1;cursor:pointer;
}
.ai-rec-dismiss:hover{background:var(--surface-hover);color:var(--text);}
@media(max-width:520px){.ai-manager-recs{padding:10px 12px;}.ai-recommendation-card{padding:13px 34px 13px 14px;}}

/* ---------- Password show/hide toggle ---------- */
.password-field-wrap{position:relative;}
.password-field-wrap input[type="password"],.password-field-wrap input[type="text"]{padding-right:44px;width:100%;}
.password-toggle-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:transparent;color:var(--text-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.password-toggle-btn:hover{color:var(--text);background:var(--surface-hover);}
.password-toggle-btn svg{width:19px;height:19px;}

/* ---------- Billing & Checkout layout ---------- */
.billing-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;}
.billing-summary-grid:has(.billing-current-card:only-child){grid-template-columns:1fr;}
.billing-current-card{display:flex;flex-direction:column;gap:4px;}
.billing-current-name{font-family:var(--font-display);font-size:26px;font-weight:800;margin:4px 0 14px;}
.billing-stat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--border);font-size:14px;}
.billing-stat-row:first-of-type{border-top:none;}
.billing-pay-card{display:flex;flex-direction:column;background:linear-gradient(155deg,rgba(200,169,107,.08),rgba(19,25,34,.98));border-color:rgba(200,169,107,.32);}
.billing-pay-amount{font-family:var(--font-display);font-size:34px;font-weight:800;margin:6px 0 18px;}
.billing-pay-amount span{font-size:15px;font-weight:600;color:var(--text-faint);}
.paypal-pay-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;}
.billing-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.billing-plan-card{display:flex;flex-direction:column;min-height:220px;}
.billing-plan-card.is-current{border-color:rgba(200,169,107,.5);box-shadow:var(--shadow-glow);}
.billing-plan-price{font-size:24px;font-weight:800;margin:8px 0;font-family:var(--font-display);}
.billing-plan-price span{font-size:14px;font-weight:600;color:var(--text-faint);}
@media(max-width:860px){.billing-summary-grid{grid-template-columns:1fr;}.billing-plans-grid{grid-template-columns:1fr;}}

/* ---------- Profile edit wizard ---------- */
.wizard-steps-header{display:flex;gap:4px;margin-bottom:28px;}
.wizard-step-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;}
.wizard-step-item::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0;}
.wizard-step-item:first-child::before{display:none;}
.wizard-step-item.done::before{background:var(--gold);}
.wizard-step-circle{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;z-index:1;color:var(--text-faint);}
.wizard-step-item.active .wizard-step-circle{background:var(--gradient-brand);color:#0f1319;border-color:transparent;}
.wizard-step-item.done .wizard-step-circle{background:rgba(200,169,107,.22);border-color:var(--gold);color:var(--gold-soft);}
.wizard-step-label{font-size:11.5px;color:var(--text-faint);text-align:center;}
.wizard-step-item.active .wizard-step-label{color:var(--text);font-weight:700;}
.wizard-step-eyebrow{display:inline-block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-soft);font-weight:700;margin-bottom:6px;}
.profile-wizard-card{padding:32px;}
.step{display:none;}
.step.active{display:block;animation:dscStepIn .25s ease;}
@keyframes dscStepIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:640px){.wizard-step-label{display:none;}.profile-wizard-card{padding:22px;}}

/* Circular avatar photo picker */
.photo-picker{display:flex;align-items:center;gap:18px;}
.photo-picker-circle{position:relative;width:96px;height:96px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border-light);overflow:hidden;cursor:pointer;flex:none;}
.photo-picker-circle img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-picker-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:var(--text-faint);}
.photo-picker-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .15s ease;}
.photo-picker-overlay svg{width:24px;height:24px;}
.photo-picker-circle:hover .photo-picker-overlay{opacity:1;}
.photo-picker-circle input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}

/* EPK dropzone + file grid */
.epk-dropzone{position:relative;border:1.5px dashed var(--border-light);border-radius:var(--radius-md);padding:22px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease;background:rgba(255,255,255,.015);}
.epk-dropzone:hover{border-color:var(--gold);background:rgba(200,169,107,.05);}
.epk-dropzone.has-file{border-color:var(--green);background:rgba(69,199,138,.06);}
.epk-dropzone svg{width:28px;height:28px;flex:none;color:var(--text-faint);}
.epk-dropzone input[type="file"]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.epk-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.epk-file-card{background:var(--card-flat, rgba(19,25,34,0.98));border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;position:relative;display:flex;flex-direction:column;}
.epk-file-thumb{display:block;width:100%;height:100px;background:var(--surface-2);}
.epk-file-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.epk-file-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--text-faint);letter-spacing:.04em;}
.epk-file-meta{padding:10px 12px;flex:1;}
.epk-file-meta strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.epk-file-card form{position:absolute;top:6px;right:6px;}
.epk-file-card .btn-danger{width:24px;height:24px;padding:0;line-height:1;border-radius:50%;font-size:15px;}

/* ---------- Date Blocker ---------- */
.date-block-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.date-block-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;}
.date-block-card.is-past{opacity:.55;}

/* ---------- Mobile: centered page info + breathing room around images ----------
   On phones, headings/intro copy on the public marketing pages now center
   themselves (instead of sitting left-aligned the way a wide desktop layout
   reads), and photographic images get real side padding + rounded corners
   instead of stretching flush to the screen edges. Scoped to pages outside
   the dashboard shell (.dash-shell) — DJ/promoter/admin dashboards stay
   left-aligned since centering forms, tables, and sidebars would look
   broken rather than "uniform". Avatars, logos, and DJ hero photos are
   excluded since those already have deliberate fixed circular/square
   sizing that shouldn't shrink further. */
@media (max-width: 640px) {
  body:not(:has(.dash-shell)) h1,
  body:not(:has(.dash-shell)) h2,
  body:not(:has(.dash-shell)) h3,
  body:not(:has(.dash-shell)) .eyebrow,
  body:not(:has(.dash-shell)) .lede {
    text-align: center;
  }
  body:not(:has(.dash-shell)) .section-tight > .container > p,
  body:not(:has(.dash-shell)) .container-narrow > p {
    text-align: center;
  }
  body:not(:has(.dash-shell))
    img:not(:where(.avatar-fallback, [class*="avatar"], [class*="photo"], [class*="logo"], [class*="icon"], [style*="height:100%"], [style*="height: 100%"])) {
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: var(--radius-md);
  }
  .brand-mark img { max-width: none; margin: 0; border-radius: 0; } /* logo mark must stay untouched */
}

/* Root-cause fix: dozens of dashboard/detail pages mark their multi-column
   layout grids with data-responsive-grid, expecting it to collapse to a
   single column on small screens — but no rule anywhere ever targeted
   that attribute, so every one of those pages stayed multi-column (and
   often overflowed) at every viewport width, including phones. This one
   rule is what those pages were always relying on. */
@media (max-width: 900px) {
  [data-responsive-grid] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .live-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* =========================================================
   Contract e-signature capture — draw pad + upload, used on
   dj/contract-detail.php and promoter/contract-detail.php.
   ========================================================= */
.sig-method-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.sig-method-tab {
  flex: 1; padding: 9px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700;
  text-align: center; background: var(--surface-2); border: 1px solid var(--border-light);
  color: var(--text-faint); cursor: pointer; transition: all .15s ease;
}
.sig-method-tab:hover { color: var(--text); border-color: var(--gold); }
.sig-method-tab.active { background: var(--gradient-brand-soft); border-color: var(--gold); color: var(--gold-soft); box-shadow: var(--shadow-glow); }

.sig-pane { display: none; }
.sig-pane.active { display: block; }

.sig-pad-frame {
  position: relative; height: 170px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--border-light); background: radial-gradient(circle at 50% 50%, rgba(200,169,107,0.06) 0%, rgba(0,0,0,0) 70%), #0d1319;
  cursor: crosshair; touch-action: none; overflow: hidden; transition: border-color .15s ease;
}
.sig-pad-frame:hover, .sig-pad-frame.has-ink { border-color: var(--gold); }
.sig-pad-frame canvas { display: block; }
.sig-pad-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--text-faint); letter-spacing: .04em; pointer-events: none; opacity: .7;
}
.sig-pad-frame.has-ink .sig-pad-hint { display: none; }

.sig-pad-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.sig-clear-btn { font-size: 12px; color: var(--text-faint); background: transparent; border: none; cursor: pointer; padding: 4px 0; }
.sig-clear-btn:hover { color: var(--gold-soft); }

.sig-upload-drop {
  height: 170px; border-radius: var(--radius-md); border: 1.5px dashed var(--border-light);
  background: #0d1319; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; text-align: center; padding: 16px; transition: border-color .15s ease;
}
.sig-upload-drop:hover, .sig-upload-drop.drag-over { border-color: var(--gold); }
.sig-upload-drop .sig-upload-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sig-upload-drop .sig-upload-hint { font-size: 12px; color: var(--text-faint); }
.sig-upload-preview { max-height: 140px; max-width: 100%; object-fit: contain; border-radius: 6px; }

.sig-legal-name-line {
  margin-top: 10px; font-size: 11.5px; color: var(--text-faint); font-style: italic; text-align: center;
}

/* How-To pages — numbered step rows (dj/how-to.php, promoter/how-to.php) */
.how-to-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.how-to-step:last-child { border-bottom: 0; }
.how-to-num {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 999px; background: var(--gradient-brand-soft); border: 1px solid var(--gold);
  color: var(--gold-soft); font-size: 12.5px; font-weight: 800; margin-top: 1px;
}