/* =========================================================
   MOYLI — PREMIUM FLOATING UI · SHELL (v1.0.24 ui2)
   Visual layer of the SHARED frame only: page background (emerald waves), app frame, sidebar, top bar, bottom navigation, tokens.
   - Every rule lives under <body class="pm-ui">. Remove that class and the previous look returns untouched.
   - Nothing here changes structure, routing, permissions, the collapsed sidebar's own sizes or any module's content.
   - Loaded after style.css / design-system.css / mobile.css; their !important rules are beaten by specificity (body.pm-ui ...) + order.
   - Motion: 180-350 ms, transform / opacity only, no infinite animation; prefers-reduced-motion switches everything off (bottom of file).
   - Cost: the waves are ONE static vector image on the fixed background layer (painted once); blur is used only on the sidebar and the big panels.
   Primary reference: Factory_Control_Architecture_v1 / "Макет диайн" / 00_ORIGINAL_Dashboard_Dark.png (+ 01..11 for layout, Light and phones).
   ========================================================= */

/* ---------- tokens ---------- */
body.pm-ui {
    --pm-ease: cubic-bezier(.22, .7, .2, 1);
    --pm-t-fast: 180ms;
    --pm-t: 260ms;
    --pm-r-xl: 26px;
    --pm-r-lg: 22px;
    --pm-r-md: 14px;
    /* bright emerald fill + DARK text (white on neon green fails WCAG; dark #032a1c on every stop is >= 7:1) */
    --pm-grad-primary: linear-gradient(110deg, #17d37c 0%, #3aeb95 55%, #8dff9d 100%);
    --pm-on-primary: #032a1c;
    --pm-glow-primary: 0 0 20px rgba(40, 255, 150, .50), inset 0 0 0 1px rgba(210, 255, 225, .65), inset 0 1px 0 rgba(255, 255, 255, .50);
    --pm-app-pad: 18px;
    --pm-frame-inset: 8px;
}

/* DARK — deep green-black, glowing emerald waves, neon outlines (reference: 00_ORIGINAL_Dashboard_Dark.png) */
html[data-moyli-theme="dark"] body.pm-ui,
body.pm-ui.moyli-theme-dark {
    --pm-canvas: #022017;
    --pm-bg: linear-gradient(135deg, #001d1a 0%, #00302a 48%, #00241f 100%);
    --pm-waves: url("assets/premium/pm-waves-dark.svg");
    --pm-panel: rgba(8, 56, 47, .62);
    --pm-inner: rgba(5, 40, 35, .90);
    --pm-soft: rgba(24, 110, 86, .26);
    --pm-field: rgba(8, 62, 52, .72);
    --pm-stroke: rgba(110, 255, 195, .34);
    --pm-hair: rgba(130, 232, 199, .14);
    --pm-text: #f4fffd;
    --pm-muted: #a8cbc6;
    --pm-up: #5affac;
    --pm-down: #ff8a93;
    /* volume: outer drop + soft emerald halo + top rim light + neon edge + inner floor shade */
    --pm-shadow: 0 20px 40px rgba(0, 12, 10, .38), 0 0 26px rgba(20, 255, 150, .12), inset 0 1px 0 rgba(210, 255, 235, .30), inset 0 0 0 1px rgba(90, 255, 180, .12), inset 0 -22px 34px rgba(0, 0, 0, .20), inset 0 26px 40px rgba(60, 255, 170, .05);
    --pm-shadow-hover: 0 24px 46px rgba(0, 12, 10, .44), 0 0 34px rgba(30, 255, 160, .30), inset 0 1px 0 rgba(220, 255, 240, .38), inset 0 0 0 1px rgba(110, 255, 195, .30), inset 0 -22px 34px rgba(0, 0, 0, .18);
    --pm-shadow-hi: 0 22px 44px rgba(0, 14, 10, .44), 0 0 0 1px rgba(70, 255, 160, .40), 0 0 30px rgba(40, 255, 140, .55), 0 0 74px rgba(40, 255, 140, .22), inset 0 1px 0 rgba(230, 255, 245, .45), inset 0 0 26px rgba(50, 255, 150, .22);
    --pm-hi-fill: rgba(10, 100, 70, .66);
    --pm-hi-border: rgba(70, 255, 160, .92);
    --pm-gloss: linear-gradient(150deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 38%);
    --pm-tint: linear-gradient(150deg, rgba(40, 210, 150, .17), rgba(0, 0, 0, 0) 62%);
    --pm-line: #52ff9e;
    --pm-line-glow: drop-shadow(0 0 5px rgba(40, 255, 150, .85)) drop-shadow(0 0 14px rgba(20, 255, 140, .55));
    --pm-area-a: .62;
    --pm-seg-on-text: #032f21;
    --pm-frame-line: rgba(80, 255, 175, .62);
    --pm-frame-fill: linear-gradient(160deg, rgba(2, 25, 19, .90), rgba(0, 12, 9, .94));
    --pm-frame-glow: 0 0 0 1px rgba(30, 255, 150, .10), 0 0 28px rgba(30, 255, 150, .35), 0 0 80px rgba(20, 255, 140, .16), inset 0 0 44px rgba(30, 255, 150, .10), inset 0 1px 0 rgba(255, 255, 255, .20);
}

/* LIGHT — the SAME system on a matte pale-mint canvas: frosted glass, soft depth, emerald accents (reference: 01_Dashboard_Light.png) */
html[data-moyli-theme="light"] body.pm-ui,
body.pm-ui.moyli-theme-light {
    --pm-canvas: #d6e9e2;
    --pm-bg: linear-gradient(145deg, #e3f1ec, #d4e9e1 50%, #cde6de);
    --pm-waves: url("assets/premium/pm-waves-light.svg");
    --pm-panel: rgba(255, 255, 255, .58);
    --pm-inner: rgba(250, 254, 253, .94);
    --pm-soft: rgba(220, 244, 234, .78);
    --pm-field: rgba(255, 255, 255, .72);
    --pm-stroke: rgba(255, 255, 255, .88);
    --pm-hair: rgba(30, 130, 95, .16);
    --pm-text: #0c2930;
    --pm-muted: #3f5f57;
    --pm-up: #08733a;
    --pm-down: #b9222f;
    --pm-shadow: 0 16px 36px rgba(12, 80, 62, .16), 0 2px 6px rgba(12, 80, 62, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(30, 170, 120, .26), inset 0 -20px 32px rgba(40, 170, 120, .07);
    --pm-shadow-hover: 0 22px 44px rgba(12, 80, 62, .22), 0 0 26px rgba(30, 200, 140, .22), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(30, 190, 130, .44), inset 0 -20px 32px rgba(40, 170, 120, .07);
    --pm-shadow-hi: 0 22px 44px rgba(12, 80, 62, .24), 0 0 0 1px rgba(20, 190, 120, .55), 0 0 28px rgba(30, 220, 140, .45), 0 0 60px rgba(30, 220, 140, .18), inset 0 1px 0 #fff, inset 0 0 24px rgba(40, 220, 150, .16);
    --pm-hi-fill: rgba(236, 255, 248, .86);
    --pm-hi-border: rgba(20, 190, 120, .85);
    --pm-gloss: linear-gradient(150deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, 0) 36%);
    --pm-tint: linear-gradient(150deg, rgba(61, 221, 151, .10), rgba(0, 0, 0, 0) 62%);
    --pm-line: #0fb96f;
    --pm-line-glow: drop-shadow(0 0 4px rgba(17, 200, 120, .40)) drop-shadow(0 0 10px rgba(17, 200, 120, .25));
    --pm-area-a: .46;
    --pm-seg-on-text: #04301f;
    --pm-frame-line: rgba(30, 190, 130, .55);
    --pm-frame-fill: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16));
    --pm-frame-glow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 26px rgba(30, 200, 140, .26), 0 0 70px rgba(30, 200, 140, .12), inset 0 0 40px rgba(255, 255, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* the sidebar is a darker emerald glass panel in BOTH themes (as in the references) */
body.pm-ui {
    --pm-side: linear-gradient(180deg, rgba(2, 46, 39, .84), rgba(0, 26, 23, .92));
    --pm-side-stroke: rgba(110, 255, 195, .28);
    --pm-side-text: #e2fbf1;
    --pm-side-muted: #9fd1c0;
}

/* ---------- page background: opaque canvas colour + emerald waves + base gradient (one fixed layer, painted once) ---------- */
body.pm-ui { background: var(--pm-canvas) !important; color: var(--pm-text); }
body.pm-ui .moyli-background-layer {
    background-color: var(--pm-canvas) !important;
    background-image: var(--pm-waves), var(--pm-bg) !important;
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: cover, 100% 100%;
}
/* the dim film of the photo/video background feature (not selectable any more: only Light and Dark exist) must not tint the premium canvas */
body.pm-ui.moyli-theme-dark .moyli-background-layer > span,
body.pm-ui.moyli-theme-light .moyli-background-layer > span { display: none; }

body.pm-ui .app { background: transparent !important; position: relative; isolation: isolate; }
body.pm-ui .main { background: transparent !important; position: relative; }

/* the app frame: a thin glowing outline around the whole app, drawn behind the content (desktop / tablet) */
@media (min-width: 801px) {
    body.pm-ui .app { padding: var(--pm-app-pad); }
    /* the frame padding is part of the window: every module page is exactly one window tall (.main, style.css), so without this the app is 2 x padding taller than the window
       (a window scrollbar next to the page's own, the bottom of each page and of the frame below the fold). The bottom gap is 12 px, the same as the sidebar's (height below),
       so the sidebar, the page and the padding add up to exactly one window. The Dashboard (height:auto, specificity above this rule) keeps its own height and padding. */
    body.pm-ui .app:not(:has(.dashboard-v62:not([hidden]))) { padding-bottom: 12px; }
    body.pm-ui .main { height: calc(100vh / var(--ds-zoom, 1) - var(--pm-app-pad) - 12px); }
    body.pm-ui .main:has(#settingsPage:not([hidden])) { height: calc(100vh / var(--ds-zoom, 1) - var(--pm-app-pad) - 12px) !important; min-height: calc(100vh / var(--ds-zoom, 1) - var(--pm-app-pad) - 12px) !important; }
    body.pm-ui .app::before {
        content: "";
        position: absolute;
        inset: var(--pm-frame-inset);
        z-index: -1;
        border-radius: 30px;
        border: 1.5px solid var(--pm-frame-line);
        background: var(--pm-frame-fill);
        box-shadow: var(--pm-frame-glow);
        pointer-events: none;
    }
}
@media (min-width: 801px) and (max-width: 1100px) {
    body.pm-ui { --pm-app-pad: 12px; --pm-frame-inset: 5px; }
}

/* Dashboard / Profile rows: the legacy shell fixes the first row of .main at 56 px (a one-line header); the premium header is taller */
@media (min-width: 801px) {
    body.pm-ui .main:has(.dashboard-v62:not([hidden])) { grid-template-rows: auto auto auto !important; }
    body.pm-ui .main:has(#profilePage:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) !important; }
}

/* ---------- sidebar: floating glass inside the frame ---------- */
body.pm-ui .sidebar {
    background: var(--pm-side) !important;
    border: 1px solid var(--pm-side-stroke) !important;
    box-shadow: 0 18px 44px rgba(0, 16, 12, .45), 0 0 0 1px rgba(0, 0, 0, .22), 0 0 24px rgba(30, 255, 150, .10), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 34px rgba(30, 255, 150, .06) !important;
    color: var(--pm-side-text);
}
@media (min-width: 801px) {
    body.pm-ui .sidebar {
        margin: 0;
        top: var(--pm-app-pad);
        height: calc(100vh / var(--ds-zoom, 1) - var(--pm-app-pad) - 12px);
        border-radius: 24px;
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }
}
/* the drawer (<= 800 px) stays an opaque surface: the app disables backdrop blur there on purpose */
@media (max-width: 800px) {
    body.pm-ui .sidebar { background: linear-gradient(180deg, #02302c, #001f1d) !important; }
}

/* brand — the real logo asset and the real wordmark; only the text colour is kept readable on the dark glass */
body.pm-ui .brand { border-bottom-color: rgba(123, 255, 216, .12) !important; }
body.pm-ui .brand-name, body.pm-ui .brand-text { color: #ffffff !important; }
body.pm-ui .brand-system { color: var(--pm-side-muted) !important; }

body.pm-ui .sidebar-date { color: var(--pm-side-muted) !important; }
body.pm-ui #mainSidebar .sidebar-time { color: #d4f3e6 !important; font-size: 22px !important; }
body.pm-ui .sidebar-controls { border-bottom-color: rgba(123, 255, 216, .12) !important; }

body.pm-ui .sidebar .icon-button,
body.pm-ui .sidebar .dashboard-language-button {
    color: var(--pm-side-text) !important;
    background: rgba(39, 224, 150, .10) !important;
    border: 1px solid rgba(123, 255, 216, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transition: background var(--pm-t-fast) ease, box-shadow var(--pm-t-fast) ease, border-color var(--pm-t-fast) ease;
}
body.pm-ui .sidebar .icon-button:hover,
body.pm-ui .sidebar .dashboard-language-button:hover {
    background: rgba(39, 224, 150, .18) !important;
    border-color: rgba(123, 255, 216, .46) !important;
    box-shadow: 0 0 16px rgba(14, 223, 137, .30), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* navigation */
body.pm-ui .main-menu .menu-item {
    color: var(--pm-side-text) !important;
    border-radius: 14px;
    border: 1px solid transparent !important;
    background: transparent !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: background var(--pm-t-fast) ease, box-shadow var(--pm-t-fast) ease, border-color var(--pm-t-fast) ease, color var(--pm-t-fast) ease;
}
/* tighter rows (the legacy 42 px icon tile made every row 64 px): expanded sidebar only — the collapsed one keeps its own sizes */
body.pm-ui .app:not(.sidebar-collapsed) .main-menu { gap: 4px; }
body.pm-ui .app:not(.sidebar-collapsed) .main-menu .menu-item { min-height: 44px; padding: 6px 12px; gap: 12px; }
body.pm-ui .app:not(.sidebar-collapsed) .main-menu .menu-item .menu-icon { width: 28px; height: 28px; flex: 0 0 28px; }
body.pm-ui .main-menu .menu-item:hover {
    background: rgba(38, 226, 138, .14) !important;
    border-color: rgba(123, 255, 216, .20) !important;
}
body.pm-ui .main-menu .menu-item.active {
    background: var(--pm-grad-primary) !important;
    border-color: rgba(205, 255, 225, .85) !important;
    color: var(--pm-on-primary) !important;
    font-weight: 750;
    box-shadow: var(--pm-glow-primary) !important;
}
body.pm-ui .main-menu .menu-item .menu-icon {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: currentColor !important;
}
body.pm-ui .main-menu .menu-item.active .menu-icon { color: var(--pm-on-primary) !important; background: transparent !important; box-shadow: none !important; }
body.pm-ui .main-menu .menu-item:focus-visible,
body.pm-ui .sidebar-user:focus-visible,
body.pm-ui .sidebar-support:focus-visible { outline: 2px solid #8dffd0; outline-offset: 2px; }

body.pm-ui .sidebar-support,
body.pm-ui .sidebar-user {
    color: var(--pm-side-text) !important;
    background: rgba(74, 238, 168, .07) !important;
    border: 1px solid rgba(123, 255, 216, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transition: background var(--pm-t-fast) ease, border-color var(--pm-t-fast) ease, box-shadow var(--pm-t-fast) ease;
}
body.pm-ui .sidebar-support:hover,
body.pm-ui .sidebar-user:hover {
    background: rgba(74, 238, 168, .13) !important;
    border-color: rgba(123, 255, 216, .36) !important;
    color: #ffffff !important;
}
body.pm-ui .sidebar-support__icon { color: #7cf0bd !important; background: transparent !important; box-shadow: none !important; }
body.pm-ui .sidebar-user .user-info strong { color: #ffffff !important; }
body.pm-ui .sidebar-user .user-info span { color: var(--pm-side-muted) !important; }
body.pm-ui .sidebar-user .user-arrow { color: var(--pm-side-muted) !important; }

/* display-currency switch inside the dark sidebar (it carries its own Light rules: keep it readable here) */
body.pm-ui .sidebar-currency .cur-seg { background: rgba(39, 224, 150, .08) !important; border-color: rgba(123, 255, 216, .22) !important; }
body.pm-ui .sidebar-currency .cur-seg button { color: var(--pm-side-text) !important; }
body.pm-ui .sidebar-currency .cur-seg button[aria-pressed="true"] { background: var(--pm-grad-primary) !important; color: var(--pm-on-primary) !important; }
body.pm-ui .sidebar-currency .cur-rate-host,
body.pm-ui .sidebar-currency .cur-rate-host * { color: var(--pm-side-muted) !important; }

/* ---------- top bar (Dashboard + Profile only: the app hides it elsewhere) ----------
   The shared page-header rule in style.css is !important and carries an id-level specificity (the #salesPage entry of its :is() list),
   so this block uses #mainApp + !important for exactly the properties that rule fixes (height, border, background, h1/p size). */
body.pm-ui #mainApp .topbar:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 12px 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 2px 0 18px !important;
    padding: 4px 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.pm-ui #mainApp .topbar:not([hidden]) h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pm-text) !important;
    font-size: clamp(26px, 1.4vw + 18px, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em;
    line-height: 1.12 !important;
}
body.pm-ui #mainApp .topbar:not([hidden]) p { display: block; margin: 6px 0 0 !important; padding: 0 !important; color: var(--pm-muted) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; }
body.pm-ui #dashboardTopbarHeading,
body.pm-ui #profileTopbarHeading { flex: 1 1 320px; min-width: 0; }
body.pm-ui #dashboardTopbarHeading:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
body.pm-ui .topbar-title { min-width: 0; }

/* mobile-only mini brand (the sidebar is a drawer there): the SAME logo asset and wordmark text */
body.pm-ui .topbar-brand { display: none; align-items: center; gap: 10px; min-width: 0; }
body.pm-ui .topbar-brand img { width: 34px; height: 34px; border-radius: 9px; display: block; }
body.pm-ui .topbar-brand__text { display: grid; line-height: 1.1; }
body.pm-ui .topbar-brand__text strong { color: var(--pm-text); font-size: 17px; font-weight: 800; letter-spacing: .02em; }
body.pm-ui .topbar-brand__text small { color: var(--pm-muted); font-size: 14px; font-weight: 700; letter-spacing: .04em; }

/* tools: theme switch, bell, profile */
body.pm-ui .topbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
body.pm-ui .topbar[hidden] .topbar-tools { display: none; }

body.pm-ui .pm-theme-toggle,
body.pm-ui .pm-icon-btn,
body.pm-ui .pm-profile-chip,
body.pm-ui .pm-btn {
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    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, color var(--pm-t-fast) ease;
}
body.pm-ui .pm-theme-toggle,
body.pm-ui .pm-icon-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    color: var(--pm-text);
    background: var(--pm-field);
    border: 1px solid var(--pm-stroke);
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--pm-shadow);
}
body.pm-ui .pm-icon-btn { position: relative; width: 44px; padding: 0; }
body.pm-ui .pm-theme-toggle svg,
body.pm-ui .pm-icon-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.pm-ui .pm-theme-toggle:hover,
body.pm-ui .pm-icon-btn:hover,
body.pm-ui .pm-profile-chip:hover { box-shadow: 0 0 20px rgba(14, 223, 137, .36), inset 0 1px 0 rgba(255, 255, 255, .12); border-color: rgba(78, 255, 164, .62); }
body.pm-ui .pm-theme-toggle:active,
body.pm-ui .pm-icon-btn:active,
body.pm-ui .pm-btn:active { transform: scale(.97); }
body.pm-ui .pm-theme-toggle:focus-visible,
body.pm-ui .pm-icon-btn:focus-visible,
body.pm-ui .pm-profile-chip:focus-visible,
body.pm-ui .pm-btn:focus-visible { outline: 2px solid var(--pm-line); outline-offset: 2px; }

/* the icon shows the mode a click switches TO (sun while Dark, moon while Light) */
html[data-moyli-theme="dark"] body.pm-ui .pm-theme-toggle__moon,
body.pm-ui.moyli-theme-dark .pm-theme-toggle__moon,
html[data-moyli-theme="light"] body.pm-ui .pm-theme-toggle__sun,
body.pm-ui.moyli-theme-light .pm-theme-toggle__sun { display: none; }

body.pm-ui .pm-icon-btn__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #d12a35;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--pm-field), 0 0 10px rgba(255, 80, 90, .6);
}

body.pm-ui .pm-profile-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 2px 6px 2px 2px;
    color: var(--pm-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    text-align: left;
}
body.pm-ui .pm-profile-chip__avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #12806a, #0a5c49);
    color: #ffffff;
    font-weight: 800;
    border: 2px solid rgba(160, 255, 210, .65);
    box-shadow: 0 0 14px rgba(40, 255, 150, .35);
}
body.pm-ui .pm-profile-chip__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.pm-ui .pm-profile-chip__info { display: grid; line-height: 1.2; min-width: 0; }
body.pm-ui .pm-profile-chip__info strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; color: var(--pm-text); }
body.pm-ui .pm-profile-chip__info small { color: var(--pm-muted); font-size: 14px; }
body.pm-ui .pm-theme-toggle__label, body.pm-ui .pm-btn b { font-weight: 700; }
/* (style.css paints every span / small / p of the header muted in Light with an id-level selector: the tool buttons use <b> so their text keeps its own colour) */
body.pm-ui .pm-profile-chip__avatar b { color: #ffffff; font-weight: 800; }

/* primary button (Yangi savdo): bright emerald, dark text */
body.pm-ui .pm-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 15px;
    border: 1px solid rgba(205, 255, 225, .85);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}
body.pm-ui .pm-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.pm-ui .pm-btn--primary, body.pm-ui .pm-btn--primary b { color: var(--pm-on-primary) !important; }
body.pm-ui .pm-btn--primary { background: var(--pm-grad-primary); box-shadow: var(--pm-glow-primary); }
body.pm-ui .pm-btn--primary:hover { box-shadow: 0 0 28px rgba(40, 255, 150, .70), inset 0 0 0 1px rgba(235, 255, 242, .85), inset 0 1px 0 rgba(255, 255, 255, .60); }

/* ---------- phones: top bar becomes [brand · tools] over [title · action]; bottom navigation takes the glass look ---------- */
@media (max-width: 800px) {
    body.pm-ui #mainApp .topbar:not([hidden]) { padding: 2px 0 0 !important; margin-bottom: 12px !important; gap: 10px 10px !important; }
    body.pm-ui .topbar-brand { display: flex; order: 1; flex: 1 1 auto; }
    body.pm-ui .topbar-tools { order: 2; margin-left: 0; gap: 8px; }
    body.pm-ui #dashboardTopbarHeading,
    body.pm-ui #profileTopbarHeading { order: 3; flex: 1 1 100%; }
    body.pm-ui #dashboardTopbarHeading:not([hidden]) { flex-direction: column; align-items: flex-start; gap: 10px; }
    body.pm-ui #mainApp .topbar:not([hidden]) h1 { font-size: 28px !important; }
    body.pm-ui .pm-profile-chip__info { display: none; }
    body.pm-ui .pm-profile-chip { padding: 0; }
}
@media (max-width: 360px) {
    body.pm-ui .pm-theme-toggle { width: 44px; padding: 0; }
    body.pm-ui .pm-theme-toggle__label { display: none; }
    body.pm-ui .topbar-brand__text small { display: none; }
}

@media (max-width: 800px) {
    body.pm-ui {
        --m-bar-bg: rgba(2, 38, 35, .92);
        --m-bar-border: rgba(123, 255, 216, .24);
    }
    body.pm-ui .m-nav {
        border-top: 1px solid var(--m-bar-border);
        box-shadow: 0 -10px 30px rgba(0, 24, 20, .30), 0 0 22px rgba(12, 250, 155, .12);
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }
    body.pm-ui .m-nav__item { color: var(--pm-side-muted); }
    body.pm-ui .m-nav__item.is-active { color: #7dffc4; }
    body.pm-ui .m-nav__item.is-active::before { background: #26f08e; box-shadow: 0 0 12px rgba(38, 240, 142, .8); }
}

/* ---------- reduced motion: no transitions, no animation, no lifting, anywhere in the premium layer ---------- */
@media (prefers-reduced-motion: reduce) {
    body.pm-ui *,
    body.pm-ui *::before,
    body.pm-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* v1.0.25 (№5): the branch switch in the sidebar */
body.pm-ui .sidebar-branch__label { color: var(--pm-side-muted) !important; }
body.pm-ui .sidebar-branch select { background: rgba(39, 224, 150, .08) !important; border-color: rgba(123, 255, 216, .22) !important; color: var(--pm-side-text) !important; }
body.pm-ui .sidebar-branch select option { color: #0b2418; background: #ffffff; }