* {
    box-sizing: border-box;
}

:root {
    --orange: #ff5a0a;
    --orange-dark: #ec4e00;
    --navy: #06183c;
    --navy-2: #031333;
    --page: #f4f5f8;
    --white: #ffffff;
    --text: #151922;
    --muted: #5f6673;
    --border: #e2e5e9;
    --input-border: #d7dbe1;
    --green: #15a85a;
    --red: #d63a31;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(circle at 50% 50%,
            #ffffff 0,
            #f6f7f9 42%,
            #f0f1f5 100%);
}


/* -------------------------------------------------
   HEADER
------------------------------------------------- */

.site-header {
    height: 70px;

    background: #fff;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #edf0f3;
}

.header-inner {
    width: min(1400px, calc(100% - 64px));
    margin: 0 auto;
}

.brand-logo {
    display: block;

    width: 235px;
    max-height: 52px;

    object-fit: contain;
    object-position: left center;
}


/* -------------------------------------------------
   HERO
------------------------------------------------- */

.hero {
    min-height: 205px;

    display: flex;
    align-items: center;

    color: white;

    background:
        radial-gradient(circle at 54% 48%,
            rgba(22, 67, 132, .18),
            transparent 42%),
        repeating-linear-gradient(135deg,
            transparent 0,
            transparent 165px,
            rgba(40, 88, 151, .15) 166px,
            rgba(40, 88, 151, .15) 168px,
            transparent 169px,
            transparent 330px),
        linear-gradient(90deg,
            #05193d 0%,
            #03163a 52%,
            #04183a 100%);
}

.hero-inner {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 38px;
}

.hero-icon {
    width: 132px;
    height: 132px;

    color: white;

    flex: 0 0 132px;
}

.hero-icon svg {
    width: 100%;
    height: 100%;

    display: block;
}

.hero-copy h1 {
    margin: 0 0 8px;

    font-size: clamp(35px, 4vw, 52px);
    line-height: 1;

    font-weight: 800;
    letter-spacing: -.035em;
}

.hero-copy h1 span {
    color: var(--orange);
}

.hero-copy p {
    margin: 0;

    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.36;

    color: rgba(255, 255, 255, .96);
}


/* -------------------------------------------------
   MAIN PAGE
------------------------------------------------- */

.page-shell {
    width: min(1220px, calc(100% - 48px));

    margin: 34px auto 80px;
}


/* -------------------------------------------------
   START YOUR MIGRATION PANEL
------------------------------------------------- */

.migration-panel {
    background: rgba(255, 255, 255, .98);

    border: 1px solid rgba(215, 219, 225, .82);
    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(31, 39, 55, .08),
        0 1px 2px rgba(31, 39, 55, .04);

    padding: 28px 34px 26px;
}

.panel-title {
    margin: 0 0 24px;

    text-align: center;

    font-size: 32px;
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -.025em;
}


/* -------------------------------------------------
   SOURCE + DESTINATION
------------------------------------------------- */

.account-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 64px minmax(0, 1fr);

    gap: 24px;

    align-items: center;
}

.account-card {
    background: #fff;

    border: 1px solid var(--border);
    border-radius: 9px;

    padding: 24px 26px 22px;
}

.account-card h3 {
    margin: 0 0 17px;

    font-size: 20px;
    line-height: 1.2;
}


/* -------------------------------------------------
   FORM FIELDS
------------------------------------------------- */

label {
    display: block;

    margin: 13px 0 6px;

    font-size: 13px;
    font-weight: 700;
}

input,
select {
    width: 100%;

    min-height: 41px;

    border: 1px solid var(--input-border);
    border-radius: 5px;

    background: white;

    padding: 8px 11px;

    color: var(--text);

    font: inherit;
    font-size: 14px;

    outline: none;
}

input:focus,
select:focus {
    border-color: #aeb6c2;

    box-shadow:
        0 0 0 3px rgba(255, 90, 10, .08);
}

.two-column {
    display: grid;

    grid-template-columns: 1fr 1.55fr;

    gap: 14px;
}


/* -------------------------------------------------
   PASSWORD
------------------------------------------------- */

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 70px;
}

.show-pass {
    position: absolute;

    right: 6px;
    top: 6px;

    height: 28px;
    min-width: 54px;

    border: 0;

    background: transparent;

    color: #59616c;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* -------------------------------------------------
   TEST CONNECTION
------------------------------------------------- */

.test-button {
    display: block;

    min-width: 165px;

    margin: 15px auto 0;

    padding: 9px 18px;

    border: 1px solid #aeb6c2;
    border-radius: 5px;

    background: #fff;

    color: #222936;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.test-button:hover {
    background: #fafafa;

    border-color: #89939f;
}

.connection-status {
    min-height: 18px;

    margin-top: 8px;

    text-align: center;

    font-size: 11px;
    font-weight: 700;
}

.connection-status.good {
    color: #26864d;
}

.connection-status.bad {
    color: #bf3029;
}


/* -------------------------------------------------
   CENTER ARROW
------------------------------------------------- */

.transfer-arrow {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    margin: 0 auto;

    background: #f2f3f6;

    color: #727b88;

    font-size: 31px;
    line-height: 1;
}


/* -------------------------------------------------
   START MIGRATION ROW
------------------------------------------------- */

.migration-actions {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    margin-top: 22px;

    gap: 20px;
}

.preserve-option {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin: 0;

    font-size: 14px;
    font-weight: 500;
}

.preserve-option input {
    width: 18px;
    height: 18px;

    min-height: auto;

    accent-color: var(--orange);
}

.start-button {
    grid-column: 2;

    min-width: 300px;

    padding: 14px 36px;

    border: 0;
    border-radius: 6px;

    color: white;

    background:
        linear-gradient(180deg,
            #ff6819 0%,
            #fb5200 100%);

    font-size: 17px;
    font-weight: 750;

    box-shadow:
        0 5px 12px rgba(255, 90, 10, .18);

    cursor: pointer;
}

.start-button:hover {
    background:
        linear-gradient(180deg,
            #ff5b0a 0%,
            #ed4d00 100%);
}

.start-button:disabled {
    opacity: .6;

    cursor: wait;
}

.play-icon {
    margin-right: 8px;

    font-size: 13px;
}


/* -------------------------------------------------
   CURRENT MIGRATION
------------------------------------------------- */

.current-panel {
    margin-top: 18px;

    padding: 18px 22px 18px;

    background: rgba(255, 255, 255, .98);

    border: 1px solid rgba(215, 219, 225, .82);
    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(31, 39, 55, .06),
        0 1px 2px rgba(31, 39, 55, .04);
}

.current-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.current-label {
    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 800;
}

.current-header h3 {
    margin: 0;

    font-size: 19px;
}

.status-pill {
    border-radius: 6px;

    padding: 6px 11px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .025em;
}

.status-pill.running,
.pill.running {
    color: #0b783b;

    background: #dff5e8;
}

.status-pill.complete,
.pill.complete {
    color: #0b783b;

    background: #dff5e8;
}

.status-pill.failed,
.pill.failed {
    color: #a22520;

    background: #fde4e2;
}

.status-pill.stopped,
.pill.stopped {
    color: #505968;

    background: #eceff3;
}


/* -------------------------------------------------
   PROGRESS
------------------------------------------------- */

.progress-track {
    height: 8px;

    overflow: hidden;

    margin-top: 14px;

    border-radius: 999px;

    background: #edf0f3;
}

.progress-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: var(--orange);
}

.status-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;
}

.status-row strong {
    color: var(--orange);

    font-size: 14px;
}


/* -------------------------------------------------
   LIVE LOG
------------------------------------------------- */

.log-heading {
    margin: 12px 0 6px;

    font-size: 11px;
    font-weight: 800;
}

pre {
    margin: 0;

    min-height: 165px;
    max-height: 320px;

    overflow: auto;

    padding: 12px 14px;

    border: 1px solid #e1e4e8;
    border-radius: 5px;

    background: #fff;

    color: #27303b;

    white-space: pre-wrap;
    word-break: break-word;

    font-family:
        "Cascadia Code",
        Consolas,
        "Courier New",
        monospace;

    font-size: 11px;
    line-height: 1.55;
}


/* -------------------------------------------------
   STOP BUTTON
------------------------------------------------- */

.stop-row {
    display: flex;

    justify-content: flex-end;

    margin-top: 12px;
}

.stop-button {
    padding: 9px 17px;

    border: 1px solid #df4b42;
    border-radius: 5px;

    background: #fff;

    color: #cb3028;

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
}

.stop-button:hover {
    background: #fff5f4;
}


/* -------------------------------------------------
   ERROR MESSAGE
------------------------------------------------- */

.error-box {
    margin-top: 15px;

    padding: 11px 13px;

    border: 1px solid #efc5c1;
    border-radius: 6px;

    background: #fff3f2;

    color: #aa2a23;

    font-size: 12px;
}


/* -------------------------------------------------
   HELPERS
------------------------------------------------- */

.hidden {
    display: none !important;
}


/* -------------------------------------------------
   RESPONSIVE
------------------------------------------------- */

@media (max-width: 1000px) {

    .page-shell {
        width: calc(100% - 32px);
    }

    .migration-panel {
        padding: 24px;
    }

    .account-grid {
        grid-template-columns:
            minmax(0, 1fr) 54px minmax(0, 1fr);

        gap: 16px;
    }

    .account-card {
        padding: 20px;
    }
}


@media (max-width: 820px) {

    .header-inner {
        width: calc(100% - 32px);
    }

    .brand-logo {
        width: 200px;
    }

    .hero {
        min-height: 225px;
    }

    .hero-inner {
        gap: 20px;
    }

    .hero-icon {
        width: 105px;
        height: 105px;

        flex-basis: 105px;
    }

    .page-shell {
        width: calc(100% - 24px);

        margin-top: 28px;
    }

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

    .transfer-arrow {
        transform: rotate(90deg);
    }

    .migration-actions {
        grid-template-columns: 1fr;
    }

    .start-button {
        grid-column: auto;

        width: 100%;
    }

    .preserve-option {
        justify-content: center;
    }
}


@media (max-width: 520px) {

    .site-header {
        height: 62px;
    }

    .brand-logo {
        width: 175px;
    }

    .hero-inner {
        flex-direction: column;

        text-align: center;

        padding: 24px 0;
    }

    .hero-icon {
        width: 90px;
        height: 90px;

        flex-basis: 90px;
    }

    .hero-copy h1 {
        font-size: 34px;
    }

    .hero-copy p {
        font-size: 17px;
    }

    .migration-panel {
        padding: 20px 15px;
    }

    .panel-title {
        font-size: 26px;
    }

    .two-column {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .current-header {
        align-items: flex-start;
    }

    .start-button {
        min-width: 0;
    }
}