:root {
    --navy: #1a2f4e;
    --navy-hover: #142844;
    --orange: #f5a623;
    --blue-link: #1c5b9b;
    --tbl-head: #f0f2f5;
    --border: #dce1e8;
    --bg: #f4f6f9;
    --muted: #8a9ab0;
    --sidebar-w: 330px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    background: var(--bg);
    font-size: 14px;
    color: #2c3e50;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ── SIDEBAR OVERLAY ── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, .38);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.sidebar-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* ── SIDEBAR ── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100%;
    background: #fff;
    z-index: 400;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .13);
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-site-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.sidebar-username {
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
}

.sidebar-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--muted);
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.sidebar-close:hover {
    color: var(--navy);
    background: #f0f4f8;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
    user-select: none;
}

.nav-item:hover {
    background: #f4f7fb;
}

.nav-item.active {
    background: #eef3fb;
    border-left-color: var(--blue-link);
}

.nav-item.active .nav-label {
    color: var(--blue-link);
}

.nav-item.active .nav-icon {
    color: var(--blue-link);
}

.nav-icon {
    color: var(--navy);
    flex-shrink: 0;
}

.nav-texts {
    flex: 1;
}

.nav-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.nav-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 1px;
}

.nav-chevron {
    color: var(--muted);
    transition: transform .2s;
    flex-shrink: 0;
}

.nav-item.expanded .nav-chevron {
    transform: rotate(90deg);
}

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

.sub-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
}

.sub-menu.open {
    max-height: 520px;
}

.sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 52px;
    cursor: pointer;
    font-size: 13px;
    color: #4a5a6b;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.sub-item:hover {
    background: #f4f7fb;
    color: var(--blue-link);
}

.sub-item.active {
    color: var(--blue-link);
    font-weight: 600;
}

.sub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
}

.sub-item.active .sub-dot {
    background: var(--blue-link);
}

.sub-item.is-planned {
    cursor: default;
    color: #94a3b8;
}

.sub-item.is-planned:hover {
    background: transparent;
    color: #94a3b8;
}

.sub-status {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: #7b8a9b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sidebar-footer {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── TOPBAR ── */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: var(--muted);
    transition: background .15s, color .15s;
}

.menu-btn:hover {
    background: #f0f4f8;
    color: var(--navy);
}

.breadcrumb-title {
    font-size: 14px;
    color: var(--muted);
}

.breadcrumb-title span {
    color: var(--blue-link);
    font-weight: 600;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-badge {
    color: var(--orange);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-app-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #d7e0ea;
    border-radius: 11px;
    background: #f2f5f8;
    box-shadow: 0 2px 8px rgba(26, 47, 78, .06);
}

.topbar-app-brand {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 8px;
    border-right: 1px solid #d7e0ea;
}

.topbar-app-brand svg {
    width: 82px;
    height: auto;
}

.topbar-app-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    color: #637386;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}

.topbar-app-link:hover {
    color: var(--navy);
    background: rgba(255, 255, 255, .65);
}

.topbar-app-link.active {
    color: #fff;
    background: var(--navy);
    box-shadow: 0 2px 6px rgba(26, 47, 78, .2);
}

.topbar-app-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}

@media (max-width: 720px) {
    .topbar-app-brand {
        display: none;
    }

    .topbar-app-link {
        padding: 0 8px;
    }

    .breadcrumb-title {
        display: none;
    }
}

@media (max-width: 430px) {
    .topbar-app-link {
        font-size: 11px;
    }

    .topbar-app-dot {
        display: none;
    }
}

/* ── MAIN GROWS to push footer down ── */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-toast-stack {
    position: fixed;
    top: 68px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 700;
    width: min(420px, calc(100vw - 32px));
}

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #fff;
    box-shadow: 0 14px 32px rgba(26, 47, 78, .12);
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
}

.app-toast.is-hiding {
    opacity: 0;
    transform: translateY(-10px);
}

.app-toast-success {
    background: #eafaf1;
    border-color: #b8e5c6;
    color: #1f7a45;
}

.app-toast-danger {
    background: #fbeaea;
    border-color: #f1c0bb;
    color: #c0392b;
}

.app-toast-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.app-toast-body {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}

.app-toast-close {
    border: 0;
    background: transparent;
    color: currentColor;
    padding: 0;
    cursor: pointer;
    opacity: .72;
    flex-shrink: 0;
}

.app-toast-close:hover {
    opacity: 1;
}

.page-content {
    flex: 1;
    padding: 24px 32px 28px;
}

/* ── TABS ── */
.page-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    align-items: center;
    gap: 0;
}

.tab-item {
    padding: 8px 0;
    margin-right: 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}

.tab-item.active {
    color: var(--blue-link);
    border-bottom-color: var(--blue-link);
}

.tab-item:hover:not(.active) {
    color: var(--blue-link);
}

@media (max-width: 720px) {
    .page-tabs {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 -4px 18px;
        padding: 0 4px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 1px solid var(--border);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #c9d6e4 transparent;
    }

    .page-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .page-tabs::-webkit-scrollbar-track {
        background: transparent;
    }

    .page-tabs::-webkit-scrollbar-thumb {
        background: #c9d6e4;
        border-radius: 999px;
    }

    .tab-item {
        flex: 0 0 auto;
        margin-right: 0;
        margin-bottom: -1px;
        padding: 10px 0;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        white-space: nowrap;
        line-height: 1.2;
        box-shadow: none;
    }

    .tab-item.active {
        border-bottom-color: var(--blue-link);
        background: transparent;
        border-color: transparent transparent var(--blue-link) transparent;
        box-shadow: none;
    }
}

/* ── SEARCH ── */
.search-wrapper {
    position: relative;
    margin-bottom: 18px;
}

.search-wrapper input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 9px 44px 9px 14px;
    font-size: 14px;
    background: #fff;
    color: #2c3e50;
    outline: none;
    transition: border-color .15s;
}

.search-wrapper input:focus {
    border-color: var(--blue-link);
    box-shadow: 0 0 0 3px rgba(28, 91, 155, .08);
}

.search-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}

/* ── TOOLBAR ── */
.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 220px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.list-select {
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 7px 34px 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%238a9ab0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    cursor: pointer;
    min-width: 200px;
    outline: none;
}

.legend-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #6c7a8a;
    user-select: none;
}

/* ── BUTTONS ── */
.btn-outline-tool {
    border: 1.5px solid var(--border);
    background: #fff;
    color: #2c3e50;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
    text-decoration: none;
}

.btn-outline-tool:hover {
    border-color: var(--blue-link);
    background: #f0f5fb;
    color: var(--blue-link);
}

.btn-filter {
    border: 1.5px solid var(--navy);
    background: #fff;
    color: var(--navy);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .15s;
}

.btn-filter:hover {
    background: #e8edf3;
}

.btn-add-product {
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.btn-add-product:hover {
    background: var(--navy-hover);
}

/* ── TABLE ── */
.inv-table-wrapper {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
}

.inv-table thead tr {
    background: var(--tbl-head);
    border-bottom: 1.5px solid var(--border);
}

.inv-table thead th {
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #4a5a6b;
    white-space: nowrap;
}

.inv-table thead th.sortable {
    cursor: pointer;
}

.inv-table thead th.sortable:hover {
    color: var(--blue-link);
}

.th-icon {
    width: 40px;
    text-align: center;
}

.inv-table tbody tr {
    border-bottom: 1px solid #edf0f4;
    transition: background .1s;
}

.inv-table tbody tr:last-child {
    border-bottom: none;
}

.inv-table tbody tr:hover {
    background: #f7f9fc;
}

.inv-table tbody td {
    padding: 11px 14px;
    vertical-align: top;
}

.status-square {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    display: inline-block;
}

.status-square.blue {
    background: #1a2f4e;
}

.status-square.green {
    background: #27ae60;
}

.status-square.yellow {
    background: #f5a623;
}

.status-square.red {
    background: #e74c3c;
}

.status-square.purple {
    background: #8e44ad;
}

.status-square.teal {
    background: #16a085;
}

.status-square.gray {
    background: #7f8c8d;
}

.status-square.pink {
    background: #e91e8c;
}

.status-square.indigo {
    background: #3f51b5;
}

.warn-icon svg {
    color: var(--orange);
}

.product-name {
    font-weight: 700;
    color: #1c2f44;
    font-size: 14px;
}

.site-list-label {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.site-list-value {
    font-size: 12.5px;
    color: var(--blue-link);
    text-decoration: underline;
    cursor: pointer;
}

.int-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue-link);
    background: #e8f0fb;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #c6d8f5;
    display: inline-block;
    white-space: nowrap;
}

.subcategory-text,
.company-text {
    color: #3d5166;
    font-size: 13px;
}

.date-text {
    color: var(--muted);
    font-size: 13px;
}

.x-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--muted);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.x-check:hover {
    border-color: #e74c3c;
    background: #fdf0f0;
}

.x-check svg {
    color: var(--muted);
}

.x-check:hover svg {
    color: #e74c3c;
}

.th-x-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--muted);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── PAGINATION ── */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    background: #fafbfc;
    flex-wrap: wrap;
    gap: 10px;
}

.page-info {
    font-size: 12.5px;
    color: var(--muted);
}

.page-info strong {
    color: #2c3e50;
}

.page-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn {
    min-width: 30px;
    height: 30px;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    transition: all .15s;
}

.page-btn:hover:not([disabled]) {
    border-color: var(--blue-link);
    color: var(--blue-link);
    background: #f0f5fb;
}

.page-btn.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.page-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.page-size-select {
    border: 1.5px solid var(--border);
    border-radius: 5px;
    padding: 4px 24px 4px 8px;
    font-size: 12.5px;
    color: #2c3e50;
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%238a9ab0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    appearance: none;
    cursor: pointer;
    outline: none;
}

/* ── FOOTER always at bottom ── */
.site-footer {
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}

.sgs-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #e85c00;
    text-transform: uppercase;
}

.footer-right {
    display: flex;
    gap: 20px;
}

.site-footer a {
    color: var(--muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--blue-link);
}

.footer-support {
    display: flex;
    align-items: center;
    gap: 5px;
}

.company-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 500;
}

.company-modal-shell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 510;
}

.company-modal-shell.open,
.company-modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

.company-modal {
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(26, 47, 78, .16);
}

.company-modal-header {
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.company-modal-header h2 {
    margin: 0;
    font-size: 21px;
    color: var(--navy);
}

.company-modal-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.company-modal-close {
    border: 0;
    background: #f3f5f8;
    color: var(--muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.company-modal-close:hover {
    color: var(--navy);
    background: #e8edf3;
}

.company-form {
    padding: 20px 22px 22px;
}

.company-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.company-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.company-field-full {
    grid-column: 1 / -1;
}

.company-field label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4a5a6b;
    letter-spacing: .25px;
}

.company-field input,
.company-field select,
.company-field textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    color: #2c3e50;
    background: #fff;
    outline: none;
}

.company-field textarea {
    resize: vertical;
    min-height: 96px;
}

.company-field input:focus,
.company-field select:focus,
.company-field textarea:focus {
    border-color: var(--blue-link);
    box-shadow: 0 0 0 3px rgba(28, 91, 155, .08);
}

.company-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .app-toast-stack {
        top: 60px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .company-grid {
        grid-template-columns: 1fr;
    }

    .company-modal-shell {
        padding: 12px;
    }
}
body:not(.is-system-admin) .system-admin-only {
    display: none !important;
}

body:not(.is-system-admin) [aria-label="Edit regulation"],
body:not(.is-system-admin) [aria-label="Delete regulation"] {
    display: none !important;
}


/* Hazard Profile workspace, scoped to public CS routes. */
body.hzf-page {
    --bs-navy: #0d2340;
    --bs-navy-mid: #143356;
    --bs-navy-light: #1a4a7a;
    --bs-orange: #f26522;
    --bs-orange-light: #ff8040;
    --bs-blue-rating: #3b82f6;
    --bs-accent: #0ea5e9;
    --bg-page: #f0f4f8;
    --bg-card: #ffffff;
    --text-muted-custom: #64748b;
    --border-color: #e2e8f0;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 60px;
}


body.hzf-page .system-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

body.hzf-page .system-icon-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    appearance: none;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

body.hzf-page .system-icon-btn svg {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    overflow: visible;
    pointer-events: none;
}

body.hzf-page .system-icon-btn:hover {
    border-color: var(--bs-navy-light);
    background: #f8fafc;
    color: var(--bs-navy);
}

body.hzf-page .system-icon-btn:focus-visible {
    outline: 0;
    border-color: var(--bs-navy-light);
    box-shadow: 0 0 0 3px rgba(26, 74, 122, .16);
}

body.hzf-page .system-icon-btn.danger {
    color: #b91c1c;
}

body.hzf-page .system-icon-btn.danger:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

body.hzf-page .system-icon-btn.ghs-icon-btn {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #d97706;
}

body.hzf-page .system-icon-btn.ghs-icon-btn:hover {
    border-color: #fdba74;
    background: #ffedd5;
    color: #b45309;
}


body.hzf-page .filter-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    margin-bottom: 20px;
}

body.hzf-page .industry-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

body.hzf-page .ind-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all .18s;
    background: transparent;
    color: #475569;
    font-size: .8rem;
    font-weight: 500;
    min-width: 80px;
}

body.hzf-page .ind-tab svg {
    width: 28px;
    height: 28px;
    color: #94a3b8;
    transition: color .18s;
}

body.hzf-page .ind-tab:hover {
    border-color: var(--bs-navy-light);
    color: var(--bs-navy);
}

body.hzf-page .ind-tab:hover svg {
    color: var(--bs-navy-light);
}

body.hzf-page .ind-tab.active {
    border-color: var(--bs-navy);
    background: var(--bs-navy);
    color: #fff;
}

body.hzf-page .ind-tab.active svg {
    color: #fff;
}

body.hzf-page .filter-dropdowns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body.hzf-page .product-search-form {
    flex: 1 1 320px;
    min-width: 260px;
}

body.hzf-page .product-search-box {
    display: flex;
    align-items: center;
    min-height: 38px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    transition: border-color .15s, box-shadow .15s;
}

body.hzf-page .product-search-box:focus-within {
    border-color: var(--bs-navy-light);
    box-shadow: 0 0 0 3px rgba(24, 62, 93, .08);
}

body.hzf-page .product-search-box > svg {
    width: 17px;
    height: 17px;
    margin-left: 12px;
    color: #64748b;
    flex-shrink: 0;
}

body.hzf-page .product-search-box input {
    min-width: 0;
    flex: 1;
    padding: 8px 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #334155;
    font: .83rem 'DM Sans', sans-serif;
}

body.hzf-page .product-search-box input::-webkit-search-cancel-button {
    cursor: pointer;
}

body.hzf-page .product-search-box button {
    align-self: stretch;
    padding: 0 14px;
    border: 0;
    background: var(--bs-navy);
    color: #fff;
    font: 600 .8rem 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background .15s;
}

body.hzf-page .product-search-box button:hover {
    background: var(--bs-navy-light);
}

body.hzf-page .filter-select {
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    padding: 8px 32px 8px 12px;
    font-size: .83rem;
    font-family: 'DM Sans', sans-serif;
    color: #334155;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
    min-width: 150px;
}

body.hzf-page .filter-select:focus {
    border-color: var(--bs-navy-light);
}

body.hzf-page .filter-select.active-filter {
    border-color: var(--bs-navy);
    background-color: #f0f4f8;
    font-weight: 600;
    color: var(--bs-navy);
}

body.hzf-page .import-tool-menu {
    min-width: 230px;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 32, 54, .18);
}

body.hzf-page .import-tool-menu .dropdown-item {
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--bs-navy);
    font-size: .84rem;
}

body.hzf-page .import-tool-menu .dropdown-header {
    padding: 7px 12px 4px;
    color: var(--text-muted-custom);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.hzf-page .import-tool-menu .dropdown-item:hover,
body.hzf-page .import-tool-menu .dropdown-item:focus {
    color: var(--bs-navy);
    background: rgba(255, 113, 0, .1);
}

body.hzf-page .btn-clear {
    background: var(--bs-orange);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: .83rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
    text-decoration: none;
}

body.hzf-page .btn-clear:hover {
    background: var(--bs-orange-light);
    color: #fff;
}

body.hzf-page .btn-clear:disabled,
body.hzf-page .btn-clear[disabled] {
    cursor: not-allowed;
    opacity: .55;
}

body.hzf-page .btn-clear:disabled:hover,
body.hzf-page .btn-clear[disabled]:hover {
    background: var(--bs-orange);
}

body.hzf-page .btn-clear svg {
    width: 14px;
    height: 14px;
}

body.hzf-page .btn-last {
    background: transparent;
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: .83rem;
    font-family: 'DM Sans', sans-serif;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
    text-decoration: none;
}

body.hzf-page .btn-last:hover {
    border-color: #94a3b8;
    color: #1e293b;
}

body.hzf-page .btn-last svg {
    width: 14px;
    height: 14px;
}

body.hzf-page .hide-filters-btn {
    text-align: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: .82rem;
    color: var(--text-muted-custom);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .15s;
    user-select: none;
}

body.hzf-page .hide-filters-btn:hover {
    color: var(--bs-navy);
}

body.hzf-page .hide-filters-btn svg {
    width: 14px;
    height: 14px;
    transition: transform .25s;
}

body.hzf-page .hide-filters-btn.collapsed svg {
    transform: rotate(180deg);
}


body.hzf-page .results-card {
    background: var(--bg-card);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
    margin-bottom: 20px;
}

body.hzf-page .results-table {
    width: 100%;
    border-collapse: collapse;
}

body.hzf-page .results-table thead tr {
    background: #f8fafc;
    border-bottom: 1.5px solid var(--border-color);
}

body.hzf-page .results-table th {
    padding: 13px 16px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted-custom);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

body.hzf-page .results-table th .sort-icons {
    display: inline-flex;
    flex-direction: column;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 0;
    gap: 1px;
    opacity: .4;
}

body.hzf-page .results-table th .sort-icons svg {
    width: 8px;
    height: 8px;
}

body.hzf-page .results-table th:hover {
    color: var(--bs-navy);
}

body.hzf-page .results-table th:hover .sort-icons {
    opacity: .8;
}

body.hzf-page .results-table tbody tr.main-row {
    border-bottom: 1px solid var(--border-color);
    transition: background .12s;
    cursor: pointer;
}

body.hzf-page .results-table tbody tr.main-row:hover {
    background: #f8fafc;
}

body.hzf-page .results-table td {
    padding: 13px 16px;
    font-size: .87rem;
    color: #1e293b;
    vertical-align: middle;
}

body.hzf-page .expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted-custom);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

body.hzf-page .expand-btn:hover {
    color: var(--bs-navy);
    background: #e2e8f0;
}

body.hzf-page .expand-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .2s;
}

body.hzf-page .expand-btn.open svg {
    transform: rotate(180deg);
}

body.hzf-page .tool-id-badge {
    font-family: 'Space Grotesk', monospace;
    font-weight: 600;
    color: var(--bs-navy);
    font-size: .87rem;
}

body.hzf-page .product-name {
    font-weight: 600;
    color: #1e293b;
}

body.hzf-page .industry-icon {
    width: 24px;
    height: 24px;
    color: #94a3b8;
}

body.hzf-page .supplier-name {
    color: #334155;
}

body.hzf-page .subcat-text {
    color: #334155;
}

body.hzf-page .prodrange-text {
    color: #334155;
}


body.hzf-page .detail-row td {
    padding: 0 !important;
    border-bottom: 2px solid var(--border-color);
}

body.hzf-page .detail-inner {
    padding: 24px;
    background: #f8fafc;
    display: none;
}

body.hzf-page .detail-inner.show {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

body.hzf-page .detail-industry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

body.hzf-page .detail-industry-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #e2eaf5;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.hzf-page .detail-industry-icon svg {
    width: 32px;
    height: 32px;
    color: var(--bs-navy);
}

body.hzf-page .detail-industry-label {
    font-size: .75rem;
    color: var(--text-muted-custom);
    font-weight: 500;
}

body.hzf-page .detail-info {
    flex: 1;
    min-width: 220px;
}

body.hzf-page .detail-info table {
    width: 100%;
    border-collapse: collapse;
}

body.hzf-page .detail-info td {
    padding: 4px 0 !important;
    font-size: .85rem;
    border: none;
    background: transparent !important;
}

body.hzf-page .detail-label {
    color: var(--bs-orange) !important;
    font-weight: 600;
    width: 130px;
    padding-right: 12px !important;
}

body.hzf-page .detail-link {
    color: var(--bs-navy-light);
    text-decoration: none;
    border-bottom: 1px dashed var(--bs-navy-light);
    font-size: .85rem;
    transition: color .15s;
}

body.hzf-page .detail-link:hover {
    color: var(--bs-orange);
    border-bottom-color: var(--bs-orange);
}

body.hzf-page .product-substance-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--bs-navy);
    font-size: .76rem;
    font-weight: 800;
}

body.hzf-page .product-risk-badge {
    display: inline-flex;
    width: 48px;
    height: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
}

body.hzf-page .product-risk-badge.has-risk-color {
    border-color: #cbd5e1;
    background: var(--product-classification-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

body.hzf-page .ctza-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body.hzf-page .ctza-badge.qualified {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

body.hzf-page .ctza-badge.cs-check {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

body.hzf-page .ctza-badge.effect-check {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

body.hzf-page .ctza-badge.not-qualified {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

body.hzf-page .product-classification-btn {
    width: fit-content;
    margin-top: 14px;
    background: #fff;
    border: 1.5px solid var(--border-color);
    color: var(--bs-navy);
}

body.hzf-page .product-classification-btn:hover {
    background: #f8fafc;
    border-color: var(--bs-navy-light);
    color: var(--bs-navy);
}

body.hzf-page .product-classification-btn.has-risk-color {
    background: var(--product-classification-color);
    border-color: var(--product-classification-color);
    color: var(--product-classification-text);
}

body.hzf-page .product-classification-btn.has-risk-color:hover {
    filter: brightness(.96);
    color: var(--product-classification-text);
}

body.hzf-page .badge-rating {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
}

body.hzf-page .badge-blue {
    background: var(--bs-blue-rating);
    color: #fff;
}

body.hzf-page .detail-desc,
body.hzf-page .product-hazard-detail {
    flex: 1.5;
    min-width: 240px;
}

body.hzf-page .detail-desc h6,
body.hzf-page .product-hazard-detail h6 {
    font-size: .8rem;
    font-weight: 700;
    color: var(--bs-orange);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

body.hzf-page .detail-desc p,
body.hzf-page .product-hazard-detail p,
body.hzf-page .product-hazard-lines {
    font-size: .85rem;
    color: #475569;
    line-height: 1.6;
}

body.hzf-page .product-hazard-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

body.hzf-page .product-hazard-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body.hzf-page .product-hazard-badge.has-color {
    background: var(--product-hcode-color);
    color: var(--product-hcode-text);
}

body.hzf-page .detail-sustain {
    flex: 1 1 100%;
    min-width: 0;
}

body.hzf-page .detail-sustain h6 {
    font-size: .8rem;
    font-weight: 700;
    color: var(--bs-orange);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 12px;
}

body.hzf-page .sustain-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

body.hzf-page .sustain-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e2eaf5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.hzf-page .sustain-icon svg {
    width: 20px;
    height: 20px;
    color: var(--bs-navy);
}

body.hzf-page .sustain-text {
    font-size: .8rem;
    color: #475569;
    line-height: 1.5;
}

body.hzf-page .sustain-label {
    font-weight: 600;
    color: #1e293b;
    font-size: .82rem;
    display: block;
}

body.hzf-page .substance-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body.hzf-page .substance-heading h6 {
    margin-bottom: 0;
}

body.hzf-page .substance-add-btn {
    min-height: 32px;
    padding: 7px 10px;
    font-size: .74rem;
    white-space: nowrap;
}

body.hzf-page .substance-add-btn svg {
    width: 14px;
    height: 14px;
}

body.hzf-page .substance-table-wrap {
    overflow-x: auto;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

body.hzf-page .substance-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #fff;
}

body.hzf-page .substance-table th,
body.hzf-page .substance-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: .8rem;
    vertical-align: top;
}

body.hzf-page .substance-table th {
    background: #f8fafc;
    color: var(--text-muted-custom);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
}

body.hzf-page .substance-table tr:last-child td {
    border-bottom: 0;
}

body.hzf-page .substance-table td:last-child {
    text-align: left;
    white-space: nowrap;
}

body.hzf-page .substance-table .system-action-group {
    justify-content: flex-start;
}

body.hzf-page .substance-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body.hzf-page .substance-list-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--bs-navy);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body.hzf-page .hazard-code-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 92px;
}

body.hzf-page .eu-soc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 100px;
}

body.hzf-page .eu-soc-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body.hzf-page .eu-soc-badge.not-eu-soc {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

body.hzf-page .consumer-safety-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

body.hzf-page .consumer-safety-badge:hover,
body.hzf-page .consumer-safety-badge:focus-visible {
    border-color: #2563eb;
    background: #dbeafe;
    color: #1e40af;
}

body.hzf-page .consumer-safety-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 112px;
}

body.hzf-page .consumer-safety-badge.calculated-cs {
    border-color: #86d3a4;
    background: #ecfdf3;
    color: #167044;
}

body.hzf-page .consumer-safety-badge.calculated-cs:hover,
body.hzf-page .consumer-safety-badge.calculated-cs:focus-visible {
    border-color: #27a65f;
    background: #dff8e8;
    color: #116038;
}

body.hzf-page .cs-profile-modal .modal-body {
    display: grid;
    gap: 18px;
}

body.hzf-page .cs-profile-heading {
    margin-bottom: 0;
}

body.hzf-page .cs-profile-section {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

body.hzf-page .cs-profile-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

body.hzf-page .cs-profile-section-title > span,
body.hzf-page .cs-profile-endpoint-id {
    display: inline-grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 7px;
    background: #e8eef5;
    color: var(--bs-navy);
    font-size: .68rem;
    font-weight: 800;
}

body.hzf-page .cs-profile-section-title h6 {
    margin: 0;
    color: var(--bs-navy);
    font-size: .92rem;
}

body.hzf-page .cs-profile-endpoint-id {
    display: inline-grid;
    margin-right: 5px;
    vertical-align: middle;
}

body.hzf-page .cs-profile-json {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

body.hzf-page .cs-profile-json summary {
    padding: 13px 16px;
    color: var(--bs-navy);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

body.hzf-page .cs-profile-json pre {
    max-height: 360px;
    margin: 0;
    padding: 16px;
    overflow: auto;
    background: var(--bs-navy);
    color: #e2e8f0;
    font-size: .72rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 760px) {
    body.hzf-page .cs-profile-section {
        padding: 13px;
    }
}

body.hzf-page .bssl-table {
    min-width: 1680px;
}

body.hzf-page .bssl-long-text {
    min-width: 190px;
    white-space: pre-line;
    line-height: 1.5;
}

body.hzf-page .hazard-code-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body.hzf-page .substance-risk-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    background: var(--substance-risk-color);
    border: 2px solid rgba(15, 23, 42, .08);
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 23, 42, .18);
    vertical-align: middle;
}

body.hzf-page .substance-risk-dot.empty {
    background: #fff;
    border-color: var(--border-color);
    box-shadow: none;
}

body.hzf-page .substance-empty {
    color: #64748b;
    text-align: center;
}

body.hzf-page .substance-editor-page .system-header {
    align-items: flex-end;
}

body.hzf-page .substance-header-add-btn {
    margin-block: 10px;
}

body.hzf-page .substance-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

body.hzf-page .substance-back-link:hover {
    color: var(--bs-navy);
}

body.hzf-page .substance-back-link svg {
    width: 16px;
    height: 16px;
}

body.hzf-page .product-summary-card {
    padding: 18px 20px;
}

body.hzf-page .product-summary-main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

body.hzf-page .product-summary-main h2 {
    color: var(--bs-navy);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 2px;
}

body.hzf-page .product-summary-main p,
body.hzf-page .product-summary-desc {
    color: #64748b;
    margin: 0;
}

body.hzf-page .product-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.hzf-page .product-summary-grid div {
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

body.hzf-page .product-summary-grid span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}

body.hzf-page .product-summary-grid strong {
    color: #1e293b;
    font-size: .9rem;
}

body.hzf-page .product-summary-desc {
    border-top: 1.5px solid var(--border-color);
    margin-top: 14px;
    padding-top: 14px;
    line-height: 1.6;
}

body.hzf-page .substance-editor-card {
    overflow: visible;
}

body.hzf-page .substance-readonly-table {
    min-width: 980px;
}

body.hzf-page .substance-readonly-table th:last-child {
    width: 72px;
}

body.hzf-page .suggestion-field {
    position: relative;
}

body.hzf-page .suggestion-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

body.hzf-page .suggestion-menu.show {
    display: block;
}

body.hzf-page .suggestion-option {
    width: 100%;
    border: 0;
    background: #fff;
    color: #1e293b;
    text-align: left;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.hzf-page .suggestion-option:hover {
    background: #f8fafc;
}

body.hzf-page .suggestion-empty {
    color: #64748b;
    font-size: .82rem;
    padding: 12px;
}

body.hzf-page .suggestion-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px;
    color: #475569;
    font-size: .82rem;
    background: #f8fafc;
}

body.hzf-page .suggestion-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid #cbd5e1;
    border-top-color: var(--bs-blue);
    border-radius: 50%;
    animation: hzfSpin .7s linear infinite;
}

body.hzf-page .suggestion-option strong {
    font-size: .82rem;
}

body.hzf-page .suggestion-option span,
body.hzf-page .inline-meta {
    color: #64748b;
    font-size: .74rem;
}

@keyframes hzfSpin {
    to {
        transform: rotate(360deg);
    }
}

body.hzf-page .inline-meta {
    display: block;
    margin-top: 5px;
}

body.hzf-page .selected-substance-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 46px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1.5px dashed var(--border-color);
    border-radius: 8px;
    color: #64748b;
    font-size: .82rem;
    background: #f8fafc;
}

body.hzf-page .selected-substance-preview.selected {
    border-style: solid;
    border-color: #cbd5e1;
    color: #1e293b;
    background: #fff;
}

body.hzf-page .selected-substance-preview strong {
    color: var(--bs-navy);
}

body.hzf-page .selected-substance-preview span {
    color: #64748b;
    font-size: .76rem;
}

body.hzf-page .classification-modal-heading {
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px 16px;
    margin-bottom: 14px;
}

body.hzf-page .manual-classification-modal .modal-header,
body.hzf-page .manual-classification-modal .modal-footer {
    padding: 10px 16px;
}

body.hzf-page .manual-classification-modal .modal-body {
    padding: 12px 16px;
}

body.hzf-page .manual-classification-substance {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    margin-bottom: 10px;
}

body.hzf-page .system-form-grid.manual-classification-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.hzf-page .manual-not-classified-panel {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
}

body.hzf-page .manual-hazard-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

body.hzf-page .manual-hazard-add-btn {
    min-height: 38px;
    padding-inline: 16px;
}

body.hzf-page .manual-classification-status {
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: .78rem;
}

body.hzf-page .manual-classification-status.error {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fef2f2;
}

body.hzf-page .hazard-code-badge.not-classified {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

body.hzf-page .app-flag {
    display: inline-flex;
    align-items: center;
    min-width: 42px;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

body.hzf-page .app-flag.yes {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

body.hzf-page .manual-classification-form-grid .system-field {
    gap: 4px;
}

body.hzf-page .manual-classification-form-grid .form-control,
body.hzf-page .manual-classification-form-grid .selected-substance-preview {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
}

body.hzf-page .manual-classification-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 6px;
}

body.hzf-page .manual-classification-table-wrap {
    max-height: 210px;
    overflow: auto;
    padding: 4px;
}

body.hzf-page .manual-classification-table-wrap .substance-table {
    min-width: 760px;
}

body.hzf-page .manual-classification-table-wrap .substance-table th,
body.hzf-page .manual-classification-table-wrap .substance-table td {
    padding: 7px 9px;
    font-size: .74rem;
}

body.hzf-page .manual-classification-table-wrap .substance-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

body.hzf-page [data-ghs-modal] .modal-body {
    position: relative;
    min-height: 320px;
}

body.hzf-page .ghs-filter-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}

body.hzf-page .ghs-filter-bar label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted-custom);
    font-size: .78rem;
    font-weight: 700;
}

body.hzf-page .ghs-filter-bar .form-select {
    min-width: 180px;
    min-height: 36px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    color: var(--bs-navy);
    font-size: .82rem;
}

body.hzf-page .ghs-loading-screen {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    background: rgba(255, 255, 255, .96);
    color: var(--text-muted-custom);
    text-align: center;
}

body.hzf-page .ghs-loading-screen[hidden] {
    display: none;
}

body.hzf-page .ghs-loading-screen strong {
    margin-top: 5px;
    color: var(--bs-navy);
    font-size: 1rem;
}

body.hzf-page .ghs-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #dce6ef;
    border-top-color: var(--bs-blue);
    border-radius: 50%;
    animation: hzfGhsSpin .75s linear infinite;
}

@keyframes hzfGhsSpin {
    to { transform: rotate(360deg); }
}

body.hzf-page .ghs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

body.hzf-page .ghs-page-info {
    color: var(--text-muted-custom);
    font-size: .82rem;
    font-weight: 500;
}

body.hzf-page .ghs-page-actions,
body.hzf-page .ghs-page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.hzf-page .ghs-page-actions .page-btn svg {
    width: 14px;
    height: 14px;
}

body.hzf-page .ghs-page-actions .page-btn:disabled {
    cursor: not-allowed;
    opacity: .45;
}

body.hzf-page .ghs-page-ellipsis {
    display: inline-flex;
    min-width: 20px;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-custom);
    font-weight: 700;
}

body.hzf-page .ghs-use-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

body.hzf-page .ghs-use-toggle .form-check-input {
    margin: 0;
}

body.hzf-page .not-classified-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 1.5px solid var(--border-color);
    margin-top: 14px;
    padding: 16px 8px 4px;
}

body.hzf-page .not-classified-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: #1e293b;
}

body.hzf-page .not-classified-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--bs-orange);
}

body.hzf-page .not-classified-check span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.hzf-page .not-classified-check strong {
    font-size: .86rem;
    color: var(--bs-navy);
}

body.hzf-page .not-classified-check small {
    color: #64748b;
    font-size: .76rem;
}

body.hzf-page .results-table .substance-table th,
body.hzf-page .results-table .substance-table td,
body.hzf-page .detail-sustain .substance-table th,
body.hzf-page .detail-sustain .substance-table td {
    text-align: left !important;
    padding: 12px 16px !important;
    vertical-align: top !important;
}

body.hzf-page .results-table .substance-table th,
body.hzf-page .detail-sustain .substance-table th {
    cursor: default;
    user-select: text;
}

body.hzf-page .results-table .substance-table .system-action-group,
body.hzf-page .detail-sustain .substance-table .system-action-group {
    justify-content: flex-start !important;
}


body.hzf-page .results-footer {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

body.hzf-page .result-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .83rem;
    color: var(--text-muted-custom);
    font-weight: 500;
}

body.hzf-page .result-count svg {
    width: 16px;
    height: 16px;
}

body.hzf-page .result-count strong {
    color: var(--bs-navy);
}

body.hzf-page .rows-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .83rem;
    color: var(--text-muted-custom);
}

body.hzf-page .rows-select {
    border: 1.5px solid var(--border-color);
    border-radius: 7px;
    padding: 5px 28px 5px 10px;
    font-size: .83rem;
    font-family: 'DM Sans', sans-serif;
    color: #334155;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    outline: none;
    cursor: pointer;
}

body.hzf-page .page-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: #fff;
    color: #475569;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    text-decoration: none;
}

body.hzf-page .page-btn.active {
    background: var(--bs-navy);
    border-color: var(--bs-navy);
    color: #fff;
}

body.hzf-page .page-btn:hover:not(.active) {
    border-color: var(--bs-navy-light);
    color: var(--bs-navy);
}

body.hzf-page .product-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.hzf-page .product-pagination .page-btn svg {
    width: 14px;
    height: 14px;
}

body.hzf-page .product-pagination .page-btn.disabled {
    cursor: not-allowed;
    opacity: .4;
    pointer-events: none;
}

body.hzf-page .pagination-ellipsis {
    min-width: 20px;
    color: var(--text-muted-custom);
    text-align: center;
}


body.hzf-page .page-footer {
    background: var(--bs-navy);
    color: rgba(255, 255, 255, .55);
    font-size: .75rem;
    padding: 16px 20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width-collapsed);
    right: 0;
    z-index: 900;
    transition: left .25s cubic-bezier(.4, 0, .2, 1);
}

body.hzf-page .page-footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

body.hzf-page .page-footer a:hover {
    color: #fff;
}

body.hzf-page .sgs-badge {
    color: var(--bs-orange);
    font-weight: 700;
}

body.hzf-page .version-badge {
    font-size: .7rem;
    background: rgba(255, 255, 255, .1);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}


@media (max-width: 767px) {
body.hzf-page .sidebar-overlay.active {
        display: block;
    }

body.hzf-page .nav-user-info {
        display: none;
    }

body.hzf-page .nav-user-block {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }

body.hzf-page .nav-actions {
        gap: 4px;
    }

body.hzf-page .sidebar {
        width: 0;
        overflow: hidden;
    }

body.hzf-page .sidebar.open {
        width: var(--sidebar-width);
    }

body.hzf-page .main-wrap {
        margin-left: 0 !important;
    }

body.hzf-page .page-footer {
        left: 0 !important;
    }

body.hzf-page .industry-tabs {
        gap: 8px;
    }

body.hzf-page .ind-tab {
        min-width: 70px;
        padding: 10px 12px;
        font-size: .75rem;
    }

body.hzf-page .ind-tab svg {
        width: 24px;
        height: 24px;
    }

body.hzf-page .filter-dropdowns {
        gap: 8px;
    }

body.hzf-page .product-search-form {
        flex-basis: 100%;
        min-width: 0;
    }

body.hzf-page .filter-select {
        min-width: 0;
        flex: 1 1 140px;
    }


body.hzf-page .col-industry,
body.hzf-page .col-supplier,
body.hzf-page .col-subcat,
body.hzf-page .col-range {
        display: none;
    }

body.hzf-page .detail-inner {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
body.hzf-page .content-area {
        padding: 16px 12px;
    }

body.hzf-page .filter-card {
        padding: 14px;
    }
}

/* Consumer Safety Limit workspace */
.csf-page{max-width:1480px;margin:0 auto;padding:28px;color:#18324b}.csf-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:22px;padding:30px 34px;border-radius:20px;background:linear-gradient(125deg,#112e4d,#1e5d82);color:#fff;box-shadow:0 16px 36px rgba(17,46,77,.16)}.csf-back{display:inline-block;margin-bottom:18px;color:#cae7f5;text-decoration:none;font-size:.86rem;font-weight:700}.csf-eyebrow{display:block;margin-bottom:5px;color:#8fd4c3;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.csf-hero h1{margin:0 0 8px;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700}.csf-hero p{max-width:760px;margin:0;color:#d9e8f1;font-size:1rem;line-height:1.55}.csf-hero-mark{display:grid;flex:0 0 94px;width:94px;height:94px;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:24px;background:rgba(255,255,255,.1);font-size:1.65rem;font-weight:800;letter-spacing:.08em}.csf-card{margin-bottom:20px;padding:25px;border:1px solid #dce5ec;border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(27,58,85,.06)}.csf-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:21px}.csf-section-head>div{display:flex;align-items:center;gap:11px}.csf-section-head h2{margin:0;color:#163650;font-size:1.18rem}.csf-section-head p{max-width:540px;margin:2px 0 0;color:#6b7e8d;font-size:.85rem;text-align:right}.csf-step{display:grid;width:31px;height:31px;place-items:center;border-radius:9px;background:#eaf4f4;color:#19766c;font-size:.72rem;font-weight:800}.csf-page label{display:flex;flex-direction:column;gap:6px;color:#405669;font-size:.78rem;font-weight:700}.csf-page input,.csf-page select,.csf-page textarea{width:100%;border:1px solid #cbd8e2;border-radius:8px;background:#fff;color:#1c3448;font:inherit;font-weight:400;outline:none;transition:border-color .15s,box-shadow .15s}.csf-page input,.csf-page select{min-height:39px;padding:8px 10px}.csf-page textarea{padding:9px 10px;resize:vertical}.csf-page input:focus,.csf-page select:focus,.csf-page textarea:focus{border-color:#318d84;box-shadow:0 0 0 3px rgba(49,141,132,.12)}.csf-page label small{color:#80909d;font-weight:400}.csf-substance-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}.csf-toxval-search{display:grid;grid-template-columns:minmax(230px,2fr) 1fr 1fr auto;align-items:end;gap:12px;margin-top:17px;padding:16px;border-radius:12px;background:#f4f8fa}.csf-btn{min-height:40px;padding:9px 17px;border:0;border-radius:8px;font-size:.82rem;font-weight:750;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s}.csf-btn:hover:not(:disabled){transform:translateY(-1px)}.csf-btn-primary{background:#19766c;color:#fff;box-shadow:0 5px 13px rgba(25,118,108,.18)}.csf-btn-secondary{border:1px solid #cbd8e2;background:#fff;color:#29485f}.csf-btn:disabled{cursor:not-allowed;opacity:.45}.csf-status{min-height:42px;margin-top:13px;padding:11px 13px;border:1px solid #e0e8ee;border-radius:9px;background:#f8fafb;color:#617485;font-size:.83rem}.csf-status.is-success{border-color:#bce0d6;background:#f0faf7;color:#176b58}.csf-status.is-error{border-color:#f1c6c0;background:#fff5f3;color:#a54235}.csf-status.is-loading{color:#315a76}.csf-spinner{display:inline-block;width:14px;height:14px;margin-right:7px;border:2px solid #c2d7e2;border-top-color:#19766c;border-radius:50%;vertical-align:-2px;animation:csf-spin .75s linear infinite}@keyframes csf-spin{to{transform:rotate(360deg)}}.csf-table-scroll{overflow:auto;border:1px solid #dfe7ed;border-radius:11px}.csf-toxval-results{margin-top:13px;max-height:520px}.csf-table{width:100%;border-collapse:collapse;font-size:.78rem}.csf-table th{position:sticky;top:0;z-index:1;padding:11px 10px;background:#edf3f6;color:#3a5265;font-size:.69rem;letter-spacing:.035em;text-align:left;text-transform:uppercase;white-space:nowrap}.csf-table td{padding:11px 10px;border-top:1px solid #e7edf1;color:#344d61;vertical-align:top}.csf-table tbody tr:hover{background:#f8fbfc}.csf-table td small{display:block;margin-top:3px;color:#7d8e9b;font-size:.69rem;line-height:1.35}.csf-table td a{color:#176b8c}.csf-use-value{padding:7px 10px;border:1px solid #9ccac3;border-radius:7px;background:#eef9f7;color:#176b61;font-size:.72rem;font-weight:750;white-space:nowrap}.csf-pager{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:12px}.csf-pager button{min-width:31px;height:31px;border:1px solid #d3dfe6;border-radius:7px;background:#fff;color:#39566b;font-size:.76rem}.csf-pager button.is-active{border-color:#19766c;background:#19766c;color:#fff}.csf-endpoint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.csf-endpoint{padding:18px;border:1px solid #dbe5eb;border-radius:13px;background:#fbfcfd}.csf-endpoint header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}.csf-endpoint header>div{display:flex;align-items:center;gap:8px}.csf-endpoint header span{padding:4px 7px;border-radius:6px;background:#dfeef1;color:#176b71;font-size:.68rem;font-weight:800}.csf-endpoint h3{margin:0;color:#223f55;font-size:1rem}.csf-endpoint header>strong{color:#19766c;font-size:.74rem;text-align:right}.csf-endpoint>label{margin-top:10px}.csf-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.csf-source-rule{margin:10px 0 0;color:#7b8994;font-size:.7rem}.csf-assumptions{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:16px;padding:16px;border-radius:12px;background:#f4f8fa}.csf-scenario-table input,.csf-scenario-table select{min-width:84px;height:34px;min-height:34px;padding:5px 7px;font-size:.75rem}.csf-scenario-table td:first-child input{min-width:118px}.csf-actions{display:flex;gap:9px;margin-top:16px}.csf-final-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.csf-final{padding:17px;border:1px solid #d6e3e8;border-left:4px solid #19766c;border-radius:11px;background:linear-gradient(135deg,#fff,#f4f9f8)}.csf-final>span{color:#687d8c;font-size:.73rem;font-weight:800;text-transform:uppercase}.csf-final strong{display:block;margin:7px 0 4px;color:#183c50;font-size:1.35rem}.csf-final strong small{font-size:.7rem}.csf-final p{margin:0;color:#738693;font-size:.72rem}.csf-scope-note{margin-top:14px;padding:12px 14px;border-radius:9px;background:#fff8e8;color:#765919;font-size:.78rem}
@media(max-width:1050px){.csf-endpoint-grid{grid-template-columns:1fr}.csf-toxval-search{grid-template-columns:1fr 1fr}.csf-search-main{grid-column:1/-1}.csf-final-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.csf-page{padding:16px 12px}.csf-hero{padding:23px}.csf-hero-mark{display:none}.csf-card{padding:18px}.csf-section-head{display:block}.csf-section-head p{margin:8px 0 0;text-align:left}.csf-substance-grid,.csf-assumptions,.csf-toxval-search{grid-template-columns:1fr}.csf-search-main{grid-column:auto}.csf-final-grid{grid-template-columns:1fr}.csf-two-col{grid-template-columns:1fr}.csf-actions{flex-direction:column}}

.csf-endpoint{display:flex;flex-direction:column}.csf-endpoint header{min-height:40px}.csf-two-col{align-items:start}.csf-two-col label>span{display:flex;min-height:35px;align-items:flex-end;gap:4px;line-height:1.25}.csf-endpoint-source{min-height:66px;margin-top:14px;padding:10px 11px;border:1px dashed #cbd8e2;border-radius:8px;background:#f6f9fb;color:#748694;font-size:.72rem;line-height:1.45}.csf-endpoint-source.is-selected{border-style:solid;border-color:#a9d3ca;background:#eef8f6;color:#27695f}.csf-use-actions{display:grid;grid-template-columns:repeat(3,max-content);gap:5px}.csf-use-value{cursor:pointer}.csf-use-value:hover{border-color:#19766c;background:#19766c;color:#fff}
.csf-endpoint-source>span{display:block}.csf-endpoint-source-links{display:grid;gap:4px;margin-top:7px}.csf-endpoint-source-links>a{display:block;color:#176b8c;overflow-wrap:anywhere;text-decoration:underline}.csf-endpoint-source-links>a strong,.csf-endpoint-source-links>small strong{font-weight:800}.csf-endpoint-source-links>small{display:block;color:#7d8e9b}
.csf-toxval-search-standalone{margin-top:0}.csf-btn-save{margin-left:auto;background:#173f5f;color:#fff;box-shadow:0 5px 13px rgba(23,63,95,.18)}
@media(max-width:700px){.csf-two-col label>span{min-height:auto}.csf-use-actions{grid-template-columns:1fr}.csf-use-value{width:100%}.csf-btn-save{margin-left:0}}

/* Consumer Safety assessment history */
.csf-hero-side{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:10px}.csf-history-button{padding:8px 12px;border:1px solid rgba(255,255,255,.45);border-radius:8px;color:#fff;font-size:.75rem;font-weight:750;text-align:center;text-decoration:none;white-space:nowrap}.csf-history-button:hover{background:rgba(255,255,255,.12);color:#fff}.csf-history-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;padding:6px 4px 2px}.csf-history-header h1{margin:4px 0 5px;color:#173a54;font-size:2rem}.csf-history-header p{margin:0;color:#6b7e8d}.csf-back-dark{margin-bottom:12px;color:#39728e}.csf-new-assessment{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}.csf-new-assessment:hover{color:#fff}.csf-history-search{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;align-items:end;gap:10px}.csf-history-meta{margin:14px 0 9px;color:#687d8c;font-size:.8rem}.csf-history-table td{vertical-align:middle}.csf-profile-id{display:inline-block;padding:4px 7px;border-radius:6px;background:#edf3f6;color:#36566d;font-weight:800}.csf-json-warning{color:#a54235!important}.csf-limit-pills{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:190px}.csf-limit-pills span{padding:3px 6px;border-radius:5px;background:#f0f6f7;color:#537080;font-size:.68rem;white-space:nowrap}.csf-view-detail{display:inline-block;padding:7px 10px;border:1px solid #9ccac3;border-radius:7px;background:#eef9f7;color:#176b61;font-size:.72rem;font-weight:750;text-decoration:none;white-space:nowrap}.csf-view-detail:hover{border-color:#19766c;background:#19766c;color:#fff}.csf-history-empty{padding:30px!important;color:#7b8c98!important;text-align:center}.csf-pager>a{display:grid;min-width:31px;height:31px;place-items:center;border:1px solid #d3dfe6;border-radius:7px;background:#fff;color:#39566b;font-size:.76rem;text-decoration:none}.csf-pager>a.is-active{border-color:#19766c;background:#19766c;color:#fff}.csf-readonly-endpoint{height:100%}.csf-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.csf-detail-list>div{padding:8px;border-radius:7px;background:#f4f8fa}.csf-detail-list dt{color:#718491;font-size:.67rem;font-weight:700}.csf-detail-list dd{margin:2px 0 0;color:#29465b;font-size:.79rem;font-weight:700;overflow-wrap:anywhere}.csf-assumption-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.csf-assumption-summary>div{padding:15px;border:1px solid #dce6eb;border-radius:10px;background:#f7fafb}.csf-assumption-summary span{display:block;color:#718491;font-size:.72rem}.csf-assumption-summary strong{display:block;margin-top:4px;color:#1e5264;font-size:1.1rem}.csf-json-panel summary{cursor:pointer;color:#315a76;font-weight:750}.csf-json-panel pre{max-height:620px;margin:15px 0 0;padding:16px;overflow:auto;border-radius:9px;background:#102536;color:#d7e7ed;font-size:.72rem;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:800px){.csf-hero-side{align-items:flex-end}.csf-hero-mark{display:none}.csf-history-header{align-items:flex-start;flex-direction:column}.csf-history-search{grid-template-columns:1fr}.csf-assumption-summary{grid-template-columns:1fr}.csf-history-button{white-space:normal}}

/* Align CSL screens with the Product Profile visual language. */
body.hzf-page .csf-page{max-width:none;margin:0;padding:0;color:#1e293b;font-family:'DM Sans','Source Sans 3',sans-serif}
body.hzf-page .csf-hero,body.hzf-page .csf-history-header{margin-bottom:20px;padding:20px;border:0;border-radius:14px;background:var(--bg-card);color:#1e293b;box-shadow:0 1px 4px rgba(0,0,0,.06)}
body.hzf-page .csf-hero{align-items:center}
body.hzf-page .csf-hero h1,body.hzf-page .csf-history-header h1{margin:3px 0 5px;color:var(--bs-navy);font-size:1.55rem;font-weight:700}
body.hzf-page .csf-hero p,body.hzf-page .csf-history-header p{color:var(--text-muted-custom);font-size:.87rem;line-height:1.5}
body.hzf-page .csf-eyebrow{margin-bottom:3px;color:var(--bs-orange);font-size:.68rem;letter-spacing:.08em}
body.hzf-page .csf-back,body.hzf-page .csf-back-dark{margin-bottom:10px;color:var(--bs-navy-light);font-size:.8rem}
body.hzf-page .csf-back:hover,body.hzf-page .csf-back-dark:hover{color:var(--bs-orange)}
body.hzf-page .csf-hero-side{flex-direction:row;align-items:center;gap:10px}
body.hzf-page .csf-hero-mark{width:52px;height:52px;flex-basis:52px;border:0;border-radius:12px;background:var(--bs-navy);color:#fff;font-size:.9rem;box-shadow:none}
body.hzf-page .csf-history-button{padding:8px 13px;border:0;border-radius:9px;background:var(--bs-orange);color:#fff;font-size:.78rem;font-weight:600}
body.hzf-page .csf-history-button:hover{background:var(--bs-orange-light);color:#fff}
body.hzf-page .csf-card{margin-bottom:20px;padding:20px;border:0;border-radius:14px;background:var(--bg-card);box-shadow:0 1px 4px rgba(0,0,0,.06)}
body.hzf-page .csf-section-head{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}
body.hzf-page .csf-section-head h2{color:var(--bs-navy);font-size:1rem;font-weight:700}
body.hzf-page .csf-section-head p{color:var(--text-muted-custom);font-size:.78rem}
body.hzf-page .csf-step{width:28px;height:28px;border-radius:8px;background:#fff3ec;color:var(--bs-orange);font-size:.68rem}
body.hzf-page .csf-page label{color:#475569;font-size:.76rem;font-weight:600}
body.hzf-page .csf-page input,body.hzf-page .csf-page select,body.hzf-page .csf-page textarea{border:1.5px solid var(--border-color);border-radius:9px;color:#334155;font-family:'DM Sans','Source Sans 3',sans-serif}
body.hzf-page .csf-page input:focus,body.hzf-page .csf-page select:focus,body.hzf-page .csf-page textarea:focus{border-color:var(--bs-navy-light);box-shadow:0 0 0 3px rgba(24,62,93,.08)}
body.hzf-page .csf-toxval-search{padding:0;background:transparent}
body.hzf-page .csf-btn{min-height:38px;border-radius:9px;font-family:'DM Sans','Source Sans 3',sans-serif;font-size:.8rem;font-weight:600;box-shadow:none}
body.hzf-page .csf-btn:hover:not(:disabled){transform:none}
body.hzf-page .csf-btn-primary{background:var(--bs-navy);color:#fff;box-shadow:none}
body.hzf-page .csf-btn-primary:hover:not(:disabled){background:var(--bs-navy-light)}
body.hzf-page .csf-btn-secondary{border:1.5px solid var(--border-color);background:#fff;color:#475569}
body.hzf-page .csf-btn-secondary:hover:not(:disabled){border-color:#94a3b8;color:#1e293b}
body.hzf-page .csf-btn-save{background:var(--bs-orange);color:#fff;box-shadow:none}
body.hzf-page .csf-btn-save:hover:not(:disabled){background:var(--bs-orange-light)}
body.hzf-page .csf-status{border:1px solid var(--border-color);border-radius:9px;background:#f8fafc;color:var(--text-muted-custom)}
body.hzf-page .csf-status.is-loading{color:var(--bs-navy-light)}
body.hzf-page .csf-spinner{border-color:#cbd5e1;border-top-color:var(--bs-orange)}
body.hzf-page .csf-table-scroll{border:1px solid var(--border-color);border-radius:10px}
body.hzf-page .csf-table{font-family:'DM Sans','Source Sans 3',sans-serif;font-size:.8rem}
body.hzf-page .csf-table th{padding:13px 16px;background:#f8fafc;color:var(--text-muted-custom);font-size:.72rem;font-weight:600;letter-spacing:.04em}
body.hzf-page .csf-table td{padding:13px 16px;border-top:1px solid var(--border-color);color:#1e293b}
body.hzf-page .csf-table tbody tr:hover{background:#f8fafc}
body.hzf-page .csf-table td a{color:var(--bs-navy-light)}
body.hzf-page .csf-qc-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid #cbd5e1;border-radius:999px;background:#f8fafc;color:#64748b;font-size:.68rem;font-weight:700;line-height:1.2;white-space:nowrap}
body.hzf-page .csf-qc-badge.is-pass{border-color:#86d3a4;background:#ecfdf3;color:#167044}
body.hzf-page .csf-use-value,body.hzf-page .csf-view-detail{border:1.5px solid var(--border-color);border-radius:8px;background:#fff;color:var(--bs-navy);font-weight:600}
body.hzf-page .csf-use-value:hover,body.hzf-page .csf-view-detail:hover{border-color:var(--bs-orange);background:var(--bs-orange);color:#fff}
body.hzf-page .csf-endpoint{border:1px solid var(--border-color);border-radius:12px;background:#f8fafc}
body.hzf-page .csf-endpoint header span{background:#e8eef5;color:var(--bs-navy);font-family:'Space Grotesk','DM Sans',sans-serif}
body.hzf-page .csf-endpoint h3{color:var(--bs-navy)}
body.hzf-page .csf-endpoint header>strong{color:var(--bs-orange)}
body.hzf-page .csf-endpoint-source{border-color:#cbd5e1;background:#fff;color:#64748b}
body.hzf-page .csf-endpoint-source.is-selected{border-color:#bfdbfe;background:#eff6ff;color:#334155}
body.hzf-page .csf-endpoint-source-links>a{color:var(--bs-navy-light)}
body.hzf-page .csf-assumptions{background:#f8fafc}
body.hzf-page .csf-final{border:1px solid var(--border-color);border-left:4px solid var(--bs-orange);border-radius:10px;background:#fff}
body.hzf-page .csf-final>span{color:var(--text-muted-custom)}
body.hzf-page .csf-final strong{color:var(--bs-navy)}
body.hzf-page .csf-scope-note{border:1px solid #fed7aa;background:#fff7ed;color:#9a3412}
body.hzf-page .csf-pager button,body.hzf-page .csf-pager>a{border:1.5px solid var(--border-color);border-radius:8px;color:#475569}
body.hzf-page .csf-pager button.is-active,body.hzf-page .csf-pager>a.is-active{border-color:var(--bs-navy);background:var(--bs-navy);color:#fff}
body.hzf-page .csf-history-search{padding:0}
body.hzf-page .csf-history-meta{color:var(--text-muted-custom)}
body.hzf-page .csf-profile-id{background:#e8eef5;color:var(--bs-navy);font-family:'Space Grotesk','DM Sans',sans-serif}
body.hzf-page .csf-limit-pills span{background:#f1f5f9;color:#475569}
body.hzf-page .csf-assumption-summary>div{border-color:var(--border-color);background:#f8fafc}
body.hzf-page .csf-assumption-summary strong{color:var(--bs-navy)}
body.hzf-page .csf-json-panel pre{background:var(--bs-navy);color:#e2e8f0}
body.hzf-page .csf-json-panel summary{color:var(--bs-navy)}
@media(max-width:800px){body.hzf-page .csf-hero-side{align-items:flex-end;flex-direction:column}body.hzf-page .csf-hero-mark{display:none}}

/* Substance Intelligence detail */
body.hzf-page .sbi-detail-page{color:#24364b;font-family:'Source Sans 3',sans-serif}
body.hzf-page .sbi-detail-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;padding:24px 28px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(15,35,64,.06)}
body.hzf-page .sbi-detail-hero>div>a{display:block;margin-bottom:13px;color:#1c5b9b;font-size:12px;font-weight:700;text-decoration:none}
body.hzf-page .sbi-detail-hero>div>span,body.hzf-page .sbi-detail-kicker{display:block;margin-bottom:5px;color:#f26522;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
body.hzf-page .sbi-detail-hero h1{margin:0;color:#0d2340;font-size:27px;font-weight:750;line-height:1.2}
body.hzf-page .sbi-detail-hero p{margin:7px 0 0;color:#738197;font-size:13px}
body.hzf-page .sbi-source-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border-radius:8px;background:#0d2340;color:#fff;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
body.hzf-page .sbi-source-link:hover{background:#183b65;color:#fff}
body.hzf-page .sbi-identity-card{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;margin-bottom:20px;padding:24px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(15,35,64,.06)}
body.hzf-page .sbi-structure-panel{min-height:230px;padding:15px;display:flex;flex-direction:column;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc}
body.hzf-page .sbi-structure-panel>span{color:#748297;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
body.hzf-page .sbi-structure-panel img{width:100%;height:200px;object-fit:contain;mix-blend-mode:multiply}
body.hzf-page .sbi-identity-copy{align-self:center}
body.hzf-page .sbi-identity-copy h2{margin:0;color:#0d2340;font-size:23px;font-weight:750}
body.hzf-page .sbi-identity-copy>p{max-width:700px;margin:9px 0 17px;color:#748297;font-size:13px;line-height:1.55}
body.hzf-page .sbi-data-status{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #d6e2ef;border-radius:7px;background:#f2f7fc;color:#486581;font-size:12px;font-weight:600}
body.hzf-page .sbi-data-status.is-ready{border-color:#cfe6d9;background:#f0f8f3;color:#28704b}
body.hzf-page .sbi-data-status.is-error{border-color:#f1c9c5;background:#fff5f4;color:#b42318}
body.hzf-page .sbi-data-spinner{width:14px;height:14px;border:2px solid #d1deeb;border-top-color:#1c5b9b;border-radius:50%;animation:sbi-spin .7s linear infinite}
@keyframes sbi-spin{to{transform:rotate(360deg)}}
body.hzf-page .sbi-section-list{display:grid;gap:12px}
body.hzf-page .sbi-evidence-section{overflow:hidden;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(15,35,64,.04)}
body.hzf-page .sbi-evidence-section summary{min-height:62px;padding:13px 17px;display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;user-select:none}
body.hzf-page .sbi-evidence-section summary::-webkit-details-marker{display:none}
body.hzf-page .sbi-section-number{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#fff3eb;color:#e45e1c;font-size:11px;font-weight:800}
body.hzf-page .sbi-evidence-section summary>span:nth-child(2){min-width:0;flex:1}
body.hzf-page .sbi-evidence-section summary strong{display:block;color:#0d2340;font-size:14px}
body.hzf-page .sbi-evidence-section summary small{display:block;margin-top:2px;color:#8995a6;font-size:11px;font-weight:400}
body.hzf-page .sbi-evidence-section summary svg{width:18px;height:18px;color:#7b899b;transition:transform .18s}
body.hzf-page .sbi-evidence-section[open] summary svg{transform:rotate(180deg)}
body.hzf-page .sbi-section-content{padding:0 17px 17px;border-top:1px solid #edf1f5}
body.hzf-page .sbi-info-group h3{margin:18px 0 8px;color:#486581;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
body.hzf-page .sbi-info-row{padding:12px 13px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border:1px solid #e7ecf2;border-bottom:0;background:#fbfcfd}
body.hzf-page .sbi-info-row:first-of-type{border-radius:8px 8px 0 0}
body.hzf-page .sbi-info-row:last-child{border-bottom:1px solid #e7ecf2;border-radius:0 0 8px 8px}
body.hzf-page .sbi-info-row span{display:block;margin-bottom:4px;color:#8794a6;font-size:10px}
body.hzf-page .sbi-info-row p{margin:0;color:#26384d;font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
body.hzf-page .sbi-info-row small{display:block;margin-top:6px;color:#718096;font-size:10.5px}
body.hzf-page .sbi-info-row>a{flex:0 0 auto;color:#1c5b9b;font-size:11px;font-weight:700;text-decoration:none}
body.hzf-page .sbi-pfas-assessment{margin-top:16px;padding:14px 15px;border:1px solid #d8e0e8;border-left-width:4px;border-radius:9px;background:#f8fafc;color:#405268}
body.hzf-page .sbi-pfas-assessment>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
body.hzf-page .sbi-pfas-eyebrow{color:#708094;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
body.hzf-page .sbi-pfas-assessment>strong{display:block;color:#172f4d;font-size:15px}
body.hzf-page .sbi-pfas-assessment p{margin:4px 0 6px;font-size:12.5px;line-height:1.5}
body.hzf-page .sbi-pfas-assessment small{display:block;margin-top:3px;color:#718096;font-size:10.5px;line-height:1.45}
body.hzf-page .sbi-pfas-assessment.is-pfas{border-color:#edb9b5;border-left-color:#c53b32;background:#fff7f6}
body.hzf-page .sbi-pfas-assessment.is-non-pfas{border-color:#c9e3d2;border-left-color:#2f855a;background:#f4faf6}
body.hzf-page .sbi-pfas-assessment.is-undetermined{border-left-color:#8b98a8}
body.hzf-page .sbi-pfas-badge{display:inline-flex;width:max-content;align-items:center;margin-top:8px;padding:3px 8px;border:1px solid #ccd6e1;border-radius:999px;background:#f5f7fa;color:#607084;font-size:10px;font-weight:800;line-height:1.25;white-space:nowrap}
body.hzf-page .sbi-pfas-assessment .sbi-pfas-badge{margin-top:0}
body.hzf-page .sbi-pfas-badge.is-pfas{border-color:#e9aaa5;background:#fff0ee;color:#a52d27}
body.hzf-page .sbi-pfas-badge.is-non-pfas{border-color:#b9dbc5;background:#edf8f1;color:#247149}
body.hzf-page .sbi-pfas-badge.is-undetermined{border-color:#ccd6e1;background:#f5f7fa;color:#607084}
body.hzf-page .sbi-empty,body.hzf-page .sbi-detail-error{margin-top:16px;padding:16px;border:1px dashed #d6dde6;border-radius:8px;background:#fafbfc;color:#7a8798;font-size:12px;text-align:center}
body.hzf-page .sbi-detail-error{margin:0;background:#fff}
@media(max-width:760px){body.hzf-page .sbi-detail-hero{align-items:flex-start;flex-direction:column}body.hzf-page .sbi-identity-card{grid-template-columns:1fr}body.hzf-page .sbi-structure-panel{max-width:320px;width:100%;margin:auto}}

/* Product-substance application safety calculator */
body.hzf-page .safety-calculation-note{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid #cbd5e1;border-radius:999px;background:#f8fafc;color:#64748b;font-size:.67rem;font-weight:800;white-space:nowrap}
body.hzf-page .safety-calculation-note.is-pass{border-color:#86d3a4;background:#ecfdf3;color:#167044}
body.hzf-page .safety-calculation-note.is-exceeds{border-color:#f3aaa2;background:#fff1f0;color:#b42318}
body.hzf-page .safety-calculation-action{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8;text-decoration:none}
body.hzf-page .consumer-safety-calculate-action{border-color:#fed7aa;background:#fff7ed;color:#c2410c;text-decoration:none}
body.hzf-page .consumer-safety-calculate-action:hover,body.hzf-page .consumer-safety-calculate-action:focus-visible{border-color:#f97316;background:#ffedd5;color:#9a3412}
body.hzf-page .toxic-classification-action{border-color:#fecaca;background:#fff7f7;color:#b42318}
body.hzf-page .toxic-classification-action:hover,body.hzf-page .toxic-classification-action:focus-visible{border-color:#ef4444;background:#fee2e2;color:#991b1b}
body.hzf-page .cs-sub-cal-page{max-width:1480px;margin:0 auto;padding:28px;color:#24364b;font-family:'Source Sans 3',sans-serif}
body.hzf-page .cs-sub-cal-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:20px;padding:27px 30px;border-radius:16px;background:linear-gradient(125deg,#0d2340,#1b4c76);color:#fff;box-shadow:0 14px 30px rgba(13,35,64,.16)}
body.hzf-page .cs-sub-cal-hero a{display:inline-block;margin-bottom:14px;color:#d8e8f7;font-size:.78rem;font-weight:700;text-decoration:none}
body.hzf-page .cs-sub-cal-hero>div:first-child>span{display:block;margin-bottom:4px;color:#f8a36e;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
body.hzf-page .cs-sub-cal-hero h1{margin:0 0 7px;font-family:'Space Grotesk','DM Sans',sans-serif;font-size:clamp(1.7rem,3vw,2.45rem)}
body.hzf-page .cs-sub-cal-hero p{max-width:780px;margin:0;color:#dce8f2;font-size:.92rem;line-height:1.55}
body.hzf-page .cs-sub-cal-identity{display:grid;min-width:260px;padding:15px 17px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(255,255,255,.08)}
body.hzf-page .cs-sub-cal-identity span{color:#a9c5dc;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body.hzf-page .cs-sub-cal-identity strong{margin:4px 0;color:#fff;font-size:.94rem}
body.hzf-page .cs-sub-cal-identity small{color:#dbe7f0;font-size:.72rem}
body.hzf-page .cs-sub-cal-form{display:grid;gap:18px}
body.hzf-page .cs-sub-cal-card{padding:23px;border:1px solid var(--border-color);border-radius:14px;background:#fff;box-shadow:0 4px 15px rgba(15,35,64,.05)}
body.hzf-page .cs-sub-cal-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:19px}
body.hzf-page .cs-sub-cal-section-head>span{display:grid;flex:0 0 31px;width:31px;height:31px;place-items:center;border-radius:8px;background:#fff1e8;color:#e45e1c;font-size:.7rem;font-weight:800}
body.hzf-page .cs-sub-cal-section-head h2{margin:0;color:var(--bs-navy);font-family:'Space Grotesk','DM Sans',sans-serif;font-size:1.08rem}
body.hzf-page .cs-sub-cal-section-head p{margin:3px 0 0;color:#748297;font-size:.78rem}
body.hzf-page .cs-sub-cal-grid{display:grid;align-items:stretch;gap:14px}
body.hzf-page .cs-sub-cal-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
body.hzf-page .cs-sub-cal-grid label{display:flex;height:100%;min-height:70px;flex-direction:column;gap:6px;color:#41546a;font-size:.75rem;font-weight:700}
body.hzf-page .cs-sub-cal-grid label small{display:block;color:#8491a2;font-size:.67rem;font-weight:400;line-height:1.2}
body.hzf-page .cs-sub-cal-grid input,body.hzf-page .cs-sub-cal-grid select{width:100%;min-height:40px;margin-top:auto;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#1e293b;font:inherit;font-weight:400;outline:none}
body.hzf-page .cs-sub-cal-grid input:focus,body.hzf-page .cs-sub-cal-grid select:focus{border-color:var(--bs-orange);box-shadow:0 0 0 3px rgba(242,101,34,.1)}
body.hzf-page .cs-sub-cal-app-reference{display:flex;flex-wrap:wrap;gap:7px 16px;margin:15px 0;padding:11px 13px;border:1px solid #dbe4ee;border-radius:9px;background:#f8fafc;color:#607087;font-size:.73rem}
body.hzf-page .cs-sub-cal-app-reference strong{color:var(--bs-navy)}
body.hzf-page .cs-sub-cal-addon{display:flex;min-height:76px;flex-direction:column;justify-content:center;padding:10px 12px;border:1px solid #fed7aa;border-radius:9px;background:#fff7ed}
body.hzf-page .cs-sub-cal-addon span{color:#9a5a20;font-size:.68rem;font-weight:800;text-transform:uppercase}
body.hzf-page .cs-sub-cal-addon strong{margin:3px 0;color:#9a3412;font-size:1.05rem}
body.hzf-page .cs-sub-cal-addon small{color:#a56735;font-size:.68rem}
body.hzf-page .cs-sub-cal-profile-limits{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding:12px;border:1px solid #dbe4ee;border-radius:10px;background:#f8fafc}
body.hzf-page .cs-sub-cal-profile-limits>span{margin-right:4px;color:var(--bs-navy);font-size:.72rem;font-weight:800}
body.hzf-page .cs-sub-cal-profile-limits button{display:grid;gap:1px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#607087;font-size:.69rem;text-align:left;cursor:pointer}
body.hzf-page .cs-sub-cal-profile-limits button:hover{border-color:var(--bs-orange);background:#fff7ed}
body.hzf-page .cs-sub-cal-profile-limits button strong{color:var(--bs-navy);font-size:.68rem}
body.hzf-page .cs-sub-cal-bssl-limits{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding:12px;border:1px solid #bae6d1;border-radius:10px;background:#f0fdf7}
body.hzf-page .cs-sub-cal-bssl-limits>span{margin-right:4px;color:#166342;font-size:.72rem;font-weight:800}
body.hzf-page .cs-sub-cal-bssl-limits button{display:grid;gap:1px;min-width:100px;padding:6px 10px;border:1px solid #93d5b5;border-radius:8px;background:#fff;color:#39715a;font-size:.69rem;text-align:left;cursor:pointer}
body.hzf-page .cs-sub-cal-bssl-limits button:hover{border-color:#27a65f;background:#e7f9ef}
body.hzf-page .cs-sub-cal-bssl-limits button strong{color:#155d3e;font-size:.68rem}
body.hzf-page .cs-sub-cal-bssl-limits>small{flex:1 1 260px;color:#5e786c;font-size:.68rem;line-height:1.35}
body.hzf-page .cs-sub-cal-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
body.hzf-page .cs-sub-cal-metrics article{min-height:105px;padding:15px;border:1px solid #dbe4ee;border-left:4px solid #94a3b8;border-radius:10px;background:#f8fafc}
body.hzf-page .cs-sub-cal-metrics article.is-pass{border-left-color:#27a65f;background:#f0fdf4}
body.hzf-page .cs-sub-cal-metrics article.is-exceeds{border-left-color:#dc493f;background:#fff5f4}
body.hzf-page .cs-sub-cal-metrics article>span{display:block;color:#738197;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
body.hzf-page .cs-sub-cal-metrics article>strong{display:block;margin:8px 0 3px;color:var(--bs-navy);font-size:1.14rem;overflow-wrap:anywhere}
body.hzf-page .cs-sub-cal-metrics article>small{color:#7c8998;font-size:.68rem;line-height:1.35}
body.hzf-page .cs-sub-cal-formulas{margin-top:16px}
body.hzf-page .cs-sub-cal-formulas>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;border-left:4px solid var(--bs-navy-light);border-radius:7px;background:#f8fafc}
body.hzf-page .cs-sub-cal-formulas strong{margin-right:6px;color:var(--bs-navy);font-size:.76rem}
body.hzf-page .cs-sub-cal-formulas code{padding:4px 7px;border-radius:5px;background:#e8eef5;color:#40556d;font-size:.7rem}
body.hzf-page .cs-sub-cal-saved{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:15px;padding:11px 13px;border:1px solid #dbe4ee;border-radius:9px;background:#fff}
body.hzf-page .cs-sub-cal-saved strong{color:var(--bs-navy);font-size:.75rem}
body.hzf-page .cs-sub-cal-saved span{padding:3px 8px;border-radius:999px;font-size:.67rem;font-weight:800}
body.hzf-page .cs-sub-cal-saved span.is-pass{background:#dcfce7;color:#167044}
body.hzf-page .cs-sub-cal-saved span.is-exceeds{background:#fee2e2;color:#b42318}
body.hzf-page .cs-sub-cal-saved small{color:#748297;font-size:.7rem}
body.hzf-page .cs-sub-cal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
body.hzf-page .cs-sub-cal-actions .btn-last{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:1100px){body.hzf-page .cs-sub-cal-grid.four,body.hzf-page .cs-sub-cal-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){body.hzf-page .cs-sub-cal-page{padding:15px 11px}body.hzf-page .cs-sub-cal-hero{align-items:flex-start;flex-direction:column;padding:22px}body.hzf-page .cs-sub-cal-identity{width:100%;min-width:0}body.hzf-page .cs-sub-cal-grid.four,body.hzf-page .cs-sub-cal-metrics{grid-template-columns:1fr}body.hzf-page .cs-sub-cal-card{padding:17px}body.hzf-page .cs-sub-cal-actions{flex-direction:column}body.hzf-page .cs-sub-cal-actions>*{justify-content:center;width:100%}}