/* =========================================================================
   Ogou Music — front-end styles
   Fire + iron identity. Modern glass, molten gradients, deep space black.
   Scoped under .ogou so it never leaks into the host theme.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

.ogou {
	--ogou-bg: #08080c;
	--ogou-surface: #101017;
	--ogou-card: #14141d;
	--ogou-card-2: #1b1b26;
	--ogou-brand: #ff5a1f;
	--ogou-glow: #ffb020;
	--ogou-gold: #ffb020;
	--ogou-text: #f3f2f7;
	--ogou-muted: #8f8fa2;
	--ogou-border: rgba(255, 255, 255, .08);
	--ogou-danger: #ff3d57;
	--ogou-fire: linear-gradient(120deg, #ff5a1f, #ffb020);
	--ogou-r: 18px;

	color: var(--ogou-text);
	font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.55;
	box-sizing: border-box;
}
.ogou *, .ogou *::before, .ogou *::after { box-sizing: inherit; }
.ogou h1, .ogou h2, .ogou h3, .ogou h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.02em; }

/* ---------- Buttons ---------- */
.ogou-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--ogou-fire);
	color: #140f08;
	border: none;
	border-radius: 12px;
	padding: 12px 22px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .14s ease, box-shadow .25s ease, filter .2s ease;
	box-shadow: 0 8px 22px rgba(255, 90, 31, .30);
}
.ogou-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 90, 31, .42); color: #140f08; filter: brightness(1.03); }
.ogou-btn-block { width: 100%; }
.ogou-btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 10px; }
.ogou-btn-outline {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--ogou-border);
	color: var(--ogou-text);
	box-shadow: none;
}
.ogou-btn-outline:hover { border-color: var(--ogou-brand); color: #fff; background: rgba(255, 90, 31, .08); box-shadow: none; }

/* ---------- Auth ---------- */
.ogou-auth-box {
	max-width: 420px;
	margin: 40px auto;
	background: var(--ogou-card);
	border: 1px solid var(--ogou-border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.ogou-auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.ogou-auth-tab {
	flex: 1;
	background: var(--ogou-card-2);
	border: 1px solid var(--ogou-border);
	color: var(--ogou-muted);
	padding: 10px;
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
}
.ogou-auth-tab.active { background: var(--ogou-brand); border-color: var(--ogou-brand); color: #fff; }
.ogou-auth-form label { display: block; margin: 12px 0 5px; font-size: 13px; color: var(--ogou-muted); }
.ogou-check { display: flex; align-items: center; gap: 8px; }
.ogou-alert {
	background: rgba(255, 77, 79, .12);
	border: 1px solid var(--ogou-danger);
	color: #ffb4b5;
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 14px;
	font-size: 14px;
}

/* ---------- Inputs (scoped) ---------- */
.ogou input[type="text"],
.ogou input[type="email"],
.ogou input[type="password"],
.ogou input[type="number"],
.ogou input[type="file"],
.ogou select {
	width: 100%;
	background: #101018;
	color: var(--ogou-text);
	border: 1px solid var(--ogou-border);
	border-radius: 9px;
	padding: 11px 12px;
	font-size: 15px;
	outline: none;
	transition: border-color .15s ease;
}
.ogou input:focus, .ogou select:focus { border-color: var(--ogou-brand); }
.ogou input::placeholder { color: #5f5f6d; }

/* ---------- Dashboard layout ---------- */
.ogou-dash {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 26px;
	max-width: 1100px;
	margin: 30px auto;
	background: var(--ogou-bg);
	padding: 24px;
	border-radius: 18px;
	border: 1px solid var(--ogou-border);
}
.ogou-profile {
	background: var(--ogou-card);
	border: 1px solid var(--ogou-border);
	border-radius: 14px;
	padding: 22px;
	text-align: center;
	height: fit-content;
}
.ogou-avatar {
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ogou-brand);
	margin-bottom: 10px;
}
.ogou-profile h3 { margin: 6px 0 16px; }
.ogou-balance {
	background: var(--ogou-card-2);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 18px;
}
.ogou-balance-label { display: block; color: var(--ogou-muted); font-size: 12px; }
.ogou-balance-amount { display: block; color: var(--ogou-gold); font-size: 22px; font-weight: 800; margin: 4px 0 12px; }

.ogou-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ogou-stats li { background: var(--ogou-card-2); border-radius: 10px; padding: 10px; }
.ogou-stats strong { display: block; font-size: 18px; color: var(--ogou-text); }
.ogou-stats span { font-size: 11px; color: var(--ogou-muted); text-transform: uppercase; letter-spacing: .5px; }
.ogou-logout { display: inline-block; margin-top: 16px; color: var(--ogou-muted); font-size: 13px; }

.ogou-content-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ogou-content-head h2 { margin: 0; flex: 1; }

/* ---------- Track grid ---------- */
.ogou-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.ogou-card {
	background: var(--ogou-card);
	border: 1px solid var(--ogou-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease;
}
.ogou-card:hover { transform: translateY(-4px); border-color: var(--ogou-brand); }
.ogou-cover {
	height: 170px;
	background: #0d0d14 center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
}
.ogou-cover-fallback { font-size: 46px; color: var(--ogou-border); }
.ogou-card-body { padding: 14px; }
.ogou-card-body h4 { margin: 0 0 8px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ogou-genre { color: var(--ogou-brand); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.ogou-price { color: var(--ogou-gold); font-weight: 700; font-size: 14px; }
.ogou-card-stats { color: var(--ogou-muted); font-size: 12px; margin-bottom: 10px; }
.ogou-del {
	background: transparent; border: 1px solid var(--ogou-border);
	color: var(--ogou-danger); border-radius: 8px; padding: 6px 12px;
	font-size: 12px; cursor: pointer; width: 100%;
}
.ogou-del:hover { background: rgba(255, 77, 79, .12); border-color: var(--ogou-danger); }
.ogou-empty { color: var(--ogou-muted); padding: 24px; text-align: center; background: var(--ogou-card); border-radius: 12px; }

/* ---------- Upload form ---------- */
.ogou-form { background: var(--ogou-card); border: 1px solid var(--ogou-border); border-radius: 14px; padding: 22px; }
.ogou-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.ogou-form label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--ogou-muted); }
.ogou-form-msg { min-height: 20px; margin: 8px 0; font-size: 14px; }
.ogou-form-msg.is-error { color: #ffb4b5; }
.ogou-form-msg.is-ok { color: #7ee0a5; }

.ogou-progress { margin: 12px 0; }
.ogou-progress-bar { height: 12px; background: var(--ogou-card-2); border-radius: 8px; overflow: hidden; }
.ogou-progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ogou-brand), var(--ogou-glow)); transition: width .2s ease; }
.ogou-progress-txt { display: block; font-size: 12px; color: var(--ogou-muted); margin-top: 5px; font-style: normal; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
	.ogou-dash { grid-template-columns: 1fr; }
	.ogou-form-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Phase 5 — public store, single track, and mini-player
   ========================================================================= */

/* ---------- Store ---------- */
.ogou-store { max-width: 1140px; margin: 24px auto; }
.ogou-search { display: flex; gap: 10px; margin-bottom: 16px; }
.ogou-search input[type="search"] { flex: 1; }
.ogou-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ogou-pill {
	display: inline-block; padding: 6px 14px; border-radius: 20px;
	background: var(--ogou-card); border: 1px solid var(--ogou-border);
	color: var(--ogou-muted); font-size: 13px; font-weight: 700; text-decoration: none;
}
.ogou-pill:hover { color: var(--ogou-text); border-color: var(--ogou-brand); }
.ogou-pill.active { background: var(--ogou-brand); border-color: var(--ogou-brand); color: #fff; }

.ogou-grid-public { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Play overlay on covers */
.ogou-cover { position: relative; }
.ogou-play-overlay {
	position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
	border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.35);
	color: #fff; font-size: 20px; cursor: pointer; opacity: 0;
	transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(3px);
	display: flex; align-items: center; justify-content: center;
}
.ogou-card:hover .ogou-play-overlay { opacity: 1; }
.ogou-play-overlay:hover { background: var(--ogou-brand); border-color: var(--ogou-brand); transform: scale(1.08); }
.ogou-play-overlay.big { opacity: 1; width: 76px; height: 76px; font-size: 28px; }

.ogou-artist { color: var(--ogou-muted); font-size: 13px; margin-bottom: 6px; }
.ogou-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ogou-icon-btn {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ogou-border);
	background: transparent; color: var(--ogou-text); cursor: pointer; font-size: 15px;
}
.ogou-icon-btn:hover { border-color: var(--ogou-brand); color: var(--ogou-brand); }

.ogou-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 26px; }
.ogou-page {
	min-width: 36px; text-align: center; padding: 7px 10px; border-radius: 8px;
	background: var(--ogou-card); border: 1px solid var(--ogou-border);
	color: var(--ogou-muted); text-decoration: none; font-weight: 700;
}
.ogou-page.active, .ogou-page:hover { background: var(--ogou-brand); border-color: var(--ogou-brand); color: #fff; }

/* ---------- Single track ---------- */
.ogou-single { max-width: 960px; margin: 30px auto; }
.ogou-single-inner { display: grid; grid-template-columns: 340px 1fr; gap: 32px; }
.ogou-single-cover {
	position: relative; aspect-ratio: 1/1; border-radius: 16px;
	background: var(--ogou-card) center/cover no-repeat; border: 1px solid var(--ogou-border);
	display: flex; align-items: center; justify-content: center;
}
.ogou-single-info h1 { margin: 6px 0 2px; font-size: 30px; }
.ogou-single-info .ogou-artist { font-size: 18px; margin-bottom: 16px; }
.ogou-credits { list-style: none; padding: 0; margin: 0 0 18px; color: var(--ogou-muted); font-size: 14px; }
.ogou-credits li { margin-bottom: 4px; }
.ogou-single-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ogou-price.big { font-size: 22px; color: var(--ogou-gold); font-weight: 800; }
.ogou-embed-box summary { cursor: pointer; color: var(--ogou-muted); font-size: 13px; }
.ogou-embed-box textarea { width: 100%; margin-top: 8px; height: 70px; font-size: 12px; }

/* ---------- Mini-player ---------- */
.ogou-mini {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99998;
	display: none; align-items: center; gap: 14px;
	background: rgba(16,16,24,.96); backdrop-filter: blur(12px);
	border-top: 1px solid var(--ogou-border);
	padding: 10px 16px;
}
.ogou-mini.is-visible { display: flex; }
.ogou-mini-cover { width: 46px; height: 46px; border-radius: 8px; background: #16161f center/cover no-repeat; flex: 0 0 auto; }
.ogou-mini-info { min-width: 0; width: 190px; }
.ogou-mini-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-mini-artist { color: var(--ogou-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-mini-play {
	width: 44px; height: 44px; border-radius: 50%; border: none; flex: 0 0 auto;
	background: linear-gradient(135deg, var(--ogou-brand), var(--ogou-glow)); color: #fff;
	font-size: 16px; cursor: pointer;
}
.ogou-mini-seek { display: flex; align-items: center; gap: 10px; flex: 1; }
.ogou-mini-seek input[type="range"] { flex: 1; accent-color: var(--ogou-brand); }
.ogou-mini-seek span { font-size: 12px; color: var(--ogou-muted); min-width: 34px; }
.ogou-mini-badge { background: var(--ogou-brand); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: .5px; }
.ogou-mini-close { background: transparent; border: none; color: var(--ogou-muted); font-size: 22px; cursor: pointer; flex: 0 0 auto; }

@media (max-width: 820px) {
	.ogou-single-inner { grid-template-columns: 1fr; }
	.ogou-mini-info { width: 130px; }
	.ogou-mini-seek span { display: none; }
}

/* =========================================================================
   Phase 6 — checkout modal, flash notices, library
   ========================================================================= */
.ogou-modal-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ogou-modal {
	position: relative; width: 100%; max-width: 400px;
	background: var(--ogou-card); border: 1px solid var(--ogou-border);
	border-radius: 16px; padding: 26px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.ogou-modal h3 { margin: 0 0 14px; }
.ogou-modal label { display: block; font-size: 13px; color: var(--ogou-muted); margin: 10px 0 5px; }
.ogou-modal-price { font-size: 26px; font-weight: 800; color: var(--ogou-gold); margin: 6px 0 14px; }
.ogou-modal-x {
	position: absolute; top: 12px; right: 14px; background: transparent; border: none;
	color: var(--ogou-muted); font-size: 24px; cursor: pointer; line-height: 1;
}
.ogou-gw-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.ogou-gw {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px;
	background: var(--ogou-card-2); border: 1px solid var(--ogou-border);
	border-radius: 10px; cursor: pointer; color: var(--ogou-text); margin: 0;
}
.ogou-gw:hover { border-color: var(--ogou-brand); }
.ogou-modal-msg { min-height: 18px; font-size: 13px; color: #ffb4b5; margin: 6px 0 10px; }

.ogou-flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; }
.ogou-flash.ok { background: rgba(126,224,165,.14); border: 1px solid #2ecc71; color: #9be9bd; }
.ogou-flash.warn { background: rgba(255,204,85,.14); border: 1px solid #ffcc55; color: #ffdd88; }
.ogou-flash.err { background: rgba(255,77,79,.14); border: 1px solid var(--ogou-danger); color: #ffb4b5; }

.ogou-library { max-width: 1140px; margin: 24px auto; }

/* Phase 7 — payout history in dashboard */
.ogou-payouts { margin-top: 14px; text-align: left; }
.ogou-payouts summary { cursor: pointer; color: var(--ogou-muted); font-size: 13px; }
.ogou-payout-list { list-style: none; padding: 0; margin: 10px 0 0; }
.ogou-payout-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ogou-border); font-size: 13px; }
.ogou-wd-status { font-weight: 700; font-size: 11px; text-transform: uppercase; }
.ogou-wd-pending { color: var(--ogou-brand); }
.ogou-wd-paid { color: #2ecc71; }
.ogou-wd-rejected { color: var(--ogou-danger); }
.ogou-modal select { width: 100%; }

/* =========================================================================
   Phase 8 — Radio widget
   ========================================================================= */
.ogou-radio {
	max-width: 480px; margin: 30px auto;
	background: linear-gradient(150deg, #17140f, var(--ogou-bg));
	border: 2px solid var(--ogou-brand); border-radius: 18px; padding: 22px;
	box-shadow: 0 0 40px rgba(241,92,45,.35);
}
.ogou-radio-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.ogou-radio-brand { display: flex; align-items: center; gap: 12px; }
.ogou-radio-dish { font-size: 30px; filter: drop-shadow(0 0 6px var(--ogou-glow)); }
.ogou-radio-brand h3 { margin: 0; color: var(--ogou-brand); text-transform: uppercase; letter-spacing: 2px; font-size: 20px; }
.ogou-radio-status { font-size: 12px; color: var(--ogou-muted); }
.ogou-radio-genre { width: auto; max-width: 150px; background: #101018; }

.ogou-radio-now {
	display: flex; align-items: center; gap: 14px;
	background: rgba(0,0,0,.35); border-left: 4px solid var(--ogou-glow);
	border-radius: 10px; padding: 12px; margin-bottom: 18px;
}
.ogou-radio-cover { width: 54px; height: 54px; border-radius: 8px; background: #101018 center/cover no-repeat; flex: 0 0 auto; }
.ogou-radio-meta { flex: 1; min-width: 0; }
.ogou-radio-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-radio-artist { color: var(--ogou-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-radio-badge { background: var(--ogou-brand); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }

.ogou-radio-controls { display: flex; align-items: center; gap: 16px; }
.ogou-radio-btn {
	width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--ogou-brand); color: #12100c; font-size: 24px;
	box-shadow: 0 0 16px var(--ogou-brand); transition: transform .12s ease;
}
.ogou-radio-btn:hover { transform: scale(1.06); background: var(--ogou-glow); }
.ogou-radio-skip { background: transparent; border: none; color: var(--ogou-text); font-size: 26px; cursor: pointer; }
.ogou-radio-skip:hover { color: var(--ogou-brand); }
.ogou-radio-vol { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--ogou-muted); }
.ogou-radio-vol input[type="range"] { flex: 1; accent-color: var(--ogou-brand); }

/* =========================================================================
   2035 REFRESH — modern glass/gradient overrides (source-order wins)
   ========================================================================= */

/* Store shell */
.ogou-store { max-width: 1200px; margin: 32px auto; padding: 0 16px; }
.ogou-search { display: flex; gap: 10px; margin-bottom: 20px; }
.ogou-search input[type="search"] {
	flex: 1; background: var(--ogou-card); border: 1px solid var(--ogou-border);
	border-radius: 14px; padding: 14px 18px; color: var(--ogou-text); font-size: 15px;
}
.ogou-search input[type="search"]:focus { outline: none; border-color: var(--ogou-brand); box-shadow: 0 0 0 4px rgba(255,90,31,.14); }

.ogou-genres { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.ogou-pill {
	display: inline-block; padding: 8px 16px; border-radius: 100px;
	background: rgba(255,255,255,.03); border: 1px solid var(--ogou-border);
	color: var(--ogou-muted); font-size: 12.5px; font-weight: 600; text-decoration: none;
	transition: all .16s ease;
}
.ogou-pill:hover { color: #fff; border-color: rgba(255,90,31,.5); }
.ogou-pill.active { background: var(--ogou-fire); border-color: transparent; color: #140f08; box-shadow: 0 6px 18px rgba(255,90,31,.30); }

/* Grid + cards */
.ogou-grid, .ogou-grid-public { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.ogou-card {
	background: linear-gradient(180deg, var(--ogou-card), #101017);
	border: 1px solid var(--ogou-border); border-radius: var(--ogou-r); overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, box-shadow .3s ease;
}
.ogou-card:hover { transform: translateY(-4px); border-color: rgba(255,90,31,.35); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.ogou-cover {
	position: relative; aspect-ratio: 1/1; background: #0e0e15 center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
}
.ogou-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,8,12,.75)); opacity: 0; transition: opacity .2s; }
.ogou-card:hover .ogou-cover::after { opacity: 1; }
.ogou-cover-fallback { font-size: 44px; color: rgba(255,255,255,.18); }
.ogou-play-overlay {
	position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; z-index: 2;
	border-radius: 50%; border: none; cursor: pointer; opacity: 0;
	background: var(--ogou-fire); color: #140f08; font-size: 22px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 30px rgba(255,90,31,.5); transition: opacity .18s ease, transform .18s ease;
}
.ogou-card:hover .ogou-play-overlay { opacity: 1; }
.ogou-play-overlay:hover { transform: scale(1.1); }
.ogou-play-overlay.big { opacity: 1; width: 84px; height: 84px; font-size: 30px; }

.ogou-card-body { padding: 16px 16px 18px; }
.ogou-card-body h4 { margin: 0 0 4px; font-size: 15.5px; line-height: 1.3; }
.ogou-card-body h4 a { color: var(--ogou-text); text-decoration: none; }
.ogou-card-body h4 a:hover { color: var(--ogou-glow); }
.ogou-artist { color: var(--ogou-muted); font-size: 12.5px; margin-bottom: 12px; }
.ogou-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ogou-genre { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--ogou-brand); text-transform: uppercase; }
.ogou-price { font-weight: 700; font-size: 13px; color: var(--ogou-gold); background: rgba(255,176,32,.12); padding: 3px 10px; border-radius: 100px; }
.ogou-card-actions { display: flex; align-items: center; gap: 8px; }
.ogou-icon-btn {
	width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--ogou-border);
	background: rgba(255,255,255,.02); color: var(--ogou-text); cursor: pointer; font-size: 15px;
	display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.ogou-icon-btn:hover { border-color: var(--ogou-brand); color: var(--ogou-brand); }

.ogou-empty { color: var(--ogou-muted); text-align: center; padding: 50px 0; }

/* Pagination */
.ogou-pagination { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 34px; }
.ogou-page {
	min-width: 40px; text-align: center; padding: 9px 12px; border-radius: 11px;
	background: rgba(255,255,255,.03); border: 1px solid var(--ogou-border);
	color: var(--ogou-muted); text-decoration: none; font-weight: 700;
}
.ogou-page.active, .ogou-page:hover { background: var(--ogou-fire); border-color: transparent; color: #140f08; }

/* Single track */
.ogou-single { max-width: 1000px; margin: 40px auto; padding: 0 16px; }
.ogou-single-inner { display: grid; grid-template-columns: 380px 1fr; gap: 40px; }
.ogou-single-cover {
	position: relative; aspect-ratio: 1/1; border-radius: 22px;
	background: var(--ogou-card) center/cover no-repeat;
	border: 1px solid var(--ogou-border);
	box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,90,31,.08);
	display: flex; align-items: center; justify-content: center;
}
.ogou-single-info h1 { margin: 8px 0 4px; font-size: 38px; line-height: 1.05; }
.ogou-single-info .ogou-artist { font-size: 17px; margin-bottom: 20px; }
.ogou-single-info .ogou-genre { font-size: 12px; }
.ogou-credits { list-style: none; padding: 0; margin: 0 0 22px; color: var(--ogou-muted); font-size: 14px; }
.ogou-credits li { margin-bottom: 5px; }
.ogou-credits strong { color: var(--ogou-text); }
.ogou-single-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.ogou-price.big { font-size: 26px; color: var(--ogou-gold); font-weight: 800; background: none; padding: 0; font-family: 'Space Grotesk',sans-serif; }
.ogou-embed-box summary { cursor: pointer; color: var(--ogou-muted); font-size: 13px; }
.ogou-embed-box textarea { width: 100%; margin-top: 8px; height: 70px; font-size: 12px; background: var(--ogou-card); border: 1px solid var(--ogou-border); color: var(--ogou-muted); border-radius: 10px; padding: 10px; }
@media (max-width: 820px) { .ogou-single-inner { grid-template-columns: 1fr; gap: 24px; } .ogou-single-info h1 { font-size: 30px; } }

/* Mini-player */
.ogou-mini {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99998;
	display: none; align-items: center; gap: 16px; max-width: 1180px; margin: 0 auto;
	background: rgba(16,16,23,.72); backdrop-filter: blur(22px) saturate(1.4);
	border: 1px solid var(--ogou-border); border-radius: 18px;
	padding: 12px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ogou-mini.is-visible { display: flex; }
.ogou-mini-cover { width: 48px; height: 48px; border-radius: 12px; background: #0e0e15 center/cover no-repeat; flex: 0 0 auto; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ogou-mini-info { min-width: 0; width: 200px; }
.ogou-mini-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-mini-artist { color: var(--ogou-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-mini-play {
	width: 46px; height: 46px; border-radius: 50%; border: none; flex: 0 0 auto;
	background: var(--ogou-fire); color: #140f08; font-size: 16px; cursor: pointer;
	box-shadow: 0 6px 18px rgba(255,90,31,.4);
}
.ogou-mini-seek { display: flex; align-items: center; gap: 10px; flex: 1; }
.ogou-mini-seek input[type="range"] { flex: 1; accent-color: var(--ogou-brand); height: 4px; }
.ogou-mini-seek span { font-size: 12px; color: var(--ogou-muted); min-width: 36px; font-variant-numeric: tabular-nums; }
.ogou-mini-badge { background: var(--ogou-fire); color: #140f08; font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 100px; letter-spacing: .5px; }
.ogou-mini-close { background: transparent; border: none; color: var(--ogou-muted); font-size: 22px; cursor: pointer; flex: 0 0 auto; }
.ogou-mini-close:hover { color: #fff; }
@media (max-width: 820px) { .ogou-mini-info { width: 120px; } .ogou-mini-seek span { display: none; } }

/* Checkout modal */
.ogou-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(4,4,8,.78); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ogou-modal { position: relative; width: 100%; max-width: 420px; background: linear-gradient(180deg,var(--ogou-card),#0f0f16); border: 1px solid var(--ogou-border); border-radius: 22px; padding: 30px; box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.ogou-modal h3 { margin: 0 0 16px; font-size: 22px; }
.ogou-modal label { display: block; font-size: 13px; color: var(--ogou-muted); margin: 12px 0 6px; }
.ogou-modal input, .ogou-modal select { width: 100%; background: var(--ogou-card-2); border: 1px solid var(--ogou-border); color: var(--ogou-text); border-radius: 12px; padding: 12px 14px; }
.ogou-modal input:focus, .ogou-modal select:focus { outline: none; border-color: var(--ogou-brand); }
.ogou-modal-price { font-size: 30px; font-weight: 800; color: var(--ogou-gold); margin: 8px 0 16px; font-family: 'Space Grotesk',sans-serif; }
.ogou-modal-x { position: absolute; top: 16px; right: 18px; background: transparent; border: none; color: var(--ogou-muted); font-size: 26px; cursor: pointer; line-height: 1; }
.ogou-modal-x:hover { color: #fff; }
.ogou-gw-list { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; }
.ogou-gw { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--ogou-card-2); border: 1px solid var(--ogou-border); border-radius: 12px; cursor: pointer; color: var(--ogou-text); margin: 0; transition: border-color .15s; }
.ogou-gw:hover { border-color: var(--ogou-brand); }
.ogou-modal-msg { min-height: 18px; font-size: 13px; color: #ffb4b5; margin: 8px 0 12px; }

/* Flash */
.ogou-flash { padding: 14px 18px; border-radius: 14px; margin-bottom: 18px; font-weight: 600; }
.ogou-flash.ok { background: rgba(47,212,182,.12); border: 1px solid rgba(47,212,182,.5); color: #8ff0da; }
.ogou-flash.warn { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.5); color: #ffd98a; }
.ogou-flash.err { background: rgba(255,61,87,.12); border: 1px solid rgba(255,61,87,.5); color: #ffb4bf; }

.ogou-library { max-width: 1200px; margin: 32px auto; padding: 0 16px; }
.ogou-library h2 { font-size: 26px; margin-bottom: 22px; }

/* ---------- Radio (premium fire console) ---------- */
.ogou-radio {
	max-width: 520px; margin: 40px auto; padding: 26px;
	background:
		radial-gradient(600px 200px at 80% -10%, rgba(255,90,31,.22), transparent 60%),
		linear-gradient(165deg, #1a120c, #0a0a10);
	border: 1px solid rgba(255,90,31,.35); border-radius: 24px;
	box-shadow: 0 0 60px rgba(255,90,31,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.ogou-radio-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.ogou-radio-brand { display: flex; align-items: center; gap: 14px; }
.ogou-radio-dish { font-size: 32px; filter: drop-shadow(0 0 10px var(--ogou-glow)); }
.ogou-radio-brand h3 { margin: 0; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; background: var(--ogou-fire); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ogou-radio-status { font-size: 12px; color: var(--ogou-muted); }
.ogou-radio-genre { background: rgba(0,0,0,.4); border: 1px solid var(--ogou-border); color: var(--ogou-text); border-radius: 10px; padding: 8px 12px; max-width: 160px; }
.ogou-radio-now { display: flex; align-items: center; gap: 16px; background: rgba(0,0,0,.4); border: 1px solid var(--ogou-border); border-radius: 16px; padding: 14px; margin-bottom: 22px; }
.ogou-radio-cover { width: 60px; height: 60px; border-radius: 12px; background: #0e0e15 center/cover no-repeat; flex: 0 0 auto; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.ogou-radio-meta { flex: 1; min-width: 0; }
.ogou-radio-title { font-weight: 700; font-family: 'Space Grotesk',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-radio-artist { color: var(--ogou-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-radio-badge { background: var(--ogou-fire); color: #140f08; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 100px; }
.ogou-radio-controls { display: flex; align-items: center; gap: 18px; }
.ogou-radio-btn {
	width: 66px; height: 66px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--ogou-fire); color: #140f08; font-size: 24px;
	box-shadow: 0 0 0 6px rgba(255,90,31,.14), 0 10px 30px rgba(255,90,31,.45);
	transition: transform .12s ease;
}
.ogou-radio-btn:hover { transform: scale(1.07); }
.ogou-radio-skip { background: transparent; border: none; color: var(--ogou-text); font-size: 26px; cursor: pointer; }
.ogou-radio-skip:hover { color: var(--ogou-brand); }
.ogou-radio-vol { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--ogou-muted); }
.ogou-radio-vol input[type="range"] { flex: 1; accent-color: var(--ogou-brand); height: 4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .ogou * { transition: none !important; animation: none !important; } }

/* Live search spinner */
.ogou-search { position: relative; }
.ogou-search input[type="search"] { width: 100%; padding-right: 46px; }
.ogou-search-spin { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--ogou-brand); border-radius: 50%; opacity: 0; transition: opacity .15s; }
.ogou-search-spin.is-on { opacity: 1; animation: ogouSpin .7s linear infinite; }
@keyframes ogouSpin { to { transform: rotate(360deg); } }

/* Dashboard card stats + actions */
.ogou-card-stats { color: var(--ogou-muted); font-size: 12.5px; margin-bottom: 12px; }
.ogou-del { cursor: pointer; }

/* Edit modal (wider, two-column meta) */
.ogou-modal-wide { max-width: 480px; max-height: 90vh; overflow-y: auto; }
.ogou-grid2-js { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ogou-grid2-js { grid-template-columns: 1fr; } }

/* =========================================================================
   CARD v2 — refined, Apple-like (overrides earlier card styles)
   ========================================================================= */
.ogou-grid-public, .ogou-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }

.ogou-card {
	position: relative;
	background: linear-gradient(180deg, #17171f, #0f0f15);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.ogou-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255,255,255,.12);
	box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 28px 60px rgba(0,0,0,.5);
}

/* Cover */
.ogou-cover {
	position: relative; aspect-ratio: 1 / 1; overflow: hidden;
	background: #14141c center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
}
.ogou-cover::before { content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transform: scale(1.001); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ogou-card:hover .ogou-cover::before { transform: scale(1.06); }
.ogou-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 100%); }
.ogou-cover-fallback { position: relative; z-index: 1; font-size: 48px; color: rgba(255,255,255,.16); }

/* Play button — glass, centered */
.ogou-play-overlay {
	position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
	z-index: 3; width: 66px; height: 66px; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255,255,255,.5);
	background: rgba(255,255,255,.16); backdrop-filter: blur(14px) saturate(1.4);
	color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 30px rgba(0,0,0,.4);
	transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, opacity .25s;
}
.ogou-play-overlay:hover { transform: scale(1.08); background: var(--ogou-fire); border-color: transparent; color: #140f08; }
.ogou-play-overlay .ogou-ico-play { margin-left: 2px; }
.ogou-play-overlay .ogou-ico-pause { display: none; }
.ogou-card.is-playing .ogou-play-overlay { background: var(--ogou-fire); border-color: transparent; color: #140f08; }
.ogou-card.is-playing .ogou-ico-play { display: none; }
.ogou-card.is-playing .ogou-ico-pause { display: block; }
.ogou-play-overlay.big { width: 92px; height: 92px; }
.ogou-play-overlay.big svg { width: 30px; height: 30px; }

/* Time under play */
.ogou-card-time {
	position: absolute; left: 50%; top: calc(46% + 46px); transform: translateX(-50%);
	z-index: 3; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.92);
	text-shadow: 0 1px 4px rgba(0,0,0,.7); letter-spacing: .5px;
}

/* Share — top-right glass */
.ogou-share {
	position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px;
	border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
	background: rgba(0,0,0,.28); backdrop-filter: blur(10px); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s;
}
.ogou-share:hover { background: var(--ogou-fire); border-color: transparent; color: #140f08; transform: scale(1.06); }

/* Body */
.ogou-card-body { padding: 16px 18px 18px; }
.ogou-card-body h4 { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.ogou-card-body h4 a { color: #fff; text-decoration: none; }
.ogou-card-body h4 a:hover { color: var(--ogou-glow); }
.ogou-by { color: var(--ogou-muted); font-size: 13px; margin-bottom: 6px; }
.ogou-by .ogou-artist { color: var(--ogou-brand); font-weight: 600; }
.ogou-card-body .ogou-genre { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #74748a; margin-bottom: 14px; }
.ogou-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ogou-price { font-weight: 700; font-size: 15px; color: var(--ogou-gold); font-family: 'Space Grotesk', sans-serif; background: none; padding: 0; }
.ogou-price.is-free { color: var(--ogou-muted); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.ogou-card-foot .ogou-btn-sm { padding: 9px 18px; border-radius: 100px; font-size: 13px; }

/* =========================================================================
   POLISH v3 — categories, pagination, cover time
   ========================================================================= */

/* Category chips: single elegant scrollable row (Apple Music style) */
.ogou-genres {
	display: flex; flex-wrap: nowrap; gap: 9px; overflow-x: auto; padding: 4px 2px 14px;
	scrollbar-width: none; -ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%);
}
.ogou-genres::-webkit-scrollbar { display: none; }
.ogou-pill {
	flex: 0 0 auto; white-space: nowrap;
	padding: 9px 18px; border-radius: 100px; font-size: 13px; font-weight: 600;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
	color: var(--ogou-muted); cursor: pointer; transition: all .18s cubic-bezier(.2,.7,.2,1);
}
.ogou-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07); }
.ogou-pill.active { background: var(--ogou-fire); border-color: transparent; color: #140f08; box-shadow: 0 8px 22px rgba(255,90,31,.3); }

/* Search bar: cleaner, roomier */
.ogou-search input[type="search"] {
	border-radius: 16px; padding: 16px 46px 16px 20px; font-size: 15.5px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.ogou-search input[type="search"]::placeholder { color: #6f6f82; }

/* Cover time / preview pill */
.ogou-card-time { min-height: 16px; }
.ogou-card-time.is-preview {
	font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; color: #fff;
	background: rgba(0,0,0,.45); padding: 3px 9px; border-radius: 100px;
	backdrop-filter: blur(6px); text-shadow: none;
}

/* Pagination: compact + windowed */
.ogou-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 40px; }
.ogou-page {
	min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
	color: var(--ogou-muted); font-weight: 700; cursor: pointer; transition: all .18s;
}
.ogou-page:hover { color: #fff; border-color: rgba(255,255,255,.22); }
.ogou-page.active { background: var(--ogou-fire); border-color: transparent; color: #140f08; box-shadow: 0 8px 22px rgba(255,90,31,.3); }
.ogou-page-nav { font-size: 20px; line-height: 1; }
.ogou-page-gap { color: #5f5f70; padding: 0 2px; align-self: flex-end; }
.ogou-page-count { margin-left: 14px; color: var(--ogou-muted); font-size: 13px; align-self: center; }
@media (max-width: 560px) { .ogou-page-count { width: 100%; text-align: center; margin: 8px 0 0; } }

/* =========================================================================
   GLASS v4 — Liquid Glass storefront (admin-selectable style + accent)
   ========================================================================= */

/* Ambient color wash so glass has something to refract on a dark page */
.ogou-store { position: relative; }
.ogou-store::before {
	content: ''; position: absolute; left: -4%; right: -4%; top: -40px; height: 620px; z-index: 0;
	background:
		radial-gradient(680px 320px at 18% 0, color-mix(in srgb, var(--ogou-brand) 16%, transparent), transparent 62%),
		radial-gradient(560px 320px at 82% 12%, rgba(154,123,255,.12), transparent 60%);
	filter: blur(24px); pointer-events: none;
}
.ogou-store > * { position: relative; z-index: 1; }

/* Play button ALWAYS visible + clean icons */
.ogou-play-overlay { opacity: 1; }
.ogou-share svg, .ogou-play-overlay svg { display: block; }

/* Cover flush to the card edges */
.ogou-cover { border-radius: 0; }

/* ---- Liquid Glass (default) ---- */
.ogou-style-glass .ogou-card {
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.028));
	-webkit-backdrop-filter: blur(22px) saturate(1.7);
	backdrop-filter: blur(22px) saturate(1.7);
	border: 1px solid rgba(255,255,255,.16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 24px 60px rgba(0,0,0,.5);
}
.ogou-style-glass .ogou-card:hover {
	border-color: rgba(255,255,255,.30);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 34px 76px rgba(0,0,0,.62);
}
.ogou-style-glass .ogou-card-body { background: transparent; }
.ogou-style-glass .ogou-play-overlay {
	background: rgba(255,255,255,.22);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(0,0,0,.4);
}

/* ---- Solid (dark cards) ---- */
.ogou-style-solid .ogou-card {
	background: linear-gradient(180deg, #17171f, #0f0f15);
	border: 1px solid rgba(255,255,255,.07);
	box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.4);
}

/* ---- Minimal (flat, borderless) ---- */
.ogou-style-minimal .ogou-card { background: transparent; border: none; box-shadow: none; }
.ogou-style-minimal .ogou-card:hover { box-shadow: none; }
.ogou-style-minimal .ogou-cover { border-radius: 20px; overflow: hidden; }
.ogou-style-minimal .ogou-card-body { padding: 14px 4px 4px; }

/* Frosted mini-player + radio pick up the same language */
.ogou-mini { background: linear-gradient(180deg, rgba(24,24,32,.7), rgba(12,12,18,.72)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.6); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* Fallback when the browser can't do glass */
	.ogou-style-glass .ogou-card { background: linear-gradient(180deg, #1b1b24, #111119); }
}

/* =========================================================================
   SURFACE v5 — self-contained dark section (works on ANY theme) + 3 per row
   ========================================================================= */

/* Full-bleed dark surface so the store never depends on the theme background */
.ogou-store {
	position: relative;
	width: auto;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	overflow-x: hidden;
	box-sizing: border-box;
	padding: 52px max(22px, calc(50vw - 620px)) 72px;
	background:
		radial-gradient(900px 420px at 16% 0, color-mix(in srgb, var(--ogou-brand) 20%, transparent), transparent 58%),
		radial-gradient(760px 420px at 84% 10%, rgba(154,123,255,.16), transparent 58%),
		linear-gradient(180deg, #0c0c13, #08080d);
}
.ogou-store::before { display: none; } /* superseded by the surface background */

/* Library keeps a matching dark surface too */
.ogou-library {
	width: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	box-sizing: border-box; overflow-x: hidden;
	padding: 44px max(22px, calc(50vw - 620px)) 64px;
	background: linear-gradient(180deg, #0c0c13, #08080d);
}

/* 3 cards per row (responsive) */
.ogou-store .ogou-grid-public,
.ogou-store .ogou-grid,
.ogou-library .ogou-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) {
	.ogou-store .ogou-grid-public, .ogou-store .ogou-grid, .ogou-library .ogou-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ogou-store .ogou-grid-public, .ogou-store .ogou-grid, .ogou-library .ogou-grid { grid-template-columns: 1fr; }
}

/* On the dark surface, glass reads as a translucent dark panel — keep text crisp */
.ogou-style-glass .ogou-card-body h4 a { color: #fff; }
.ogou-store .ogou-card, .ogou-library .ogou-card { color: var(--ogou-text); }

/* =========================================================================
   ARTWORK v6 — show full cover (no cropping) with a blurred backdrop fill
   ========================================================================= */
.ogou-cover { background: #0e0e15; overflow: hidden; }
.ogou-cover::before { content: none; } /* remove old zoom layer */
.ogou-cover-bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
	filter: blur(30px) saturate(1.5) brightness(.8);
	transform: scale(1.25);
}
.ogou-cover-img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%;
	object-fit: contain;               /* full artwork, never cropped */
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.ogou-card:hover .ogou-cover-img { transform: scale(1.04); }
.ogou-cover::after { z-index: 2; }     /* keep the readability gradient above the art */
.ogou-play-overlay, .ogou-share, .ogou-card-time { z-index: 3; }

/* Single track: same full-art treatment */
.ogou-single-cover { background: #0e0e15; overflow: hidden; }

/* =========================================================================
   ARTWORK v7 — fill the square cleanly, play dead-center, time at bottom
   ========================================================================= */
.ogou-cover { aspect-ratio: 1 / 1; }
.ogou-cover-bg { display: none; }                 /* cover fills; no letterbox needed */
.ogou-cover-img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;    /* seat the artwork, fill the square */
}
.ogou-play-overlay { top: 50%; }                  /* dead center */
.ogou-card-time {
	top: auto; bottom: 12px; left: 50%; transform: translateX(-50%);
}
.ogou-card-time.is-preview { bottom: 12px; }

/* =========================================================================
   COVER — SINGLE AUTHORITATIVE BLOCK (v8). Wins over every earlier rule.
   Forces: square cover, artwork fills it, play dead-center, time at bottom.
   ========================================================================= */
.ogou-card .ogou-cover {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	display: block !important;
	overflow: hidden !important;
	background: #0e0e15 !important;
	border-radius: 0 !important;
}
.ogou-card .ogou-cover .ogou-cover-bg { display: none !important; }
.ogou-card .ogou-cover .ogou-cover-img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	z-index: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.ogou-card .ogou-cover .ogou-cover-fallback {
	position: absolute !important; inset: 0 !important; z-index: 1 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	font-size: 52px !important; color: rgba(255,255,255,.18) !important;
}
.ogou-card .ogou-cover .ogou-play-overlay {
	position: absolute !important;
	left: 50% !important; top: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	z-index: 3 !important;
	opacity: 1 !important;
	width: 64px !important; height: 64px !important;
	border-radius: 50% !important;
}
.ogou-card .ogou-cover .ogou-play-overlay.big { width: 92px !important; height: 92px !important; }
.ogou-card .ogou-cover .ogou-card-time {
	position: absolute !important;
	left: 50% !important; bottom: 12px !important; top: auto !important;
	transform: translateX(-50%) !important;
	z-index: 3 !important;
}
.ogou-card .ogou-cover .ogou-share {
	position: absolute !important;
	top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important;
	z-index: 3 !important;
}

/* OGOU-BUILD: 1.1.7 — if you can read this in the loaded CSS, the new file is live */

/* Share button — larger, clearer icon */
.ogou-card .ogou-cover .ogou-share {
	width: 42px !important; height: 42px !important;
	background: rgba(0,0,0,.42) !important;
	border: 1px solid rgba(255,255,255,.35) !important;
	backdrop-filter: blur(10px) !important;
}
.ogou-card .ogou-cover .ogou-share svg { width: 20px !important; height: 20px !important; stroke-width: 2.1 !important; }
/* OGOU-BUILD: 1.1.8 */

/* =========================================================================
   MINI-PLAYER v2 — refined Liquid Glass bar
   ========================================================================= */
.ogou-mini {
	left: 50% !important; right: auto !important; transform: translateX(-50%);
	bottom: 18px !important; width: min(1080px, calc(100vw - 36px)) !important;
	gap: 16px !important; padding: 12px 18px !important; border-radius: 20px !important;
	background: linear-gradient(180deg, rgba(28,28,38,.72), rgba(14,14,20,.74)) !important;
	-webkit-backdrop-filter: blur(28px) saturate(1.7) !important;
	backdrop-filter: blur(28px) saturate(1.7) !important;
	border: 1px solid rgba(255,255,255,.14) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 24px 70px rgba(0,0,0,.6) !important;
}
.ogou-mini-cover { width: 50px !important; height: 50px !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.ogou-mini-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
.ogou-mini-play {
	width: 48px !important; height: 48px !important; border-radius: 50% !important;
	background: var(--ogou-fire) !important; color: #140f08 !important; border: none !important;
	box-shadow: 0 8px 22px rgba(255,90,31,.4) !important; font-size: 16px;
}
.ogou-mini-seek input[type="range"] { height: 4px; }
.ogou-mini-badge { background: var(--ogou-fire); color: #140f08; }
.ogou-mini-close { transition: color .15s, transform .15s; }
.ogou-mini-close:hover { transform: scale(1.1); }
/* OGOU-BUILD: 1.1.9 */

/* =========================================================================
   PAGES v6 — Single / Dashboard refinement
   ========================================================================= */

/* ---- Single track (dark surface + full-art hero) ---- */
.ogou-single {
	width: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	box-sizing: border-box; overflow-x: hidden;
	padding: 60px max(22px, calc(50vw - 560px)) 80px;
	background:
		radial-gradient(820px 380px at 20% 0, color-mix(in srgb, var(--ogou-brand) 18%, transparent), transparent 60%),
		linear-gradient(180deg, #0c0c13, #08080d);
}
.ogou-single-inner { display: grid; grid-template-columns: 400px 1fr; gap: 46px; align-items: start; }
.ogou-single-cover {
	position: relative; aspect-ratio: 1/1; border-radius: 26px; overflow: hidden;
	background: #0e0e15; border: 1px solid rgba(255,255,255,.1);
	box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.ogou-single-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(40px) saturate(1.5) brightness(.7); transform: scale(1.3); }
.ogou-single-img { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; }
.ogou-single-cover .ogou-play-overlay {
	position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; z-index: 3 !important;
	width: 88px !important; height: 88px !important; border-radius: 50% !important; opacity: 1 !important; cursor: pointer; margin: 0 !important;
	background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,.6); color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 34px rgba(0,0,0,.5);
}
.ogou-single-cover .ogou-play-overlay:hover { background: var(--ogou-fire); border-color: transparent; color: #140f08; transform: scale(1.06); }
.ogou-single-cover .ogou-ico-pause { display: none; }
.ogou-single-info h1 { margin: 10px 0 4px; font-size: 40px; line-height: 1.03; letter-spacing: -.02em; }
.ogou-single-info h2.ogou-artist { color: var(--ogou-brand); font-size: 18px; margin: 0 0 20px; font-weight: 600; }
.ogou-single-info .ogou-genre { color: var(--ogou-muted); }
@media (max-width: 820px) { .ogou-single-inner { grid-template-columns: 1fr; gap: 26px; } .ogou-single-info h1 { font-size: 30px; } }

/* ---- Dashboard ---- */
/*
 * Full width, without the trick that breaks on a phone.
 *
 * This used `left: 50%` with `margin-left: -50vw` and `width: 100vw`, which
 * only lands correctly when the parent's content box is centred in the
 * viewport — and stops being true the moment anything else on the page
 * overflows even slightly. On iOS the layout viewport and the visual viewport
 * then disagree, and the whole dashboard sits shifted to one side with its
 * right edge cut off. That is what was happening.
 *
 * Negative margins alone do the same job, need no positioning, and cannot
 * land off-centre because they are measured from the parent rather than from
 * the viewport's middle.
 */
.ogou-dash {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	padding: 48px max(22px, calc(50vw - 620px)) 72px;
	background: linear-gradient(180deg, #0c0c13, #08080d);
	display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start;

	/*
	 * Nothing inside may make the page wider than the screen. A single card
	 * or table that refuses to shrink otherwise gives the whole document a
	 * sideways scroll, and every fixed element on the page drifts with it.
	 */
	overflow-x: hidden;
}

/*
 * Below the breakpoint the trick is dropped altogether.
 *
 * `vw` counts the scrollbar and, on iOS, does not always match what the
 * reader can actually see. On a phone there is nothing to gain from bleeding
 * to the edges and everything to lose, so it becomes an ordinary block.
 */
@media (max-width: 820px) {
	.ogou-dash {
		margin-left: 0; margin-right: 0;
		padding: 24px 16px 56px;
		border-radius: 0;
	}
}

/* Grid and flex children shrink. Without this a long title, a wide table or
   a payment row keeps its content width and pushes the column open. */
.ogou-dash > *,
.ogou-dash .ogou-card,
.ogou-dash .ogou-profile { min-width: 0; }
.ogou-profile {
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 26px 22px; text-align: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.4); position: sticky; top: 20px;
}
.ogou-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ogou-brand); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ogou-profile h3 { margin: 14px 0 18px; font-size: 20px; }
.ogou-balance { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.ogou-balance-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ogou-muted); }
.ogou-balance-amount { display: block; font-size: 26px; font-weight: 800; font-family: 'Space Grotesk',sans-serif; color: var(--ogou-gold); margin: 4px 0 12px; }
.ogou-stats { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ogou-stats li { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 12px; text-align: center; }
.ogou-stats li strong { display: block; font-size: 20px; font-family: 'Space Grotesk',sans-serif; }
.ogou-stats li span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--ogou-muted); }
.ogou-logout { color: var(--ogou-muted); font-size: 13px; text-decoration: none; }
.ogou-logout:hover { color: var(--ogou-brand); }
.ogou-content-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ogou-content-head h2 { margin: 0; flex: 1; font-size: 26px; }
.ogou-payouts summary { cursor: pointer; color: var(--ogou-muted); font-size: 13px; margin-bottom: 14px; }
.ogou-payout-list { list-style: none; padding: 0; margin: 8px 0 14px; font-size: 13px; }
.ogou-payout-list li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ogou-wd-status { font-weight: 700; }
.ogou-wd-pending { color: var(--ogou-gold); }
.ogou-wd-paid, .ogou-wd-approved { color: #2fd4b6; }
.ogou-wd-rejected { color: var(--ogou-danger); }
@media (max-width: 820px) { .ogou-dash { grid-template-columns: 1fr; } .ogou-profile { position: static; } }

/* OGOU-BUILD: 1.2.1 */

/* =========================================================================
   PROMO — artist sign-up call to action
   ========================================================================= */
.ogou-promo { margin: 28px 0; }
.ogou-promo-inner {
	position: relative; overflow: hidden; border-radius: 26px; padding: 44px 46px;
	background: linear-gradient(120deg, rgba(255,90,31,.16), rgba(154,123,255,.12)), linear-gradient(180deg, #14141d, #0c0c12);
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 24px 60px rgba(0,0,0,.45);
}
/*
 * The decorative glow is clipped by its own box.
 *
 * It is deliberately placed outside the panel — 80px past the right edge and
 * 100px above — so the light bleeds in from a corner. That works as long as
 * something clips it. Nothing did, so on a phone it reached past the screen
 * and gave the whole document a sideways scroll: a purely decorative element
 * making the site look broken.
 */
.ogou-promo-inner { overflow: hidden; }
.ogou-promo-glow { position: absolute; right: -80px; top: -100px; width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ogou-brand) 40%, transparent), transparent 65%); filter: blur(20px); pointer-events: none; }
.ogou-promo-copy { position: relative; z-index: 1; max-width: 640px; }
.ogou-promo-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	color: var(--ogou-glow); background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.3); padding: 5px 12px; border-radius: 100px; margin-bottom: 16px; }
.ogou-promo h2 { margin: 0 0 12px; font-size: 34px; line-height: 1.06; letter-spacing: -.02em; color: #fff; }
.ogou-promo p { margin: 0 0 24px; color: #c7c7d4; font-size: 16px; line-height: 1.6; }
.ogou-promo-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ogou-promo-cta .ogou-btn { font-size: 16px; padding: 14px 26px; }
.ogou-promo-stats { display: flex; gap: 22px; }
.ogou-promo-stats span { color: var(--ogou-muted); font-size: 13px; }
.ogou-promo-stats strong { display: block; color: #fff; font-size: 22px; font-family: 'Space Grotesk', sans-serif; }
@media (max-width: 600px) { .ogou-promo-inner { padding: 32px 24px; } .ogou-promo h2 { font-size: 26px; } }
/* OGOU-BUILD: 1.3.0 */

/* =========================================================================
   ALBUM PAGE
   ========================================================================= */
.ogou-album {
	width: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	box-sizing: border-box; overflow-x: hidden;
	padding: 56px max(22px, calc(50vw - 560px)) 80px;
	background: radial-gradient(820px 380px at 20% 0, color-mix(in srgb, var(--ogou-brand) 18%, transparent), transparent 60%), linear-gradient(180deg, #0c0c13, #08080d);
}
.ogou-album-head { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.ogou-album-cover { position: relative; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden; background: #0e0e15; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
/*
 * The title is the one heading on this page, and it is stated firmly.
 *
 * A page builder styles every `h1` on the site with its own typography, which
 * outweighs a plain class rule. Only the title is a heading now — the artist
 * name became a paragraph, because that is what a byline is, and the styling
 * problem was a symptom of the markup being wrong.
 */
.ogou .ogou-album-meta h1,
.ogou-album-meta h1 {
	font-size: clamp(30px, 5vw, 52px) !important;
	line-height: 1.02 !important; letter-spacing: -.025em;
	margin: 6px 0 10px !important;
	color: #fff !important; font-weight: 800 !important;
}
.ogou-album-meta .ogou-artist {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 14px; font-size: 19px; font-weight: 600;
	color: var(--ogou-brand, #ff8a4c);
}
.ogou-album-meta .ogou-artist a { color: inherit; text-decoration: none; }
.ogou-album-meta .ogou-artist a:hover { text-decoration: underline; }
.ogou-album-meta .ogou-verified {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%;
	background: #2f80ed; color: #fff; font-size: 10px;
}

/* ---------------------------------------------------------------------------
   Countdown
   ---------------------------------------------------------------------------
   A date is something to work out; a number falling is something felt. That
   difference is what turns "I should come back" into a pre-order.
   ------------------------------------------------------------------------ */
.ogou-countdown {
	margin: 18px 0 22px; padding: 16px 18px;
	background: linear-gradient(135deg, rgba(255,90,31,.12), rgba(255,176,32,.06));
	border: 1px solid rgba(255,138,76,.28); border-radius: 16px;
	max-width: 460px;
}
.ogou-countdown.is-pre { border-color: rgba(126,226,168,.32); }
.ogou-countdown-when {
	margin: 0 0 12px; font-size: 13px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: #ff8a4c;
}
.ogou-countdown.is-pre .ogou-countdown-when { color: #7ee2a8; }
.ogou-countdown-clock { display: flex; gap: 10px; }
.ogou-countdown-cell {
	flex: 1 1 0; text-align: center;
	padding: 10px 4px; border-radius: 11px;
	background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07);
}
.ogou-countdown-cell b {
	display: block; font-size: 26px; line-height: 1; font-weight: 800;
	color: #fff; font-variant-numeric: tabular-nums;
}
.ogou-countdown-cell i {
	display: block; margin-top: 5px; font-style: normal;
	font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
	color: #9a9aab;
}
.ogou-countdown-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #c7c7d4; }

/*
 * On a card, over the artwork.
 *
 * Seconds are deliberately absent: on a grid of twenty-four, two dozen digits
 * twitching at once reads as a page that is malfunctioning.
 */
.ogou-cover-countdown {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
	display: flex; align-items: baseline; justify-content: center; gap: 3px;
	padding: 7px 8px; border-radius: 9px;
	background: rgba(8,8,14,.82);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.1);
	pointer-events: none;
}
.ogou-cover-countdown b {
	font-size: 15px; font-weight: 800; color: #fff;
	font-variant-numeric: tabular-nums;
}
.ogou-cover-countdown i {
	font-style: normal; font-size: 9.5px; text-transform: uppercase;
	color: #9a9aab; margin-right: 5px;
}
.ogou-cover-countdown i:last-child { margin-right: 0; }
.ogou-album-desc { color: #c7c7d4; max-width: 640px; }
.ogou-album-tracks { list-style: none; counter-reset: none; padding: 0; margin: 0; max-width: 860px; }
.ogou-album-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px; transition: background .15s; }
.ogou-album-row:hover { background: rgba(255,255,255,.04); }
.ogou-album-num { width: 24px; text-align: center; color: var(--ogou-muted); font-variant-numeric: tabular-nums; }
.ogou-album-play {
	position: static !important; transform: none !important; width: 42px !important; height: 42px !important;
	flex: 0 0 auto; border-radius: 50% !important; opacity: 1 !important; margin: 0 !important;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.ogou-album-play:hover { background: var(--ogou-fire); border-color: transparent; color: #140f08; }
.ogou-album-row.is-playing .ogou-album-play { background: var(--ogou-fire); border-color: transparent; color: #140f08; }
.ogou-album-row.is-playing .ogou-ico-play { display: none; }
.ogou-album-row .ogou-ico-pause { display: none; }
.ogou-album-row.is-playing .ogou-ico-pause { display: block; }
.ogou-album-title { flex: 1; color: #fff; text-decoration: none; font-weight: 600; }
.ogou-album-title:hover { color: var(--ogou-glow); }
.ogou-album-price { color: var(--ogou-gold); font-weight: 700; font-size: 14px; }
.ogou-from-album { margin-top: 16px; color: var(--ogou-muted); }
.ogou-from-album a { color: var(--ogou-brand); font-weight: 600; text-decoration: none; }
@media (max-width: 820px) { .ogou-album-head { grid-template-columns: 1fr; gap: 22px; } .ogou-album-meta h1 { font-size: 30px; } }
/* OGOU-BUILD: 1.3.0 */

/* =========================================================================
   CLAIM (dashboard search) + white-gap fix
   ========================================================================= */
.ogou-claim-head { margin-bottom: 18px; }
.ogou-claim-head h3 { margin: 0 0 4px; font-size: 20px; }
.ogou-claim-list { list-style: none; padding: 0; margin: 0; }
.ogou-claim-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.06); margin-bottom: 8px; background: rgba(255,255,255,.02); }
.ogou-claim-cover { width: 48px; height: 48px; border-radius: 10px; background: #16161f center/cover no-repeat; flex: 0 0 auto; }
.ogou-claim-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ogou-claim-info strong { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-claim-info em { color: var(--ogou-muted); font-style: normal; font-size: 13px; }
.ogou-claim-owned { color: var(--ogou-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* Ogou full-bleed sections carry no vertical margin of their own */
.ogou-store, .ogou-library, .ogou-album, .ogou-single, .ogou-dash { margin-top: 0; margin-bottom: 0; }


/* (theme-wrapper neutralization removed — it broke the full-bleed centering) */

/* OGOU-BUILD: 1.3.3 */

/* =========================================================================
   ROBUST WIDTH — drop the fragile 100vw full-bleed (it shifted/broke on some
   themes & templates). Sections now simply fill their container width. For
   true edge-to-edge, use a Full-Width / Canvas page template.
   ========================================================================= */
.ogou-store, .ogou-library, .ogou-album, .ogou-single, .ogou-dash {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 20px;
}
/* OGOU-BUILD: 1.3.4 */

/* =========================================================================
   SMART LAYOUT — readable on ANY page background, never full-bleed.
   • Store & Library: transparent (cards carry their own dark styling).
   • Dashboard / Single / Album: a contained dark panel so their loose text
     (titles, profile, credits) stays readable on light OR dark pages.
   ========================================================================= */
.ogou-store, .ogou-library {
	position: static !important; left: auto !important; right: auto !important;
	margin: 24px auto !important; width: auto !important; max-width: 1200px !important;
	background: none !important; box-shadow: none !important; border-radius: 0 !important;
	padding: 8px 0 40px !important;
}
.ogou-dash, .ogou-single, .ogou-album {
	position: static !important; left: auto !important; right: auto !important;
	margin: 24px auto !important; width: auto !important; max-width: 1200px !important;
	background: linear-gradient(180deg, #13131b, #0b0b11) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	border-radius: 24px !important;
	box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
	padding: 34px !important;
}
.ogou-store::before, .ogou-library::before, .ogou-album::before, .ogou-single::before, .ogou-dash::before,
.ogou-store::after, .ogou-library::after, .ogou-album::after, .ogou-single::after, .ogou-dash::after {
	display: none !important;
}

/* Cards, search and pills stay dark enough to read on a white page too */
.ogou-style-glass .ogou-card { background: linear-gradient(180deg, rgba(20,20,28,.9), rgba(12,12,18,.94)) !important; }
.ogou-search input[type="search"] { background: rgba(18,18,26,.92) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.12) !important; }
.ogou-pill { background: rgba(18,18,26,.9) !important; }
.ogou-page-count, .ogou-store .ogou-empty { color: #8f8fa2 !important; }
/* OGOU-BUILD: 1.3.6 */

/* =========================================================================
   CARD SEPARATION — every track is a clearly-bounded glass pane, on any
   background (light page, dark dashboard panel, etc.)
   ========================================================================= */
.ogou-card {
	background: linear-gradient(180deg, rgba(30,30,42,.94), rgba(16,16,24,.96)) !important;
	border: 1px solid rgba(255,255,255,.18) !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 34px rgba(0,0,0,.45) !important;
}
.ogou-card:hover {
	border-color: rgba(255,255,255,.32) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 22px 54px rgba(0,0,0,.6) !important;
	transform: translateY(-4px);
}
.ogou-card-body { background: transparent !important; }
/* OGOU-BUILD: 1.3.7 */

/* =========================================================================
   TRUE LIQUID GLASS (final) — contained dark panel per section + frosted
   translucent cards. Beautiful, readable, never full-bleed, never clashing.
   ========================================================================= */
.ogou-store, .ogou-library, .ogou-dash, .ogou-single, .ogou-album {
	position: static !important; left: auto !important; right: auto !important;
	margin: 24px auto !important; width: auto !important; max-width: 1200px !important;
	background:
		radial-gradient(720px 320px at 12% 0, color-mix(in srgb, var(--ogou-brand) 14%, transparent), transparent 60%),
		radial-gradient(620px 320px at 88% 6%, rgba(154,123,255,.12), transparent 60%),
		linear-gradient(180deg, #14141d, #0b0b11) !important;
	border: 1px solid rgba(255,255,255,.09) !important;
	border-radius: 26px !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 64px rgba(0,0,0,.42) !important;
	padding: 32px !important;
	overflow: hidden;
}

/* Frosted translucent cards — real liquid glass on the dark panel */
.ogou-card {
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.028)) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
	backdrop-filter: blur(22px) saturate(1.7) !important;
	border: 1px solid rgba(255,255,255,.14) !important;
	border-radius: 22px !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 18px 46px rgba(0,0,0,.42) !important;
	overflow: hidden !important;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s !important;
}
.ogou-card:hover {
	border-color: rgba(255,255,255,.28) !important;
	transform: translateY(-5px) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 32px 70px rgba(0,0,0,.58) !important;
}
.ogou-card-body { background: transparent !important; }

/* Search & pills as light frosted chips on the dark panel */
.ogou-search input[type="search"] {
	background: rgba(255,255,255,.06) !important; color: #fff !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ogou-pill { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; }
.ogou-pill.active { background: var(--ogou-fire) !important; border-color: transparent !important; color: #140f08 !important; }
/* OGOU-BUILD: 1.3.8 */

/* Breathing room for card info + button (artwork stays flush, no margin) */
.ogou-card-body { padding: 18px 20px 20px !important; }
.ogou-card-foot { margin-top: 4px; }
/* OGOU-BUILD: 1.3.9 */

/* ---- Verification badge + payout UI ---- */
.ogou-verified {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; vertical-align: middle;
	background: linear-gradient(135deg, #1d9bf0, #0a7fd6); color: #fff; font-size: 11px; font-weight: 900;
	box-shadow: 0 2px 8px rgba(29,155,240,.5);
}
.ogou-verify-note { font-size: 12px; margin: -6px 0 14px; padding: 4px 10px; border-radius: 100px; display: inline-block; }
.ogou-vs-none { background: rgba(255,255,255,.06); color: var(--ogou-muted); }
.ogou-vs-pending { background: rgba(255,176,32,.14); color: var(--ogou-gold); }
.ogou-vs-rejected { background: rgba(255,90,90,.14); color: #ff9d9d; }
.ogou-payout-link { background: none; border: none; color: var(--ogou-brand); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 6px 0; }
.ogou-payout-link:hover { color: var(--ogou-glow); }
#ogou-payout-view .ogou-form { max-width: 520px; }
#ogou-payout-view select, #ogou-payout-view input[type="text"] { width: 100%; }
/* OGOU-BUILD: 1.4.1 */

/* ---- Boost + plans + dashboard search ---- */
.ogou-btn-boost { background: linear-gradient(135deg,#ff5a1f,#ff2d78) !important; color:#fff !important; }
.ogou-my-search { margin: 0 0 16px; position: relative; }
.ogou-search-spin { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--ogou-brand); border-radius:50%; opacity:0; }
.ogou-search-spin.is-on { opacity:1; animation: ogou-spin .7s linear infinite; }
@keyframes ogou-spin { to { transform: translateY(-50%) rotate(360deg); } }
.ogou-boost-modal { max-width: 460px; }
.ogou-plan-list { display: grid; gap: 10px; }
.ogou-plan { display:block; cursor:pointer; }
.ogou-plan input { position:absolute; opacity:0; }
.ogou-plan-body { border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px; transition:border-color .15s, background .15s; }
.ogou-plan input:checked + .ogou-plan-body { border-color: var(--ogou-brand); background: color-mix(in srgb, var(--ogou-brand) 12%, transparent); }
.ogou-plan-top { display:flex; justify-content:space-between; align-items:center; }
.ogou-plan-price { color: var(--ogou-gold); font-weight:800; font-family:'Space Grotesk',sans-serif; }
.ogou-plan-days { color: var(--ogou-muted); font-size:12px; margin-top:2px; }
.ogou-plan-feats { margin:8px 0 0; padding-left:18px; color:#c7c7d4; font-size:13px; }
.ogou-boost-gw { width:100%; }
/* OGOU-BUILD: 1.4.2 */

/* ---- Verified badge (public, inline) + artist links ---- */
.ogou-verified-sm { width: 15px; height: 15px; font-size: 9px; margin-left: 3px; }
.ogou-by .ogou-artist { color: var(--ogou-brand); text-decoration: none; }
.ogou-by a.ogou-artist:hover { text-decoration: underline; }
.ogou-single-info h2.ogou-artist a { color: inherit; text-decoration: none; }
.ogou-single-info h2.ogou-artist a:hover { text-decoration: underline; }
/* OGOU-BUILD: 1.4.3 */

/* =========================================================================
   ARTIST PAGE (Spotify-style)
   ========================================================================= */
/*
 * The artist page never had side padding.
 *
 * `max-width: 1200px` with `margin: auto` looks like padding on a desktop —
 * there is always room to spare — and stops being anything at all the moment
 * the screen is narrower than the maximum. So on a phone the hero and the
 * track list have always sat flush against the glass; the recent changes made
 * it noticeable rather than caused it.
 *
 * This one is genuinely padding, so it holds at every width.
 */
.ogou-artist-page { max-width: 1200px; margin: 24px auto; padding: 0 22px; }
.ogou-artist-hero {
	position: relative; border-radius: 24px; overflow: hidden; padding: 44px 40px;
	/* The name and the counts sit on this; without a floor they collide with
	   the rounded corner on a narrow screen. */
	background: linear-gradient(180deg, #1a1a24, #0c0c12); background-size: cover; background-position: center;
	border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.ogou-artist-hero-inner { display: flex; align-items: flex-end; gap: 26px; }
.ogou-artist-avatar-wrap { position: relative; width: 150px; height: 150px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 14px 40px rgba(0,0,0,.55); background: #1a1a24; }
.ogou-artist-avatar { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; max-width: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; }
@media (max-width: 640px) { .ogou-artist-avatar-wrap { width: 110px; height: 110px; } }
.ogou-artist-verified { display: inline-flex; align-items: center; gap: 6px; color: #cdeafe; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ogou-artist-id h1 { margin: 0 0 8px; font-size: 52px; line-height: 1; letter-spacing: -.03em; color: #fff; }
.ogou-artist-stats { display: flex; gap: 16px; color: var(--ogou-muted); font-size: 14px; margin-bottom: 10px; }
.ogou-artist-social { display: flex; gap: 10px; flex-wrap: wrap; }
.ogou-artist-social a { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 6px 14px; border-radius: 100px; font-size: 13px; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ogou-artist-social a:hover { background: var(--ogou-fire); border-color: transparent; color: #140f08; }
.ogou-artist-about { margin: 28px 4px; }
.ogou-artist-about h2, .ogou-artist-section h2 { font-size: 22px; margin: 0 0 14px; color: #fff; }
.ogou-artist-about p { color: #c7c7d4; line-height: 1.7; max-width: 780px; }
.ogou-artist-section { margin: 30px 0; }
@media (max-width: 640px) {
	.ogou-artist-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.ogou-artist-avatar-wrap { width: 110px; height: 110px; }
	.ogou-artist-id h1 { font-size: 34px; }
}
/* OGOU-BUILD: 1.5.0 */

/* ---- Genre pills: single scrollable row with arrows ---- */
.ogou-genres-rail { position: relative; display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.ogou-genres { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-behavior: smooth; flex: 1; -ms-overflow-style: none; scrollbar-width: none; }
.ogou-genres::-webkit-scrollbar { display: none; }
.ogou-genres .ogou-pill { flex: 0 0 auto; white-space: nowrap; }
.ogou-genres-arrow { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s, opacity .15s; }
.ogou-genres-arrow:hover { background: var(--ogou-fire); border-color: transparent; color: #140f08; }
.ogou-genres-arrow[disabled] { opacity: .3; cursor: default; }

/* ---- Embedded store (artist page Music): no extra panel ---- */
.ogou-store.ogou-store-embed {
	background: none !important; box-shadow: none !important; border: none !important;
	padding: 0 !important; margin: 0 !important; max-width: none !important; border-radius: 0 !important;
}
.ogou-store-embed .ogou-search { margin-bottom: 18px; }
/* OGOU-BUILD: 1.5.3 */

/* =========================================================================
   AUTH — premium login / signup card
   ========================================================================= */
/*
 * The login page had no padding either — the card is capped at 440px, which
 * on a desktop always leaves room and on a 390px phone leaves none.
 */
.ogou-auth { display: flex; justify-content: center; padding: 0 18px; }
.ogou-auth-card {
	width: 100%; max-width: 440px; padding: 34px 32px;
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
	-webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
	border: 1px solid rgba(255,255,255,.14); border-radius: 26px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 70px rgba(0,0,0,.5);
	color: #fff;
}
.ogou-auth-head { text-align: center; margin-bottom: 20px; }
.ogou-auth-kicker { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ogou-glow); }
.ogou-auth-head h2 { margin: 6px 0 0; font-size: 28px; letter-spacing: -.02em; }
.ogou-auth-tabs { display: flex; gap: 6px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 5px; margin-bottom: 20px; }
.ogou-auth-tab { flex: 1; padding: 11px; border: none; background: none; color: var(--ogou-muted); font-weight: 700; font-size: 14px; border-radius: 10px; cursor: pointer; transition: all .18s; }
.ogou-auth-tab.active { background: var(--ogou-fire); color: #140f08; box-shadow: 0 6px 18px rgba(255,90,31,.4); }
.ogou-auth-form label { display: block; font-size: 13px; font-weight: 600; color: #d8d8e4; margin: 14px 0 6px; }
.ogou-auth-form input[type="text"], .ogou-auth-form input[type="email"], .ogou-auth-form input[type="password"] {
	width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
	background: rgba(0,0,0,.3); color: #fff; font-size: 15px; box-sizing: border-box;
}
.ogou-auth-form input:focus { outline: none; border-color: var(--ogou-brand); box-shadow: 0 0 0 3px rgba(255,90,31,.18); }
.ogou-check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; color: var(--ogou-muted) !important; margin-top: 14px !important; }
.ogou-btn-lg { padding: 15px !important; font-size: 16px !important; margin-top: 20px; }
.ogou-alert { background: rgba(255,61,87,.14); border: 1px solid rgba(255,61,87,.4); color: #ffb4bf; padding: 11px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 8px; }
.ogou-auth-alt { color: var(--ogou-muted); font-size: 14px; }
.ogou-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.ogou-role { position: relative; margin: 0 !important; }
.ogou-role input { position: absolute; opacity: 0; }
.ogou-role span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s; }
.ogou-role input:checked + span { border-color: var(--ogou-brand); background: color-mix(in srgb, var(--ogou-brand) 16%, transparent); color: #fff; }
.ogou-role-note { font-size: 12.5px; color: var(--ogou-muted); margin: 8px 0 2px; line-height: 1.5; }
/* OGOU-BUILD: 1.6.0 */

/* ---- Force circular avatar even inside Elementor ---- */
.ogou-dash .ogou-profile .ogou-avatar,
.ogou-profile img.ogou-avatar,
.ogou .ogou-avatar {
	width: 96px !important; height: 96px !important; aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important; object-fit: cover !important; display: block !important;
	margin: 0 auto !important; max-width: 96px !important; padding: 0 !important;
}

/* ---- Boost page (dashboard view) ---- */
.ogou-boost-page { max-width: 640px; }
.ogou-boost-track-title { color: var(--ogou-glow); }
.ogou-plan-list-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 560px) { .ogou-plan-list-lg { grid-template-columns: 1fr; } }
.ogou-plan-list-lg .ogou-plan-body { height: 100%; padding: 16px; }
.ogou-plan-list-lg .ogou-plan-price { font-size: 18px; }
/* OGOU-BUILD: 1.6.1 */

/* ---- Bigger, more readable plan text on the Boost page ---- */
.ogou-plan-list-lg .ogou-plan-top strong { font-size: 17px; }
.ogou-plan-list-lg .ogou-plan-days { font-size: 13px; }
.ogou-plan-list-lg .ogou-plan-feats { font-size: 14.5px; line-height: 1.55; margin-top: 10px; }
.ogou-plan-list-lg .ogou-plan-feats li { margin-bottom: 4px; }

/* ---- Profile aside: Payout / Edit profile as real buttons ---- */
.ogou-profile .ogou-payout-link {
	display: block; width: 100%; text-align: center; text-decoration: none !important;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff;
	padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer;
	margin: 8px 0 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all .15s;
}
.ogou-profile .ogou-payout-link:hover { border-color: var(--ogou-brand); background: color-mix(in srgb, var(--ogou-brand) 14%, transparent); color: #fff; }
/* OGOU-BUILD: 1.7.0 */

/* ---- Revenue split rows ---- */
.ogou-split-page { max-width: 660px; }
.ogou-split-row { display: grid; grid-template-columns: 1fr 1fr 92px 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.ogou-split-row input { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); color: #fff; box-sizing: border-box; width: 100%; }
/*
 * The remove button, stated firmly enough to stay round.
 *
 * A page builder styles every `button` on the site — its own padding, radius,
 * font and background all outweigh a plain class rule, so this came out as a
 * red rectangle with a border, sitting in a row of neat inputs and looking
 * like a mistake.
 *
 * A small `×` is drawn rather than written, so it stays centred whatever font
 * the builder decides buttons should use.
 */
.ogou-split-del,
button.ogou-split-del {
	display: inline-flex !important;
	align-items: center !important; justify-content: center !important;
	flex: 0 0 auto !important;
	width: 38px !important; height: 38px !important;
	min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	background: rgba(255, 255, 255, .05) !important;
	color: #8b8b9c !important;
	font-size: 0 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.ogou-split-del::before,
.ogou-split-del::after {
	content: '';
	position: absolute;
	width: 14px; height: 1.5px;
	background: currentColor;
	border-radius: 2px;
}
.ogou-split-del { position: relative; }
.ogou-split-del::before { transform: rotate(45deg); }
.ogou-split-del::after { transform: rotate(-45deg); }

/*
 * Red only on the way to being pressed.
 *
 * A row that is permanently red reads as an error before anybody has done
 * anything wrong — and a collaborator's name sitting next to a red button
 * looks like a problem with the collaborator.
 */
.ogou-split-del:hover,
button.ogou-split-del:hover {
	background: rgba(255, 90, 90, .16) !important;
	border-color: rgba(255, 90, 90, .4) !important;
	color: #ff9d9d !important;
}
.ogou-split-total { margin: 16px 0 6px; font-size: 15px; color: var(--ogou-muted); }
.ogou-split-total strong { color: var(--ogou-gold); font-size: 18px; font-family: 'Space Grotesk', sans-serif; }
@media (max-width: 560px) { .ogou-split-row { grid-template-columns: 1fr 84px 32px; } .ogou-split-email { grid-column: 1 / -1; } }

/* ---- Split button (distinct) + card action spacing ---- */
.ogou-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ogou-split {
	background: rgba(154,123,255,.18) !important; border: 1px solid rgba(154,123,255,.5) !important; color: #d6c8ff !important;
}
.ogou-split:hover { background: rgba(154,123,255,.32) !important; color: #fff !important; }

/* ---- Boost page: sticky action bar so the button is always visible ---- */
.ogou-boost-bar {
	position: sticky; top: 8px; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	background: linear-gradient(180deg, rgba(20,20,29,.96), rgba(14,14,20,.96));
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px 14px; margin: 14px 0;
	box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.ogou-boost-bar .ogou-boost-gw-sel { flex: 0 0 auto; min-width: 160px; width: auto; }
.ogou-boost-bar .ogou-btn { flex: 1; min-width: 180px; margin: 0; }
#ogou-boost-price { font-weight: 800; }
.ogou-boost-page { max-width: 820px; }
.ogou-plan-list-lg .ogou-plan-body { min-height: 100%; }

/* ---- Split transparency box ---- */
.ogou-split-explain { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px; margin: 12px 0 16px; }
.ogou-split-explain p { margin: 0 0 8px; color: #c7c7d4; font-size: 13.5px; line-height: 1.55; }
.ogou-split-explain p:last-child { margin-bottom: 0; }
/* OGOU-BUILD: 1.7.1 */

/* ---- Promo banner: features + mascot + dual CTA ---- */
.ogou-promo-inner { display: flex; align-items: center; gap: 30px; }
.ogou-promo-copy { flex: 1; min-width: 0; }
.ogou-promo-feats { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 9px; }
.ogou-promo-feats li { color: #e7e7ef; font-size: 15px; line-height: 1.4; display: flex; gap: 9px; align-items: flex-start; }
.ogou-promo-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ogou-promo-stats { display: flex; gap: 22px; margin-top: 18px; }
.ogou-promo-mascot { flex: 0 0 auto; width: 300px; max-width: 34%; display: flex; justify-content: center; }
.ogou-promo-mascot img { width: 100%; height: auto; filter: drop-shadow(0 22px 40px rgba(0,0,0,.5)); }
.ogou-btn-outline { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.28) !important; color: #fff !important; }
.ogou-btn-outline:hover { background: rgba(255,255,255,.14) !important; }
@media (max-width: 820px) {
	.ogou-promo-inner { flex-direction: column; }
}
/* OGOU-BUILD: 1.8.0 */

/* ---- Earnings view ---- */
.ogou-earn-page { max-width: 860px; }
.ogou-earn-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 8px; }
.ogou-earn-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px; }
.ogou-earn-card .ogou-earn-lbl { display: block; font-size: 12px; color: var(--ogou-muted); margin-bottom: 6px; }
.ogou-earn-card strong { font-size: 20px; font-family: 'Space Grotesk', sans-serif; }
.ogou-earn-card-hi { border-color: var(--ogou-brand); background: color-mix(in srgb, var(--ogou-brand) 14%, transparent); }
.ogou-earn-sub { margin: 24px 0 10px; font-size: 16px; }
.ogou-earn-table { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; }
.ogou-earn-tr { display: grid; grid-template-columns: 110px 1fr 120px 120px; gap: 10px; padding: 12px 14px; align-items: center; }
.ogou-earn-tr:not(.ogou-earn-th):nth-child(even) { background: rgba(255,255,255,.025); }
.ogou-earn-th { background: rgba(255,255,255,.05); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ogou-muted); }
.ogou-earn-cut { color: var(--ogou-gold); font-weight: 700; }
.ogou-earn-split { color: #cbb9ff; font-size: 11px; font-style: normal; background: rgba(154,123,255,.16); padding: 1px 7px; border-radius: 20px; margin-left: 6px; }
@media (max-width: 720px) {
	.ogou-earn-cards { grid-template-columns: 1fr 1fr; }
	.ogou-earn-th { display: none; }
	.ogou-earn-tr { grid-template-columns: 1fr 1fr; }
	.ogou-earn-tr span { display: flex; flex-direction: column; font-size: 14px; }
	.ogou-earn-tr span::before { content: attr(data-h); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ogou-muted); }
}

/* ---- Email OTP verification box ---- */
.ogou-otp-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.ogou-otp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ogou-otp-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255,176,32,.16); color: var(--ogou-gold); font-weight: 700; }
.ogou-otp-badge.ok { background: rgba(47,212,182,.16); color: #7ff0d8; }
.ogou-otp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ogou-otp-row input { flex: 1; min-width: 120px; letter-spacing: 4px; text-align: center; font-size: 18px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); color: #fff; }
.ogou-otp-row .ogou-btn { flex: 0 0 auto; margin: 0; }
/* OGOU-BUILD: 1.9.0 */

/* =========================================================================
   ARTIST DIRECTORY  [ogou_artists]
   ========================================================================= */
.ogou-artists-search { margin-bottom: 18px; }
.ogou-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.ogou-artist-cardlink {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
	padding: 22px 14px; text-decoration: none; border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.1); transition: transform .15s, border-color .15s, background .15s;
}
.ogou-artist-cardlink:hover { transform: translateY(-3px); border-color: var(--ogou-brand); background: linear-gradient(180deg, rgba(255,90,31,.12), rgba(255,255,255,.03)); }
.ogou-artist-av { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.18); box-shadow: 0 10px 26px rgba(0,0,0,.4); position: relative; flex: 0 0 auto; background: #1a1a24; }
.ogou-artist-av img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; max-width: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; }
.ogou-artist-nm { color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.ogou-artist-ct { color: var(--ogou-muted); font-size: 12.5px; }
@media (max-width: 480px) { .ogou-artist-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .ogou-artist-av { width: 76px; height: 76px; } }
/* OGOU-BUILD: 1.10.1 */

/* ---- Monetization ad slots ---- */
.ogou-grid-ad { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; padding: 10px 0; min-height: 60px; overflow: hidden; }
.ogou-single-ad { max-width: 1100px; margin: 18px auto; display: flex; justify-content: center; overflow: hidden; }
.ogou-grid-ad img, .ogou-single-ad img { max-width: 100%; height: auto; }
/* OGOU-BUILD: 1.12.0 */

/* ---- Single page artwork: bulletproof fill (theme forces height:auto otherwise) ---- */
.ogou-single-cover { position: relative !important; overflow: hidden !important; }
.ogou-single-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; }
.ogou-single-img {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
	max-width: none !important; object-fit: cover !important; object-position: center !important;
	border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important;
}
.ogou-single-cover .ogou-play-overlay { position: relative; z-index: 3; }

/* ---- Music grid page: top spacing ---- */
/* OGOU-BUILD: 1.14.4 */

/* ---- Radio: mobile hardening (stack cleanly, never overflow) ---- */
@media (max-width: 560px) {
	.ogou-radio { max-width: 100%; margin: 24px auto; padding: 18px; border-radius: 18px; }
	.ogou-radio-head { flex-wrap: wrap; gap: 10px; }
	.ogou-radio-genre { width: 100%; max-width: 100%; }
	.ogou-radio-brand h3 { font-size: 18px; letter-spacing: 2px; }
	.ogou-radio-controls { flex-wrap: wrap; gap: 12px; row-gap: 14px; }
	.ogou-radio-vol { flex-basis: 100%; order: 3; }
}


/* ---- Guest checkout ---- */
.ogou-modal-hint { color: #9a9aad; font-size: 12.5px; line-height: 1.5; margin: 6px 0 14px; }
.ogou-modal input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.32); color: #fff; font-size: 15px; }

/* ---- Admin-only artist rate box (frontend) ---- */
.ogou-admin-box { max-width: 1100px; margin: 22px auto; padding: 18px 20px; background: linear-gradient(180deg, rgba(154,123,255,.10), rgba(255,255,255,.03)); border: 1px dashed rgba(154,123,255,.5); border-radius: 16px; }
.ogou-admin-box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: #fff; }
.ogou-admin-tag { background: #9a7bff; color: #14101c; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; }
.ogou-admin-box-desc { color: #b9b9cc; font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.ogou-admin-box-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ogou-admin-box-row input { width: 110px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.32); color: #fff; font-size: 15px; }
.ogou-admin-pct { color: #b9b9cc; font-weight: 700; margin-left: -4px; }
.ogou-admin-msg { font-size: 13px; }

/* ---- Custom rate badge in the artist dashboard ---- */
.ogou-rate-badge { display: inline-block; background: linear-gradient(120deg, rgba(255,176,32,.18), rgba(255,90,31,.14)); border: 1px solid rgba(255,176,32,.45); color: #ffd79a; font-weight: 700; font-size: 13.5px; padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; }

.ogou-admin-lbl { color: #d9d9e6; font-size: 13.5px; font-weight: 700; min-width: 92px; }
.ogou-admin-def { color: #8f8fa3; font-size: 12.5px; }
.ogou-admin-box-row { margin-bottom: 10px; }

/* ---- Share button (single pages) ---- */
.ogou-btn-share { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.ogou-btn-share:hover { background: linear-gradient(135deg,#ff5a1f,#ffb020); border-color: transparent; color: #140f08; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,90,31,.32); }
.ogou-btn-share.is-copied { background: rgba(47,212,182,.16); border-color: rgba(47,212,182,.5); color: #8ff0da; }

/* ---- Library account bar + danger zone ---- */
.ogou-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ogou-lib-head h2 { margin: 0; }
.ogou-lib-account { display: flex; align-items: center; gap: 12px; }
.ogou-lib-who { color: #b9b9cc; font-size: 14px; font-weight: 600; }
.ogou-btn-ghost { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s, border-color .18s; }
.ogou-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); }

.ogou-danger { margin-top: 34px; padding: 20px; border: 1px solid rgba(255,61,87,.38); border-radius: 16px; background: rgba(255,61,87,.06); }
.ogou-danger h4 { margin: 0 0 6px; color: #ff8b9c; font-size: 15px; }
.ogou-danger p { color: #b9b9cc; font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.ogou-danger input { width: 100%; max-width: 280px; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.32); color: #fff; margin-bottom: 10px; }
.ogou-btn-danger { display: block; padding: 11px 20px; border-radius: 10px; border: 1px solid rgba(255,61,87,.5); background: rgba(255,61,87,.14); color: #ff8b9c; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .18s, color .18s; }
.ogou-btn-danger:hover { background: #ff3d57; color: #fff; border-color: transparent; }
.ogou-auth-forgot { text-align: center; margin: 12px 0 0; }
.ogou-auth-forgot a { color: #9a9aad; font-size: 13.5px; text-decoration: none; }
.ogou-auth-forgot a:hover { color: var(--ogou-brand, #ff5a1f); }

/* ---- Account settings panel (library) ---- */
.ogou-acct { margin: 0 0 26px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.03); }
.ogou-acct-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 12px; margin-bottom: 18px; }
.ogou-acct-tab { padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #b9b9cc; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.ogou-acct-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
.ogou-acct-tab.is-active { background: linear-gradient(135deg,#ff5a1f,#ffb020); color: #140f08; }
.ogou-acct-pane { display: none; }
.ogou-acct-pane.is-active { display: block; }
.ogou-acct-pane label { display: block; color: #c7c7d4; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.ogou-acct-pane input { width: 100%; max-width: 420px; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.32); color: #fff; font-size: 15px; }
.ogou-acct-sep { margin: 22px 0 4px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.14); color: #8f8fa3; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.ogou-acct-pane .ogou-btn { margin-top: 18px; }

/* Transactions table */
.ogou-tx-wrap { overflow-x: auto; }
.ogou-tx { width: 100%; border-collapse: collapse; font-size: 14px; }
.ogou-tx th { text-align: left; color: #8f8fa3; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.ogou-tx td { color: #e7e7ef; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ogou-tx-st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.ogou-tx-st.ok { background: rgba(47,212,182,.16); color: #7ff0d8; }
.ogou-tx-st.warn { background: rgba(255,176,32,.16); color: #ffd79a; }
.ogou-tx-st.err { background: rgba(255,61,87,.16); color: #ff8b9c; }

/* =========================================================================
   PLAYLIST / QUEUE
   ========================================================================= */
/* Card "add to playlist" button — sits next to share */
.ogou-queue-add {
	position: absolute; top: 12px; right: 56px; z-index: 4;
	width: 40px; height: 40px; padding: 0;
	border-radius: 50%; border: 1px solid rgba(255,255,255,.42);
	background: rgba(10,10,16,.62); backdrop-filter: blur(10px);
	color: #fff; cursor: pointer;
	display: flex !important; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.4);
	transition: background .18s, transform .18s, color .18s, border-color .18s;
}
.ogou-queue-add .ogou-qa-plus {
	display: block; font-size: 26px; line-height: 1; font-weight: 300;
	margin-top: -3px; color: inherit;
}
.ogou-queue-add .ogou-qa-tip {
	position: absolute; top: 50%; right: calc(100% + 8px); transform: translateY(-50%);
	white-space: nowrap; background: rgba(10,10,16,.92); color: #fff;
	font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
	opacity: 0; pointer-events: none; transition: opacity .18s;
}
.ogou-queue-add:hover { background: var(--ogou-fire, #ff5a1f); border-color: transparent; color: #140f08; transform: scale(1.08); }
.ogou-queue-add:hover .ogou-qa-tip { opacity: 1; }
.ogou-queue-add.is-added { background: #2fd4b6; border-color: transparent; color: #06231d; }
.ogou-queue-add.is-added .ogou-qa-plus::before { content: '\2713'; font-size: 19px; }
.ogou-queue-add.is-added .ogou-qa-plus { font-size: 0; }

/* Mini-player transport */
.ogou-mini-skip {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
	color: #fff; cursor: pointer;
	width: 40px; height: 40px; padding: 0;
	display: flex !important; align-items: center; justify-content: center;
	border-radius: 50%; flex: 0 0 auto;
	transition: color .18s, background .18s, transform .18s, border-color .18s;
}
.ogou-mini-skip:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.36); transform: scale(1.06); }
.ogou-mini-skip:active { transform: scale(.96); }
/* Some themes force `fill` on SVGs — make sure our transport icons always show. */
.ogou-mini-skip svg {
	width: 19px !important; height: 19px !important;
	fill: currentColor !important; stroke: none !important;
	display: block !important; opacity: 1 !important; visibility: visible !important;
	max-width: none !important; margin: 0 !important;
}
@media (max-width: 640px) { .ogou-mini-skip { width: 36px; height: 36px; } .ogou-mini-skip svg { width: 17px !important; height: 17px !important; } }

.ogou-mini-queue {
	position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
	color: #fff; cursor: pointer; height: 40px; padding: 0 14px;
	display: flex; align-items: center; gap: 8px;
	border-radius: 12px; flex: 0 0 auto; font-size: 13.5px; font-weight: 700;
	transition: background .18s, border-color .18s;
}
.ogou-mini-queue:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.ogou-mq-ico { font-size: 16px; line-height: 1; }
.ogou-queue-count {
	min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 100px; background: var(--ogou-fire, #ff5a1f); color: #140f08;
	font-size: 12px; font-weight: 800; display: none; align-items: center; justify-content: center;
}
@media (max-width: 820px) { .ogou-mq-label { display: none; } .ogou-mini-queue { padding: 0 10px; } }

/* Queue panel */
.ogou-queue-panel {
	position: absolute; bottom: calc(100% + 10px); right: 12px; width: 340px; max-width: calc(100vw - 24px);
	max-height: 60vh; overflow-y: auto; z-index: 20;
	background: rgba(16,16,24,.97); border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0,0,0,.6); backdrop-filter: blur(18px); padding: 12px;
}
.ogou-queue-panel[hidden] { display: none; }
.ogou-queue-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.ogou-queue-head strong { color: #fff; font-size: 14px; }
.ogou-queue-clear { background: none; border: none; color: #8f8fa3; font-size: 12.5px; cursor: pointer; }
.ogou-queue-clear:hover { color: #ff8b9c; }
.ogou-queue-list { list-style: none; margin: 0; padding: 0; }
.ogou-queue-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.ogou-queue-item:hover { background: rgba(255,255,255,.07); }
.ogou-queue-item.is-current { background: rgba(255,90,31,.16); }
.ogou-queue-cover { width: 38px; height: 38px; border-radius: 8px; background: #0e0e15 center/cover no-repeat; flex: 0 0 auto; }
.ogou-queue-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ogou-queue-t { color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-queue-a { color: #8f8fa3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogou-queue-rm { background: none; border: none; color: #6f6f80; font-size: 18px; cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.ogou-queue-rm:hover { color: #ff8b9c; }
.ogou-queue-empty { color: #8f8fa3; font-size: 13px; padding: 14px 8px; text-align: center; }

@media (max-width: 640px) {
	.ogou-queue-panel { right: 6px; left: 6px; width: auto; }
}
/* Soft navigation: subtle progress hint */
html.ogou-navigating { cursor: progress; }
html.ogou-navigating body { opacity: .82; transition: opacity .15s ease; }

/* ---- Repeat button ---- */
.ogou-mini-repeat { position: relative; }
.ogou-mini-repeat.is-on { background: linear-gradient(135deg,#ff5a1f,#ffb020); border-color: transparent; color: #140f08; }
.ogou-mini-repeat.is-on:hover { filter: brightness(1.08); }
.ogou-repeat-one {
	position: absolute; top: -3px; right: -3px;
	width: 16px; height: 16px; border-radius: 50%;
	background: #140f08; color: #ffb020;
	font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
	display: none;
}
.ogou-mini-repeat.is-one .ogou-repeat-one { display: block; }

/* OGOU-BUILD: 1.28.0 */

/* ---- Content ID notice on the upload form ---- */
.ogou-cid { margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; border: 1px solid transparent; }
.ogou-cid[hidden] { display: none; }
.ogou-cid.is-info { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #c7c7d4; }
.ogou-cid.is-ok { background: rgba(47,212,182,.1); border-color: rgba(47,212,182,.34); color: #8ff0da; }
.ogou-cid.is-warn { background: rgba(255,176,32,.1); border-color: rgba(255,176,32,.42); color: #ffd79a; }
.ogou-cid a { color: #ffb020; font-weight: 700; }
.ogou-cid-note { display: block; margin-top: 8px; color: #b9b9cc; font-size: 13px; }
.ogou-cid-spin { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px;
	border: 2px solid rgba(255,255,255,.25); border-top-color: #ffb020; border-radius: 50%; animation: ogou-cid-rot .7s linear infinite; }
@keyframes ogou-cid-rot { to { transform: rotate(360deg); } }

/* ---- Language switcher ---- */
.ogou-lang { display: inline-flex; gap: 4px; padding: 3px; border-radius: 100px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ogou-lang-btn { padding: 6px 10px; border: none; border-radius: 100px; cursor: pointer; background: transparent; color: #9a9aad; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; line-height: 1; transition: background .16s, color .16s; }
.ogou-lang-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.ogou-lang-btn.is-on { background: linear-gradient(135deg,#ff5a1f,#ffb020); color: #140f08; }
.ogou-lang-select { max-width: 220px; }


/* =========================================================================
   PLAY BUTTON v9 (1.29.1) — CENTRING NO LONGER USES `transform`

   An element has only ONE transform property. Centring it with
   `translate(-50%,-50%)` and then scaling it on hover means the hover rule
   REPLACES the centring — the button leaps to a corner. Every earlier block
   in this file fought that battle with !important and lost, because the
   inline armour in class-ogou-player.php is more specific.

   Solution: absolute + inset:0 + margin:auto centres a fixed-size box with no
   transform at all, leaving `transform` free for hover/active scaling.
   Do not reintroduce translate() on these selectors.
   ========================================================================= */
.ogou-card .ogou-cover .ogou-play-overlay,
.ogou-single-cover .ogou-play-overlay {
	position: absolute !important;
	top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
	margin: auto !important;
	transform: none !important;
	transform-origin: 50% 50% !important;
}
.ogou-card .ogou-cover .ogou-play-overlay:hover,
.ogou-single-cover .ogou-play-overlay:hover { transform: scale(1.07) !important; }
.ogou-card .ogou-cover .ogou-play-overlay:active,
.ogou-single-cover .ogou-play-overlay:active { transform: scale(.96) !important; }

/* Album row buttons stay in the flow. */
.ogou-album-row .ogou-album-play {
	position: static !important;
	top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
	margin: 0 !important;
	transform: none !important;
}
.ogou-album-row .ogou-album-play:hover  { transform: scale(1.07) !important; }
.ogou-album-row .ogou-album-play:active { transform: scale(.96) !important; }

/* Duration label under the artwork keeps its own horizontal centring. */
.ogou-card .ogou-cover .ogou-card-time { transform: translateX(-50%) !important; }

/* =========================================================================
   DELETE + CLOSE BUTTONS v2 (1.29.2)
   Elementor styles bare <button> at (0,1,1), which beat the plain
   `.ogou-del` / `.ogou-modal-x` / `.ogou-icon-btn` rules above. Qualifying
   with `.ogou` + the element name reaches (0,2,1) and wins.
   The authoritative copy of these rules is printed inline by
   class-ogou-player.php so it survives a stale CSS cache.
   ========================================================================= */
.ogou button.ogou-icon-btn {
	width: 36px; height: 36px; padding: 0; margin: 0; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.14); border-radius: 11px;
	background: rgba(255,255,255,.03); color: #e7e7ef; font-size: 15px; line-height: 1;
}
.ogou button.ogou-icon-btn:hover { border-color: var(--ogou-brand); color: var(--ogou-brand); }
.ogou button.ogou-del {
	width: 36px; height: 36px; padding: 0; margin: 0; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,61,87,.32); border-radius: 11px;
	background: rgba(255,61,87,.07); color: var(--ogou-danger); font-size: 15px; line-height: 1;
}
.ogou button.ogou-del:hover { background: rgba(255,61,87,.18); border-color: rgba(255,61,87,.6); color: #ff8b9c; }
.ogou .ogou-modal { position: relative; }
.ogou button.ogou-modal-x {
	position: absolute; top: 14px; right: 14px; left: auto; bottom: auto; z-index: 5;
	width: 36px; height: 36px; padding: 0; margin: 0;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
	background: rgba(20,20,28,.96); color: #c7c7d4;
	font-size: 20px; line-height: 1; font-weight: 400;
	transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.ogou button.ogou-modal-x:hover { background: rgba(255,61,87,.22); border-color: rgba(255,61,87,.5); color: #ff8b9c; transform: rotate(90deg); }
.ogou .ogou-modal h3 { padding-right: 44px; }

/* =========================================================================
   MODAL CONTENT v2 (1.29.3)
   `.ogou-modal label` (0,1,1) was beating `.ogou-gw` (0,1,0): the payment
   rows lost their flex layout and took the muted grey meant for field
   labels. Radios also inherited `width:100%` from builder form CSS.
   ========================================================================= */
.ogou-modal .ogou-gw {
	display: flex; align-items: center; gap: 11px;
	width: 100%; margin: 0; padding: 13px 15px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
	color: #edecf3; font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer;
}
.ogou-modal .ogou-gw:hover { border-color: var(--ogou-brand); background: rgba(255,255,255,.07); }
.ogou-modal .ogou-gw span { color: #edecf3; font-size: 15px; }
.ogou input[type="radio"], .ogou input[type="checkbox"] {
	-webkit-appearance: auto; appearance: auto;
	width: 18px; height: 18px; max-width: 18px; min-width: 0; flex: 0 0 auto;
	margin: 0; padding: 0; accent-color: var(--ogou-brand); vertical-align: middle;
}
.ogou-modal p { color: #dcdce6; }

/* =========================================================================
   SHARE: TWO DIFFERENT BUTTONS, ONE SHARED CLASS (1.29.4)
   `.ogou-share` round overlay = on artwork only. `.ogou-btn-share` pill =
   in the actions row of a single page. Keep the round rules scoped to
   `.ogou-cover` so they never swallow the pill.
   ========================================================================= */
.ogou-btn-share {
	position: static; top: auto; right: auto;
	width: auto; height: auto;
	padding: 13px 22px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
	color: #fff; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
	transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.ogou-btn-share svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ogou-btn-share:hover {
	background: linear-gradient(135deg,#ff5a1f,#ffb020);
	border-color: transparent; color: #140f08; transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(255,90,31,.32);
}
.ogou-btn-share:active { transform: translateY(0); }
.ogou-btn-share.is-copied { background: rgba(47,212,182,.16); border-color: rgba(47,212,182,.5); color: #8ff0da; }

/* File pickers (1.30.0) */
.ogou input[type="file"] {
	width: 100%; display: block; padding: 11px 13px; margin: 0 0 4px;
	background: rgba(0,0,0,.32); color: #dcdce6;
	border: 1px dashed rgba(255,255,255,.22); border-radius: 10px;
	font-size: 13.5px; cursor: pointer;
}
.ogou input[type="file"]::file-selector-button {
	margin-right: 12px; padding: 8px 15px; border: none; border-radius: 8px;
	background: linear-gradient(135deg,#ff5a1f,#ffb020); color: #140f08;
	font-weight: 700; font-size: 13px; cursor: pointer;
}

/* OGOU-BUILD: 1.30.0 — if you can read this in the loaded CSS, the fix is live */


/* =========================================================================
   UPLOAD QUEUE (1.35.0)
   A row per file while an album goes up. One aggregate percentage moves so
   little across twelve files that it reads as a frozen page; naming the file
   currently moving is what makes the wait legible.
   ========================================================================= */
.ogou-upq {
	margin: 18px 0; padding: 16px; border-radius: 14px;
	background: rgba(0, 0, 0, .3); border: 1px solid var(--ogou-border);
}
.ogou-upq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ogou-upq-title { font-size: 13px; font-weight: 700; letter-spacing: .4px; color: var(--ogou-text); }
.ogou-upq-count { font-size: 12.5px; color: var(--ogou-muted); font-variant-numeric: tabular-nums; }
.ogou-upq-total { height: 6px; border-radius: 100px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ogou-upq-total span {
	display: block; height: 100%; width: 0; border-radius: 100px;
	background: linear-gradient(90deg, var(--ogou-brand), var(--ogou-gold, #ffb020));
	transition: width .25s;
}
.ogou-upq-list {
	list-style: none; margin: 12px 0 0; padding: 0;
	max-height: 300px; overflow-y: auto;
}
.ogou-upq-list li {
	display: grid; grid-template-columns: 18px 1fr auto 44px; align-items: center;
	gap: 9px; padding: 8px 0; font-size: 13px; color: #b9b9cc;
	border-top: 1px solid rgba(255, 255, 255, .05);
}
.ogou-upq-list li:first-child { border-top: none; }
.ogou-upq-ico { text-align: center; font-size: 13px; color: #6f6f85; }
.ogou-upq-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogou-upq-size { font-size: 11.5px; color: #6f6f85; font-variant-numeric: tabular-nums; }
.ogou-upq-pct { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: #8b8b9c; }
.ogou-upq-bar {
	grid-column: 2 / -1; height: 3px; border-radius: 100px;
	background: rgba(255, 255, 255, .07); overflow: hidden;
}
.ogou-upq-bar span {
	display: block; height: 100%; width: 0; border-radius: 100px;
	background: var(--ogou-brand); transition: width .2s;
}

/* States */
.ogou-upq-list li.is-up { color: #fff; }
.ogou-upq-list li.is-up .ogou-upq-ico { color: var(--ogou-brand); animation: ogou-upq-blink 1s ease-in-out infinite; }
.ogou-upq-list li.is-done .ogou-upq-ico,
.ogou-upq-list li.is-done .ogou-upq-pct { color: #2fd4b6; }
.ogou-upq-list li.is-done .ogou-upq-bar span { background: #2fd4b6; }
.ogou-upq-list li.is-fail { color: #ff8b9c; }
.ogou-upq-list li.is-fail .ogou-upq-ico,
.ogou-upq-list li.is-fail .ogou-upq-pct { color: var(--ogou-danger); }
.ogou-upq-list li.is-fail .ogou-upq-bar span { width: 100% !important; background: rgba(255, 61, 87, .5); }
@keyframes ogou-upq-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.ogou-upq-list li.is-up .ogou-upq-ico { animation: none; }
}


/* =========================================================================
   ALBUMS AS ONE THING (1.36.0)
   In the store an album is a single card; in the dashboard it is a row that
   opens. Both exist because twelve identical covers is not a catalogue.
   ========================================================================= */

/* Store: album card */
.ogou-card-album .ogou-cover { position: relative; }
.ogou-album-badge {
	position: absolute; top: 12px; left: 12px; z-index: 4;
	padding: 5px 11px; border-radius: 100px;
	background: rgba(10, 10, 17, .82); border: 1px solid rgba(255, 255, 255, .16);
	color: #fff; font-size: 10.5px; font-weight: 800;
	letter-spacing: .9px; text-transform: uppercase;
	backdrop-filter: blur(6px);
}
/* A stack of edges, so it reads as several records rather than one. */
.ogou-card-album .ogou-cover::after {
	content: ''; position: absolute; right: -5px; top: 9px; bottom: 9px; width: 5px;
	border-radius: 0 6px 6px 0; background: rgba(255, 255, 255, .16);
}
.ogou-card-album .ogou-price { font-size: 13px; }

/* Dashboard: album row */
.ogou-dash-albums { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ogou-dash-album {
	border-radius: 18px; overflow: hidden;
	background: rgba(255, 255, 255, .03); border: 1px solid var(--ogou-border);
	transition: border-color .18s;
}
.ogou-dash-album.is-open { border-color: rgba(255, 90, 31, .4); }
.ogou-dash-album-head { display: flex; gap: 16px; padding: 16px; align-items: center; }
.ogou-dash-album-cover {
	position: relative; flex: 0 0 auto; width: 96px; height: 96px;
	border-radius: 13px; overflow: hidden; background: #12121b;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255, 255, 255, .2); font-size: 30px;
}
.ogou-dash-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ogou-dash-album button.ogou-dash-album-play {
	position: absolute !important; inset: 0 !important; margin: 0 !important; padding: 0 !important;
	width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	border: none !important; border-radius: 0 !important; cursor: pointer !important;
	background: rgba(10, 10, 17, .5) !important; color: #fff !important;
	opacity: 0; transition: opacity .16s !important; box-shadow: none !important;
	appearance: none !important; -webkit-appearance: none !important;
}
.ogou-dash-album-cover:hover button.ogou-dash-album-play,
.ogou-dash-album button.ogou-dash-album-play:focus-visible { opacity: 1; }
.ogou-dash-album button.ogou-dash-album-play svg { display: block !important; fill: currentColor !important; }

.ogou-dash-album-meta { flex: 1; min-width: 0; }
.ogou-dash-album-tag {
	display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--ogou-brand); margin-bottom: 5px;
}
.ogou-dash-album-meta h4 { margin: 0 0 6px; font-size: 17px; line-height: 1.25; }
.ogou-dash-album-meta h4 a { color: #fff; text-decoration: none; }
.ogou-dash-album-meta h4 a:hover { color: var(--ogou-gold, #ffb020); }
.ogou-dash-album-stats { margin: 0 0 12px; font-size: 12.5px; color: var(--ogou-muted); }
.ogou-dash-album-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ogou-dash-album-list { padding: 0 16px 16px; border-top: 1px solid var(--ogou-border); }
.ogou-dash-album-list[hidden] { display: none; }
.ogou-dash-album-list .ogou-grid { margin-top: 16px; }

@media (max-width: 560px) {
	.ogou-dash-album-head { flex-direction: column; align-items: flex-start; }
	.ogou-dash-album-cover { width: 100%; height: auto; aspect-ratio: 1; }
}

/* Album pricing control on the artist's dashboard (1.37.0) */
.ogou-album-pricing {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 12px; padding: 10px 12px; border-radius: 11px;
	background: rgba(0, 0, 0, .28); border: 1px solid var(--ogou-border);
	font-size: 13px; color: var(--ogou-muted);
}
.ogou-album-pricing label { display: flex; align-items: center; gap: 7px; margin: 0; color: #c9c9d6; }
.ogou-album-pricing select {
	padding: 6px 9px; border-radius: 8px; font: inherit; font-size: 13px;
	background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.ogou-album-total { font-size: 16px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ogou-album-price-note { font-size: 12px; color: #6f6f85; }

/* Album delete panel (1.38.0) — two clearly different acts, not one button. */
.ogou-album-danger {
	margin: 0 16px 16px; padding: 14px 16px; border-radius: 12px;
	background: rgba(255, 61, 87, .07); border: 1px solid rgba(255, 61, 87, .3);
}
.ogou-album-danger[hidden] { display: none; }
.ogou-album-danger-q { margin: 0 0 12px !important; font-size: 14px; font-weight: 700; color: #fff; }
.ogou-album-danger-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ogou-album-danger-warn {
	margin: 12px 0 0 !important; font-size: 12.5px; line-height: 1.6; color: #ffb4bf;
}
.ogou .ogou-btn-danger {
	background: rgba(255, 61, 87, .16) !important;
	border: 1px solid rgba(255, 61, 87, .5) !important;
	color: #ff8b9c !important;
}
.ogou .ogou-btn-danger:hover {
	background: rgba(255, 61, 87, .28) !important;
	border-color: rgba(255, 61, 87, .75) !important;
	color: #fff !important;
}

/* =========================================================================
   PLAN COMPARISON (1.40.0)
   Rows derived from the plans themselves, so the table cannot fall out of
   step with the cards above it.
   ========================================================================= */
.ogou-plan-compare-wrap { margin: 28px 0 0; }
.ogou-plan-compare-wrap h4 {
	margin: 0 0 14px; font-size: 15px; font-weight: 800;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ogou-text);
}
.ogou-plan-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ogou-plan-compare {
	width: 100%; min-width: 560px; border-collapse: collapse;
	background: rgba(0, 0, 0, .24); border: 1px solid var(--ogou-border);
	border-radius: 14px; overflow: hidden;
}
.ogou-plan-compare thead th {
	padding: 14px 12px; text-align: center; vertical-align: bottom;
	background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--ogou-border);
}
.ogou-plan-compare thead th:first-child { background: transparent; }
.ogou-plan-compare .pc-name {
	display: block; font-size: 13px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.ogou-plan-compare .pc-price {
	display: block; margin-top: 5px; font-size: 15px; font-weight: 800;
	color: var(--ogou-gold, #ffb020); font-variant-numeric: tabular-nums;
}
.ogou-plan-compare .pc-days { display: block; margin-top: 3px; font-size: 11px; color: var(--ogou-muted); }
.ogou-plan-compare tbody th {
	padding: 11px 14px; text-align: left; font-size: 13px; font-weight: 500;
	line-height: 1.45; color: #c9c9d6; border-top: 1px solid rgba(255, 255, 255, .05);
}
.ogou-plan-compare tbody td {
	padding: 11px 12px; text-align: center; font-size: 15px;
	border-top: 1px solid rgba(255, 255, 255, .05);
}
.ogou-plan-compare tbody tr:nth-child(odd) th,
.ogou-plan-compare tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .02); }
.ogou-plan-compare .pc-yes { color: #2fd4b6; }
.ogou-plan-compare .pc-no { color: #4a4a5c; }

/* Promoted slot in the listener's queue (1.41.0).
   Labelled on purpose: a paid insertion that looks like a recommendation is
   the fastest way to lose the trust the queue depends on. */
.ogou-queue-item.is-promo { background: rgba(255, 176, 32, .05); }
.ogou-queue-promo {
	display: inline-block; margin-left: 7px; padding: 1px 7px;
	border-radius: 100px; background: rgba(255, 176, 32, .18);
	color: var(--ogou-gold, #ffb020);
	font-size: 9.5px; font-style: normal; font-weight: 800;
	letter-spacing: .09em; text-transform: uppercase; vertical-align: middle;
}

/* Password reset screens (1.42.0) — same card as the login form. */
.ogou-auth-ok {
	margin: 0 0 16px; padding: 14px 16px; border-radius: 12px;
	background: rgba(47, 212, 182, .12); border-left: 3px solid #2fd4b6;
	color: #b7f0e5; font-size: 14.5px; line-height: 1.6;
}
.ogou-auth-note { margin: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: var(--ogou-muted); }
.ogou-auth-card label {
	display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 700;
	letter-spacing: .3px; text-transform: uppercase; color: #b9b9cc;
}
.ogou-auth-card input[type="password"],
.ogou-auth-card input[type="text"] { margin-bottom: 16px; }

/* =========================================================================
   CLAIM ROWS (1.43.1)

   The title is inside a flex column, and a flex item's default `min-width` is
   `auto` — meaning min-content. With `white-space: nowrap` on the title, its
   min-content width IS the whole string, so the item refuses to shrink and
   the row grows past the viewport. On a phone that pushed the "This is mine"
   button off screen entirely, and because the row widened its container,
   every paragraph on the page wrapped to that wider width and looked cut.

   `min-width: 0` on the items is the fix; the wrap below is what makes it
   comfortable rather than merely possible.
   ========================================================================= */
.ogou-claim-info { min-width: 0; }
.ogou-claim-info > * {
	min-width: 0; max-width: 100%;
	display: block;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ogou-claim-row > .ogou-btn,
.ogou-claim-row > .ogou-claim-owned { flex: 0 0 auto; }

@media (max-width: 620px) {
	/* The button gets its own line and the full width: a claim is the whole
	   point of this screen, so it should be the easiest thing to hit. */
	.ogou-claim-row { flex-wrap: wrap; row-gap: 10px; }
	.ogou-claim-info { flex: 1 1 auto; }
	.ogou-claim-row > .ogou-btn {
		flex: 1 0 100%; width: 100% !important;
		justify-content: center !important; padding-top: 12px !important; padding-bottom: 12px !important;
	}
	.ogou-claim-row > .ogou-claim-owned { flex: 1 0 100%; text-align: center; }
	.ogou-claim-info > strong { white-space: normal; overflow-wrap: anywhere; }
	.ogou-claim-head h3 { font-size: 18px; }
}

/* =========================================================================
   LYRICS (1.44.0)
   No timed highlighting anywhere: nothing in the catalogue carries
   timestamps, and a karaoke line moving at the wrong moment is worse than
   plain text that is simply right.
   ========================================================================= */
.ogou-lyrics-block { margin: 22px 0 0; }
.ogou button.ogou-lyrics-toggle,
.ogou button.ogou-lyrics-add {
	display: inline-flex !important; align-items: center !important; gap: 9px !important;
	width: auto !important; min-width: 0 !important; padding: 12px 20px !important; margin: 0 !important;
	border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important;
	background: rgba(255,255,255,.05) !important; color: #fff !important;
	font-family: inherit !important; font-size: 14.5px !important; font-weight: 700 !important;
	line-height: 1 !important; text-transform: none !important; cursor: pointer !important;
	box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important;
	transition: background .16s, border-color .16s !important;
}
.ogou button.ogou-lyrics-toggle:hover,
.ogou button.ogou-lyrics-add:hover { background: rgba(255,255,255,.1) !important; border-color: var(--ogou-brand) !important; }
.ogou button.ogou-lyrics-toggle svg,
.ogou button.ogou-lyrics-add svg { display: block !important; fill: currentColor !important; flex: 0 0 auto !important; }
.ogou-lyrics-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--ogou-muted); max-width: 46em; }
.ogou-lyrics-body { margin: 16px 0 0; padding: 20px 22px; border-radius: 14px;
	background: rgba(0,0,0,.3); border: 1px solid var(--ogou-border); }
.ogou-lyrics-body[hidden] { display: none; }
.ogou-lyrics-body pre {
	margin: 0; font-family: inherit; font-size: 15.5px; line-height: 1.85; color: #dcdce6;
	white-space: pre-wrap; overflow-wrap: anywhere;
}
.ogou-lyrics-credit { margin: 16px 0 0; font-size: 12.5px; color: var(--ogou-muted); font-style: italic; }

/* Player bar */
#ogou-mini .ogou-mini-lyrics {
	width: 34px !important; height: 34px !important; flex: 0 0 auto;
	padding: 0 !important; margin: 0 !important; border: none !important;
	background: transparent !important; color: #9a9aad !important; cursor: pointer !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	min-width: 0 !important; min-height: 0 !important; box-shadow: none !important;
}
#ogou-mini .ogou-mini-lyrics:hover { color: var(--ogou-gold, #ffb020) !important; }
#ogou-mini .ogou-mini-lyrics[hidden] { display: none !important; }

#ogou-lyrics-panel {
	position: fixed; right: 16px; bottom: 104px; z-index: 2147482500;
	width: min(380px, calc(100vw - 32px)); max-height: min(56vh, 480px);
	display: flex; flex-direction: column;
	padding: 16px 18px; border-radius: 18px;
	background: rgba(12,12,18,.97); border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 30px 70px rgba(0,0,0,.6); backdrop-filter: blur(10px);
}
#ogou-lyrics-panel[hidden] { display: none; }
.ogou-lyr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ogou-lyr-head strong { font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ogou-lyr-close {
	width: 28px; height: 28px; flex: 0 0 auto; border: none; border-radius: 8px;
	background: rgba(255,255,255,.06); color: #b9b9cc; font-size: 17px; cursor: pointer;
}
#ogou-lyr-body {
	margin: 0; overflow-y: auto; font-family: inherit; font-size: 14.5px; line-height: 1.8;
	color: #dcdce6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ogou-lyr-credit { margin: 12px 0 0; font-size: 12px; color: #6f6f85; font-style: italic; }

@media (max-width: 560px) {
	#ogou-lyrics-panel { right: 8px; left: 8px; width: auto; bottom: 96px; max-height: 52vh; }
}

/* Release dates and pre-orders (1.48.0) */
.ogou-release-badge {
	position: absolute; top: 12px; left: 12px; z-index: 4;
	padding: 5px 11px; border-radius: 100px;
	background: rgba(10, 10, 17, .86); border: 1px solid rgba(255, 255, 255, .18);
	color: #fff; font-size: 10.5px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.ogou-release-badge.is-pre {
	background: linear-gradient(120deg, var(--ogou-brand), var(--ogou-gold, #ffb020));
	border-color: transparent; color: #140f08;
}
.ogou-release-note {
	display: flex; flex-direction: column; gap: 4px;
	margin: 0 0 18px; padding: 14px 17px; border-radius: 13px;
	background: rgba(255, 255, 255, .04); border-left: 3px solid rgba(255, 255, 255, .3);
}
.ogou-release-note.is-pre {
	background: rgba(255, 176, 32, .1); border-left-color: var(--ogou-gold, #ffb020);
}
.ogou-release-note strong { font-size: 15px; color: #fff; }
.ogou-release-note span { font-size: 13px; line-height: 1.6; color: var(--ogou-muted); }
.ogou-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #d5d5e2; }
.ogou-check input { width: auto !important; margin: 0 !important; }

/* Play / shuffle on the artist page (1.49.0) */
.ogou-artist-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.ogou button.ogou-artist-play,
.ogou button.ogou-artist-shuffle {
	display: inline-flex !important; align-items: center !important; gap: 9px !important;
	width: auto !important; min-width: 0 !important; padding: 13px 24px !important; margin: 0 !important;
	border-radius: 12px !important; cursor: pointer !important;
	font-family: inherit !important; font-size: 14.5px !important; font-weight: 700 !important;
	line-height: 1 !important; text-transform: none !important;
	appearance: none !important; -webkit-appearance: none !important;
	transition: transform .16s, box-shadow .16s, background .16s, border-color .16s !important;
}
.ogou button.ogou-artist-play {
	border: none !important;
	background: linear-gradient(120deg, var(--ogou-brand), var(--ogou-gold, #ffb020)) !important;
	color: #140f08 !important;
	box-shadow: 0 10px 26px rgba(255, 90, 31, .3) !important;
}
.ogou button.ogou-artist-play:hover { transform: translateY(-2px) !important; }
.ogou button.ogou-artist-shuffle {
	border: 2px solid rgba(255, 255, 255, .2) !important;
	background: rgba(255, 255, 255, .05) !important; color: #fff !important;
	box-shadow: none !important;
}
.ogou button.ogou-artist-shuffle:hover {
	background: rgba(255, 255, 255, .1) !important; border-color: var(--ogou-brand) !important;
}
.ogou button.ogou-artist-play svg,
.ogou button.ogou-artist-shuffle svg { display: block !important; fill: currentColor !important; flex: 0 0 auto !important; }
.ogou button.ogou-artist-play.is-loading,
.ogou button.ogou-artist-shuffle.is-loading { opacity: .6 !important; }

@media (max-width: 560px) {
	.ogou-artist-actions { width: 100%; }
	.ogou button.ogou-artist-play,
	.ogou button.ogou-artist-shuffle { flex: 1 1 auto !important; justify-content: center !important; }
}

/* The featuring row on a track page: the label and the chips share a line
   and wrap together instead of the chips hanging off the end. */
.ogou-meta-featuring {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ogou-meta-featuring strong { flex: 0 0 auto; }

/* The one-time code, inside the withdrawal modal (1.58.1) */
.ogou-w-otp { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px;
	background: rgba(255, 176, 32, .09); border: 1px solid rgba(255, 176, 32, .3); }
.ogou-w-otp.is-done { background: rgba(47, 212, 182, .1); border-color: rgba(47, 212, 182, .35); }
.ogou-w-otp p { margin: 0 0 11px; font-size: 13px; line-height: 1.55; color: #ffd08a; }
.ogou-w-otp.is-done p { color: #b7f0e5; }
.ogou-w-otp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ogou-w-otp-row input {
	width: 116px !important; flex: 0 0 auto !important; margin: 0 !important;
	text-align: center !important; letter-spacing: .32em !important;
	font-size: 17px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums;
}
.ogou .ogou-w-otp-row button.ogou-btn-sm {
	width: auto !important; flex: 0 0 auto !important; margin: 0 !important;
	padding: 11px 15px !important; font-size: 13px !important; white-space: nowrap !important;
}
.ogou-w-otp-msg { display: block; margin-top: 10px; font-size: 12.5px; color: #c9c9d6; }
.ogou-w-otp-msg:empty { display: none; }

/* A record you already own (1.60.0) — green so it reads as done, not for sale */
.ogou a.ogou-owned,
.ogou a.ogou-btn.ogou-owned {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	background: linear-gradient(120deg, #17b877, #2fd4b6) !important;
	border: none !important; color: #06231b !important;
	font-weight: 800 !important; text-decoration: none !important;
	box-shadow: 0 8px 22px rgba(23, 184, 119, .28) !important;
	transition: transform .16s, filter .16s !important;
}
.ogou a.ogou-owned:hover { transform: translateY(-1px) !important; filter: brightness(1.06) !important; }
.ogou a.ogou-owned svg { display: block !important; fill: currentColor !important; flex: 0 0 auto !important; }
.ogou .ogou-card-foot a.ogou-owned { padding: 8px 13px !important; font-size: 12.5px !important; }

/* Music you are on — the collaborator's view (1.64.0) */
.ogou-collab { margin: 0 0 30px; }
.ogou-collab h3 { margin: 0 0 4px; font-size: 15px; color: var(--ogou-gold, #ffb020); }
.ogou-collab-sub { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--ogou-muted); max-width: 62ch; }
.ogou-collab-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ogou-collab-table th {
	text-align: left; padding: 8px 10px; font-size: 10.5px; letter-spacing: .09em;
	text-transform: uppercase; color: var(--ogou-muted); font-weight: 700;
	border-bottom: 1px solid var(--ogou-border);
}
.ogou-collab-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.ogou-collab-table td:first-child { display: flex; align-items: center; gap: 11px; }
.ogou-collab-cover {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px;
	background: #16161f center/cover no-repeat;
}
.ogou-collab-table td span { display: flex; flex-direction: column; min-width: 0; }
.ogou-collab-table td a { color: #fff; text-decoration: none; }
.ogou-collab-table td a:hover { color: var(--ogou-gold, #ffb020); }
.ogou-collab-table td em { font-style: normal; font-size: 12px; color: var(--ogou-muted); margin-top: 2px; }
.ogou-collab-money { font-weight: 800; color: #2fd4b6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ogou-collab-table tfoot td { border-bottom: none; border-top: 2px solid var(--ogou-border); font-weight: 700; }

@media (max-width: 560px) {
	.ogou-collab-table th:nth-child(3), .ogou-collab-table td:nth-child(3) { display: none; }
}

/* The withdrawal rules, said before the request (1.65.0) */
.ogou-w-rules {
	margin: 4px 0 14px; padding: 13px 16px; border-radius: 12px;
	background: rgba(255, 255, 255, .04); border-left: 3px solid var(--ogou-gold, #ffb020);
}
.ogou-w-rules strong { display: block; margin-bottom: 7px; font-size: 12.5px; color: #fff; }
.ogou-w-rules ul { margin: 0; padding-left: 17px; }
.ogou-w-rules li { font-size: 12.5px; line-height: 1.6; color: var(--ogou-muted); margin-bottom: 3px; }

/* Withdrawals paused after a payout change (1.66.0) */
.ogou-hold {
	display: flex; flex-direction: column; gap: 6px;
	margin: 0 0 22px; padding: 15px 18px; border-radius: 13px;
	background: rgba(255, 176, 32, .1); border-left: 3px solid var(--ogou-gold, #ffb020);
}
.ogou-hold strong { font-size: 14.5px; color: #fff; }
.ogou-hold span { font-size: 12.5px; line-height: 1.65; color: #d7c39a; }

/* =========================================================================
   MODALS THAT ARE TALLER THAN THE SCREEN

   The box never exceeds the viewport, its middle scrolls, and the button
   that finishes the job stays visible at the bottom.

   The first attempt did this by putting the modal's padding on each child as
   a left and right margin. A field with `width: 100%` then measured itself
   against the modal and added 52px of margin on top of that — so every input
   in every modal ran past its own box on a narrow screen. Padding belongs on
   the container; children take the width they are given.
   ========================================================================= */
.ogou .ogou-modal-overlay {
	align-items: center !important;
	padding: 16px !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

.ogou .ogou-modal {
	display: flex !important;
	flex-direction: column !important;
	/* dvh follows the mobile browser bars; vh is the fallback. */
	max-height: 88vh !important;
	max-height: 88dvh !important;

	/*
	 * The modal scrolls itself.
	 *
	 * This was `overflow: hidden`, on the assumption that every modal has an
	 * inner `.ogou-modal-scroll` to do the scrolling. Only the withdrawal
	 * modal ever got one — so on the edit form, which is taller than a phone,
	 * the bottom half was clipped and unreachable. Nothing was broken about
	 * the scrolling; there was simply nowhere for it to happen.
	 *
	 * `overscroll-behavior: contain` stops a swipe that reaches the end from
	 * carrying on into the page behind, which is the other half of what was
	 * happening: the modal appeared to freeze while the page moved under it.
	 */
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Nothing may be wider than the box it is in. `min-width: 0` matters:
   a flex child refuses to shrink below its content without it, and an
   <input> carries an intrinsic width of about twenty characters. */
.ogou .ogou-modal > * { flex: 0 0 auto; max-width: 100%; }
.ogou .ogou-modal input,
.ogou .ogou-modal select,
.ogou .ogou-modal textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/*
 * The middle scrolls; the button after it is a flex child that cannot
 * shrink, so it stays on screen without needing to be sticky.
 */
.ogou .ogou-modal > .ogou-modal-scroll {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 -4px; padding: 0 4px;
}

/*
 * The page behind holds still while a modal is open.
 *
 * `overflow: hidden` on the document is enough on a desktop and is ignored by
 * Safari on iOS, which is where this was reported. Fixing the body works
 * there, and costs a saved scroll position to put back afterwards.
 */
html.ogou-locked, html.ogou-locked body { overflow: hidden !important; }
html.ogou-locked body {
	position: fixed !important;
	width: 100% !important;
	top: var(--ogou-lock-top, 0) !important;
	left: 0 !important;
}

@media (max-height: 700px) {
	.ogou .ogou-modal { max-height: 94dvh !important; }
}

/* The rules, folded */
details.ogou-w-rules {
	margin: 4px 0 14px; padding: 11px 14px; border-radius: 12px;
	background: rgba(255, 255, 255, .04); border-left: 3px solid var(--ogou-gold, #ffb020);
}
details.ogou-w-rules summary {
	cursor: pointer; font-size: 12.5px; font-weight: 700; color: #fff;
	list-style: none; display: flex; align-items: center; gap: 7px;
}
details.ogou-w-rules summary::-webkit-details-marker { display: none; }
details.ogou-w-rules summary::before {
	content: '?'; flex: 0 0 auto;
	width: 17px; height: 17px; border-radius: 50%;
	background: rgba(255, 176, 32, .2); color: var(--ogou-gold, #ffb020);
	font-size: 11px; display: flex; align-items: center; justify-content: center;
}
details.ogou-w-rules[open] summary { margin-bottom: 8px; }
details.ogou-w-rules ul { margin: 0; padding-left: 17px; }
details.ogou-w-rules li { font-size: 12.5px; line-height: 1.6; color: var(--ogou-muted); margin-bottom: 3px; }

/* The code box, tightened so it does not dominate the modal */
.ogou-w-otp { padding: 12px 14px !important; }
.ogou-w-otp p { margin-bottom: 9px !important; font-size: 12.5px !important; }
.ogou-w-otp-row { gap: 7px !important; }
.ogou-w-otp-row input { width: 104px !important; padding: 9px !important; font-size: 15px !important; }
.ogou .ogou-w-otp-row button.ogou-btn-sm { padding: 9px 13px !important; font-size: 12px !important; }

/* Where the money goes — shown, not chosen (1.68.0) */
.ogou-w-dest {
	display: flex; flex-direction: column; gap: 3px;
	padding: 13px 15px; border-radius: 12px;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--ogou-border);
}
.ogou-w-dest.is-empty { border-color: rgba(255, 176, 32, .4); background: rgba(255, 176, 32, .08); }
.ogou-w-dest-m { font-size: 14.5px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 9px; }
.ogou-w-dest-m em {
	font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; padding: 3px 8px; border-radius: 100px;
	background: rgba(255, 176, 32, .18); color: var(--ogou-gold, #ffb020);
}
.ogou-w-dest-d { font-size: 13px; color: var(--ogou-muted); word-break: break-all; }
.ogou-w-dest.is-empty span { font-size: 13px; color: #ffd08a; line-height: 1.55; }
.ogou .ogou-w-dest a.ogou-w-change {
	align-self: flex-start; margin-top: 7px;
	font-size: 12.5px !important; color: var(--ogou-gold, #ffb020) !important;
	text-decoration: underline !important; background: none !important;
	padding: 0 !important; border: none !important;
}

/* =========================================================================
   MESSAGES AND CONFIRMATIONS (1.69.0)
   Replacing the browser's own alert box, which stops the page and speaks in
   the operating system's voice on top of one built this carefully.
   ========================================================================= */
#ogou-toasts {
	position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
	z-index: 2147483200; display: flex; flex-direction: column; gap: 9px;
	width: min(440px, calc(100vw - 24px)); pointer-events: none;
}
.ogou-toast {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 13px 14px; border-radius: 14px; pointer-events: auto;
	background: rgba(14, 14, 20, .97); border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
	color: #edecf3; font-size: 13.5px; line-height: 1.55;
	animation: ogou-toast-in .26s cubic-bezier(.2,.9,.3,1) both;
}
.ogou-toast.is-going { animation: ogou-toast-out .24s ease forwards; }
@keyframes ogou-toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ogou-toast-out { to { opacity: 0; transform: translateY(10px); } }

.ogou-toast-mark {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800;
}
.ogou-toast.is-ok   .ogou-toast-mark { background: rgba(47, 212, 182, .2); color: #2fd4b6; }
.ogou-toast.is-bad  .ogou-toast-mark { background: rgba(255, 61, 87, .2); color: #ff7a8c; }
.ogou-toast.is-info .ogou-toast-mark { background: rgba(255, 176, 32, .2); color: #ffb020; }
.ogou-toast-text { flex: 1; min-width: 0; white-space: pre-line; }
.ogou-toast-x {
	flex: 0 0 auto; border: none; background: transparent; color: #6f6f85;
	font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ogou-toast-x:hover { color: #edecf3; }

/* The end of a withdrawal */
.ogou-modal.is-done { text-align: center; }
.ogou-done { padding: 34px 26px 26px; }
.ogou-done-mark {
	display: flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
	animation: ogou-done-pop .34s cubic-bezier(.2,.9,.3,1) both;
}
.ogou-done-mark.is-sent { background: rgba(47, 212, 182, .16); color: #2fd4b6; }
.ogou-done-mark.is-held { background: rgba(255, 176, 32, .16); color: #ffb020; }
@keyframes ogou-done-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.ogou-done h3 { margin: 0 0 6px !important; font-size: 20px; }
.ogou-done-amount { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: var(--ogou-gold, #ffb020); }
.ogou-done-text { margin: 0 0 20px; font-size: 13.5px; line-height: 1.65; color: var(--ogou-muted); white-space: pre-line; }
.ogou .ogou-done button.ogou-btn-block { width: 100% !important; margin: 0 !important; position: static !important; }

@media (prefers-reduced-motion: reduce) {
	.ogou-toast, .ogou-done-mark { animation: none; }
}

/* Money that is the artist's but has not finished settling (1.72.0) */
.ogou-balance-held {
	display: flex; flex-direction: column; gap: 1px;
	margin-top: 6px; font-size: 12px; color: var(--ogou-muted);
}
.ogou-balance-held em {
	font-style: normal; font-size: 11px; color: rgba(255, 176, 32, .85);
}

/* Small print under a payment method (1.72.0) */
.ogou-gw-note {
	display: block; margin-top: 3px;
	font-style: normal; font-size: 11.5px; line-height: 1.45;
	color: var(--ogou-muted);
}

/* =========================================================================
   PAYMENT METHODS, SHOWN

   Every mark is drawn to the same height whatever its natural shape, because
   a list of payment methods is a list of equals.

   Specificity and !important throughout, and not for tidiness: the theme sets
   `img { height: auto }`, which beat a plain class selector and let the Pay'M
   artwork render at its natural size — swallowing the row and pushing the
   label out from under it. Fixed sizes on images have to be stated in terms
   the theme cannot outrank.
   ========================================================================= */
.ogou .ogou-paylist { display: grid !important; gap: 10px !important; margin: 14px 0 18px !important; }

/* The checkout modal is narrower than the promotion screen, so the marks
   drop under the label there at almost any width. Stated on the modal rather
   than by width alone, because the modal is narrow whatever the screen is. */
.ogou .ogou-modal .ogou-paylist label.ogou-pay { grid-template-columns: auto 1fr; }
.ogou .ogou-modal .ogou-paylist label.ogou-pay .ogou-pay-text { grid-column: 2; grid-row: 1; }
.ogou .ogou-modal .ogou-paylist label.ogou-pay .ogou-pay-mark {
	grid-column: 1 / -1; grid-row: 2; max-width: 100% !important;
}

.ogou label.ogou-pay {
	display: grid !important;
	grid-template-columns: auto auto 1fr;
	align-items: center !important;
	gap: 6px 13px !important;
	padding: 12px 15px !important; border-radius: 14px !important;
	cursor: pointer !important;
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--ogou-border) !important;
	margin: 0 !important;
	transition: border-color .16s, background .16s;
}
.ogou label.ogou-pay:hover { background: rgba(255, 255, 255, .07) !important; }
.ogou label.ogou-pay.is-on {
	border-color: var(--ogou-gold, #ffb020) !important;
	background: rgba(255, 176, 32, .09) !important;
}
.ogou label.ogou-pay input[type="radio"] {
	grid-column: 1; grid-row: 1;
	flex: 0 0 auto !important;
	width: 18px !important; height: 18px !important;
	min-width: 0 !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important;
	accent-color: #ff5a1f;
}

/* One row, one height — stated so the theme cannot argue. */
.ogou label.ogou-pay .ogou-pay-mark {
	grid-column: 2; grid-row: 1;
	display: flex !important; align-items: center !important; gap: 9px !important;
	height: 30px !important; max-width: 210px !important;
}
.ogou label.ogou-pay .ogou-pay-mark img,
.ogou label.ogou-pay .ogou-pay-mark svg {
	display: block !important;
	width: auto !important; max-width: none !important;
	margin: 0 !important;
}
.ogou label.ogou-pay .ogou-pay-mark img.ogou-pay-word { height: 24px !important; }
.ogou label.ogou-pay .ogou-pay-mark img.ogou-pay-wallets { height: 24px !important; }
.ogou label.ogou-pay .ogou-pay-mark svg.ogou-pay-svg { height: 22px !important; width: auto !important; }

.ogou label.ogou-pay .ogou-pay-glyph {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 40px !important; height: 28px !important; border-radius: 8px !important;
	background: rgba(255, 255, 255, .08); color: #d5d5e2;
}

.ogou label.ogou-pay .ogou-pay-text {
	grid-column: 3; grid-row: 1;
	display: flex !important; flex-direction: column !important; min-width: 0 !important;
}
.ogou label.ogou-pay .ogou-pay-text strong {
	font-size: 13.5px !important; color: #fff !important; line-height: 1.3 !important;
}
.ogou label.ogou-pay .ogou-pay-text em {
	font-style: normal !important; font-size: 11.5px !important; line-height: 1.45 !important;
	color: var(--ogou-muted) !important; margin-top: 3px !important;
}

/*
 * Narrow: the mark drops to its own line under the name rather than
 * shrinking until the wallet logos stop being recognisable — the whole
 * reason they are there is that people know them on sight.
 */
@media (max-width: 620px) {
	.ogou label.ogou-pay { grid-template-columns: auto 1fr; }
	.ogou label.ogou-pay .ogou-pay-text { grid-column: 2; grid-row: 1; }
	.ogou label.ogou-pay .ogou-pay-mark {
		grid-column: 1 / -1; grid-row: 2;
		max-width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) { .ogou label.ogou-pay { transition: none; } }

/* Somebody else's release, seen because you run the site (1.80.0) */
.ogou-card.is-foreign { border-color: rgba(120, 160, 255, .35); }
.ogou-card .ogou-card-owner {
	position: absolute; top: 8px; left: 8px; z-index: 3;
	max-width: calc(100% - 16px); overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap;
	padding: 4px 9px; border-radius: 100px;
	background: rgba(10, 14, 26, .92);
	border: 1px solid rgba(120, 160, 255, .45);
	font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
	color: #9dbcff; cursor: help;
}
.ogou-card { position: relative; }
.ogou-admin-scope {
	margin: 0 0 14px; padding: 10px 14px; border-radius: 11px;
	background: rgba(120, 160, 255, .08); border-left: 3px solid rgba(120, 160, 255, .5);
	font-size: 12.5px; line-height: 1.55; color: #b9cdff; max-width: 70ch;
}

/* =========================================================================
   NOTHING MAKES THE PAGE WIDER THAN THE SCREEN (1.82.0)

   A sideways scroll on a phone is never a small fault: every fixed thing on
   the page — the header, the player, an open dialog — drifts with it, and the
   reader gets a layout that looks broken rather than one that is merely wide.

   The full-bleed sections were the cause and are fixed above. This is the
   guard, so the next wide table or long unbroken word cannot bring it back.
   ========================================================================= */
@media (max-width: 820px) {
	/*
	 * Only the horizontal padding, and every section that bleeds.
	 *
	 * The first version listed two of the four sections, so the store, the
	 * artist page and the login card lost their side padding and sat flush
	 * against the edge of the screen — text touching glass. It also set
	 * `padding-left/right` alone, which is correct, but the sections it
	 * missed were the visible half of the problem.
	 *
	 * 18px rather than the 22px used on a desktop: on a 390px screen every
	 * pixel of column width is worth more than the margin around it, and 18
	 * is still clear of the rounded corners on a phone.
	 */
	.ogou-store,
	.ogou-library,
	.ogou-single,
	.ogou-album,
	.ogou-auth,
	.ogou-artist-page {
		margin-left: 0 !important; margin-right: 0 !important;
		padding-left: 18px !important; padding-right: 18px !important;
		border-radius: 0;
	}

	/*
	 * The hero's own 40px sits inside the page's 18px. Left alone the two add
	 * up to 58px a side, which on a 390px screen leaves less than three
	 * hundred pixels for an artist's name.
	 */
	.ogou-artist-hero { padding: 30px 20px !important; }
	.ogou-artist-hero-inner { gap: 16px; }

	/* The dashboard keeps its own, slightly tighter, because its cards
	   already carry padding of their own inside. */
	.ogou-dash { padding-left: 16px !important; padding-right: 16px !important; }

	/* A word with no spaces — a long URL, a Wasabi key — otherwise sets the
	   minimum width of whatever contains it. */
	.ogou p, .ogou td, .ogou li, .ogou .ogou-card { overflow-wrap: anywhere; }

	/* Tables scroll inside their own box rather than stretching the page. */
	.ogou table { display: block; overflow-x: auto; max-width: 100%; }
}

/* =========================================================================
   THE PAGE DOES NOT MOVE SIDEWAYS (1.83.0)

   Reported from a phone: the whole site could be dragged left, showing white
   beside it. That is never acceptable — every fixed thing on the page drifts
   with the drag, and a layout that slides looks broken even when nothing is.

   Two rules, and the order matters. `overflow-x: hidden` is the one every
   browser understands. `overflow-x: clip` comes second so that where it is
   supported it wins, because `hidden` on the document quietly breaks
   `position: sticky` — and the header, the player bar and the radio dock all
   depend on sticky behaving.

   `overscroll-behavior-x: none` stops the rubber-band drag itself, which is
   what a thumb was doing when this was noticed.
   ========================================================================= */
html {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	overscroll-behavior-x: none;
}

body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	overscroll-behavior-x: none;
}

/*
 * Anything of ours stays inside the screen.
 *
 * A guard, not a cure — a clipped element is still an element that is too
 * wide, and the rule above would hide that rather than fix it. Add
 * ?ogou_wide=1 to any address to be shown which one it is.
 *
 * `:where()` matters here and is not decoration. Written plainly, this rule
 * has the same weight as every `.ogou-something { max-width: ... }` above it
 * and, being further down the file, quietly won all thirty-six of them: the
 * login card lost its 440px and filled the page, the artist page lost its
 * 1200px, the radio panel lost its 520px, the modals lost their 420px, and
 * checkboxes lost their 18px. Only the sections whose widths were marked
 * `!important` survived, which is why the store still looked right while the
 * artist page and the login did not. `:where()` gives this selector a
 * specificity of zero, so it applies where nothing else has an opinion and
 * yields the moment something does — a floor, not a ceiling, which is what a
 * guard should be.
 */
:where(.ogou, .ogou *) { max-width: 100%; }
.ogou img, .ogou video, .ogou iframe, .ogou canvas { max-width: 100%; height: auto; }

/*
 * The full-bleed sections are the deliberate exception: their negative
 * margins reach exactly to the viewport edge and no further.
 *
 * These were written as descendant selectors — `.ogou .ogou-dash` — but the
 * two classes sit on the same element (`class="ogou ogou-dash"`), and a
 * descendant selector needs an ancestor. They never matched anything. Same
 * element, so no space.
 */
.ogou.ogou-dash,
.ogou.ogou-library,
.ogou.ogou-single { max-width: none; }

/* =========================================================================
   THE WORDPRESS ADMIN BAR ON A NARROW SCREEN (1.84.0)

   Not our element and not our bug — but it is the one that was dragging the
   site sideways, and only for the person who runs it. Enough plugins add an
   icon to that bar that its contents outgrow a phone, and the overflow it
   creates belongs to the document: the page slides, and every fixed thing on
   it slides too.

   The bar keeps every icon. It scrolls within itself instead of taking the
   page with it. Visitors never see any of this — the bar is not rendered for
   them — so nothing here changes what a listener experiences.

   To switch it off:  add_filter( 'ogou_fix_admin_bar', '__return_false' );
   ========================================================================= */
@media screen and (max-width: 782px) {
	body.ogou-fix-adminbar #wpadminbar {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	/* The row must be allowed to run past the edge so there is something to
	   scroll to; without this it wraps and the bar grows downward instead. */
	body.ogou-fix-adminbar #wpadminbar .quicklinks,
	body.ogou-fix-adminbar #wpadminbar #wp-toolbar {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		min-width: 100%;
	}

	/* A scrollbar across the top of every page would be worse than the
	   problem. The bar still scrolls with a thumb. */
	body.ogou-fix-adminbar #wpadminbar::-webkit-scrollbar { display: none; }
	body.ogou-fix-adminbar #wpadminbar { scrollbar-width: none; }
}

/* Continue with Google (1.85.0) */
.ogou .ogou-google-btn {
	display: flex !important; align-items: center; justify-content: center; gap: 11px;
	width: 100%; padding: 14px 18px; margin: 0 0 4px;
	border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16) !important;
	background: #fff !important; color: #1f1f1f !important;
	font-size: 14.5px; font-weight: 700; text-decoration: none !important;
	transition: filter .16s, transform .16s;
}
.ogou .ogou-google-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.ogou .ogou-google-btn svg { flex: 0 0 auto; display: block; }

.ogou-auth-or {
	display: flex; align-items: center; gap: 12px;
	margin: 18px 0; color: var(--ogou-muted); font-size: 12px;
	text-transform: uppercase; letter-spacing: .1em;
}
.ogou-auth-or::before, .ogou-auth-or::after {
	content: ''; flex: 1; height: 1px; background: var(--ogou-border);
}
@media (prefers-reduced-motion: reduce) { .ogou .ogou-google-btn { transition: none; } }
.ogou-auth-hint {
	margin: 0 0 16px; padding: 10px 13px; border-radius: 10px;
	background: rgba(120, 160, 255, .1); border-left: 3px solid rgba(120, 160, 255, .5);
	font-size: 12.5px; line-height: 1.55; color: #b9cdff;
}
.ogou-auth-hint a { color: #fff; text-decoration: underline; }

/* =========================================================================
   GOOGLE'S OWN BUTTON (1.86.1)

   It is drawn inside an iframe at a fixed pixel width, so nothing here can
   reflow it — the width is measured in the markup instead. These rules only
   make sure it sits straight and can never push the card wider than itself.
   ========================================================================= */
.ogou .ogou-google-wrap {
	display: block; width: 100%; margin: 0 0 4px;
	overflow: hidden;
}
.ogou .ogou-google-wrap iframe { margin: 0 auto !important; display: block !important; }
.ogou .ogou-google-wrap > div { max-width: 100% !important; }

/* A refused claim, and the way to answer it (1.88.0) */
.ogou-claim-refused {
	margin: 0 0 18px; padding: 16px 18px; border-radius: 14px;
	background: rgba(255, 176, 32, .08);
	border-left: 3px solid var(--ogou-gold, #ffb020);
}
.ogou-claim-refused.is-sent {
	background: rgba(47, 212, 182, .08); border-left-color: #2fd4b6;
}
.ogou-claim-refused strong { display: block; font-size: 14.5px; color: #fff; margin-bottom: 8px; }
.ogou-claim-why {
	margin: 0 0 10px; padding: 10px 13px; border-radius: 10px;
	background: rgba(0, 0, 0, .25); font-size: 13px; line-height: 1.6; color: #ffd9a0;
}
.ogou-claim-help, .ogou-claim-sent {
	margin: 0 0 11px; font-size: 12.5px; line-height: 1.6; color: var(--ogou-muted);
}
.ogou-claim-refused textarea,
.ogou-claim-refused input[type="url"] {
	width: 100% !important; margin-bottom: 9px !important;
	box-sizing: border-box !important; min-width: 0 !important;
}
.ogou .ogou-claim-refused button.ogou-claim-send { width: auto !important; padding: 11px 20px !important; }
.ogou-claim-msg { display: block; margin-top: 9px; font-size: 12.5px; color: #ffd9a0; }
.ogou-claim-msg:empty { display: none; }

/* =========================================================================
   BALANCE (1.93.0)

   Sits at the top of the library, above the purchases. Money first, then a
   way to add to it, then where it went — the order somebody reads in.
   ========================================================================= */
.ogou-wallet {
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 22px;
	padding: 22px 24px;
	margin: 0 0 26px;
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
}
.ogou-wallet-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.ogou-wallet-label { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ogou-muted); }
.ogou-wallet-amount { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ogou-wallet-note { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ogou-muted); }

.ogou-wallet-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ogou-wallet-preset {
	padding: 9px 15px; border-radius: 100px; cursor: pointer;
	background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14);
	color: var(--ogou-text); font-weight: 700; font-size: 13.5px;
	transition: border-color .16s, background .16s;
}
.ogou-wallet-preset:hover { border-color: rgba(255,255,255,.34); }
.ogou-wallet-preset.is-on { background: var(--ogou-fire); border-color: transparent; color: #140f08; }

.ogou-wallet-custom { display: block; margin-bottom: 16px; }
.ogou-wallet-custom span { display: block; font-size: 13px; color: var(--ogou-muted); margin-bottom: 6px; }
.ogou-wallet-custom input {
	/* `min-width: 0` because a number input carries an intrinsic width of
	   about twenty characters, which on a narrow screen makes the card
	   itself wider than the screen rather than shrinking. */
	width: 100%; max-width: 220px; min-width: 0; box-sizing: border-box;
	padding: 12px 14px; border-radius: 12px;
	background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.14); color: #fff;
}

.ogou-wallet-methods { display: flex; flex-wrap: wrap; gap: 10px; }
.ogou-wallet-pay {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 17px; border-radius: 14px; cursor: pointer;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
	color: var(--ogou-text); font-weight: 700; font-size: 14px;
	transition: border-color .16s, transform .16s;
}
.ogou-wallet-pay:hover:not(:disabled) { border-color: rgba(255,255,255,.36); transform: translateY(-1px); }
.ogou-wallet-pay:disabled { opacity: .55; cursor: default; }
.ogou-wallet-pay img { height: 20px; width: auto; display: block; }
.ogou-wallet-msg { margin: 12px 0 0; font-size: 13.5px; color: #ffb4bf; min-height: 1em; }

.ogou-wallet-statement { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 14px; }
.ogou-wallet-statement summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ogou-muted); }
.ogou-wallet-statement summary:hover { color: var(--ogou-text); }
.ogou-wallet-statement table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13.5px; }
.ogou-wallet-statement td { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ogou-wallet-when { color: var(--ogou-muted); white-space: nowrap; }
.ogou-wallet-why { color: var(--ogou-text); }
.ogou-wallet-delta { text-align: right; white-space: nowrap; font-weight: 700; }
.ogou-wallet-delta.is-in { color: #8ff0da; }
.ogou-wallet-delta.is-out { color: #d8d8e4; }

@media (max-width: 620px) {
	.ogou-wallet { padding: 18px; border-radius: 18px; }
	.ogou-wallet-amount { font-size: 26px; }
	.ogou-wallet-pay { flex: 1 1 auto; justify-content: center; }
}
.ogou-wallet-why-note { display: block; font-size: 12.5px; color: var(--ogou-muted); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Music kept on the phone
   ------------------------------------------------------------------------ */
.ogou-offline-summary {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--ogou-muted, #8b8b9c);
}

.ogou-keep {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	text-align: center;
}
.ogou-keep:hover { border-color: rgba(255, 255, 255, .3); }
.ogou-keep[disabled] { opacity: .75; cursor: default; }
.ogou-keep.is-saved {
	border-color: rgba(46, 204, 113, .5);
	color: #7ee2a8;
}
.ogou-keep.is-saved::before { content: "\2713\00a0"; }

/* ---------------------------------------------------------------------------
   Claiming: the undertaking, and how well the name matches
   ------------------------------------------------------------------------ */
.ogou-claim-modal { max-width: 620px; }

.ogou-claim-lead .en,
.ogou-claim-terms .en,
.ogou-claim-agree .en { display: block; }
.ogou-claim-lead .ht,
.ogou-claim-terms .ht,
.ogou-claim-agree .ht {
	display: block;
	color: var(--ogou-muted, #8b8b9c);
	font-style: italic;
	margin-top: 2px;
}

.ogou-claim-what {
	margin: 0 0 12px;
	font-weight: 700;
}

.ogou-claim-terms {
	margin: 0 0 16px;
	padding: 14px 14px 14px 30px;
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	background: rgba(0, 0, 0, .22);
	font-size: 12.5px;
	line-height: 1.5;
}
.ogou-claim-terms li { margin-bottom: 11px; }
.ogou-claim-terms li:last-child { margin-bottom: 0; }

.ogou-claim-label {
	display: block;
	margin: 12px 0 5px;
	font-size: 12.5px;
	color: var(--ogou-muted, #8b8b9c);
}
.ogou-claim-label.is-required { color: #ffc98a; }

/* The likelihood, immediately above the signature. */
.ogou-claim-meter {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 14px 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .13);
	background: rgba(255, 255, 255, .04);
	font-size: 12.5px;
	line-height: 1.45;
}
.ogou-claim-meter strong {
	flex: 0 0 auto;
	min-width: 52px;
	font-size: 20px;
	text-align: center;
}
.ogou-claim-meter em {
	display: block;
	margin-top: 4px;
	opacity: .8;
	font-size: 12px;
}
.ogou-claim-meter.is-strong { border-color: rgba(46, 204, 113, .45); }
.ogou-claim-meter.is-strong strong { color: #7ee2a8; }
.ogou-claim-meter.is-partial { border-color: rgba(255, 176, 32, .45); }
.ogou-claim-meter.is-partial strong { color: #ffc86a; }
.ogou-claim-meter.is-weak { border-color: rgba(255, 90, 95, .5); }
.ogou-claim-meter.is-weak strong { color: #ff9aa2; }
.ogou-claim-meter.is-none strong { color: var(--ogou-muted, #8b8b9c); }

.ogou-claim-agree {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 14px 0;
	font-size: 12.5px;
	line-height: 1.45;
	cursor: pointer;
}
.ogou-claim-agree input { margin-top: 3px; flex: 0 0 auto; }

.ogou-claim-sign {
	width: 100%;
	font-size: 17px;
	letter-spacing: .01em;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
}

.ogou-claim-err { color: #ffb4bf; }

/* ---------------------------------------------------------------------------
   A record an administrator has held, on the artist's own dashboard
   ------------------------------------------------------------------------ */
.ogou-card.is-held { border-color: rgba(255, 176, 32, .45); }

.ogou-held-note {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255, 176, 32, .1);
	border: 1px solid rgba(255, 176, 32, .35);
	font-size: 12.5px;
	line-height: 1.5;
}
.ogou-held-note strong { display: block; margin-bottom: 6px; color: #ffc86a; }
.ogou-held-note p { margin: 0 0 7px; }
.ogou-held-note p:last-child { margin-bottom: 0; }
.ogou-held-own {
	padding-left: 10px;
	border-left: 2px solid rgba(255, 176, 32, .5);
	font-style: italic;
}
.ogou-held-fix { font-weight: 600; }
.ogou-held-done {
	margin-top: 4px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 176, 32, .5);
	border-radius: 9px;
	background: transparent;
	color: #ffc86a;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}
.ogou-held-done:hover { background: rgba(255, 176, 32, .12); }
.ogou-held-done[disabled] { opacity: .6; cursor: default; }
.ogou-held-waiting { margin: 6px 0 0; font-weight: 600; color: #8ff0da; }

/* ---------------------------------------------------------------------------
   Topping up somebody else's balance
   ------------------------------------------------------------------------ */
.ogou-wallet-gift {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
}
.ogou-wallet-gift summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
}
.ogou-wallet-gift-lead {
	margin: 10px 0 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ogou-muted, #8b8b9c);
}
.ogou-wallet-gift label { display: block; }
.ogou-wallet-gift label span {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	color: var(--ogou-muted, #8b8b9c);
}
.ogou-wallet-gift input[type="email"] { width: 100%; }
.ogou-wallet-who { margin: 8px 0 0; font-size: 13px; min-height: 1.2em; }
.ogou-wallet-who.is-ok { color: #7ee2a8; font-weight: 600; }
.ogou-wallet-who.is-bad { color: #ffc98a; }

/* ---------------------------------------------------------------------------
   Likes — worth money to the artist
   ------------------------------------------------------------------------ */
.ogou-like {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(10, 10, 16, .62);
	backdrop-filter: blur(6px);
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.ogou-like:hover { background: rgba(10, 10, 16, .82); }
.ogou-like svg { transition: transform .18s ease; }
.ogou-like.is-on { color: #ff5a7a; }
.ogou-like.is-on svg { fill: currentColor; transform: scale(1.12); }
.ogou-like-n { font-variant-numeric: tabular-nums; }

.ogou-like-msg {
	position: fixed;
	left: 50%;
	bottom: 96px;
	z-index: 99999;
	max-width: min(440px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: 13px;
	background: rgba(20, 20, 28, .97);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #edecf3;
	font-size: 13.5px;
	line-height: 1.45;
	transform: translate(-50%, 14px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.ogou-like-msg.is-up { opacity: 1; transform: translate(-50%, 0); }

.ogou-likes-panel {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid rgba(255, 90, 122, .28);
	border-radius: 14px;
	background: rgba(255, 90, 122, .06);
}
/* Earned-beyond-sales panel: a total, then what made it up. */
.ogou-extra-top {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
	padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.ogou-extra-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #a9a9bd; }
.ogou-extra-total { font-size: 26px; font-weight: 800; color: #ffb020; line-height: 1.1; }

.ogou-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ogou-extra-card {
	padding: 14px; border-radius: 14px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
	display: flex; flex-direction: column; gap: 2px;
}
.ogou-extra-ico { font-size: 18px; color: #ff8a4c; line-height: 1; margin-bottom: 4px; }
.ogou-extra-card strong { font-size: 24px; line-height: 1.1; }
.ogou-extra-sub { font-size: 13px; color: #a9a9bd; }
.ogou-extra-amt { margin-top: 6px; font-weight: 700; color: #8ff0da; font-size: 15px; }

@media (max-width: 560px) {
	.ogou-extra-grid { grid-template-columns: 1fr; }
	.ogou-extra-total { font-size: 22px; }
}

.ogou-likes-head { display: flex; gap: 26px; flex-wrap: wrap; }
.ogou-likes-head strong { display: block; font-size: 21px; line-height: 1.2; }
.ogou-likes-head span { font-size: 12px; color: var(--ogou-muted, #8b8b9c); }
.ogou-likes-rule {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ogou-muted, #8b8b9c);
}
.ogou-likes-table { width: 100%; margin-top: 12px; font-size: 12.5px; }
.ogou-likes-table td { padding: 5px 0; }
.ogou-likes-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ogou-likes-next { color: var(--ogou-muted, #8b8b9c); width: 74px; }


/* ---------------------------------------------------------------------------
   Share to story
   ------------------------------------------------------------------------ */
.ogou-story-btn[hidden] { display: none !important; }
.ogou-story-btn { gap: 8px; }

/* ---------------------------------------------------------------------------
   Album running order
   ------------------------------------------------------------------------ */
.ogou-album-order { margin: 16px 0 4px; }
.ogou-album-order-head {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px; font-size: 13.5px;
}
.ogou-album-order-state { font-size: 12.5px; color: #7ee2a8; }
.ogou-album-order-list { list-style: none; margin: 0; padding: 0; }
.ogou-album-order-item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; margin-bottom: 6px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px; cursor: grab;
}
.ogou-album-order-item.is-dragging { opacity: .45; cursor: grabbing; }
.ogou-album-order-grip { color: #5a5a6a; font-size: 15px; line-height: 1; flex: 0 0 auto; }
/*
 * Stated firmly, because a theme styles every input on the page.
 *
 * Elementor and most themes set `width: 100%` on form fields, which outweighs
 * a plain class rule — so the number field stretched across the row and pushed
 * the title out of sight entirely. What was on screen was one wide box with a
 * digit in the middle of it and no way to reach the name.
 *
 * Only the properties that decide the layout are forced. Colour and radius are
 * left alone so a theme can still make these look like its own fields.
 */
.ogou-album-order-no,
input[type="number"].ogou-album-order-no {
	width: 58px !important; flex: 0 0 auto !important;
	min-width: 0 !important; max-width: 58px !important;
	padding: 6px 4px !important; text-align: center !important;
	background: #12121a; border: 1px solid #2c2c3a; border-radius: 7px;
	color: #edecf3; font: inherit; font-size: 13px;
	cursor: text; margin: 0 !important;
}
.ogou-album-order-title,
input[type="text"].ogou-album-order-title {
	flex: 1 1 auto !important; width: auto !important;
	min-width: 0 !important; max-width: none !important;
	padding: 6px 10px !important; font-size: 14px;
	background: #12121a; border: 1px solid #2c2c3a; border-radius: 8px;
	color: #edecf3; font-family: inherit;
	cursor: text; margin: 0 !important;
}
.ogou-album-order-title:focus,
.ogou-album-order-no:focus { outline: none; border-color: #ff5a1f; }
.ogou-album-order-tag {
	flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
	background: rgba(255,176,32,.14); color: #ffb020;
	font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.ogou-album-order-note { margin: 8px 0 0; font-size: 12.5px; color: #8b8b9c; }

/*
 * Dragging needs a pointer. On a touch screen the number field is the way in,
 * so the grip stops advertising something that will not work.
 */
@media (hover: none) {
	.ogou-album-order-item { cursor: default; }
	.ogou-album-order-grip { display: none; }
}

/* ---------------------------------------------------------------------------
   Album waiting to be published
   ------------------------------------------------------------------------ */
.ogou-album-draft {
	margin: 14px 0 4px; padding: 14px 16px;
	background: rgba(255,176,32,.08);
	border: 1px solid rgba(255,176,32,.28);
	border-radius: 12px;
}
.ogou-album-draft-head { margin: 0 0 8px; font-size: 14px; }
.ogou-album-draft-head strong { color: #ffb020; margin-right: 8px; }
.ogou-album-draft-todo {
	margin: 0 0 12px; padding-left: 18px;
	font-size: 13.5px; line-height: 1.7; color: #cfcfe0;
}
.ogou-album-draft-act { display: flex; align-items: center; gap: 12px; margin: 0; }
.ogou-album-draft-state { font-size: 13px; color: #7ee2a8; }
.ogou-album-publish[disabled] { opacity: .45; cursor: not-allowed; }
.ogou-album-draft-note { margin: 10px 0 0; font-size: 12.5px; color: #8b8b9c; }

/* ---------------------------------------------------------------------------
   Album page
   ---------------------------------------------------------------------------
   Refined rather than redesigned: the shape was right, the details were not
   stated firmly enough to survive a page builder, and a few of them were
   simply thin.
   ------------------------------------------------------------------------ */

/*
 * The artwork's own colour, behind the header.
 *
 * A blurred copy of the cover, scaled up and dimmed, so every album page takes
 * its mood from the record rather than all of them looking identical. Set as a
 * pseudo-element so it cannot interfere with anything's layout.
 */
.ogou-album-head {
	position: relative;
	/*
	 * A stacking context of its own.
	 *
	 * Without one, `z-index: -1` on the backdrop is measured against the
	 * nearest ancestor that happens to have one — which on this page was
	 * somewhere above the header entirely. The blurred cover ended up in front
	 * of the title instead of behind it: the artist's face across her own
	 * album name, and the price line barely readable.
	 */
	isolation: isolate;
	padding: 34px 30px 30px;
	border-radius: 26px;
	overflow: hidden;
}
/*
 * No artwork behind the text. Colour only.
 *
 * The idea was that each album page would take its mood from the record. What
 * it produced was the artist's face, seventy pixels of blur wide, sitting
 * directly behind her own album title — recognisable enough to read as a
 * second image on the page and to make every line of text harder to read.
 *
 * Two attempts to rescue it with a darker wash both failed, which was the
 * answer: a photograph behind body copy is a photograph in the way. The
 * gradient below gives the panel depth and costs nothing to read across.
 */
.ogou-album-head::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(120% 90% at 12% 0%, rgba(255, 90, 31, .16), transparent 62%),
		linear-gradient(160deg, #14141d, #0d0d14);
	z-index: 0;
	pointer-events: none;
}
.ogou-album-head > * { position: relative; z-index: 2; }
.ogou-album-cover { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ogou-album-cover:hover { transform: translateY(-4px) scale(1.012); }

.ogou-genre {
	display: inline-block; margin-bottom: 4px;
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: #ff8a4c;
}

.ogou-album-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }
.ogou-album-actions .ogou-btn { padding: 13px 26px; font-size: 15px; font-weight: 700; }

/*
 * The track list.
 *
 * Rows that respond to a pointer, a number that becomes a play triangle on
 * hover, and a price that is not shouting. The old version drew every row the
 * same whether or not anything could be done with it.
 */
.ogou-album-tracks { margin-top: 34px; }
.ogou-album-row {
	position: relative;
	border: 1px solid transparent;
	transition: background .18s, border-color .18s;
}
.ogou-album-row:hover {
	background: rgba(255,255,255,.045);
	border-color: rgba(255,255,255,.07);
}
.ogou-album-row + .ogou-album-row { margin-top: 2px; }
.ogou-album-row .ogou-album-num {
	flex: 0 0 30px; text-align: center;
	font-size: 14px; font-variant-numeric: tabular-nums; color: #6e6e7e;
}
.ogou-album-row .ogou-album-title { font-weight: 600; }
.ogou-album-row .ogou-album-price {
	font-variant-numeric: tabular-nums; color: #b9b9c8; font-size: 14px;
}

@media (max-width: 900px) {
	.ogou-album-head { grid-template-columns: 1fr; gap: 24px; }
	.ogou-album-cover { max-width: 300px; }
	.ogou-countdown-cell b { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
   Album page — the details
   ---------------------------------------------------------------------------
   The header had the right shape and none of the finish. What follows is the
   finish: a cover that sits in real light, a title that breathes, and a track
   list that responds to a pointer instead of sitting there.
   ------------------------------------------------------------------------ */

.ogou-album-head {
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: 36px;
	align-items: center;
	margin-bottom: 46px;
	border: 1px solid rgba(255, 255, 255, .07);
}

/*
 * The cover, lit rather than pasted.
 *
 * A square with a hard edge on a dark page looks like a placeholder. A soft
 * shadow beneath it and a hairline highlight along the top edge is what makes
 * it read as an object with a light source, and it costs two rules.
 */
.ogou-album-cover {
	border-radius: 18px;
	box-shadow:
		0 2px 0 rgba(255, 255, 255, .09) inset,
		0 30px 60px -20px rgba(0, 0, 0, .85),
		0 8px 20px -8px rgba(0, 0, 0, .6);
	border: 1px solid rgba(255, 255, 255, .08);
}

.ogou-album-meta .ogou-genre {
	padding: 5px 11px; border-radius: 999px;
	background: rgba(255, 138, 76, .14);
	border: 1px solid rgba(255, 138, 76, .26);
}

.ogou-album-meta h1 { text-wrap: balance; }

/*
 * The sum line, as a receipt rather than a sentence.
 *
 * "Bought one by one: 300.00 HTG. You save 30.00 HTG." was doing arithmetic at
 * the reader. The saving is the only part that changes a decision, so that is
 * the part that gets weight.
 */
.ogou-album-meta .ogou-muted { color: #9a9aab; font-size: 14px; }
.ogou-album-save { color: #7ee2a8; font-weight: 700; }

.ogou-album-actions .ogou-btn-outline {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #edecf3;
}
.ogou-album-actions .ogou-btn-outline:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .28);
}

/* ------------------------------------------------------------------ tracks */

.ogou-album-row {
	padding: 14px 16px;
	border-radius: 12px;
	gap: 14px;
}

/*
 * The number turns into a play triangle under the pointer.
 *
 * Both live in the same cell, one hidden at a time, so nothing moves when they
 * swap — a row that shifts by a pixel on hover is the difference between
 * feeling built and feeling assembled.
 */
.ogou-album-row .ogou-album-num { position: relative; }
.ogou-album-row:hover .ogou-album-num { color: transparent; }
.ogou-album-row .ogou-album-num::after {
	content: '\25B6';
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; color: #ff8a4c; opacity: 0;
	transition: opacity .15s;
}
.ogou-album-row:hover .ogou-album-num::after { opacity: 1; }

.ogou-album-row .ogou-btn-sm {
	opacity: .55;
	transition: opacity .15s, transform .15s;
}
.ogou-album-row:hover .ogou-btn-sm { opacity: 1; }

@media (max-width: 900px) {
	/*
	 * One column, and the cover must be told again.
	 *
	 * `grid-template-columns` is set in three places in this file, and the one
	 * that wins is whichever comes last — which was the two-column desktop
	 * rule. On a phone the grid stayed at `300px 1fr`, the artwork was handed
	 * a 300-pixel track inside a 340-pixel screen, and what was left of it sat
	 * behind the text. From the outside the cover had simply vanished.
	 *
	 * Stated here, in the last block, so nothing later can undo it.
	 */
	.ogou-album-head {
		display: block !important;
		padding: 22px 16px 20px;
		border-radius: 20px;
		text-align: center;
	}
	.ogou-album-cover {
		width: min(240px, 62vw) !important;
		max-width: none !important;
		margin: 0 auto 22px !important;
	}
	.ogou-album-meta { text-align: center; }
	.ogou-album-meta .ogou-artist { justify-content: center; }
	.ogou-album-meta h1 { font-size: clamp(26px, 8vw, 36px) !important; }

	/*
	 * Buttons stack, and each one owns its row.
	 *
	 * Side by side at this width they wrapped into a ragged column of three
	 * different widths — which reads as a layout that broke rather than one
	 * that adapted.
	 */
	.ogou-album-actions {
		display: flex; flex-direction: column; align-items: stretch;
		gap: 10px; margin: 20px 0 12px;
	}
	.ogou-album-actions .ogou-btn {
		width: 100%; justify-content: center;
		padding: 14px 20px !important;
	}

	.ogou-countdown { margin-left: auto; margin-right: auto; }

	/*
	 * The track list, given room for a title.
	 *
	 * "Konekte Anwo" was breaking across two lines because the price and the
	 * buy button were each taking a fixed share of a 340-pixel row. The title
	 * gets the space first and truncates if it must; a name cut in half mid-
	 * word is worse than one that ends in an ellipsis.
	 */
	.ogou-album-row { padding: 12px 10px; gap: 10px; }
	.ogou-album-row .ogou-album-num { flex: 0 0 20px; font-size: 13px; }
	.ogou-album-row .ogou-album-title {
		flex: 1 1 auto; min-width: 0;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		font-size: 14.5px;
	}
	.ogou-album-row .ogou-album-price { flex: 0 0 auto; font-size: 13px; }
	.ogou-album-row .ogou-btn-sm { flex: 0 0 auto; padding: 7px 14px !important; }
}

/*
 * Everything above assumes a pointer. On a touch screen there is no hover, so
 * the play triangle would never appear and the number would simply be there —
 * which is correct, and the buttons stop being dimmed.
 */
@media (hover: none) {
	.ogou-album-row .ogou-btn-sm { opacity: 1; }
	.ogou-album-row .ogou-album-num::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Close buttons
   ---------------------------------------------------------------------------
   Every small dismiss control on the front end, stated once.

   A page builder styles `button` globally — padding, radius, font, background,
   sometimes a border. Any of those turns a round × into a rectangle sitting in
   a row of neat inputs. Four of these had no rules of their own at all and
   were taking whatever Elementor decided; the rest were being outweighed.

   Declared as a group so the next one added inherits the protection instead of
   being discovered broken in a screenshot.
   ------------------------------------------------------------------------ */
.ogou-install-x,
.ogou-lm-close,
.ogou-mini-close,
.ogou-toast-x,
.ogou-album-del,
button.ogou-install-x,
button.ogou-lm-close,
button.ogou-mini-close,
button.ogou-toast-x,
button.ogou-album-del {
	display: inline-flex !important;
	align-items: center !important; justify-content: center !important;
	flex: 0 0 auto !important;
	width: 32px !important; height: 32px !important;
	min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	background: rgba(255, 255, 255, .06) !important;
	color: #9a9aab !important;
	font-size: 16px !important; line-height: 1 !important;
	font-weight: 400 !important;
	box-shadow: none !important;
	text-transform: none !important; letter-spacing: 0 !important;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.ogou-install-x:hover,
.ogou-lm-close:hover,
.ogou-mini-close:hover,
.ogou-toast-x:hover,
.ogou-album-del:hover {
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
}

/*
 * Deleting is red, dismissing is not.
 *
 * A close button that shuts a panel and one that destroys a record should not
 * look the same — the difference is the whole reason somebody hesitates before
 * the second one.
 */
.ogou-album-del:hover,
button.ogou-album-del:hover {
	background: rgba(255, 90, 90, .16) !important;
	color: #ff9d9d !important;
	border-color: rgba(255, 90, 90, .4) !important;
}

/* ---------------------------------------------------------------------------
   Album release date
   ------------------------------------------------------------------------ */
.ogou-album-when { margin: 16px 0 4px; }
.ogou-album-when-head {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px; font-size: 13.5px;
}
.ogou-album-when-state { font-size: 12.5px; color: #7ee2a8; }
.ogou-album-when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/*
 * Stated firmly, like every other field on this screen — a builder sets
 * `width: 100%` on inputs and a date picker stretched across the row looks
 * like a mistake next to a checkbox.
 */
.ogou-album-when-date,
input[type="date"].ogou-album-when-date {
	width: auto !important; min-width: 165px !important; max-width: 220px !important;
	padding: 8px 12px !important; margin: 0 !important;
	background: #12121a; border: 1px solid #2c2c3a; border-radius: 9px;
	color: #edecf3; font: inherit; font-size: 14px;
	color-scheme: dark;
}
.ogou-album-when-date:focus { outline: none; border-color: #ff5a1f; }
.ogou-album-when-pre {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; color: #cfcfe0; cursor: pointer;
}
.ogou-album-when-pre input:disabled { cursor: not-allowed; }
.ogou-album-when-pre:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.ogou-album-when-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #8b8b9c; max-width: 72ch; }

/* ---------------------------------------------------------------------------
   Upload form fields
   ---------------------------------------------------------------------------
   Every input and select on the artist's own forms, stated firmly.

   A page builder styles `select` globally, and a few of these had no rules of
   their own at all — so the price ladder was rendering with whatever Elementor
   decided a dropdown should be, which on this theme meant an arrow with no
   visible list behind it. The options were always there; there was no way to
   see them.
   ------------------------------------------------------------------------ */
.ogou-dashboard select,
.ogou-dashboard input[type="text"],
.ogou-dashboard input[type="email"],
.ogou-dashboard input[type="number"],
.ogou-dashboard input[type="date"],
.ogou-dashboard textarea,
select.ogou-price-tier {
	width: 100% !important;
	padding: 11px 14px !important;
	margin: 0 !important;
	background: #12121a !important;
	border: 1px solid #2c2c3a !important;
	border-radius: 10px !important;
	color: #edecf3 !important;
	font: inherit !important;
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	color-scheme: dark;
}

/*
 * The arrow is drawn here rather than left to the browser.
 *
 * `appearance: none` removes the platform control — which is what lets the
 * field match everything around it — and without a replacement arrow a select
 * becomes indistinguishable from a text box. People then try to type in it.
 */
.ogou-dashboard select,
select.ogou-price-tier {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	padding-right: 38px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b8b9c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	cursor: pointer;
}

/*
 * The list itself.
 *
 * A dark field with a white dropdown is how an option list ends up as white
 * text on white — invisible until it is clicked through by accident.
 */
.ogou-dashboard select option,
select.ogou-price-tier option {
	background: #12121a;
	color: #edecf3;
}

.ogou-dashboard select:focus,
.ogou-dashboard input:focus,
.ogou-dashboard textarea:focus,
select.ogou-price-tier:focus {
	outline: none !important;
	border-color: #ff5a1f !important;
}

/* ---------------------------------------------------------------------------
   Removing an album
   ---------------------------------------------------------------------------
   At the bottom of the edit panel, written as a sentence rather than drawn as
   an icon. A bin glyph the same size as "Copy link" says nothing about what it
   costs; words do.
   ------------------------------------------------------------------------ */
.ogou-album-remove {
	margin: 20px 0 0; padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.ogou-album-remove .ogou-album-del,
.ogou-album-remove button.ogou-album-del {
	display: inline-flex !important; align-items: center !important;
	width: auto !important; height: auto !important;
	padding: 8px 16px !important; margin: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	border: 1px solid rgba(255, 90, 90, .28) !important;
	color: #ff9d9d !important;
	font: inherit !important; font-size: 13px !important;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.ogou-album-remove .ogou-album-del:hover {
	background: rgba(255, 90, 90, .12) !important;
	border-color: rgba(255, 90, 90, .5) !important;
}

/*
 * Why you, specifically, can see a download button.
 *
 * An administrator or the owning artist can take an unreleased file on
 * purpose — but the page looked the same as a buyer's, so the only way to
 * test the gate was to sign out. Testing it signed in produced a download and
 * the reasonable conclusion that pre-orders did not work.
 */
.ogou-release-you {
	display: block; margin-top: 10px; padding: 9px 12px;
	background: rgba(255, 255, 255, .05);
	border-left: 3px solid rgba(255, 255, 255, .2);
	border-radius: 0 8px 8px 0;
	font-size: 12.5px; line-height: 1.55; color: #9a9aab;
}

/* ---------------------------------------------------------------------------
   Standalone app
   ---------------------------------------------------------------------------
   Only inside the installed app. On the web the theme owns the page and these
   would be an intrusion; in a window with no browser chrome they are the
   difference between an app and a page in a box.
   ------------------------------------------------------------------------ */
@media (display-mode: standalone) {
	/*
	 * The colour behind everything.
	 *
	 * Pulling a page past its content shows whatever is behind the document —
	 * and nothing set that, so it was the platform default: white on some
	 * builds, black on others. Either way it reads as the app breaking, and
	 * it happens on the one gesture people make constantly.
	 *
	 * Set on `html` rather than `body` because the overscroll area belongs to
	 * the document, not to the body box.
	 */
	html {
		background: #0b0b12;
		/* No rubber-band on the page itself; scrollers inside still bounce. */
		overscroll-behavior-y: none;
	}

	body {
		background: #0b0b12;
		/*
		 * The tab bar sits over the bottom of the page, and on a phone with a
		 * home indicator so does the system. Both have to be paid for or the
		 * last row of every list is unreachable.
		 *
		 * `max()` because `env()` reports zero on any page that has not opted
		 * into `viewport-fit=cover` — which is this one, deliberately.
		 */
		padding-bottom: calc(62px + max(14px, env(safe-area-inset-bottom, 0px)));
	}

	/*
	 * Text selection off, except where text is the point.
	 *
	 * A long press on a card in a native app opens a menu or does nothing; in
	 * a web view it selects a word and raises the copy bar, which is the
	 * clearest possible signal that this is a website in a costume.
	 */
	body {
		-webkit-user-select: none; user-select: none;
		-webkit-touch-callout: none;
	}
	input, textarea, [contenteditable],
	.ogou-lyrics-body, .ogou-support-msg-body, .ogou-legal-part {
		-webkit-user-select: text; user-select: text;
		-webkit-touch-callout: default;
	}

	/* The grey flash on tap belongs to browsers, not to apps. */
	* { -webkit-tap-highlight-color: transparent; }
}

/* ---------------------------------------------------------------------------
   The settings sheet
   ---------------------------------------------------------------------------
   Comes up over what you were doing and goes away again. A page would mean
   losing your place to find out how to reach somebody.
   ------------------------------------------------------------------------ */
#ogou-appmenu {
	position: fixed; inset: 0; z-index: 9600;
	display: flex; align-items: flex-end; justify-content: center;
}
#ogou-appmenu[hidden] { display: none; }

.ogou-appmenu-veil {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0; transition: opacity .28s ease;
}
#ogou-appmenu.is-on .ogou-appmenu-veil { opacity: 1; }

.ogou-appmenu-sheet {
	position: relative; width: 100%; max-width: 520px;
	/*
	 * Same floor as the tab bar: `env()` is zero without `viewport-fit=cover`,
	 * and a Close button flush against a gesture strip is a Close button that
	 * sends people back to the home screen.
	 */
	padding: 10px 12px calc(14px + max(14px, env(safe-area-inset-bottom, 0px)));
	border-radius: 22px 22px 0 0;
	background: #15151f;
	border: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 0;
	transform: translateY(100%);
	transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}
#ogou-appmenu.is-on .ogou-appmenu-sheet { transform: none; }

.ogou-appmenu-grab {
	display: block; width: 38px; height: 4px; margin: 4px auto 12px;
	border-radius: 99px; background: rgba(255, 255, 255, .22);
}

.ogou-appmenu-row {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 14px; border-radius: 14px;
	color: #edecf3; text-decoration: none;
	font-size: 15.5px;
}
.ogou-appmenu-row:active { background: rgba(255, 255, 255, .07); }
.ogou-appmenu-row svg { flex: 0 0 auto; color: #8b8b9c; }
.ogou-appmenu-row span { flex: 1 1 auto; }
.ogou-appmenu-row.is-quiet { color: #9a9aab; }
.ogou-appmenu-row.is-quiet svg { color: #6b6b78; }

.ogou-appmenu-badge {
	flex: 0 0 auto; min-width: 20px; padding: 2px 7px;
	border-radius: 99px; background: #ff5a1f; color: #fff;
	font-size: 11.5px; font-weight: 800; text-align: center;
}

.ogou-appmenu-cancel {
	display: block; width: 100%; margin-top: 8px;
	padding: 14px; border: 0; border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	color: #cfcfe0; font: inherit; font-size: 15.5px; font-weight: 600;
	cursor: pointer;
}

/*
 * iOS 26 draws its own sheets in Liquid Glass: a translucent, saturated pane
 * that takes its colour from whatever is behind it. `backdrop-filter` is how a
 * web view joins in — and it is applied only where the browser says it can be,
 * because a fallback of "transparent panel over dark content" is unreadable.
 */
@supports (backdrop-filter: blur(30px)) or (-webkit-backdrop-filter: blur(30px)) {
	.ogou-appmenu-sheet {
		background: rgba(28, 28, 40, .72);
		-webkit-backdrop-filter: blur(34px) saturate(180%);
		backdrop-filter: blur(34px) saturate(180%);
		box-shadow: 0 -1px 0 rgba(255, 255, 255, .14) inset;
	}
	.ogou-appmenu-cancel {
		background: rgba(255, 255, 255, .1);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
	}
}

/*
 * Android's sheets sit flat on the surface rather than floating over it —
 * squarer corners, an opaque panel, a shadow instead of a blur. Following the
 * platform matters more than one house style: a control that behaves like the
 * rest of the phone is a control nobody has to learn.
 */
@supports not ((backdrop-filter: blur(30px)) or (-webkit-backdrop-filter: blur(30px))) {
	.ogou-appmenu-sheet {
		border-radius: 28px 28px 0 0;
		background: #1b1b26;
		box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ogou-appmenu-sheet, .ogou-appmenu-veil { transition: none; }
}

/* ---------------------------------------------------------------------------
   Grids in the app
   ---------------------------------------------------------------------------
   A phone-sized grid, not a desktop grid squeezed onto a phone.

   The web rules size a card and let the browser fit as many as it can —
   `minmax(230px, 1fr)`, which on a 390px screen fits exactly one. A single
   column of enormous cards is fine on a page somebody scrolls through once
   and wrong in an app they open twenty times a day: everything is far away,
   and reaching the twelfth track means a long scroll past eleven pictures
   the size of a hand.

   Inside the app the count is stated instead of derived. Two columns on a
   phone, three on anything wider — which is what every music app on the
   phone already does, so nobody has to learn it.
   ------------------------------------------------------------------------ */
@media (display-mode: standalone) {
	.ogou-grid,
	.ogou-grid-public {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	/*
	 * `minmax(0, 1fr)` rather than `1fr`.
	 *
	 * A grid track's default minimum is its content, so a long track title
	 * pushes its column wider than its share and the row stops being even.
	 * Zero lets the text be the one that gives.
	 */
	.ogou-artist-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	/*
	 * The card, scaled to match.
	 *
	 * Everything inside was sized for a 230px card. Left alone at half that
	 * width the title wraps to three lines, the price and the buy button
	 * collide, and the play triangle covers a third of the artwork.
	 */
	.ogou-card-body { padding: 10px 10px 12px !important; }
	.ogou-card-body h3,
	.ogou-card-body .ogou-title { font-size: 13.5px !important; line-height: 1.3 !important; }
	.ogou-card .ogou-by { font-size: 11.5px !important; }
	.ogou-card .ogou-genre { font-size: 9.5px !important; letter-spacing: .08em !important; }
	.ogou-card .ogou-price { font-size: 13px !important; }
	.ogou-card .ogou-btn-sm { padding: 6px 12px !important; font-size: 11.5px !important; }
	.ogou-card-time { font-size: 10.5px !important; }

	/*
	 * The play button over the artwork, at a size that suits a smaller cover
	 * — big enough for a thumb, small enough that the picture is still the
	 * thing being looked at.
	 */
	.ogou-cover .ogou-play,
	.ogou-play-overlay { width: 44px !important; height: 44px !important; }

	.ogou-artist-av { width: 64px !important; height: 64px !important; }
	.ogou-artist-nm { font-size: 12px !important; }
	.ogou-artist-ct { font-size: 10.5px !important; }
	.ogou-artist-cardlink { padding: 14px 8px !important; gap: 6px !important; }

	/* Two rows of controls on a narrow card is one row too many. */
	.ogou-card-foot { gap: 6px !important; }
	.ogou-cover-countdown { left: 6px; right: 6px; bottom: 6px; padding: 5px 6px; }
	.ogou-cover-countdown b { font-size: 13px; }
	.ogou-cover-countdown i { font-size: 8.5px; }
}

/*
 * Three across once there is room — a tablet, or a phone turned sideways.
 * Two columns of very wide cards is the same fault in the other direction.
 */
@media (display-mode: standalone) and (min-width: 600px) {
	.ogou-grid,
	.ogou-grid-public {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	.ogou-artist-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (display-mode: standalone) and (min-width: 900px) {
	.ogou-grid,
	.ogou-grid-public {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	.ogou-artist-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}

/* ---------------------------------------------------------------------------
   The site header, inside the app
   ---------------------------------------------------------------------------
   Hidden, because the tab bar is already the navigation.

   Support, help and the legal pages are ordinary WordPress pages, so they come
   with the theme header — a logo, a menu, a language switcher, a help icon and
   a Dashboard button. Every one of those is either already in the tab bar or
   in the sheet behind it, so what the app showed was two navigations stacked
   on top of each other, one of which does not belong there: a site menu with
   HOME · MUSIC · ARTIST · RADIO · ABOUT is a website's furniture.

   Not removed from the markup, only from view. On the web it is the whole
   navigation, and these pages are the same pages.
   ------------------------------------------------------------------------ */
@media (display-mode: standalone) {
	#ogou-header,
	.ogou-header,
	.ogou-hd { display: none !important; }

	/*
	 * And whatever the theme puts above the content.
	 *
	 * Elementor and most themes wrap their header in one of these. A page
	 * built in a builder brings its own bar with it, and inside the app that
	 * is a second row of links to places the tab bar already goes.
	 */
	body.ogou-app-screen header,
	body.ogou-app-screen .site-header,
	body.ogou-app-screen .elementor-location-header { display: none !important; }

	/*
	 * The space the header was holding.
	 *
	 * Templates offset their content to clear a sticky bar. With the bar gone
	 * that offset is a gap at the top of every screen — small enough to look
	 * like a mistake rather than a margin.
	 */
	.ogou-single,
	.ogou-album,
	.ogou-artist-page,
	.ogou-support,
	.ogou-help,
	.ogou-legal { margin-top: 0 !important; padding-top: 16px !important; }

	/*
	 * A page in the app needs its own way back.
	 *
	 * Without the header there is no logo to tap, and a support page reached
	 * from the sheet is a dead end otherwise — the tab bar changes section
	 * rather than going back, and a phone's own back gesture is not something
	 * to rely on for the only exit.
	 */
	.ogou-app-back {
		display: inline-flex !important; align-items: center; gap: 7px;
		margin: 0 0 14px; padding: 8px 14px 8px 10px;
		border-radius: 999px;
		background: rgba(255, 255, 255, .06);
		border: 1px solid rgba(255, 255, 255, .1);
		color: #cfcfe0; text-decoration: none;
		font-size: 13.5px; font-weight: 600;
	}
	.ogou-app-back:active { background: rgba(255, 255, 255, .12); }
}

/* On the web the header is the navigation, so the back pill is not needed. */
.ogou-app-back { display: none; }

/* ---------------------------------------------------------------------------
   Top up, and the purchase finishes itself
   ---------------------------------------------------------------------------
   Shown in place of a dead end. The track costs less than any card will
   charge, so the balance is the only route — and being told to go arrange one
   somewhere else is where most people stop.

   Styled quietly on purpose: these are a choice of amount, not four more
   things to press. The Pay button below stays the one bright thing.
   ------------------------------------------------------------------------ */
.ogou-topup-offer {
	/*
	 * Close to the method it belongs to.
	 *
	 * It sat with the modal's own spacing above it, which read as a separate
	 * section rather than as the answer to the option just selected.
	 */
	margin: 8px 0 0;
	padding: 14px 15px 15px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--ogou-line, #2c2c3a);
	border-radius: 12px;
}
.ogou-topup-why {
	margin: 0 0 12px !important;
	font-size: 12.5px !important; line-height: 1.55 !important;
	color: var(--ogou-muted) !important;
}
.ogou-topup-picks {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
/*
 * Every property stated, and stated with `!important`.
 *
 * A page builder paints every `button` on the site. Dropping the `ogou-btn`
 * class to make these quiet left them wearing Elementor's colours instead —
 * red text on dark grey, which is the palette for an error. Inheriting from
 * whatever theme is installed is not a style; naming each value is.
 */
.ogou-topup-pick {
	appearance: none !important; -webkit-appearance: none !important;
	display: block !important; width: 100% !important;
	margin: 0 !important; padding: 11px 8px !important;
	background: #16161f !important;
	border: 1px solid #33334a !important; border-radius: 9px !important;
	box-shadow: none !important; text-shadow: none !important;
	color: #edecf3 !important;
	font-family: inherit !important; font-size: 14px !important;
	font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	text-decoration: none !important; text-align: center !important;
	cursor: pointer !important;
	transition: border-color .12s ease, background .12s ease !important;
}
.ogou-topup-pick:hover,
.ogou-topup-pick:focus {
	border-color: #ff5a1f !important; background: #1c1c28 !important;
	color: #fff !important;
}
.ogou-topup-pick[disabled] { opacity: .5 !important; cursor: default !important; }

/*
 * The typed-amount row: a field that fills the width and a compact OK beside
 * it. Same palette and the same `!important` discipline as the presets, so the
 * page builder cannot repaint the input into an error state either.
 */
.ogou-topup-custom {
	display: flex !important; gap: 8px !important; margin-top: 8px !important;
}
.ogou-topup-custom .ogou-topup-pick {
	width: auto !important; flex: 0 0 auto !important;
	padding-left: 18px !important; padding-right: 18px !important;
}
.ogou-topup-amount {
	appearance: none !important; -webkit-appearance: none !important;
	flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important;
	margin: 0 !important; padding: 11px 12px !important;
	background: #12121a !important;
	border: 1px solid #33334a !important; border-radius: 9px !important;
	box-shadow: none !important; text-shadow: none !important;
	color: #edecf3 !important;
	font-family: inherit !important; font-size: 14px !important;
	font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: 0 !important; text-align: left !important;
}
.ogou-topup-amount:focus { border-color: #ff5a1f !important; outline: none !important; }
.ogou-topup-amount::placeholder { color: #7a7a8c !important; font-weight: 500 !important; }
.ogou-topup-amount[disabled] { opacity: .5 !important; }

/* The 2FA setup QR — a light card so it scans on the dark panel, kept crisp
   when the browser scales the small source image up. */
.ogou-2fa-qr { margin: 10px 0 !important; }
.ogou-2fa-qr img {
	width: 190px !important; height: 190px !important;
	max-width: 60% !important;
	background: #fff !important; padding: 10px !important;
	border-radius: 12px !important; display: block !important;
	image-rendering: pixelated !important;
}

/* Checkout fee lines — the price, the service fee, and the running total. */
.ogou-modal-fee { margin: 8px 0 2px !important; }
.ogou-fee-row {
	display: flex !important; justify-content: space-between !important;
	gap: 12px !important; padding: 3px 0 !important;
	font-size: 14px !important; color: #c9c9d6 !important;
}
.ogou-fee-row.ogou-fee-total {
	margin-top: 4px !important; padding-top: 8px !important;
	border-top: 1px solid rgba(255,255,255,.12) !important;
	font-weight: 700 !important; color: #edecf3 !important; font-size: 15px !important;
}

/* Withdrawal fee line, under the amount field — fee, then what lands. */
.ogou-w-fee {
	margin: 8px 0 4px !important;
	display: flex !important; flex-direction: column !important; gap: 2px !important;
	font-size: 14px !important;
}
.ogou-w-fee span { color: #c9c9d6 !important; }
.ogou-w-fee strong { color: #8ff0da !important; font-weight: 700 !important; }

/*
 * The honeypot. Off-screen rather than `display:none` — a script that skips
 * hidden fields checks for the obvious property, and this is meant to be
 * filled. Kept out of the tab order and off the accessibility tree in the
 * markup, so nobody using a keyboard or a screen reader ever meets it.
 */
.ogou-hp {
	position: absolute !important;
	left: -9999px !important; top: auto !important;
	width: 1px !important; height: 1px !important;
	overflow: hidden !important;
}

/* The card marks beside "My balance" — a card is how a balance gets filled. */
.ogou-pay-cards { display: inline-flex; gap: 5px; align-items: center; }
.ogou-card-mark { display: block; border-radius: 3px; }

/* =========================================================================
   DORE — a gold rim, and a light that passes as the page scrolls.

   A fourth card style beside Liquid Glass, Solid and Minimal, and it does
   nothing at all until somebody picks it in Settings → Appearance. Every
   rule below is scoped to `body.ogou-style-dore`, so the storefront keeps
   exactly the look it has now unless the choice is made deliberately.
   ========================================================================= */

body.ogou-style-dore .ogou-card {
	/*
	 * Real gold, and opaque.
	 *
	 * The first version of this used translucent gold — rgba(255,176,32,.55)
	 * — and a white stop for the highlight. Over a dark card, a half-transparent
	 * warm colour loses its warmth and a white stop is simply white: the rim
	 * came out silver. Metal is not read from one colour but from the swing
	 * between a lit edge and a shaded one, and for gold BOTH have to be gold.
	 * So: pale gold for the light, deep bronze for the shade, no white and no
	 * alpha anywhere in the sweep.
	 */
	--rim-hi: #ffe9ab;
	--rim-mid: #f0b429;
	--rim-lo: #8a5a10;
	--rim-warm: #ff9d2e;

	position: relative;
	border: 2px solid transparent !important;
	border-radius: 20px !important;
	/*
	 * Two painted layers on one element: the card's own surface clipped to
	 * the padding box, the gold clipped to the border box. The border pixels
	 * between them show the gold and nothing else — which is how a gradient
	 * becomes a border without an extra element to position, and without the
	 * blur cost of a second glass pane per card.
	 *
	 * Two pixels rather than one, because a single pixel of any gradient on a
	 * phone's screen is half-swallowed by rounding and reads as a grey hair.
	 */
	background-image:
		linear-gradient(180deg, rgba(23,23,32,.96), rgba(13,13,19,.98)),
		linear-gradient(145deg,
			var(--rim-lo) 0%,
			var(--rim-mid) 16%,
			var(--rim-hi) 30%,
			var(--rim-mid) 44%,
			var(--rim-lo) 58%,
			var(--rim-warm) 74%,
			var(--rim-hi) 88%,
			var(--rim-mid) 100%) !important;
	background-origin: border-box !important;
	background-clip: padding-box, border-box !important;
	box-shadow:
		inset 0 1px 0 rgba(255,214,140,.10),
		0 2px 8px rgba(0,0,0,.34),
		0 16px 38px rgba(0,0,0,.42),
		0 0 22px rgba(240,180,41,.13) !important;
	overflow: hidden !important;
	transition: transform .4s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1);
}

/*
 * The light itself: a narrow diagonal band, above the artwork and below
 * anything you can press.
 */
body.ogou-style-dore .ogou-card::after {
	content: '';
	position: absolute; inset: -40%;
	pointer-events: none; z-index: 3;
	background: linear-gradient(105deg,
		transparent 42%,
		rgba(255,214,128,.18) 47%,
		rgba(255,240,200,.34) 50%,
		rgba(255,214,128,.18) 53%,
		transparent 58%);
	transform: translateX(-120%);
	opacity: 0;
}

/*
 * Driven by the scroll, not by a timer.
 *
 * `animation-timeline: view()` ties the animation to where the card sits in
 * the viewport, so the light passes as the card comes up the screen and runs
 * back if you scroll up. No script runs and nothing is measured on a frame.
 * A browser that does not know the property never starts it: the card keeps
 * its gold rim and loses only the shine, which is the right way round.
 */
@supports (animation-timeline: view()) {
	body.ogou-style-dore .ogou-card::after {
		animation: ogou-sheen linear both;
		animation-timeline: view();
		animation-range: entry 12% cover 62%;
	}
}
@keyframes ogou-sheen {
	0%   { transform: translateX(-120%); opacity: 0; }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { transform: translateX(120%); opacity: 0; }
}

body.ogou-style-dore .ogou-card:hover {
	transform: translateY(-4px);
	--rim-hi: #fff3cd;
	--rim-mid: #ffc63d;
	--rim-lo: #b87a16;
	--rim-warm: #ff8a1f;
	box-shadow:
		inset 0 1px 0 rgba(255,214,140,.16),
		0 3px 12px rgba(0,0,0,.4),
		0 26px 60px rgba(0,0,0,.55),
		0 0 30px rgba(255,176,32,.26) !important;
}

/* The artwork keeps the card's corner, and lifts a little under the pointer. */
body.ogou-style-dore .ogou-card .ogou-cover { border-radius: 18px 18px 0 0 !important; overflow: hidden; }
body.ogou-style-dore .ogou-card .ogou-cover img { transition: transform .6s cubic-bezier(.32,.72,0,1); }
body.ogou-style-dore .ogou-card:hover .ogou-cover img { transform: scale(1.04); }

/*
 * The play button is the one lens on the page — one small circle per card,
 * and deliberately the only blurred element, because `backdrop-filter` is
 * paid for per element per frame and a grid of them is what made the last
 * glass pass feel slow on a phone.
 */
body.ogou-style-dore .ogou-card .ogou-play-overlay {
	background: rgba(255,255,255,.14) !important;
	border: none !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.45),
		inset 0 0 0 1px rgba(255,255,255,.12),
		0 8px 24px rgba(0,0,0,.45) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.7);
	backdrop-filter: blur(12px) saturate(1.7);
	transition: transform .32s cubic-bezier(.32,.72,0,1), background .24s ease !important;
}
body.ogou-style-dore .ogou-card:hover .ogou-play-overlay { background: rgba(255,255,255,.22) !important; }
body.ogou-style-dore .ogou-card .ogou-play-overlay:active { transform: scale(.92) !important; }

/* The price reads as the gold it is. */
body.ogou-style-dore .ogou-card .ogou-price {
	background: linear-gradient(100deg, #ffd98a, #ffb020 55%, #ff8a3c);
	-webkit-background-clip: text; background-clip: text;
	color: transparent !important;
	font-weight: 800;
}
body.ogou-style-dore .ogou-card .ogou-price.is-free {
	background: linear-gradient(100deg, #9af5d4, #2fd4b6);
	-webkit-background-clip: text; background-clip: text;
	color: transparent !important;
}

/* Somebody who has asked their system for less movement gets the rim alone. */
@media (prefers-reduced-motion: reduce) {
	body.ogou-style-dore .ogou-card::after { animation: none !important; opacity: 0 !important; }
	body.ogou-style-dore .ogou-card,
	body.ogou-style-dore .ogou-card .ogou-cover img { transition: none !important; }
	body.ogou-style-dore .ogou-card:hover { transform: none !important; }
}