/* MixtapeFactory design standard, approved 10/03/2026 (~/MixtapeFactory/design/STANDARD.md).
   One layer, loaded after every other stylesheet: tokens, one button system, one field system, the type floor, one set of radii.
   The admin keeps its own look until the new admin app replaces it. */

/* ---------- tokens ---------- */
:root:not(:has(.pnl-nav,#pnlForm)){--mut:#62626d;--ink2:var(--mut);--ink3:var(--mut);--fill:rgba(120,120,135,.14);--field-line:rgba(10,10,20,.22);--on-acc:#1a0f00;--brand-ink:#1a0f00;--on-color:#1a0f00;--acc-text:#b45309;--danger:#d92d20;--gutter:44px}
:root:not(:has(.pnl-nav,#pnlForm))[data-theme="dark"]{--mut:#9a9aa6;--fill:rgba(255,255,255,.12);--field-line:rgba(255,255,255,.22);--acc-text:#ffae55;--danger:#ff6b61}
@media(max-width:820px){:root:not(:has(.pnl-nav,#pnlForm)){--gutter:16px}}
:root:not(:has(.pnl-nav,#pnlForm)) body{font-size:16px;line-height:1.5}
/* ---------- buttons: Large 52, Regular 44, Icon 44, all round ---------- */
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill,:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill,:where(html:not(:has(.pnl-nav,#pnlForm))) .outline{display:inline-flex}
@media(max-width:820px){:where(html:not(:has(.pnl-nav,#pnlForm))) .outline,:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill.up{display:none}}
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill,:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill,:where(html:not(:has(.pnl-nav,#pnlForm))) .outline{align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:44px;min-height:44px;padding:0 20px;border-radius:999px;font-size:16px;font-weight:600;line-height:1;white-space:nowrap}
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn svg,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill svg{width:20px;height:20px;flex:none}
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn.sm,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill.sm,:where(html:not(:has(.pnl-nav,#pnlForm))) .tbl .btn.sm{height:44px;padding:0 16px;font-size:16px;border-radius:999px}/* primary: orange with dark text */
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn.acc,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill.brand,:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill2.acc{background:var(--acc);color:var(--on-acc);border-color:transparent}
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn.acc:hover,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill.brand:hover,:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill:hover{background:var(--acc);filter:brightness(1.05)}/* secondary: soft fill */
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn.soft,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill:not(.brand):not(.ghost){background:var(--fill);color:var(--fg)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn.soft:hover,:where(html:not(:has(.pnl-nav,#pnlForm))) .pill:not(.brand):not(.ghost):hover{background:color-mix(in srgb,var(--fill) 100%,var(--line))}/* tertiary: outline */
:where(html:not(:has(.pnl-nav,#pnlForm))) .pill.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
/* large: the main action of a page on desktop */
@media(min-width:821px){:where(html:not(:has(.pnl-nav,#pnlForm))) .slide .acts .btn,:where(html:not(:has(.pnl-nav,#pnlForm))) .band .acts .btn,:where(html:not(:has(.pnl-nav,#pnlForm))) .auth .pill.brand,:where(html:not(:has(.pnl-nav,#pnlForm))) .dj .btn{height:52px;padding:0 24px;font-size:17px;font-weight:700}}
:where(html:not(:has(.pnl-nav,#pnlForm))) .auth .pill{width:100%;height:52px;font-size:17px;font-weight:700;margin-top:16px}/* header: icon buttons 44, Sign in 44 */
:where(html:not(:has(.pnl-nav,#pnlForm))) .nav .ib{width:44px;height:44px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .nav .ib svg{width:22px;height:22px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill,:where(html:not(:has(.pnl-nav,#pnlForm))) .outline{padding:0 18px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .outline{background:transparent;border:1px solid currentColor}
:where(html:not(:has(.pnl-nav,#pnlForm))) .nav.solid .outline{border-color:var(--line)}
@media(max-width:820px){:where(html:not(:has(.pnl-nav,#pnlForm))) .accpill{padding:0 16px;font-size:16px}}/* hero rows: one row, never wraps on a phone */
:where(html:not(:has(.pnl-nav,#pnlForm))) .slide .acts,:where(html:not(:has(.pnl-nav,#pnlForm))) .dj-h .acts{flex-wrap:nowrap;gap:8px}
@media(max-width:820px){:where(html:not(:has(.pnl-nav,#pnlForm))) .slide .acts .btn,:where(html:not(:has(.pnl-nav,#pnlForm))) .dj-h .acts .pill{padding:0 14px}}
:where(html:not(:has(.pnl-nav,#pnlForm))) .btn.icon{width:44px;padding:0}
:where(html:not(:has(.pnl-nav,#pnlForm))) .more{position:relative;display:inline-flex}
:where(html:not(:has(.pnl-nav,#pnlForm))) .more .menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:20;min-width:200px;padding:8px;border-radius:16px;background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:var(--shadow)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .more .menu[hidden]{display:none}
:where(html:not(:has(.pnl-nav,#pnlForm))) .more .menu a{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;font-size:16px;font-weight:600;color:var(--fg)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .more .menu a:hover{background:var(--fill)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .more .menu svg{width:20px;height:20px}/* hero progress dots: a 44 tall tap target with the thin bar inside */
:where(html:not(:has(.pnl-nav,#pnlForm))) .dots button{height:44px;background:none;border-radius:0}
:where(html:not(:has(.pnl-nav,#pnlForm))) .dots button:before{content:"";position:absolute;left:0;right:0;top:20px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .dots button.done:before{background:#fff}
:where(html:not(:has(.pnl-nav,#pnlForm))) .dots button.on i{top:20px;height:3px;bottom:auto;border-radius:2px}/* filter chips: 36 on desktop, 44 on a phone */
:where(html:not(:has(.pnl-nav,#pnlForm))) .seg a,:where(html:not(:has(.pnl-nav,#pnlForm))) .seg button{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--fill);font-size:15px;font-weight:600;color:var(--fg)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .seg .on{background:var(--fg);color:var(--bg)}
@media(max-width:820px){:where(html:not(:has(.pnl-nav,#pnlForm))) .seg a,:where(html:not(:has(.pnl-nav,#pnlForm))) .seg button{height:44px}}
/* ---------- fields: one field, 48 tall, visible border, 16px text ---------- */
:where(html:not(:has(.pnl-nav,#pnlForm))) .field label,:where(html:not(:has(.pnl-nav,#pnlForm))) .mk .field label{display:block;font-size:15px;font-weight:600;color:var(--fg);margin-bottom:8px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .field input:not([type=checkbox]):not([type=radio]):not([type=file]),:where(html:not(:has(.pnl-nav,#pnlForm))) .field select,:where(html:not(:has(.pnl-nav,#pnlForm))) .mk .field input,:where(html:not(:has(.pnl-nav,#pnlForm))) .mk .field select,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .field input,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .selw select,:where(html:not(:has(.pnl-nav,#pnlForm))) input.big,:where(html:not(:has(.pnl-nav,#pnlForm))) .auth input.big,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .trl input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--field-line);border-radius:12px;background:var(--bg);color:var(--fg);font:inherit;font-size:16px;outline:none}
:where(html:not(:has(.pnl-nav,#pnlForm))) .field textarea{box-sizing:border-box;width:100%;min-height:96px;padding:12px 14px;border:1px solid var(--field-line);border-radius:12px;background:var(--bg);color:var(--fg);font:inherit;font-size:16px;line-height:1.5;outline:none}
:where(html:not(:has(.pnl-nav,#pnlForm))) .field input:focus,:where(html:not(:has(.pnl-nav,#pnlForm))) .field select:focus,:where(html:not(:has(.pnl-nav,#pnlForm))) .field textarea:focus,:where(html:not(:has(.pnl-nav,#pnlForm))) input.big:focus,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .trl input:focus,:where(html:not(:has(.pnl-nav,#pnlForm))) .codes input:focus{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .field input:disabled{color:var(--mut)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .field.bad input,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .field.bad select,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .field.bad textarea{border-color:var(--danger)!important;box-shadow:0 0 0 1px var(--danger)}/* the six code boxes are fields too */
:where(html:not(:has(.pnl-nav,#pnlForm))) .codes{gap:8px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .codes input{box-sizing:border-box;height:48px;padding:0;border:1px solid var(--field-line);border-radius:12px;background:var(--bg);color:var(--fg);font-size:22px!important;font-weight:700;text-align:center}/* search box on the Search page: the field itself carries the border */
:where(html:not(:has(.pnl-nav,#pnlForm))) .search{height:auto;padding:0;background:none;border:0;box-shadow:none;border-radius:0;position:relative}
:where(html:not(:has(.pnl-nav,#pnlForm))) .search svg{position:absolute;left:14px;top:12px;pointer-events:none}
:where(html:not(:has(.pnl-nav,#pnlForm))) .search input{box-sizing:border-box;width:100%;height:48px;padding:0 14px 0 48px;border:1px solid var(--field-line)!important;border-radius:12px;background:var(--surface)!important;font-size:16px!important;font-weight:600}
:where(html:not(:has(.pnl-nav,#pnlForm))) .search input:focus{border-color:var(--fg)!important;box-shadow:0 0 0 1px var(--fg)}
/* ---------- type: body 16, nothing under 13 ---------- */
:where(html:not(:has(.pnl-nav,#pnlForm))) .tabbar a{font-size:13px;gap:2px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .card .a,:where(html:not(:has(.pnl-nav,#pnlForm))) .tt .a{font-size:15px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .card .cv .tl,:where(html:not(:has(.pnl-nav,#pnlForm))) .meta .tag,:where(html:not(:has(.pnl-nav,#pnlForm))) .tag{font-size:13px;font-weight:600;border-radius:8px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .card .cv .tl{padding:3px 8px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .chip i{font-size:13px;color:var(--on-acc)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .sh span,:where(html:not(:has(.pnl-nav,#pnlForm))) .sec-h .sub,:where(html:not(:has(.pnl-nav,#pnlForm))) .dj-h .sub{font-size:15px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .sh a,:where(html:not(:has(.pnl-nav,#pnlForm))) .sec-h a.all{font-size:15px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .auth p{font-size:16px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .auth .small{font-size:15px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .note,:where(html:not(:has(.pnl-nav,#pnlForm))) .note-arc{font-size:16px;color:var(--fg)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .kv h3,:where(html:not(:has(.pnl-nav,#pnlForm))) .facts .kv h3{font-size:15px}
/* ---------- color: dark text on orange, orange words use --acc-text ---------- */
:where(html:not(:has(.pnl-nav,#pnlForm))) .avatar{color:var(--on-acc)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .sec-h a.all,:where(html:not(:has(.pnl-nav,#pnlForm))) .auth .small a,:where(html:not(:has(.pnl-nav,#pnlForm))) .empty a,:where(html:not(:has(.pnl-nav,#pnlForm))) a[style*="color:var(--brand)"],:where(html:not(:has(.pnl-nav,#pnlForm))) a[style*="color:var(--acc)"]{color:var(--acc-text)!important}
:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .po .fits,:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .rq{color:var(--on-acc)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .rq{color:var(--acc-text)}
/* ---------- radii: 8, 12, 16, 24, round ---------- */
:where(html:not(:has(.pnl-nav,#pnlForm))) .auth,:where(html:not(:has(.pnl-nav,#pnlForm))) .empty,:where(html:not(:has(.pnl-nav,#pnlForm))) .drop,:where(html:not(:has(.pnl-nav,#pnlForm))) .facts .kv,:where(html:not(:has(.pnl-nav,#pnlForm))) .kv{border-radius:16px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .note,:where(html:not(:has(.pnl-nav,#pnlForm))) .note-arc{border-radius:12px}

/* ---------- edges: 16 from the side on a phone ---------- */
@media(max-width:820px){:where(html:not(:has(.pnl-nav,#pnlForm))) .trk{padding:0 16px}:where(html:not(:has(.pnl-nav,#pnlForm))) .tr{padding:13px 0}:where(html:not(:has(.pnl-nav,#pnlForm))) .note-arc{margin:16px 16px 8px}:where(html:not(:has(.pnl-nav,#pnlForm))) .pg{padding-left:16px;padding-right:16px}:where(html:not(:has(.pnl-nav,#pnlForm))) .pg .rail{margin:0 -16px;padding:4px 16px 10px}:where(html:not(:has(.pnl-nav,#pnlForm))) .nav{padding-left:16px;padding-right:16px}}

/* ---------- upload ---------- */

:where(html:not(:has(.pnl-nav,#pnlForm))) .upw .ph a.back{color:var(--acc-text)}

/* ---------- player: a scrub row with times; a draft has no Save or Download ---------- */
:where(html:not(:has(.pnl-nav,#pnlForm))) .player .scrub{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0 4px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player .scrub .tm{font-size:13px;color:var(--mut);min-width:36px;font-variant-numeric:tabular-nums}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player .scrub .tm:last-child{text-align:right}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player .scrub .bar{flex:1;height:20px;margin:0;background:none;border-radius:0;cursor:pointer;position:relative}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player .scrub .bar:before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:var(--line)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player .scrub .bar i{top:8px;bottom:auto;height:4px;border-radius:2px}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player.draft .ctl .sep{display:none}
/* upload Preview: the player bar stays above it, so the owner can scrub while looking at the page */
:where(html:not(:has(.pnl-nav,#pnlForm))) body:has(#uDlg) .player{z-index:97}
:where(html:not(:has(.pnl-nav,#pnlForm))) #uDlg{padding-bottom:128px}
:where(html:not(:has(.pnl-nav,#pnlForm))) #uDlg .dlg-in{max-height:calc(100vh - 176px)}
@media(max-width:820px){:where(html:not(:has(.pnl-nav,#pnlForm))) #uDlg{padding:16px 8px 188px}:where(html:not(:has(.pnl-nav,#pnlForm))) #uDlg .dlg-in{max-height:calc(100vh - 220px)}}
:where(html:not(:has(.pnl-nav,#pnlForm))) .dlg-h .x{width:44px;height:44px}
:where(html:not(:has(.pnl-nav,#pnlForm))) #uDlg .tr.playing .t,:where(html:not(:has(.pnl-nav,#pnlForm))) #uDlg .tr.playing .n{color:var(--acc-text)}
:where(html:not(:has(.pnl-nav,#pnlForm))) .player.draft .ctl .ex{display:none}
/* ---------- promote: each spot, its preview, then every way to pay in one list ---------- */
.upw .pk-g{margin:0 0 56px}
.upw .pk-g h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 4px}
.upw .pk-lead{font-size:16px;color:var(--mut);margin:0 0 16px;max-width:64ch}
.upw .budgetnote{font-size:15px;color:var(--mut);margin:0 0 24px}
.upw .pic{margin:0;max-width:760px}
.upw .pic img,.upw .pic.hp img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;margin:0;border-radius:16px;border:1px solid var(--line);box-shadow:none}
.pr-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--fill);margin:24px 0 12px;max-width:560px}
.pr-seg button{height:44px;border:0;border-radius:999px;background:none;color:var(--fg);font:600 16px/1 var(--font);cursor:pointer}
.pr-seg button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.pr-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:560px}
.pk-g[data-pgroup="row"] .pr-list{margin-top:16px}
.pr-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px;border:0;background:none;color:var(--fg);text-align:left;font:inherit;cursor:pointer}
.pr-opt+.pr-opt{border-top:1px solid var(--line)}
.pr-opt .rd{position:relative;width:24px;height:24px;border-radius:999px;border:2px solid var(--field-line);flex:none;box-sizing:border-box}
.pr-opt.on .rd{border-color:var(--fg)}
.pr-opt.on .rd:after{content:"";position:absolute;inset:4px;border-radius:999px;background:var(--fg)}
.pr-l{flex:1;min-width:0}.pr-l b{display:block;font-size:16px;font-weight:600;line-height:1.5}.pr-l small{display:block;font-size:15px;line-height:1.45;color:var(--mut)}
.pr-fits{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:8px;background:var(--fill);color:var(--fg);font-size:13px;font-weight:600;white-space:nowrap;flex:none}
.pr-p{font-size:18px;font-weight:700;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}.pr-p small{font-size:15px;font-weight:400;color:var(--mut)}
.pr-say{font-size:15px;line-height:1.45;color:var(--mut);margin:12px 0 0;max-width:560px}
.upw .summary .fine{font-size:15px}
@media(max-width:820px){.upw .pk-g{margin-bottom:40px}.upw .pk-g h2{font-size:22px}.pr-seg{max-width:none}}

/* the order box follows the scroll on a computer; a pay bar sits above the tab bar on a phone */
@media(min-width:821px){.upw .pk-layout>aside{position:sticky;top:92px;align-self:start}.pr-bar{display:none!important}}
.pr-bar{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:74;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--glass,var(--surface));backdrop-filter:saturate(1.6) blur(22px);-webkit-backdrop-filter:saturate(1.6) blur(22px);border-top:1px solid var(--line);transition:transform .2s,opacity .2s}
.pr-bar.none,.pr-bar.away{transform:translateY(16px);opacity:0;pointer-events:none}
.pr-bar-t{flex:1;min-width:0}.pr-bar-t small{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pr-bar-t b{display:block;font-size:18px;font-weight:700;line-height:1.3}
.pr-bar .btn{flex:none}
@media(max-width:820px){.upw:has(#prBar:not(.none)) {padding-bottom:96px}}

/* promote v2: real previews, one list per spot */
.upw .pv{position:relative;margin:0 0 16px;max-width:760px;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.upw .pv-stage{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.upw .pv-stage .hero{margin:0}
.upw .pv-stage .slide{opacity:1!important;visibility:visible!important}
.upw .pv-stage .promoshelf{margin:16px 44px 16px}
@media(max-width:820px){.upw .pv-stage .promoshelf{margin:16px}}
.upw .pv-mark{position:absolute;inset:0;border:3px solid #fff;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.upw .pv-row .pv-mark{inset:auto;border-color:var(--fg);box-shadow:none}
.upw .pv-lab{position:absolute;left:12px;top:12px;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:#fff;color:#0b0b10;font-size:15px;font-weight:700;white-space:nowrap}
.upw .pv-row .pv-lab{top:auto;bottom:-14px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg)}
.upw .pv-stage .promoshelf{padding-bottom:24px}
.upw .pv-row{padding-top:0}
.pr-gh{padding:16px 16px 4px;font-size:15px;font-weight:600;color:var(--mut);border-top:1px solid var(--line)}
.pr-gh:first-child{border-top:0}
.pr-gh+.pr-opt{border-top:0}
/* promote: Buy is the only orange on the page, so the current step number is ink */
.upw:has(.pk-groups) .steps li.on i{background:var(--fg);border-color:var(--fg);color:var(--bg)}