/* 2560x1440 reference canvas for onboarding-ip-create-v2.jpg */
@media (min-width: 1200px) {
    body.onboarding-precision-active {
        margin: 0;
        overflow: hidden;
        background: #f5f9ff;
    }

    body.onboarding-precision-active #opc-app {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background:
            radial-gradient(circle at 74% 8%, rgba(103, 139, 255, .12), transparent 32%),
            linear-gradient(135deg, #fbfdff 0%, #f6faff 55%, #edf5ff 100%);
    }

    .onboarding-v2 {
        --onboarding-canvas-scale: 1;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2560px;
        height: 1440px;
        min-height: 1440px;
        padding: 0;
        display: block;
        overflow: hidden;
        color: #07122f;
        background: transparent;
        transform: translate(-50%, -50%) scale(var(--onboarding-canvas-scale));
        transform-origin: center;
    }

    .ob-topbar {
        position: absolute;
        left: 28px;
        top: 24px;
        width: 2498px;
        height: 82px;
        border: 1px solid rgba(37, 99, 235, .10);
        border-radius: 24px;
        display: grid;
        grid-template-columns: 390px 1fr 530px;
        align-items: center;
        background: rgba(255, 255, 255, .90);
        box-shadow: 0 16px 48px rgba(30, 64, 175, .06);
    }

    .ob-brand {
        height: 100%;
        padding-left: 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        font-size: 24px;
    }

    .ob-brand img { width: 56px; height: 56px; object-fit: contain; }
    .ob-topbar > p { margin: 0; color: #6a7ba3; font-size: 17px; }

    .ob-account {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 26px;
        padding-right: 24px;
        color: #33466f;
        font-size: 16px;
    }

    .ob-account span { position: relative; }
    .ob-account span b { position: absolute; right: -13px; top: -13px; color: #fff; background: #ff5252; border-radius: 20px; padding: 1px 6px; font-size: 12px; }
    .ob-account span strong { display: block; color: #07122f; font-size: 22px; }
    .ob-account > img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }

    .ob-step-rail {
        position: absolute;
        left: 28px;
        top: 122px;
        width: 392px;
        height: 1290px;
        border: 1px solid rgba(37, 99, 235, .10);
        border-radius: 26px;
        overflow: hidden;
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 22px 70px rgba(30, 64, 175, .07);
    }

    .ob-step-list { padding: 20px 12px; display: grid; gap: 3px; }

    .ob-step {
        position: relative;
        width: 100%;
        min-height: 116px;
        border: 0;
        border-radius: 22px;
        padding: 18px 18px 18px 26px;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 15px;
        align-items: start;
        color: #20345f;
        background: transparent;
        text-align: left;
    }

    .ob-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 49px;
        top: 72px;
        height: 75px;
        border-left: 2px dashed #dbe7ff;
    }

    .ob-step b {
        width: 40px;
        height: 40px;
        border: 2px solid #d9e2f3;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #52668f;
        background: #fff;
        font-size: 17px;
    }

    .ob-step span { display: grid; gap: 8px; }
    .ob-step strong { font-size: 20px; line-height: 28px; }
    .ob-step small { color: #7183aa; font-size: 16px; line-height: 23px; }
    .ob-step.active { color: #155df7; background: linear-gradient(100deg, #edf4ff, rgba(255,255,255,.8)); }
    .ob-step.active::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 4px; background: #2468ff; }
    .ob-step.active b, .ob-step.done b { border-color: #2468ff; color: #fff; background: #2468ff; }

    .ob-rail-robot {
        position: absolute;
        left: 42px;
        bottom: 116px;
        width: 310px;
        height: 290px;
        object-fit: contain;
    }

    .ob-eta {
        position: absolute;
        left: 28px;
        right: 28px;
        bottom: 28px;
        display: grid;
        gap: 8px;
        color: #6e80a7;
        font-size: 14px;
    }
    .ob-eta strong { width: fit-content; border-radius: 999px; padding: 6px 12px; color: #5e70ff; background: #eef1ff; }

    .ob-workspace {
        position: absolute;
        left: 456px;
        top: 122px;
        width: 1324px;
        height: 1290px;
        border: 1px solid rgba(37, 99, 235, .10);
        border-radius: 28px;
        background: rgba(255, 255, 255, .88);
        box-shadow: 0 22px 70px rgba(30, 64, 175, .07);
    }

    .ob-title { padding: 38px 48px 18px; }
    .ob-title h1 { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 44px; line-height: 1.2; }
    .ob-title h1 img { width: 40px; height: 40px; object-fit: contain; }
    .ob-title p { margin: 12px 0 0; color: #6d7ea6; font-size: 20px; }

    .ob-step-content { padding: 20px 48px 120px; }

    .ob-section-head { margin-bottom: 24px; display: flex; gap: 14px; align-items: flex-start; }
    .ob-section-head > b { color: #176fff; font-size: 22px; line-height: 34px; }
    .ob-section-head h2 { margin: 0; font-size: 23px; line-height: 34px; }
    .ob-section-head p { margin: 7px 0 0; color: #60739e; font-size: 18px; line-height: 28px; }

    .ob-identity-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 34px 28px;
    }

    .ob-identity-card {
        position: relative;
        height: 320px;
        border: 1px solid #dfe7f5;
        border-radius: 22px;
        padding: 24px 22px 18px;
        display: grid;
        justify-items: center;
        align-content: start;
        color: #14244d;
        background: #fff;
        text-align: center;
        box-shadow: 0 12px 34px rgba(30, 64, 175, .035);
    }

    .ob-identity-card img { width: 132px; height: 132px; object-fit: contain; }
    .ob-identity-card strong { margin-top: 9px; font-size: 21px; }
    .ob-identity-card p { min-height: 46px; margin: 8px 0; color: #65779f; font-size: 15px; line-height: 23px; }
    .ob-identity-card small { position: absolute; left: 22px; right: 22px; bottom: 18px; width: fit-content; margin: 0 auto; border-radius: 999px; padding: 7px 13px; color: #5874aa; background: #f4f7fc; font-size: 14px; line-height: 20px; }
    .ob-identity-card.active { border: 3px solid #2172ff; padding: 22px 20px 16px; box-shadow: 0 0 0 1px rgba(33,114,255,.08), 0 18px 46px rgba(33,114,255,.12); }
    .ob-identity-card.active::after { content: ''; position: absolute; right: 15px; top: 15px; width: 30px; height: 30px; background: url('/images/ui/icons/action-new.png') center / contain no-repeat; }

    .ob-footnote { margin: 28px 0 0; color: #667ba8; font-size: 16px; line-height: 24px; }
    .ob-option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .ob-option-grid .choice { min-height: 120px; border-radius: 18px; padding: 22px; }
    .ob-option-grid .choice strong { margin-bottom: 7px; font-size: 21px; line-height: 29px; }
    .ob-option-grid .choice span { color: #60739e; font-size: 17px; line-height: 25px; }
    .ob-wide-field, .ob-product-field { margin-top: 28px; display: grid; gap: 14px; }
    .ob-wide-field > span, .ob-product-field > span { font-size: 19px; font-weight: 750; }
    .ob-wide-field .input { min-height: 70px; padding: 0 22px; font-size: 18px; }
    .ob-product-field .textarea { min-height: 280px; padding: 20px 22px; font-size: 18px; line-height: 28px; }

    .ob-review { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .ob-review div { min-height: 118px; border: 1px solid #dfe7f5; border-radius: 18px; padding: 20px; display: grid; gap: 10px; background: #fff; }
    .ob-review span { color: #667ba6; font-size: 17px; }
    .ob-review strong { font-size: 21px; line-height: 30px; }

    .ob-actions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 108px;
        border-top: 1px solid rgba(37,99,235,.09);
        display: grid;
        grid-template-columns: 1fr 1.1fr 1fr;
        gap: 28px;
        align-items: center;
        padding: 18px 210px;
        background: rgba(255,255,255,.94);
    }
    .ob-actions .btn { height: 68px; border-radius: 16px; font-size: 18px; }

    .ob-preview {
        position: absolute;
        left: 1816px;
        top: 122px;
        width: 710px;
        display: grid;
        gap: 22px;
    }

    .ob-preview-card, .ob-employee-card {
        border: 1px solid rgba(37,99,235,.10);
        border-radius: 28px;
        background: rgba(255,255,255,.90);
        box-shadow: 0 22px 70px rgba(30,64,175,.07);
    }

    .ob-preview-card { position: relative; padding: 38px 30px 28px; overflow: hidden; }
    .ob-preview-card header h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 23px; }
    .ob-preview-card header h2 img { width: 30px; height: 30px; }
    .ob-preview-card header p { margin: 10px 0 28px; color: #7183aa; font-size: 16px; }
    .ob-preview-cube { position: absolute; z-index: 1; right: 18px; top: 84px; width: 214px; height: 176px; object-fit: contain; opacity: 1; filter: saturate(1.32) contrast(1.08); pointer-events: none; }

    .ob-draft { position: relative; z-index: 2; border: 1px solid #e1e8f5; border-radius: 22px; padding: 28px; background: rgba(251,253,255,.16); }
    .ob-draft h3 { margin: 0 0 24px; font-size: 21px; }
    .ob-draft > div { min-height: 84px; border-radius: 16px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; box-shadow: 0 8px 26px rgba(30,64,175,.035); }
    .ob-draft > div + div { margin-top: 14px; }
    .ob-draft span { display: flex; align-items: center; gap: 12px; color: #506795; font-size: 18px; }
    .ob-draft span img { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; }
    .ob-draft strong { color: #667ca7; font-size: 18px; }

    .ob-employee-card { padding: 28px 30px; }
    .ob-employee-card h2 { margin: 0 0 24px; font-size: 22px; }
    .ob-employee-card > div { border-radius: 20px; padding: 18px; display: flex; gap: 20px; background: #f7faff; }
    .ob-employee-card > div > img { width: 112px; height: 112px; border-radius: 18px; object-fit: cover; }
    .ob-employee-card p { margin: 0; display: grid; align-content: center; gap: 8px; }
    .ob-employee-card strong { font-size: 22px; }
    .ob-employee-card small { width: fit-content; border-radius: 999px; padding: 4px 10px; color: #526ef5; background: #eaf0ff; }
    .ob-employee-card span { color: #536993; font-size: 18px; line-height: 1.55; }
}