/* =========================================================
   MOYLI — PREMIUM FLOATING UI · DASHBOARD (v1.0.24 ui2)
   Scope: the two Dashboard sections (.pm-dash) only. Every rule lives under <body class="pm-ui"> and uses the tokens of premium-shell.css.
   Layout responds to the width of the Dashboard itself (container queries), so it stays right with any text size (Juda katta uses CSS zoom).
   Motion: 180-350 ms transform/opacity; the chart line, bars, rings and sparklines build once (<= 900 ms); nothing loops; reduced motion = final state at once.
   Reference: 00_ORIGINAL_Dashboard_Dark.png (glass volume, neon outlines, glowing line / sparklines / bars), 01_Dashboard_Light.png, 11_Dashboard_Mobile_*.png.
   ========================================================= */

/* ---------- the two sections ---------- */
body.pm-ui .pm-dash {
    container-type: inline-size;
    container-name: pmdash;
    display: grid;
    grid-template-columns: minmax(0, 1fr);       /* the legacy .dashboard-grid defines four columns */
    grid-template-rows: none;
    gap: 16px;
    height: auto;
    min-height: 0;
    margin: 0 0 16px;
}
body.pm-ui .pm-dash[hidden] { display: none !important; }
body.pm-ui .dashboard-lower.pm-dash { margin-bottom: 4px; }
body.pm-ui .dashboard-lower.dashboard-v62-lower { display: block; height: auto; margin-top: 0; }

/* ---------- glass surface shared by cards and panels: rim light, neon edge, floor shade, soft halo ---------- */
body.pm-ui .dashboard-v62-kpi,
body.pm-ui .dashboard-v62-panel,
body.pm-ui .dashboard-v62-actions,
body.pm-ui .dashboard-v62-payments {
    position: relative;
    min-width: 0;
    border: 1px solid var(--pm-stroke);
    border-radius: var(--pm-r-lg);
    background: var(--pm-tint), var(--pm-panel);
    box-shadow: var(--pm-shadow);
    color: var(--pm-text);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    transition: transform var(--pm-t) var(--pm-ease), box-shadow var(--pm-t) ease, border-color var(--pm-t) ease;
}
/* KPI cards lift on hover: a blur that has to be re-sampled every frame of that lift is not worth it over a smooth canvas */
body.pm-ui .dashboard-v62-kpi { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.pm-ui .dashboard-v62-kpi::before,
body.pm-ui .dashboard-v62-panel::before,
body.pm-ui .dashboard-v62-actions::before,
body.pm-ui .dashboard-v62-payments::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pm-gloss);
    pointer-events: none;
    opacity: .9;
}
@media (hover: hover) {
    body.pm-ui .dashboard-v62-kpi:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-hover); border-color: rgba(78, 255, 164, .62); }
    body.pm-ui .dashboard-v62-panel:hover,
    body.pm-ui .dashboard-v62-actions:hover,
    body.pm-ui .dashboard-v62-payments:hover { box-shadow: var(--pm-shadow-hover); }
}

/* ---------- entrance: a short rise, staggered; replays when the Dashboard is opened (display none -> block) ---------- */
@keyframes pmRise { from { opacity: 0; transform: translateY(10px); } }
body.pm-ui .dashboard-v62__kpis > *,
body.pm-ui .pm-body-grid > *,
body.pm-ui .dashboard-v62__control-row > *,
body.pm-ui .pm-lower-grid > * { animation: pmRise 320ms var(--pm-ease) backwards; animation-delay: calc(var(--pm-i, 0) * 45ms); }
body.pm-ui .dashboard-v62__kpis > :nth-child(2) { --pm-i: 1; }
body.pm-ui .dashboard-v62__kpis > :nth-child(3) { --pm-i: 2; }
body.pm-ui .dashboard-v62__kpis > :nth-child(4) { --pm-i: 3; }
body.pm-ui .dashboard-v62__kpis > :nth-child(5) { --pm-i: 4; }
body.pm-ui .pm-body-grid > :nth-child(1) { --pm-i: 5; }
body.pm-ui .pm-body-grid > :nth-child(2) { --pm-i: 6; }
body.pm-ui .dashboard-v62__control-row > :nth-child(1) { --pm-i: 7; }
body.pm-ui .dashboard-v62__control-row > :nth-child(2) { --pm-i: 8; }
body.pm-ui .pm-lower-grid > :nth-child(1) { --pm-i: 9; }
body.pm-ui .pm-lower-grid > :nth-child(2) { --pm-i: 10; }
body.pm-ui .pm-lower-grid > :nth-child(3) { --pm-i: 11; }

/* ---------- KPI cards ---------- */
body.pm-ui .dashboard-v62__kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
body.pm-ui .dashboard-v62-kpi {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 16px 15px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    container-type: inline-size;
    -webkit-tap-highlight-color: transparent;
}
/* the leading card is the deepest: neon edge, brighter fill, wide emerald halo */
body.pm-ui .dashboard-v62-kpi:first-child {
    border-color: var(--pm-hi-border);
    background: var(--pm-tint), var(--pm-hi-fill);
    box-shadow: var(--pm-shadow-hi);
}
body.pm-ui .dashboard-v62-kpi:active { transform: scale(.985); }
body.pm-ui .dashboard-v62-kpi:focus-visible,
body.pm-ui .dashboard-v62-actions__buttons button:focus-visible,
body.pm-ui .dashboard-v62-panel__head button:focus-visible,
body.pm-ui .dashboard-v62-attention-item:focus-visible,
body.pm-ui .dashboard-v62-operation:focus-visible,
body.pm-ui .pm-seg button:focus-visible { outline: 2px solid var(--pm-line); outline-offset: 2px; }

body.pm-ui .dashboard-v62-kpi__icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    background: rgba(47, 244, 148, .20) !important;
    color: var(--pm-up) !important;
    box-shadow: 0 0 16px rgba(40, 255, 150, .30), inset 0 0 0 1px rgba(120, 255, 200, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.pm-ui .dashboard-v62-kpi__icon.is-danger { background: rgba(255, 113, 124, .20) !important; color: var(--pm-down) !important; box-shadow: 0 0 16px rgba(255, 90, 100, .30), inset 0 0 0 1px rgba(255, 130, 140, .40), inset 0 1px 0 rgba(255, 255, 255, .22); }
body.pm-ui .dashboard-v62-kpi__icon.is-blue { background: rgba(31, 168, 255, .20) !important; color: #3fb8ff !important; box-shadow: 0 0 16px rgba(31, 168, 255, .30), inset 0 0 0 1px rgba(90, 195, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .22); }
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-kpi__icon.is-blue,
body.pm-ui.moyli-theme-light .dashboard-v62-kpi__icon.is-blue { color: #0a6fb0 !important; }
body.pm-ui .dashboard-v62-kpi__icon svg { width: 22px; height: 22px; }

body.pm-ui .dashboard-v62-kpi__copy { position: relative; z-index: 1; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
body.pm-ui .dashboard-v62-kpi__copy small { color: var(--pm-muted); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
body.pm-ui .dashboard-v62__kpis .dashboard-v62-kpi .dashboard-v62-kpi__copy strong {
    color: var(--pm-text) !important;
    font-size: clamp(19px, 11cqw, 30px);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
/* the sub-line of a card reads like the reference's chip: a soft pill (only real figures live in it) */
body.pm-ui .dashboard-v62-kpi:not(:nth-child(3)) .dashboard-v62-kpi__copy em {
    width: fit-content;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(90, 255, 172, .13);
    box-shadow: inset 0 0 0 1px rgba(90, 255, 172, .22);
    color: var(--pm-up);
    font-size: 14px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-kpi:not(:nth-child(3)) .dashboard-v62-kpi__copy em,
body.pm-ui.moyli-theme-light .dashboard-v62-kpi:not(:nth-child(3)) .dashboard-v62-kpi__copy em { background: rgba(8, 115, 58, .10); box-shadow: inset 0 0 0 1px rgba(8, 115, 58, .22); }
body.pm-ui .dashboard-v62-kpi:nth-child(3) .dashboard-v62-kpi__copy em { color: var(--pm-muted); font-size: 14px; font-style: normal; font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: 100%; }

/* the value that counts up is painted by a pseudo-element (the real text stays final and readable) */
body.pm-ui .pm-counting { visibility: hidden; position: relative; }
body.pm-ui .pm-counting::after {
    content: attr(data-count) / "";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: var(--pm-text);
    overflow-wrap: anywhere;
}

/* sparklines: the real last 7 days, top right of the card, neon line with a glowing end dot */
body.pm-ui .pm-spark {
    position: absolute;
    top: 14px;
    right: 14px;
    width: min(46%, 108px);
    height: 44px;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    animation: pmReveal 900ms var(--pm-ease) 150ms backwards;
}
body.pm-ui .pm-spark__line { stroke: var(--pm-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: var(--pm-line-glow); }
body.pm-ui .pm-spark__dot { stroke: #d2ffe8; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(60, 255, 160, .95)) drop-shadow(0 0 12px rgba(40, 255, 150, .6)); }
html[data-moyli-theme="light"] body.pm-ui .pm-spark__dot,
body.pm-ui.moyli-theme-light .pm-spark__dot { stroke: #0fb96f; filter: drop-shadow(0 0 4px rgba(20, 200, 120, .6)); }
@keyframes pmReveal { from { clip-path: inset(-12px 100% -12px 0); } to { clip-path: inset(-12px -12px -12px 0); } }

/* ---------- panels ---------- */
body.pm-ui .dashboard-v62-panel {
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0 0 18px;
}
body.pm-ui .dashboard-v62-panel__head {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: 18px 18px 12px;
    border: 0;
    align-items: flex-start;
    flex-wrap: wrap;
}
body.pm-ui .dashboard-v62-panel__head h2 { margin: 0; color: var(--pm-text); font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
body.pm-ui .dashboard-v62-panel__head p { margin: 4px 0 0; color: var(--pm-muted); font-size: 14px; }
body.pm-ui .dashboard-v62-panel__head button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--pm-stroke);
    border-radius: 12px;
    background: var(--pm-field);
    color: var(--pm-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--pm-t-fast) ease, box-shadow var(--pm-t-fast) ease, border-color var(--pm-t-fast) ease;
}
body.pm-ui .dashboard-v62-panel__head button:hover { border-color: rgba(78, 255, 164, .62); box-shadow: 0 0 16px rgba(14, 223, 137, .30); }
body.pm-ui .dashboard-v62-badge { border-radius: 999px; background: rgba(0, 10, 8, .42); border-color: rgba(255, 192, 90, .55); box-shadow: 0 0 12px rgba(255, 180, 70, .28); }
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-badge,
body.pm-ui.moyli-theme-light .dashboard-v62-badge { background: #fff3da; color: #7a4d00 !important; border-color: rgba(138, 90, 0, .35); box-shadow: none; }

body.pm-ui .pm-body-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
body.pm-ui .dashboard-v62-trend { grid-column: auto !important; min-height: 0 !important; }
body.pm-ui .dashboard-v62-empty { padding: 28px 16px; color: var(--pm-muted); text-align: center; font-size: 15px; }

/* ---------- trend ---------- */
body.pm-ui .pm-trend__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding: 0 18px; }
body.pm-ui .pm-trend__total { display: grid; gap: 4px; min-width: 0; }
body.pm-ui .pm-trend__total > strong { color: var(--pm-text); font-size: clamp(26px, 1.6vw + 14px, 38px); font-weight: 850; letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
body.pm-ui .pm-delta { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
body.pm-ui .pm-delta b { color: var(--pm-muted); font-weight: 800; }
body.pm-ui .pm-delta i { color: var(--pm-muted); font-style: normal; font-weight: 600; }
body.pm-ui .pm-delta.is-up b { color: var(--pm-up); }
body.pm-ui .pm-delta.is-down b { color: var(--pm-down); }
body.pm-ui .pm-delta.is-none b { display: none; }

/* segmented period switch with a sliding thumb (bright emerald, dark text) */
body.pm-ui .pm-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px;
    border: 1px solid var(--pm-stroke);
    border-radius: 14px;
    background: var(--pm-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -8px 14px rgba(0, 0, 0, .10);
    min-width: 0;
}
body.pm-ui .pm-seg::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    border-radius: 10px;
    background: linear-gradient(100deg, #41f69a, #a0ffab);
    box-shadow: 0 0 16px rgba(22, 235, 130, .50), inset 0 1px 0 rgba(255, 255, 255, .6);
    transform: translateX(calc(var(--pm-seg-i, 0) * 100%));
    transition: transform var(--pm-t) var(--pm-ease);
}
body.pm-ui .pm-seg button {
    position: relative;
    z-index: 1;
    min-height: 40px;
    min-width: 62px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pm-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: color var(--pm-t-fast) ease;
}
body.pm-ui .pm-seg button:hover { color: var(--pm-text); }
body.pm-ui .pm-seg button.is-active { color: var(--pm-seg-on-text); background: linear-gradient(100deg, #41f69a, #a0ffab); transition: color var(--pm-t-fast) ease, background 0s linear var(--pm-t); }

/* chart */
body.pm-ui .dashboard-v62-chart {
    position: relative;
    display: block;
    flex: none;
    height: clamp(220px, 23vw, 280px) !important;
    min-height: 0 !important;
    margin-top: 6px;
    padding: 0 6px !important;
    overflow: visible;
    background-image: none !important;          /* the legacy Light chart paints its own grid lines */
    transition: opacity var(--pm-t) ease;
}
body.pm-ui .dashboard-v62-chart.is-loading,
body.pm-ui .pm-mix__body.is-loading,
body.pm-ui .pm-dyn__chart.is-loading { opacity: .45; }
body.pm-ui .pm-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
body.pm-ui .pm-chart__grid line { stroke: var(--pm-hair); stroke-width: 1; }
body.pm-ui .pm-chart__grid line.is-zero { stroke: var(--pm-stroke); }
body.pm-ui .pm-chart__ylabels text { fill: var(--pm-muted); font-size: 12px; font-weight: 600; }
body.pm-ui .pm-chart__stop-a { stop-color: var(--pm-line); stop-opacity: var(--pm-area-a); }
body.pm-ui .pm-chart__stop-b { stop-color: var(--pm-line); stop-opacity: .03; }
body.pm-ui .pm-chart__line { stroke: var(--pm-line); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: var(--pm-line-glow); }
body.pm-ui .pm-chart__labels text { fill: var(--pm-muted); font-size: 12px; font-weight: 600; }
body.pm-ui .pm-chart__guide line { stroke: var(--pm-line); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0; transition: opacity var(--pm-t-fast) ease; }
body.pm-ui .pm-chart__guide.is-on line { opacity: .65; }
body.pm-ui .pm-chart__halo { fill: var(--pm-line); opacity: .26; }
body.pm-ui .pm-chart__dot { fill: #d2ffe8; stroke: #0c7957; stroke-width: 3; filter: drop-shadow(0 0 7px rgba(49, 255, 145, .95)) drop-shadow(0 0 16px rgba(40, 255, 150, .55)); }
html[data-moyli-theme="light"] body.pm-ui .pm-chart__dot,
body.pm-ui.moyli-theme-light .pm-chart__dot { fill: #ffffff; stroke: #0a8a55; filter: drop-shadow(0 0 5px rgba(10, 160, 100, .55)); }
body.pm-ui .pm-chart__hit { cursor: pointer; outline: none; }
body.pm-ui .pm-chart__hit:focus-visible { outline: 2px solid var(--pm-line); outline-offset: -2px; }

@keyframes pmDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes pmFade { from { opacity: 0; } }
@keyframes pmPop { from { opacity: 0; transform: scale(.4); } }
body.pm-ui .pm-chart__svg.is-animating .pm-chart__line { animation: pmDraw 700ms var(--pm-ease) backwards; }
body.pm-ui .pm-chart__svg.is-animating .pm-chart__area { animation: pmFade 600ms ease 160ms backwards; }
body.pm-ui .pm-chart__svg.is-animating .pm-chart__dot,
body.pm-ui .pm-chart__svg.is-animating .pm-chart__halo { animation: pmFade 300ms ease 620ms backwards; }

/* tooltip: a glass bubble with a neon edge and an arrow that points at the value */
body.pm-ui .pm-tip {
    position: absolute;
    z-index: 5;
    min-width: 168px;
    max-width: calc(100% - 8px);
    padding: 10px 13px;
    border: 1px solid var(--pm-hi-border);
    border-radius: 14px;
    background: var(--pm-inner);
    color: var(--pm-text);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30), 0 0 20px rgba(40, 255, 150, .25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    font-size: 14px;
    line-height: 1.35;
    animation: pmFade 140ms ease backwards;
}
body.pm-ui .pm-tip::after {
    content: "";
    position: absolute;
    left: var(--pm-arrow, 50%);
    bottom: -7px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: rotate(45deg);
    background: var(--pm-inner);
    border-right: 1px solid var(--pm-hi-border);
    border-bottom: 1px solid var(--pm-hi-border);
}
body.pm-ui .pm-tip.is-below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
body.pm-ui .pm-tip[hidden] { display: none; }
body.pm-ui .pm-tip strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 800; }
body.pm-ui .pm-tip__row { color: var(--pm-muted); font-weight: 600; overflow-wrap: anywhere; }
body.pm-ui .pm-tip__row:first-child { color: var(--pm-text); font-weight: 750; }

/* ---------- mix ring: a thick glossy ring with a rim, a halo and a lit centre ---------- */
body.pm-ui .pm-mix__body { padding: 4px 18px 0; transition: opacity var(--pm-t) ease; }
body.pm-ui .pm-donut { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 26px; }
body.pm-ui .pm-donut__ring { position: relative; width: min(196px, 56%); min-width: 150px; aspect-ratio: 1; flex: 0 0 auto; }
body.pm-ui .pm-donut__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 16px rgba(24, 222, 157, .38)) drop-shadow(0 8px 14px rgba(0, 0, 0, .30)); }
body.pm-ui .pm-donut__track { stroke: rgba(255, 255, 255, .07); }
body.pm-ui .pm-donut__rim-out { stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
body.pm-ui .pm-donut__rim-in { stroke: rgba(0, 0, 0, .42); stroke-width: 3; }
html[data-moyli-theme="light"] body.pm-ui .pm-donut__track,
body.pm-ui.moyli-theme-light .pm-donut__track { stroke: rgba(12, 80, 62, .08); }
html[data-moyli-theme="light"] body.pm-ui .pm-donut__rim-in,
body.pm-ui.moyli-theme-light .pm-donut__rim-in { stroke: rgba(12, 80, 62, .30); }
body.pm-ui .pm-donut__seg { transition: opacity var(--pm-t-fast) ease, stroke-width var(--pm-t-fast) ease; cursor: pointer; outline: none; }
body.pm-ui .pm-donut.has-focus .pm-donut__seg:not(.is-on),
body.pm-ui .pm-mix__body.has-focus .pm-donut__seg:not(.is-on) { opacity: .45; }
body.pm-ui .pm-mix__body.has-focus .pm-donut__seg.is-on { stroke-width: 38; }
@keyframes pmRing { from { stroke-dasharray: 0 100; } }
body.pm-ui .pm-donut__ring.is-animating .pm-donut__seg { animation: pmRing 800ms var(--pm-ease) backwards; animation-delay: calc(var(--pm-i, 0) * 140ms + 120ms); }
body.pm-ui .pm-donut__center {
    position: absolute;
    inset: 20%;
    display: grid;
    place-content: center;
    gap: 2px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(60, 220, 160, .26), var(--pm-inner) 72%);
    border: 1px solid var(--pm-stroke);
    box-shadow: inset 0 0 20px rgba(30, 255, 150, .22), inset 0 2px 0 rgba(255, 255, 255, .22), 0 4px 16px rgba(0, 0, 0, .28);
    text-align: center;
    padding: 4px;
    overflow: hidden;
}
html[data-moyli-theme="light"] body.pm-ui .pm-donut__center,
body.pm-ui.moyli-theme-light .pm-donut__center { background: radial-gradient(circle at 50% 30%, rgba(60, 220, 160, .18), #ffffff 72%); box-shadow: inset 0 0 18px rgba(30, 200, 140, .18), inset 0 2px 0 #fff, 0 4px 14px rgba(12, 80, 62, .16); }
body.pm-ui .pm-donut__center strong { color: var(--pm-text); font-size: clamp(15px, 1vw + 9px, 22px); font-weight: 850; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
body.pm-ui .pm-donut__center span { color: var(--pm-muted); font-size: 14px; font-weight: 700; }
body.pm-ui .pm-donut__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 150px; flex: 1 1 160px; max-width: 280px; }
body.pm-ui .pm-donut__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    cursor: default;
    transition: background var(--pm-t-fast) ease, border-color var(--pm-t-fast) ease;
}
body.pm-ui .pm-donut__row.is-on,
body.pm-ui .pm-donut__row:focus-visible { background: var(--pm-soft); border-color: var(--pm-hair); }
body.pm-ui .pm-donut__row i { width: 11px; height: 11px; align-self: center; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
body.pm-ui .pm-donut__name { color: var(--pm-text); font-weight: 650; overflow-wrap: normal; }
body.pm-ui .pm-donut__row b { color: var(--pm-text); font-weight: 850; }
body.pm-ui .pm-donut__row small { grid-column: 2 / -1; color: var(--pm-muted); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
body.pm-ui .pm-donut__note { margin-top: 12px; text-align: center; color: var(--pm-muted); font-size: 14px; overflow-wrap: anywhere; }

/* ---------- quick actions + today's payments: two glass bars with a glowing icon tile ---------- */
body.pm-ui .dashboard-v62__control-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; flex: none; }
body.pm-ui .dashboard-v62-actions,
body.pm-ui .dashboard-v62-payments { display: flex !important; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding: 16px 20px; min-height: 0 !important; }
body.pm-ui .pm-tile {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(47, 244, 148, .18);
    color: var(--pm-up);
    box-shadow: 0 0 18px rgba(40, 255, 150, .32), inset 0 0 0 1px rgba(120, 255, 200, .40), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html[data-moyli-theme="light"] body.pm-ui .pm-tile,
body.pm-ui.moyli-theme-light .pm-tile { background: rgba(8, 160, 90, .12); box-shadow: 0 0 14px rgba(30, 200, 140, .25), inset 0 0 0 1px rgba(20, 170, 110, .30), inset 0 1px 0 #fff; }
body.pm-ui .pm-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.pm-ui .dashboard-v62-section-title { position: relative; z-index: 1; display: grid; gap: 3px; flex: 0 0 auto; min-width: 170px; margin: 0; }
body.pm-ui .dashboard-v62-section-title strong { color: var(--pm-text); font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
body.pm-ui .dashboard-v62-section-title span { color: var(--pm-muted); font-size: 14px; }
body.pm-ui .dashboard-v62-actions__buttons { position: relative; z-index: 1; flex: 1 1 440px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
body.pm-ui .dashboard-v62-actions__buttons button {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--pm-stroke);
    border-radius: 16px;
    background: var(--pm-field);
    color: var(--pm-text) !important;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    box-shadow: var(--pm-shadow);
    cursor: pointer;
    transition: background var(--pm-t-fast) ease, box-shadow var(--pm-t-fast) ease, border-color var(--pm-t-fast) ease, transform var(--pm-t-fast) ease;
}
body.pm-ui .dashboard-v62-actions__buttons button svg { width: 19px; height: 19px; flex: 0 0 19px; }
body.pm-ui .dashboard-v62-actions__buttons button:hover { border-color: rgba(78, 255, 164, .70); box-shadow: 0 0 20px rgba(14, 223, 137, .34), var(--pm-shadow); }
body.pm-ui .dashboard-v62-actions__buttons button:active { transform: scale(.98); }
body.pm-ui .dashboard-v62-actions__buttons button:first-child {
    color: var(--pm-on-primary) !important;
    border-color: rgba(205, 255, 225, .85) !important;
    background: var(--pm-grad-primary) !important;      /* the legacy Light rule paints this button dark green */
    box-shadow: var(--pm-glow-primary) !important;
}
body.pm-ui .dashboard-v62-payments__grid { position: relative; z-index: 1; flex: 1 1 440px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
body.pm-ui .dashboard-v62-payments__grid > div {
    min-height: 56px;
    padding: 10px 13px !important;
    overflow: visible !important;
    border: 1px solid var(--pm-hair);
    border-radius: 14px;
    background: var(--pm-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
body.pm-ui .dashboard-v62-payments__grid span { color: var(--pm-muted); font-size: 14px; font-weight: 650; }
body.pm-ui .dashboard-v62-payments__grid strong { color: var(--pm-text); font-size: 16px; font-weight: 800; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ---------- lower row: attention | latest operations | dynamics ---------- */
body.pm-ui .pm-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .92fr); gap: 16px; }
body.pm-ui .pm-lower-grid > * { min-height: 0 !important; grid-column: auto; grid-row: auto; }
body.pm-ui .dashboard-v62-attention__list,
body.pm-ui .dashboard-v62-recent__list { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 18px; overflow: visible; flex: none; }
body.pm-ui .dashboard-v62-attention-item,
body.pm-ui .dashboard-v62-operation {
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pm-hair);
    border-radius: 15px;
    background: var(--pm-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    color: var(--pm-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--pm-t-fast) ease, box-shadow var(--pm-t-fast) ease, background var(--pm-t-fast) ease;
}
body.pm-ui .dashboard-v62-attention-item { grid-template-columns: 38px minmax(0, 1fr) auto auto; }
body.pm-ui .dashboard-v62-attention-item::after { content: "\203A"; color: var(--pm-muted); font-size: 24px; line-height: 1; }
/* severity: amber (check) and red (urgent) rows are tinted like the reference's coloured rows */
body.pm-ui .dashboard-v62-attention-item { background: rgba(255, 192, 90, .12); border-color: rgba(255, 200, 110, .34); }
body.pm-ui .dashboard-v62-attention-item.is-danger { background: rgba(255, 90, 100, .13); border-color: rgba(255, 120, 130, .40); }
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-attention-item,
body.pm-ui.moyli-theme-light .dashboard-v62-attention-item { background: rgba(255, 243, 220, .85); border-color: rgba(138, 90, 0, .26); }
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-attention-item.is-danger,
body.pm-ui.moyli-theme-light .dashboard-v62-attention-item.is-danger { background: rgba(255, 232, 234, .88); border-color: rgba(185, 34, 47, .30); }
body.pm-ui .dashboard-v62-attention-item:hover,
body.pm-ui .dashboard-v62-operation:hover { border-color: rgba(78, 255, 164, .60); box-shadow: 0 0 18px rgba(14, 223, 137, .22), inset 0 1px 0 rgba(255, 255, 255, .10); }
body.pm-ui .dashboard-v62-attention-item__icon,
body.pm-ui .dashboard-v62-operation__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; font-weight: 900; }
body.pm-ui .dashboard-v62-attention-item__icon { background: rgba(0, 10, 8, .42); color: #ffc05a !important; box-shadow: 0 0 12px rgba(255, 180, 70, .28), inset 0 0 0 1px rgba(255, 200, 110, .50); }
body.pm-ui .dashboard-v62-attention-item.is-danger .dashboard-v62-attention-item__icon { background: rgba(0, 10, 8, .42); color: var(--pm-down) !important; box-shadow: 0 0 12px rgba(255, 90, 100, .30), inset 0 0 0 1px rgba(255, 130, 140, .52); }
body.pm-ui .dashboard-v62-operation__icon { background: rgba(47, 244, 148, .18); color: var(--pm-up) !important; box-shadow: 0 0 12px rgba(40, 255, 150, .22), inset 0 0 0 1px rgba(120, 255, 200, .30); }
body.pm-ui .dashboard-v62-operation.is-out .dashboard-v62-operation__icon { background: rgba(255, 113, 124, .18); color: var(--pm-down) !important; box-shadow: 0 0 12px rgba(255, 90, 100, .25), inset 0 0 0 1px rgba(255, 130, 140, .34); }
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-attention-item__icon,
body.pm-ui.moyli-theme-light .dashboard-v62-attention-item__icon { background: #ffe9bf; color: #7a4d00 !important; box-shadow: inset 0 0 0 1px rgba(138, 90, 0, .25); }
html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-attention-item.is-danger .dashboard-v62-attention-item__icon,
body.pm-ui.moyli-theme-light .dashboard-v62-attention-item.is-danger .dashboard-v62-attention-item__icon { background: #ffd9dd; box-shadow: inset 0 0 0 1px rgba(185, 34, 47, .28); }
body.pm-ui .dashboard-v62-attention-item__copy,
body.pm-ui .dashboard-v62-operation__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.pm-ui .dashboard-v62-attention-item__copy strong,
body.pm-ui .dashboard-v62-operation__copy strong { color: var(--pm-text); font-size: 15px; font-weight: 800; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.pm-ui .dashboard-v62-attention-item__copy span,
body.pm-ui .dashboard-v62-operation__copy span,
body.pm-ui .dashboard-v62-attention-item > em { color: var(--pm-muted); font-size: 14px; font-style: normal; font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.pm-ui .dashboard-v62-operation__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
body.pm-ui .dashboard-v62-operation__amount strong { color: var(--pm-up) !important; font-size: 15px; font-weight: 850; white-space: normal; overflow-wrap: anywhere; }
body.pm-ui .dashboard-v62-operation.is-out .dashboard-v62-operation__amount strong { color: var(--pm-down) !important; }
body.pm-ui .dashboard-v62-operation__amount span { color: var(--pm-muted); font-size: 14px; font-weight: 600; }

/* ---------- dynamics: real growth, two real rows, the real daily sales as glowing bars ---------- */
body.pm-ui .pm-dyn__headline { position: relative; z-index: 1; display: grid; gap: 2px; padding: 0 18px; }
body.pm-ui .pm-dyn__headline strong { color: var(--pm-muted); font-size: clamp(34px, 2vw + 22px, 48px); font-weight: 850; letter-spacing: -.04em; line-height: 1.15; }
body.pm-ui .pm-dyn__headline strong.is-up { color: var(--pm-up); text-shadow: 0 0 24px rgba(90, 255, 172, .40); }
body.pm-ui .pm-dyn__headline strong.is-down { color: var(--pm-down); }
html[data-moyli-theme="light"] body.pm-ui .pm-dyn__headline strong.is-up,
body.pm-ui.moyli-theme-light .pm-dyn__headline strong.is-up { text-shadow: none; }
body.pm-ui .pm-dyn__headline span { color: var(--pm-muted); font-size: 15px; font-weight: 600; }
body.pm-ui .pm-dyn__rows { position: relative; z-index: 1; list-style: none; margin: 12px 0 0; padding: 0 18px; display: grid; gap: 8px; }
body.pm-ui .pm-dyn__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; padding: 9px 12px; border: 1px solid var(--pm-hair); border-radius: 13px; background: var(--pm-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
body.pm-ui .pm-dyn__rows span { color: var(--pm-muted); font-size: 14px; font-weight: 650; }
body.pm-ui .pm-dyn__rows b { color: var(--pm-text); font-size: 15px; font-weight: 800; overflow-wrap: anywhere; text-align: right; }
body.pm-ui .pm-dyn__rows em { min-width: 62px; text-align: right; color: var(--pm-muted); font-size: 14px; font-style: normal; font-weight: 800; }
body.pm-ui .pm-dyn__rows em.is-up { color: var(--pm-up); }
body.pm-ui .pm-dyn__rows em.is-down { color: var(--pm-down); }
body.pm-ui .pm-dyn__chart { position: relative; height: 150px; margin-top: 10px; padding: 0 12px; transition: opacity var(--pm-t) ease; }
body.pm-ui .pm-bars__svg { display: block; width: 100%; height: 100%; overflow: visible; }
body.pm-ui .pm-bars__stop-a { stop-color: #8affc8; }
body.pm-ui .pm-bars__stop-b { stop-color: #08b866; }
html[data-moyli-theme="light"] body.pm-ui .pm-bars__stop-a,
body.pm-ui.moyli-theme-light .pm-bars__stop-a { stop-color: #4eeab0; }
html[data-moyli-theme="light"] body.pm-ui .pm-bars__stop-b,
body.pm-ui.moyli-theme-light .pm-bars__stop-b { stop-color: #0b9a60; }
body.pm-ui .pm-bars__base { stroke: var(--pm-stroke); stroke-width: 1; }
body.pm-ui .pm-bars__bar { filter: drop-shadow(0 0 5px rgba(40, 255, 150, .50)); transition: filter var(--pm-t-fast) ease; }
html[data-moyli-theme="light"] body.pm-ui .pm-bars__bar,
body.pm-ui.moyli-theme-light .pm-bars__bar { filter: drop-shadow(0 0 4px rgba(20, 190, 120, .35)); }
body.pm-ui .pm-bars__bar.is-on { filter: brightness(1.25) drop-shadow(0 0 9px rgba(70, 255, 170, .85)); }
@keyframes pmGrow { from { transform: scaleY(0); } }
body.pm-ui .pm-bars__svg.is-animating .pm-bars__bar { transform-box: fill-box; transform-origin: 50% 100%; animation: pmGrow 520ms var(--pm-ease) backwards; animation-delay: calc(var(--pm-i, 0) * 16ms); }

/* ---------- responsive: by the width of the Dashboard itself ---------- */
@container pmdash (max-width: 1060px) {
    body.pm-ui .dashboard-v62__kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body.pm-ui .dashboard-v62__kpis > * { grid-column: span 2; }
    body.pm-ui .dashboard-v62__kpis > :nth-child(4),
    body.pm-ui .dashboard-v62__kpis > :nth-child(5) { grid-column: span 3; }
    body.pm-ui .pm-body-grid,
    body.pm-ui .dashboard-v62__control-row { grid-template-columns: minmax(0, 1fr); }
    body.pm-ui .pm-lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.pm-ui .pm-lower-grid > .pm-dynamics { grid-column: 1 / -1; }
}
/* phones / narrow: a compact Dashboard (the same blocks and actions, tighter spacing; text >= 14 px, touch targets >= 44 px) */
@container pmdash (max-width: 640px) {
    body.pm-ui .pm-dash { gap: 12px; }
    body.pm-ui .dashboard-v62__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.pm-ui .dashboard-v62__kpis > *,
    body.pm-ui .dashboard-v62__kpis > :nth-child(4),
    body.pm-ui .dashboard-v62__kpis > :nth-child(5) { grid-column: auto; }
    body.pm-ui .dashboard-v62__kpis > :nth-child(5) { grid-column: 1 / -1; }
    body.pm-ui .dashboard-v62-kpi { min-height: 124px; padding: 13px 13px 12px; gap: 9px; }
    body.pm-ui .dashboard-v62-kpi__icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
    body.pm-ui .dashboard-v62-kpi__icon svg { width: 20px; height: 20px; }
    body.pm-ui .pm-spark { top: 12px; right: 12px; width: min(42%, 80px); height: 34px; }
    /* the wide "Oylik savdo" card: icon | value | sparkline on one row */
    body.pm-ui .dashboard-v62-kpi:nth-child(5) { flex-direction: row; align-items: center; min-height: 0; gap: 12px; }
    body.pm-ui .dashboard-v62-kpi:nth-child(5) .dashboard-v62-kpi__copy { flex: 1 1 auto; width: auto; margin-top: 0; }
    body.pm-ui .dashboard-v62-kpi:nth-child(5) .pm-spark { position: static; flex: 0 0 auto; width: 70px; height: 34px; }
    body.pm-ui .pm-lower-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body.pm-ui .pm-body-grid { gap: 12px; }
    body.pm-ui .dashboard-v62__control-row { gap: 12px; }
    body.pm-ui .dashboard-v62-actions,
    body.pm-ui .dashboard-v62-payments { padding: 14px; gap: 12px; }
    body.pm-ui .pm-tile { display: none; }
    body.pm-ui .dashboard-v62-section-title { min-width: 0; flex: 1 1 100%; }
    body.pm-ui .dashboard-v62-section-title span { display: none; }
    body.pm-ui .dashboard-v62-actions__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex-basis: 100%; }
    body.pm-ui .dashboard-v62-actions__buttons button { min-height: 52px; font-size: 15px; padding: 6px 8px; gap: 7px; text-align: center; }
    body.pm-ui .dashboard-v62-payments__grid { gap: 8px; flex-basis: 100%; }
    body.pm-ui .dashboard-v62-payments__grid > div { min-height: 50px; padding: 8px 12px !important; }
    body.pm-ui .dashboard-v62-panel { padding-bottom: 14px; }
    body.pm-ui .dashboard-v62-panel__head { padding: 14px 14px 8px; }
    body.pm-ui .dashboard-v62-panel__head button { min-height: 44px; }
    body.pm-ui .dashboard-v62-trend .dashboard-v62-panel__head { flex-wrap: nowrap; gap: 10px; }
    body.pm-ui .dashboard-v62-trend .dashboard-v62-panel__head > div { min-width: 0; flex: 1 1 auto; }
    body.pm-ui .dashboard-v62-trend .dashboard-v62-panel__head button { flex: 0 0 auto; }
    body.pm-ui .pm-mix .dashboard-v62-panel__head p,
    body.pm-ui .pm-dynamics .dashboard-v62-panel__head p,
    body.pm-ui .dashboard-v62-attention .dashboard-v62-panel__head p,
    body.pm-ui .dashboard-v62-recent .dashboard-v62-panel__head p { display: none; }
    body.pm-ui .pm-trend__top,
    body.pm-ui .pm-dyn__headline,
    body.pm-ui .pm-dyn__rows,
    body.pm-ui .pm-mix__body,
    body.pm-ui .dashboard-v62-attention__list,
    body.pm-ui .dashboard-v62-recent__list { padding-left: 14px; padding-right: 14px; }
    body.pm-ui .pm-trend__top { gap: 8px 12px; }
    body.pm-ui .pm-seg { width: 100%; }
    body.pm-ui .pm-seg button { min-height: 44px; }
    body.pm-ui .dashboard-v62-chart { height: 190px !important; margin-top: 2px; }
    body.pm-ui .pm-donut { flex-direction: column; gap: 10px; }
    body.pm-ui .pm-donut__ring { width: min(168px, 56%); min-width: 130px; }
    body.pm-ui .pm-donut__legend { gap: 6px; width: 100%; max-width: none; flex: none; }
    body.pm-ui .pm-donut__row { padding: 6px 10px; }
    body.pm-ui .pm-donut__note { margin-top: 8px; }
    body.pm-ui .dashboard-v62-attention__list,
    body.pm-ui .dashboard-v62-recent__list { gap: 8px; }
    body.pm-ui .dashboard-v62-attention-item,
    body.pm-ui .dashboard-v62-operation { min-height: 54px; padding: 8px 10px; }
    body.pm-ui .pm-dyn__headline strong { font-size: 34px; }
    body.pm-ui .pm-dyn__rows { margin-top: 8px; gap: 6px; }
    body.pm-ui .pm-dyn__rows li { padding: 7px 12px; }
    body.pm-ui .pm-dyn__chart { height: 124px; margin-top: 6px; }
}
@container pmdash (max-width: 400px) {
    body.pm-ui .dashboard-v62__kpis { gap: 8px; }
    body.pm-ui .dashboard-v62__kpis .dashboard-v62-kpi .dashboard-v62-kpi__copy strong { font-size: clamp(17px, 9.6cqw, 22px); }
    body.pm-ui .pm-dyn__rows li { grid-template-columns: minmax(0, 1fr) auto; }
    body.pm-ui .pm-dyn__rows em { grid-column: 2; }
}

/* phones: no blur behind every card (cheaper to paint), slightly more opaque glass instead */
@media (max-width: 800px) {
    body.pm-ui .dashboard-v62-kpi,
    body.pm-ui .dashboard-v62-panel,
    body.pm-ui .dashboard-v62-actions,
    body.pm-ui .dashboard-v62-payments { backdrop-filter: none; -webkit-backdrop-filter: none; }
    html[data-moyli-theme="dark"] body.pm-ui .dashboard-v62-kpi,
    html[data-moyli-theme="dark"] body.pm-ui .dashboard-v62-panel,
    html[data-moyli-theme="dark"] body.pm-ui .dashboard-v62-actions,
    html[data-moyli-theme="dark"] body.pm-ui .dashboard-v62-payments,
    body.pm-ui.moyli-theme-dark .dashboard-v62-kpi,
    body.pm-ui.moyli-theme-dark .dashboard-v62-panel,
    body.pm-ui.moyli-theme-dark .dashboard-v62-actions,
    body.pm-ui.moyli-theme-dark .dashboard-v62-payments { background: var(--pm-tint), rgba(8, 48, 42, .86); }
    html[data-moyli-theme="dark"] body.pm-ui .dashboard-v62-kpi:first-child,
    body.pm-ui.moyli-theme-dark .dashboard-v62-kpi:first-child { background: var(--pm-tint), rgba(10, 92, 66, .80); }
    html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-kpi,
    html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-panel,
    html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-actions,
    html[data-moyli-theme="light"] body.pm-ui .dashboard-v62-payments,
    body.pm-ui.moyli-theme-light .dashboard-v62-kpi,
    body.pm-ui.moyli-theme-light .dashboard-v62-panel,
    body.pm-ui.moyli-theme-light .dashboard-v62-actions,
    body.pm-ui.moyli-theme-light .dashboard-v62-payments { background: var(--pm-tint), rgba(255, 255, 255, .74); }
}

/* reduced motion: final state at once (all animations above only start FROM a hidden state, so removing them leaves the finished picture) */
@media (prefers-reduced-motion: reduce) {
    body.pm-ui .dashboard-v62-kpi:hover { transform: none; }
}