.dash-layout { position: relative; z-index: 1; }

    .droplet-shell {
        position: relative;
        overflow: hidden;
        transition: box-shadow .22s ease, filter .22s ease, background-image .22s ease;
    }
    .droplet-content {
        position: relative;
        z-index: 2;
    }
    .droplet-lobe {
        display: none;
    }

    .dash-glass {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        --mx: 50%;
        --my: 50%;
        --shine-x: 50%;
        --shine-y: 16%;
        --refract-x: 52%;
        --refract-y: 54%;
        --water: 0;
        --flow-x: 0;
        --flow-y: 0;
        border-radius: 40px;
        background: linear-gradient(148deg, rgba(255,255,255,.32), rgba(255,255,255,.16) 34%, rgba(218,232,248,.12) 58%, rgba(255,255,255,.2) 100%);
        border: 1px solid rgba(255,255,255,.64);
        box-shadow: 0 22px 42px rgba(15,23,42,.09), 0 6px 14px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(15,23,42,.05);
        backdrop-filter: blur(18px) saturate(170%) contrast(1.04);
        -webkit-backdrop-filter: blur(18px) saturate(170%) contrast(1.04);
        transition: box-shadow .18s ease, border-color .18s ease, background-image .18s ease, backdrop-filter .18s ease;
    }
    .shape-a { border-radius: 42px 60px 44px 68px / 56px 30px 70px 34px !important; }
    .shape-b { border-radius: 58px 28px 64px 24px / 28px 60px 30px 70px !important; }
    .shape-c { border-radius: 28px 62px 24px 74px / 74px 22px 48px 28px !important; }
    .shape-d { border-radius: 64px 24px 42px 36px / 24px 68px 26px 54px !important; }
    .shape-e { border-radius: 32px 70px 36px 58px / 46px 22px 72px 30px !important; }
    .shape-f { border-radius: 72px 26px 76px 24px / 28px 58px 26px 74px !important; }
    .shape-g { border-radius: 24px 68px 34px 78px / 76px 22px 46px 28px !important; }
    .shape-h { border-radius: 76px 24px 44px 70px / 26px 72px 28px 64px !important; }
    .dash-glass::before,
    .dash-glass::after,
    .catalog-row::before,
    .catalog-row::after,
    .dash-stat-chip::before,
    .dash-stat-chip::after,
    .cover-soft::before {
        content: "";
        position: absolute;
        border-radius: inherit;
        pointer-events: none;
    }
    .dash-glass::before,
    .catalog-row::before,
    .dash-stat-chip::before,
    .cover-soft::before {
        inset: 1px;
        background:
            radial-gradient(240px 180px at var(--mx) var(--my), rgba(255,255,255,calc(.2 + var(--water) * .36)), rgba(255,255,255,calc(.08 + var(--water) * .14)) 16%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 58%),
            radial-gradient(190px 130px at var(--refract-x) var(--refract-y), rgba(172,214,255,calc(.04 + var(--water) * .16)), rgba(172,214,255,0) 72%),
            radial-gradient(170px 100px at calc(var(--mx) + 10%) calc(var(--my) + 12%), rgba(154,186,220,calc(.02 + var(--water) * .09)), rgba(154,186,220,0) 74%),
            linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,0) 44%, rgba(15,23,42,.04) 100%);
    }
    .dash-glass::after,
    .catalog-row::after,
    .dash-stat-chip::after {
        left: 10%;
        right: 16%;
        top: 6px;
        height: 30%;
        background:
            radial-gradient(220px 52px at var(--shine-x) var(--shine-y), rgba(255,255,255,calc(.34 + var(--water) * .24)), rgba(255,255,255,calc(.12 + var(--water) * .14)) 40%, rgba(255,255,255,0) 80%),
            radial-gradient(320px 72px at calc(var(--shine-x) - 8%) calc(var(--shine-y) + 16%), rgba(255,255,255,calc(.06 + var(--water) * .1)), rgba(255,255,255,0) 80%);
        opacity: .94;
        transform: translate3d(calc(var(--flow-x) * 1px), calc(var(--flow-y) * 1px), 0);
    }
    .dash-stat-chip {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        --mx: 50%;
        --my: 50%;
        --shine-x: 50%;
        --shine-y: 16%;
        --refract-x: 52%;
        --refract-y: 54%;
        --water: 0;
        --flow-x: 0;
        --flow-y: 0;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,.56);
        background: linear-gradient(146deg, rgba(255,255,255,.26), rgba(255,255,255,.1) 42%, rgba(255,255,255,.18));
        box-shadow: 0 12px 22px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.84), inset 0 -1px 0 rgba(15,23,42,.05);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #475569;
        padding: .42rem .74rem;
        transition: box-shadow .16s ease, background-image .18s ease;
    }
    .catalog-row {
        position: relative;
        isolation: isolate;
        overflow: visible;
        --mx: 50%;
        --my: 50%;
        --shine-x: 50%;
        --shine-y: 16%;
        --refract-x: 52%;
        --refract-y: 54%;
        --water: 0;
        --flow-x: 0;
        --flow-y: 0;
        border: 1px solid rgba(255,255,255,.56);
        background: linear-gradient(148deg, rgba(255,255,255,.3), rgba(255,255,255,.13) 38%, rgba(255,255,255,.18));
        border-radius: 22px;
        padding: .9rem 1rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .8rem;
        align-items: center;
        box-shadow: 0 14px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.84), inset 0 -1px 0 rgba(15,23,42,.05);
        transition: box-shadow .16s ease, border-color .16s ease, background-image .18s ease;
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
    }
    .catalog-row:hover {
        box-shadow: 0 18px 30px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
    }
    .status-chip {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        --mx: 50%;
        --my: 50%;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.42);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(15,23,42,.05);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: .36rem .62rem;
    }
    .cover-soft {
        position: relative;
        --mx: 50%;
        --my: 50%;
        --shine-x: 50%;
        --shine-y: 16%;
        --refract-x: 52%;
        --refract-y: 54%;
        --water: 0;
        --flow-x: 0;
        --flow-y: 0;
        border-radius: 28px;
        overflow: visible;
        border: 1px solid rgba(255,255,255,.58);
        box-shadow: 0 14px 28px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(15,23,42,.06);
        transition: box-shadow .16s ease, background-image .18s ease;
    }

    .liquid-action {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        --mx: 50%;
        --my: 50%;
        --shine-x: 50%;
        --shine-y: 16%;
        --refract-x: 52%;
        --refract-y: 54%;
        --water: 0;
        --flow-x: 0;
        --flow-y: 0;
        border: 1px solid rgba(255,255,255,.16);
        background:
            radial-gradient(160px 100px at var(--mx) var(--my), rgba(255,255,255,calc(.08 + var(--water) * .14)), rgba(255,255,255,0) 62%),
            linear-gradient(160deg, rgba(15,23,42,.96), rgba(17,24,39,.92) 42%, rgba(30,41,59,.9) 100%);
        box-shadow: 0 16px 30px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(15,23,42,.36);
        transition: box-shadow .18s ease, background-image .18s ease, border-color .18s ease;
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
    }

    .liquid-action::before,
    .liquid-action::after {
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: inherit;
    }

    .liquid-action::before {
        inset: 1px;
        background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0) 64%);
    }

    .liquid-action::after {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .dash-glass::before,
        .dash-glass::after,
        .catalog-row::before,
        .catalog-row::after,
        .dash-stat-chip::before,
        .dash-stat-chip::after,
        .cover-soft::before,
        .liquid-action::before,
        .liquid-action::after {
            animation: none !important;
            transform: none !important;
        }
    }

    /* The dashboard can be injected as a React legacy fragment.  Its own
       stylesheet is loaded after the app bundle, so keep the dark palette here
       as the final authority instead of letting the light glass reset cards. */
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .section-card.dash-glass {
        background-color: #111a2b !important;
        background-image: linear-gradient(145deg, rgba(39, 52, 73, .97), rgba(15, 23, 42, .98)) !important;
        border-color: rgba(148, 163, 184, .32) !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
        color: #e7eef8 !important;
    }

    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .section-card.dash-glass::before,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .section-card.dash-glass::after {
        opacity: 0 !important;
        background: none !important;
    }

    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .bg-white\\/45,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .bg-white\\/60,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .bg-slate-100,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .bg-indigo-50\\/60 {
        background-color: rgba(30, 41, 59, .86) !important;
        background-image: none !important;
        border-color: rgba(148, 163, 184, .24) !important;
    }

    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .catalog-row,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-stat-chip {
        background-color: rgba(30, 41, 59, .78) !important;
        background-image: linear-gradient(145deg, rgba(51, 65, 85, .76), rgba(15, 23, 42, .84)) !important;
        border-color: rgba(148, 163, 184, .24) !important;
        color: #e7eef8 !important;
    }

    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .catalog-row::before,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .catalog-row::after,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-stat-chip::before,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-stat-chip::after {
        opacity: 0 !important;
        background: none !important;
    }

    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .text-slate-900,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .text-slate-800,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .text-slate-700 {
        color: #f1f5f9 !important;
    }

    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .text-slate-600,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .text-slate-500,
    html[data-bg-theme='legacy-dark-disabled'] .legacy-content .dash-glass .text-slate-400 {
        color: #b8c7dc !important;
    }

/* Artist home — a deliberately small mobile dashboard, not a compressed desktop. */
.artist-home-mobile { display: none; }

@media (max-width: 767px) {
    .artist-overview { padding: 18px 16px calc(104px + env(safe-area-inset-bottom)) !important; }
    .artist-overview > :not(.rm-page-header):not(.artist-home-mobile) { display: none !important; }
    .artist-overview .rm-page-header {
        display: block;
        margin: 0 0 14px !important;
        padding: 21px 20px 18px !important;
        border: 0 !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, #10263a 0%, #163e53 58%, #147e75 150%) !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, .17) !important;
    }
    .artist-overview .rm-page-header .rm-eyebrow { margin: 0 0 8px; color: #7ee8d5; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
    .artist-overview .rm-page-header .rm-title { margin: 0; color: #fff; font-size: 32px !important; letter-spacing: -.045em; }
    .artist-overview .rm-page-header .rm-subtitle { margin: 6px 0 16px; color: #b9cfdb; font-size: 14px !important; line-height: 1.42; }
    .artist-overview .rm-page-header .rm-button { display:flex; width:100%; min-height:48px; align-items:center; justify-content:center; border-radius:14px; background:#39d3a1; color:#06251f; font-size:14px; font-weight:900; text-decoration:none; }
    .artist-home-mobile { display:grid; gap:14px; }
    .artist-home-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .artist-home-kpi { display:flex; min-height:128px; flex-direction:column; padding:14px; border:1px solid rgba(148,163,184,.2); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 8px 20px rgba(15,23,42,.07); color:#0f172a; text-decoration:none; }
    .artist-home-kpi:nth-child(2) { background:linear-gradient(145deg,#effbf7,#fff); }
    .artist-home-kpi span { color:#64748b; font-size:11px; font-weight:800; }
    .artist-home-kpi strong { margin-top:11px; color:#0f172a; font-size:25px; font-weight:900; letter-spacing:-.045em; line-height:1; overflow-wrap:anywhere; }
    .artist-home-kpi small { margin-top:auto; color:#0f8b69; font-size:10px; font-weight:800; }
    .artist-home-kpi small i { margin-left:3px; font-size:9px; }
    .artist-home-focus, .artist-home-money, .artist-home-activity { padding:16px; border:1px solid rgba(148,163,184,.2); border-radius:20px; background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(15,23,42,.07); }
    .artist-home-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .artist-home-head p { margin:0 0 4px; color:#0f9f82; font-size:9px; font-weight:900; letter-spacing:.13em; }
    .artist-home-head h2 { margin:0; color:#0f172a; font-size:18px; font-weight:900; letter-spacing:-.025em; }
    .artist-home-head > a { padding-top:5px; color:#0f8b69; font-size:11px; font-weight:900; text-decoration:none; }
    .artist-home-focus-list { display:grid; gap:8px; margin-top:14px; }
    .artist-home-task, .artist-home-empty, .artist-home-activity > div > a { display:flex; min-height:58px; align-items:center; gap:10px; padding:10px; border-radius:14px; background:#f6f8fa; color:#0f172a; text-decoration:none; }
    .artist-home-task__icon { display:inline-flex; width:36px; height:36px; flex:0 0 auto; align-items:center; justify-content:center; border-radius:11px; background:#dff8ee; color:#078365; font-size:14px; }
    .artist-home-task > span:nth-child(2), .artist-home-empty > span, .artist-home-activity > div > a > span { display:grid; min-width:0; gap:3px; }
    .artist-home-task strong, .artist-home-empty strong, .artist-home-activity strong { overflow:hidden; color:#172033; font-size:13px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
    .artist-home-task small, .artist-home-empty small, .artist-home-activity small { overflow:hidden; color:#7a8798; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
    .artist-home-task > i, .artist-home-empty > i:last-child, .artist-home-activity > div > a > i { margin-left:auto; color:#94a3b8; font-size:12px; }
    .artist-home-empty > i:first-child { width:36px; color:#10a37f; font-size:21px; text-align:center; }
    .artist-home-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
    .artist-home-links a { display:grid; min-height:75px; place-items:center; align-content:center; gap:7px; border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 6px 17px rgba(15,23,42,.06); color:#526174; font-size:10px; font-weight:850; text-decoration:none; }
    .artist-home-links i { color:#0f9074; font-size:17px; }
    .artist-home-money { background:linear-gradient(135deg,#112b40,#153e52) !important; border:0 !important; }
    .artist-home-money .artist-home-head p { color:#6ee1ca; }
    .artist-home-money .artist-home-head h2 { color:#fff; }
    .artist-home-money .artist-home-head > a { color:#8feada; }
    .artist-home-money > div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:16px; }
    .artist-home-money > div:last-child span { display:grid; gap:5px; min-width:0; padding:10px 8px; border-radius:12px; background:rgba(255,255,255,.09); }
    .artist-home-money small { color:#a8bfca; font-size:9px; font-weight:750; }
    .artist-home-money strong { overflow-wrap:anywhere; color:#fff; font-size:14px; font-weight:900; letter-spacing:-.03em; }
    .artist-home-activity > div { display:grid; gap:1px; margin-top:14px; overflow:hidden; border:1px solid #e2e8f0; border-radius:14px; }
    .artist-home-activity > div > a { min-height:54px; border-radius:0; background:#fff; }
    .artist-home-activity .artist-home-empty { min-height:75px; border-radius:0; background:#f8fafc; }
}

/* Light-only glass surfaces: the old dark hero/panels are no longer part of
   the product language. Keep each block readable over the live background. */
.artist-overview .rm-page-header,
.artist-overview .rm-panel,
.artist-overview .rm-card {
    border: 1px solid rgba(255,255,255,.78) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(239,249,252,.72)) !important;
    box-shadow: 0 16px 34px rgba(35,94,125,.12) !important;
    color: #17313d !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.artist-overview .rm-page-header .rm-title,
.artist-overview .rm-panel .rm-section-title,
.artist-overview .rm-card .rm-metric-value { color: #17313d !important; }
.artist-overview .rm-page-header .rm-subtitle,
.artist-overview .rm-panel .rm-muted,
.artist-overview .rm-card .rm-muted { color: #607985 !important; }
.artist-overview .rm-page-header .rm-button {
    background: linear-gradient(135deg, #5aa7ff, #78f0d7) !important;
    color: #08283c !important;
    box-shadow: 0 10px 22px rgba(42,151,204,.22) !important;
}

/* Artist dashboard is intentionally light-only.  Keep this next to the mobile
   dashboard rules so a stale generic theme layer can never restore dark cards. */
@media (max-width: 767px) {
    .artist-overview .rm-page-header,
    .artist-overview .artist-home-money,
    .artist-overview .rm-panel,
    .artist-overview .rm-card {
        border: 1px solid rgba(67, 147, 176, .19) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(231, 247, 249, .91)) !important;
        box-shadow: 0 12px 28px rgba(34, 119, 151, .12) !important;
        color: #17313d !important;
    }

    .artist-overview .rm-page-header .rm-eyebrow,
    .artist-overview .artist-home-money .artist-home-head p {
        color: #16889a !important;
    }

    .artist-overview .rm-page-header .rm-title,
    .artist-overview .artist-home-money .artist-home-head h2,
    .artist-overview .artist-home-money strong {
        color: #17313d !important;
    }

    .artist-overview .rm-page-header .rm-subtitle,
    .artist-overview .artist-home-money small {
        color: #607985 !important;
    }

    .artist-overview .rm-page-header .rm-button {
        background: linear-gradient(135deg, #5aa7ff, #78f0d7) !important;
        box-shadow: 0 8px 18px rgba(25, 127, 196, .25) !important;
        color: #fff !important;
    }

    .artist-overview .artist-home-money .artist-home-head > a {
        color: #167f99 !important;
    }

    .artist-overview .artist-home-money > div:last-child span {
        border: 1px solid rgba(67, 147, 176, .13) !important;
        background: rgba(244, 251, 252, .94) !important;
    }
}