:root {
    --hub-bg-start: #f7f9fc;
    --hub-bg-end: #eef2f7;
    --hub-surface: #ffffff;
    --hub-surface-soft: #f8fbff;

    --hub-text: #1f2937;
    --hub-muted: #5f6b7a;
    --hub-text-primary: #2f3743;
    --hub-text-secondary: #3d4652;
    --hub-text-strong: #2f3b4a;

    --hub-border: #dbe5f0;
    --hub-border-soft: #e3e7eb;
    --hub-border-soft-alt: #e8edf3;
    --hub-border-success: #d9e9dc;

    --hub-accent: #0f766e;
    --hub-accent-hover: #0c625c;
    --hub-accent-active: #084f4b;
    --hub-accent-soft: #e7f5f2;
    --hub-accent-rgb: 15, 118, 110;
    --hub-accent-text: #ffffff;

    --hub-neutral-btn-bg: #eef1f5;
    --hub-neutral-btn-border: #d6dde7;
    --hub-neutral-btn-text: #3f4a59;
    --hub-neutral-btn-hover: #e4e8ef;

    --hub-bg-surface-alt: #f6f9ff;
    --hub-bg-success-soft: #edf7ef;
    --hub-danger-background: #fdf1f1;
    --hub-danger-text: #8d3636;
    --hub-success-background: #dff0e4;
    --hub-success-text: #1e4d29;

    --hub-alert-bg: #fef2f2;
    --hub-alert-text: #b42318;

    --hub-input-bg: #f8fbff;
    --hub-input-bg-focus: #ffffff;
    --hub-input-border: #cfd8e5;
    --hub-input-border-hover: #bec9d9;
    --hub-input-placeholder: #8893a5;
    --hub-input-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.05);

    --hub-radius-sm: 10px;
    --hub-radius-md: 14px;
    --hub-radius-lg: 16px;
    --hub-radius-pill: 999px;

    --hub-shadow-card: 0 10px 24px rgba(31, 41, 55, 0.08);
    --hub-shadow-soft: 0 0 1px 0 rgba(0, 0, 0, 0.25);
    --hub-shadow: 0 22px 44px rgba(31, 41, 55, 0.12);
    --hub-focus-ring: 0 0 0 3px rgba(var(--hub-accent-rgb), 0.18);
    --hub-content-max-width: 1240px;
}


html,
body {
    font-family: "Segoe UI", "Open Sans", sans-serif !important;
}

/* Shared input skin (Bootstrap-like: one base class, reused everywhere). */
body.hub-ui .form-control,
body.hub-ui .bootstrap-select > .dropdown-toggle {
    border: 1px solid var(--hub-input-border) !important;
    border-radius: var(--hub-radius-sm) !important;
    background: var(--hub-input-bg) !important;
    color: var(--hub-text-primary) !important;
    box-shadow: var(--hub-input-shadow) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease !important;
}

body.hub-ui .form-control:hover,
body.hub-ui .bootstrap-select > .dropdown-toggle:hover {
    border-color: var(--hub-input-border-hover) !important;
}

body.hub-ui .form-control:focus,
body.hub-ui .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--hub-accent) !important;
    background: var(--hub-input-bg-focus) !important;
    box-shadow: var(--hub-focus-ring) !important;
    outline: none !important;
}

body.hub-ui .form-control::placeholder {
    color: var(--hub-input-placeholder) !important;
}

body.hub-ui .form-control:-webkit-autofill,
body.hub-ui .form-control:-webkit-autofill:hover {
    border: 1px solid var(--hub-input-border) !important;
    -webkit-text-fill-color: var(--hub-text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--hub-input-bg) inset, var(--hub-input-shadow) !important;
    box-shadow: 0 0 0 1000px var(--hub-input-bg) inset, var(--hub-input-shadow) !important;
    caret-color: var(--hub-text-primary) !important;
}

body.hub-ui .form-control:-webkit-autofill:focus {
    border-color: var(--hub-accent) !important;
    -webkit-text-fill-color: var(--hub-text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--hub-input-bg-focus) inset, var(--hub-focus-ring) !important;
    box-shadow: 0 0 0 1000px var(--hub-input-bg-focus) inset, var(--hub-focus-ring) !important;
    caret-color: var(--hub-text-primary) !important;
}

body.hub-ui .form-control.hub-invalid,
body.hub-ui .bootstrap-select > .dropdown-toggle.hub-invalid {
    border-color: #d98282 !important;
    background: #fffafa !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important;
}

body.hub-ui .dropdown-menu > li > a:hover,
body.hub-ui .dropdown-menu > li > a:focus,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus {
    background: var(--hub-accent-soft) !important;
    color: var(--hub-text-primary) !important;
}

body.hub-ui .dropdown-menu > .active > a,
body.hub-ui .dropdown-menu > .active > a:hover,
body.hub-ui .dropdown-menu > .active > a:focus,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a:hover,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a:focus,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a:hover,
body.hub-ui .bootstrap-select.btn-group .dropdown-menu.inner > li.active > a:focus {
    background: var(--hub-accent) !important;
    color: var(--hub-accent-text) !important;
}

body.hub-ui .form-group.has-field-error label,
body.hub-ui .hub-landing-field.has-field-error label {
    color: var(--hub-danger-text) !important;
}

body.hub-ui .hub-field-error {
    display: none;
    color: var(--hub-danger-text);
    font-size: 12px;
    line-height: 1.35;
}

body.hub-ui .hub-field-error:not(:empty) {
    display: block;
    margin-top: 0.35rem;
}

body.hub-ui .hub-page-title-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

body.hub-ui .hub-page-title-text {
    min-width: 0;
}

body.hub-ui .hub-page-brand-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: block;
}

body.hub-ui .hub-page-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100% !important;
    min-height: 100%;
    max-width: var(--hub-content-max-width);
    margin: 0 auto;
    padding: 3rem 2em;
}

body.hub-ui .hub-btn {
    border-radius: var(--hub-radius-sm);
}

body.hub-ui button.hub-btn {
    appearance: none;
    -webkit-appearance: none;
}

body.hub-ui a.hub-btn,
body.hub-ui a.hub-btn:hover,
body.hub-ui a.hub-btn:focus {
    text-decoration: none;
}

body.hub-ui .hub-btn-primary {
    border: 1px solid transparent;
    background: var(--hub-accent);
    color: var(--hub-accent-text);
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

body.hub-ui .hub-btn-primary:hover,
body.hub-ui .hub-btn-primary:focus {
    background: var(--hub-accent-hover);
    border-color: transparent;
    color: var(--hub-accent-text);
    outline: none;
    box-shadow: var(--hub-focus-ring);
}

body.hub-ui .hub-btn-primary:active,
body.hub-ui .hub-btn-primary:active:hover,
body.hub-ui .hub-btn-primary:active:focus,
body.hub-ui .hub-btn-primary.active,
body.hub-ui .hub-btn-primary.active:hover,
body.hub-ui .hub-btn-primary.active:focus,
body.hub-ui .open > .dropdown-toggle.hub-btn-primary,
body.hub-ui .open > .dropdown-toggle.hub-btn-primary:hover,
body.hub-ui .open > .dropdown-toggle.hub-btn-primary:focus {
    background: var(--hub-accent-active);
    border-color: transparent;
    color: var(--hub-accent-text);
    box-shadow: none;
}

body.hub-ui .hub-btn-primary:active {
    transform: translateY(1px);
}

body.hub-ui .hub-btn-primary[disabled],
body.hub-ui .hub-btn-primary.disabled,
body.hub-ui fieldset[disabled] .hub-btn-primary {
    background: #99a2ad;
    border-color: #99a2ad;
    color: #f1f3f6;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 767px) {
    body.hub-ui .hub-page-shell {
        padding: 2rem 2em;
    }
}

@media (max-width: 720px) {
    body.hub-ui .hub-page-title-brand {
        gap: 0.7rem;
    }

    body.hub-ui .hub-page-brand-icon {
        width: 36px;
        height: 36px;
    }
}


/* clay */
/*
:root {
    --hub-bg-start: #fcf8f3;
    --hub-bg-end: #f3ebe2;
    --hub-surface: #fffdf9;
    --hub-surface-soft: #f8f1e8;

    --hub-text: #2f241c;
    --hub-muted: #7a685a;
    --hub-text-primary: #3a2d24;
    --hub-text-secondary: #4a3a30;
    --hub-text-strong: #241a14;

    --hub-border: #e8d9c9;
    --hub-border-soft: #efe3d6;
    --hub-border-soft-alt: #f4eadf;
    --hub-border-success: #d8e2d2;

    --hub-accent: #b86b3d;
    --hub-accent-hover: #9d5932;
    --hub-accent-active: #7f4728;
    --hub-accent-soft: #f6e3d6;
    --hub-accent-rgb: 184, 107, 61;
    --hub-accent-text: #ffffff;

    --hub-neutral-btn-bg: #f3ebe3;
    --hub-neutral-btn-border: #dfd0c1;
    --hub-neutral-btn-text: #5a473a;
    --hub-neutral-btn-hover: #eadfD4;

    --hub-bg-surface-alt: #f9f3ec;
    --hub-bg-success-soft: #eef5ea;

    --hub-danger-background: #fbefec;
    --hub-danger-text: #9a3d2f;

    --hub-success-background: #e6f1e2;
    --hub-success-text: #355a2c;

    --hub-alert-bg: #fff4e8;
    --hub-alert-text: #9a5b1f;

    --hub-radius-sm: 10px;
    --hub-radius-md: 14px;
    --hub-radius-lg: 18px;
    --hub-radius-pill: 999px;

    --hub-shadow-card: 0 10px 24px rgba(101, 72, 49, 0.08);
    --hub-shadow-soft: 0 0 1px 0 rgba(0, 0, 0, 0.18);
    --hub-shadow: 0 22px 44px rgba(101, 72, 49, 0.12);

    --hub-focus-ring: 0 0 0 3px rgba(var(--hub-accent-rgb), 0.2);
}

html,
body {
    font-family: "Segoe UI", "Open Sans", sans-serif !important;
}

*/

/*
:root {
    --hub-bg-start: #f6f8ff;
    --hub-bg-end: #eef4ff;
    --hub-surface: #ffffff;
    --hub-surface-soft: #f7f9ff;

    --hub-text: #1e2430;
    --hub-muted: #667085;
    --hub-text-primary: #273142;
    --hub-text-secondary: #344054;
    --hub-text-strong: #18212f;

    --hub-border: #dbe4f2;
    --hub-border-soft: #e5ebf5;
    --hub-border-soft-alt: #ebf0f7;
    --hub-border-success: #d7eadf;

    --hub-accent: #5b6cff;
    --hub-accent-hover: #4958e6;
    --hub-accent-active: #3c48bf;
    --hub-accent-soft: #edf0ff;
    --hub-accent-rgb: 91, 108, 255;
    --hub-accent-text: #ffffff;

    --hub-neutral-btn-bg: #f1f4fa;
    --hub-neutral-btn-border: #d7dfeb;
    --hub-neutral-btn-text: #425066;
    --hub-neutral-btn-hover: #e7edf7;

    --hub-bg-surface-alt: #f8faff;
    --hub-bg-success-soft: #edf8f1;

    --hub-danger-background: #fef1f1;
    --hub-danger-text: #b42318;

    --hub-success-background: #e8f6ec;
    --hub-success-text: #1f5a33;

    --hub-alert-bg: #fff4eb;
    --hub-alert-text: #b54708;

    --hub-radius-sm: 10px;
    --hub-radius-md: 14px;
    --hub-radius-lg: 18px;
    --hub-radius-pill: 999px;

    --hub-shadow-card: 0 12px 26px rgba(91, 108, 255, 0.08);
    --hub-shadow-soft: 0 0 1px 0 rgba(0, 0, 0, 0.2);
    --hub-shadow: 0 24px 48px rgba(91, 108, 255, 0.12);

    --hub-focus-ring: 0 0 0 3px rgba(var(--hub-accent-rgb), 0.2);
}

html,
body {
    font-family: "Segoe UI", "Open Sans", sans-serif !important;
    background:
        radial-gradient(circle at top left, rgba(91, 108, 255, 0.10), transparent 32%),
        radial-gradient(circle at top right, rgba(0, 194, 255, 0.08), transparent 28%),
        linear-gradient(180deg, var(--hub-bg-start), var(--hub-bg-end));
    background-attachment: fixed;
}
*/