/* Profile Admin + staff console: tokens, Manrope, scrollbars — without marketing site.css weight. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #111118;
    --muted: #8d8d9a;
    --muted-2: #b4b4c0;
    --line: #ececf3;
    --paper: #f6f4ff;
    --white: #ffffff;
    --accent: #7c6cff;
    --accent-deep: #6a5af8;
    --accent-soft: #efeaff;
    --accent-mid: #c8bcff;
    --glow: #d8ccff;
    --shadow: 0 22px 50px rgba(92, 72, 170, 0.08);
    --shadow-sm: 0 10px 28px rgba(92, 72, 170, 0.07);
    --radius-card: 28px;
    --radius-pill: 999px;
    --wrap: 1120px;
    --gutter: 20px;
    --header-h: 86px;
}

* { box-sizing: border-box; }

html {
    overflow-x: clip;
    font-family: "Manrope", sans-serif;
}

@-moz-document url-prefix() {
    html, * {
        scrollbar-width: thin;
        scrollbar-color: var(--accent) var(--accent-soft);
    }
    .console-side-nav,
    .staff-side-nav,
    .staff-main,
    .console-main,
    .table-wrap {
        scrollbar-color: var(--accent) transparent;
    }
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
*::-webkit-scrollbar-track {
    background: var(--accent-soft);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    border-radius: 999px;
    border: 2px solid var(--accent-soft);
    background-clip: padding-box;
    min-height: 40px;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
    background: var(--accent-deep);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
.console-side-nav::-webkit-scrollbar-track,
.staff-side-nav::-webkit-scrollbar-track,
.staff-main::-webkit-scrollbar-track,
.console-main::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.console-side-nav::-webkit-scrollbar-thumb,
.staff-side-nav::-webkit-scrollbar-thumb,
.staff-main::-webkit-scrollbar-thumb,
.console-main::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    border-color: transparent;
}

body.app-console,
body.staff-console {
    margin: 0;
    font-family: "Manrope", sans-serif;
    color: var(--ink);
    line-height: 1.55;
    overflow-x: clip;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    background-color: #f8f6ff;
    background-image: linear-gradient(180deg, #f6f3ff 0%, #fbfaff 40%, #ffffff 100%);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

@media (min-width: 981px) {
    body.app-console {
        background-image:
            url("../img/noise.webp"),
            linear-gradient(180deg, #f6f3ff 0%, #fbfaff 40%, #ffffff 100%);
        background-size: 280px 280px, auto;
        background-repeat: repeat, no-repeat;
        background-blend-mode: soft-light, normal;
    }
}

img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }