:root {
    --omx-primary: #2f6fdb;
    --omx-primary-hover: #275fc4;
    --omx-primary-active: #1f55b5;
    --omx-primary-soft: #eaf2fd;
    --omx-primary-soft-hover: #dceaff;
    --omx-primary-border: #accbf7;
    --omx-on-primary: #ffffff;
    --omx-focus-ring: rgba(47, 111, 219, 0.22);

    --omx-canvas: #f5f7fa;
    --omx-surface: #ffffff;
    --omx-surface-subtle: #fafbfc;
    --omx-surface-muted: #f2f4f7;
    --omx-border: #e4e7ec;
    --omx-border-strong: #d0d5dd;
    --omx-control-border: #8a94a6;

    --omx-text: #151c29;
    --omx-text-secondary: #475467;
    --omx-text-muted: #667085;
    --omx-text-disabled: #98a2b3;

    --omx-sidebar-bg: #f3f6fa;
    --omx-sidebar-hover: #ebf0f6;
    --omx-sidebar-active: #eaf2fd;
    --omx-sidebar-text: #344054;
    --omx-sidebar-active-text: #1f55b5;
    --omx-sidebar-divider: #dee5ee;

    --omx-success: #197a45;
    --omx-success-soft: #edf9f1;
    --omx-success-border: #b5e7c5;
    --omx-success-text: #176b3a;
    --omx-warning: #a15c00;
    --omx-warning-soft: #fff7e0;
    --omx-warning-border: #f4d28b;
    --omx-warning-text: #8a5a00;
    --omx-danger: #c33d3d;
    --omx-danger-hover: #ab3030;
    --omx-danger-soft: #fdeeee;
    --omx-danger-border: #f7b9b9;
    --omx-danger-text: #b42318;
    --omx-info: var(--omx-primary);
    --omx-info-soft: var(--omx-primary-soft);

    --omx-table-head: #f8fafc;
    --omx-table-stripe: #fafbfc;
    --omx-table-hover: #f0f5fd;
    --omx-selection: rgba(47, 111, 219, 0.2);
    --omx-shadow-popover: 0 8px 24px rgba(9, 30, 64, 0.1);
    --omx-shadow-modal: 0 16px 40px rgba(9, 30, 64, 0.16);
    --omx-radius-sm: 4px;
    --omx-radius-md: 6px;
    --omx-radius-lg: 8px;
    --omx-control-height-sm: 32px;
    --omx-control-height: 40px;
    --omx-touch-target: 44px;

    --omnix-ink: var(--omx-text);
    --omnix-text: var(--omx-text-secondary);
    --omnix-accent: var(--omx-primary);
    --omnix-accent-hover: var(--omx-primary-hover);
    --omnix-accent-active: var(--omx-primary-active);
    --omnix-line: var(--omx-border);
    --omnix-canvas: var(--omx-canvas);
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Open Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
}

body {
    color: var(--omnix-text);
    background: var(--omnix-canvas);
    font-size: 14px;
}

:where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--omx-primary);
    outline-offset: 2px;
}

a {
    color: var(--omx-primary-active);
}

a:hover {
    color: var(--omx-primary-hover);
}

.for-login,
.for-forgot,
.for-login-with-email-link,
.for-signup {
    position: relative;
    overflow: hidden;
}

.for-login::before,
.for-forgot::before,
.for-login-with-email-link::before,
.for-signup::before {
    position: fixed;
    bottom: -90px;
    left: -80px;
    width: min(42vw, 520px);
    aspect-ratio: 1;
    content: "";
    pointer-events: none;
    background: url("/assets/omnix_ui/images/robot-arm.svg") left bottom / contain no-repeat;
    opacity: 0.055;
}

.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card {
    border: 1px solid var(--omnix-line);
    border-radius: var(--omx-radius-lg);
    background: var(--omx-surface);
    box-shadow: var(--omx-shadow-popover);
}

.page-card-head img {
    width: auto;
    max-width: 190px;
    height: 74px;
    max-height: 74px;
    object-fit: contain;
}

.page-card-head h4 {
    color: var(--omnix-ink);
    font-weight: 600;
}

.page-card .form-control {
    min-height: var(--omx-control-height);
    border: 1px solid var(--omx-control-border);
    border-radius: var(--omx-radius-md);
    box-shadow: none;
}

.page-card .form-control:focus {
    border-color: var(--omnix-accent);
    box-shadow: 0 0 0 3px var(--omx-focus-ring);
    outline: 0;
}

.page-card .btn-primary {
    min-height: var(--omx-control-height);
    color: var(--omx-on-primary);
    background: var(--omnix-accent);
    border-color: var(--omnix-accent);
    border-radius: var(--omx-radius-md);
}

.page-card .btn-primary:hover,
.page-card .btn-primary:focus {
    color: var(--omx-on-primary);
    background: var(--omnix-accent-hover);
    border-color: var(--omnix-accent-hover);
    box-shadow: 0 0 0 3px var(--omx-focus-ring);
}

.page-card .btn-primary:not(:disabled):not(.disabled):active,
.page-card .btn-primary:not(:disabled):not(.disabled).active {
    color: var(--omx-on-primary) !important;
    background: var(--omnix-accent-active);
    background-color: var(--omnix-accent-active) !important;
    border-color: var(--omnix-accent-active) !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    :root {
        --omx-control-height: var(--omx-touch-target);
    }

    .for-login::before,
    .for-forgot::before,
    .for-login-with-email-link::before,
    .for-signup::before {
        bottom: -44px;
        left: -36px;
        width: 260px;
    }

    .for-login .page-card,
    .for-forgot .page-card,
    .for-login-with-email-link .page-card,
    .for-signup .page-card {
        width: auto;
        margin-inline: 12px;
    }
}