/*
 * HotelRevenue Hub 10.0
 * Performance Partnership experience layer
 * Loaded after app.css and hub-v6.css.
 */

:root {
    --hr10-navy-950: #03101f;
    --hr10-navy-900: #07182b;
    --hr10-navy-800: #10243a;
    --hr10-ink: #101d2c;
    --hr10-copy: #314154;
    --hr10-muted: #667488;
    --hr10-ivory: #f4f0e8;
    --hr10-paper: #fbfaf7;
    --hr10-white: #fff;
    --hr10-cyan: #b9ecd9;
    --hr10-cyan-dark: #087b9d;
    --hr10-cyan-soft: #dff7fd;
    --hr10-gold: #b9ecd9;
    --hr10-gold-soft: #f4ead3;
    --hr10-success: #147a58;
    --hr10-warning: #9a5b13;
    --hr10-danger: #a83a43;
    --hr10-info: #126d8b;
    --hr10-line: rgba(16, 29, 44, .13);
    --hr10-line-dark: rgba(244, 240, 232, .13);
    --hr10-radius-sm: 11px;
    --hr10-radius: 18px;
    --hr10-radius-lg: 26px;
    --hr10-shadow-sm: 0 10px 30px rgba(3, 16, 31, .07);
    --hr10-shadow: 0 24px 70px rgba(3, 16, 31, .12);
    --hr10-sidebar-width: 286px;
    --hr10-focus: 0 0 0 4px rgba(22, 114, 87, .22);
    --hr10-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hr10-display: Georgia, "Times New Roman", serif;
}

html {
    min-width: 320px;
    background: var(--hr10-ivory);
    scroll-behavior: smooth;
}

body.hr10-client-shell,
body.hr10-admin-shell {
    --bg: var(--hr10-ivory);
    --bg-soft: var(--hr10-paper);
    --card: var(--hr10-white);
    --card-strong: var(--hr10-white);
    --text: var(--hr10-ink);
    --muted: var(--hr10-muted);
    --line: var(--hr10-line);
    --success: var(--hr10-success);
    --warning: var(--hr10-warning);
    --danger: var(--hr10-danger);
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 82% 0, rgba(22, 114, 87, .075), transparent 30rem),
        linear-gradient(180deg, #f9f7f2 0%, var(--hr10-ivory) 100%) !important;
    color: var(--hr10-copy) !important;
    font-family: var(--hr10-font) !important;
}

body.hr10-client-shell *,
body.hr10-admin-shell *,
body.hr10-client-shell *::before,
body.hr10-client-shell *::after,
body.hr10-admin-shell *::before,
body.hr10-admin-shell *::after {
    box-sizing: border-box;
}

.hr10-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hr10-skip-link {
    position: fixed;
    z-index: 11000;
    top: 10px;
    left: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--hr10-white);
    color: var(--hr10-navy-950);
    font-weight: 800;
    transform: translateY(-150%);
    transition: transform .16s ease;
}

.hr10-skip-link:focus { transform: translateY(0); }

body.hr10-client-shell :where(a, button, input, select, textarea, summary):focus-visible,
body.hr10-admin-shell :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(22, 114, 87, .76) !important;
    outline-offset: 3px !important;
}

/* Application shell -------------------------------------------------- */

.app-shell.hr10-shell {
    display: grid !important;
    grid-template-columns: var(--hr10-sidebar-width) minmax(0, 1fr) !important;
    min-height: 100vh;
    min-height: 100dvh;
}

body:not(.hr6-login-body) .sidebar.hr10-sidebar {
    position: sticky !important;
    z-index: 120;
    top: 0 !important;
    display: flex;
    width: auto;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0;
    flex-direction: column;
    padding: 20px 16px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid rgba(185, 236, 217, .22) !important;
    background:
        radial-gradient(circle at 16% -4%, rgba(22, 114, 87, .16), transparent 19rem),
        linear-gradient(180deg, var(--hr10-navy-900), var(--hr10-navy-950)) !important;
    box-shadow: 14px 0 45px rgba(3, 16, 31, .12) !important;
}

.hr10-sidebar-head { flex: none; }

body:not(.hr6-login-body) .sidebar .brand.hr10-brand {
    display: flex !important;
    min-height: 68px;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid rgba(244, 240, 232, .1) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow: none !important;
    text-decoration: none;
}

.hr10-brand .brand-mark {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid rgba(185, 236, 217, .58) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .025) !important;
    box-shadow: inset 0 0 0 4px rgba(185, 236, 217, .04) !important;
    color: #ead9b3 !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}

.hr10-brand-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.hr10-brand-copy strong {
    overflow: hidden;
    color: var(--hr10-ivory) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .005em;
    line-height: 1;
    text-overflow: ellipsis;
}

.hr10-brand-copy em {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    color: rgba(244, 240, 232, .54) !important;
    font-size: 9px !important;
    font-style: normal;
    font-weight: 750 !important;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
}

.hr10-brand .brand-version {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(22, 114, 87, .26) !important;
    border-radius: 50%;
    background: rgba(22, 114, 87, .07) !important;
    color: #bceefa !important;
    font-size: 9px;
}

.hr10-mobile-menu-toggle { display: none; }

.hr10-sidebar-content {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden auto;
    scrollbar-color: rgba(244, 240, 232, .23) transparent;
    scrollbar-width: thin;
}

.sidebar .user-card.hr10-user-card {
    display: grid;
    gap: 4px;
    margin: 0 0 14px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(244, 240, 232, .09) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .03) !important;
}

.hr10-user-card .label {
    margin: 0 0 2px !important;
    color: rgba(244, 240, 232, .46) !important;
    font-size: 9px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hr10-user-card strong {
    overflow: hidden;
    color: var(--hr10-ivory) !important;
    font-size: 13px !important;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.hr10-user-card small {
    overflow: hidden;
    margin: 0 !important;
    color: rgba(244, 240, 232, .52) !important;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
}

/* Client navigation -------------------------------------------------- */

.menu.hr10-client-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
}

body:not(.hr6-login-body) .sidebar .menu.hr10-client-nav > a {
    position: relative;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: rgba(244, 240, 232, .69) !important;
    font-size: 12px;
    font-weight: 770;
    text-decoration: none;
}

body:not(.hr6-login-body) .sidebar .menu.hr10-client-nav > a:hover {
    border-color: rgba(22, 114, 87, .16) !important;
    background: rgba(22, 114, 87, .065) !important;
    color: var(--hr10-ivory) !important;
}

body:not(.hr6-login-body) .sidebar .menu.hr10-client-nav > a.active {
    border-color: rgba(22, 114, 87, .29) !important;
    background: linear-gradient(90deg, rgba(22, 114, 87, .15), rgba(22, 114, 87, .025)) !important;
    color: var(--hr10-white) !important;
}

.hr10-client-nav > a.active::before {
    position: absolute;
    inset: 11px auto 11px -1px;
    width: 2px;
    border-radius: 999px;
    background: var(--hr10-cyan);
    content: "";
}

.hr10-nav-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(244, 240, 232, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
}

.hr10-nav-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.sidebar .badge {
    min-width: 24px;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
}

.hr10-client-tools {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding-top: 15px;
}

.hr10-opinion-link {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px !important;
    border: 1px solid rgba(185, 236, 217, .34) !important;
    border-radius: 14px;
    background: rgba(185, 236, 217, .075);
    color: var(--hr10-ivory) !important;
    text-decoration: none;
}

.hr10-opinion-link:hover,
.hr10-opinion-link.active {
    border-color: rgba(185, 236, 217, .65) !important;
    background: rgba(185, 236, 217, .13);
}

.hr10-opinion-link > span:first-child {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(185, 236, 217, .34);
    border-radius: 50%;
    color: #efdcae;
    font-size: 17px;
}

.hr10-opinion-link strong,
.hr10-opinion-link small { display: block; }
.hr10-opinion-link strong { font-size: 11px; }
.hr10-opinion-link small {
    margin-top: 3px;
    color: rgba(244, 240, 232, .68);
    font-size: 10px;
    line-height: 1.35;
}

.hr10-utility-link,
.hr10-account-menu > summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgba(244, 240, 232, .72) !important;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
    text-decoration: none;
}

.hr10-utility-link:hover,
.hr10-utility-link.active,
.hr10-account-menu > summary:hover,
.hr10-account-menu[open] > summary {
    border-color: rgba(244, 240, 232, .09);
    background: rgba(255, 255, 255, .035);
    color: var(--hr10-ivory) !important;
}

.hr10-utility-link > span,
.hr10-account-menu > summary > span:first-child {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(244, 240, 232, .16);
    border-radius: 50%;
    font-size: 10px;
}

.hr10-account-menu > summary::-webkit-details-marker { display: none; }
.hr10-account-menu .hr10-chevron { margin-left: auto; }
.hr10-chevron::before {
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s ease;
}
.hr10-account-menu[open] .hr10-chevron::before { transform: rotate(225deg) translate(-1px, -1px); }
.hr10-account-menu > div { display: grid; gap: 2px; padding: 3px 0 4px 39px; }
.hr10-account-menu > div a {
    padding: 6px 8px;
    border-radius: 8px;
    color: rgba(244, 240, 232, .68);
    font-size: 10.5px;
    font-weight: 700;
}
.hr10-account-menu > div a:hover,
.hr10-account-menu > div a.active { background: rgba(255, 255, 255, .04); color: var(--hr10-white); }

.hr10-sidebar-footer {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(244, 240, 232, .08);
}

.sidebar .hr10-sidebar-footer :where(.logout, .hr10-return-admin) {
    display: flex;
    min-height: 36px;
    align-items: center;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px;
    background: transparent;
    color: rgba(244, 240, 232, .68) !important;
    font-size: 10.5px;
    font-weight: 720;
    text-decoration: none;
}

.sidebar .hr10-sidebar-footer :where(.logout, .hr10-return-admin):hover {
    border-color: rgba(244, 240, 232, .1) !important;
    background: rgba(255, 255, 255, .035);
    color: var(--hr10-ivory) !important;
}

/* Admin navigation --------------------------------------------------- */

.hr10-admin-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(244, 240, 232, .11);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    color: rgba(244, 240, 232, .48);
}

body:not(.hr6-login-body) .hr10-admin-search input {
    min-width: 0;
    min-height: 24px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hr10-ivory) !important;
    font-size: 11px;
}
.hr10-admin-search input::placeholder { color: rgba(244, 240, 232, .64); opacity: 1; }
.hr10-admin-search kbd {
    padding: 2px 5px;
    border: 1px solid rgba(244, 240, 232, .14);
    border-radius: 5px;
    background: rgba(255, 255, 255, .025);
    color: rgba(244, 240, 232, .64);
    font: 9px/1.2 var(--hr10-font);
}

.menu.hr10-admin-menu { display: grid !important; grid-template-columns: 1fr !important; gap: 4px; }
.hr10-admin-group { border-bottom: 1px solid rgba(244, 240, 232, .055); }
.hr10-admin-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 9px;
    color: rgba(185, 236, 217, .75);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .1em;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
}
.hr10-admin-group > summary::-webkit-details-marker { display: none; }
.hr10-admin-group > summary:hover { background: rgba(255, 255, 255, .03); color: #ead9b3; }
.hr10-admin-group > summary > span {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform .16s ease;
}
.hr10-admin-group[open] > summary > span { transform: rotate(225deg); }
.hr10-admin-group > div { display: grid; gap: 2px; padding: 2px 0 7px; }
body:not(.hr6-login-body) .sidebar .menu.hr10-admin-menu .hr10-admin-group a {
    display: flex !important;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(244, 240, 232, .7) !important;
    font-size: 10.5px;
    font-weight: 720;
}
body:not(.hr6-login-body) .sidebar .menu.hr10-admin-menu .hr10-admin-group a:hover,
body:not(.hr6-login-body) .sidebar .menu.hr10-admin-menu .hr10-admin-group a.active {
    border-color: rgba(22, 114, 87, .14) !important;
    background: rgba(22, 114, 87, .07) !important;
    color: var(--hr10-white) !important;
}
.hr10-menu-empty { margin: 12px 8px; color: rgba(244, 240, 232, .48); font-size: 10px; line-height: 1.5; }

/* Main canvas -------------------------------------------------------- */

.main.hr10-main {
    display: block;
    width: min(100%, 1520px) !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 auto !important;
    padding: clamp(22px, 3vw, 42px) !important;
    color: var(--hr10-copy);
}

body:not(.hr6-login-body) .topbar.hr10-topbar {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px !important;
    padding: clamp(20px, 2.4vw, 30px) !important;
    border: 1px solid var(--hr10-line) !important;
    border-radius: var(--hr10-radius-lg) !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: var(--hr10-shadow-sm) !important;
    backdrop-filter: blur(14px);
}

.hr10-topbar-copy { min-width: 0; }
.hr10-topbar .eyebrow {
    margin: 0 0 8px !important;
    color: var(--hr10-info) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .15em !important;
    line-height: 1.4;
    text-transform: uppercase;
}
.hr10-topbar h1 {
    margin: 0 !important;
    color: var(--hr10-navy-950) !important;
    font-family: var(--hr10-display) !important;
    font-size: clamp(30px, 4vw, 48px) !important;
    font-weight: 400 !important;
    letter-spacing: -.045em !important;
    line-height: 1 !important;
}
.hr10-topbar .subtitle {
    max-width: 780px;
    margin: 12px 0 0 !important;
    color: var(--hr10-muted) !important;
    font-size: 13px;
    line-height: 1.65;
}
.hr10-topbar .topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.hr10-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 34px;
    padding: 20px 4px 4px;
    border-top: 1px solid var(--hr10-line);
    color: var(--hr10-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.flash {
    margin: 0 0 18px !important;
    padding: 13px 15px !important;
    border: 1px solid var(--hr10-line) !important;
    border-radius: 13px !important;
    background: var(--hr10-white) !important;
    color: var(--hr10-copy) !important;
    box-shadow: var(--hr10-shadow-sm);
    font-size: 12px;
    line-height: 1.5;
}
.flash.success { border-color: rgba(20, 122, 88, .28) !important; background: #eef8f4 !important; color: #0d6748 !important; }
.flash.error { border-color: rgba(168, 58, 67, .3) !important; background: #fff1f2 !important; color: #8f2d35 !important; }
.flash.warning { border-color: rgba(154, 91, 19, .3) !important; background: #fff8eb !important; color: #7d460b !important; }
.flash.info { border-color: rgba(18, 109, 139, .28) !important; background: #edf9fc !important; color: #0e617d !important; }

/* Legacy page readability ------------------------------------------- */

body:not(.hr6-login-body) .hr10-main .card {
    border: 1px solid var(--hr10-line) !important;
    background: var(--hr10-white) !important;
    box-shadow: var(--hr10-shadow-sm) !important;
    color: var(--hr10-copy) !important;
}
body:not(.hr6-login-body) .hr10-main .card :where(h2, h3, h4, strong, .value, .invoice-total) { color: var(--hr10-ink); }
body:not(.hr6-login-body) .hr10-main :where(.muted, .metric .label, .metric .hint, label) { color: var(--hr10-muted) !important; }
body:not(.hr6-login-body) .hr10-main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: var(--hr10-line) !important;
    background: var(--hr10-white) !important;
    color: var(--hr10-ink) !important;
    box-shadow: none;
}
body:not(.hr6-login-body) .hr10-main :where(input, select, textarea)::placeholder { color: #8792a1; opacity: 1; }
body:not(.hr6-login-body) .hr10-main :where(input, select, textarea):focus {
    border-color: var(--hr10-cyan) !important;
    box-shadow: var(--hr10-focus) !important;
}
body:not(.hr6-login-body) .hr10-main select option { background: var(--hr10-white) !important; color: var(--hr10-ink) !important; }
body:not(.hr6-login-body) .hr10-main table { color: var(--hr10-copy); }
body:not(.hr6-login-body) .hr10-main :where(th, td) { border-bottom-color: var(--hr10-line) !important; }
body:not(.hr6-login-body) .hr10-main th { color: var(--hr10-muted) !important; }
body:not(.hr6-login-body) .hr10-main td { color: var(--hr10-copy) !important; }
body:not(.hr6-login-body) .hr10-main .notice {
    border-color: var(--hr10-line) !important;
    background: var(--hr10-paper) !important;
    color: var(--hr10-muted) !important;
}
body:not(.hr6-login-body) .hr10-main .notice.warning { border-color: rgba(154, 91, 19, .28) !important; background: #fff8eb !important; color: #744006 !important; }
body:not(.hr6-login-body) .hr10-main .notice.danger { border-color: rgba(168, 58, 67, .28) !important; background: #fff2f3 !important; color: #852b33 !important; }
body:not(.hr6-login-body) .hr10-main .notice.success { border-color: rgba(20, 122, 88, .26) !important; background: #eef8f3 !important; color: #0e6549 !important; }
body:not(.hr6-login-body) .hr10-main .timeline-content { color: var(--hr10-muted); }
body:not(.hr6-login-body) .hr10-main .timeline-content strong { color: var(--hr10-ink); }
body:not(.hr6-login-body) .hr10-main fieldset:not(.hr6-choice-fieldset):not(.hr10-option-list) {
    min-width: 0;
    border-color: var(--hr10-line);
    border-radius: 13px;
}
body:not(.hr6-login-body) .hr10-main fieldset > legend { padding: 0 6px; color: var(--hr10-ink); font-size: 10px; font-weight: 800; }
body:not(.hr6-login-body) .hr10-main label.check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--hr10-copy) !important; }
body:not(.hr6-login-body) .hr10-main :where(input[type="checkbox"], input[type="radio"]) {
    width: 18px !important;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: var(--hr10-cyan-dark);
}

/* The 5.5 runtime still prints a few page-scoped component styles after the
 * shell. These important compatibility rules keep those proven screens
 * readable while their PHP contracts remain untouched. */
.hr10-main :where(
    .simple-hero, .simple-kpi, .simple-client, .simple-actions a,
    .v4-client-picker, .v4-kpi, .v4-focus-grid > div, .v4-client-row, .v4-shortcuts a,
    .hr-pro-hero, .hr-pro-kpi, .hr-action-card, .hr-client-card,
    .work-client, .work-kpi, .work-action,
    .social-hero, .social-kpi, .social-day, .social-post, .social-empty,
    .social-generator, .social-column, .social-card, .social-pro-tile,
    .media-card, .idea-card, .social-preview,
    .flow-card, .flow-step
) {
    border-color: var(--hr10-line) !important;
    background: var(--hr10-white) !important;
    color: var(--hr10-copy) !important;
    box-shadow: var(--hr10-shadow-sm) !important;
}

.hr10-main :where(.simple-hero, .hr-pro-hero, .social-hero, .work-client) {
    background:
        radial-gradient(circle at 94% 0, rgba(22, 114, 87, .1), transparent 22rem),
        linear-gradient(145deg, #fff, #f5fbfc) !important;
}

.hr10-main :where(
    .simple-hero, .simple-kpi, .simple-client, .simple-row,
    .v4-kpi, .v4-focus-grid > div, .v4-client-row,
    .hr-pro-hero, .hr-pro-kpi, .hr-action-card, .hr-client-card,
    .work-client, .work-kpi, .work-action, .work-row,
    .social-hero, .social-kpi, .social-day, .social-post, .social-column,
    .social-card, .social-pro-tile, .media-card, .idea-card
) :where(h2, h3, h4, h5, h6, strong) {
    color: var(--hr10-ink) !important;
}

.hr10-main :where(
    .simple-hero, .simple-kpi, .simple-client, .simple-row,
    .v4-kpi, .v4-focus-grid > div, .v4-client-row,
    .hr-pro-hero, .hr-pro-kpi, .hr-action-card, .hr-client-card,
    .work-client, .work-kpi, .work-action, .work-row,
    .social-hero, .social-kpi, .social-day, .social-post, .social-column,
    .social-card, .social-pro-tile, .media-card, .idea-card
) :where(p, small, span:not(.badge):not(.tag)) {
    color: var(--hr10-muted) !important;
}

.hr10-main :where(.simple-actions a, .v4-shortcuts a, .hr-action-card, .social-pro-tile) {
    color: var(--hr10-ink) !important;
    text-decoration: none;
}

.hr10-main :where(.simple-row, .work-row) {
    border-bottom-color: var(--hr10-line) !important;
    color: var(--hr10-copy) !important;
}

/* Older operational modules render their own component CSS after the shell.
 * Keep those screens on the same light, high-contrast canvas without changing
 * their PHP output or the deliberately dark executive report headers. */
.hr10-main :where(
    .svc-card, .svc-kpi, .center-card, .stats-kpi, .stats-chart-card,
    .access-box, .permission-grid label, .report-kpi, .hr-chart,
    .market-kpi, .market-chart, .market-day, .cc-kpi, .cc-alert,
    .cc-time-card, .cc-value
) {
    border-color: var(--hr10-line) !important;
    background: var(--hr10-white) !important;
    color: var(--hr10-copy) !important;
    box-shadow: var(--hr10-shadow-sm) !important;
}

.hr10-main :where(.svc-card.big, .center-card.main) {
    border-color: rgba(22, 114, 87, .23) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(22, 114, 87, .1), transparent 17rem),
        linear-gradient(145deg, #fff, #f3fbfd) !important;
}

.hr10-main :where(.report-document, .market-report) { color: var(--hr10-copy) !important; }
.hr10-main :where(.cc-hero, .report-hero, .market-hero) {
    border-color: rgba(22, 114, 87, .29) !important;
    background:
        radial-gradient(circle at 92% 0, rgba(22, 114, 87, .19), transparent 22rem),
        linear-gradient(135deg, var(--hr10-navy-900), var(--hr10-navy-950)) !important;
    color: var(--hr10-ivory) !important;
}
.hr10-main :where(.cc-hero, .report-hero, .market-hero) :where(h2, h3, strong) { color: var(--hr10-white) !important; }
.hr10-main :where(.cc-hero, .report-hero, .market-hero) :where(p, .muted) { color: rgba(244, 240, 232, .7) !important; }
.hr10-main :where(.cc-hero, .report-hero, .market-hero) .eyebrow { color: #aeeaf8 !important; }
.hr10-main :where(.cc-hero, .report-hero, .market-hero) .report-period-note {
    border-color: rgba(22, 114, 87, .28) !important;
    background: rgba(22, 114, 87, .08) !important;
    color: rgba(244, 240, 232, .78) !important;
}

.hr10-main :where(.svc-card, .svc-kpi, .center-card, .stats-kpi, .stats-chart-card, .access-box, .permission-grid label, .report-kpi, .hr-chart, .market-kpi, .market-chart, .market-day, .cc-kpi, .cc-alert, .cc-time-card, .cc-value)
    :where(h2, h3, h4, h5, h6, strong, b) { color: var(--hr10-ink) !important; }
.hr10-main :where(.svc-card, .svc-kpi, .center-card, .stats-kpi, .stats-chart-card, .access-box, .permission-grid label, .report-kpi, .hr-chart, .market-kpi, .market-chart, .market-day, .cc-kpi, .cc-alert, .cc-time-card, .cc-value)
    :where(p, small, .muted, .label, .hint) { color: var(--hr10-muted) !important; }

.hr10-main .cc-kpi.success,
.hr10-main .cc-alert.success,
.hr10-main .cc-time-card.success { border-color: rgba(20, 122, 88, .27) !important; background: #f0f9f5 !important; }
.hr10-main .cc-kpi.warning,
.hr10-main .cc-alert.warning,
.hr10-main .cc-time-card.warning { border-color: rgba(154, 91, 19, .28) !important; background: #fff8ee !important; }
.hr10-main :where(.cc-kpi.danger, .cc-kpi.urgent, .cc-alert.danger, .cc-alert.urgent, .cc-time-card.danger) { border-color: rgba(168, 58, 67, .27) !important; background: #fff3f4 !important; }
.hr10-main .cc-kpi.info,
.hr10-main .cc-alert.info,
.hr10-main .cc-time-card.info { border-color: rgba(18, 109, 139, .25) !important; background: #f0fafe !important; }
.hr10-main :where(.cc-kpi.success strong, .cc-alert.success h4, .positive, .success-text) { color: var(--hr10-success) !important; }
.hr10-main :where(.cc-kpi.warning strong, .cc-alert.warning h4, .warning-text) { color: var(--hr10-warning) !important; }
.hr10-main :where(.cc-kpi.danger strong, .cc-kpi.urgent strong, .cc-alert.danger h4, .cc-alert.urgent h4, .negative, .danger-text) { color: var(--hr10-danger) !important; }
.hr10-main :where(.cc-kpi.info strong, .cc-alert.info h4, .info-text) { color: var(--hr10-info) !important; }
.hr10-main .positive, .hr10-main .success-text { color: var(--hr10-success) !important; }
.hr10-main .negative, .hr10-main .danger-text { color: var(--hr10-danger) !important; }
.hr10-main .warning-text { color: var(--hr10-warning) !important; }
.hr10-main .info-text { color: var(--hr10-info) !important; }
.hr10-main .neutral { color: var(--hr10-muted) !important; }
.hr10-main :where(.cc-pill, .cc-time-tag) { border-color: var(--hr10-line) !important; background: rgba(255, 255, 255, .08) !important; }
.hr10-main .cc-pill.success { border-color: rgba(110, 220, 177, .35) !important; background: rgba(20, 122, 88, .22) !important; color: #c8f4e2 !important; }
.hr10-main .cc-pill.warning { border-color: rgba(239, 200, 119, .38) !important; background: rgba(154, 91, 19, .24) !important; color: #f5dcaa !important; }
.hr10-main .cc-pill.danger { border-color: rgba(244, 159, 167, .38) !important; background: rgba(168, 58, 67, .24) !important; color: #ffd1d5 !important; }
.hr10-main .cc-pill.info { border-color: rgba(129, 220, 242, .4) !important; background: rgba(18, 109, 139, .25) !important; color: #c4f2fb !important; }
.hr10-main .cc-time-tag.success { border-color: rgba(20, 122, 88, .24) !important; background: #eef8f4 !important; color: var(--hr10-success) !important; }
.hr10-main .cc-time-tag.warning { border-color: rgba(154, 91, 19, .25) !important; background: #fff8eb !important; color: var(--hr10-warning) !important; }
.hr10-main .cc-time-tag.danger { border-color: rgba(168, 58, 67, .25) !important; background: #fff1f2 !important; color: var(--hr10-danger) !important; }
.hr10-main .cc-time-tag.info { border-color: rgba(18, 109, 139, .24) !important; background: #edf9fc !important; color: var(--hr10-info) !important; }
.hr10-main .cc-time-tag.neutral { border-color: var(--hr10-line) !important; background: var(--hr10-paper) !important; color: var(--hr10-muted) !important; }
.hr10-main :where(.cc-time-meta b, .cc-time-head strong) { color: var(--hr10-ink) !important; }
.hr10-main :where(.cc-priority, .report-table th, .report-table td, .market-table th, .market-table td) { border-bottom-color: var(--hr10-line) !important; }
.hr10-main :where(.stats-bar, .hr-bar, .market-bar) { background: #e7edf0 !important; }
.hr10-main :where(.access-box.allowed) { border-color: rgba(20, 122, 88, .27) !important; background: #f0f9f5 !important; }
.hr10-main :where(.access-box.blocked) { border-color: rgba(168, 58, 67, .24) !important; background: #fff3f4 !important; }

.hr-pro-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}
.hr-span-12 { grid-column: span 12; }.hr-span-8 { grid-column: span 8; }.hr-span-6 { grid-column: span 6; }.hr-span-4 { grid-column: span 4; }.hr-span-3 { grid-column: span 3; }
.hr-pro-hero {
    position: relative;
    margin-bottom: 18px;
    padding: clamp(22px, 3vw, 32px);
    overflow: hidden;
    border: 1px solid var(--hr10-line);
    border-radius: var(--hr10-radius-lg);
}
.hr-pro-hero h2 { margin: 0 0 8px; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; letter-spacing: -.04em; }
.hr-pro-hero p { max-width: 880px; color: var(--hr10-muted); line-height: 1.65; }
.hr-client-card { position: relative; min-width: 0; padding: 19px; overflow: hidden; border: 1px solid var(--hr10-line); border-radius: var(--hr10-radius); }
.hr-client-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--hr10-cyan); content: ""; }
.hr-client-card h3 { margin: 0 0 7px; }
.hr-client-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hr-action-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hr-action-card { display: block; min-height: 108px; padding: 16px; border: 1px solid var(--hr10-line); border-radius: 17px; }
.hr-action-card strong, .hr-action-card span { display: block; }.hr-action-card span { margin-top: 5px; font-size: 11px; line-height: 1.5; }

.simple-client.danger, .v4-client-row.danger { border-color: rgba(168, 58, 67, .27) !important; background: #fff3f4 !important; }
.simple-client.warning, .v4-client-row.warning { border-color: rgba(154, 91, 19, .27) !important; background: #fff8ee !important; }
.simple-client.success, .v4-client-row.success { border-color: rgba(20, 122, 88, .25) !important; background: #f0f9f5 !important; }
.work-action.social { border-color: rgba(22, 114, 87, .24) !important; background: #f0fbfe !important; }
.work-action.revenue { border-color: rgba(20, 122, 88, .23) !important; background: #f1faf6 !important; }
.work-action.warning { border-color: rgba(154, 91, 19, .24) !important; background: #fff8ed !important; }
.work-action.danger { border-color: rgba(168, 58, 67, .24) !important; background: #fff3f4 !important; }
.social-material { border-color: rgba(154, 91, 19, .24) !important; background: #fff8ed !important; color: var(--hr10-copy) !important; }
.social-preview, .hashtag-box { border-color: var(--hr10-line) !important; background: var(--hr10-paper) !important; color: var(--hr10-copy) !important; }
.media-thumb { background: #edf1f4 !important; color: var(--hr10-muted) !important; }

@media (max-width: 1100px) {
    .hr-span-8, .hr-span-6, .hr-span-4, .hr-span-3 { grid-column: span 12; }
    .hr-action-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .hr-action-wall { grid-template-columns: 1fr; }
}

body:not(.hr6-login-body) .btn {
    min-height: 41px;
    padding: 10px 14px;
    border: 1px solid var(--hr10-navy-950) !important;
    border-radius: 12px !important;
    background: var(--hr10-navy-950) !important;
    box-shadow: 0 8px 20px rgba(3, 16, 31, .12) !important;
    color: var(--hr10-ivory) !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}
body:not(.hr6-login-body) .btn:hover { background: var(--hr10-navy-800) !important; color: #fff !important; }
body:not(.hr6-login-body) .btn.secondary { border-color: rgba(16, 29, 44, .22) !important; background: #fff !important; box-shadow: none !important; color: var(--hr10-ink) !important; }
body:not(.hr6-login-body) .btn.secondary:hover { border-color: var(--hr10-ink) !important; background: var(--hr10-paper) !important; }
body:not(.hr6-login-body) .btn.small { min-height: 34px; padding: 7px 10px; font-size: 10px; }

.badge { border-color: var(--hr10-line); }
.badge.info { border-color: rgba(18, 109, 139, .22); background: rgba(18, 109, 139, .08); color: var(--hr10-info); }
.badge.warning { border-color: rgba(154, 91, 19, .22); background: rgba(154, 91, 19, .08); color: var(--hr10-warning); }
.badge.success { border-color: rgba(20, 122, 88, .22); background: rgba(20, 122, 88, .08); color: var(--hr10-success); }
.badge.danger { border-color: rgba(168, 58, 67, .22); background: rgba(168, 58, 67, .08); color: var(--hr10-danger); }
.badge.muted { background: rgba(16, 29, 44, .045); color: var(--hr10-muted); }

/* v10 dashboard and common content --------------------------------- */

.hr10-command {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
    margin-bottom: 20px;
    padding: clamp(26px, 4vw, 50px);
    overflow: hidden;
    border: 1px solid rgba(185, 236, 217, .32);
    border-radius: var(--hr10-radius-lg);
    background:
        radial-gradient(circle at 92% 8%, rgba(22, 114, 87, .16), transparent 22rem),
        radial-gradient(circle at 12% 100%, rgba(185, 236, 217, .1), transparent 26rem),
        linear-gradient(145deg, var(--hr10-navy-900), var(--hr10-navy-950));
    box-shadow: var(--hr10-shadow);
    color: var(--hr10-ivory);
}
.hr10-command::after {
    position: absolute;
    right: -12rem;
    bottom: -17rem;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgba(185, 236, 217, .13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.hr10-command-copy, .hr10-pulse { position: relative; z-index: 1; }
.hr10-command-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: rgba(244, 240, 232, .71);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hr10-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7e8994;
    box-shadow: 0 0 0 5px rgba(126, 137, 148, .12);
}
.hr10-live-dot.success { background: #43d09d; box-shadow: 0 0 0 5px rgba(67, 208, 157, .12); }
.hr10-live-dot.warning { background: #e2b65d; box-shadow: 0 0 0 5px rgba(226, 182, 93, .13); }
.hr10-live-dot.danger { background: #ed7880; box-shadow: 0 0 0 5px rgba(237, 120, 128, .12); }
.hr10-overline {
    margin: 0 0 9px !important;
    color: var(--hr10-info) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}
.hr10-command .hr10-overline { color: var(--hr10-cyan) !important; }
.hr10-command h2 {
    max-width: 850px;
    margin: 0;
    color: var(--hr10-ivory) !important;
    font-family: var(--hr10-display);
    font-size: clamp(30px, 4.25vw, 58px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.03;
}
.hr10-command-note { max-width: 770px; margin: 20px 0 0; color: rgba(244, 240, 232, .65); font-size: 13px; line-height: 1.7; }
.hr10-command-meta { display: flex; flex-wrap: wrap; gap: 13px 26px; margin-top: 28px; }
.hr10-command-meta > span { display: grid; gap: 4px; padding-left: 12px; border-left: 1px solid rgba(244, 240, 232, .15); }
.hr10-command-meta small { color: rgba(244, 240, 232, .4); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hr10-command-meta strong { color: var(--hr10-ivory); font-size: 10.5px; font-weight: 750; }
.hr10-pulse { display: grid; justify-items: center; gap: 18px; text-align: center; }
.hr10-pulse-ring {
    --hr10-progress: 0;
    position: relative;
    display: grid;
    width: clamp(145px, 14vw, 190px);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--hr10-cyan) calc(var(--hr10-progress) * 1%), rgba(244, 240, 232, .09) 0);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .22);
}
.hr10-pulse-ring::before { position: absolute; width: calc(clamp(145px, 14vw, 190px) - 14px); aspect-ratio: 1; border-radius: 50%; background: var(--hr10-navy-900); content: ""; }
.hr10-pulse-ring > span { position: relative; z-index: 1; display: grid; gap: 2px; }
.hr10-pulse-ring strong { color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: 32px; font-weight: 400; }
.hr10-pulse-ring small { color: rgba(244, 240, 232, .48); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.hr10-pulse > div:last-child { display: grid; gap: 5px; }
.hr10-pulse > div:last-child > strong { color: var(--hr10-ivory); font-size: 12px; }
.hr10-pulse > div:last-child > span { color: rgba(244, 240, 232, .48); font-size: 9px; }
.hr10-pulse a { margin-top: 5px; color: #bceefa; font-size: 10px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.hr10-answer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.hr10-answer {
    display: flex;
    min-width: 0;
    min-height: 250px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--hr10-line);
    border-radius: var(--hr10-radius);
    background: var(--hr10-white);
    box-shadow: var(--hr10-shadow-sm);
}
.hr10-answer-impact { background: linear-gradient(150deg, #edfafd, #fff); }
.hr10-answer-attention { border-color: rgba(185, 236, 217, .48); background: linear-gradient(150deg, #fbf5e8, #fff); }
.hr10-answer-head { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.hr10-answer-index { color: var(--hr10-gold); font-family: var(--hr10-display); font-size: 17px; }
.hr10-answer-head p { margin: 0; color: var(--hr10-muted); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hr10-answer h3 { margin: 0 0 10px; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: 22px; font-weight: 400; line-height: 1.15; }
.hr10-answer > p { margin: 0 0 10px; color: var(--hr10-muted); font-size: 11px; line-height: 1.6; }
.hr10-answer > small { color: #7a8797; font-size: 8.5px; line-height: 1.5; }
.hr10-answer > a { margin-top: auto; padding-top: 18px; color: var(--hr10-info); font-size: 10px; font-weight: 850; }
.hr10-answer-value { margin: -3px 0 8px; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: clamp(32px, 3vw, 45px); line-height: 1; }
.hr10-delta { font-weight: 800; }.hr10-delta.positive { color: var(--hr10-success) !important; }.hr10-delta.negative { color: var(--hr10-danger) !important; }

.hr10-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.hr10-span-4 { grid-column: span 4; }.hr10-span-5 { grid-column: span 5; }.hr10-span-6 { grid-column: span 6; }.hr10-span-7 { grid-column: span 7; }.hr10-span-8 { grid-column: span 8; }.hr10-span-12 { grid-column: span 12; }
.hr10-panel {
    min-width: 0;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--hr10-line);
    border-radius: var(--hr10-radius);
    background: var(--hr10-white);
    box-shadow: var(--hr10-shadow-sm);
    color: var(--hr10-copy);
}
.hr10-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.hr10-panel-head h2, .hr10-panel h2 { margin: 0; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: clamp(22px, 2.4vw, 31px); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
.hr10-panel-head > a { color: var(--hr10-info); font-size: 9px; font-weight: 850; white-space: nowrap; }
.hr10-work-list { display: grid; }
.hr10-work { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hr10-line); color: var(--hr10-copy); }
.hr10-work:last-child { border-bottom: 0; }
.hr10-work-state { width: 9px; height: 9px; border-radius: 50%; background: #84909e; box-shadow: 0 0 0 4px rgba(132, 144, 158, .1); }
.hr10-work-state.success { background: var(--hr10-success); }.hr10-work-state.warning { background: var(--hr10-gold); }.hr10-work-state.danger { background: var(--hr10-danger); }.hr10-work-state.info, .hr10-work-state.cyan { background: var(--hr10-cyan); }
.hr10-work strong { display: block; color: var(--hr10-ink); font-size: 12px; line-height: 1.4; }
.hr10-work small { display: block; margin-top: 4px; color: var(--hr10-muted); font-size: 9px; line-height: 1.45; }
.hr10-work > span:last-child { color: var(--hr10-info); }
.hr10-insight-list { display: grid; gap: 10px; }
.hr10-insight { padding: 14px; border: 1px solid var(--hr10-line); border-left: 3px solid #83909e; border-radius: 13px; background: var(--hr10-paper); }
.hr10-insight.success { border-left-color: var(--hr10-success); }.hr10-insight.warning { border-left-color: var(--hr10-gold); }.hr10-insight.danger { border-left-color: var(--hr10-danger); }.hr10-insight.info { border-left-color: var(--hr10-cyan); }
.hr10-insight > span { color: var(--hr10-muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hr10-insight h3 { margin: 7px 0; color: var(--hr10-ink); font-size: 13px; line-height: 1.4; }
.hr10-insight p { margin: 0 0 7px; color: var(--hr10-copy); font-size: 10px; line-height: 1.55; }
.hr10-insight small { color: var(--hr10-muted); font-size: 8.5px; line-height: 1.5; }
.hr10-timeline { position: relative; display: grid; }
.hr10-timeline::before { position: absolute; top: 8px; bottom: 8px; left: 7px; width: 1px; background: var(--hr10-line); content: ""; }
.hr10-timeline article { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.hr10-timeline article:last-child { padding-bottom: 0; }
.hr10-timeline-marker { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 2px; border: 4px solid #fff; border-radius: 50%; background: #8793a0; box-shadow: 0 0 0 1px var(--hr10-line); }
.hr10-timeline-marker.cyan, .hr10-timeline-marker.info { background: var(--hr10-cyan); }.hr10-timeline-marker.champagne, .hr10-timeline-marker.warning { background: var(--hr10-gold); }.hr10-timeline-marker.success { background: var(--hr10-success); }.hr10-timeline-marker.danger { background: var(--hr10-danger); }
.hr10-timeline-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; color: var(--hr10-muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hr10-timeline h3 { margin: 5px 0 6px; color: var(--hr10-ink); font-size: 13px; }
.hr10-timeline p { margin: 0 0 8px; color: var(--hr10-muted); font-size: 10px; line-height: 1.6; }
.hr10-timeline a { color: var(--hr10-info); font-size: 9px; font-weight: 850; }
.hr10-voice { border-color: rgba(185, 236, 217, .34); background: linear-gradient(145deg, var(--hr10-navy-900), var(--hr10-navy-950)); color: var(--hr10-ivory); }
.hr10-voice .hr10-overline { color: var(--hr10-gold) !important; }.hr10-voice h2 { color: var(--hr10-ivory) !important; }.hr10-voice > p:not(.hr10-overline) { color: rgba(244, 240, 232, .62); font-size: 12px; line-height: 1.7; }
.hr10-voice .btn { border-color: var(--hr10-ivory) !important; background: var(--hr10-ivory) !important; color: var(--hr10-ink) !important; }
.hr10-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.hr10-mini-tags span { padding: 5px 8px; border: 1px solid rgba(185, 236, 217, .22); border-radius: 999px; color: rgba(244, 240, 232, .55); font-size: 8px; }
.hr10-empty { display: grid; min-height: 130px; align-content: center; gap: 8px; padding: 20px; border: 1px dashed rgba(16, 29, 44, .18); border-radius: 14px; background: var(--hr10-paper); text-align: center; }
.hr10-empty strong { color: var(--hr10-ink); font-family: var(--hr10-display); font-size: 20px; font-weight: 400; }.hr10-empty p { margin: 0; color: var(--hr10-muted); font-size: 10px; line-height: 1.6; }

/* Plan, results and participation ----------------------------------- */

.hr10-plan-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
    gap: clamp(24px, 4vw, 50px);
    align-items: center;
    margin-bottom: 20px;
    padding: clamp(27px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(185, 236, 217, .32);
    border-radius: var(--hr10-radius-lg);
    background:
        radial-gradient(circle at 93% 5%, rgba(22, 114, 87, .15), transparent 22rem),
        linear-gradient(145deg, var(--hr10-navy-900), var(--hr10-navy-950));
    box-shadow: var(--hr10-shadow);
    color: var(--hr10-ivory);
}
.hr10-plan-hero > div, .hr10-plan-hero > aside { position: relative; z-index: 1; }
.hr10-plan-hero .hr10-overline { color: var(--hr10-cyan) !important; }
.hr10-plan-hero h2 { margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(31px, 4.2vw, 56px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.hr10-plan-hero > div > p:not(.hr10-overline) { max-width: 810px; margin: 18px 0 0; color: rgba(244, 240, 232, .65); font-size: 13px; line-height: 1.7; }

.hr10-section {
    min-width: 0;
    margin-bottom: 20px;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--hr10-line);
    border-radius: var(--hr10-radius);
    background: var(--hr10-white);
    box-shadow: var(--hr10-shadow-sm);
}
.hr10-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.hr10-section-head h2 { margin: 0; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: clamp(25px, 3vw, 36px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.hr10-section-head > div > p:not(.hr10-overline) { max-width: 800px; margin: 10px 0 0; color: var(--hr10-muted); font-size: 11px; line-height: 1.6; }

.hr10-goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hr10-goal-card { display: flex; min-width: 0; min-height: 270px; flex-direction: column; padding: 19px; border: 1px solid var(--hr10-line); border-radius: 16px; background: linear-gradient(155deg, #fff, #fbfaf7); }
.hr10-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hr10-card-top > span:not(.badge), .hr10-card-top time { color: var(--hr10-muted); font-size: 8.5px; font-weight: 750; }
.hr10-goal-card h3 { margin: 18px 0 8px; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: 22px; font-weight: 400; line-height: 1.15; }
.hr10-goal-card > p { margin: 0 0 15px; color: var(--hr10-muted); font-size: 10px; line-height: 1.55; }
.hr10-goal-card > small { margin-top: 7px; color: var(--hr10-muted); font-size: 8.5px; }
.hr10-goal-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; margin-bottom: 14px; }
.hr10-goal-numbers > span { padding: 10px; border: 1px solid var(--hr10-line); border-radius: 11px; background: var(--hr10-paper); }
.hr10-goal-numbers small, .hr10-goal-numbers strong { display: block; }
.hr10-goal-numbers small { color: var(--hr10-muted); font-size: 7.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hr10-goal-numbers strong { margin-top: 5px; color: var(--hr10-ink); font-size: 13px; }
.hr10-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e8edf0; }
.hr10-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hr10-cyan-dark), var(--hr10-cyan)); }

.hr10-roadmap { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hr10-roadmap::before { position: absolute; top: 16px; bottom: 16px; left: 17px; width: 1px; background: var(--hr10-line); content: ""; }
.hr10-roadmap li { position: relative; display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 15px; padding-bottom: 22px; }
.hr10-roadmap li:last-child { padding-bottom: 0; }
.hr10-roadmap-marker { position: relative; z-index: 1; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--hr10-line); border-radius: 50%; background: #fff; color: var(--hr10-info); font-size: 10px; font-weight: 900; }
.hr10-roadmap li.is-done .hr10-roadmap-marker { border-color: var(--hr10-success); background: var(--hr10-success); color: #fff; }
.hr10-roadmap h3 { margin: 8px 0 6px; color: var(--hr10-ink); font-size: 13px; line-height: 1.4; }
.hr10-roadmap p { margin: 0 0 6px; color: var(--hr10-muted); font-size: 10px; line-height: 1.55; }
.hr10-roadmap small { color: var(--hr10-muted); font-size: 8.5px; }

.hr10-service-list { display: grid; gap: 4px; }
.hr10-service-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--hr10-line); }
.hr10-service-list article:last-child { border-bottom: 0; }
.hr10-service-list article > span { color: var(--hr10-gold); font-family: var(--hr10-display); font-size: 18px; }
.hr10-service-list strong { display: block; color: var(--hr10-ink); font-size: 11px; }
.hr10-service-list p { margin: 4px 0 0; color: var(--hr10-muted); font-size: 9px; line-height: 1.5; }
.hr10-next-box { display: grid; gap: 5px; margin-top: 20px; padding: 16px; border: 1px solid rgba(185, 236, 217, .3); border-radius: 14px; background: var(--hr10-gold-soft); }
.hr10-next-box .hr10-overline { margin-bottom: 1px !important; color: #775d28 !important; }
.hr10-next-box strong { color: var(--hr10-ink); font-size: 12px; line-height: 1.45; }
.hr10-next-box small { color: var(--hr10-muted); font-size: 9px; }

.hr10-opinion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-top: 20px;
    padding: clamp(23px, 3vw, 32px);
    border: 1px solid rgba(185, 236, 217, .34);
    border-radius: var(--hr10-radius);
    background:
        radial-gradient(circle at 90% 0, rgba(185, 236, 217, .13), transparent 20rem),
        var(--hr10-navy-900);
    color: var(--hr10-ivory);
}
.hr10-opinion-banner .hr10-overline { color: var(--hr10-gold) !important; }
.hr10-opinion-banner h2 { margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(23px, 3vw, 34px); font-weight: 400; letter-spacing: -.03em; }
.hr10-opinion-banner p:not(.hr10-overline) { margin: 8px 0 0; color: rgba(244, 240, 232, .6); font-size: 11px; line-height: 1.6; }
.hr10-opinion-banner .btn { flex: none; border-color: var(--hr10-ivory) !important; background: var(--hr10-ivory) !important; color: var(--hr10-ink) !important; }

.hr10-filterbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--hr10-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--hr10-shadow-sm);
}
.hr10-filterbar form { display: flex; flex: 1; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.hr10-filterbar form .field { width: min(300px, 100%); }
.hr10-filterbar label { margin-bottom: 5px !important; font-size: 9px !important; }
.hr10-filterbar select { min-height: 39px; padding: 9px 12px !important; border-radius: 11px !important; }
.hr10-filterbar > div { display: grid; min-width: 210px; gap: 3px; text-align: right; }
.hr10-filterbar > div small { color: var(--hr10-muted); font-size: 7.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hr10-filterbar > div strong { color: var(--hr10-ink); font-size: 10.5px; }
.hr10-filterbar > div span { color: var(--hr10-muted); font-size: 8.5px; }

.hr10-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.hr10-metric-card { position: relative; display: flex; min-width: 0; min-height: 245px; flex-direction: column; padding: 18px; overflow: hidden; border: 1px solid var(--hr10-line); border-radius: 16px; background: linear-gradient(155deg, #fff, #f8fbfc); }
.hr10-metric-card::before { position: absolute; inset: 0 0 auto; height: 3px; background: var(--hr10-cyan); content: ""; }
.hr10-metric-card .hr10-card-top > span { color: var(--hr10-muted); font-size: 8.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.hr10-metric-value { display: block; margin: 22px 0 10px; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: clamp(27px, 3vw, 40px); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.hr10-metric-comparison { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.hr10-metric-comparison > span { color: var(--hr10-copy); font-size: 11px; font-weight: 850; }
.hr10-metric-comparison > small { color: var(--hr10-muted); font-size: 8.5px; }
.hr10-target { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding: 9px 10px; border-radius: 10px; background: var(--hr10-gold-soft); }
.hr10-target small { color: #765d2d; font-size: 8px; font-weight: 850; text-transform: uppercase; }.hr10-target strong { color: var(--hr10-ink); font-size: 10px; }
.hr10-metric-card footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hr10-line); color: var(--hr10-muted); font-size: 7.5px; }

.hr10-google {
    margin-bottom: 20px;
    padding: clamp(23px, 3vw, 32px);
    border: 1px solid rgba(185, 236, 217, .31);
    border-radius: var(--hr10-radius);
    background:
        radial-gradient(circle at 96% 2%, rgba(22, 114, 87, .15), transparent 24rem),
        var(--hr10-navy-900);
    box-shadow: var(--hr10-shadow);
    color: var(--hr10-ivory);
}
.hr10-google .hr10-section-head h2 { color: var(--hr10-ivory); }
.hr10-google .hr10-section-head .hr10-overline { color: var(--hr10-cyan) !important; }
.hr10-google .hr10-section-head > div > p:not(.hr10-overline) { color: rgba(244, 240, 232, .59); }
.hr10-google .hr10-help { border-color: rgba(188, 238, 250, .27); background: rgba(22, 114, 87, .08); color: #bceefa; }
.hr10-google .hr10-empty { border-color: rgba(244, 240, 232, .14); background: rgba(255, 255, 255, .035); }
.hr10-google .hr10-empty strong { color: var(--hr10-ivory); }.hr10-google .hr10-empty p { color: rgba(244, 240, 232, .56); }
.hr10-google-sources { display: grid; gap: 14px; }
.hr10-google-sources > section { padding: 18px; border: 1px solid rgba(244, 240, 232, .12); border-radius: 16px; background: rgba(255, 255, 255, .035); }
.hr10-google-sources > section > header { margin-bottom: 13px; }
.hr10-google-sources > section > header h3 { margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: 23px; font-weight: 400; letter-spacing: -.025em; }
.hr10-google-sources > section > header p { margin: 5px 0 0; color: rgba(244, 240, 232, .68); font-size: 12px; line-height: 1.6; }
.hr10-google-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hr10-google-grid article { display: grid; min-width: 0; gap: 7px; padding: 15px; border: 1px solid var(--hr10-line); border-radius: 13px; background: var(--hr10-paper); }
.hr10-google-grid span { color: var(--hr10-muted); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.hr10-google-grid strong { overflow: hidden; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: 24px; font-weight: 400; text-overflow: ellipsis; }
.hr10-google-grid small { color: var(--hr10-muted); font-size: 7.5px; line-height: 1.45; }
.hr10-google .hr10-google-grid article { border-color: rgba(244, 240, 232, .12); background: rgba(255, 255, 255, .035); }
.hr10-google .hr10-google-grid span { color: rgba(244, 240, 232, .5); }
.hr10-google .hr10-google-grid strong { color: var(--hr10-ivory); }
.hr10-google .hr10-google-grid small { color: rgba(244, 240, 232, .42); }
.hr10-connector-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(244, 240, 232, .1); }
.hr10-connector-strip > span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 9px; align-items: center; }
.hr10-connector-strip .hr10-live-dot { grid-row: span 2; }
.hr10-connector-strip strong { color: var(--hr10-ivory); font-size: 9.5px; }.hr10-connector-strip small { color: rgba(244, 240, 232, .48); font-size: 7.5px; }

.hr10-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hr10-insight-grid article { padding: 17px; border: 1px solid var(--hr10-line); border-top: 3px solid var(--hr10-cyan); border-radius: 14px; background: var(--hr10-paper); }
.hr10-insight-grid article.is-success { border-top-color: var(--hr10-success); }.hr10-insight-grid article.is-warning { border-top-color: var(--hr10-gold); }.hr10-insight-grid article.is-critical { border-top-color: var(--hr10-danger); }.hr10-insight-grid article.is-opportunity { border-top-color: #7d63a1; }
.hr10-insight-grid article > span { color: var(--hr10-muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hr10-insight-grid h3 { margin: 9px 0 8px; color: var(--hr10-ink); font-size: 14px; line-height: 1.35; }
.hr10-insight-grid p { margin: 0 0 8px; color: var(--hr10-muted); font-size: 10px; line-height: 1.6; }
.hr10-insight-grid strong { color: var(--hr10-copy); font-size: 9px; }

.hr10-result-list, .hr10-report-list { display: grid; gap: 8px; }
.hr10-result-list > :where(a, article) { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--hr10-line); }
.hr10-result-list > :where(a, article):last-child { border-bottom: 0; }
.hr10-result-list time { grid-row: span 2; color: var(--hr10-muted); font-size: 8px; }.hr10-result-list strong { color: var(--hr10-ink); font-size: 11px; }.hr10-result-list p { margin: 0; color: var(--hr10-muted); font-size: 9px; line-height: 1.5; }
.hr10-source-list { display: grid; }
.hr10-source-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hr10-line); }
.hr10-source-list > div:last-child { border-bottom: 0; }
.hr10-source-list span > strong, .hr10-source-list span > small { display: block; }.hr10-source-list span > strong { color: var(--hr10-ink); font-size: 10px; }.hr10-source-list span > small { margin-top: 2px; color: var(--hr10-muted); font-size: 8px; }
.hr10-source-list time { color: var(--hr10-muted); font-size: 8px; text-align: right; }
.hr10-value-list { display: grid; gap: 8px; }
.hr10-value-list article { display: grid; grid-template-columns: 110px 125px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--hr10-line); }
.hr10-value-list article:last-child { border-bottom: 0; }
.hr10-value-list article > span { color: var(--hr10-muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }.hr10-value-list article > strong { color: var(--hr10-ink); font-family: var(--hr10-display); font-size: 19px; font-weight: 400; }
.hr10-value-list h3 { margin: 0 0 4px; color: var(--hr10-ink); font-size: 11px; }.hr10-value-list p { margin: 0 0 4px; color: var(--hr10-muted); font-size: 9px; line-height: 1.5; }.hr10-value-list small { color: var(--hr10-muted); font-size: 8px; }
.hr10-report-list a { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--hr10-line); border-radius: 12px; background: var(--hr10-paper); }.hr10-report-list strong { color: var(--hr10-ink); font-size: 11px; }.hr10-report-list span { color: var(--hr10-muted); font-size: 9px; line-height: 1.5; }.hr10-report-list small { color: var(--hr10-muted); font-size: 8px; }

.hr10-action-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 20px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid rgba(185, 236, 217, .3);
    border-radius: var(--hr10-radius-lg);
    background:
        radial-gradient(circle at 87% 0, rgba(22, 114, 87, .15), transparent 21rem),
        var(--hr10-navy-900);
    box-shadow: var(--hr10-shadow);
    color: var(--hr10-ivory);
}
.hr10-action-summary > div { display: flex; min-width: 0; align-items: center; gap: clamp(18px, 3vw, 34px); }
.hr10-action-number { color: var(--hr10-gold); font-family: var(--hr10-display); font-size: clamp(54px, 7vw, 88px); line-height: .8; }
.hr10-action-summary .hr10-overline { color: var(--hr10-cyan) !important; }
.hr10-action-summary h2 { max-width: 770px; margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(26px, 3.4vw, 43px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; }
.hr10-action-summary aside { display: flex; flex: none; gap: 7px; }
.hr10-action-summary aside > span { display: grid; min-width: 82px; gap: 3px; padding: 12px; border: 1px solid rgba(244, 240, 232, .12); border-radius: 12px; background: rgba(255, 255, 255, .035); text-align: center; }
.hr10-action-summary aside strong { color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: 23px; font-weight: 400; }.hr10-action-summary aside small { color: rgba(244, 240, 232, .47); font-size: 7.5px; }
.hr10-action-list { display: grid; gap: 10px; }
.hr10-action-list > article { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 17px; border: 1px solid var(--hr10-line); border-left: 3px solid var(--hr10-cyan); border-radius: 14px; background: var(--hr10-paper); }
.hr10-action-list > article.is-urgent { border-left-color: var(--hr10-gold); background: #fffaf0; }.hr10-action-list > article.is-overdue { border-color: rgba(168, 58, 67, .27); border-left-color: var(--hr10-danger); background: #fff6f6; }
.hr10-action-type { display: grid; gap: 5px; align-self: start; }
.hr10-action-type span { color: var(--hr10-info); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.hr10-action-type small { color: var(--hr10-warning); font-size: 8px; font-weight: 800; }
.hr10-action-copy h3 { margin: 0 0 5px; color: var(--hr10-ink); font-size: 13px; line-height: 1.4; }.hr10-action-copy p { margin: 0 0 7px; color: var(--hr10-copy); font-size: 10px; line-height: 1.55; }.hr10-action-copy small { color: var(--hr10-muted); font-size: 8.5px; }
.hr10-empty-success { border-color: rgba(20, 122, 88, .25); background: #f1f9f5; }
.hr10-empty .btn { justify-self: center; margin-top: 6px; }
.hr10-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--hr10-line); color: var(--hr10-muted); font-size: 9px; }.hr10-pagination > div { display: flex; gap: 7px; }

/* Shared decision screens ------------------------------------------- */

.hr10-decision-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: clamp(24px, 4vw, 48px); margin-bottom: 20px; padding: clamp(26px, 4vw, 44px); border: 1px solid rgba(185, 236, 217, .32); border-radius: var(--hr10-radius-lg); background: linear-gradient(145deg, var(--hr10-navy-900), var(--hr10-navy-950)); box-shadow: var(--hr10-shadow); color: var(--hr10-ivory); }
.hr10-decision-hero .hr10-overline { color: var(--hr10-cyan) !important; }.hr10-decision-hero h2 { margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(30px, 4vw, 51px); font-weight: 400; letter-spacing: -.04em; line-height: 1.04; }.hr10-decision-hero > div > p:not(.hr10-overline) { color: rgba(244, 240, 232, .65); font-size: 12px; line-height: 1.7; }
.hr10-decision-hero aside { display: grid; gap: 1px; overflow: hidden; align-content: start; border: 1px solid rgba(244, 240, 232, .12); border-radius: 16px; background: rgba(255, 255, 255, .05); }.hr10-decision-hero aside > .hr10-overline { padding: 15px 15px 6px; }
.hr10-decision-hero aside > div { padding: 12px 15px; background: rgba(3, 16, 31, .38); }.hr10-decision-hero aside strong { color: var(--hr10-ivory); font-size: 9px; }.hr10-decision-hero aside p { margin: 4px 0 0; color: rgba(244, 240, 232, .55); font-size: 9px; line-height: 1.5; }
.hr10-decision-form { display: grid; gap: 16px; }
.hr10-option-list { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }.hr10-option-list legend { margin-bottom: 11px; color: var(--hr10-ink); font-size: 11px; font-weight: 850; }
.hr10-option-list > label { position: relative; margin: 0; }.hr10-option-list > label > input { position: absolute; top: 17px; left: 15px; z-index: 1; width: 18px !important; }
.hr10-option-list > label > span { display: block; padding: 15px 15px 15px 46px; border: 1px solid var(--hr10-line); border-radius: 13px; background: var(--hr10-paper); cursor: pointer; }.hr10-option-list > label > input:checked + span { border-color: var(--hr10-cyan); background: var(--hr10-cyan-soft); box-shadow: var(--hr10-focus); }
.hr10-option-list span > small { display: block; margin-bottom: 5px; color: var(--hr10-info); font-size: 7.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.hr10-option-list span > strong { display: block; color: var(--hr10-ink); font-size: 12px; }.hr10-option-list span > p { margin: 5px 0; color: var(--hr10-muted); font-size: 10px; line-height: 1.55; }.hr10-option-list span > em { color: var(--hr10-copy); font-size: 9px; font-style: normal; font-weight: 750; }
.hr10-decision-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hr10-decision-closed { display: grid; gap: 10px; padding: 20px; border: 1px solid rgba(20, 122, 88, .24); border-radius: 15px; background: #f1f9f5; }.hr10-decision-closed .badge { justify-self: start; }.hr10-decision-closed strong { color: var(--hr10-ink); }.hr10-decision-closed p { margin: 0; color: var(--hr10-copy); font-size: 11px; line-height: 1.6; }.hr10-decision-closed small { color: var(--hr10-muted); font-size: 8.5px; }

/* v10 administration helpers --------------------------------------- */

.hr10-admin-tabs { position: sticky; z-index: 40; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding: 8px; border: 1px solid var(--hr10-line); border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: var(--hr10-shadow-sm); backdrop-filter: blur(12px); }
.hr10-admin-tabs a { padding: 8px 11px; border-radius: 9px; color: var(--hr10-copy); font-size: 9px; font-weight: 800; }.hr10-admin-tabs a:hover { background: var(--hr10-cyan-soft); color: var(--hr10-info); }
.hr10-admin-list { display: grid; gap: 8px; }
.hr10-admin-list > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 13px; border: 1px solid var(--hr10-line); border-radius: 13px; background: var(--hr10-paper); }
.hr10-admin-list h3 { margin: 7px 0 4px; color: var(--hr10-ink); font-size: 12px; }.hr10-admin-list p { margin: 0; color: var(--hr10-muted); font-size: 9px; line-height: 1.5; }.hr10-admin-list details > summary { padding: 7px 9px; border: 1px solid var(--hr10-line); border-radius: 9px; background: #fff; color: var(--hr10-copy); font-size: 9px; font-weight: 800; cursor: pointer; list-style: none; }.hr10-admin-list details[open] { grid-column: 1 / -1; width: 100%; }.hr10-admin-list details[open] > summary { margin-bottom: 12px; }
.hr10-create { margin-top: 12px; padding: 12px; border: 1px dashed rgba(16, 29, 44, .2); border-radius: 13px; background: #fff; }.hr10-create > summary { color: var(--hr10-info); font-size: 10px; font-weight: 850; cursor: pointer; list-style: none; }.hr10-create[open] > summary { margin-bottom: 15px; padding-bottom: 11px; border-bottom: 1px solid var(--hr10-line); }
.hr10-mini-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 17px; }.hr10-mini-metrics > span { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--hr10-line); border-radius: 11px; background: var(--hr10-paper); }.hr10-mini-metrics small { color: var(--hr10-muted); font-size: 7.5px; font-weight: 800; text-transform: uppercase; }.hr10-mini-metrics strong { color: var(--hr10-ink); font-size: 12px; }
.hr10-admin-options { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--hr10-line); border-radius: 13px; }.hr10-admin-options > legend { padding: 0 6px; color: var(--hr10-ink); font-size: 10px; font-weight: 850; }.hr10-admin-options > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px; border: 1px solid var(--hr10-line); border-radius: 11px; background: var(--hr10-paper); }.hr10-admin-options > div .check { align-self: center; }
.hr10-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.hr10-row-actions form { margin: 0; }
.hr10-inline-form { align-items: end; margin-top: 12px; padding: 16px; border: 1px solid var(--hr10-line); border-radius: 13px; background: var(--hr10-paper); }
.hr10-inline-form > :where(.check, .btn) { grid-column: span 6; align-self: end; }
.hr10-inline-form > .check { min-height: 41px; margin: 0; }
.hr10-inline-form > .btn { justify-self: start; }

.hr10-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.hr10-link-grid a { display: grid; min-height: 102px; align-content: center; gap: 6px; padding: 16px; border: 1px solid var(--hr10-line); border-radius: 14px; background: var(--hr10-paper); color: var(--hr10-copy); text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.hr10-link-grid a:hover { border-color: rgba(22, 114, 87, .35); background: var(--hr10-cyan-soft); transform: translateY(-2px); }
.hr10-link-grid strong { color: var(--hr10-ink); font-size: 13px; }
.hr10-link-grid span { color: var(--hr10-muted); font-size: 11px; line-height: 1.5; }

.hr10-digest-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(185, 236, 217, .32); border-radius: var(--hr10-radius-lg); background: radial-gradient(circle at 91% 0, rgba(22, 114, 87, .15), transparent 22rem), var(--hr10-navy-900); box-shadow: var(--hr10-shadow); color: var(--hr10-ivory); }
.hr10-digest-hero .hr10-overline { color: var(--hr10-cyan) !important; }.hr10-digest-hero h2 { max-width: 900px; margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(30px, 4vw, 52px); font-weight: 400; letter-spacing: -.04em; line-height: 1.04; }.hr10-digest-hero p:not(.hr10-overline), .hr10-digest-hero > span { color: rgba(244, 240, 232, .52); font-size: 9px; }.hr10-digest-hero > span { flex: none; }
.hr10-span-8 > .hr10-panel + .hr10-panel, .hr10-span-4 > .hr10-panel + .hr10-panel { margin-top: 20px; }
.hr10-work > span:only-child { grid-column: 1 / -1; }

/* Readability floor: compact metadata remains visually secondary, while
 * explanatory text stays comfortably legible on laptops and phones. */
.hr10-main .hr10-overline { font-size: 10px !important; }
.hr10-command-status { font-size: 11px; }
.hr10-command-meta small, .hr10-pulse-ring small, .hr10-pulse > div:last-child > span { font-size: 10px; }
.hr10-command-meta strong, .hr10-pulse a { font-size: 11px; }
.hr10-answer-head p, .hr10-insight > span, .hr10-timeline-meta, .hr10-card-top > span:not(.badge), .hr10-card-top time { font-size: 10px; }
.hr10-answer > p, .hr10-insight p, .hr10-timeline p, .hr10-empty p, .hr10-goal-card > p, .hr10-roadmap p, .hr10-section-head > div > p:not(.hr10-overline) { font-size: 12px; }
.hr10-answer > small, .hr10-work small, .hr10-answer > a, .hr10-panel-head > a, .hr10-timeline a, .hr10-service-list p { font-size: 11px; }
.hr10-insight small, .hr10-mini-tags span, .hr10-goal-card > small, .hr10-roadmap small, .hr10-next-box small { font-size: 10px; }
.hr10-goal-numbers small { font-size: 9.5px; }
.hr10-service-list strong, .hr10-opinion-banner p:not(.hr10-overline) { font-size: 12px; }
.hr10-filterbar label { font-size: 11px !important; }
.hr10-filterbar > div small, .hr10-filterbar > div span, .hr10-metric-card .hr10-card-top > span, .hr10-metric-comparison > small, .hr10-metric-card footer { font-size: 10px; }
.hr10-filterbar > div strong, .hr10-target strong { font-size: 11px; }
.hr10-target small { font-size: 9.5px; }
.hr10-google-grid span, .hr10-google-grid small, .hr10-connector-strip small, .hr10-insight-grid article > span { font-size: 10px; }
.hr10-connector-strip strong, .hr10-insight-grid strong { font-size: 11px; }
.hr10-insight-grid p { font-size: 12px; }
.hr10-result-list time, .hr10-source-list span > small, .hr10-source-list time, .hr10-value-list article > span, .hr10-value-list small, .hr10-report-list small { font-size: 10px; }
.hr10-result-list strong, .hr10-value-list h3, .hr10-report-list strong { font-size: 12px; }
.hr10-result-list p, .hr10-source-list span > strong, .hr10-value-list p, .hr10-report-list span { font-size: 11px; }
.hr10-action-summary aside small { font-size: 9.5px; }
.hr10-action-type span, .hr10-action-type small, .hr10-action-copy small, .hr10-pagination { font-size: 10px; }
.hr10-action-copy p { font-size: 12px; }
.hr10-decision-hero aside strong, .hr10-option-list span > p { font-size: 11px; }
.hr10-decision-hero aside p, .hr10-option-list span > small, .hr10-option-list span > em, .hr10-decision-closed small { font-size: 10px; }
.hr10-option-list span > strong { font-size: 13px; }
.hr10-admin-tabs a, .hr10-admin-list p, .hr10-admin-list details > summary { font-size: 10.5px; }
.hr10-create > summary, .hr10-mini-metrics small { font-size: 10px; }
.hr10-admin-options > legend, .hr10-digest-hero p:not(.hr10-overline), .hr10-digest-hero > span { font-size: 11px; }

/* Contextual help ---------------------------------------------------- */

.hr10-help {
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(18, 109, 139, .28);
    border-radius: 50%;
    background: rgba(18, 109, 139, .06);
    color: var(--hr10-info);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}
.hr10-command .hr10-help { border-color: rgba(188, 238, 250, .27); background: rgba(22, 114, 87, .08); color: #bceefa; }
.hr10-tooltip {
    position: fixed;
    z-index: 12000;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(185, 236, 217, .31);
    border-radius: 11px;
    background: var(--hr10-navy-950);
    box-shadow: 0 14px 40px rgba(3, 16, 31, .28);
    color: var(--hr10-ivory);
    font-size: 11px;
    line-height: 1.55;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease;
}
.hr10-tooltip[hidden] { display: none; }
.hr10-tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* Help centre -------------------------------------------------------- */

.hr10-help-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 28px;
    align-items: end;
    margin-bottom: 20px;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid rgba(185, 236, 217, .3);
    border-radius: var(--hr10-radius-lg);
    background:
        radial-gradient(circle at 92% 8%, rgba(22, 114, 87, .16), transparent 20rem),
        linear-gradient(145deg, var(--hr10-navy-900), var(--hr10-navy-950));
    box-shadow: var(--hr10-shadow);
    color: var(--hr10-ivory);
}
.hr10-help-hero h2 { margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(30px, 4vw, 52px); font-weight: 400; letter-spacing: -.04em; line-height: 1.03; }
.hr10-help-hero p { max-width: 760px; margin: 16px 0 0; color: rgba(244, 240, 232, .64); font-size: 13px; line-height: 1.7; }
.hr10-help-quick { display: grid; gap: 8px; }
.hr10-help-quick a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(244, 240, 232, .13); border-radius: 12px; background: rgba(255, 255, 255, .035); color: var(--hr10-ivory); font-size: 12px; font-weight: 800; }
.hr10-help-quick a:hover { border-color: rgba(22, 114, 87, .35); background: rgba(22, 114, 87, .07); }
.hr10-help-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.hr10-help-destination { display: flex; min-height: 185px; flex-direction: column; padding: 18px; border: 1px solid var(--hr10-line); border-radius: 16px; background: #fff; box-shadow: var(--hr10-shadow-sm); }
.hr10-help-destination > span { color: var(--hr10-gold); font-family: var(--hr10-display); font-size: 19px; }
.hr10-help-destination h3 { margin: 15px 0 8px; color: var(--hr10-ink); font-size: 14px; }
.hr10-help-destination p { margin: 0; color: var(--hr10-muted); font-size: 12px; line-height: 1.6; }
.hr10-help-destination :where(a, small) { margin-top: auto; padding-top: 16px; font-size: 11px; font-weight: 800; }
.hr10-help-destination a { color: var(--hr10-info); }
.hr10-help-destination small { color: var(--hr10-muted); }
.hr10-help-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: 20px; }
.hr10-help-section { padding: clamp(21px, 2.6vw, 30px); border: 1px solid var(--hr10-line); border-radius: var(--hr10-radius); background: #fff; box-shadow: var(--hr10-shadow-sm); }
.hr10-help-section h2 { margin: 0 0 18px; color: var(--hr10-ink); font-family: var(--hr10-display); font-size: 28px; font-weight: 400; }
.hr10-help-list { display: grid; gap: 10px; }
.hr10-help-list article { padding: 13px 0; border-bottom: 1px solid var(--hr10-line); }
.hr10-help-list article:last-child { border-bottom: 0; }
.hr10-help-list h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--hr10-ink); font-size: 12px; }
.hr10-help-list p { margin: 0; color: var(--hr10-muted); font-size: 12px; line-height: 1.65; }
.hr10-help-contact { display: grid; align-content: start; gap: 10px; }
.hr10-help-contact > p { margin: 0 0 8px; color: var(--hr10-muted); font-size: 11px; line-height: 1.65; }
.hr10-help-contact .btn { width: 100%; }
.hr10-help-note { margin-top: 12px; padding: 12px; border: 1px solid var(--hr10-line); border-radius: 12px; background: var(--hr10-paper); color: var(--hr10-muted); font-size: 11px; line-height: 1.6; }

/* Persistent feedback entry ---------------------------------------- */

.hr10-feedback-fab {
    position: fixed;
    z-index: 300;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    display: none;
    min-height: 46px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 9px;
    border: 1px solid rgba(185, 236, 217, .52);
    border-radius: 999px;
    background: var(--hr10-navy-950);
    box-shadow: 0 15px 40px rgba(3, 16, 31, .27);
    color: var(--hr10-ivory);
    font-size: 10px;
    font-weight: 850;
}
.hr10-feedback-fab > span:first-child { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(185, 236, 217, .45); border-radius: 50%; color: #efdcae; font-size: 15px; }

/* First-visit tour --------------------------------------------------- */

body.hr10-tour-active { overflow: hidden; }
body.hr10-tour-active > :not(.hr10-tour-backdrop):not(.hr10-tour-panel) { pointer-events: none; }
.hr10-tour-backdrop {
    position: fixed;
    z-index: 9000;
    inset: 0;
    background: rgba(1, 8, 16, .76);
    backdrop-filter: blur(2px);
    animation: hr10-fade-in .18s ease both;
}
.hr10-tour-panel {
    position: fixed;
    z-index: 9010;
    right: clamp(14px, 3vw, 42px);
    bottom: clamp(14px, 3vw, 42px);
    width: min(430px, calc(100vw - 28px));
    padding: clamp(21px, 3vw, 30px);
    border: 1px solid rgba(185, 236, 217, .37);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(22, 114, 87, .11), transparent 18rem),
        var(--hr10-navy-900);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
    color: var(--hr10-ivory);
    animation: hr10-tour-up .22s ease both;
}
.hr10-tour-progress { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; color: rgba(244, 240, 232, .58); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hr10-tour-progress > span:last-child { display: flex; flex: 1; justify-content: flex-end; gap: 5px; }
.hr10-tour-progress i { width: 18px; height: 3px; border-radius: 999px; background: rgba(244, 240, 232, .13); }
.hr10-tour-progress i.active { background: var(--hr10-cyan); }
.hr10-tour-panel h2 { margin: 0; color: var(--hr10-ivory); font-family: var(--hr10-display); font-size: clamp(27px, 5vw, 38px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }
.hr10-tour-panel p { margin: 14px 0 0; color: rgba(244, 240, 232, .67); font-size: 12px; line-height: 1.7; }
.hr10-tour-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.hr10-tour-actions button { min-height: 41px; padding: 9px 13px; border: 1px solid rgba(244, 240, 232, .17); border-radius: 11px; background: transparent; color: rgba(244, 240, 232, .78); font-size: 11px; font-weight: 800; cursor: pointer; }
.hr10-tour-actions button:hover { border-color: rgba(244, 240, 232, .32); color: #fff; }
.hr10-tour-actions button:disabled { opacity: .55; cursor: wait; }
.hr10-tour-actions .hr10-tour-next { border-color: var(--hr10-ivory); background: var(--hr10-ivory); color: var(--hr10-navy-950); }
.hr10-tour-actions .hr10-tour-skip { margin-right: auto; padding-left: 0; border-color: transparent; }
.hr10-tour-focus {
    position: relative !important;
    z-index: 9007 !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 4px var(--hr10-cyan), 0 0 0 10px rgba(22, 114, 87, .19), 0 22px 60px rgba(0, 0, 0, .35) !important;
    pointer-events: none;
}
body.hr10-tour-active .hr10-sidebar { z-index: 9005; }
body.hr10-tour-active .hr10-feedback-fab { z-index: 9007; }

@keyframes hr10-fade-in { from { opacity: 0; } }
@keyframes hr10-tour-up { from { opacity: 0; transform: translateY(12px); } }

/* Impersonation ------------------------------------------------------ */

.impersonation-banner,
.hr6-impersonation-banner {
    position: relative;
    z-index: 500;
    padding: 9px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(185, 236, 217, .3) !important;
    background: #172a3e !important;
    color: var(--hr10-ivory) !important;
    font-size: 10px !important;
    text-align: center;
}
body.hr10-is-impersonating .hr10-sidebar { height: calc(100dvh - 38px) !important; top: 38px !important; }

/* Responsive --------------------------------------------------------- */

@media (max-width: 1260px) {
    .hr10-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hr10-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hr10-goal-grid, .hr10-metric-grid, .hr10-google-grid, .hr10-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .app-shell.hr10-shell { display: block !important; }
    body:not(.hr6-login-body) .sidebar.hr10-sidebar {
        position: relative !important;
        top: auto !important;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        padding: 12px clamp(14px, 3vw, 24px) !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(185, 236, 217, .22) !important;
    }
    .hr10-sidebar-head { display: flex; align-items: center; gap: 12px; }
    body:not(.hr6-login-body) .sidebar .brand.hr10-brand { min-width: 0; flex: 1; margin: 0 !important; }
    .hr10-mobile-menu-toggle {
        display: inline-flex !important;
        min-height: 42px;
        align-items: center;
        gap: 9px;
        padding: 9px 13px;
        border: 1px solid rgba(22, 114, 87, .31);
        border-radius: 999px;
        background: rgba(22, 114, 87, .07);
        color: var(--hr10-ivory);
        font-size: 10px;
        font-weight: 850;
        cursor: pointer;
    }
    .hr10-menu-icon,
    .hr10-menu-icon::before,
    .hr10-menu-icon::after { display: block; width: 16px; height: 2px; border-radius: 999px; background: var(--hr10-cyan); transition: transform .16s ease, opacity .16s ease; }
    .hr10-menu-icon { position: relative; }
    .hr10-menu-icon::before, .hr10-menu-icon::after { position: absolute; left: 0; content: ""; }
    .hr10-menu-icon::before { top: -5px; }.hr10-menu-icon::after { top: 5px; }
    .hr10-menu-open .hr10-menu-icon { background: transparent; }
    .hr10-menu-open .hr10-menu-icon::before { top: 0; transform: rotate(45deg); }
    .hr10-menu-open .hr10-menu-icon::after { top: 0; transform: rotate(-45deg); }
    .hr10-sidebar-content { display: none; max-height: min(74vh, 720px); margin-top: 12px; overflow: hidden auto; }
    .hr10-sidebar.hr10-menu-open .hr10-sidebar-content { display: flex; }
    .main.hr10-main { padding: clamp(18px, 3vw, 28px) !important; }
    .hr10-feedback-fab { display: inline-flex; }
    .hr10-command, .hr10-plan-hero, .hr10-decision-hero { grid-template-columns: 1fr; }
    .hr10-pulse { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
    .hr10-pulse-ring { width: 130px; }.hr10-pulse-ring::before { width: 116px; }
    .hr10-layout { grid-template-columns: 1fr; }
    .hr10-span-4, .hr10-span-5, .hr10-span-6, .hr10-span-7, .hr10-span-8, .hr10-span-12 { grid-column: 1; }
    .hr10-help-hero, .hr10-help-columns { grid-template-columns: 1fr; }
    .hr10-action-summary { align-items: stretch; flex-direction: column; }
    .hr10-action-summary aside { align-self: stretch; }
    .hr10-action-summary aside > span { flex: 1; }
    body.hr10-is-impersonating .hr10-sidebar { top: auto !important; height: auto !important; }
}

@media (max-width: 720px) {
    body:not(.hr6-login-body) .topbar.hr10-topbar { align-items: stretch; flex-direction: column; padding: 20px !important; border-radius: 19px !important; }
    .hr10-topbar .topbar-actions { justify-content: flex-start; }
    .hr10-command { padding: 25px 21px; border-radius: 20px; }
    .hr10-command-meta { display: grid; grid-template-columns: 1fr; }
    .hr10-pulse { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .hr10-answer-grid { grid-template-columns: 1fr; }
    .hr10-answer { min-height: 220px; }
    .hr10-goal-grid, .hr10-metric-grid, .hr10-google-grid, .hr10-insight-grid, .hr10-connector-strip { grid-template-columns: 1fr; }
    .hr10-google-sources > section { padding: 15px; }
    .hr10-filterbar { align-items: stretch; flex-direction: column; }
    .hr10-filterbar > div { min-width: 0; text-align: left; }
    .hr10-filterbar form .field { width: 100%; }
    .hr10-opinion-banner, .hr10-digest-hero { align-items: stretch; flex-direction: column; }
    .hr10-opinion-banner .btn { align-self: flex-start; }
    .hr10-action-summary > div { align-items: flex-start; flex-direction: column; }
    .hr10-action-summary aside { display: grid; grid-template-columns: repeat(3, 1fr); }
    .hr10-action-list > article { grid-template-columns: 1fr; }
    .hr10-action-list > article .btn { justify-self: start; }
    .hr10-value-list article { grid-template-columns: 1fr; gap: 5px; }
    .hr10-result-list > :where(a, article) { grid-template-columns: 1fr; }
    .hr10-result-list time { grid-row: auto; }
    .hr10-admin-options > div { grid-template-columns: 1fr; }
    .hr10-inline-form > :where(.check, .btn) { grid-column: span 12; }
    .hr10-help-grid { grid-template-columns: 1fr; }
    .hr10-help-destination { min-height: 155px; }
    .hr10-footer { align-items: flex-start; flex-direction: column; padding-bottom: 70px; }
    .hr10-tour-panel { right: 12px; bottom: 12px; left: 12px; width: auto; }
    .hr10-tour-actions { flex-wrap: wrap; }
}

@media (max-width: 460px) {
    body:not(.hr6-login-body) .sidebar.hr10-sidebar { padding-right: 10px !important; padding-left: 10px !important; }
    .hr10-brand-copy em { font-size: 7.5px !important; }
    .hr10-mobile-menu-toggle > span:first-child { display: none; }
    .main.hr10-main { padding: 14px !important; }
    .hr10-panel { padding: 18px; }
    .hr10-panel-head { align-items: stretch; flex-direction: column; }
    .hr10-action-summary aside { grid-template-columns: 1fr; }
    .hr10-pagination { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
    .hr10-sidebar, .hr10-feedback-fab, .hr10-tour-backdrop, .hr10-tour-panel, .hr10-tooltip, .topbar-actions { display: none !important; }
    .app-shell.hr10-shell { display: block !important; }
    .main.hr10-main { width: 100% !important; padding: 0 !important; }
    .hr10-command, .hr10-panel, .hr10-answer, .card { break-inside: avoid; box-shadow: none !important; }
}