.rb-shell {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 60px);
        font-size: 12px;
        background: #f6f8fa;
    }

    .rb-head {
        background: #fff;
        border-bottom: 1px solid #e2e6ea;
        padding: 8px 14px 4px;
    }

    .rb-head-title {
        font-size: 16px;
        font-weight: 700;
        color: #12508a;
    }

    .rb-head-sub {
        font-size: 11px;
        color: #7b8794;
        margin-bottom: 6px;
    }

    .rb-steps {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .rb-step {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 4px 4px;
        border-radius: 16px;
        cursor: pointer;
    }

    .rb-step + .rb-step {
        border-left: 1px solid #e2e6ea;
        padding-left: 10px;
    }

    .rb-step-dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #dfe4ea;
        color: #66707a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        flex: 0 0 auto;
    }

    .rb-step-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .rb-step-text > b {
        font-size: 12px;
        color: #66707a;
    }

    .rb-step-text > i {
        font-size: 10px;
        font-style: normal;
        color: #9aa4ae;
    }

    .rb-step-current .rb-step-dot {
        background: #1266b5;
        color: #fff;
    }

    .rb-step-current .rb-step-text > b {
        color: #12508a;
    }

    .rb-step-done .rb-step-dot {
        background: #1b7f4f;
        color: #fff;
    }

    .rb-step-done .rb-step-text > b {
        color: #1b7f4f;
    }

    .rb-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 10px;
    }

    .rb-foot {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: #fff;
        border-top: 1px solid #e2e6ea;
    }

    .rb-foot-spacer {
        flex: 1 1 auto;
    }

    .rb-card {
        border: 1px solid #dde2e8;
        border-radius: 6px;
        padding: 8px 10px 10px;
        margin-bottom: 8px;
        background: #fff;
    }

    .rb-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-end;
        margin-bottom: 8px;
    }

    .rb-row-tight {
        margin: 6px 0;
    }

    .rb-group {
        display: flex;
        flex-direction: column;
        min-width: 210px;
    }

    .rb-group-wide {
        min-width: 340px;
    }

    .rb-group > label {
        font-size: 11px;
        margin-bottom: 2px;
        color: #555;
    }

    .rb-group .form-control {
        height: 28px;
        font-size: 12px;
        padding: 2px 6px;
    }

    .rb-group-btn {
        min-width: auto;
    }

    .rb-hint {
        font-size: 11px;
        color: #555;
        margin: 4px 0 6px;
        word-break: break-all;
    }

    .rb-warn {
        color: #b34700;
    }

    .rb-pane-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 8px;
        background: #eef3f8;
        border: 1px solid #e2e6ea;
        border-radius: 4px 4px 0 0;
        font-weight: 600;
        font-size: 11px;
        color: #12508a;
        margin-top: 6px;
    }

    .rb-pane-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rb-pane-actions .btn {
        height: 24px;
        padding: 1px 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .rb-search {
        height: 24px;
        font-size: 11px;
        padding: 1px 6px;
        width: 180px;
    }

    /* step 1 table cards */
    .rb-table-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
        border: 1px solid #e2e6ea;
        border-top: none;
    }

    .rb-table-card {
        width: 210px;
        border: 1px solid #e6e9ed;
        border-radius: 4px;
        padding: 5px 8px;
        background: #fafbfc;
    }

    .rb-table-card-name {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rb-table-card-meta {
        font-size: 10px;
        color: #8a8f95;
    }

    /* step 2 picker */
    .rb-picker {
        display: flex;
        gap: 8px;
        align-items: stretch;
    }

    .rb-tables {
        width: 250px;
        flex: 0 0 250px;
        border: 1px solid #e2e6ea;
        border-radius: 5px;
        overflow-y: auto;
        max-height: 330px;
        background: #fafbfc;
    }

    .rb-fields {
        flex: 1 1 auto;
        border: 1px solid #e2e6ea;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        max-height: 330px;
        min-width: 0;
    }

    .rb-fields .rb-pane-head,
    .rb-tables .rb-pane-head {
        margin-top: 0;
        border: none;
        border-bottom: 1px solid #e2e6ea;
        border-radius: 0;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .rb-table-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 5px 8px;
        cursor: pointer;
        border-bottom: 1px solid #edf0f3;
    }

    .rb-table-item:hover {
        background: #e9f2fb;
    }

    .rb-table-item.rb-active {
        background: #d6e9fb;
        font-weight: 600;
    }

    .rb-table-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rb-count {
        flex: 0 0 auto;
        font-size: 10px;
        color: #777;
        background: #fff;
        border: 1px solid #dde2e8;
        border-radius: 9px;
        padding: 0 6px;
    }

    .rb-count-on {
        color: #fff;
        background: #1b7f4f;
        border-color: #1b7f4f;
    }

    .rb-field-list {
        overflow-y: auto;
        padding: 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-content: flex-start;
    }

    .rb-field {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 235px;
        padding: 3px 6px;
        border: 1px solid #e6e9ed;
        border-radius: 4px;
        cursor: pointer;
        margin: 0;
        font-weight: 400;
    }

    .rb-field:hover {
        background: #f3f8fd;
    }

    .rb-field.rb-field-on {
        background: #eaf7ef;
        border-color: #b6dcc4;
    }

    .rb-field-caption {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rb-field-col {
        flex: 0 0 auto;
        font-size: 10px;
        color: #8a8f95;
        max-width: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rb-selected {
        margin-top: 8px;
        border: 1px solid #e2e6ea;
        border-radius: 5px;
    }

    .rb-selected .rb-pane-head {
        margin-top: 0;
        border: none;
        border-bottom: 1px solid #e2e6ea;
        border-radius: 0;
    }

    .rb-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px;
        max-height: 100px;
        overflow-y: auto;
    }

    .rb-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #eef3f8;
        border: 1px solid #d3dde7;
        border-radius: 12px;
        padding: 1px 4px 1px 8px;
        font-size: 11px;
    }

    .rb-chip-table {
        color: #7b8794;
        font-size: 10px;
    }

    .rb-chip-text {
        font-weight: 600;
    }

    .rb-chip-x {
        border: none;
        background: transparent;
        color: #b03030;
        font-size: 14px;
        line-height: 1;
        padding: 0 3px;
        cursor: pointer;
    }

    .rb-empty {
        font-size: 11px;
        color: #8a8f95;
        padding: 8px;
    }

    /* step 3 sql */
    .rb-sql {
        font-family: Consolas, monospace;
        font-size: 12px;
        border-radius: 0 0 4px 4px;
    }

    .rb-sql-view {
        font-family: Consolas, monospace;
        font-size: 12px;
        background: #fbfcfd;
        border: 1px solid #e2e6ea;
        padding: 8px;
        margin: 0;
        max-height: 420px;
        overflow: auto;
    }

    .rb-banner {
        margin: 6px 0;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 11px;
    }

    .rb-banner-ok {
        background: #eaf7ef;
        border: 1px solid #b6dcc4;
        color: #16643f;
    }

    .rb-banner-bad {
        background: #fdecea;
        border: 1px solid #f2c0bb;
        color: #8f2b21;
    }

    /* results table */
    .rb-result-wrap {
        border: 1px solid #e2e6ea;
        border-top: none;
        max-height: 340px;
        overflow: auto;
    }

    .rb-result {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
    }

    .rb-result th {
        position: sticky;
        top: 0;
        background: #f2f5f8;
        border-bottom: 1px solid #dde2e8;
        padding: 4px 6px;
        text-align: left;
        white-space: nowrap;
        font-weight: 600;
    }

    .rb-result td {
        border-bottom: 1px solid #f0f2f4;
        padding: 3px 6px;
        white-space: nowrap;
    }

    .rb-result tbody tr:hover {
        background: #f7fbff;
    }

    .rb-num {
        text-align: right;
    }

    /* step 4 */
    .rb-preview-split {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .rb-preview-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rb-checks {
        width: 230px;
        flex: 0 0 230px;
        border: 1px solid #e2e6ea;
        border-radius: 5px;
    }

    .rb-checks .rb-pane-head {
        margin-top: 0;
        border: none;
        border-bottom: 1px solid #e2e6ea;
        border-radius: 0;
    }

    .rb-check {
        display: flex;
        gap: 6px;
        padding: 6px 8px;
        border-bottom: 1px solid #f0f2f4;
    }

    .rb-check-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        flex: 0 0 auto;
    }

    .rb-ok {
        background: #1b7f4f;
    }

    .rb-bad {
        background: #c0642f;
    }

    .rb-check-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .rb-check-text > i {
        font-style: normal;
        font-size: 10px;
        color: #8a8f95;
    }

    .rb-tabs {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid #e2e6ea;
    }

    .rb-tab {
        border: none;
        background: transparent;
        padding: 5px 12px;
        font-size: 12px;
        color: #66707a;
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .rb-tab-on {
        color: #12508a;
        font-weight: 600;
        border-bottom-color: #1266b5;
    }

    /* ---- print layout designer ---- */
    .rb-design {
        display: flex;
        gap: 10px;
        align-items: stretch;
        margin-top: 8px;
    }

    .rb-side {
        width: 215px;
        flex: 0 0 215px;
        border: 1px solid #e2e6ea;
        border-radius: 5px;
        background: #fff;
        align-self: flex-start;
    }

    .rb-side-head {
        padding: 5px 8px;
        background: #eef3f8;
        border-bottom: 1px solid #e2e6ea;
        font-weight: 700;
        font-size: 11px;
        color: #12508a;
    }

    .rb-side-group {
        padding: 6px 8px;
        border-bottom: 1px solid #f2f4f6;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .rb-side-group > label {
        font-size: 10px;
        color: #7b8794;
        margin: 0;
    }

    .rb-side-group .form-control {
        height: 26px;
        font-size: 11px;
        padding: 1px 6px;
    }

    .rb-side-inline {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        color: #7b8794;
    }

    .rb-side-check {
        font-size: 11px;
        font-weight: 400;
        margin: 0;
        color: #3d434a;
    }

    .rb-side-tip {
        padding: 8px;
        font-size: 11px;
        color: #8a8f95;
    }

    .rb-mode {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
    }

    .rb-mode-btn {
        border: 1px solid #d5dbe1;
        background: #fff;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 12px;
        color: #495057;
        cursor: pointer;
    }

    .rb-mode-on {
        border-color: #1266b5;
        background: #eef5fc;
        color: #12508a;
        font-weight: 700;
    }

    .rb-report-list {
        max-height: 260px;
        overflow-y: auto;
        border: 1px solid #e2e6ea;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .rb-report-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 10px;
        border-bottom: 1px solid #f1f3f5;
        cursor: pointer;
    }

    .rb-report-item:hover {
        background: #f3f8fd;
    }

    .rb-report-name {
        flex: 1 1 auto;
        font-size: 12px;
        font-weight: 600;
        color: #212529;
    }

    .rb-report-meta {
        font-size: 11px;
        color: #8a8f95;
    }

    .rb-report-tag {
        font-size: 10px;
        font-weight: 700;
        color: #12508a;
        background: #eef3f8;
        border-radius: 3px;
        padding: 1px 6px;
    }

    .rb-side-tabs {
        display: flex;
        border-bottom: 1px solid #e2e6ea;
        background: #fafbfc;
    }

    .rb-side-tab {
        flex: 1 1 0;
        border: none;
        background: transparent;
        padding: 5px 4px;
        font-size: 11px;
        color: #66707a;
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .rb-side-tab-on {
        color: #12508a;
        font-weight: 700;
        border-bottom-color: #1266b5;
        background: #fff;
    }

    .rb-spin {
        display: inline-flex;
        align-items: center;
        border: 1px solid #dde2e8;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
    }

    .rb-spin > button {
        border: none;
        background: #f2f5f8;
        width: 24px;
        height: 24px;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        color: #3d434a;
    }

    .rb-spin > button:hover {
        background: #e2ebf4;
    }

    .rb-spin > span {
        min-width: 56px;
        text-align: center;
        font-size: 11px;
    }

    .rb-spin-sm > span {
        min-width: 44px;
    }

    .rb-btn-row {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
    }

    .rb-btn-row .btn {
        height: 24px;
        padding: 1px 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .rb-tgl {
        border: 1px solid #dde2e8;
        background: #fff;
        border-radius: 4px;
        height: 24px;
        min-width: 30px;
        padding: 0 7px;
        font-size: 11px;
        cursor: pointer;
        color: #3d434a;
    }

    .rb-tgl-on {
        background: #1266b5;
        border-color: #1266b5;
        color: #fff;
    }

    .rb-color-row {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        color: #7b8794;
    }

    .rb-color-row input[type=color] {
        width: 34px;
        height: 24px;
        padding: 0;
        border: 1px solid #dde2e8;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
    }

    .rb-canvas {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .rb-canvas-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 8px;
        border: 1px solid #e2e6ea;
        border-radius: 5px 5px 0 0;
        background: #fff;
        flex-wrap: wrap;
    }

    .rb-page-num {
        font-size: 11px;
        color: #66707a;
        min-width: 66px;
        text-align: center;
    }

    .rb-paper-host {
        border: 1px solid #e2e6ea;
        border-top: none;
        background: #eef0f2;
        padding: 12px;
        overflow: auto;
        max-height: 520px;
        display: flex;
        justify-content: center;
    }

    .rb-paper {
        background: #fff;
        border: 1px solid #d8dee4;
        box-shadow: 0 1px 5px rgba(0,0,0,.1);
        padding: 14px 16px;
        transform-origin: top center;
        height: fit-content;
    }

    .rb-paper-a4l {
        width: 1050px;
    }

    .rb-paper-a4p {
        width: 760px;
    }

    .rb-paper-a3l {
        width: 1450px;
    }

    .rb-paper-ltrl {
        width: 1010px;
    }

    .rb-paper-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1px solid #333;
        padding-bottom: 4px;
    }

    .rb-company {
        font-size: 14px;
        font-weight: 700;
    }

    .rb-company-sub {
        font-size: 10px;
        color: #555;
    }

    .rb-printed {
        font-size: 10px;
        color: #555;
        text-align: right;
        white-space: nowrap;
    }

    .rb-paper-title {
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        margin-top: 8px;
    }

    .rb-paper-period {
        text-align: center;
        font-size: 11px;
        color: #66707a;
        margin-bottom: 6px;
    }

    .rb-paper-foot {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: #555;
        margin-top: 6px;
        padding-top: 3px;
        border-top: 1px solid #e2e6ea;
    }

    .rb-print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
        margin-top: 6px;
        table-layout: auto;
    }

    .rb-print-table th {
        background: #eef3f8;
        color: #12508a;
        border-top: 1px solid #b9c2cb;
        border-bottom: 1px solid #b9c2cb;
        padding: 4px 6px;
        text-align: left;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .rb-print-table th.rb-th-sel {
        outline: 2px solid #1266b5;
        outline-offset: -2px;
    }

    .rb-print-table td {
        border-bottom: 1px solid #eceff1;
        padding: 3px 6px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rb-print-table tfoot td {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        font-weight: 700;
    }

    @media print {
        body * {
            visibility: hidden !important;
        }

        .rb-print-area,
        .rb-print-area * {
            visibility: visible !important;
        }

        .rb-print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            border: none;
            box-shadow: none;
            padding: 0;
            transform: none !important;
        }

        .rb-no-print {
            display: none !important;
        }

        .rb-print-table thead {
            display: table-header-group;
        }

        .rb-print-table tr {
            page-break-inside: avoid;
        }
    }

    /* step 5 */
    .rb-types {
        display: flex;
        gap: 8px;
        padding: 8px;
        border: 1px solid #e2e6ea;
        border-top: none;
        margin-bottom: 4px;
    }

    .rb-type {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        flex: 1 1 0;
        border: 1px solid #e6e9ed;
        border-radius: 5px;
        padding: 8px;
        cursor: pointer;
        margin: 0;
        font-weight: 400;
    }

    .rb-type-on {
        border-color: #1266b5;
        background: #f2f8fd;
    }

    .rb-type-body {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
    }

    .rb-type-body > i {
        font-style: normal;
        font-size: 11px;
        color: #66707a;
    }

    .rb-type-body > u {
        text-decoration: none;
        font-family: Consolas, monospace;
        font-size: 10px;
        color: #8a8f95;
        margin-top: 2px;
    }

    .rb-msg {
        font-size: 12px;
        padding: 6px 10px;
        margin-top: 8px;
    }