/**
 * VYNE+ Artist Portal — the dashboard design.
 *
 * Ported from LOLA/v2 "VYNE+ Artist Portal (offline)". The design is a whole
 * app (login, signup, onboarding, dashboard, music, sales, settings); what the
 * site needs is the signed-in portal, so this carries that: the dark rail, the
 * page head, the KPI row, the panels, the form and track components.
 *
 * Every rule is scoped under .wyne-portal. The design names things the theme
 * already uses — .btn, .field, .panel, .kicker, .card — and unscoped they would
 * repaint the storefront.
 *
 * The tokens below are the design's own; they are declared on the wrapper
 * rather than :root for the same reason.
 *
 * @package Wyne
 */

.wyne-portal {
  --bg:#f4ede0; --bg-2:#ebe2d0; --bg-3:#e3d8c1; --paper:#faf5e9; --paper-2:#fdfaf3;
  --line:rgba(38,30,16,.12); --line-soft:rgba(38,30,16,.07); --line-strong:rgba(38,30,16,.26);
  --gold:#b8924d; --gold-soft:#c9a661; --gold-deep:#8a6f33; --gold-bright:#e6cf9e;
  --green:#1f3522; --green-soft:#2d4d31;
  --ink:#261e10; --ink-soft:#4a3f2a; --ink-mute:#7a6f5a; --ink-faint:#9d9280;
  --red:#b53a2a; --red-deep:#8f2c1f; --amber:#9a6b12;
  --dark:#100c08; --dark-2:#1a1510;
  --serif:'Cormorant Garamond',serif; --sans:'Jost',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:26px; --maxw:1240px; --rail:238px;

  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 300;
  position: relative;
}

/* The design's fine gold graph paper, behind everything. */
.wyne-portal::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .45;
  background:
    linear-gradient(90deg, transparent 0 13px, rgba(184,146,77,.045) 13px 14px),
    linear-gradient(0deg, transparent 0 13px, rgba(184,146,77,.045) 13px 14px);
  background-size: 14px 14px;
}
.wyne-portal > * { position: relative; z-index: 1; }

.wyne-portal h1, .wyne-portal h2, .wyne-portal h3, .wyne-portal h4 {
  font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.08; margin: 0;
}
.wyne-portal em { font-style: italic; color: var(--gold-deep); }
.wyne-portal a { color: var(--gold-deep); text-decoration: none; }
.wyne-portal a:hover { color: var(--green); }
.wyne-portal p { margin: 0; }
.wyne-portal ul { list-style: none; margin: 0; padding: 0; }

.wyne-portal .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.wyne-portal .wordmark{font-family:'Italiana',var(--serif);font-size:25px;letter-spacing:.24em;text-transform:uppercase;color:var(--green);white-space:nowrap}
.wyne-portal .wordmark .plus{color:var(--gold)}
.wyne-portal .wordmark .sub{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.32em;color:var(--ink-mute);margin-top:5px}
.wyne-portal .card{background:var(--paper);border:1px solid var(--line-strong)}
.wyne-portal .hair{height:1px;background:var(--line);border:none}
.wyne-portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;background:var(--green);color:var(--paper);border:none;font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:background .25s,box-shadow .25s;min-height:54px}
.wyne-portal .btn:hover:not(:disabled){background:var(--green-soft);box-shadow:0 10px 28px rgba(31,53,34,.22)}
.wyne-portal .btn:disabled{background:var(--bg-3);color:var(--ink-faint);cursor:not-allowed;box-shadow:none}
.wyne-portal .btn.gold{background:linear-gradient(180deg,#d9b765,#b98f3c);color:#16100a}
.wyne-portal .btn.gold:hover:not(:disabled){box-shadow:0 10px 28px rgba(184,146,77,.3)}
.wyne-portal .btn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink-soft)}
.wyne-portal .btn.ghost:hover:not(:disabled){border-color:var(--green);color:var(--green);background:transparent;box-shadow:none}
.wyne-portal .btn.sm{padding:11px 18px;min-height:42px;font-size:10px;letter-spacing:.2em}
.wyne-portal .btn.wide{width:100%}
.wyne-portal .link-btn{background:none;border:none;padding:0;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;border-bottom:1px solid var(--line-strong);transition:color .2s,border-color .2s}
.wyne-portal .link-btn:hover{color:var(--green);border-color:var(--green)}
.wyne-portal .link-btn.danger:hover{color:var(--red-deep);border-color:var(--red-deep)}
.wyne-portal .pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:7px 13px;border:1px solid}
.wyne-portal .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.wyne-portal .pill.draft{color:var(--ink-mute);border-color:var(--line-strong);background:var(--bg-2)}
.wyne-portal .pill.ready{color:var(--gold-deep);border-color:rgba(138,111,51,.42);background:rgba(184,146,77,.09)}
.wyne-portal .pill.review{color:var(--amber);border-color:rgba(154,107,18,.42);background:rgba(184,146,77,.09)}
.wyne-portal .pill.changes{color:var(--red-deep);border-color:rgba(181,58,42,.42);background:rgba(181,58,42,.06)}
.wyne-portal .pill.live{color:var(--green);border-color:rgba(31,53,34,.36);background:rgba(31,53,34,.06)}
.wyne-portal .field{margin-top:24px}
.wyne-portal .field>label, .wyne-portal .field-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px}
.wyne-portal .field .req{color:var(--gold-deep)}
.wyne-portal .field .opt{font-family:var(--serif);font-style:italic;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-faint)}
.wyne-portal .field input, .wyne-portal .field select, .wyne-portal .field textarea{width:100%;background:var(--paper-2);border:1px solid var(--line-strong);padding:15px 16px;color:var(--ink);font-family:var(--sans);font-size:15px;transition:border-color .2s,background .2s}
.wyne-portal .field input:focus, .wyne-portal .field select:focus, .wyne-portal .field textarea:focus{border-color:var(--green);background:#fff;outline:none}
.wyne-portal .field input::placeholder, .wyne-portal .field textarea::placeholder{color:var(--ink-faint)}
.wyne-portal .field input[aria-invalid="true"]{border-color:var(--red);background:rgba(181,58,42,.04)}
.wyne-portal .field textarea{resize:vertical;min-height:132px;line-height:1.6}
.wyne-portal .field .hint{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-mute);margin-top:8px;line-height:1.5}
.wyne-portal .field .err{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--red-deep);margin-top:8px}
.wyne-portal .field .ok{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--green);margin-top:8px}
.wyne-portal .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.wyne-portal .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}
.wyne-portal .count{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint)}
.wyne-portal .count.over{color:var(--red-deep)}
.wyne-portal .url-wrap{display:flex;align-items:stretch;border:1px solid var(--line-strong);background:var(--paper-2);transition:border-color .2s}
.wyne-portal .url-wrap:focus-within{border-color:var(--green)}
.wyne-portal .url-wrap .pre{display:flex;align-items:center;padding:0 4px 0 16px;font-family:var(--mono);font-size:13px;color:var(--ink-faint);white-space:nowrap;background:var(--bg-2);border-right:1px solid var(--line)}
.wyne-portal .url-wrap input{border:none;background:transparent;font-family:var(--mono);font-size:13.5px;padding-left:12px}
.wyne-portal .url-wrap input:focus{background:transparent}
/* The drop zone is a <label>, which is inline by default: without display:block
   its dashed border wrapped around the text instead of boxing the area, and the
   icon, the title and the hint sat on one line. */
.wyne-portal .drop{display:block;border:1px dashed var(--line-strong);background:var(--paper-2);padding:26px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.wyne-portal .drop:hover, .wyne-portal .drop.over{border-color:var(--gold-deep);background:rgba(184,146,77,.06)}
.wyne-portal .drop .ic{width:38px;height:38px;margin:0 auto 12px;border:1px solid var(--gold-deep);display:grid;place-items:center;color:var(--gold-deep)}
.wyne-portal .drop .ic svg{width:17px;height:17px}
.wyne-portal .drop .t{display:block;font-family:var(--serif);font-size:18px;color:var(--ink)}
.wyne-portal .drop .s{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px}
.wyne-portal .img-slot{display:flex;gap:18px;align-items:flex-start}
.wyne-portal .img-thumb{width:118px;height:118px;flex:0 0 auto;background:var(--bg-3) center/cover no-repeat;border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:8px}
.wyne-portal .img-thumb.wide{width:100%;height:auto;aspect-ratio:16/9;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--bg-2)}
.wyne-portal .img-slot .img-body{flex:1;min-width:0}
.wyne-portal .img-actions{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.wyne-portal .sec{background:var(--paper);border:1px solid var(--line-strong);padding:clamp(24px,3vw,38px);margin-top:22px}
.wyne-portal .sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:6px}
.wyne-portal .sec-num{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.wyne-portal .sec-head h2{font-size:clamp(25px,2.6vw,32px);margin-top:8px}
.wyne-portal .sec-head p{font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--ink-mute);margin-top:9px;max-width:56ch}
.wyne-portal .sec-badge{flex:0 0 auto}
.wyne-portal .tracks{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.wyne-portal .track{border:1px solid var(--line-strong);background:var(--paper-2);padding:20px;display:grid;grid-template-columns:104px 1fr;gap:20px;transition:border-color .25s,background .25s}
.wyne-portal .track.filled{border-color:rgba(138,111,51,.4);background:rgba(184,146,77,.05)}
.wyne-portal .track-art{width:104px;height:104px;background:var(--bg-3) center/cover no-repeat;border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}
.wyne-portal .track-art .no{font-family:var(--serif);font-weight:500;font-size:34px;color:rgba(38,30,16,.2)}
.wyne-portal .track-art .swap{position:absolute;left:0;right:0;bottom:0;background:rgba(38,30,16,.72);color:var(--paper);font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:6px;text-align:center;cursor:pointer;opacity:0;transition:opacity .25s}
.wyne-portal .track-art:hover .swap{opacity:1}
.wyne-portal .track-body{min-width:0}
.wyne-portal .track-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.wyne-portal .track-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.wyne-portal .track-name-in{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);padding:8px 0;font-family:var(--serif);font-size:24px;color:var(--ink);margin-top:8px;transition:border-color .2s}
.wyne-portal .track-name-in:focus{border-color:var(--green);outline:none}
.wyne-portal .track-name-in::placeholder{color:var(--ink-faint);font-style:italic}
.wyne-portal .track-audio{margin-top:15px}
.wyne-portal .audio-drop{display:flex;align-items:center;gap:14px;border:1px dashed var(--line-strong);background:var(--paper);padding:13px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.wyne-portal .audio-drop:hover{border-color:var(--gold-deep);background:rgba(184,146,77,.05)}
.wyne-portal .audio-drop .ic{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--gold-deep);display:grid;place-items:center;color:var(--gold-deep)}
.wyne-portal .audio-drop .ic svg{width:14px;height:14px}
.wyne-portal .audio-drop .t{font-family:var(--serif);font-size:16.5px;color:var(--ink)}
.wyne-portal .audio-drop .s{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px}
.wyne-portal .player{display:flex;align-items:center;gap:14px;border:1px solid var(--line-strong);background:var(--paper);padding:12px 16px}
.wyne-portal .play-btn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--gold-deep);background:transparent;color:var(--gold-deep);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.wyne-portal .play-btn:hover{background:var(--gold-deep);color:var(--paper)}
.wyne-portal .play-btn svg{width:13px;height:13px}
.wyne-portal .player .meta{flex:1;min-width:0}
.wyne-portal .player .fn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wyne-portal .wv{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:7px}
.wyne-portal .wv i{flex:1;background:var(--gold);border-radius:1px;display:block;opacity:.55;transition:opacity .2s}
.wyne-portal .player.playing .wv i{opacity:1;animation:wvp 1.1s ease-in-out infinite}
@keyframes wvp{0%,100%{transform:scaleY(.7)}
50%{transform:scaleY(1)}
}
.wyne-portal .player .dur{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);flex:0 0 auto}
.wyne-portal .upl{height:3px;background:var(--bg-3);margin-top:9px;overflow:hidden}
.wyne-portal .upl i{display:block;height:100%;background:var(--gold-deep);width:0;transition:width .25s linear}
.wyne-portal .track-foot{display:flex;align-items:center;gap:16px;margin-top:13px;flex-wrap:wrap}
.wyne-portal .tracks-count{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.wyne-portal .tracks-count .n{font-family:var(--serif);font-size:19px;color:var(--ink)}
.wyne-portal .tracks-count .n b{font-weight:600;color:var(--gold-deep)}
.wyne-portal .socials{display:flex;flex-direction:column;gap:0;margin-top:20px}
.wyne-portal .social{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.wyne-portal .social:last-of-type{border-bottom:none}
.wyne-portal .social .ic{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink-mute);transition:border-color .2s,color .2s}
.wyne-portal .social input:not(:placeholder-shown)~.ic, .wyne-portal .social.has .ic{border-color:var(--gold-deep);color:var(--gold-deep)}
.wyne-portal .social .ic svg{width:16px;height:16px}
.wyne-portal .social .nm{flex:0 0 108px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.wyne-portal .social input{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid var(--line-soft);padding:9px 0;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.wyne-portal .social input:focus{border-color:var(--green);outline:none}
.wyne-portal .info-card{border:1px solid rgba(138,111,51,.36);background:linear-gradient(180deg,rgba(230,207,158,.2),rgba(184,146,77,.06));padding:24px 26px}
.wyne-portal .info-card .h{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:24px;color:var(--ink)}
.wyne-portal .info-card .i{width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:1px solid var(--gold-deep);display:grid;place-items:center;font-family:var(--serif);font-size:13px;color:var(--gold-deep);cursor:help}
.wyne-portal .info-card p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink-soft);margin-top:12px;max-width:62ch}
.wyne-portal .info-card .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-top:16px;padding-top:14px;border-top:1px solid rgba(138,111,51,.28)}
.wyne-portal .lock{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-mute);margin-top:18px;padding:11px 15px;background:var(--bg-2);border:1px solid var(--line)}
.wyne-portal .lock svg{width:14px;height:14px;color:var(--gold-deep);flex:0 0 auto}
.wyne-portal .shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100dvh}
.wyne-portal .rail{background:var(--dark);border-right:1px solid var(--dark-2);padding:28px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh}
.wyne-portal .rail-brand{padding:0 26px 26px;border-bottom:1px solid rgba(231,210,176,.12)}
.wyne-portal .rail-brand .wordmark{color:#f5ede0}
.wyne-portal .rail-brand .wordmark .sub{color:#8e8474}
.wyne-portal .rail-nav{display:flex;flex-direction:column;padding:20px 0;flex:1}
.wyne-portal .rail-nav a{display:flex;align-items:center;gap:13px;padding:13px 26px;font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:#a99f8c;border-left:2px solid transparent;transition:color .2s,background .2s,border-color .2s}
.wyne-portal .rail-nav a svg{width:16px;height:16px;flex:0 0 auto;opacity:.75}
.wyne-portal .rail-nav a:hover{color:#f5ede0;background:rgba(231,210,176,.04)}
.wyne-portal .rail-nav a.on{color:#f5ede0;border-left-color:var(--gold);background:rgba(184,146,77,.09)}
.wyne-portal .rail-nav a.on svg{opacity:1;color:var(--gold)}
.wyne-portal .rail-foot{padding:20px 26px 0;border-top:1px solid rgba(231,210,176,.12)}
.wyne-portal .rail-user{display:flex;align-items:center;gap:12px}
.wyne-portal .avatar{width:38px;height:38px;flex:0 0 auto;background:var(--bg-3) center/cover no-repeat;border:1px solid rgba(231,210,176,.3);display:grid;place-items:center;font-family:var(--serif);font-size:16px;color:var(--ink)}
.wyne-portal .rail-user .nm{min-width:0}
.wyne-portal .rail-user .nm .a{font-family:var(--serif);font-size:16px;color:#f5ede0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wyne-portal .rail-user .nm .b{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8e8474;margin-top:2px}
.wyne-portal .main{min-width:0;padding:clamp(26px,3.4vw,46px) clamp(22px,3.4vw,46px) 90px;max-width:var(--maxw)}
.wyne-portal .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:8px}
.wyne-portal .page-head h1{font-size:clamp(32px,4.4vw,52px)}
.wyne-portal .page-head .lede{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink-mute);margin-top:11px;max-width:52ch}
.wyne-portal .head-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wyne-portal .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.wyne-portal .kpi{background:var(--paper);border:1px solid var(--line-strong);padding:26px}
.wyne-portal .kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute)}
.wyne-portal .kpi .v{font-family:var(--serif);font-weight:500;font-size:clamp(44px,5vw,62px);color:var(--ink);line-height:1;margin-top:16px}
.wyne-portal .kpi .u{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-mute);margin-top:6px}
.wyne-portal .kpi .d{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;margin-top:14px;color:var(--green)}
.wyne-portal .kpi .d.dn{color:var(--red-deep)}
.wyne-portal .kpi.hero{background:var(--dark);border-color:var(--dark-2)}
.wyne-portal .kpi.hero .k{color:var(--gold)}
.wyne-portal .kpi.hero .v{color:#f5ede0;font-size:clamp(52px,6vw,76px)}
.wyne-portal .kpi.hero .u{color:#8e8474}
.wyne-portal .panel{background:var(--paper);border:1px solid var(--line-strong);padding:clamp(22px,2.6vw,32px);margin-top:20px}
.wyne-portal .panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.wyne-portal .panel-head h2{font-size:27px}
.wyne-portal .panel-head .s{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-mute);margin-top:5px}
.wyne-portal .segbtns{display:flex;border:1px solid var(--line-strong);flex:0 0 auto}
.wyne-portal .segbtns button{background:transparent;border:none;border-right:1px solid var(--line);padding:10px 15px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;transition:background .2s,color .2s}
.wyne-portal .segbtns button:last-child{border-right:none}
.wyne-portal .segbtns button:hover{color:var(--green)}
.wyne-portal .segbtns button.on{background:var(--green);color:var(--paper)}
.wyne-portal .chart{position:relative;margin-top:24px}
.wyne-portal .chart svg{display:block;width:100%;height:auto;overflow:visible}
.wyne-portal .chart .gl{stroke:var(--line);stroke-width:1}
.wyne-portal .chart .ax{font-family:var(--mono);font-size:9px;fill:var(--ink-faint);letter-spacing:.08em}
.wyne-portal .chart .bar{fill:var(--gold);transition:fill .18s}
.wyne-portal .chart .bar:hover, .wyne-portal .chart .bar.hi{fill:var(--gold-deep)}
.wyne-portal .chart .ln{fill:none;stroke:var(--gold-deep);stroke-width:2}
.wyne-portal .chart .ar{fill:rgba(184,146,77,.14)}
.wyne-portal .chart .pt{fill:var(--paper);stroke:var(--gold-deep);stroke-width:2}
.wyne-portal .tip{position:absolute;pointer-events:none;background:var(--dark);color:#f5ede0;border:1px solid var(--gold-deep);padding:11px 14px;opacity:0;transform:translate(-50%,-118%);transition:opacity .16s;white-space:nowrap;z-index:5}
.wyne-portal .tip.on{opacity:1}
.wyne-portal .tip .d{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.wyne-portal .tip .v{font-family:var(--serif);font-size:21px;margin-top:5px}
.wyne-portal .banner{display:flex;gap:18px;padding:26px 28px;border:1px solid;align-items:flex-start;margin-top:26px}
.wyne-portal .banner .ic{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:21px}
.wyne-portal .banner h2{font-size:28px}
.wyne-portal .banner p{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--ink-soft);margin-top:9px;max-width:62ch}
.wyne-portal .banner .acts{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.wyne-portal .banner.review{border-color:rgba(154,107,18,.42);background:rgba(184,146,77,.08)}
.wyne-portal .banner.review .ic{background:var(--amber);color:#fff}
.wyne-portal .banner.changes{border-color:rgba(181,58,42,.42);background:rgba(181,58,42,.05)}
.wyne-portal .banner.changes .ic{background:var(--red);color:#fff}
.wyne-portal .banner.live{border-color:rgba(31,53,34,.34);background:rgba(31,53,34,.05)}
.wyne-portal .banner.live .ic{background:var(--green);color:var(--paper)}
.wyne-portal .admin-msg{margin-top:16px;border-left:2px solid var(--red);background:var(--paper);padding:15px 18px}
.wyne-portal .admin-msg .who{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.wyne-portal .admin-msg .txt{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink);margin-top:8px}
@media (max-width:1080px){.wyne-portal .cl-groups{grid-template-columns:1fr 1fr}
.wyne-portal .share-card{grid-template-columns:1fr}
.wyne-portal .kpis{grid-template-columns:1fr}
.wyne-portal .auth{grid-template-columns:1fr}
.wyne-portal .auth-art{min-height:300px}
}
@media (max-width:860px){.wyne-portal{--pad:18px}
.wyne-portal .shell{grid-template-columns:1fr}
.wyne-portal .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:14px;padding:0;overflow-x:auto;border-right:none;border-bottom:1px solid var(--dark-2);scrollbar-width:none}
.wyne-portal .rail::-webkit-scrollbar{display:none}
.wyne-portal .rail-brand{padding:16px 18px;border-bottom:none;border-right:1px solid rgba(231,210,176,.12);flex:0 0 auto}
.wyne-portal .rail-brand .wordmark{font-size:19px}
.wyne-portal .rail-brand .wordmark .sub{display:none}
.wyne-portal .rail-nav{flex-direction:row;padding:0;flex:1}
.wyne-portal .rail-nav a{padding:18px 15px;border-left:none;border-bottom:2px solid transparent;white-space:nowrap;font-size:12px}
.wyne-portal .rail-nav a.on{border-left-color:transparent;border-bottom-color:var(--gold)}
.wyne-portal .rail-nav a svg{display:none}
.wyne-portal .rail-foot{display:none}
.wyne-portal .grid-2, .wyne-portal .grid-3{grid-template-columns:1fr}
.wyne-portal .track{grid-template-columns:74px 1fr;gap:15px;padding:16px}
.wyne-portal .track-art{width:74px;height:74px}
.wyne-portal .track-name-in{font-size:20px}
.wyne-portal .social{flex-wrap:wrap}
.wyne-portal .social .nm{flex:1 0 auto}
.wyne-portal .social input{flex:1 0 100%;order:3}
.wyne-portal .tbl thead{display:none}
.wyne-portal .tbl tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.wyne-portal .tbl td{border:none;padding:2px 0}
.wyne-portal .tbl td.tk-cell{grid-column:1;grid-row:1}
.wyne-portal .tbl td.dt-cell{grid-column:1;grid-row:2}
.wyne-portal .tbl td.ed-cell{grid-column:1;grid-row:3}
.wyne-portal .tbl td.co-cell{grid-column:2;grid-row:2;text-align:right}
.wyne-portal .tbl td.qt{grid-column:2;grid-row:1;text-align:right}
.wyne-portal .trow{grid-template-columns:38px 1fr;gap:13px}
.wyne-portal .trow .rt{grid-column:2;text-align:left;display:flex;gap:12px;align-items:baseline}
.wyne-portal .trow .rt .p{margin-top:0}
.wyne-portal .pub-hero-in{flex-direction:column;align-items:flex-start}
.wyne-portal .btn{width:100%}
.wyne-portal .btn.sm, .wyne-portal .share-acts .btn{width:auto}
}
@media (max-width:520px){.wyne-portal .cl-groups{grid-template-columns:1fr;gap:20px}
.wyne-portal .img-slot{flex-direction:column}
.wyne-portal .segbtns{width:100%}
.wyne-portal .segbtns button{flex:1;padding:11px 6px}
}
@media (prefers-reduced-motion:reduce){.wyne-portal *{animation:none!important;transition-duration:.01ms!important}
}
.wyne-portal{--img-hero:url("f81773fa-8bdd-408d-bdd4-00a1406d9b3a");--img-wide:url("1d4653cb-e035-4630-905c-84c3bb5a0041")}

/* ---- save bar ------------------------------------------------------------
   The form spans every screen, so there is one Save at the foot of the main
   column rather than one per tab. */
.wyne-portal .portal-save {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.wyne-portal .portal-save .hint { margin: 0; }
.wyne-portal .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.wyne-portal .panel .hint { margin-top: 16px; }
.wyne-portal .track-audio audio { width: 100%; height: 38px; }
.wyne-portal .artist-remove { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; }
.wyne-portal .audio-drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; cursor: pointer; border: 1px dashed var(--line-strong); background: var(--paper-2); padding: 14px 16px; }
.wyne-portal .audio-drop:hover { border-color: var(--gold-deep); }
.wyne-portal .artist-slot-file-name { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-mute); }
.wyne-portal .artist-slot-file-name.has-file { color: var(--ink); font-style: normal; }
.wyne-portal .img-thumb.wide { max-width: 420px; }

/* The site's own header sits above the portal, so the rail starts under it
   rather than at the top of the viewport. */
.wyne-portal .rail { top: 0; }
@media (max-width: 860px) {
  .wyne-portal .main { padding-bottom: 60px; }
}

/* The design's .main is a div; here it is the form, and the theme gives forms
   a stretch context — which pulled the KPI cards to the full column height. */
.wyne-portal .kpis { align-items: start; }
.wyne-portal .kpi { align-self: start; }
.wyne-portal form.main { display: block; height: auto; }

/* The rail's footer: name on one line, the log-out link under it. */
.wyne-portal .rail-user .nm .b { display: block; }
.wyne-portal .rail-user .nm .b a { color: #8e8474; }
.wyne-portal .rail-user .nm .b a:hover { color: var(--gold); }

/* ".hero" is also a theme class (the tall page hero), and the design's headline
   KPI carries it — which stretched that one card to hero height. */
.wyne-portal .kpi.hero {
  min-height: 0;
  height: auto;
  display: block;
  padding: 26px;
  background: var(--dark);
  border-color: var(--dark-2);
  text-align: left;
}
.wyne-portal .kpi.hero::before,
.wyne-portal .kpi.hero::after { content: none; }

/* ---------------------------------------------------------------------------
 * The portal owns the whole viewport.
 *
 * The site chrome is hidden here: the rail IS the navigation, and a second menu
 * above it only competed with it. The theme's global .shell also puts 26px of
 * padding down each side, which showed as a pale strip to the left of the dark
 * rail — the portal's shell is a full-bleed grid, so it takes none.
 * ------------------------------------------------------------------------- */
body.artist-portal-page .topbar,
body.artist-portal-page .notif,
body.artist-portal-page .site-footer,
body.artist-portal-page .m-cta-bar { display: none !important; }

.wyne-portal .shell {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* home-v2.css declares a bare `.field { display:flex; flex:1; min-width:280px }`
   for the footer's newsletter row. Unscoped, it reached every field in here and
   laid the label out beside its input instead of above it. */
.wyne-portal .field {
  display: block;
  flex: none;
  min-width: 0;
  max-width: none;
  gap: 0;
}

/* The instant Remove replaces the checkbox; the checkbox is the no-JS path. */
.wyne-portal .artist-remove--nojs { display: none; }
.no-js .wyne-portal .artist-remove--nojs { display: inline-flex; }
.no-js .wyne-portal [data-track-remove] { display: none; }
.wyne-portal button.artist-remove {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.wyne-portal button.artist-remove:hover { color: var(--red); text-decoration: underline; }
.wyne-portal button.artist-remove[disabled] { opacity: .5; cursor: default; }

/* ── From the design (LOLA/v2 "VYNE+ Artist Portal") ───────────────────────
   The areas the portal had no rules for: earnings and payouts, progress,
   the share and rating blocks, the onboarding checklist, autosave, the toast
   and the public page. Selectors are scoped to .wyne-portal — the design is a
   standalone page and styles bare words like .card and .field, which would
   otherwise reach the rest of the site.
   ──────────────────────────────────────────────────────────────────────── */
.wyne-portal .vis-hidden { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
.wyne-portal .mono { font-family:var(--mono) }
.wyne-portal .prog-wrap { margin-top:22px }
.wyne-portal .prog-head { display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px }
.wyne-portal .prog-track { height:5px;background:var(--bg-3);overflow:hidden }
.wyne-portal .prog-fill { height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));width:0;transition:width .5s cubic-bezier(.4,0,.2,1) }
.wyne-portal .checklist { background:var(--dark);color:#c7bba8;border:1px solid var(--dark-2);padding:clamp(24px,3vw,38px);margin-top:22px }
.wyne-portal .checklist h2 { color:#f5ede0;font-size:clamp(25px,2.6vw,32px) }
.wyne-portal .cl-g .gt { font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-bottom:11px;border-bottom:1px solid rgba(231,210,176,.16);margin-bottom:13px }
.wyne-portal .cl-i { display:flex;align-items:flex-start;gap:11px;padding:6px 0;font-family:var(--serif);font-size:16px;line-height:1.35 }
.wyne-portal .cl-i .m { width:17px;height:17px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(231,210,176,.34);display:grid;place-items:center;font-size:9px;margin-top:2px }
.wyne-portal .cl-i.done { color:#e6dcc9 }
.wyne-portal .cl-i.done .m { background:var(--gold);border-color:var(--gold);color:#16100a }
.wyne-portal .cl-i:not(.done) { color:#8e8474 }
.wyne-portal .cl-foot { margin-top:30px;padding-top:24px;border-top:1px solid rgba(231,210,176,.16);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap }
.wyne-portal .cl-foot .after { font-family:var(--serif);font-style:italic;font-size:15px;color:#8e8474;max-width:44ch }
.wyne-portal .autosave { display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);opacity:0;transition:opacity .4s }
.wyne-portal .autosave.saving { color:var(--ink-mute) }
.wyne-portal .tlist { display:flex;flex-direction:column;margin-top:8px }
.wyne-portal .flag { display:inline-flex;align-items:center;gap:8px }
.wyne-portal .flag .cc { font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-faint);border:1px solid var(--line);padding:3px 6px }
.wyne-portal .tbl-foot { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line) }
.wyne-portal .privacy { font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:9px }
.wyne-portal .privacy svg { width:14px;height:14px;color:var(--gold-deep);flex:0 0 auto }
.wyne-portal .share-prev { border:1px solid var(--line-strong);background:var(--bg-2);overflow:hidden }
.wyne-portal .share-prev .ph { height:126px;background:var(--bg-3) center/cover no-repeat;position:relative }
.wyne-portal .share-prev .ph::after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,30,16,.55),transparent 62%) }
.wyne-portal .share-prev .bd { padding:15px 17px;background:var(--paper) }
.wyne-portal .urlbox { display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);background:var(--bg-2);padding:13px 15px;margin-top:18px }
.wyne-portal .share-nudge { font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:var(--ink-mute);margin-top:18px;padding-top:16px;border-top:1px solid var(--line) }
.wyne-portal .auth-form { display:flex;align-items:center;justify-content:center;padding:clamp(30px,4vw,56px) }
.wyne-portal .auth-inner { width:100%;max-width:404px }
.wyne-portal .auth-inner h1 { font-size:clamp(30px,3.4vw,42px) }
.wyne-portal .auth-alt { text-align:center;margin-top:24px;font-family:var(--serif);font-size:15.5px;color:var(--ink-mute) }
.wyne-portal .auth-legal { font-family:var(--serif);font-size:13px;line-height:1.55;color:var(--ink-mute);margin-top:18px }
.wyne-portal .success { max-width:640px;margin:0 auto;text-align:center;padding:clamp(50px,7vw,96px) var(--pad) }
.wyne-portal .success .tick { width:74px;height:74px;margin:0 auto 26px;border-radius:50%;border:1px solid var(--gold-deep);display:grid;place-items:center;color:var(--gold-deep);animation:pop .55s cubic-bezier(.34,1.56,.64,1) }
.wyne-portal .success .tick svg { width:32px;height:32px }
.wyne-portal .success h1 { font-size:clamp(34px,5vw,56px);margin-top:14px;line-height:1.04 }
.wyne-portal .success p { font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink-soft);margin:18px auto 0;max-width:46ch }
.wyne-portal .success .urlcard { margin-top:32px;border:1px solid var(--line-strong);background:var(--paper);padding:24px }
.wyne-portal .pub-hero { position:relative;min-height:min(560px,74vh);display:flex;align-items:flex-end;background:var(--dark) center/cover no-repeat;padding:clamp(28px,4vw,64px) }
.wyne-portal .pub-hero::after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,12,8,.94),rgba(16,12,8,.3) 62%,rgba(16,12,8,.5)) }
.wyne-portal .pub-av { width:clamp(112px,13vw,176px);height:clamp(112px,13vw,176px);flex:0 0 auto;background:var(--bg-3) center/cover no-repeat;border:1px solid rgba(231,210,176,.4) }
.wyne-portal .pub-hero h1 { color:#f5ede0;font-size:clamp(38px,6.4vw,84px);line-height:.98 }
.wyne-portal .pub-hero .bio { font-family:var(--serif);font-size:17.5px;line-height:1.55;color:#c7bba8;margin-top:15px;max-width:54ch }
.wyne-portal .pub-socials { display:flex;gap:11px;margin-top:20px }
.wyne-portal .pub-socials a { width:38px;height:38px;border:1px solid rgba(231,210,176,.34);display:grid;place-items:center;color:#c7bba8;transition:border-color .2s,color .2s }
.wyne-portal .pub-socials a:hover { border-color:var(--gold);color:var(--gold-soft) }
.wyne-portal .pub-socials svg { width:16px;height:16px }
.wyne-portal .pub-body { max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,72px) clamp(22px,3.4vw,46px) 80px }
.wyne-portal .pub-tracks { display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:18px;margin-top:26px }
.wyne-portal .pub-track { border:1px solid var(--line-strong);background:var(--paper);transition:border-color .25s,transform .25s }
.wyne-portal .pub-track:hover { border-color:var(--gold-deep);transform:translateY(-3px) }
.wyne-portal .pub-track .art { aspect-ratio:1;background:var(--bg-3) center/cover no-repeat;position:relative;display:grid;place-items:center }
.wyne-portal .pub-track .art .pl { width:46px;height:46px;border-radius:50%;background:rgba(250,245,233,.9);color:var(--ink);display:grid;place-items:center;opacity:0;transition:opacity .25s }
.wyne-portal .pub-track:hover .art .pl { opacity:1 }
.wyne-portal .pub-track .art .pl svg { width:16px;height:16px;margin-left:2px }
.wyne-portal .pub-track .bd { padding:15px 16px }
.wyne-portal .modal { position:fixed;inset:0;z-index:90;background:rgba(38,30,16,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s }
.wyne-portal .modal.open { opacity:1;visibility:visible }
.wyne-portal .modal-card { background:var(--paper);border:1px solid var(--line-strong);width:100%;max-width:412px;padding:32px 28px 26px;position:relative }
.wyne-portal .modal-card h3 { font-size:26px }
.wyne-portal .modal-card p { font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-mute);margin-top:9px }
.wyne-portal .modal-close { position:absolute;top:12px;right:14px;background:none;border:none;font-size:26px;line-height:1;color:var(--ink-mute);cursor:pointer }
.wyne-portal .share-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px }
.wyne-portal .share-grid button { display:flex;align-items:center;gap:11px;padding:14px 15px;border:1px solid var(--line-strong);background:var(--paper-2);font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;transition:border-color .2s }
.wyne-portal .share-grid button:hover { border-color:var(--green) }
.wyne-portal .share-grid button svg { width:16px;height:16px;color:var(--gold-deep);flex:0 0 auto }
.wyne-portal .toast { position:fixed;left:50%;bottom:74px;transform:translate(-50%,20px);z-index:95;background:var(--dark);color:#f5ede0;border:1px solid var(--gold-deep);padding:14px 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s }
.wyne-portal .dev { position:fixed;bottom:0;left:0;right:0;z-index:96;background:#15110c;border-top:1px solid rgba(231,210,176,.2);padding:9px 14px calc(9px + env(safe-area-inset-bottom));display:flex;gap:7px;align-items:center;overflow-x:auto;scrollbar-width:none }
.wyne-portal .dev::-webkit-scrollbar { display:none }
.wyne-portal .dev .lb { font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#8e8474;flex:0 0 auto;padding-right:4px }
.wyne-portal .dev button { flex:0 0 auto;background:transparent;border:1px solid rgba(231,210,176,.24);color:#c7bba8;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;cursor:pointer;white-space:nowrap }
.wyne-portal .dev button:hover { border-color:#c9a44c;color:#e6cf9e }
.wyne-portal .spec { margin-top:14px;border:1px solid rgba(138,111,51,.34);background:rgba(184,146,77,.06);padding:17px 19px }
.wyne-portal .spec-h { font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px }
.wyne-portal .spec dl { display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0 }
.wyne-portal .spec dt { font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding-top:3px }
.wyne-portal .spec dd { font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-soft);margin:0 }
.wyne-portal .spec dd b { font-weight:600;color:var(--ink) }
@media (max-width:640px) {
  .wyne-portal .spec dl { grid-template-columns:1fr;gap:2px }
  .wyne-portal .spec dt { margin-top:10px }
}
.wyne-portal .earn-panel { background:linear-gradient(158deg,#2a2014 0%,#1a1410 58%,#120e0a 100%);border-color:rgba(201,166,97,.34) }
.wyne-portal .rate-block { display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:0 0 auto }
.wyne-portal .rate-chip { display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:10px 16px;color:#16100a;background:linear-gradient(180deg,#f2d99f,#cfa758);border:none;box-shadow:0 4px 16px rgba(201,166,97,.28) }
.wyne-portal .rate-cta { white-space:nowrap }
.wyne-portal .rate-inline { color:var(--gold-soft);border-bottom-color:rgba(230,207,158,.5);margin-left:4px }
.wyne-portal .rate-inline:hover { color:#fdf6e8;border-bottom-color:#fdf6e8 }
.wyne-portal .earn-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px }
.wyne-portal .earn-cell { padding:0 26px;border-right:1px solid rgba(231,210,176,.2) }
.wyne-portal .earn-cell:first-child { padding-left:0 }
.wyne-portal .earn-cell:last-child { border-right:none;padding-right:0 }
.wyne-portal .earn-cell .calc { font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#a99f8c;margin-top:11px }
.wyne-portal .earn-note { font-family:var(--serif);font-size:15px;line-height:1.6;color:#c2b49a;margin-top:28px;padding-top:20px;border-top:1px solid rgba(231,210,176,.2);max-width:76ch }
.wyne-portal .money { font-weight:600;color:var(--gold-deep) }
@media (max-width:860px) {
  .wyne-portal .earn-grid { grid-template-columns:1fr }
  .wyne-portal .earn-cell { padding:18px 0;border-right:none;border-bottom:1px solid rgba(231,210,176,.16) }
  .wyne-portal .earn-cell:first-child { padding-top:0 }
  .wyne-portal .earn-cell:last-child { border-bottom:none;padding-bottom:0 }
}

/* --- Artist Page screen: the few pieces the design draws with JS --------- */

/* Tracks are uploaded on the Music screen, so this list only reads them
   back. Same box as .track-name-in, without the input chrome. */
.wyne-portal .track-name-ro {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.25;
	color: var(--ink);
	padding: 2px 0 8px;
}
.wyne-portal .track:not(.filled) .track-name-ro { color: var(--ink-mute); font-style: italic; }

/* Over the limit: the count turns, the text stays — the artist trims it. */
.wyne-portal .count.over { color: var(--red, #a3372f); }

/* The label acts as the button, so it needs the button's look. */
.wyne-portal label.link-btn { cursor: pointer; display: inline-flex; align-items: center; }

.wyne-portal .cl-i .cl-t { display: inline; }

/* Unsaved beats "saved" — never claim a write that has not happened. */
.wyne-portal .autosave.dirty { color: var(--gold-deep); opacity: 1; }

/* The empty-slot drop zone is a button here, not a div. */
.wyne-portal button.audio-drop {
	width: 100%;
	font: inherit;
	text-align: left;
	background: none;
	cursor: pointer;
}

.wyne-portal .audio-drop .t { display: block; }
.wyne-portal .audio-drop .s { display: block; }

/* The cover thumb spans the section, as in the design — an earlier 420px cap
   is gone: the hero is judged at the width it will actually be seen at. */
.wyne-portal .img-thumb.wide { max-width: none; }

/* Remove is a checkbox so the no-JS path still works, but the design draws a
   plain link. The box is taken out of the flow and the label carries the tick
   through its own :has() state. */
.wyne-portal .link-btn input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.wyne-portal label.link-btn { position: relative; }
.wyne-portal label.link-btn:has(input:checked) { text-decoration: line-through; opacity: .7; }

/* Two rules that did not make it across from the design: without them the
   four checklist groups stack instead of sitting side by side. */
.wyne-portal .checklist .sub { font-family: var(--serif); font-style: italic; font-size: 16px; color: #8e8474; margin-top: 9px; }
.wyne-portal .cl-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 26px; }
@media (max-width:1080px){ .wyne-portal .cl-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .wyne-portal .cl-groups { grid-template-columns: 1fr; gap: 20px; } }

/* The rest of the progress row, straight from the design. */
.wyne-portal .prog-head .n { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.wyne-portal .prog-head .n b { font-weight: 600; color: var(--gold-deep); }
.wyne-portal .prog-head .s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.wyne-portal .autosave.on { opacity: 1; }

/* --- The rest of the design's rules -------------------------------------
 * A selector-by-selector diff against the design stylesheet turned up these
 * still missing: the sales table and its earnings column, the track rows on
 * the dashboard, the earnings panel inside the KPI cards, and the share and
 * success blocks. Copied across as they are written in the design, scoped to
 * the portal so the generic names stay inside it.
 * --------------------------------------------------------------------- */
.wyne-portal .trow:last-child { border-bottom:none }
.wyne-portal .trow .art { width:44px;height:44px;background:var(--bg-3) center/cover no-repeat;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-faint) }
.wyne-portal .trow .nm { font-family:var(--serif);font-size:20px;color:var(--ink) }
.wyne-portal .trow .barw { height:5px;background:var(--bg-3);margin-top:9px;overflow:hidden }
.wyne-portal .trow .barw i { display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));width:0;transition:width .8s cubic-bezier(.4,0,.2,1) }
.wyne-portal .trow .rt .b { font-family:var(--serif);font-size:21px;color:var(--ink) }
.wyne-portal .tbl { width:100%;border-collapse:collapse;margin-top:10px }
.wyne-portal .tbl th { font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);text-align:left;font-weight:400;padding:13px 14px 13px 0;border-bottom:1px solid var(--line-strong) }
.wyne-portal .tbl tr:last-child td { border-bottom:none }
.wyne-portal .tbl .dt { font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);white-space:nowrap }
.wyne-portal .tbl .tk { font-family:var(--serif);font-size:18px;color:var(--ink) }
.wyne-portal .tbl .qt { font-family:var(--mono);font-size:13px;text-align:right;padding-right:0 }
.wyne-portal .tbl th.r { text-align:right;padding-right:0 }
.wyne-portal .share-prev .bd .a { font-family:var(--serif);font-size:19px;color:var(--ink) }
.wyne-portal .share-prev .bd .b { font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-mute);margin-top:5px }
.wyne-portal .urlbox .u { flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.wyne-portal .share-acts { display:flex;gap:11px;margin-top:16px;flex-wrap:wrap }
.wyne-portal .success .urlcard .k { font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute) }
.wyne-portal .success .urlcard .v { font-family:var(--mono);font-size:15px;color:var(--ink);margin-top:11px;word-break:break-all }
.wyne-portal .success .acts { margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap }
.wyne-portal .pub-track .bd .n { font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.2 }
.wyne-portal .pub-track .bd .s { font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px }
.wyne-portal .toast.on { opacity:1;visibility:visible;transform:translate(-50%,0) }
.wyne-portal .kpi .earn { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line) }
.wyne-portal .kpi .earn .e-k { font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute) }
.wyne-portal .kpi .earn .e-v { font-family:var(--serif);font-weight:600;font-size:25px;color:var(--gold-deep);line-height:1 }
.wyne-portal .kpi.hero .earn { border-top-color:rgba(231,210,176,.2) }
.wyne-portal .kpi.hero .earn .e-k { color:#8e8474 }
.wyne-portal .kpi.hero .earn .e-v { color:var(--gold-soft);font-size:29px }
.wyne-portal .earn-panel .panel-head { border-bottom-color:rgba(231,210,176,.2) }
.wyne-portal .earn-panel .panel-head h2 { color:#fdf6e8 }
.wyne-portal .earn-panel .panel-head .s { color:#c2b49a }
.wyne-portal .rate-chip .dot { background:#16100a;opacity:.55 }
.wyne-portal .earn-cell .k { font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#e6cf9e }
.wyne-portal .earn-cell .v { font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.4vw,54px);color:#fdf6e8;line-height:1;margin-top:14px }
.wyne-portal .earn-cell.hero .v { color:#f2d99f;font-size:clamp(46px,5.4vw,68px);text-shadow:0 0 34px rgba(201,166,97,.28) }
.wyne-portal .tbl .earn-cell { font-family:var(--mono);font-size:13px;color:var(--gold-deep) }

@media (max-width:860px) {
	/* The sales table stacks on small screens; earnings go to the right of the
	   second row, as in the design. */
	.wyne-portal .tbl td.earn-cell { grid-column: 2; grid-row: 3; text-align: right; }
}

/* The no-JS remove checkbox must stay hidden even now that it is a .link-btn. */
.wyne-portal label.link-btn.artist-remove--nojs { display: none; }
.no-js .wyne-portal label.link-btn.artist-remove--nojs { display: inline-flex; }