/* Producer Network — white minimal shelf aesthetic (matches index / beats) */

:root {
  --pn-bg: #f5f4f1;
  --pn-bg2: #eeecea;
  --pn-surface: #ffffff;
  --pn-ink: #0a0a0a;
  --pn-ink2: #555550;
  --pn-ink3: #999992;
  --pn-border: rgba(10, 10, 10, 0.09);
  --pn-border2: rgba(10, 10, 10, 0.17);
  --pn-accent: #00c97d;
  --pn-accent-bright: #00ff9d;
  --pn-font-disp: "Space Grotesk", "DM Sans", sans-serif;
  --pn-font-mono: "Space Mono", "DM Mono", monospace;
}

body.producer-network-shelf {
  background: var(--pn-bg) !important;
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-disp) !important;
}

body.producer-network-shelf.site-shell {
  padding-top: 0 !important;
}

body.producer-network-shelf #main-content {
  padding-top: calc(
    var(--studio-header-stack, 9.75rem) + env(safe-area-inset-top, 0px)
  ) !important;
}

/* ── Site header (match index shelf) ── */
body.producer-network-shelf #site-header.site-header-bar,
body.producer-network-shelf .site-header-bar {
  background: rgba(245, 244, 241, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.producer-network-shelf #site-header .shelf-header-inner {
  border-bottom: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .mobile-header-brand {
  font-family: var(--pn-font-mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .header-btn {
  font-family: var(--pn-font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  color: var(--pn-ink2) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 6px 12px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  transform: none !important;
}

body.producer-network-shelf .header-btn:hover {
  color: var(--pn-ink) !important;
  border-color: var(--pn-border2) !important;
  background: transparent !important;
  transform: none !important;
}

body.producer-network-shelf #producer-network-header-btn.header-btn {
  color: var(--pn-ink) !important;
  border-color: var(--pn-border2) !important;
  background: #fff !important;
}

body.producer-network-shelf #auth-btn.header-btn {
  border: 1px solid var(--pn-border2) !important;
  border-radius: 100px !important;
  color: var(--pn-ink) !important;
  background: #fff !important;
}

body.producer-network-shelf #disco-ball,
body.producer-network-shelf #settings-btn,
body.producer-network-shelf #header-tempo-toggle,
body.producer-network-shelf #coin-balance {
  display: none !important;
}

body.producer-network-shelf .tools-dropdown-panel {
  background: #fff !important;
  border: 1px solid var(--pn-border2) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

body.producer-network-shelf .tools-dropdown-panel a {
  font-family: var(--pn-font-mono) !important;
  font-size: 11px !important;
  color: var(--pn-ink2) !important;
  border-bottom-color: var(--pn-border) !important;
}

body.producer-network-shelf .tools-dropdown-panel a:hover {
  background: var(--pn-bg) !important;
  color: var(--pn-ink) !important;
}

/* ── Auth loading ── */
body.producer-network-shelf .auth-loading {
  background: var(--pn-bg) !important;
  color: var(--pn-ink3) !important;
}

body.producer-network-shelf .auth-loading::before {
  background:
    radial-gradient(circle at center, rgba(0, 201, 125, 0.06), transparent 55%),
    radial-gradient(circle at center, transparent 0 48%, rgba(245, 244, 241, 0.92) 78%, var(--pn-bg) 100%) !important;
  opacity: 1 !important;
}

body.producer-network-shelf .auth-loading-icon {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08)) !important;
}

/* ── App shell ── */
body.producer-network-shelf .app {
  background: var(--pn-bg) !important;
}

body.producer-network-shelf .top-bar {
  background: var(--pn-bg) !important;
  border-bottom: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .title {
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-disp) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body.producer-network-shelf .welcome-user {
  color: var(--pn-ink3) !important;
}

body.producer-network-shelf .welcome-user .welcome-name {
  color: var(--pn-accent) !important;
}

body.producer-network-shelf .home-link {
  color: var(--pn-ink) !important;
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  border-radius: 3px !important;
  font-family: var(--pn-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.producer-network-shelf .home-link:hover {
  border-color: var(--pn-ink) !important;
  background: var(--pn-bg2) !important;
}

body.producer-network-shelf .about-tool-btn {
  color: var(--pn-ink2) !important;
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  border-radius: 3px !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .about-tool-btn:hover {
  color: var(--pn-ink) !important;
  border-color: var(--pn-ink) !important;
  background: var(--pn-bg2) !important;
}

body.producer-network-shelf .workspace-pill {
  border: 1px solid var(--pn-border2) !important;
  background: var(--pn-bg2) !important;
  color: var(--pn-ink2) !important;
  font-family: var(--pn-font-mono) !important;
  border-radius: 3px !important;
}

body.producer-network-shelf .coin-pill {
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .streak-pulse {
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  color: var(--pn-accent) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .preview-banner {
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  color: var(--pn-ink2) !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .preview-banner strong {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .preview-banner .btn-link {
  background: var(--pn-ink) !important;
  color: var(--pn-bg) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: var(--pn-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.producer-network-shelf .preview-banner .btn-ghost {
  border: 1px solid var(--pn-border2) !important;
  background: var(--pn-bg) !important;
  color: var(--pn-ink2) !important;
  border-radius: 3px !important;
}

/* ── Cards & grid ── */
body.producer-network-shelf .card {
  background: var(--pn-surface) !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.producer-network-shelf .app.tier-1 .card.large,
body.producer-network-shelf .app.tier-2 .card.large,
body.producer-network-shelf .app.tier-3 .card.large {
  box-shadow: none !important;
}

body.producer-network-shelf .app.tier-2 .card.large {
  border-color: rgba(0, 201, 125, 0.35) !important;
}

body.producer-network-shelf .app.tier-3 .card.large {
  border-color: rgba(0, 201, 125, 0.45) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
}

body.producer-network-shelf .card-label {
  color: var(--pn-ink3) !important;
  font-family: var(--pn-font-mono) !important;
  letter-spacing: 0.12em !important;
}

body.producer-network-shelf .big-number {
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-disp) !important;
}

body.producer-network-shelf .big-label,
body.producer-network-shelf .challenge-hint,
body.producer-network-shelf .loading {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .level-scoreboard,
body.producer-network-shelf .card.large .idle-hero-head {
  border-color: var(--pn-border) !important;
}

body.producer-network-shelf .level-progress-meta,
body.producer-network-shelf .level-progress-track {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .level-progress-track {
  background: var(--pn-bg2) !important;
  border: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .level-progress-fill {
  background: var(--pn-ink) !important;
}

body.producer-network-shelf .global-lb-head {
  color: var(--pn-ink2) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .global-lb-hint {
  color: var(--pn-ink3) !important;
}

body.producer-network-shelf .global-lb-table {
  color: var(--pn-ink) !important;
  font-size: 12px !important;
}

body.producer-network-shelf .global-lb-table th {
  color: var(--pn-ink3) !important;
  font-family: var(--pn-font-mono) !important;
  border-bottom: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .global-lb-table td {
  border-bottom: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .global-lb-table tr.is-me td {
  color: var(--pn-ink) !important;
  font-weight: 600 !important;
}

/* Ring run */
body.producer-network-shelf .idle-tier,
body.producer-network-shelf .multiplier-pill {
  border: 1px solid var(--pn-border2) !important;
  background: var(--pn-bg) !important;
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .ring-vis-track {
  stroke: var(--pn-bg2) !important;
}

body.producer-network-shelf .ring-count strong,
body.producer-network-shelf .challenge-percent,
body.producer-network-shelf .ring-percent-readout {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .ring-count-caption,
body.producer-network-shelf .ring-reward-lead,
body.producer-network-shelf .ring-reward-line {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .ring-vis-check {
  color: var(--pn-accent) !important;
}

/* Stats */
body.producer-network-shelf .stat-key {
  color: var(--pn-ink3) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .stat-val {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .metric-tile {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 3px !important;
}

body.producer-network-shelf .metric-tile strong {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .metric-tile span {
  color: var(--pn-ink3) !important;
  font-family: var(--pn-font-mono) !important;
}

/* Contacts */
body.producer-network-shelf .contact-count,
body.producer-network-shelf .contact-card-label {
  color: var(--pn-ink3) !important;
}

body.producer-network-shelf .contact-toggle {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 3px !important;
}

body.producer-network-shelf .contact-toggle-btn {
  color: var(--pn-ink2) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .contact-toggle-btn.active {
  background: var(--pn-ink) !important;
  color: var(--pn-bg) !important;
}

body.producer-network-shelf .contact-item {
  border: 1px solid var(--pn-border) !important;
  background: #fff !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .contact-item:hover {
  border-color: var(--pn-border2) !important;
  background: var(--pn-bg) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

body.producer-network-shelf .contact-item[data-contact-type="artist"],
body.producer-network-shelf .contact-item[data-contact-type="producer"] {
  border-left-width: 3px !important;
}

body.producer-network-shelf .contact-name,
body.producer-network-shelf .contact-name a {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .contact-info,
body.producer-network-shelf .contact-meta,
body.producer-network-shelf .contact-notes {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .contact-chip {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  color: var(--pn-ink2) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .contact-notes-box {
  background: var(--pn-bg) !important;
  border: 1px solid var(--pn-border) !important;
  border-radius: 3px !important;
}

body.producer-network-shelf .contact-notes-label,
body.producer-network-shelf .contact-outcome-label {
  color: var(--pn-ink3) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .contact-outcome-actions {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
}

body.producer-network-shelf .contact-outcome-choice,
body.producer-network-shelf .contact-edit-btn {
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .contact-outcome-choice.active {
  background: var(--pn-bg2) !important;
  border-color: var(--pn-ink) !important;
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .contact-empty-state {
  color: var(--pn-ink3) !important;
}

/* Badges */
body.producer-network-shelf .badge-count-pill {
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .badge-tile {
  border: 1px solid var(--pn-border) !important;
  background: #fff !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .badge-tile .badge-short {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .badge-tile.locked {
  background: var(--pn-bg2) !important;
}

body.producer-network-shelf .badge-unlock-banner {
  border: 1px solid var(--pn-border2) !important;
  background: #fff !important;
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .badge-unlock-banner strong {
  color: var(--pn-ink) !important;
}

/* Playbook / mechanics */
body.producer-network-shelf .playbook-card .playbook-intro,
body.producer-network-shelf .mech-hero-streak,
body.producer-network-shelf .mech-hero-sub {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .mech-hero {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.producer-network-shelf .mech-list li,
body.producer-network-shelf .punish-list li {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .mech-pill {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .mech-pill strong {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .mech-pill small,
body.producer-network-shelf .mech-pill span:not(.mech-pill-ico) {
  color: var(--pn-ink3) !important;
}

body.producer-network-shelf .mech-status-banner {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .mech-status-banner strong {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .mech-status-body,
body.producer-network-shelf .danger-caption,
body.producer-network-shelf .danger-rule {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .mech-danger {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .danger-bar-wrap {
  background: var(--pn-bg2) !important;
  border: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .danger-bar {
  background: var(--pn-ink) !important;
}

body.producer-network-shelf .badges-hint {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .badge-detail-name {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .badge-detail-desc {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .badge-detail-status.unlocked {
  color: var(--pn-accent) !important;
}

body.producer-network-shelf .badge-detail-status.locked {
  color: var(--pn-ink3) !important;
}

/* Shop */
body.producer-network-shelf .shop-modal {
  background: rgba(10, 10, 10, 0.35) !important;
}

body.producer-network-shelf .shop-panel {
  background: #fff !important;
  border: 1px solid var(--pn-border2) !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
}

body.producer-network-shelf .shop-title,
body.producer-network-shelf .shop-section-title {
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .shop-title strong {
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .shop-close {
  color: var(--pn-ink2) !important;
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
}

body.producer-network-shelf .shop-card,
body.producer-network-shelf .shop-card--boost,
body.producer-network-shelf .shop-card--music {
  border: 1px solid var(--pn-border) !important;
  background: var(--pn-bg) !important;
  border-radius: 4px !important;
}

body.producer-network-shelf .shop-card strong,
body.producer-network-shelf .shop-meta,
body.producer-network-shelf .shop-product-desc,
body.producer-network-shelf .shop-boost-desc {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .shop-price {
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .shop-btn {
  background: var(--pn-ink) !important;
  color: var(--pn-bg) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: var(--pn-font-mono) !important;
}

body.producer-network-shelf .shop-btn:disabled {
  opacity: 0.45 !important;
}

body.producer-network-shelf .shop-player-track {
  background: var(--pn-bg2) !important;
  border: 1px solid var(--pn-border) !important;
}

body.producer-network-shelf .shop-player-fill {
  background: var(--pn-ink) !important;
}

body.producer-network-shelf .shop-player-btn {
  border: 1px solid var(--pn-ink) !important;
  background: #fff !important;
  color: var(--pn-ink) !important;
}

body.producer-network-shelf .shop-status {
  color: var(--pn-ink3) !important;
  font-family: var(--pn-font-mono) !important;
}

/* Modals & forms */
body.producer-network-shelf .modal-bg {
  background: rgba(10, 10, 10, 0.35) !important;
}

body.producer-network-shelf .modal {
  background: #fff !important;
  border: 1px solid var(--pn-border2) !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
}

body.producer-network-shelf .modal-title,
body.producer-network-shelf .form-label,
body.producer-network-shelf .about-modal-lead {
  color: var(--pn-ink) !important;
  font-family: var(--pn-font-disp) !important;
}

body.producer-network-shelf .about-modal-body {
  color: var(--pn-ink2) !important;
}

body.producer-network-shelf .form-input,
body.producer-network-shelf .contact-notes-inline-input {
  background: var(--pn-bg) !important;
  border: 1px solid var(--pn-border2) !important;
  color: var(--pn-ink) !important;
  border-radius: 3px !important;
}

body.producer-network-shelf .form-input:focus {
  border-color: var(--pn-ink) !important;
  background: #fff !important;
}

body.producer-network-shelf .form-input::placeholder {
  color: var(--pn-ink3) !important;
}

body.producer-network-shelf .btn-submit {
  background: var(--pn-ink) !important;
  color: var(--pn-bg) !important;
  border-radius: 3px !important;
  font-family: var(--pn-font-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.producer-network-shelf .btn-cancel {
  background: var(--pn-bg) !important;
  color: var(--pn-ink2) !important;
  border: 1px solid var(--pn-border2) !important;
}

body.producer-network-shelf .btn-delete-contact {
  border: 1px solid rgba(185, 28, 28, 0.35) !important;
  background: #fff !important;
  color: #b91c1c !important;
}

body.producer-network-shelf .floating-button {
  background: var(--pn-ink) !important;
  color: var(--pn-bg) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

body.producer-network-shelf .streak-toast {
  background: #fff !important;
  border: 1px solid var(--pn-border2) !important;
  color: var(--pn-ink) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

body.producer-network-shelf ::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.18) !important;
}

body.producer-network-shelf ::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.28) !important;
}

body.producer-network-shelf .shelf-site-footer a.hover\:text-white:hover {
  color: var(--pn-ink) !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  body.producer-network-shelf #main-content {
    padding-top: calc(
      var(--studio-header-stack, var(--shelf-header-stack, 13.5rem)) +
        env(safe-area-inset-top, 0px)
    ) !important;
  }

  body.producer-network-shelf .mobile-header-actions-track {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  body.producer-network-shelf .mobile-header-actions-track > .header-btn,
  body.producer-network-shelf #auth-btn.header-btn,
  body.producer-network-shelf #cart-header-btn.header-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  body.producer-network-shelf .main-grid {
    padding: 0.85rem 0.85rem calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.producer-network-shelf .top-bar {
    padding: 0.85rem 1rem !important;
  }

  body.producer-network-shelf .form-input {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  body.producer-network-shelf .floating-button {
    width: 52px !important;
    height: 52px !important;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (hover: none) {
  body.producer-network-shelf .contact-item:hover,
  body.producer-network-shelf .badge-tile:hover,
  body.producer-network-shelf .floating-button:hover {
    transform: none !important;
  }
}