/* JSI Distribute — Frontend shell (Phase 2/3)
   Brand: dark, rich purple base with bold gold accent — matches the JSI
   homepage and Artist Console reference. Glass panels, soft glow, gradient
   headings on gold. This intentionally replaces the earlier navy/gold pass
   now that the real brand direction is confirmed.

   Token system:
   --jsi-bg        #0a0512   near-black with a purple cast, page background
   --jsi-bg-alt    #120a1f   secondary background (deeper purple)
   --jsi-panel     glass surfaces — translucent white over the dark base
   --jsi-purple    #6d28d9   rich purple accent (secondary, used sparingly)
   --jsi-gold      #ffc600   primary accent — buttons, active states, focus
   --jsi-gold-dim  rgba(255,198,0,.12)
   --jsi-text      #ffffff
   --jsi-text-dim  rgba(255,255,255,.72)
   --jsi-text-soft rgba(255,255,255,.52)
   --jsi-line      rgba(255,255,255,.10)
   --jsi-success   #3ddc97
   --jsi-error     #ff5252
   Display face: Space Grotesk   Body face: Inter
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

.jsi-shell {
	--jsi-bg: #050505;
	--jsi-bg-alt: #090909;
	--jsi-panel: rgba(255,255,255,.045);
	--jsi-panel-hover: rgba(255,255,255,.07);
	--jsi-purple: #6d28d9;
	--jsi-purple-glow: rgba(124,92,255,.055);
	--jsi-gold: #ffc600;
	--jsi-gold-dim: rgba(255,198,0,.12);
	--jsi-gold-line: rgba(255,198,0,.35);
	--jsi-text: #ffffff;
	--jsi-text-dim: rgba(255,255,255,.72);
	--jsi-text-soft: rgba(255,255,255,.52);
	--jsi-line: rgba(255,255,255,.10);
	--jsi-success: #3ddc97;
	--jsi-success-soft: rgba(61,220,151,.12);
	--jsi-error: #ff5252;
	--jsi-error-soft: rgba(255,82,82,.12);

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--jsi-text);
	background:
		radial-gradient(circle at top, var(--jsi-purple-glow), transparent 40%),
		linear-gradient(180deg, var(--jsi-bg-alt), var(--jsi-bg));
	border: 1px solid var(--jsi-line);
	border-radius: 16px;
	overflow: hidden;
	max-width: 1080px;
	margin: 0 auto;
}

.jsi-shell h2, .jsi-shell h3 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 4px;
	background: linear-gradient(180deg, #fff 0%, var(--jsi-gold) 130%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.jsi-shell h3 { font-size: 16px; -webkit-text-fill-color: var(--jsi-text); background: none; }

.jsi-muted { color: var(--jsi-text-soft); font-size: 13px; }

.jsi-btn {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.jsi-btn:focus-visible { outline: 2px solid var(--jsi-gold); outline-offset: 2px; }
.jsi-btn-primary { background: var(--jsi-gold); color: #0a0512; box-shadow: 0 10px 30px rgba(255,198,0,.15); }
.jsi-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,198,0,.28); }
.jsi-btn-secondary { background: var(--jsi-panel); color: #fff; border-color: var(--jsi-line); backdrop-filter: blur(10px); }
.jsi-btn-secondary:hover { background: var(--jsi-panel-hover); border-color: var(--jsi-gold-line); }
.jsi-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Login prompt ─────────────────────────────────────────── */
.jsi-login-prompt { padding: 56px 24px; text-align: center; }
.jsi-login-prompt p { margin-bottom: 18px; color: var(--jsi-text-dim); }

/* ── Wizard shared shell (onboarding + release) ──────────────────────── */
.jsi-onboarding, .jsi-release-wizard { padding: 32px; }
.jsi-wizard-header { margin-bottom: 20px; }
.jsi-wizard-header h2 { font-size: 24px; }

.jsi-steps {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--jsi-line);
	margin-bottom: 24px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}
.jsi-steps::-webkit-scrollbar { display: none; }
.jsi-step-tab {
	background: none; border: none; cursor: pointer;
	font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
	color: var(--jsi-text-soft); white-space: nowrap;
	padding: 10px 13px; border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	flex: 0 0 auto; scroll-snap-align: center;
}
.jsi-step-tab.is-active { color: var(--jsi-gold); border-bottom-color: var(--jsi-gold); }
.jsi-step-tab.is-complete { color: var(--jsi-success); }
.jsi-step-tab:focus-visible { outline: 2px solid var(--jsi-gold); outline-offset: 2px; }

.jsi-step-panel, .jsi-wizard-body > .jsi-step-panel { display: none; animation: jsi-fade .18s ease; }
.jsi-step-panel.is-active { display: block; }
@keyframes jsi-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.jsi-field { margin-bottom: 18px; }
.jsi-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jsi-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--jsi-text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.jsi-field input[type=text], .jsi-field input[type=url], .jsi-field input[type=date],
.jsi-field select, .jsi-field textarea {
	width: 100%; font-family: inherit; font-size: 14px; padding: 11px 14px;
	border: 1px solid var(--jsi-line); border-radius: 10px;
	background: rgba(255,255,255,.03); color: var(--jsi-text);
	box-sizing: border-box;
}
.jsi-field select option { background: var(--jsi-bg-alt); color: var(--jsi-text); }
.jsi-field input::placeholder, .jsi-field textarea::placeholder { color: var(--jsi-text-soft); }
.jsi-field input:focus-visible, .jsi-field select:focus-visible, .jsi-field textarea:focus-visible {
	outline: none; border-color: var(--jsi-gold); box-shadow: 0 0 0 3px var(--jsi-gold-dim);
}
.jsi-radio-row { display: flex; gap: 20px; font-size: 13.5px; color: var(--jsi-text-dim); }
.jsi-radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; }

.jsi-field-hint { font-size: 12px; color: var(--jsi-text-soft); margin-top: 4px; }
.jsi-field-errors { margin-top: 8px; }
.jsi-field-errors .jsi-error-line { font-size: 12.5px; color: var(--jsi-error); margin-bottom: 4px; }
.jsi-error-line { font-size: 12.5px; color: var(--jsi-error); margin: 6px 0; }

/* Platform link inputs (Spotify/Apple Music/SoundCloud) get a small brand-colored dot */
.jsi-platform-field { position: relative; }
.jsi-platform-field label { display: flex; align-items: center; gap: 6px; }
.jsi-platform-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.jsi-platform-dot.spotify { background: #1DB954; }
.jsi-platform-dot.applemusic { background: #FA2D6E; }
.jsi-platform-dot.soundcloud { background: #FF7700; }

.jsi-photo-upload { display: flex; align-items: center; gap: 14px; }
.jsi-photo-upload img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--jsi-line); }
.jsi-photo-upload input[type=file] { display: none; }

.jsi-review-card {
	background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 14px; padding: 22px;
	backdrop-filter: blur(10px);
}

.jsi-wizard-nav {
	display: flex; align-items: center; gap: 12px; margin-top: 24px;
	padding: 18px 32px; border-top: 1px solid var(--jsi-line);
}
.jsi-save-indicator { flex: 1; text-align: center; font-size: 12px; color: var(--jsi-success); opacity: 0; transition: opacity .2s; }
.jsi-save-indicator.is-visible { opacity: 1; }
.jsi-save-indicator.is-error { color: var(--jsi-error); }

.jsi-notice { padding: 13px 16px; border-radius: 10px; font-size: 13px; margin-top: 16px; border: 1px solid transparent; }
.jsi-notice-success { background: var(--jsi-success-soft); color: var(--jsi-success); border-color: rgba(61,220,151,.3); }
.jsi-notice-warning { background: var(--jsi-gold-dim); color: var(--jsi-gold); border-color: var(--jsi-gold-line); }
.jsi-notice-error { background: var(--jsi-error-soft); color: var(--jsi-error); border-color: rgba(255,82,82,.3); }

/* ── Dashboard shell ──────────────────────────────────────── */
.jsi-dashboard { display: grid; grid-template-columns: 220px 1fr; min-height: 480px; }

.jsi-nav { background: rgba(0,0,0,.25); padding: 24px 0; border-right: 1px solid var(--jsi-line); }
.jsi-nav-brand {
	font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--jsi-gold); padding: 0 20px 20px;
}
.jsi-nav-item {
	display: block; padding: 11px 20px; font-size: 13.5px; font-weight: 500;
	color: var(--jsi-text-soft); text-decoration: none; border-left: 3px solid transparent;
}
.jsi-nav-item:hover { color: #fff; background: rgba(255,255,255,.03); }
.jsi-nav-item.is-active { color: var(--jsi-gold); border-left-color: var(--jsi-gold); background: var(--jsi-gold-dim); }
.jsi-nav-disabled { opacity: .35; cursor: default; pointer-events: none; }

.jsi-main { padding: 28px 32px; }
.jsi-main-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.jsi-main-header h2 { font-size: 22px; }
.jsi-badge { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.jsi-badge-role { background: var(--jsi-gold-dim); color: var(--jsi-gold); border: 1px solid var(--jsi-gold-line); }

/* ── Subscription status banner ──────────────────────────────────── */
.jsi-plan-banner {
	border: 1px solid var(--jsi-gold-line);
	background: linear-gradient(135deg, var(--jsi-gold-dim), rgba(255,255,255,.03));
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 20px;
}
.jsi-plan-banner-empty { border-color: var(--jsi-line); background: var(--jsi-panel); }
.jsi-plan-banner-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Bugfix: text was getting cut off (not wrapping) on narrow screens. Flex items
   default to min-width:auto, which stops their content from wrapping and lets
   it overflow the row instead — classic flexbox gotcha. min-width:0 lets the
   text box shrink and wrap normally within the flex row. */
.jsi-plan-banner-main > div:first-child { min-width: 0; flex: 1 1 240px; }
.jsi-plan-banner-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--jsi-text); }
.jsi-plan-banner-main .jsi-muted { margin: 4px 0 0; font-size: 12.5px; }
.jsi-plan-progress { width: 220px; max-width: 100%; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden; }
.jsi-plan-progress-fill { height: 100%; background: var(--jsi-gold); border-radius: 4px; }
.jsi-plan-upsell {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--jsi-gold-line);
	font-size: 12.5px; color: var(--jsi-text-dim);
}
.jsi-plan-upsell > span { flex: 1 1 200px; min-width: 0; }
.jsi-plan-upsell a { color: var(--jsi-gold); font-weight: 600; text-decoration: none; }
.jsi-plan-upsell a:hover { text-decoration: underline; }

.jsi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.jsi-card {
	background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 14px; padding: 18px;
	backdrop-filter: blur(10px); position: relative; overflow: hidden;
}
.jsi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--jsi-gold); opacity: .5; }
.jsi-card-label { display: block; font-size: 11.5px; color: var(--jsi-text-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.jsi-card-value { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; color: #fff; margin-bottom: 4px; }

.jsi-panel { background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 14px; padding: 20px 22px; backdrop-filter: blur(10px); }

.jsi-release-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.jsi-release-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--jsi-text-soft); padding: 8px 10px; border-bottom: 1px solid var(--jsi-line); }
.jsi-release-table td { padding: 10px; border-bottom: 1px solid var(--jsi-line); color: var(--jsi-text-dim); }
.jsi-status-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.jsi-status-pill.passed { background: var(--jsi-success-soft); color: var(--jsi-success); }
.jsi-status-pill.failed { background: var(--jsi-error-soft); color: var(--jsi-error); }
/* Card layout is the mobile alternative to the table below — hidden on desktop by default. */
.jsi-release-cards { display: none; }
.jsi-referral-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jsi-referral-code { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .08em; color: var(--jsi-gold); background: var(--jsi-gold-dim); border: 1px solid var(--jsi-gold-line); border-radius: 8px; padding: 8px 16px; }
.jsi-release-card { border: 1px solid var(--jsi-line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; background: rgba(255,255,255,.02); }
.jsi-release-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.jsi-release-card-top strong { min-width: 0; overflow-wrap: break-word; }
.jsi-status-draft, .jsi-status-awaiting_payment { background: rgba(255,255,255,.08); color: var(--jsi-text-dim); }
.jsi-status-pending, .jsi-status-processing { background: var(--jsi-gold-dim); color: var(--jsi-gold); }
.jsi-status-need_fix, .jsi-status-rejected, .jsi-status-taken_down { background: var(--jsi-error-soft); color: var(--jsi-error); }
.jsi-status-approved { background: var(--jsi-success-soft); color: var(--jsi-success); }
.jsi-status-takedown_requested { background: rgba(255,255,255,.1); color: #fff; }

/* ── Release wizard — type cards ─────────────────────────────────────── */
.jsi-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.jsi-type-card {
	background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 14px; padding: 24px 18px;
	cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left;
	color: #fff; transition: border-color .2s, transform .15s;
}
.jsi-type-card strong { font-family: 'Space Grotesk', sans-serif; font-size: 17px; }
.jsi-type-card:hover { border-color: var(--jsi-gold-line); transform: translateY(-2px); }
.jsi-type-card.is-selected { border-color: var(--jsi-gold); background: var(--jsi-gold-dim); }
.jsi-type-card.is-locked { opacity: .35; cursor: not-allowed; }
.jsi-type-card.is-locked:hover { transform: none; border-color: var(--jsi-line); }

/* ── Artist picker / autocomplete ────────────────────────────────────── */
.jsi-artist-picker { position: relative; }
.jsi-artist-results {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
	background: var(--jsi-bg-alt); border: 1px solid var(--jsi-line); border-radius: 10px;
	max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.jsi-artist-results.is-visible { display: block; }
.jsi-artist-result-item { padding: 10px 14px; font-size: 13.5px; cursor: pointer; color: var(--jsi-text-dim); }
.jsi-artist-result-item:hover { background: var(--jsi-gold-dim); color: var(--jsi-gold); }

/* ── Featured-artist repeater rows (capped at 3 in JS/PHP) ─────────────── */
.jsi-featured-row {
	background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 10px;
	padding: 12px 40px 12px 12px; margin-bottom: 10px;
}
.jsi-featured-row .jsi-featured-remove { position: absolute; top: 8px; right: 8px; }
#jsi-add-featured { margin-top: 4px; }

/* ── Track list / contributor list / ISRC list rows ──────────────────── */
.jsi-repeat-row {
	display: flex; align-items: center; gap: 10px; background: var(--jsi-panel);
	border: 1px solid var(--jsi-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.jsi-repeat-row input[type=text] { flex: 1; }
.jsi-repeat-row .jsi-track-num { font-family: 'Space Grotesk', sans-serif; color: var(--jsi-gold); font-size: 13px; width: 22px; text-align: center; }
/* Desktop contributor row: the role <select> has no explicit width of its
   own, so on wide viewports it was inheriting a much larger "auto" box than
   the name field's flex:1 could compete with — the row ended up almost all
   dropdown with the name input squeezed down to a sliver. Mobile already
   fixes this (stacked, both 100%) via the media query below; this gives the
   desktop side-by-side layout matching explicit sizing instead of relying
   on the select's default width. */
.jsi-contributor-row .jsi-c-name { flex: 2 1 220px; min-width: 160px; }
.jsi-contributor-row .jsi-c-role { flex: 1 1 200px; max-width: 260px; }
.jsi-repeat-remove {
	background: none; border: none; color: var(--jsi-text-soft); cursor: pointer; font-size: 18px; line-height: 1;
	padding: 4px 8px; border-radius: 6px;
}
.jsi-repeat-remove:hover { color: var(--jsi-error); background: var(--jsi-error-soft); }

/* ── Royalty split rows (wizard) ──────────────────────────────────────── */
/* ── Royalty split rows (wizard + dashboard modal) ────────────────────── */
/* .jsi-split-row also carries .jsi-repeat-row (display:flex) for the
   shared border/background/padding — this overrides that to a stacked
   layout specifically for split rows. The old single-line layout (role
   select + email + percentage + remove button all on one flex row with no
   wrapping) overflowed on a phone-width screen and effectively made the
   email field invisible/unusable — it was there in the DOM, just squeezed
   off-screen. Email now always gets its own full-width line first, so it
   can never be crowded out regardless of viewport width. */
.jsi-split-row { display: block; }
.jsi-split-row .jsi-split-email { width: 100%; margin-bottom: 8px; }
.jsi-split-row-controls { display: flex; align-items: center; gap: 10px; }
.jsi-split-row-controls .jsi-split-role { flex: 1; min-width: 0; }
.jsi-split-row-controls .jsi-split-pct { width: 76px; flex-shrink: 0; }
.jsi-split-row-controls .jsi-repeat-remove { flex-shrink: 0; }
.jsi-split-row select, .jsi-split-row input[type=email], .jsi-split-row input[type=number] {
	font-family: inherit; font-size: 13.5px; padding: 9px 12px;
	border: 1px solid var(--jsi-line); border-radius: 8px;
	background: rgba(255,255,255,.03); color: var(--jsi-text); box-sizing: border-box;
}
.jsi-split-row select option { background: var(--jsi-bg-alt); color: var(--jsi-text); }
.jsi-split-row input::placeholder { color: var(--jsi-text-soft); }
.jsi-split-row select:focus-visible, .jsi-split-row input:focus-visible {
	outline: none; border-color: var(--jsi-gold); box-shadow: 0 0 0 3px var(--jsi-gold-dim);
}
.jsi-split-remainder { margin-top: 12px; font-size: 12.5px; color: var(--jsi-text-dim); }

/* ── Audio upload rows ────────────────────────────────────────────────── */
.jsi-audio-row { background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.jsi-audio-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jsi-audio-row-head strong { font-size: 13.5px; font-weight: 600; }
.jsi-audio-meta { font-size: 12px; color: var(--jsi-text-soft); }
.jsi-audio-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.jsi-audio-status.pending { background: rgba(255,255,255,.08); color: var(--jsi-text-soft); }
.jsi-audio-status.passed { background: var(--jsi-success-soft); color: var(--jsi-success); }
.jsi-audio-status.failed { background: var(--jsi-error-soft); color: var(--jsi-error); }

/* ── Artwork dropzone ─────────────────────────────────────────────────── */
.jsi-artwork-dropzone {
	border: 1.5px dashed var(--jsi-line); border-radius: 16px; padding: 40px; text-align: center;
	cursor: pointer; transition: border-color .2s, background .2s; color: var(--jsi-text-soft);
}
.jsi-artwork-dropzone:hover, .jsi-artwork-dropzone.is-dragover { border-color: var(--jsi-gold); background: var(--jsi-gold-dim); color: var(--jsi-gold); }
.jsi-artwork-dropzone img { max-width: 220px; max-height: 220px; border-radius: 10px; margin: 0 auto 10px; display: block; }

/* ── Checklist (Review step) ──────────────────────────────────────────── */
.jsi-checklist-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--jsi-line); }
.jsi-checklist-item:last-child { border-bottom: none; }
.jsi-checklist-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.jsi-checklist-icon.pass { background: var(--jsi-success-soft); color: var(--jsi-success); }
.jsi-checklist-icon.fail { background: var(--jsi-error-soft); color: var(--jsi-error); }
.jsi-checklist-label { font-size: 13.5px; color: var(--jsi-text-dim); }
.jsi-checklist-detail { font-size: 12px; color: var(--jsi-text-soft); margin-top: 2px; }
.jsi-checklist-item.is-clickable { cursor: pointer; border-radius: 8px; margin: 0 -8px; padding: 10px 8px; transition: background .15s; }
.jsi-checklist-item.is-clickable:hover { background: rgba(255,255,255,.04); }
.jsi-checklist-fix-link { font-size: 11.5px; color: var(--jsi-gold); font-weight: 600; margin-top: 4px; }

.jsi-review-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ── Checkout ─────────────────────────────────────────────────────────── */
.jsi-checkout { padding: 32px; }
.jsi-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; }
.jsi-package-card {
	background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 14px; padding: 22px 18px;
	display: flex; flex-direction: column; gap: 6px; transition: border-color .2s, transform .15s;
}
.jsi-package-card:hover { transform: translateY(-2px); border-color: var(--jsi-gold-line); }
.jsi-package-card.is-selected { border-color: var(--jsi-gold); background: var(--jsi-gold-dim); }
.jsi-package-type { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--jsi-text-soft); }
.jsi-package-price { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; color: #fff; margin: 4px 0; }
.jsi-package-price span { font-size: 13px; color: var(--jsi-text-soft); font-weight: 400; }
.jsi-package-card.is-featured { border-color: var(--jsi-gold-line); }
.jsi-package-badge {
	position: absolute; top: -10px; right: 14px; background: var(--jsi-gold); color: #0a0512;
	font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em;
}
.jsi-package-card { position: relative; }
.jsi-package-features { list-style: none; padding: 0; margin: 6px 0 4px; }
.jsi-package-features li {
	font-size: 12.5px; color: var(--jsi-text-dim); padding: 4px 0 4px 18px; position: relative;
}
.jsi-package-features li::before { content: '✓'; position: absolute; left: 0; color: var(--jsi-gold); font-weight: 700; }

/* Package gate uses the same .jsi-package-grid/.jsi-package-card as checkout but with plain links, not JS-driven buttons */
.jsi-package-gate { padding: 32px; }
.jsi-package-gate .jsi-package-card .jsi-btn { margin-top: auto; }
.jsi-select-package { margin-top: 10px; }
.jsi-package-group-header { margin: 28px 0 12px; }
.jsi-package-group-header:first-of-type { margin-top: 8px; }
.jsi-package-group-header h3 { margin: 4px 0 2px; }
.jsi-package-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--jsi-gold); }

.jsi-payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.jsi-payment-method-btn {
	background: rgba(255,255,255,.03); border: 1px solid var(--jsi-line); border-radius: 12px; padding: 18px;
	cursor: pointer; color: #fff; text-align: left; display: flex; flex-direction: column; gap: 4px;
}
.jsi-payment-method-btn:hover { border-color: var(--jsi-gold-line); }
.jsi-payment-method-btn.is-selected { border-color: var(--jsi-gold); background: var(--jsi-gold-dim); }

.jsi-bank-account-box { background: rgba(255,255,255,.03); border: 1px solid var(--jsi-line); border-radius: 12px; padding: 16px; margin-top: 14px; font-size: 13.5px; }
.jsi-bank-account-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; }
.jsi-bank-account-box dt { color: var(--jsi-text-soft); }
.jsi-bank-account-box dd { margin: 0; color: #fff; font-weight: 600; }
.jsi-bank-order-row { padding: 12px 0; border-bottom: 1px solid var(--jsi-line); }
.jsi-bank-order-row:last-child { border-bottom: none; }
.jsi-bank-order-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Responsive ───────────────────────────────────────────── */
/* Bugfix: dashboard cut off on mobile. Root cause: .jsi-shell's base rule (above)
   sets shorthand `overflow: hidden` on both axes, for rounded-corner masking.
   Harmless on desktop where the 3-column grid keeps content short, but on mobile
   the dashboard grid drops to a single stacked column — taller than the box had
   been given room for — and overflow-y:hidden clipped everything past that point
   instead of letting the box grow. This rule already reset overflow-x for mobile
   but never touched overflow-y, so the vertical clip never actually lifted.
   Restoring overflow-y here fixes it without changing the rounded-corner look. */
.jsi-shell { overflow-x: hidden; overflow-y: visible; max-width: 100%; }
.jsi-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jsi-table-scroll .jsi-release-table { min-width: 480px; }

@media (max-width: 720px) {
	.jsi-dashboard { grid-template-columns: 1fr; }
	.jsi-nav { display: flex; overflow-x: auto; padding: 10px 0; border-right: none; border-bottom: 1px solid var(--jsi-line); }
	.jsi-release-table-wrap { display: none; }
	.jsi-release-cards { display: block; }
	.jsi-nav-brand { display: none; }
	.jsi-nav-item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
	.jsi-nav-item.is-active { border-left: none; border-bottom-color: var(--jsi-gold); }
	.jsi-cards { grid-template-columns: 1fr; }
	.jsi-field-row { grid-template-columns: 1fr; }
	.jsi-type-cards { grid-template-columns: 1fr; }
	.jsi-onboarding, .jsi-release-wizard { padding: 16px; }
	.jsi-main { padding: 20px 16px; }
	/* Bugfix: the save-indicator's flex:1 combined with plain flex-wrap:wrap was
	   pushing Continue onto its own wrapped row, off the visible viewport.
	   Force the indicator onto its own full-width row on top (order:-1), then
	   give Back/Continue equal flex:1 so they always sit side by side below it. */
	.jsi-wizard-nav { padding: 16px; flex-wrap: wrap; }
	.jsi-save-indicator { flex: 1 1 100%; order: -1; margin-bottom: 6px; }
	.jsi-wizard-nav .jsi-btn { flex: 1; text-align: center; }
	.jsi-main-header { flex-direction: column; gap: 10px; }
	/* Bugfix: the bell panel is position:absolute + width:340px anchored to its
	   button — fine on desktop where the button sits near the header's right
	   edge, but on mobile the header stacks into a column and the button can
	   end up anywhere, so a 340px panel pinned via right:0 regularly had its
	   left edge pushed past x:0 and got silently clipped by .jsi-shell's
	   overflow-x:hidden (nothing rendered — not "small", genuinely invisible).
	   Anchoring to the viewport instead of the button fixes that regardless of
	   where the button lands. */
	.jsi-bell-panel {
		position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto;
		max-height: 70vh; border-radius: 16px 16px 0 0;
	}
}

/* Contributor rows specifically: name field was unreadably squeezed next to the
   role dropdown and remove button on narrow screens — stack name above role. */
@media (max-width: 560px) {
	.jsi-contributor-row {
		flex-direction: column; align-items: stretch; gap: 8px; position: relative; padding-right: 40px;
	}
	.jsi-contributor-row .jsi-c-name { width: 100%; }
	.jsi-contributor-row .jsi-c-role { width: 100%; max-width: none !important; }
	.jsi-contributor-row .jsi-repeat-remove { position: absolute; top: 6px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.jsi-step-panel { animation: none; }
	.jsi-btn, .jsi-type-card { transition: none; }
}

/* ── Phase 3.2 additions: modal picker, progress bars, swap toggle, review previews ── */

.jsi-picker-trigger {
	width: 100%; text-align: left; font-family: inherit; font-size: 14px;
	padding: 11px 14px; border: 1px solid var(--jsi-line); border-radius: 10px;
	background: rgba(255,255,255,.03); color: var(--jsi-text); cursor: pointer;
}
.jsi-picker-trigger:hover { border-color: var(--jsi-gold-line); }
.jsi-picker-trigger:focus-visible { outline: none; border-color: var(--jsi-gold); box-shadow: 0 0 0 3px var(--jsi-gold-dim); }

.jsi-modal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.jsi-modal {
	background: var(--jsi-bg-alt); border: 1px solid var(--jsi-line); border-radius: 16px;
	width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.jsi-modal.is-wide { max-width: 560px; }
.jsi-modal-body { padding: 0 20px 14px; overflow-y: auto; flex: 1; }
.jsi-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 10px; }
.jsi-modal-header span { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; color: #fff; }
.jsi-modal-close { background: none; border: none; color: var(--jsi-text-soft); font-size: 22px; cursor: pointer; line-height: 1; }
.jsi-modal-close:hover { color: var(--jsi-gold); }
.jsi-modal-search {
	margin: 0 20px 10px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--jsi-line);
	background: rgba(255,255,255,.04); color: #fff; font-size: 13.5px;
}
.jsi-modal-list { overflow-y: auto; flex: 1; padding: 0 8px 8px; }
.jsi-modal-item {
	display: flex; justify-content: space-between; align-items: center; padding: 10px 12px;
	border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--jsi-text-dim);
}
.jsi-modal-item:hover { background: rgba(255,255,255,.05); }
.jsi-modal-item.is-selected { background: var(--jsi-gold-dim); color: var(--jsi-gold); }
.jsi-modal-check { color: var(--jsi-gold); font-weight: 700; }
.jsi-modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid var(--jsi-line); }

/* Progress bars for uploads */
.jsi-progress-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0; }
.jsi-progress-fill { height: 100%; width: 0%; background: var(--jsi-gold); transition: width .15s ease; }

/* Featured artist registration block + swap toggle */
.jsi-featured-registration { display: none; margin-top: 10px; padding: 14px; background: rgba(255,255,255,.03); border-radius: 10px; }
.jsi-swap-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jsi-text-dim); margin-top: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Preview trimmer */
.jsi-preview-trimmer { margin-top: 10px; padding: 10px 12px; background: rgba(255,255,255,.03); border-radius: 10px; }
.jsi-preview-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--jsi-text-dim); }
.jsi-preview-controls label { display: flex; align-items: center; gap: 6px; }
.jsi-preview-controls input[type=number] {
	padding: 6px 8px; border-radius: 6px; border: 1px solid var(--jsi-line); background: rgba(255,255,255,.04); color: #fff;
}

/* Review step: media previews + edit buttons */
.jsi-review-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.jsi-review-media-item { background: var(--jsi-panel); border: 1px solid var(--jsi-line); border-radius: 12px; padding: 14px; }
.jsi-review-media-item img { width: 100%; max-width: 200px; border-radius: 8px; display: block; margin: 8px 0; }
.jsi-review-track-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--jsi-line); }
.jsi-review-track-row:last-child { border-bottom: none; }
.jsi-edit-btn {
	background: none; border: 1px solid var(--jsi-line); color: var(--jsi-gold); font-size: 12px; font-weight: 600;
	padding: 6px 12px; border-radius: 999px; cursor: pointer; margin-top: 8px;
}
.jsi-edit-btn:hover { border-color: var(--jsi-gold-line); background: var(--jsi-gold-dim); }

@media (max-width: 720px) {
	.jsi-review-media { grid-template-columns: 1fr; }
}

/* ── Auth pages (login/register/forgot/reset) ────────────────────────── */
.jsi-auth-shell { display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 40px 20px; }
.jsi-auth-card {
	width: 100%; max-width: 380px; background: var(--jsi-panel); border: 1px solid var(--jsi-line);
	border-radius: 16px; padding: 32px; backdrop-filter: blur(10px);
}
.jsi-auth-card h2 { font-size: 22px; margin-bottom: 4px; }
.jsi-auth-card .jsi-muted { margin-bottom: 20px; display: block; }
.jsi-btn-block { width: 100%; text-align: center; margin-top: 6px; }
.jsi-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jsi-text-dim); text-transform: none; letter-spacing: 0; font-weight: 400; }
.jsi-auth-links { display: flex; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; }
.jsi-auth-links a { color: var(--jsi-gold); text-decoration: none; }
.jsi-auth-links a:hover { text-decoration: underline; }
.jsi-otp-input { font-size: 24px; letter-spacing: .5em; text-align: center; font-family: 'Space Grotesk', sans-serif; }
.jsi-auth-resend { text-align: center; margin-top: 10px; }
.jsi-btn-link { background: none; border: none; color: var(--jsi-gold); font-size: 13px; cursor: pointer; padding: 4px; text-decoration: none; }
.jsi-btn-link:hover { text-decoration: underline; }
.jsi-delete-release { color: var(--jsi-error); margin-left: 8px; }

@media (max-width: 480px) {
	.jsi-auth-card { padding: 24px; }
}

/* ── DSP picker (Distribution step) ──────────────────────────────────── */
.jsi-dsp-category { margin-bottom: 16px; border: 1px solid var(--jsi-line); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.02); }
.jsi-dsp-category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13.5px; color: #fff; }
.jsi-dsp-cat-toggle { font-size: 12px; color: var(--jsi-text-soft); }
.jsi-dsp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 12px; }
.jsi-dsp-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jsi-text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }
.jsi-dsp-logo { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; border-radius: 7px; padding: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.jsi-dsp-name { min-width: 0; }
.jsi-dsp-item input { accent-color: var(--jsi-gold); }
.jsi-dsp-item.is-locked { cursor: pointer; color: var(--jsi-text-soft); }
.jsi-dsp-lock-badge { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--jsi-gold); background: var(--jsi-gold-dim); border: 1px solid var(--jsi-gold-line); border-radius: 5px; padding: 1px 6px; }

/* ── Account Security (authenticator app, recovery codes, trusted devices) ── */
.jsi-account-security { max-width: 760px; margin: 0 auto; }
.jsi-security-actions { display: flex; align-items: center; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.jsi-security-steps { margin: 0 0 16px; padding-left: 18px; color: var(--jsi-text-dim); font-size: 13.5px; line-height: 1.7; }
.jsi-security-steps li { margin-bottom: 10px; }
.jsi-security-key {
	font-family: 'Space Grotesk', monospace; font-size: 15px; letter-spacing: .06em; word-break: break-all;
	background: rgba(255,255,255,.04); border: 1px solid var(--jsi-line); border-radius: 8px;
	padding: 10px 12px; margin: 8px 0; color: #fff;
}
.jsi-recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; }

/* ── Developer portal (Phase 9) ──────────────────────────────────────── */
.jsi-developer-portal { padding: 32px; max-width: 880px; margin: 0 auto; }
.jsi-dev-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.jsi-dev-docs-btn { white-space: nowrap; }
.jsi-dev-row {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 14px 4px; border-bottom: 1px solid var(--jsi-line); font-size: 13.5px; color: var(--jsi-text-dim);
	transition: background .15s ease;
}
.jsi-dev-row:hover { background: rgba(255,255,255,.02); }
.jsi-dev-row:last-of-type { border-bottom: none; }
.jsi-dev-row strong { color: #fff; }
.jsi-dev-create summary { cursor: pointer; user-select: none; }
.jsi-dev-create[open] summary { margin-bottom: 4px; }
.jsi-btn-small { padding: 6px 12px; font-size: 12.5px; }

/* ── Developer documentation page ────────────────────────────────────── */
.jsi-developer-docs { padding: 32px; max-width: 880px; margin: 0 auto; }
.jsi-developer-docs h3 { margin-top: 0; font-size: 18px; }
.jsi-developer-docs .jsi-panel { margin-bottom: 18px; }
.jsi-developer-docs p { color: var(--jsi-text-dim); line-height: 1.65; font-size: 14px; }
.jsi-developer-docs ol, .jsi-developer-docs ul { color: var(--jsi-text-dim); line-height: 1.8; font-size: 14px; }
.jsi-developer-docs code { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
.jsi-doc-code {
	background: #0c0e14; border: 1px solid var(--jsi-line); border-radius: 10px; padding: 16px 18px;
	overflow-x: auto; font-family: 'Space Grotesk', monospace; font-size: 12.5px; line-height: 1.7; color: #d7e0ea;
	white-space: pre;
}
.jsi-doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.jsi-doc-table th, .jsi-doc-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--jsi-line); color: var(--jsi-text-dim); }
.jsi-doc-table th { color: #fff; font-weight: 600; }
.jsi-doc-event-list { columns: 2; column-gap: 24px; }

/* ── Catalogue dashboard ──────────────────────────────────────────────── */
.jsi-catalog { padding: 28px 32px 60px; max-width: 1200px; margin: 0 auto; }
.jsi-catalog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.jsi-catalog-toolbar {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
	background: rgba(255,255,255,.03); border: 1px solid var(--jsi-line); border-radius: 14px; padding: 14px 16px;
	margin-bottom: 16px; position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px);
}
.jsi-catalog-search { flex: 1 1 220px; min-width: 180px; }
.jsi-catalog-search input {
	width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--jsi-line); border-radius: 10px;
	padding: 9px 12px; color: #fff; font-size: 13.5px;
}
.jsi-catalog-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.jsi-catalog-filters select {
	background: rgba(255,255,255,.04); border: 1px solid var(--jsi-line); border-radius: 10px;
	padding: 8px 10px; color: #fff; font-size: 13px;
}
.jsi-catalog-view-toggle { display: flex; gap: 4px; }
.jsi-view-btn {
	background: rgba(255,255,255,.04); border: 1px solid var(--jsi-line); border-radius: 8px;
	width: 34px; height: 34px; color: var(--jsi-text-dim); cursor: pointer; font-size: 14px;
}
.jsi-view-btn.is-active { background: var(--jsi-gold, #d4af37); color: #17181c; border-color: transparent; }

.jsi-catalog-count { margin: 4px 2px 14px; font-size: 12.5px; }

.jsi-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.jsi-catalog-grid[data-view="list"] { grid-template-columns: 1fr; }

.jsi-cat-card { background: rgba(255,255,255,.03); border: 1px solid var(--jsi-line); border-radius: 14px; overflow: hidden; transition: border-color .15s ease; }
.jsi-cat-card.is-open { border-color: rgba(212,175,55,.4); }

.jsi-cat-card-head { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; }
.jsi-catalog-grid[data-view="grid"] .jsi-cat-card-head { flex-direction: column; align-items: stretch; text-align: center; }
.jsi-catalog-grid[data-view="grid"] .jsi-cat-thumb { width: 100%; aspect-ratio: 1/1; }
.jsi-catalog-grid[data-view="grid"] .jsi-cat-card-info { text-align: left; }

.jsi-cat-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,.05); }
.jsi-cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsi-cat-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; opacity: .4; }

.jsi-cat-card-info { flex: 1; min-width: 0; }
.jsi-cat-card-title { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jsi-cat-card-meta { font-size: 12px; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jsi-explicit-tag { display: inline-block; background: #444; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; vertical-align: middle; }

.jsi-cat-expand-btn { background: none; border: none; color: var(--jsi-text-dim); cursor: pointer; font-size: 11px; padding: 4px 8px; flex-shrink: 0; }

.jsi-cat-card-details { border-top: 1px solid var(--jsi-line); padding: 14px 16px; font-size: 13px; }
.jsi-cat-detail-row { margin-bottom: 8px; color: var(--jsi-text-dim); }
.jsi-cat-detail-row strong { color: #fff; }
.jsi-cat-track-list { margin: 10px 0; border-top: 1px dashed var(--jsi-line); padding-top: 8px; }
.jsi-cat-track-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; flex-wrap: wrap; }
.jsi-cat-track-num { color: var(--jsi-text-soft); width: 20px; flex-shrink: 0; }
.jsi-cat-track-title { flex: 1; min-width: 120px; color: #fff; }
.jsi-cat-track-isrc { color: var(--jsi-text-dim); font-family: monospace; font-size: 11.5px; }
.jsi-cat-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.jsi-catalog-pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.jsi-page-btn {
	background: rgba(255,255,255,.04); border: 1px solid var(--jsi-line); border-radius: 8px;
	width: 32px; height: 32px; color: var(--jsi-text-dim); cursor: pointer; font-size: 12.5px;
}
.jsi-page-btn.is-active { background: var(--jsi-gold, #d4af37); color: #17181c; border-color: transparent; }

@media (max-width: 640px) {
	.jsi-catalog { padding: 18px 14px 40px; }
	.jsi-catalog-toolbar { flex-direction: column; align-items: stretch; }
	.jsi-catalog-filters { justify-content: stretch; }
	.jsi-catalog-filters select { flex: 1; }
	.jsi-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ── Label Package ────────────────────────────────────────────────────── */
.jsi-label-page { padding: 28px 32px 60px; max-width: 760px; margin: 0 auto; }
.jsi-label-block { margin-bottom: 20px; }
.jsi-label-block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.jsi-label-block-head h3 { margin: 0 0 4px; }
.jsi-label-roster { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13.5px; }
.jsi-label-roster td { padding: 12px 4px; border-bottom: 1px solid var(--jsi-line); color: #fff; vertical-align: top; }
.jsi-label-roster tr:last-child td { border-bottom: none; }
.jsi-label-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jsi-label-payment-area:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--jsi-line); }
.jsi-label-create-block h3 { margin-top: 0; }
#jsi-label-name-rows { display: flex; flex-direction: column; gap: 8px; }
#jsi-label-name-rows input, .jsi-lbl-add-name, .jsi-label-create-block input[type="text"] {
	background: rgba(255,255,255,.04); border: 1px solid var(--jsi-line); border-radius: 10px;
	padding: 9px 12px; color: #fff; font-size: 13.5px; width: 100%;
}
.jsi-label-price-preview { margin: 14px 0; font-size: 14px; color: #fff; }
@media (max-width: 640px) {
	.jsi-label-page { padding: 18px 14px 40px; }
}

/* ── Full public product shell ────────────────────────────────────────── */
.jsi-site-body {
	margin: 0;
	background: #000;
	color: #f8f8f4;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}
.jsi-site-body *, .jsi-site-body *::before, .jsi-site-body *::after { box-sizing: border-box; }
.jsi-site-body a { color: inherit; }
.jsi-site-body .screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.jsi-site {
	--site-black: #000;
	--site-panel: #0e1017;
	--site-line: rgba(255,255,255,.12);
	--site-soft: rgba(248,248,244,.62);
	--site-muted: rgba(248,248,244,.42);
	--site-gold: #ffc600;
	--site-cyan: #4de8ff;
	min-height: 100vh;
	overflow: visible;
	background: var(--site-black);
}
.jsi-site-header {
	position: relative; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.1);
	background: rgba(7,8,12,.78); backdrop-filter: blur(18px);
}
.jsi-site-header-inner, .jsi-site-footer, .jsi-home-container {
	width: min(1240px, calc(100% - 56px)); margin: 0 auto;
}
.jsi-site-header-inner {
	min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.jsi-site-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.jsi-site-mark {
	display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--site-gold);
	border-radius: 50%; color: var(--site-gold); font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .04em;
	overflow: hidden; background: rgba(255,255,255,.03); flex-shrink: 0;
}
.jsi-site-mark img { width: 100%; height: 100%; object-fit: contain; }
.jsi-site-mark-sm { width: 26px; height: 26px; }
.jsi-site-footer-brand { display: flex; align-items: center; gap: 11px; }
.jsi-site-footer-brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.jsi-site-brand-copy { display: flex; flex-direction: column; gap: 3px; }
.jsi-site-brand-copy strong { font: 700 13px/1 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.jsi-site-brand-copy small { color: var(--site-muted); font-size: 10px; letter-spacing: .04em; }
.jsi-site-nav { display: flex; align-items: center; gap: 25px; font-size: 12px; letter-spacing: .04em; }
.jsi-site-nav a { color: var(--site-soft); text-decoration: none; transition: color .2s ease; }
.jsi-site-nav a:hover { color: #fff; }
.jsi-site-nav .jsi-site-nav-muted { color: #fff; }
.jsi-site-nav .jsi-site-nav-cta {
	padding: 12px 16px; border-radius: 999px; background: var(--site-gold); color: #0a0a0a; font-weight: 800;
	box-shadow: 0 7px 24px rgba(255,198,0,.15);
}
.jsi-site-nav-cta span { margin-left: 8px; font-size: 15px; }
.jsi-menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.jsi-menu-toggle span { display: block; width: 22px; height: 1px; margin: 5px; background: #fff; }
.jsi-site-main { min-height: calc(100vh - 160px); }
.jsi-site-main:not(.is-home) { padding: 56px 0 92px; }
.jsi-site-page-title { width: min(1080px, calc(100% - 56px)); margin: 0 auto 24px; }
.jsi-site-kicker, .jsi-home-index {
	color: var(--site-gold); font: 700 10px/1.2 "Space Grotesk", sans-serif; letter-spacing: .18em; text-transform: uppercase;
}
.jsi-site-page-title h1 { margin: 12px 0 0; font: 700 clamp(2rem, 5vw, 4rem)/.95 "Space Grotesk", sans-serif; }
.jsi-site-footer {
	display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center;
	padding: 28px 0 34px; border-top: 1px solid var(--site-line); color: var(--site-muted); font-size: 11px;
}
.jsi-site-footer strong { display: block; color: #fff; font: 700 12px/1.2 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.jsi-site-footer span { display: block; margin-top: 5px; }
.jsi-site-footer-links { display: flex; gap: 18px; }
.jsi-site-footer-links a { text-decoration: none; }

/* ── Public homepage ─────────────────────────────────────────────────── */
.jsi-home { background: #000; color: #f8f8f4; font-family: 'Poppins', sans-serif; }
.jsi-home h1, .jsi-home h2, .jsi-home h3 { font-family: "Space Grotesk", sans-serif; }
.jsi-home-hero { min-height: 720px; display: grid; align-items: center; position: relative; overflow: hidden; }
.jsi-home-hero-grid {
	position: absolute; inset: 0; opacity: .26;
	background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
	background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.jsi-home-hero-glow {
	position: absolute; width: 62vw; height: 62vw; right: -18vw; top: -27vw; border-radius: 50%;
	background: radial-gradient(circle, rgba(89,31,139,.36), rgba(89,31,139,0) 67%);
}
.jsi-home-hero-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); align-items: center; gap: 76px; position: relative; z-index: 1; padding: 100px 0 80px; }
.jsi-home-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--site-soft); font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.jsi-home-eyebrow i, .jsi-live-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--site-gold); box-shadow: 0 0 16px var(--site-gold); }
.jsi-home-hero h1 { margin: 25px 0 22px; max-width: 650px; font-size: clamp(3.8rem, 8vw, 7.7rem); line-height: .84; letter-spacing: -.08em; }
.jsi-home em { color: var(--site-gold); font-style: normal; }
.jsi-home-lede { max-width: 490px; margin: 0; color: var(--site-soft); font-size: 16px; line-height: 1.7; }
.jsi-home-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.jsi-home-button { display: inline-flex; align-items: center; gap: 15px; min-height: 47px; padding: 0 20px; border: 1px solid var(--site-line); border-radius: 999px; font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.jsi-home-button:hover { transform: translateY(-2px); border-color: var(--site-gold); }
.jsi-home-button.is-primary { border-color: var(--site-gold); background: var(--site-gold); color: #0a0a0a; }
.jsi-home-button.is-quiet { color: #fff; background: rgba(255,255,255,.03); }
.jsi-home-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 42px; color: var(--site-muted); font-size: 11px; }
.jsi-home-proof strong { color: var(--site-cyan); font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.jsi-home-proof .jsi-live-dot { width: 5px; height: 5px; background: var(--site-cyan); box-shadow: 0 0 11px var(--site-cyan); }
.jsi-waveform-card { padding: 18px 18px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)); box-shadow: 0 35px 100px rgba(0,0,0,.4); transform: perspective(1100px) rotateY(-8deg) rotateX(3deg); }
.jsi-wave-topline, .jsi-wave-footer { display: flex; align-items: center; justify-content: space-between; color: var(--site-muted); font: 10px/1.2 "Space Grotesk", sans-serif; letter-spacing: .12em; }
.jsi-wave-topline strong, .jsi-wave-footer span:last-child { color: var(--site-cyan); font-size: 9px; }
.jsi-wave-topline strong b { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--site-cyan); box-shadow: 0 0 10px var(--site-cyan); }
.jsi-waveform { height: 230px; position: relative; display: flex; align-items: center; margin: 20px 0 12px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.jsi-wave-axis { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(255,255,255,.13); }
.jsi-wave-bars { position: absolute; inset: 25px 12px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.jsi-wave-bars span { display: block; width: 100%; height: var(--bar); max-height: 100%; min-height: 4px; border-radius: 4px; background: linear-gradient(180deg, rgba(255,198,0,.28), var(--site-gold)); transform: scaleY(.7); opacity: .76; animation: jsi-wave-pulse 1.9s ease-in-out infinite alternate; }
.jsi-wave-bars span:nth-child(3n) { animation-delay: -.7s; }
.jsi-wave-bars span:nth-child(4n) { animation-delay: -1.2s; }
@keyframes jsi-wave-pulse { to { transform: scaleY(1); opacity: 1; } }
.jsi-wave-playhead { position: absolute; top: 0; bottom: 0; left: 7%; width: 1px; background: var(--site-cyan); box-shadow: 0 0 18px var(--site-cyan); animation: jsi-playhead 7s linear infinite; }
.jsi-wave-playhead::after { content: ""; position: absolute; top: 50%; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--site-cyan); box-shadow: 0 0 16px var(--site-cyan); }
.jsi-wave-playhead span { position: absolute; top: 8px; left: 7px; color: var(--site-cyan); font: 8px/1 "Space Grotesk", sans-serif; letter-spacing: .1em; }
@keyframes jsi-playhead { from { left: 7%; } to { left: 93%; } }
.jsi-wave-footer { padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.jsi-dsp-orbits { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 14px; }
.jsi-dsp-orbits span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; color: var(--site-soft); font: 10px/1 "Space Grotesk", sans-serif; }
.jsi-dsp-orbits span:nth-child(2), .jsi-dsp-orbits span:nth-child(4) { border-color: rgba(77,232,255,.4); color: var(--site-cyan); }
.jsi-home-scroll-cue { position: absolute; bottom: 27px; left: 50%; display: flex; align-items: center; gap: 12px; color: var(--site-muted); font: 10px/1 "Space Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; transform: translateX(-50%); }
.jsi-home-scroll-cue span { width: 27px; height: 1px; background: var(--site-gold); }
.jsi-home-signal-strip { border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); }
.jsi-home-signal-strip .jsi-home-container { display: flex; align-items: center; gap: 24px; padding: 14px 0; color: var(--site-muted); font: 9px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; }
.jsi-home-signal-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--site-gold), transparent); }
.jsi-home-signal-strip .is-cyan { color: var(--site-cyan); }
.jsi-home-section { padding: 130px 0; }
.jsi-home-section-heading { display: grid; grid-template-columns: 1fr .75fr; gap: 70px; align-items: end; margin-bottom: 55px; }
.jsi-home-section-heading h2, .jsi-home-flow h2, .jsi-home-console-caption h2, .jsi-home-final h2 { margin: 15px 0 0; font-size: clamp(2.6rem, 5.5vw, 5.6rem); line-height: .87; letter-spacing: -.07em; }
.jsi-home-section-heading p, .jsi-home-flow-intro p, .jsi-home-console-caption p, .jsi-home-final p { margin: 0; color: var(--site-soft); font-size: 15px; line-height: 1.7; }
.jsi-home-feature-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 13px; }
.jsi-home-feature { position: relative; min-height: 265px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--site-line); border-radius: 12px; background: linear-gradient(140deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.jsi-home-feature:hover { transform: translateY(-5px); border-color: rgba(255,198,0,.5); }
.jsi-home-feature.is-wide { grid-row: span 2; min-height: 543px; background: radial-gradient(circle at 80% 20%, rgba(255,198,0,.18), transparent 35%), linear-gradient(140deg, #17130a, #0d0e13); }
.jsi-home-feature.is-cyan-card { background: radial-gradient(circle at 80% 20%, rgba(77,232,255,.15), transparent 37%), linear-gradient(140deg, #0c171a, #0d0e13); }
.jsi-feature-number { position: absolute; top: 22px; left: 24px; color: var(--site-muted); font: 10px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; }
.jsi-home-feature h3 { margin: 0 0 10px; color: #fff; font-size: 24px; letter-spacing: -.04em; }
.jsi-home-feature p { max-width: 330px; margin: 0; color: var(--site-soft); font-size: 13px; line-height: 1.65; }
.jsi-feature-arrow { position: absolute; top: 20px; right: 22px; color: var(--site-gold); font-size: 18px; font-weight: 400; }
.jsi-home-flow { background: #0d0f14; border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); }
.jsi-home-flow .jsi-home-container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.jsi-home-flow-intro h2 { margin-bottom: 25px; }
.jsi-home-flow-intro p { max-width: 360px; }
.jsi-home-flow-steps { display: grid; gap: 0; }
.jsi-home-flow-steps > div { display: grid; grid-template-columns: 54px 1fr; column-gap: 22px; padding: 25px 0; border-top: 1px solid var(--site-line); }
.jsi-home-flow-steps > div:last-child { border-bottom: 1px solid var(--site-line); }
.jsi-home-flow-steps span { color: var(--site-gold); font: 11px/1 "Space Grotesk", sans-serif; }
.jsi-home-flow-steps strong { font: 600 26px/.95 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.jsi-home-flow-steps p { grid-column: 2; margin: 9px 0 0; color: var(--site-soft); font-size: 13px; line-height: 1.55; }
.jsi-home-console { padding-bottom: 30px; }
.jsi-console-frame { border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: #0d0f14; box-shadow: 0 40px 100px rgba(0,0,0,.35); overflow: hidden; }
.jsi-console-chrome { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-bottom: 1px solid var(--site-line); color: var(--site-muted); font: 10px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; }
.jsi-console-chrome > span { display: flex; gap: 5px; }
.jsi-console-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #494c53; }
.jsi-console-chrome b { font-weight: 400; }
.jsi-console-chrome small { margin-left: auto; color: var(--site-cyan); letter-spacing: .15em; }
.jsi-console-body { display: grid; grid-template-columns: 175px 1fr; min-height: 315px; }
.jsi-console-body aside { display: flex; flex-direction: column; gap: 17px; padding: 26px 20px; border-right: 1px solid var(--site-line); color: var(--site-muted); font: 10px/1 "Space Grotesk", sans-serif; }
.jsi-console-body aside strong { margin-bottom: 25px; color: var(--site-gold); letter-spacing: .15em; }
.jsi-console-body aside .is-active { color: #fff; }
.jsi-console-content { padding: 28px; }
.jsi-console-title { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #fff; font: 600 17px/1 "Space Grotesk", sans-serif; }
.jsi-console-title b { padding: 9px 11px; border: 1px solid var(--site-gold); border-radius: 5px; color: var(--site-gold); font: 700 9px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.jsi-console-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 27px; }
.jsi-console-stats > div { padding: 14px; border: 1px solid var(--site-line); border-radius: 7px; }
.jsi-console-stats small, .jsi-chart-label span { display: block; color: var(--site-muted); font: 9px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; }
.jsi-console-stats strong { display: block; margin: 12px 0 7px; color: #fff; font: 600 clamp(1.3rem, 2.6vw, 2rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.jsi-console-stats em { color: var(--site-muted); font: normal 9px/1 "Space Grotesk", sans-serif; }
.jsi-console-stats .is-cyan-stat strong, .jsi-console-stats .is-cyan-stat em { color: var(--site-cyan); }
.jsi-console-chart { margin-top: 18px; padding: 16px; border: 1px solid var(--site-line); border-radius: 7px; }
.jsi-chart-label { display: flex; justify-content: space-between; }
.jsi-chart-label b { color: var(--site-gold); font: 9px/1 "Space Grotesk", sans-serif; font-weight: 400; }
.jsi-chart-bars { height: 80px; display: flex; align-items: end; gap: 8px; margin-top: 18px; }
.jsi-chart-bars i { flex: 1; min-width: 4px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--site-gold), rgba(255,198,0,.2)); }
.jsi-chart-bars i:nth-child(3n) { background: linear-gradient(180deg, var(--site-cyan), rgba(77,232,255,.15)); }
.jsi-home-console-caption { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 45px; padding: 70px 0 100px; }
.jsi-home-console-caption h2 { margin: 0; }
.jsi-home-console-caption a { color: var(--site-gold); font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.jsi-home-console-caption a span { margin-left: 10px; font-size: 16px; }
.jsi-home-pricing { border-top: 1px solid var(--site-line); }
.jsi-home-pricing-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 25px; border: 1px solid rgba(255,198,0,.38); border-radius: 11px; background: rgba(255,198,0,.07); }
.jsi-home-pricing-row + .jsi-home-pricing-row { margin-top: 12px; }
.jsi-home-pricing-row.is-dark { border-color: var(--site-line); background: rgba(255,255,255,.025); }
.jsi-home-pricing-row span { display: block; margin-bottom: 9px; color: var(--site-gold); font: 10px/1 "Space Grotesk", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.jsi-home-pricing-row strong { display: block; font: 600 24px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.jsi-home-pricing-row p { margin: 8px 0 0; color: var(--site-soft); font-size: 13px; }
.jsi-home-final { padding: 160px 0 170px; text-align: center; border-top: 1px solid var(--site-line); background: radial-gradient(circle at 50% 45%, rgba(255,198,0,.12), transparent 35%), #0b0c10; }
.jsi-home-final h2 { margin: 17px 0; font-size: clamp(3rem, 7vw, 7rem); }
.jsi-home-final p { margin-bottom: 28px; }

@media (max-width: 900px) {
	.jsi-home-hero-inner { grid-template-columns: 1fr; gap: 52px; }
	.jsi-waveform-card { max-width: 680px; width: 100%; margin: 0 auto; transform: none; }
	.jsi-home-section-heading, .jsi-home-flow .jsi-home-container { grid-template-columns: 1fr; gap: 28px; }
	.jsi-home-feature-grid { grid-template-columns: 1fr 1fr; }
	.jsi-home-feature.is-wide { grid-row: auto; min-height: 265px; }
	.jsi-home-console-caption { grid-template-columns: 1fr 1fr; }
	.jsi-home-console-caption a { grid-column: 2; }
}
@media (max-width: 680px) {
	.jsi-site-header-inner, .jsi-site-footer, .jsi-home-container { width: min(100% - 32px, 1240px); }
	.jsi-menu-toggle { display: block; }
	.jsi-site-nav { display: none; position: absolute; top: 78px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--site-line); border-radius: 10px; background: #0e1017; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
	.jsi-site-nav.is-open { display: flex; }
	.jsi-site-nav a { padding: 13px; }
	.jsi-site-nav .jsi-site-nav-cta { text-align: center; }
	.jsi-site-main:not(.is-home) { padding-top: 28px; }
	.jsi-site-footer { grid-template-columns: 1fr; gap: 19px; }
	.jsi-home-hero { min-height: 760px; }
	.jsi-home-hero-inner { padding-top: 75px; }
	.jsi-home-hero h1 { font-size: clamp(3.3rem, 17vw, 5.2rem); }
	.jsi-home-lede { font-size: 14px; }
	.jsi-home-signal-strip .jsi-home-container { display: block; line-height: 2; }
	.jsi-home-signal-line { display: none; }
	.jsi-home-section { padding: 80px 0; }
	.jsi-home-section-heading h2, .jsi-home-flow h2, .jsi-home-console-caption h2, .jsi-home-final h2 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
	.jsi-home-feature-grid { grid-template-columns: 1fr; }
	.jsi-home-feature, .jsi-home-feature.is-wide { min-height: 230px; }
	.jsi-console-body { grid-template-columns: 1fr; }
	.jsi-console-body aside { display: none; }
	.jsi-console-content { padding: 18px 14px; }
	.jsi-console-stats { grid-template-columns: 1fr; }
	.jsi-console-title { align-items: flex-start; flex-direction: column; }
	.jsi-home-console-caption { display: block; padding: 55px 0 70px; }
	.jsi-home-console-caption a { display: inline-block; margin-top: 27px; }
	.jsi-home-pricing-row { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
	.jsi-home-pricing-row .jsi-home-button { width: 100%; justify-content: center; }
	.jsi-home-final { padding: 100px 0 120px; }
}
@media (prefers-reduced-motion: reduce) {
	.jsi-wave-bars span, .jsi-wave-playhead { animation: none; }
}

/* ── Home — image banners (studio / crowd) ────────────────────────────── */
.jsi-home-banner { position: relative; min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; }
.jsi-home-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jsi-home-banner-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,8,12,.94) 0%, rgba(7,8,12,.74) 40%, rgba(7,8,12,.28) 75%, rgba(7,8,12,.1) 100%); }
.jsi-home-banner-copy { position: relative; z-index: 1; padding: 46px 0; }
.jsi-home-banner-copy h3 { margin: 12px 0 0; font: 600 clamp(1.7rem, 3.4vw, 2.7rem)/1.08 "Space Grotesk", sans-serif; letter-spacing: -.03em; max-width: 620px; }
.jsi-home-banner-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 24px; }
.jsi-home-banner-stats strong { display: block; font: 600 25px/1 "Space Grotesk", sans-serif; color: var(--site-gold); }
.jsi-home-banner-stats span { display: block; margin-top: 6px; color: var(--site-soft); font-size: 12px; max-width: 180px; }
.jsi-home-banner-note { display: block; margin-top: 18px; color: var(--site-muted); font-size: 10.5px; }

/* ── Home — Smart Links & Presave ─────────────────────────────────────── */
.jsi-smartlinks-grid, .jsi-payouts-grid, .jsi-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.jsi-home-checklist { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.jsi-home-checklist li { position: relative; padding-left: 24px; color: var(--site-soft); font-size: 13.5px; line-height: 1.5; }
.jsi-home-checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--site-gold); font-weight: 700; }
.jsi-smartlink-mock, .jsi-dev-mock { border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: #0d0f14; box-shadow: 0 40px 100px rgba(0,0,0,.35); overflow: hidden; }
.jsi-smartlink-mock-body { padding: 22px; }
.jsi-smartlink-art { width: 64px; height: 64px; border-radius: 12px; margin-bottom: 14px; background: radial-gradient(circle at 30% 30%, rgba(255,198,0,.75), rgba(89,31,139,.6)); }
.jsi-smartlink-mock-body strong { display: block; font: 600 17px/1.2 "Space Grotesk", sans-serif; color: #fff; }
.jsi-smartlink-mock-body small { color: var(--site-muted); font-size: 11px; }
.jsi-smartlink-presave { display: inline-flex; align-items: center; gap: 7px; margin: 16px 0; padding: 6px 12px; border: 1px solid rgba(77,232,255,.4); border-radius: 999px; color: var(--site-cyan); font: 10px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; }
.jsi-smartlink-presave i { width: 6px; height: 6px; border-radius: 50%; background: var(--site-cyan); box-shadow: 0 0 10px var(--site-cyan); flex-shrink: 0; }
.jsi-smartlink-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.jsi-smartlink-platforms a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--site-line); border-radius: 9px; color: #fff; font-size: 12px; text-decoration: none; transition: border-color .15s ease; }
.jsi-smartlink-platforms a:hover { border-color: var(--site-gold); }
.jsi-platform-dot.audiomack { background: #ff7a00; }
.jsi-platform-dot.boomplay { background: #17b06b; }
.jsi-platform-dot.youtube { background: #ff0000; }
.jsi-platform-dot.deezer { background: #a238ff; }

/* ── Home — Naira payouts ─────────────────────────────────────────────── */
.jsi-payout-card { border: 1px solid var(--site-line); border-radius: 16px; padding: 26px; background: radial-gradient(circle at 85% 0%, rgba(255,198,0,.14), transparent 45%), #0d0f14; }
.jsi-payout-row { display: flex; align-items: center; justify-content: space-between; }
.jsi-payout-row span { color: var(--site-muted); font: 10px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; }
.jsi-payout-row strong { font: 600 clamp(1.5rem,3vw,2.1rem)/1 "Space Grotesk", sans-serif; color: #fff; }
.jsi-payout-row.is-gold strong { color: var(--site-gold); }
.jsi-payout-arrow { margin: 16px 0; padding: 10px 0; border-top: 1px dashed var(--site-line); border-bottom: 1px dashed var(--site-line); color: var(--site-cyan); font-size: 11px; letter-spacing: .04em; text-align: center; }
.jsi-payout-bank { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--site-line); border-radius: 10px; color: var(--site-soft); font-size: 12px; }
.jsi-payout-bank i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 10px rgba(61,220,151,.7); flex-shrink: 0; }
.jsi-payout-bank b { margin-left: auto; color: #3ddc97; font: 700 9px/1 "Space Grotesk", sans-serif; letter-spacing: .08em; }

/* ── Home — Developers & API ──────────────────────────────────────────── */
.jsi-dev-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.jsi-dev-pills span { padding: 7px 12px; border: 1px solid var(--site-line); border-radius: 999px; color: var(--site-soft); font: 10.5px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; }
.jsi-dev-code { margin: 0; padding: 20px 22px; background: #0a0b0f; color: #d9dce3; font: 12.5px/1.6 "SFMono-Regular", Menlo, Consolas, monospace; overflow-x: auto; }
.jsi-dev-code code { color: inherit; }
.jsi-dev-events { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--site-line); }
.jsi-dev-events span { padding: 5px 10px; border-radius: 6px; background: rgba(77,232,255,.1); border: 1px solid rgba(77,232,255,.3); color: var(--site-cyan); font: 10px/1 "Space Grotesk", sans-serif; }

/* ── Home — Testimonials ──────────────────────────────────────────────── */
.jsi-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jsi-testimonial-card { padding: 26px; border: 1px solid var(--site-line); border-radius: 14px; background: linear-gradient(140deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.jsi-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font: 700 13px/1 "Space Grotesk", sans-serif; }
.jsi-testimonial-avatar.is-gold { background: rgba(255,198,0,.16); border: 1px solid rgba(255,198,0,.5); color: var(--site-gold); }
.jsi-testimonial-avatar.is-cyan { background: rgba(77,232,255,.14); border: 1px solid rgba(77,232,255,.5); color: var(--site-cyan); }
.jsi-testimonial-avatar.is-purple { background: rgba(124,0,255,.16); border: 1px solid rgba(124,0,255,.5); color: #b98bff; }
.jsi-testimonial-card p { margin: 0; color: #fff; font-size: 13.5px; line-height: 1.65; }
.jsi-testimonial-who { display: flex; flex-direction: column; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--site-line); }
.jsi-testimonial-who strong { font: 600 13px/1 "Space Grotesk", sans-serif; color: #fff; }
.jsi-testimonial-who span { margin-top: 4px; color: var(--site-muted); font-size: 11.5px; }

@media (max-width: 900px) {
	.jsi-smartlinks-grid, .jsi-payouts-grid, .jsi-dev-grid { grid-template-columns: 1fr; gap: 36px; }
	.jsi-payouts-grid .jsi-payout-card { max-width: 420px; }
	.jsi-testimonial-grid { grid-template-columns: 1fr; }
	.jsi-home-banner { min-height: 280px; }
}
@media (max-width: 680px) {
	.jsi-home-banner-copy { padding: 32px 0; }
	.jsi-home-banner-stats { gap: 20px; }
	.jsi-smartlink-platforms { grid-template-columns: 1fr; }
	.jsi-dev-code { font-size: 11.5px; padding: 16px; }
}

/* ── Label — artist roster cards (stage name, legal name, DSP links) ─── */
.jsi-label-artist-rows { display: grid; gap: 14px; }
.jsi-label-artist-row { border: 1px solid var(--jsi-line); border-radius: 12px; padding: 16px; background: rgba(255,255,255,.02); display: grid; gap: 12px; }
.jsi-label-artist-row-head { display: flex; align-items: center; justify-content: space-between; }
.jsi-label-artist-row-head b { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; color: var(--jsi-gold); text-transform: uppercase; letter-spacing: .04em; }
.jsi-label-artist-remove { background: none; border: 1px solid var(--jsi-line); color: var(--jsi-text-soft); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 15px; }
.jsi-label-artist-remove:hover { border-color: var(--jsi-error); color: var(--jsi-error); }
.jsi-label-roster-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.jsi-label-roster-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--jsi-text-dim); font-size: 11.5px; text-decoration: none; }
.jsi-label-roster-links a:hover { color: var(--jsi-gold); }

/* ── Label — per-artist price breakdown next to the total ────────────── */
.jsi-label-price-lines { display: grid; gap: 6px; margin-bottom: 10px; }
.jsi-label-price-line { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--jsi-text-dim); padding: 6px 10px; border: 1px solid var(--jsi-line); border-radius: 8px; background: rgba(255,255,255,.02); }
.jsi-label-price-line b { color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.jsi-label-price-total { padding-top: 10px; border-top: 1px dashed var(--jsi-line); }

/* ── Dashboard — prominent "create new release" entry point ──────────── */
.jsi-main-header { flex-wrap: wrap; gap: 14px; }
.jsi-btn-new-release {
	display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 14px 26px;
	box-shadow: 0 14px 34px rgba(255,198,0,.22);
}
.jsi-btn-new-release b { font-size: 18px; line-height: 1; font-weight: 800; }
/* ── User notification bell (dashboard header) ────────────────────────── */
.jsi-bell-wrap { position: relative; }
.jsi-bell-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--jsi-line); background: rgba(255,255,255,.03); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.jsi-bell-badge { position: absolute; top: -3px; right: -3px; background: #e5484d; color: #fff; border-radius: 9px; font: 700 10px/1 "Space Grotesk", sans-serif; padding: 2px 5px; min-width: 15px; text-align: center; }
.jsi-bell-panel { display: none; position: absolute; top: 46px; right: 0; width: 340px; max-height: 420px; overflow-y: auto; background: #14161c; border: 1px solid var(--jsi-line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); z-index: 200; }
.jsi-bell-panel.is-open { display: block; }
.jsi-bell-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--jsi-line); font-size: 13px; color: #fff; }
.jsi-bell-item { padding: 12px 16px; border-bottom: 1px solid var(--jsi-line); font-size: 12.5px; color: var(--jsi-text-dim); }
.jsi-bell-item.is-unread { background: rgba(255,198,0,.06); color: #fff; }
.jsi-bell-item .jsi-bell-time { display: block; margin-top: 4px; color: var(--jsi-muted); font-size: 11px; }
.jsi-bell-empty { padding: 24px; text-align: center; color: var(--jsi-muted); font-size: 12.5px; }
.jsi-nav-item-cta {
	margin: 6px 14px 10px; padding: 11px 14px !important; border-radius: 10px;
	background: var(--jsi-gold); color: #0a0512 !important; text-align: center; font-weight: 700;
	border-left: none !important;
}
.jsi-nav-item-cta:hover { background: #ffd633; color: #0a0512 !important; }

/* ── Defensive contrast safety-net: any solid (non-dim) gold surface always
   keeps dark text, even if a parent theme/reset tries to force a lighter
   color back onto it. Belt-and-braces for the exact "white text vanishing
   on a solid gold background" class of bug. ───────────────────────────── */
.jsi-btn-primary,
.jsi-package-badge,
.jsi-home-button.is-primary,
.jsi-view-btn.is-active,
.jsi-page-btn.is-active,
.jsi-nav-item-cta,
.jsi-btn-new-release {
	color: #0a0512 !important;
}
.jsi-btn-primary *, .jsi-home-button.is-primary *, .jsi-btn-new-release * { color: inherit !important; }

/* ══════════════════════════════════════════════════════════════════════
   JSI Distribute — App Shell & Premium Native-Feel Layer
   Added on top of the design system above. Nothing below removes or
   renames a class the JS relies on — it only re-styles, repositions and
   adds new, purely-decorative structure (icons, bottom nav, drawer,
   scrims) so every existing selector in jsi-*.js keeps working untouched.
   ══════════════════════════════════════════════════════════════════════ */

:root { --jsi-ease: cubic-bezier(.16,1,.3,1); --jsi-ease-spring: cubic-bezier(.34,1.56,.64,1); }

.jsi-shell, .jsi-site-body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}
.jsi-shell ::selection, .jsi-site-body ::selection { background: var(--jsi-gold, #ffc600); color: #0a0512; }

/* Slightly richer surfaces + deeper, softer shadows across the board —
   the single biggest lever for "premium native app" vs "web form". */
.jsi-shell {
	border-radius: 22px;
	box-shadow: 0 40px 120px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.03) inset;
}
.jsi-card, .jsi-panel, .jsi-modal, .jsi-type-card, .jsi-package-card,
.jsi-review-card, .jsi-cat-card, .jsi-audio-row, .jsi-featured-row,
.jsi-repeat-row, .jsi-review-media-item, .jsi-auth-card, .jsi-label-artist-row {
	border-radius: 18px !important;
	transition: transform .22s var(--jsi-ease), border-color .22s var(--jsi-ease), box-shadow .22s var(--jsi-ease), background .22s var(--jsi-ease);
}
.jsi-card, .jsi-panel { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -20px rgba(0,0,0,.6); }
.jsi-btn { transition: transform .16s var(--jsi-ease-spring), box-shadow .2s var(--jsi-ease), background .2s var(--jsi-ease), border-color .2s var(--jsi-ease); }
.jsi-btn:active { transform: scale(.96); }
.jsi-type-card:active, .jsi-package-card:active, .jsi-cat-card:active,
.jsi-nav-item:active, .jsi-bottom-nav a:active { transform: scale(.98); }

/* ── Icons inside nav items (added inline as <svg> in the shell templates) ── */
.jsi-nav-icon, .jsi-bottom-nav-icon { display: inline-flex; flex-shrink: 0; }
.jsi-nav-icon svg, .jsi-bottom-nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jsi-bottom-nav-icon svg { width: 22px; height: 22px; }

/* ══════════════════════ Dashboard app shell ══════════════════════════ */
.jsi-dashboard {
	--app-header-h: 64px;
	--bottom-nav-h: 64px;
	grid-template-columns: 248px 1fr;
	align-items: start;
	min-height: 100dvh;
}
.jsi-nav {
	position: sticky; top: 0; align-self: start; height: 100dvh;
	display: flex; flex-direction: column;
	background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.15));
	backdrop-filter: blur(16px);
	padding: 22px 0 16px;
}
.jsi-nav-brand {
	display: flex; align-items: center; gap: 10px;
	padding: 0 20px 22px; margin-bottom: 6px; border-bottom: 1px solid var(--jsi-line);
}
.jsi-nav-brand::before {
	content: ''; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
	background: linear-gradient(135deg, var(--jsi-gold), #a4790f);
	box-shadow: 0 6px 16px rgba(255,198,0,.25);
}
.jsi-nav { gap: 0; }
.jsi-nav nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; flex: 1; overflow-y: auto; }
.jsi-nav-item {
	display: flex !important; align-items: center; gap: 12px;
	border-left: none !important; border-radius: 12px !important;
	padding: 11px 14px !important; position: relative;
}
.jsi-nav-item.is-active { background: var(--jsi-gold-dim); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.jsi-nav-item.is-active::after { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--jsi-gold); }
.jsi-nav-item-cta { margin: 10px 10px 6px !important; }

/* App top bar — lives inside <main>, so it appears once and works at every
   breakpoint: full mobile bar (hamburger + title + bell) on small screens,
   a slim bell-only strip above the desktop sidebar's content on large ones. */
.jsi-app-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 6px; }
.jsi-app-topbar-left { display: none; align-items: center; gap: 10px; min-width: 0; }

@media (min-width: 721px) {
	.jsi-drawer-scrim, .jsi-drawer-close, .jsi-drawer-toggle { display: none !important; }
	.jsi-bottom-nav { display: none !important; }
}

@media (max-width: 720px) {
	.jsi-dashboard { display: block; }
	.jsi-app-topbar {
		justify-content: space-between;
		position: sticky; top: 0; z-index: 60; height: var(--app-header-h);
		margin: -16px -14px 10px; padding: 0 14px; padding-top: env(safe-area-inset-top);
		background: rgba(10,5,18,.82); backdrop-filter: blur(18px);
		border-bottom: 1px solid var(--jsi-line);
	}
	.jsi-app-topbar-left { display: flex; min-width: 0; }
	.jsi-drawer-toggle {
		width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--jsi-line);
		background: rgba(255,255,255,.04); color: #fff; display: flex; align-items: center; justify-content: center;
		flex-shrink: 0; cursor: pointer;
	}
	.jsi-app-topbar-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* Sidebar becomes a slide-in drawer */
	.jsi-nav {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; height: 100dvh;
		width: min(82vw, 300px); border-right: 1px solid var(--jsi-line);
		background: linear-gradient(180deg, var(--jsi-bg-alt), var(--jsi-bg));
		transform: translateX(-104%); transition: transform .32s var(--jsi-ease);
		padding-top: max(20px, env(safe-area-inset-top));
		box-shadow: 40px 0 80px rgba(0,0,0,.5);
	}
	.jsi-nav.is-open { transform: translateX(0); }
	.jsi-drawer-scrim {
		position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
		opacity: 0; pointer-events: none; transition: opacity .3s var(--jsi-ease);
	}
	.jsi-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
	.jsi-drawer-close {
		position: absolute; top: max(16px, env(safe-area-inset-top)); right: 14px;
		width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--jsi-line);
		background: rgba(255,255,255,.05); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
	}

	.jsi-main { padding: 16px 14px calc(var(--bottom-nav-h) + 26px); }
	/* Existing header inside <main> stays but the topbar above now owns the
	   brand/menu row, so give it a touch less top weight on mobile. */
	.jsi-main-header h2 { font-size: 19px; }

	/* Bottom tab bar — 5 primary destinations + center FAB */
	.jsi-bottom-nav {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
		display: flex; align-items: stretch; justify-content: space-around;
		height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: rgba(10,5,18,.86); backdrop-filter: blur(20px);
		border-top: 1px solid var(--jsi-line);
		box-shadow: 0 -10px 30px rgba(0,0,0,.35);
	}
	.jsi-bottom-nav a {
		flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; text-decoration: none; color: var(--jsi-text-soft); font-size: 10px; font-weight: 600;
		letter-spacing: .01em;
	}
	.jsi-bottom-nav a.is-active { color: var(--jsi-gold); }
	.jsi-bottom-nav a.is-fab { flex: 0 0 auto; width: 56px; margin-top: -22px; }
	.jsi-bottom-nav a.is-fab span.jsi-bottom-nav-icon {
		width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center;
		background: linear-gradient(160deg, var(--jsi-gold), #d69f00); color: #0a0512;
		box-shadow: 0 12px 26px rgba(255,198,0,.4), 0 0 0 6px var(--jsi-bg);
	}
	.jsi-bottom-nav a.is-fab span.jsi-bottom-nav-icon svg { width: 24px; height: 24px; stroke: #0a0512; stroke-width: 2.4; }
	.jsi-bottom-nav a.is-fab { color: var(--jsi-text-dim); font-weight: 700; }

	/* Stat cards become a horizontally-snapping strip, app-widget style */
	.jsi-cards {
		display: flex; grid-template-columns: none; gap: 12px; margin: 0 -14px 22px; padding: 0 14px 4px;
		overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	}
	.jsi-cards::-webkit-scrollbar { display: none; }
	.jsi-cards .jsi-card { flex: 0 0 66vw; max-width: 240px; scroll-snap-align: start; }

	/* Modals become bottom sheets on mobile — pure CSS, JS only toggles display */
	.jsi-modal-overlay { align-items: flex-end; padding: 0; }
	.jsi-modal { max-width: 100% !important; width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0 !important; animation: jsi-sheet-up .28s var(--jsi-ease); }
	@keyframes jsi-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ══════════════════════ Public site header — floating glass bar ══════ */
@media (min-width: 721px) {
	.jsi-site-header {
		position: sticky; top: 14px; z-index: 60;
		width: min(1240px, calc(100% - 56px)); margin: 0 auto;
		border: 1px solid var(--site-line); border-radius: 999px;
		background: rgba(14,16,23,.72);
	}
	.jsi-site-header-inner { width: 100%; padding: 0 10px 0 22px; min-height: 62px; }
}

/* Body scroll-lock helper (added by the small toggle script below) */
.jsi-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.jsi-nav, .jsi-drawer-scrim, .jsi-modal, .jsi-btn, .jsi-card, .jsi-panel { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Accent retheme — purple, app-native (in-app / logged-in surfaces only).
   The marketing site (.jsi-site / .jsi-home) keeps its gold identity above;
   this block only repaints the dashboard + wizards + auth + all "app"
   screens the artist actually lives in day to day, to match the reference
   product direction. Every rule below simply overrides the CSS custom
   property values already used throughout the file — no selectors, no
   markup, no JS is touched, so nothing that worked before stops working. */
.jsi-shell {
	--jsi-gold: #7c5cff;
	--jsi-gold-dim: rgba(124,92,255,.14);
	--jsi-gold-line: rgba(124,92,255,.4);
}
.jsi-btn-primary, .jsi-nav-item-cta, .jsi-btn-new-release,
.jsi-view-btn.is-active, .jsi-page-btn.is-active, .jsi-package-badge {
	background: linear-gradient(135deg, #8a6bff, #6836f5) !important;
	box-shadow: 0 12px 28px rgba(104,54,245,.35) !important;
	color: #fff !important;
}
.jsi-nav-brand::before { background: linear-gradient(135deg, #8a6bff, #6836f5); box-shadow: 0 6px 16px rgba(104,54,245,.35); }
@media (max-width: 720px) {
	.jsi-bottom-nav a.is-fab span.jsi-bottom-nav-icon {
		background: linear-gradient(160deg, #8a6bff, #6836f5); color: #fff;
		box-shadow: 0 12px 26px rgba(104,54,245,.45), 0 0 0 6px var(--jsi-bg);
	}
	.jsi-bottom-nav a.is-fab span.jsi-bottom-nav-icon svg { stroke: #fff; }
}

/* ══════════════════════ Light theme (opt-in via [data-jsi-theme="light"]) ══
   Toggled from the account menu / settings; persisted client-side. Overrides
   only the CSS variables the rest of the file already consumes, so every
   component above (cards, panels, buttons, tables, modals…) repaints
   automatically — no duplicate component rules needed. */
[data-jsi-theme="light"] .jsi-shell {
	--jsi-bg: #f5f4fb;
	--jsi-bg-alt: #ffffff;
	--jsi-panel: rgba(20,10,50,.035);
	--jsi-panel-hover: rgba(20,10,50,.06);
	--jsi-text: #171226;
	--jsi-text-dim: rgba(23,18,38,.68);
	--jsi-text-soft: rgba(23,18,38,.48);
	--jsi-line: rgba(23,18,38,.10);
}
[data-jsi-theme="light"] .jsi-shell { box-shadow: 0 30px 90px rgba(90,60,180,.14), 0 2px 0 rgba(255,255,255,.6) inset; }
[data-jsi-theme="light"] .jsi-shell h2, [data-jsi-theme="light"] .jsi-shell h3 { background: linear-gradient(180deg, #171226 0%, #6836f5 160%); -webkit-background-clip: text; background-clip: text; }
[data-jsi-theme="light"] .jsi-shell h3 { -webkit-text-fill-color: var(--jsi-text); background: none; }
[data-jsi-theme="light"] .jsi-field input, [data-jsi-theme="light"] .jsi-field select, [data-jsi-theme="light"] .jsi-field textarea,
[data-jsi-theme="light"] .jsi-split-row select, [data-jsi-theme="light"] .jsi-split-row input,
[data-jsi-theme="light"] .jsi-picker-trigger, [data-jsi-theme="light"] .jsi-catalog-search input, [data-jsi-theme="light"] .jsi-catalog-filters select {
	background: #fff;
}
[data-jsi-theme="light"] .jsi-field select option, [data-jsi-theme="light"] .jsi-split-row select option { background: #fff; color: #171226; }
[data-jsi-theme="light"] .jsi-nav { background: linear-gradient(180deg, #fff, #f2effc); }
[data-jsi-theme="light"] .jsi-app-topbar { background: rgba(255,255,255,.86); }
[data-jsi-theme="light"] .jsi-bottom-nav { background: rgba(255,255,255,.92); }
[data-jsi-theme="light"] .jsi-modal, [data-jsi-theme="light"] .jsi-artist-results { background: #fff; }
[data-jsi-theme="light"] .jsi-bell-panel { background: #fff; }
[data-jsi-theme="light"] .jsi-doc-code, [data-jsi-theme="light"] .jsi-dev-code { background: #12101c; color: #e7e4f5; }

.jsi-theme-toggle {
	display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--jsi-line);
	background: rgba(255,255,255,.04); color: var(--jsi-text-dim); border-radius: 999px;
	padding: 7px 12px 7px 7px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.jsi-theme-toggle .jsi-theme-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--jsi-gold-dim); }
.jsi-theme-toggle svg { width: 13px; height: 13px; stroke: var(--jsi-gold); fill: none; stroke-width: 2; }

/* Give every standalone shell page (catalog, checkout, label, onboarding,
   release wizard, developer portal, account security) the same bottom
   clearance the dashboard already has, so the shared fixed bottom-nav
   partial never covers their last row of content or a sticky footer bar. */
@media (max-width: 720px) {
	.jsi-catalog, .jsi-checkout, .jsi-label-page, .jsi-onboarding,
	.jsi-release-wizard, .jsi-developer-portal, .jsi-account-security {
		padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom) + 28px) !important;
	}
	.jsi-wizard-nav { margin-bottom: 0; }
}

/* ══════════════════════ Final app-wide polish ═══════════════════════════
   The authenticated experience is one black, app-like surface. The public
   header is intentionally kept separate for signed-out visitors; once an
   artist is signed in, this header and bottom navigation are rendered by the
   site shell around every page. */
.jsi-site-body,
.jsi-site-body .jsi-site,
.jsi-site-body .jsi-home,
.jsi-site-body .jsi-shell {
	background-color: #000;
}
.jsi-site-body,
.jsi-site-body *,
.jsi-shell,
.jsi-shell * {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}
.jsi-shell {
	--jsi-bg: #050505;
	--jsi-bg-alt: #090909;
	--jsi-purple-glow: rgba(124,92,255,.045);
	background-image: linear-gradient(180deg, rgba(255,255,255,.012), transparent 35%), var(--jsi-bg);
}
.jsi-site {
	background: #000 !important;
}

/* Authenticated global header */
.jsi-app-global-header {
	position: sticky;
	top: 0;
	z-index: 1001;
	pointer-events: auto;
	background: rgba(0,0,0,.94);
	border-bottom: 1px solid rgba(255,255,255,.1);
	backdrop-filter: blur(20px);
}
.jsi-app-global-header-inner {
	width: min(1240px, calc(100% - 40px));
	min-height: 74px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
}
.jsi-global-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 12px;
	background: rgba(255,255,255,.04);
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	pointer-events: auto;
}
.jsi-global-menu-toggle:hover,
.jsi-global-menu-toggle:focus-visible {
	border-color: #7c5cff;
	background: rgba(124,92,255,.14);
	outline: none;
}
.jsi-global-menu-icon,
.jsi-global-menu-icon svg,
.jsi-global-drawer-close svg {
	display: block;
	width: 22px;
	height: 22px;
}
.jsi-global-menu-icon svg,
.jsi-global-drawer-close svg {
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.jsi-app-global-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: #fff;
	text-decoration: none;
	min-width: 0;
}
.jsi-app-global-brand .jsi-site-mark {
	width: 40px;
	height: 40px;
	border-color: #ffc600;
	background: rgba(255,255,255,.03);
}
.jsi-app-global-brand-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.jsi-app-global-brand-copy strong {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.jsi-app-global-brand-copy small {
	color: rgba(255,255,255,.5);
	font-size: 10px;
	letter-spacing: .04em;
}
.jsi-app-global-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.jsi-app-global-actions .jsi-bell-btn {
	color: #fff;
}
.jsi-app-global-actions .jsi-bell-btn svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.jsi-app-global-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;
	background: linear-gradient(145deg, #8a6bff, #4b25c5);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.jsi-global-drawer-scrim {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0,0,0,.62);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.jsi-global-drawer-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}
.jsi-global-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 9999;
	width: min(320px, 86vw);
	padding: 24px 14px;
	background: #080808;
	border-right: 1px solid rgba(255,255,255,.12);
	box-shadow: 30px 0 80px rgba(0,0,0,.65);
	transform: translateX(-105%);
	transition: transform .28s var(--jsi-ease);
}
.jsi-global-drawer.is-open { transform: translateX(0); }
.jsi-global-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 18px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	color: #fff;
	font-size: 17px;
}
.jsi-global-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 50%;
	background: rgba(255,255,255,.04);
	cursor: pointer;
}
.jsi-global-drawer nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 14px;
}
.jsi-global-drawer nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px;
	border-radius: 11px;
	color: rgba(255,255,255,.7);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	touch-action: manipulation;
}
.jsi-global-drawer nav a:hover,
.jsi-global-drawer nav a:focus-visible {
	background: rgba(124,92,255,.14);
	color: #fff;
	outline: none;
}
.jsi-global-drawer nav a.is-create {
	margin: 7px 0;
	background: linear-gradient(135deg, #8a6bff, #6836f5);
	color: #fff;
	box-shadow: 0 10px 24px rgba(104,54,245,.24);
}
.jsi-global-drawer nav a.is-logout {
	margin-top: auto;
	color: #ff8e8e;
}
.jsi-global-drawer .jsi-nav-icon svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
}

/* Larger, dark app controls — scoped to page content so the global header
   and bottom navigation retain their compact mobile proportions. */
.jsi-wizard-body {
	font-size: 16px;
	line-height: 1.6;
	color-scheme: dark;
}
.jsi-wizard-body .jsi-muted,
.jsi-wizard-body .jsi-field-hint {
	font-size: 15px;
	line-height: 1.65;
}
.jsi-wizard-body .jsi-field label,
.jsi-wizard-body .jsi-field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.55;
}
.jsi-wizard-body .jsi-field input[type="text"],
.jsi-wizard-body .jsi-field input[type="url"],
.jsi-wizard-body .jsi-field input[type="date"],
.jsi-wizard-body .jsi-field select,
.jsi-wizard-body .jsi-field textarea,
.jsi-wizard-body .jsi-repeat-row input[type="text"],
.jsi-wizard-body .jsi-repeat-row select,
.jsi-wizard-body .jsi-split-row input,
.jsi-wizard-body .jsi-split-row select {
	min-height: 50px;
	padding: 13px 15px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 12px;
	background: #0b0b0b;
	color: #f5f5f5;
	font-size: 16px;
	line-height: 1.35;
	box-sizing: border-box;
}
.jsi-wizard-body .jsi-repeat-row select option,
.jsi-wizard-body .jsi-field select option,
.jsi-wizard-body .jsi-split-row select option {
	background: #0b0b0b;
	color: #f5f5f5;
}
.jsi-wizard-body .jsi-repeat-row {
	padding: 13px;
	border-radius: 14px;
	background: #090909;
}
.jsi-wizard-body .jsi-repeat-row input::placeholder,
.jsi-wizard-body input::placeholder {
	color: rgba(255,255,255,.48);
}
.jsi-wizard-body .jsi-picker-trigger {
	min-height: 50px;
	font-size: 16px;
	padding: 13px 15px;
	background: #0b0b0b;
	color: #f5f5f5;
	border-color: rgba(255,255,255,.16);
}
.jsi-wizard-body .jsi-btn {
	font-size: 15px;
}
.jsi-wizard-body .jsi-error-line,
.jsi-wizard-body .jsi-field-errors {
	font-size: 14px;
	line-height: 1.55;
}

/* Replace the browser's white, platform-specific file control with a
   consistent app control. The input remains in the DOM for the existing
   upload handler and the label still opens the native file picker. */
.jsi-wizard-body input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}
.jsi-wizard-body .jsi-file-picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 4px 0 10px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}
.jsi-file-picker-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(164,143,255,.7);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(124,92,255,.08));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.jsi-file-picker-copy {
	color: rgba(255,255,255,.52);
	font-size: 13px;
}
.jsi-file-picker:hover .jsi-file-picker-button,
.jsi-file-picker:focus-within .jsi-file-picker-button {
	border-color: #a48fff;
	background: rgba(124,92,255,.25);
}
.jsi-license-doc-current {
	font-size: 14px;
	line-height: 1.5;
}
.jsi-audio-file-picker {
	margin-top: 8px;
	margin-bottom: 10px;
}

/* Final mobile reliability pass */
.jsi-app-global-avatar.has-image {
	overflow: hidden;
	background: #111;
}
.jsi-app-global-avatar.has-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jsi-artwork-dropzone {
	display: block;
}
.jsi-upload-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: 18px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 14px;
	background: #090909;
	color: rgba(255,255,255,.65);
	font-size: 15px;
	line-height: 1.55;
}
.jsi-upload-empty strong {
	color: #fff;
	font-size: 16px;
}
.jsi-upload-empty-action {
	margin-top: 5px;
}
.jsi-main-header h2 {
	font-size: 30px;
	line-height: 1.2;
}

@media (max-width: 720px) {
	.jsi-app-global-header .jsi-bell-panel {
		position: fixed !important;
		top: auto !important;
		left: 12px !important;
		right: 12px !important;
		bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom) + 12px) !important;
		width: auto !important;
		max-width: none !important;
		max-height: min(70vh, 520px) !important;
		border-radius: 16px !important;
		z-index: 10000 !important;
	}
	.jsi-app-global-header .jsi-bell-panel.is-open {
		display: block !important;
	}
	.jsi-main-header h2 {
		font-size: 25px;
	}
}

/* The fixed tab bar belongs to the document, not to one shortcode. */
@media (max-width: 720px) {
	.jsi-app-global-header-inner {
		width: calc(100% - 28px);
		min-height: 66px;
		gap: 11px;
	}
	.jsi-app-global-brand-copy small { display: none; }
	.jsi-app-global-brand-copy strong { font-size: 11px; letter-spacing: .08em; }
	.jsi-app-global-brand .jsi-site-mark { width: 36px; height: 36px; }
	.jsi-bottom-nav {
		background: rgba(0,0,0,.94);
		border-top-color: rgba(255,255,255,.14);
	}
	.jsi-bottom-nav a { color: rgba(255,255,255,.66); font-size: 10.5px; }
	.jsi-bottom-nav a.is-active { color: #a48fff; }
	.jsi-bottom-nav a.is-fab span.jsi-bottom-nav-icon {
		box-shadow: 0 12px 26px rgba(104,54,245,.45), 0 0 0 6px #000;
	}
	.jsi-steps {
		margin-right: -16px;
		padding-right: 16px;
	}
	.jsi-step-tab { padding-left: 12px; padding-right: 12px; }
}

/* Catalogue cards use the artwork as the visual anchor, edge to edge. */
.jsi-catalog-grid[data-view="grid"] .jsi-cat-card-head {
	align-items: stretch;
}
.jsi-catalog-grid[data-view="grid"] .jsi-cat-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
}
.jsi-catalog-grid[data-view="grid"] .jsi-cat-thumb img {
	object-fit: cover;
}
.jsi-catalog-grid[data-view="grid"] .jsi-cat-card-info {
	text-align: left;
}