:root {
  color-scheme: light;
  --paper: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f2f2ee;
  --ink: #171717;
  --muted: #777773;
  --subtle: #a0a09a;
  --line: #e8e8e3;
  --accent: #b9f36a;
  --accent-strong: #96d949;
  --dark: #151515;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --page: 1320px;
  --shadow-soft: 0 16px 50px rgba(23, 23, 23, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 'DM Sans', Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(128, 184, 59, .55); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { min-height: 100vh; padding-bottom: 56px; }
.topbar { height: 72px; border-bottom: 1px solid var(--line); background: rgba(250,250,248,.96); display: flex; align-items: center; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); }
.topbar-inner { width: min(var(--page), calc(100% - 112px)); margin: auto; display: flex; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 800 17px/1 'Manrope', sans-serif; letter-spacing: -.065em; white-space: nowrap; }
.brand-mark { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; background: var(--ink); color: var(--accent); }
.brand-mark svg { width: 14px; height: 14px; }
.nav-links { display: flex; align-items: center; gap: 29px; flex: 1; }
.nav-link { color: #686863; font-size: 13px; font-weight: 500; height: 72px; display: flex; align-items: center; position: relative; cursor: pointer; transition: color .18s; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active::after { content: ''; height: 2px; position: absolute; bottom: 0; left: 0; right: 0; background: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: #5f5f5a; border-radius: 50%; cursor: pointer; transition: background .16s, color .16s, transform .16s; position: relative; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-1px); }
.icon-button.is-fav { color: #bb5360; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #d8d6cf; }
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; padding: 0 17px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: #c8fa7f; box-shadow: 0 4px 14px rgba(153,203,84,.22); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: #30302f; }
.btn-outline { background: transparent; border-color: #d9d9d2; color: var(--ink); }
.btn-outline:hover { background: #fff; border-color: #bfc0b6; }
.btn-ghost { background: transparent; color: #65655f; padding-inline: 11px; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-small { min-height: 34px; padding-inline: 12px; font-size: 12px; border-radius: 8px; }
.btn-wide { width: 100%; }
.mobile-menu, .mobile-nav { display: none; }
.main { width: min(var(--page), calc(100% - 112px)); margin: auto; }
.eyebrow { color: #71716b; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-dot { width: 6px; height: 6px; background: #97d54b; border-radius: 50%; }
.hero { padding: 64px 0 54px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr); gap: clamp(40px, 8vw, 110px); align-items: center; }
.hero-copy { padding: 4px 0 10px; }
.hero h1, .page-title { font: 600 clamp(42px, 4.7vw, 64px)/1.05 'Manrope', sans-serif; letter-spacing: -.065em; margin: 19px 0 18px; max-width: 660px; }
.hero-copy > p { color: #6e6e69; font-size: 16px; line-height: 1.65; max-width: 510px; margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 29px; }
.text-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #62625d; padding: 8px 4px; }
.text-action:hover { color: var(--ink); }
.text-action svg { width: 14px; height: 14px; }
.hero-note { color: #92928b; font-size: 11px; margin-top: 26px; display: flex; gap: 8px; align-items: center; }
.hero-note svg { width: 14px; height: 14px; }
.finder-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 12px 42px rgba(35,34,28,.055); }
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.panel-top h2 { margin: 0 0 5px; font: 600 17px/1.3 'Manrope', sans-serif; letter-spacing: -.035em; }
.panel-top p { margin: 0; font-size: 12px; color: var(--muted); }
.ai-spark { background: var(--accent); color: var(--ink); width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; flex: 0 0 auto; }
.ai-spark svg { width: 16px; height: 16px; }
.field-label { font-size: 11px; font-weight: 600; display: block; margin-bottom: 8px; }
.finder-tabs { display: flex; gap: 17px; border-bottom: 1px solid var(--line); margin: 19px 0 17px; }
.tab-button { border: 0; background: transparent; padding: 0 0 10px; color: #85857f; font-size: 11px; cursor: pointer; font-weight: 600; position: relative; }
.tab-button.active { color: var(--ink); }
.tab-button.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--ink); }
.input-row { display: flex; gap: 8px; }
.input-wrap { border: 1px solid #deded7; border-radius: 9px; display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 0 12px; background: #fff; flex: 1; min-width: 0; transition: border .16s, box-shadow .16s; }
.input-wrap:focus-within { border-color: #a6c977; box-shadow: 0 0 0 3px rgba(185,243,106,.2); }
.input-wrap svg { color: #86867f; width: 16px; height: 16px; flex: 0 0 auto; }
.input-wrap input { border: 0; outline: 0; width: 100%; min-width: 0; color: var(--ink); font-size: 11px; background: transparent; }
.input-wrap input::placeholder { color: #aaa9a2; }
.input-error { color: #a53c3c; font-size: 11px; margin: 7px 0 0; }
.upload-mini { border: 1px dashed #cecec6; min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-radius: 10px; }
.dropzone.drag-over, .upload-audio.drag-over, .upload-mini.drag-over { border-color: #8bae52; background: #f5faed; }
.upload-mini-copy { display: flex; align-items: center; gap: 12px; }
.upload-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: #66665f; }
.upload-icon svg { width: 16px; height: 16px; }
.upload-mini strong { display: block; font-size: 11px; margin-bottom: 2px; }
.upload-mini small, .support-note { color: #888881; font-size: 10px; }
.support-note { display: flex; gap: 6px; align-items: center; margin: 12px 0 15px; }
.support-note svg { width: 13px; height: 13px; color: #777770; }
.privacy-note { border-top: 1px solid #efefe9; padding-top: 12px; color: #898982; font-size: 10px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.privacy-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.section { padding: 37px 0 41px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.section-heading h2 { margin: 0 0 5px; font: 600 23px/1.25 'Manrope', sans-serif; letter-spacing: -.05em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; color: #5e5e58; font-size: 11px; font-weight: 600; white-space: nowrap; }
.link-arrow:hover { color: #171717; }
.link-arrow svg { width: 14px; height: 14px; }
.beat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.beat-card { min-width: 0; cursor: pointer; }
.artwork { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; position: relative; overflow: hidden; isolation: isolate; background: #343a39; transition: transform .28s ease; }
.artwork .cover-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.beat-card:hover .artwork { transform: translateY(-3px); }
.artwork::before, .artwork::after { content: ''; position: absolute; inset: 0; z-index: -1; }
.artwork::after { opacity: .46; background: linear-gradient(135deg, transparent 30%, rgba(0,0,0,.45)); }
.artwork .cover-type { position: absolute; left: 14px; right: 14px; bottom: 16px; color: rgba(255,255,255,.92); text-transform: uppercase; font: 700 10px/1.25 'Manrope', sans-serif; letter-spacing: .13em; }
.artwork .cover-title { position: absolute; left: 13px; top: 13px; color: rgba(255,255,255,.72); font: 700 8px/1 'Manrope', sans-serif; letter-spacing: .14em; }
.artwork .cover-mark { position: absolute; inset: 25%; border: 1px solid rgba(255,255,255,.46); transform: rotate(35deg); }
.artwork .cover-mark::before { content: ''; position: absolute; inset: 15%; border: 1px solid rgba(255,255,255,.32); }
.artwork .cover-mark::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.82); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.artwork-1::before { background: radial-gradient(ellipse at 65% 35%, #cfb098 0 8%, transparent 9%), radial-gradient(ellipse at 50% 58%, #d49d78 0 19%, transparent 20%), linear-gradient(135deg,#293532,#8d6b52 54%,#c5ad91); }
.artwork-2::before { background: radial-gradient(ellipse at 72% 29%,rgba(238,210,151,.85) 0 12%,transparent 13%), linear-gradient(130deg,#14352e,#567064 42%,#cad1b7); }
.artwork-3::before { background: radial-gradient(ellipse at 48% 52%,#bf4b29 0 13%, transparent 14%), radial-gradient(ellipse at 67% 35%,#e2a24e 0 5%,transparent 6%), linear-gradient(155deg,#1c262c,#432b30 55%,#d17c4e); }
.artwork-4::before { background: radial-gradient(ellipse at 40% 30%,#cbbce4 0 8%,transparent 9%), linear-gradient(135deg,#2f2841,#7672a0 50%,#d1b6b0); }
.artwork-5::before { background: radial-gradient(ellipse at 55% 42%,#d4c493 0 8%,transparent 9%), linear-gradient(160deg,#302b22,#907d5a 55%,#e1d4a1); }
.artwork-6::before { background: radial-gradient(ellipse at 30% 55%,#75b1a8 0 9%,transparent 10%), linear-gradient(135deg,#123d3e,#497f72 46%,#adcfad); }
.artwork-7::before { background: radial-gradient(ellipse at 58% 62%,#d49d83 0 11%,transparent 12%), linear-gradient(135deg,#342b34,#98635f 52%,#d0b9a5); }
.artwork-8::before { background: radial-gradient(ellipse at 51% 32%,#d7d7d1 0 7%,transparent 8%), linear-gradient(135deg,#262928,#5f6662 53%,#c5c0b1); }
.cover-play { position: absolute; right: 11px; bottom: 11px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent); color: #181818; display: grid; place-items: center; opacity: 0; transform: translateY(5px); transition: .2s; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cover-play svg { width: 15px; height: 15px; }
.beat-card:hover .cover-play, .cover-play.playing { opacity: 1; transform: translateY(0); }
.cover-fav { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: #43433e; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: .18s; }
.cover-fav svg { width: 15px; height: 15px; }
.beat-card:hover .cover-fav, .cover-fav.is-fav { opacity: 1; }
.cover-fav.is-fav { color: #b94f5c; }
.beat-meta { padding-top: 11px; display: flex; justify-content: space-between; gap: 10px; }
.beat-title { font-weight: 600; font-size: 12px; letter-spacing: -.01em; margin: 0 0 3px; }
.beat-producer { color: var(--muted); font-size: 10px; margin: 0; }
.beat-price { color: #41413d; font-size: 11px; font-weight: 600; white-space: nowrap; }
.beat-detail-meta { display: flex; gap: 7px; align-items: center; color: #878780; font-size: 9px; margin-top: 7px; }
.beat-detail-meta span + span::before { content: '·'; margin-right: 7px; color: #b2b2aa; }
.producer-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 55px; align-items: center; padding: 52px 0 57px; border-top: 1px solid var(--line); }
.producer-intro h2 { font: 600 34px/1.12 'Manrope', sans-serif; letter-spacing: -.06em; margin: 15px 0 11px; max-width: 400px; }
.producer-intro p { color: var(--muted); line-height: 1.7; font-size: 13px; max-width: 390px; margin: 0 0 20px; }
.producer-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.producer-preview { border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 13px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.producer-preview:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.producer-photo { width: 100%; height: 118px; object-fit: cover; object-position: center 36%; border-radius: 9px; background: #e4e1d8; }
.producer-preview h3 { font-size: 12px; margin: 10px 0 2px; }
.producer-preview p { color: var(--muted); font-size: 10px; margin: 0; }
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.tag { color: #696962; background: #f2f2ee; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 500; white-space: nowrap; }
.tag-verified { background: #edf6e1; color: #4b6930; }
.category-row { display: flex; gap: 9px; flex-wrap: wrap; padding-bottom: 49px; }
.category-pill { border: 1px solid #e0e0da; border-radius: 999px; padding: 9px 16px; font-size: 11px; color: #65655e; cursor: pointer; background: transparent; transition: .18s; }
.category-pill:hover, .category-pill.selected { background: var(--ink); color: white; border-color: var(--ink); }
.footer { background: #f3f3ef; border-top: 1px solid var(--line); }
.footer-inner { width: min(var(--page), calc(100% - 112px)); margin: auto; min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.footer-copy { color: #92928b; font-size: 10px; margin-top: 8px; }
.footer-links { display: flex; gap: 23px; color: #686862; font-size: 10px; }
.footer-links a:hover { color: #171717; }
.prototype-label { margin-left: auto; color: #92928b; font-size: 9px; }

/* Shared inner pages */
.page-shell { padding: 39px 0 58px; }
.breadcrumbs { color: #8b8b84; font-size: 10px; display: flex; gap: 7px; align-items: center; margin-bottom: 18px; }
.breadcrumbs > svg { display: none; }
.breadcrumbs button { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; }
.breadcrumbs button:hover { color: var(--ink); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.page-heading .page-title { font-size: clamp(36px, 4vw, 50px); margin: 10px 0 8px; }
.page-heading p { margin: 0; font-size: 13px; color: var(--muted); max-width: 550px; }
.subnav { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.subnav button { border: 0; background: none; color: #7c7c75; font-size: 11px; padding: 0 0 11px; cursor: pointer; position: relative; }
.subnav button.active { color: var(--ink); font-weight: 600; }
.subnav button.active::after { content: ''; position: absolute; bottom: -1px; height: 2px; left: 0; right: 0; background: var(--ink); }
.finder-page-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 34px; align-items: start; }
.reference-card { border: 1px solid var(--line); border-radius: 15px; background: #fff; padding: 21px; }
.reference-card h2 { font: 600 16px/1.3 'Manrope', sans-serif; margin: 0 0 4px; letter-spacing: -.03em; }
.reference-card > p { color: var(--muted); font-size: 11px; margin: 0 0 19px; }
.reference-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reference-option { border: 1px solid var(--line); padding: 14px; border-radius: 11px; min-width: 0; }
.reference-option.selected { border-color: #a3cc71; box-shadow: 0 0 0 2px rgba(185,243,106,.17); }
.option-title { font-size: 11px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.option-title svg { width: 15px; height: 15px; color: #73736d; }
.ref-input { width: 100%; border: 1px solid #deded7; border-radius: 8px; height: 38px; padding: 0 10px; font-size: 10px; outline: 0; }
.ref-input:focus { border-color: #a6c977; box-shadow: 0 0 0 3px rgba(185,243,106,.2); }
.ref-input::placeholder { color: #aaa9a2; }
.dropzone { border: 1px dashed #cdcdc6; background: #fbfbf9; border-radius: 9px; min-height: 92px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; cursor: pointer; transition: .18s; }
.dropzone:hover { border-color: #9aba68; background: #f8fbf2; }
.dropzone svg { width: 18px; height: 18px; display: block; margin: 0 auto 6px; color: #777770; }
.dropzone strong { display: block; font-size: 10px; }
.dropzone small { display: block; font-size: 9px; color: #8b8b84; margin-top: 2px; }
.reference-preview { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 13px; background: #f4f4f0; border-radius: 10px; }
.reference-thumb { width: 52px; height: 52px; border-radius: 7px; background: linear-gradient(130deg,#1e3237,#a9785a); flex: 0 0 auto; position: relative; overflow: hidden; }
.reference-thumb::before { content: ''; position: absolute; inset: 15%; border: 1px solid rgba(255,255,255,.5); transform: rotate(30deg); }
.reference-info { min-width: 0; flex: 1; }
.reference-info strong { display: block; font-size: 11px; }
.reference-info small { color: #797972; font-size: 10px; }
.reference-remove { color: #777770; }
.analysis-mini { margin-top: 12px; padding: 14px; border-radius: 10px; background: #f4f4ef; display: flex; align-items: center; gap: 12px; }
.analysis-mini .reference-thumb { width: 42px; height: 42px; }
.analysis-mini .waveform { height: 24px; flex: 1; display: flex; align-items: center; gap: 2px; opacity: .68; }
.waveform i { display: block; width: 2px; background: #5e6059; border-radius: 4px; }
.ref-success { border: 1px solid #dce8ca; background: #f8fbf3; margin-top: 12px; border-radius: 10px; padding: 13px; }
.ref-success-head { display: flex; align-items: flex-start; gap: 10px; }
.ref-success .check-mark { width: 23px; height: 23px; border-radius: 50%; background: #e1f1cd; display: grid; place-items: center; color: #4b7631; flex: 0 0 auto; }
.ref-success .check-mark svg { width: 13px; height: 13px; }
.ref-success strong { display: block; font-size: 11px; }
.ref-success p { margin: 2px 0 0; font-size: 10px; color: #75766e; }
.ref-success button { margin-left: auto; border: 0; background: transparent; color: #6f7666; font-size: 10px; text-decoration: underline; cursor: pointer; }
.ref-controls { margin-top: 19px; }
.ref-controls-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 11px; font-weight: 600; padding: 11px 0; border-top: 1px solid #edede8; }
.ref-controls-head span { display: flex; align-items: center; gap: 8px; }
.ref-controls-head svg { width: 14px; height: 14px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; padding: 8px 0 2px; }
.control-field label { display: block; font-size: 9px; color: #73736d; margin-bottom: 5px; }
.control-field select, .control-field input { border: 1px solid #e2e2db; background: #fff; border-radius: 7px; height: 34px; width: 100%; padding: 0 9px; font-size: 10px; color: #42423e; }
.control-field input[type=range] { padding: 0; accent-color: #86bd42; }
.ref-submit { margin-top: 17px; display: flex; justify-content: flex-end; }
.ref-submit .btn { min-width: 155px; }
.privacy-card { border: 1px solid var(--line); background: #f5f5f1; border-radius: 13px; padding: 17px; margin-top: 15px; }
.privacy-card h3 { font-size: 11px; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.privacy-card h3 svg { width: 14px; height: 14px; }
.privacy-card p { margin: 0; color: #797972; font-size: 10px; line-height: 1.55; }
.ai-side-note { padding: 15px 0 0; color: #808079; font-size: 10px; line-height: 1.6; }
.ai-side-note strong { color: #55554f; font-weight: 600; }
.result-summary { border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 18px 20px; display: flex; align-items: center; gap: 21px; margin-bottom: 24px; }
.result-ref-art { width: 60px; height: 60px; border-radius: 9px; background: linear-gradient(130deg,#193a41,#c48359); flex: 0 0 auto; position: relative; overflow: hidden; }
.result-ref-art::after { content: ''; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.45); transform: rotate(36deg); }
.result-desc { flex: 1; }
.result-desc small { text-transform: uppercase; color: #8a8a83; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.result-desc h3 { font: 600 15px 'Manrope',sans-serif; margin: 3px 0 4px; }
.result-desc p { color: #777770; font-size: 10px; margin: 0; }
.result-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.result-badges span { background: #f3f3ef; border-radius: 999px; font-size: 9px; padding: 5px 9px; color: #62625c; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.results-toolbar h2 { font: 600 18px 'Manrope',sans-serif; letter-spacing: -.04em; margin: 0; }
.results-toolbar select { border: 1px solid #deded7; background: #fff; border-radius: 7px; padding: 7px 10px; color: #55554f; font-size: 10px; }
.result-list { display: flex; flex-direction: column; gap: 9px; }
.result-row { border: 1px solid var(--line); background: white; border-radius: 11px; display: grid; grid-template-columns: 55px minmax(140px,1fr) minmax(170px,1.2fr) 70px 86px; gap: 15px; align-items: center; padding: 10px 13px; }
.result-row .artwork { width: 55px; border-radius: 7px; }
.result-row .cover-mark, .result-row .cover-title, .result-row .cover-type, .result-row .cover-fav { display: none; }
.result-row .cover-play { opacity: 1; transform: none; width: 27px; height: 27px; right: 4px; bottom: 4px; }
.result-row .cover-play svg { width: 12px; }
.result-title { font-size: 11px; font-weight: 600; margin: 0 0 3px; }
.result-producer { color: #777770; font-size: 10px; margin: 0; }
.match-explain { color: #777770; font-size: 10px; line-height: 1.45; }
.match-explain strong { color: #4e6037; font-weight: 600; }
.result-technical { font-size: 9px; color: #72726c; white-space: nowrap; }
.result-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.result-buy strong { font-size: 11px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-chip { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e0e0d9; background: #fff; border-radius: 8px; padding: 0 10px; color: #55554f; font-size: 10px; cursor: pointer; }
.filter-chip svg { width: 13px; height: 13px; }
.filter-chip.active { border-color: #a9c67e; background: #f3f8ea; color: #38452e; }
.market-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 30px; align-items: start; }
.filter-sidebar { border-right: 1px solid var(--line); padding-right: 22px; }
.filter-group { border-top: 1px solid var(--line); padding: 14px 0; }
.filter-group:first-child { border-top: 0; padding-top: 0; }
.filter-group-head { font-size: 10px; font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 10px; }
.filter-option { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #6f6f68; font-size: 10px; }
.filter-option input { accent-color: #171717; width: 13px; height: 13px; margin: 0; }
.filter-sidebar select { width: 100%; border: 1px solid #e1e1db; border-radius: 7px; padding: 8px; color: #62625d; font-size: 10px; background: #fff; }
.market-main .beat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 17px; }
.searchbar { min-height: 40px; border: 1px solid #deded7; background: white; border-radius: 9px; display: flex; align-items: center; gap: 9px; padding: 0 12px; min-width: 220px; }
.searchbar svg { width: 16px; height: 16px; color: #8b8b84; }
.searchbar input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 11px; }
.searchbar input::placeholder { color: #a3a39c; }
.producer-match-wrap { width: min(950px,100%); margin: auto; }
.match-intro { text-align: center; margin: 8px 0 26px; }
.match-intro h1 { font: 600 43px/1.12 'Manrope',sans-serif; letter-spacing: -.06em; margin: 0 0 8px; }
.match-intro p { margin: auto; color: var(--muted); font-size: 12px; }
.match-layout { display: grid; grid-template-columns: 220px minmax(0,520px) 160px; gap: 32px; align-items: center; justify-content: center; }
.match-preferences { border-top: 1px solid var(--line); padding-top: 16px; }
.match-preferences h3 { font-size: 10px; margin: 0 0 12px; }
.preference-line { font-size: 10px; color: #73736d; display: flex; gap: 8px; margin: 9px 0; align-items: flex-start; line-height: 1.4; }
.preference-line svg { width: 14px; height: 14px; color: #6b6b64; flex: 0 0 auto; }
.preference-card { background: #f3f3ef; border-radius: 10px; padding: 12px; color: #777770; font-size: 9px; line-height: 1.5; margin-top: 17px; }
.profile-card { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,.055); }
.profile-hero-photo { height: 230px; width: 100%; object-fit: cover; object-position: center 37%; background: #dedbd2; }
.profile-content { padding: 17px 19px 19px; }
.profile-name-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-name-line h2 { font: 600 19px 'Manrope',sans-serif; letter-spacing: -.04em; margin: 0; }
.profile-name-line small { color: #85857e; font-size: 10px; }
.profile-bio { color: #72726c; font-size: 10px; line-height: 1.6; margin: 7px 0 10px; }
.profile-label { color: #888880; font-size: 8px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; margin-top: 12px; }
.profile-beats { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.mini-cover { width: 29px; height: 29px; border-radius: 5px; }
.profile-beats span { color: #65655f; font-size: 9px; }
.profile-card-actions { display: flex; justify-content: center; align-items: center; gap: 13px; padding: 0 18px 17px; }
.round-action { width: 43px; height: 43px; display: grid; place-items: center; background: white; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: #65655f; transition: .18s; }
.round-action:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,.08); }
.round-action svg { width: 17px; height: 17px; }
.round-action.pass:hover { color: #bb5d61; border-color: #e4c5c4; }
.round-action.like { width: 49px; height: 49px; background: var(--accent); border-color: var(--accent); color: #222; }
.round-action.like svg { width: 19px; height: 19px; }
.match-next { color: #92928b; font-size: 9px; text-align: center; margin-top: 13px; }
.match-next strong { display: block; color: #61615b; font-size: 10px; margin-bottom: 3px; }
.profile-side-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-side-actions .btn { width: 100%; }
.profile-count { color: #96968e; text-align: center; font-size: 9px; margin-top: 11px; }
.profile-grid { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 45px; align-items: start; }
.public-profile-photo { width: 100%; height: 320px; object-fit: cover; border-radius: 14px; }
.profile-main h1 { font: 600 38px/1.1 'Manrope',sans-serif; letter-spacing: -.06em; margin: 8px 0 6px; }
.handle { color: #85857e; font-size: 11px; }
.profile-main .bio { color: #6f6f68; line-height: 1.7; font-size: 12px; max-width: 620px; }
.profile-statline { display: flex; gap: 30px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 19px 0; }
.profile-statline div { color: #85857e; font-size: 9px; }
.profile-statline strong { color: var(--ink); display: block; font-size: 14px; }
.profile-block { padding: 20px 0; border-bottom: 1px solid var(--line); }
.profile-block h2 { font: 600 17px 'Manrope',sans-serif; letter-spacing: -.03em; margin: 0 0 12px; }
.credits-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #efefe9; font-size: 10px; }
.credits-row:last-child { border-bottom: 0; }
.credits-row span { color: #82827a; }
.license-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 19px; }
.license-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; transition: .18s; position: relative; }
.license-card:hover { border-color: #b5c99b; transform: translateY(-2px); }
.license-card.selected { border: 1.5px solid #85ae4c; box-shadow: 0 0 0 3px rgba(185,243,106,.18); }
.license-card .tier-label { display: inline-flex; align-items: center; gap: 5px; color: #7c7c75; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.license-card h3 { font: 600 16px 'Manrope',sans-serif; margin: 6px 0; }
.license-card .tier-price { font: 600 20px 'Manrope',sans-serif; letter-spacing: -.04em; }
.license-card .tier-price small { font: 400 10px 'DM Sans',sans-serif; color: #7e7e77; letter-spacing: 0; }
.license-card ul { list-style: none; margin: 14px 0 0; padding: 0; color: #6e6e67; font-size: 9px; line-height: 1.7; }
.license-card li { display: flex; gap: 7px; margin: 5px 0; }
.license-card li svg { color: #567c35; width: 12px; height: 12px; flex: 0 0 auto; margin-top: 2px; }
.license-note { margin-top: 13px; color: #85857e; font-size: 10px; line-height: 1.55; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 410px; gap: 42px; align-items: start; }
.detail-main-art { max-width: 440px; }
.detail-main-art .artwork { border-radius: 16px; }
.detail-copy h1 { font: 600 36px 'Manrope',sans-serif; letter-spacing: -.06em; margin: 20px 0 4px; }
.detail-copy .producer-line { font-size: 11px; color: #797972; }
.detail-facts { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 18px 0; padding: 12px 0; }
.detail-facts div { font-size: 9px; color: #82827c; }
.detail-facts strong { display: block; font-size: 12px; color: #282825; margin-top: 2px; }
.detail-copy > p { color: #6f6f68; font-size: 11px; line-height: 1.7; }
.detail-buybox { border: 1px solid var(--line); border-radius: 14px; padding: 19px; background: #fff; position: sticky; top: 92px; }
.detail-buybox h2 { font: 600 16px 'Manrope',sans-serif; margin: 0 0 4px; }
.detail-buybox > p { color: #81817a; font-size: 10px; margin: 0 0 13px; }
.license-compact { border: 1px solid #e6e6e0; border-radius: 9px; padding: 11px 12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; margin: 7px 0; }
.license-compact.selected { border-color: #8db657; background: #fbfdf7; box-shadow: inset 0 0 0 1px #8db657; }
.license-compact strong { font-size: 10px; }
.license-compact small { color: #84847d; display: block; font-size: 9px; margin-top: 3px; }
.license-compact .price { font-size: 11px; font-weight: 600; }
.license-compact input { accent-color: #588034; }
.order-breakdown { border-top: 1px solid var(--line); margin-top: 13px; padding-top: 12px; display: flex; justify-content: space-between; font-size: 10px; }
.order-breakdown strong { font-size: 12px; }
.secure-note { color: #85857e; font-size: 9px; text-align: center; margin: 11px 0 0; }
.message-layout { height: 560px; display: grid; grid-template-columns: 290px minmax(0,1fr) 220px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.conversation-list { border-right: 1px solid var(--line); background: #fbfbf9; display: flex; flex-direction: column; min-width: 0; }
.conversation-list-head { padding: 18px 17px 12px; display: flex; justify-content: space-between; align-items: center; }
.conversation-list-head h2 { font: 600 16px 'Manrope',sans-serif; margin: 0; }
.conversation { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid #efefe9; cursor: pointer; transition: background .16s; }
.conversation:hover, .conversation.active { background: #f1f1ec; }
.conversation img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-copy strong { display: block; font-size: 10px; }
.conversation-copy span { display: block; color: #7e7e77; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.conversation time { color: #9a9a93; font-size: 8px; white-space: nowrap; }
.chat-panel { min-width: 0; display: flex; flex-direction: column; }
.chat-head { height: 60px; display: flex; align-items: center; gap: 9px; padding: 0 17px; border-bottom: 1px solid var(--line); }
.chat-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.chat-head strong { display: block; font-size: 10px; }
.chat-head small { display: block; color: #8c8c85; font-size: 9px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 19px; display: flex; flex-direction: column; gap: 12px; }
.chat-date { text-align: center; color: #9b9b94; font-size: 8px; margin: 4px 0 5px; }
.bubble { max-width: 73%; border-radius: 12px 12px 12px 3px; background: #f1f1ec; padding: 10px 12px; font-size: 10px; line-height: 1.55; color: #4d4d47; align-self: flex-start; }
.bubble.mine { border-radius: 12px 12px 3px 12px; background: #e9f5d9; align-self: flex-end; color: #34422b; }
.bubble time { display: block; color: #92928b; font-size: 8px; margin-top: 4px; text-align: right; }
.shared-beat { display: flex; gap: 9px; border: 1px solid #e1e1db; border-radius: 9px; padding: 8px; background: #fff; margin-top: 5px; cursor: pointer; }
.shared-beat .mini-cover { flex: 0 0 auto; }
.shared-beat strong { font-size: 9px; display: block; }
.shared-beat small { color: #888881; font-size: 8px; }
.chat-compose { padding: 12px 15px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.chat-compose input { flex: 1; border: 1px solid #e1e1db; border-radius: 8px; height: 37px; padding: 0 11px; font-size: 10px; outline: 0; }
.chat-compose input:focus { border-color: #a6c977; }
.chat-compose .icon-button { width: 33px; height: 33px; }
.participant-panel { border-left: 1px solid var(--line); padding: 17px; text-align: center; }
.participant-panel img { width: 61px; height: 61px; object-fit: cover; border-radius: 50%; margin: 9px auto; }
.participant-panel strong { display: block; font-size: 11px; }
.participant-panel small { color: #898982; font-size: 9px; }
.participant-panel .tag-row { justify-content: center; }
.participant-panel .btn { margin-top: 14px; }
.dashboard-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 34px; align-items: start; }
.dashboard-nav { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 18px; min-height: 500px; }
.dashboard-nav button { display: flex; align-items: center; gap: 9px; height: 36px; border: 0; background: transparent; border-radius: 7px; padding: 0 10px; text-align: left; color: #707069; font-size: 10px; cursor: pointer; }
.dashboard-nav button svg { width: 14px; height: 14px; }
.dashboard-nav button.active, .dashboard-nav button:hover { background: #efefea; color: var(--ink); }
.dash-content { min-width: 0; }
.dash-title-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 19px; }
.dash-title-row h2 { font: 600 19px 'Manrope',sans-serif; letter-spacing: -.04em; margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-bottom: 20px; }
.stat-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; }
.stat-card small { font-size: 9px; color: #808079; }
.stat-card strong { display: block; font: 600 21px 'Manrope',sans-serif; letter-spacing: -.04em; margin-top: 8px; }
.stat-card .trend { font-size: 8px; color: #58843b; margin-top: 3px; }
.dash-panel { border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 15px; margin-bottom: 14px; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-panel-head h3 { font: 600 12px 'Manrope',sans-serif; margin: 0; }
.dash-panel-head a, .dash-panel-head button { font-size: 9px; color: #75756e; background: none; border: 0; cursor: pointer; }
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table th { text-transform: uppercase; letter-spacing: .08em; color: #92928b; font-size: 8px; font-weight: 600; border-bottom: 1px solid var(--line); padding: 8px 6px; }
.table td { font-size: 9px; color: #5f5f59; padding: 10px 6px; border-bottom: 1px solid #f0f0eb; }
.table tr:last-child td { border-bottom: 0; }
.table .table-title { display: flex; align-items: center; gap: 8px; color: #272725; font-weight: 600; }
.table .mini-cover { width: 28px; height: 28px; flex: 0 0 auto; }
.status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 7px; font-size: 8px; background: #eaf3df; color: #527b36; }
.status.draft { background: #f2f1ec; color: #7d7d75; }
.seller-form { max-width: 720px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 19px; }
.seller-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field label { display: block; color: #64645e; font-size: 9px; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #e1e1db; border-radius: 7px; min-height: 36px; padding: 8px 10px; font-size: 10px; outline: 0; color: var(--ink); background: #fff; }
.form-field textarea { min-height: 77px; resize: vertical; }
.form-field.full { grid-column: 1/-1; }
.upload-audio { min-height: 86px; display: grid; place-items: center; text-align: center; border: 1px dashed #d4d4cc; border-radius: 9px; background: #fbfbf9; padding: 13px; cursor: pointer; }
.upload-audio svg { width: 17px; height: 17px; margin: auto auto 4px; color: #777770; }
.upload-audio strong { display: block; font-size: 10px; }
.upload-audio small { color: #85857e; font-size: 9px; }
.tier-config { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 13px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.tier-config .form-field input { min-height: 32px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); margin-top: 15px; padding-top: 13px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 45px; align-items: start; }
.checkout-main { max-width: 650px; }
.checkout-step { padding: 19px 0; border-bottom: 1px solid var(--line); }
.checkout-step h2 { font: 600 15px 'Manrope',sans-serif; margin: 0 0 13px; letter-spacing: -.03em; }
.checkout-beat { display: flex; align-items: center; gap: 14px; background: white; border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.checkout-beat .artwork { width: 60px; flex: 0 0 auto; border-radius: 7px; }
.checkout-beat h3 { font-size: 11px; margin: 0 0 3px; }
.checkout-beat p { color: #81817a; font-size: 9px; margin: 0; }
.checkout-beat > strong { margin-left: auto; font-size: 11px; }
.payment-choice { border: 1px solid #deded8; display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 11px; color: #65655f; font-size: 10px; }
.payment-choice input { accent-color: #171717; }
.payment-choice svg { width: 16px; height: 16px; }
.checkout-summary { border: 1px solid var(--line); border-radius: 12px; padding: 17px; background: white; position: sticky; top: 95px; }
.checkout-summary h3 { font: 600 14px 'Manrope',sans-serif; margin: 0 0 13px; }
.summary-line { display: flex; justify-content: space-between; color: #72726c; font-size: 10px; margin: 9px 0; }
.summary-line.total { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 13px; color: var(--ink); font-weight: 600; }
.summary-line.total strong { font-size: 14px; }
.checkout-terms { color: #85857e; font-size: 9px; line-height: 1.5; margin: 12px 0; }
.success-state { text-align: center; max-width: 500px; margin: 40px auto 70px; padding: 42px 30px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.success-state .success-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #e8f5d8; margin: 0 auto 17px; }
.success-state .success-icon svg { width: 22px; height: 22px; color: #517a33; }
.success-state h1 { font: 600 30px 'Manrope',sans-serif; letter-spacing: -.05em; margin: 0 0 8px; }
.success-state p { color: #7b7b74; font-size: 11px; line-height: 1.6; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(18,18,16,.45); display: grid; place-items: center; padding: 20px; animation: fadein .18s; }
.modal { width: min(430px, 100%); background: #fff; border-radius: 17px; padding: 25px; box-shadow: 0 25px 90px rgba(0,0,0,.2); position: relative; animation: rise .22s; }
.modal-close { position: absolute; top: 13px; right: 13px; }
.match-modal-art { display: flex; justify-content: center; margin: 7px 0 20px; }
.match-modal-art img { width: 82px; height: 82px; object-fit: cover; border-radius: 50%; border: 4px solid white; box-shadow: 0 0 0 2px #b9f36a; }
.match-modal-art img + img { margin-left: -19px; }
.modal h2 { text-align: center; font: 600 26px 'Manrope',sans-serif; letter-spacing: -.05em; margin: 0 0 8px; }
.modal > p { text-align: center; color: #777770; font-size: 11px; line-height: 1.6; margin: 0 0 20px; }
.modal-actions { display: flex; gap: 9px; }
.modal-actions .btn { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 29px; z-index: 120; transform: translate(-50%,15px); opacity: 0; pointer-events: none; background: #20201e; color: white; border-radius: 9px; padding: 10px 15px; font-size: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.17); transition: .25s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.audio-dock { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; background: #151515; color: #fff; padding: 10px 30px; display: grid; grid-template-columns: 1fr minmax(250px,1.3fr) 1fr; align-items: center; gap: 22px; box-shadow: 0 -6px 28px rgba(0,0,0,.12); }
.dock-track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dock-cover { width: 35px; height: 35px; border-radius: 5px; flex: 0 0 auto; }
.dock-track-copy { min-width: 0; }
.dock-track-copy strong { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-track-copy small { color: #a4a49d; font-size: 8px; }
.dock-controls { display: flex; align-items: center; gap: 12px; justify-content: center; }
.dock-play { border: 0; width: 31px; height: 31px; background: white; color: #151515; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.dock-play svg { width: 14px; height: 14px; }
.dock-progress { display: flex; align-items: center; gap: 9px; width: min(310px,100%); font-size: 8px; color: #9a9a93; }
.dock-progress input { flex: 1; height: 3px; accent-color: var(--accent); }
.dock-extra { display: flex; justify-content: flex-end; align-items: center; gap: 13px; color: #ccc; font-size: 9px; }
.dock-extra svg { width: 15px; height: 15px; }
.spinner { width: 18px; height: 18px; border: 2px solid #ddd; border-top-color: #5e873a; border-radius: 50%; animation: spin .8s linear infinite; }
.analysis-stage { max-width: 490px; margin: 35px auto 65px; border: 1px solid var(--line); border-radius: 15px; background: #fff; padding: 27px; }
.analysis-stage h2 { font: 600 18px 'Manrope',sans-serif; margin: 0 0 4px; }
.analysis-stage > p { color: #81817a; font-size: 10px; margin: 0 0 20px; }
.stage-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #efefe9; color: #8b8b84; font-size: 11px; }
.stage-row.done { color: #557a38; }
.stage-row.current { color: #272725; font-weight: 600; }
.stage-indicator { width: 19px; height: 19px; border: 1px solid #d4d4cc; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 9px; }
.stage-row.done .stage-indicator { background: #eaf4dc; border-color: #d9e9c4; }
.stage-row.done .stage-indicator svg { width: 11px; height: 11px; }
.stage-row.current .stage-indicator { border-color: #89b54e; }
.empty-state { text-align: center; border: 1px dashed #d8d8d1; border-radius: 12px; padding: 40px 20px; color: #7c7c75; }
.empty-state svg { width: 22px; height: 22px; margin: auto auto 12px; color: #73736c; }
.empty-state h3 { color: #343431; font: 600 16px 'Manrope',sans-serif; margin: 0 0 5px; }
.empty-state p { font-size: 10px; margin: 0 auto 15px; max-width: 350px; }
.modal-wide { width: min(520px, 100%); }
.modal-option-list { display: grid; gap: 6px; margin: 20px 0; max-height: 45vh; overflow: auto; }
.modal-option { border: 1px solid var(--line); border-radius: 9px; min-height: 42px; padding: 0 12px; background: #fff; color: #4d4d47; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font-size: 11px; cursor: pointer; }
.modal-option:hover, .modal-option.selected { background: #f4f8ed; border-color: #c6d9a8; color: #23251f; }
.modal-option svg { width: 15px; height: 15px; flex: 0 0 auto; }
.modal-form { display: grid; gap: 13px; }
.modal-form .form-field { text-align: left; }
.modal-form .form-field span { display: block; color: #64645e; font-size: 10px; font-weight: 600; margin-bottom: 6px; }
.modal-form input, .modal-form select { width: 100%; border: 1px solid #e1e1db; border-radius: 7px; min-height: 38px; padding: 8px 10px; font-size: 11px; outline: 0; color: var(--ink); background: #fff; }
.modal-form .modal-actions { margin-top: 5px; }
.reference-url { display: block; max-width: 390px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: #777770; margin-top: 3px; }
.volume-control { display: flex; align-items: center; gap: 7px; }
.volume-control input { width: 72px; accent-color: var(--accent); }
[hidden] { display: none !important; }
.hidden { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(9px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 1120px) {
  .topbar-inner, .main, .footer-inner { width: calc(100% - 64px); }
  .topbar-inner { gap: 26px; }
  .nav-links { gap: 20px; }
  .hero { gap: 35px; grid-template-columns: 1fr minmax(350px,.85fr); }
  .beat-grid { gap: 16px; }
  .producer-section { gap: 32px; }
  .result-row { grid-template-columns: 52px minmax(120px,1fr) minmax(145px,1.1fr) 60px 75px; gap: 10px; }
  .message-layout { grid-template-columns: 240px minmax(0,1fr); }
  .participant-panel { display: none; }
}
@media (max-width: 800px) {
  .topbar { height: 64px; }
  .topbar-inner, .main, .footer-inner { width: calc(100% - 40px); }
  .topbar-inner { gap: 15px; }
  .nav-links { display: none; }
  .brand { margin-right: auto; }
  .nav-actions .icon-button:nth-child(2), .nav-actions .btn { display: none; }
  .mobile-menu { display: grid; }
  .mobile-nav { position: absolute; top: 63px; left: 0; right: 0; z-index: 29; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px 20px 14px; display: none; box-shadow: 0 12px 20px rgba(0,0,0,.04); }
  .mobile-nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 15px; }
  .mobile-nav button { border: 0; text-align: left; background: transparent; padding: 11px; font-size: 12px; color: #55554f; border-radius: 7px; }
  .mobile-nav button:hover { background: #f0f0eb; color: var(--ink); }
  .hero { padding: 44px 0 38px; grid-template-columns: 1fr; gap: 29px; }
  .hero h1 { max-width: 560px; font-size: clamp(42px,8vw,58px); }
  .hero-copy > p { max-width: 530px; font-size: 14px; }
  .finder-panel { max-width: 620px; }
  .beat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 16px; }
  .producer-section { grid-template-columns: 1fr; gap: 20px; padding: 39px 0; }
  .producer-intro h2 { font-size: 30px; }
  .producer-preview-grid { gap: 10px; }
  .producer-preview { padding: 9px; }
  .producer-photo { height: 125px; }
  .category-row { padding-bottom: 36px; }
  .footer-inner { min-height: 130px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 12px; padding: 22px 0; }
  .footer-links { flex-wrap: wrap; gap: 13px 19px; }
  .prototype-label { margin: 0; }
  .finder-page-grid { grid-template-columns: 1fr; gap: 15px; }
  .finder-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .privacy-card { margin: 0; }
  .ai-side-note { padding: 10px; }
  .market-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .market-main .beat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .match-layout { grid-template-columns: minmax(0,520px); gap: 20px; }
  .match-preferences { display: none; }
  .profile-side-actions { flex-direction: row; justify-content: center; }
  .profile-side-actions .btn { width: auto; }
  .profile-count { margin-top: 6px; }
  .profile-grid { grid-template-columns: 210px minmax(0,1fr); gap: 25px; }
  .public-profile-photo { height: 260px; }
  .detail-layout { grid-template-columns: minmax(0,1fr) 330px; gap: 25px; }
  .license-grid { gap: 8px; }
  .license-card { padding: 12px; }
  .message-layout { height: 600px; grid-template-columns: 210px minmax(0,1fr); }
  .dashboard-layout { grid-template-columns: 150px minmax(0,1fr); gap: 20px; }
  .checkout-layout { grid-template-columns: minmax(0,1fr) 290px; gap: 20px; }
  .audio-dock { grid-template-columns: minmax(130px,1fr) 1.5fr auto; padding: 9px 15px; gap: 12px; }
  .dock-extra { display: none; }
}
@media (max-width: 560px) {
  .topbar-inner, .main, .footer-inner { width: calc(100% - 32px); }
  .topbar { height: 60px; }
  .mobile-nav { top: 59px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 21px; height: 21px; }
  .nav-actions { gap: 3px; }
  .nav-actions .icon-button { width: 33px; height: 33px; }
  .hero { padding: 35px 0 30px; }
  .hero h1 { font-size: 43px; margin: 15px 0 12px; }
  .hero-copy > p { font-size: 13px; }
  .hero-actions { gap: 8px; margin-top: 21px; }
  .hero-actions .btn { min-height: 40px; padding-inline: 13px; }
  .hero-note { margin-top: 17px; }
  .finder-panel { padding: 18px; border-radius: 14px; }
  .input-row { flex-direction: column; }
  .input-row .btn { width: 100%; }
  .section { padding: 29px 0 32px; }
  .section-heading { align-items: flex-start; margin-bottom: 16px; }
  .section-heading h2 { font-size: 20px; }
  .section-heading p { font-size: 10px; }
  .section-heading .link-arrow { padding-top: 5px; font-size: 10px; }
  .beat-grid { gap: 19px 11px; }
  .artwork { border-radius: 9px; }
  .artwork .cover-title { top: 8px; left: 8px; font-size: 7px; }
  .artwork .cover-type { left: 9px; bottom: 10px; font-size: 8px; }
  .cover-play { width: 30px; height: 30px; right: 6px; bottom: 6px; }
  .cover-fav { width: 27px; height: 27px; right: 5px; top: 5px; }
  .beat-meta { padding-top: 8px; }
  .beat-title { font-size: 10px; }
  .beat-producer { font-size: 9px; }
  .beat-price { font-size: 10px; }
  .beat-detail-meta { font-size: 8px; gap: 5px; }
  .beat-detail-meta span + span::before { margin-right: 5px; }
  .producer-intro h2 { font-size: 29px; }
  .producer-preview-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .producer-preview { padding: 7px; border-radius: 10px; }
  .producer-photo { height: 92px; border-radius: 7px; }
  .producer-preview h3 { font-size: 10px; margin-top: 7px; }
  .producer-preview p { font-size: 8px; }
  .producer-preview .tag-row { margin-top: 7px; }
  .producer-preview .tag { font-size: 7px; padding: 3px 6px; }
  .category-pill { padding: 8px 12px; font-size: 10px; }
  .footer-links { font-size: 9px; }
  .page-shell { padding-top: 25px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 21px; }
  .page-heading .page-title { font-size: 36px; }
  .page-heading p { font-size: 11px; }
  .reference-card { padding: 15px; }
  .reference-options { grid-template-columns: 1fr; }
  .control-grid { grid-template-columns: 1fr 1fr; }
  .finder-side { grid-template-columns: 1fr; }
  .results-toolbar h2 { font-size: 16px; }
  .result-summary { padding: 12px; gap: 11px; flex-wrap: wrap; }
  .result-ref-art { width: 46px; height: 46px; }
  .result-desc h3 { font-size: 12px; }
  .result-desc p { font-size: 9px; }
  .result-badges { width: 100%; }
  .result-badges span { font-size: 8px; }
  .result-row { grid-template-columns: 46px minmax(0,1fr) 68px; gap: 9px; padding: 8px; }
  .result-row .artwork { width: 46px; }
  .result-row .match-explain { display: none; }
  .result-technical { display: none; }
  .result-title { font-size: 10px; }
  .result-producer { font-size: 9px; }
  .result-buy .btn { min-height: 29px; padding: 0 8px; font-size: 9px; }
  .market-main .beat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .searchbar { min-width: 0; width: 100%; }
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .filter-chip { flex: 0 0 auto; }
  .match-intro { margin: 3px 0 20px; }
  .match-intro h1 { font-size: 33px; }
  .match-intro p { font-size: 10px; }
  .profile-hero-photo { height: 210px; }
  .profile-content { padding: 14px; }
  .profile-name-line h2 { font-size: 17px; }
  .profile-name-line small { font-size: 9px; }
  .profile-card-actions { padding-bottom: 14px; }
  .profile-grid { grid-template-columns: 1fr; gap: 15px; }
  .public-profile-photo { width: 100%; height: 250px; }
  .profile-main h1 { font-size: 32px; }
  .profile-statline { gap: 20px; }
  .license-grid { grid-template-columns: 1fr; }
  .license-card { padding: 15px; }
  .license-card ul { margin-top: 9px; }
  .detail-layout { grid-template-columns: 1fr; gap: 20px; }
  .detail-main-art { max-width: 100%; }
  .detail-copy h1 { font-size: 30px; }
  .detail-buybox { position: static; }
  .message-layout { height: calc(100vh - 200px); min-height: 450px; display: block; border: 0; background: transparent; }
  .conversation-list { display: none; }
  .chat-panel { height: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
  .chat-messages { padding: 13px; }
  .bubble { max-width: 84%; }
  .dashboard-layout { display: block; }
  .dashboard-nav { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; margin-bottom: 15px; flex-direction: row; overflow-x: auto; }
  .dashboard-nav button { flex: 0 0 auto; padding: 0 9px; font-size: 9px; }
  .stat-grid { gap: 7px; }
  .stat-card { padding: 10px; }
  .stat-card small { font-size: 8px; }
  .stat-card strong { font-size: 17px; }
  .stat-card .trend { font-size: 7px; }
  .dash-panel { overflow-x: auto; }
  .table { min-width: 440px; }
  .seller-form { padding: 13px; }
  .seller-form-grid { grid-template-columns: 1fr; }
  .form-field.full, .tier-config { grid-column: auto; }
  .tier-config { grid-template-columns: 1fr; }
  .form-actions { flex-wrap: wrap; }
  .checkout-layout { grid-template-columns: 1fr; gap: 14px; }
  .checkout-summary { position: static; }
  .success-state { margin: 20px auto 40px; padding: 30px 19px; }
  .audio-dock { grid-template-columns: minmax(90px,1fr) 1.4fr; padding: 8px 10px; gap: 8px; }
  .dock-cover { width: 30px; height: 30px; }
  .dock-track-copy strong { font-size: 9px; }
  .dock-track-copy small { font-size: 7px; }
  .dock-controls { gap: 7px; }
  .dock-progress { gap: 5px; font-size: 7px; }
  .dock-play { width: 28px; height: 28px; flex: 0 0 auto; }
  .dock-progress input { max-width: 90px; }
  .toast { bottom: 64px; font-size: 9px; }
}
.auth-modal { max-height: min(90vh, 820px); overflow-y: auto; }
.auth-modal > .eyebrow { display: flex; justify-content: center; margin: 2px auto 9px; }
.auth-modal h2 { margin-bottom: 7px; }
.auth-modal > p { margin-bottom: 17px; }
.auth-form { display: grid; gap: 11px; text-align: left; }
.auth-form .form-field label { font-size: 10px; }
.auth-form .form-field small, .profile-settings-form .form-field small { display: block; color: #85857e; font-size: 9px; margin-top: 4px; }
.auth-form .btn { margin-top: 4px; }
.auth-switch { text-align: center; font-size: 10px; color: #777770; margin-top: 15px; }
.auth-switch button { border: 0; background: none; padding: 0 0 0 4px; color: #30302d; text-decoration: underline; cursor: pointer; font-size: inherit; }
.auth-setup-note { border-radius: 8px; background: #f6f6f2; padding: 10px; color: #65655f !important; }
.auth-success { border-radius: 8px; background: #f0f7e7; padding: 10px; color: #435a2c !important; }
.account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.community-directory { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.community-card { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center; gap: 17px; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .18s, transform .18s; }
.community-card:hover { border-color: #c6d5b1; transform: translateY(-1px); }
.community-avatar { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: #777770; }
.community-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-avatar svg { width: 26px; height: 26px; }
.community-card-copy { min-width: 0; }
.community-card-copy .eyebrow { font-size: 8px; }
.community-card-copy h2 { margin: 3px 0 0; font: 600 16px/1.25 'Manrope',sans-serif; letter-spacing: -.03em; }
.community-handle { margin: 2px 0 0; color: #898982; font-size: 9px; }
.community-bio { max-width: 650px; margin: 6px 0 0; color: #696962; font-size: 10px; line-height: 1.55; }
.community-card .tag-row { margin-top: 7px; }
.community-profile-layout { max-width: 940px; margin: 0 auto; }
.public-profile-placeholder { height: 320px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: #777770; }
.public-profile-placeholder svg { width: 48px; height: 48px; }
.profile-settings-form { max-width: 720px; }
.profile-settings-form .dash-title-row { align-items: flex-start; }
.profile-settings-form .form-field label.filter-option { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.profile-settings-form .form-field label.filter-option input { width: 14px; height: 14px; min-height: auto; accent-color: #171717; }
.profile-settings-form .form-actions { gap: 8px; }
@media (max-width: 560px) {
  .community-card { grid-template-columns: 48px minmax(0,1fr); gap: 11px; padding: 12px; }
  .community-avatar { width: 48px; height: 48px; }
  .community-card > .btn { grid-column: 2; justify-self: start; }
  .community-card-copy h2 { font-size: 14px; }
  .community-card .tag { font-size: 8px; }
  .community-profile-layout { gap: 15px; }
  .community-profile-layout .public-profile-photo, .community-profile-layout .public-profile-placeholder { height: 230px; }
  .auth-modal { padding: 22px 17px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Uploaded covers replace the generated sample artwork. */
.artwork:has(.cover-image)::before, .artwork:has(.cover-image) .cover-mark { display: none; }